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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
import { FC } from 'react';
import { useIntl } from 'react-intl';
import { useAttributes, useLocalStorage } from '../../../utils/hooks';
import {
RadioGroup,
type RadioGroupCallback,
type RadioGroupCallbackProps,
type RadioGroupOption,
type RadioGroupProps,
} from './radio-group';
export type MotionToggleValue = 'on' | 'off';
export type MotionToggleProps = Pick<
RadioGroupProps,
'bodyClassName' | 'groupClassName' | 'legendClassName' | 'legendPosition'
> & {
/**
* True if motion should be reduced by default.
*/
defaultValue: 'on' | 'off';
/**
* The local storage key to save preference.
*/
storageKey: string;
};
/**
* MotionToggle component
*
* Render a Toggle component to set reduce motion.
*/
export const MotionToggle: FC<MotionToggleProps> = ({
defaultValue,
storageKey,
...props
}) => {
const intl = useIntl();
const { value: isReduced, setValue: setIsReduced } = useLocalStorage<boolean>(
storageKey,
defaultValue === 'on' ? false : true
);
useAttributes({
element:
typeof window !== 'undefined' ? document.documentElement : undefined,
attribute: 'reduced-motion',
value: `${isReduced}`,
});
const reduceMotionLabel = intl.formatMessage({
defaultMessage: 'Animations:',
description: 'MotionToggle: reduce motion label',
id: '/q5csZ',
});
const onLabel = intl.formatMessage({
defaultMessage: 'On',
description: 'MotionToggle: activate reduce motion label',
id: 'va65iw',
});
const offLabel = intl.formatMessage({
defaultMessage: 'Off',
description: 'MotionToggle: deactivate reduce motion label',
id: 'pWKyyR',
});
const options: RadioGroupOption[] = [
{
id: 'reduced-motion-on',
label: onLabel,
name: 'reduced-motion',
value: 'on',
},
{
id: 'reduced-motion-off',
label: offLabel,
name: 'reduced-motion',
value: 'off',
},
];
/**
* Update the current setting.
*
* @param {string} newValue - A boolean as string.
*/
const updateSetting = (newValue: MotionToggleValue) => {
setIsReduced(newValue === 'on' ? false : true);
};
/**
* Handle change events.
*
* @param {RadioGroupCallbackProps} props - An object with choices.
*/
const handleChange: RadioGroupCallback = ({
choices,
updateChoice,
}: RadioGroupCallbackProps) => {
if (choices.new === choices.prev) {
const newChoice = choices.new === 'on' ? 'off' : 'on';
updateChoice(newChoice);
updateSetting(newChoice);
} else {
updateSetting(choices.new as MotionToggleValue);
}
};
return (
<RadioGroup
{...props}
initialChoice={defaultValue}
kind="toggle"
legend={reduceMotionLabel}
onChange={handleChange}
options={options}
/>
);
};
|
