selector BooleanSelector.tsx

0% Statements 0/49

0% Branches 0/1

0% Functions 0/1

0% Lines 0/49

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useTheme } from '@emotion/react';
import { IconSquareRoundedCheck, IconSquareRoundedX } from '@tabler/icons-react';
import { memo, useMemo } from 'react';
import { useIntl } from 'react-intl';

import { RadioButtonGroup, useColorSchemeContext, type RadioButtonGroupProps } from '@allshares/studio-design-system';

export type BooleanStringType = '' | 'false' | 'true';

const BooleanString: Record<'EMPTY' | 'FALSE' | 'TRUE', BooleanStringType> = {
  TRUE: 'true',
  FALSE: 'false',
  EMPTY: '',
} as const;

export type BooleanSelectorProps = Omit<RadioButtonGroupProps<BooleanStringType>, 'options'>;

export const BooleanSelector = memo(function BooleanSelector({ ...props }: BooleanSelectorProps) {
  const theme = useTheme();
  const { colorScheme } = useColorSchemeContext();
  const { formatMessage } = useIntl();

  const options = useMemo(
    () => [
      {
        icon: <IconSquareRoundedX color={colorScheme === 'dark' ? theme.ds.hues.red[700] : theme.ds.hues.red[500]} />,
        label: formatMessage({ defaultMessage: 'False' }),
        value: BooleanString.FALSE,
      },
      {
        icon: (
          <IconSquareRoundedCheck
            color={colorScheme === 'dark' ? theme.ds.hues.green[700] : theme.ds.hues.green[500]}
          />
        ),
        label: formatMessage({ defaultMessage: 'True' }),
        value: BooleanString.TRUE,
      },
    ],
    [formatMessage, theme, colorScheme],
  );

  return (
    <RadioButtonGroup
      {...props}
      options={options}
    />
  );
});