/
switch.tsx
97 lines (90 loc) · 2.54 KB
/
switch.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
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
import React from "react";
import Box from "../../atoms/box/box";
import { MoleculeComponentProps, StateProps } from "../../../theme/src/types";
import { pearl } from "../../../pearl";
import Pressable, { PressableProps } from "../../atoms/pressable/pressable";
import { useCheckedState } from "../../../hooks";
import { boxStyleFunctions } from "../../../theme/src/style-functions";
import { SwitchAtoms } from "./switch.config";
export type BaseSwitchProps = PressableProps &
StateProps<"_checked" | "_disabled"> & {
/**
* Whether the switch is in a checked state.
*
* @default false
*/
isChecked?: boolean;
/**
* Whether the switch is disabled.
*
* @default false
*/
isDisabled?: boolean;
};
const BaseSwitch = React.memo(
React.forwardRef(
(
{
children,
atoms,
...rest
}: MoleculeComponentProps<"Switch", BaseSwitchProps, SwitchAtoms>,
ref: any
) => {
let { isChecked, isDisabled, ...otherTrackProps } = atoms.track;
const { propsWithCheckedStyles: propsWithCheckedStylesForTrack } =
useCheckedState(
otherTrackProps,
boxStyleFunctions,
"molecule",
true,
isChecked
);
otherTrackProps = propsWithCheckedStylesForTrack;
const { propsWithCheckedStyles: propsWithCheckedStylesForKnob } =
useCheckedState(
atoms.knob,
boxStyleFunctions,
"molecule",
true,
isChecked
);
atoms.knob = propsWithCheckedStylesForKnob;
return (
<Pressable
{...(otherTrackProps as any)}
ref={ref}
accessible={true}
accessibilityRole="switch"
isDisabled={isDisabled}
accessibilityLabel={atoms.track.accessibilityLabel}
accessibilityState={{
disabled: isDisabled,
checked: isChecked,
}}
accessibilityHint={rest.accessibilityHint}
>
<Box {...atoms.knob} />
</Pressable>
);
}
)
);
/** The Progress component is a visual indicator of completion percentage. */
const Switch = pearl<BaseSwitchProps, "molecule", SwitchAtoms>(
BaseSwitch,
{
componentName: "Switch",
type: "molecule",
animatable: true,
},
undefined,
{
partForOverridenAnimationProps: "track",
partForOverridenNativeProps: "track",
partForOverridenStyleProps: "track",
}
);
export type SwitchProps = React.ComponentProps<typeof Switch>;
Switch.displayName = "Switch";
export default Switch;