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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
import { FC } from 'react';
import { useIntl } from 'react-intl';
import useLocalStorage from '../../../utils/hooks/use-local-storage';
import useUpdateAckeeOptions, {
type AckeeOptions,
} from '../../../utils/hooks/use-update-ackee-options';
import RadioGroup, {
type RadioGroupCallback,
type RadioGroupCallbackProps,
type RadioGroupOption,
type RadioGroupProps,
} from './radio-group';
import Tooltip, { type TooltipProps } from '../modals/tooltip';
export type AckeeToggleProps = Pick<
RadioGroupProps,
| 'bodyClassName'
| 'buttonClassName'
| 'groupClassName'
| 'legendClassName'
| 'legendPosition'
> & {
/**
* Set additional classnames to the toggle wrapper.
*/
className?: string;
/**
* True if motion should be reduced by default.
*/
defaultValue: AckeeOptions;
/**
* The local storage key to save preference.
*/
storageKey: string;
/**
* Set additional classnames to the tooltip wrapper.
*/
tooltipClassName?: TooltipProps['className'];
};
/**
* AckeeToggle component
*
* Render a Toggle component to set reduce motion.
*/
const AckeeToggle: FC<AckeeToggleProps> = ({
defaultValue,
storageKey,
tooltipClassName,
...props
}) => {
const intl = useIntl();
const { value, setValue } = useLocalStorage<AckeeOptions>(
storageKey,
defaultValue
);
useUpdateAckeeOptions(value);
const ackeeLabel = intl.formatMessage({
defaultMessage: 'Tracking:',
description: 'AckeeToggle: select label',
id: '0gVlI3',
});
const tooltipTitle = intl.formatMessage({
defaultMessage: 'Ackee tracking (analytics)',
description: 'AckeeToggle: tooltip title',
id: 'nGss/j',
});
const tooltipContent = [
intl.formatMessage({
defaultMessage: 'Partial includes only page url, views and duration.',
description: 'AckeeToggle: tooltip message',
id: 'ZB/Aw2',
}),
intl.formatMessage({
defaultMessage:
'Full includes all information from partial as well as information about referrer, operating system, device, browser, screen size and language.',
description: 'AckeeToggle: tooltip message',
id: '7zDlQo',
}),
];
const partialLabel = intl.formatMessage({
defaultMessage: 'Partial',
description: 'AckeeToggle: partial option name',
id: 'tIZYpD',
});
const fullLabel = intl.formatMessage({
defaultMessage: 'Full',
description: 'AckeeToggle: full option name',
id: '5eD6y2',
});
const options: RadioGroupOption[] = [
{
id: 'ackee-full',
label: fullLabel,
name: 'ackee',
value: 'full',
},
{
id: 'ackee-partial',
label: partialLabel,
name: 'ackee',
value: 'partial',
},
];
/**
* Handle change events.
*
* @param {RadioGroupCallbackProps} props - An object with choices.
*/
const handleChange: RadioGroupCallback = ({
choices,
updateChoice,
}: RadioGroupCallbackProps) => {
let newChoice: AckeeOptions = choices.new as AckeeOptions;
if (choices.new === choices.prev) {
newChoice = choices.new === 'full' ? 'partial' : 'full';
updateChoice(newChoice);
}
setValue(newChoice);
};
return (
<RadioGroup
initialChoice={value}
kind="toggle"
legend={ackeeLabel}
onChange={handleChange}
options={options}
Tooltip={
<Tooltip
title={tooltipTitle}
content={tooltipContent}
icon="?"
className={tooltipClassName}
/>
}
{...props}
/>
);
};
export default AckeeToggle;
|
