-
Notifications
You must be signed in to change notification settings - Fork 13
/
Toggle.tsx
41 lines (36 loc) · 1.01 KB
/
Toggle.tsx
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
import {
Label,
StyledSwitch,
StyledThumb,
StyledToggle,
} from "src/components/Viewer/Viewer/Toggle.styled";
import React, { useEffect, useState } from "react";
import { useViewerDispatch, useViewerState } from "src/context/viewer-context";
const Toggle = () => {
const { configOptions } = useViewerState();
const dispatch: any = useViewerDispatch();
const [checked, setChecked] = useState(configOptions?.informationPanel?.open);
useEffect(() => {
dispatch({
type: "updateInformationOpen",
informationOpen: checked,
});
}, [checked]);
return (
<StyledToggle>
<Label htmlFor="information-toggle" css={checked ? { opacity: "1" } : {}}>
More Information
</Label>
<StyledSwitch
checked={checked}
onCheckedChange={() => setChecked(!checked)}
id="information-toggle"
aria-label="information panel toggle"
name="toggled?"
>
<StyledThumb />
</StyledSwitch>
</StyledToggle>
);
};
export default Toggle;