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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 4x 4x 4x 2x 2x 2x 2x 2x 2x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 1x | import { css } from '@emotion/react';
import { IconSquareRoundedCheck, IconSquareRoundedX } from '@tabler/icons-react';
import { Fragment, memo } from 'react';
import { FormattedMessage } from 'react-intl';
import { Typography } from '@allshares/studio-design-system';
import {
accentuatedLabel,
defaultLabel,
dimmedLabel,
IS_COMPUTING_CLASSNAME,
} from '../../FieldValuePrettyFormat.styles';
import { LabelSize, LabelVariant, TypographyVariantMap } from '../../types';
const container = css`
display: flex;
align-items: center;
gap: 8px;
`;
export type BooleanPrettyFormatProps = {
readonly value?: boolean | null;
readonly variant?: LabelVariant;
readonly size?: LabelSize;
readonly isComputing?: boolean;
};
export const BooleanPrettyFormat = memo(function BooleanPrettyFormat({
value,
variant = LabelVariant.DEFAULT,
size = LabelSize.MEDIUM,
isComputing,
}: BooleanPrettyFormatProps) {
if (typeof value !== 'boolean') {
// Blank if null
return null;
}
return (
<span
className={isComputing ? IS_COMPUTING_CLASSNAME : undefined}
css={[
container,
variant === LabelVariant.DEFAULT && defaultLabel,
variant === LabelVariant.ACCENTUATED && accentuatedLabel,
variant === LabelVariant.DIMMED && dimmedLabel,
]}
>
{value ? (
<Fragment>
<IconSquareRoundedCheck
size="16px"
css={(theme) => css`
color: ${theme.ds.hues.green[500]};
[data-color-scheme='dark'] & {
color: ${theme.ds.hues.green[700]};
}
`}
/>
<Typography variant={TypographyVariantMap[variant][size]}>
<FormattedMessage defaultMessage="True" />
</Typography>
</Fragment>
) : (
<Fragment>
<IconSquareRoundedX
size="16px"
css={(theme) => css`
color: ${theme.ds.hues.red[500]};
[data-color-scheme='dark'] & {
color: ${theme.ds.hues.green[700]};
}
`}
/>
<Typography variant={TypographyVariantMap[variant][size]}>
<FormattedMessage defaultMessage="False" />
</Typography>
</Fragment>
)}
</span>
);
});
|