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
|
/* eslint-disable max-statements */
import { type ChangeEvent, type FC, useState, useCallback } from 'react';
import { useIntl } from 'react-intl';
import {
type AckeeOptions,
useLocalStorage,
useUpdateAckeeOptions,
} from '../../../../utils/hooks';
import { Legend, List, ListItem } from '../../../atoms';
import {
Switch,
type SwitchOption,
type SwitchProps,
Tooltip,
type TooltipProps,
} from '../../../molecules';
export type AckeeToggleProps = Omit<
SwitchProps,
'isInline' | 'items' | 'name' | 'onSwitch' | 'value'
> &
Pick<TooltipProps, 'direction'> & {
/**
* 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;
};
/**
* AckeeToggle component
*
* Render a Toggle component to set reduce motion.
*/
export const AckeeToggle: FC<AckeeToggleProps> = ({
defaultValue,
direction,
storageKey,
...props
}) => {
const intl = useIntl();
const { value, setValue } = useLocalStorage<AckeeOptions>(
storageKey,
defaultValue
);
const [isTooltipOpened, setIsTooltipOpened] = useState(false);
useUpdateAckeeOptions(value);
const ackeeLabel = intl.formatMessage({
defaultMessage: 'Tracking:',
description: 'AckeeToggle: select label',
id: '0gVlI3',
});
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 tooltipTitle = intl.formatMessage({
defaultMessage: 'Ackee tracking (analytics)',
description: 'AckeeToggle: tooltip title',
id: 'nGss/j',
});
const tooltipPartial = intl.formatMessage({
defaultMessage: 'Partial includes only page url, views and duration.',
description: 'AckeeToggle: tooltip message',
id: 'ZB/Aw2',
});
const tooltipFull = 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 options = [
{ id: 'ackee-full' as const, label: fullLabel, value: 'full' },
{ id: 'ackee-partial' as const, label: partialLabel, value: 'partial' },
] satisfies [SwitchOption, SwitchOption];
const updateSetting = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value === 'full' ? 'full' : 'partial');
},
[setValue]
);
const closeTooltip = useCallback(() => {
setIsTooltipOpened(false);
}, []);
const toggleTooltip = useCallback(() => {
setIsTooltipOpened((prev) => !prev);
}, []);
return (
<Switch
{...props}
isInline
items={options}
legend={<Legend>{ackeeLabel}</Legend>}
name="ackee"
onSwitch={updateSetting}
tooltip={
<Tooltip
direction={direction}
heading={tooltipTitle}
isOpen={isTooltipOpened}
onClickOutside={closeTooltip}
onToggle={toggleTooltip}
>
<List>
{options.map((option) => (
<ListItem key={option.id}>
{option.id === 'ackee-full' ? tooltipFull : tooltipPartial}
</ListItem>
))}
</List>
</Tooltip>
}
value={value}
/>
);
};
|
