hooks use-token-format-options.tsx

0% Statements 0/33

0% Branches 0/1

0% Functions 0/1

0% Lines 0/33

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { cloneElement, useMemo } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';

import { Group } from '@allshares/studio-design-system';
import { FormatsEnum } from '@amalia/data-capture/fields/types';

import { formatToIcon } from '../icons/format-icon.mapper';
import { formatsEnumMessages } from '../intl/formats-enum.messages';

const allFormats = Object.values(FormatsEnum);

export const useTokenFormatOptions = (supportedFormats: FormatsEnum[] = allFormats) => {
  const { formatMessage } = useIntl();

  return useMemo(
    () =>
      supportedFormats.map((format) => ({
        value: format,
        label: formatMessage(formatsEnumMessages[format]),
        icon: formatToIcon[format],
        valueLabel: (
          <Group
            align="center"
            gap={6}
          >
            {cloneElement(formatToIcon[format], { height: 16, width: 16 })}
            <FormattedMessage {...formatsEnumMessages[format]} />
          </Group>
        ),
      })),
    [supportedFormats, formatMessage],
  );
};