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 | 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 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { css } from '@emotion/react';
import { memo, useCallback } from 'react';
import { FormattedMessage } from 'react-intl';
import { RadioButtonGroup, Stack, Typography, type RadioButtonOptionShape } from '@allshares/studio-design-system';
type OptionsProps = {
readonly isApplyToOverall: boolean;
readonly setIsApplyToOverall: (field: string, value: boolean) => void;
};
type ApplyToValue = 'global' | 'this';
const options: RadioButtonOptionShape<ApplyToValue>[] = [
{
label: <FormattedMessage defaultMessage="This statement only" />,
value: 'this',
},
{
label: <FormattedMessage defaultMessage="All statements" />,
value: 'global',
},
];
export const OverwriteOptions = memo(function OverwriteOptions({
isApplyToOverall,
setIsApplyToOverall,
}: OptionsProps) {
const handleChange = useCallback(
(value: ApplyToValue) => setIsApplyToOverall('isApplyToOverall', value === 'global'),
[setIsApplyToOverall],
);
return (
<Stack gap={16}>
<RadioButtonGroup<ApplyToValue>
required
id="isApplyToOverall"
label={<FormattedMessage defaultMessage="Apply overwrite to" />}
name="isApplyToOverall"
options={options}
value={isApplyToOverall ? 'global' : 'this'}
onChange={handleChange}
/>
{!!isApplyToOverall && (
<Typography
variant="bodyXsmallRegular"
css={(theme) => css`
font-style: italic;
color: ${theme.ds.colors.gray[800]};
[data-color-scheme='dark'] & {
color: ${theme.ds.colors.gray[200]};
}
`}
>
<FormattedMessage defaultMessage="This overwrite will be applied to all statements using this value, regardless of owner or period.{br}Don't forget to recompute affected statements to apply the changes." />
</Typography>
)}
</Stack>
);
});
|