@herca/rn-kit 0.1.29 → 0.1.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,36 +9,37 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
9
9
|
export default function Switch({
|
|
10
10
|
label,
|
|
11
11
|
dotColor,
|
|
12
|
-
value
|
|
12
|
+
value,
|
|
13
13
|
onChange,
|
|
14
14
|
hint,
|
|
15
15
|
hasError,
|
|
16
16
|
disabled = false
|
|
17
17
|
}) {
|
|
18
|
-
const
|
|
19
|
-
const
|
|
18
|
+
const isControlled = value !== undefined;
|
|
19
|
+
const [internalValue, setInternalValue] = useState(false);
|
|
20
|
+
const currentValue = isControlled ? value : internalValue;
|
|
21
|
+
const animValue = useRef(new Animated.Value(currentValue ? 1 : 0)).current;
|
|
20
22
|
useEffect(() => {
|
|
21
23
|
Animated.timing(animValue, {
|
|
22
|
-
toValue:
|
|
24
|
+
toValue: currentValue ? 1 : 0,
|
|
23
25
|
duration: 200,
|
|
24
26
|
easing: Easing.out(Easing.circle),
|
|
25
27
|
useNativeDriver: false
|
|
26
28
|
}).start();
|
|
27
|
-
}, [
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
setValue(defaultValue);
|
|
30
|
-
}, [defaultValue]);
|
|
29
|
+
}, [currentValue, animValue]);
|
|
31
30
|
const handlePress = () => {
|
|
32
31
|
if (disabled) return;
|
|
33
|
-
const newValue = !
|
|
34
|
-
|
|
32
|
+
const newValue = !currentValue;
|
|
33
|
+
if (!isControlled) {
|
|
34
|
+
setInternalValue(newValue);
|
|
35
|
+
}
|
|
35
36
|
onChange?.(newValue);
|
|
36
37
|
};
|
|
37
38
|
const translateX = animValue.interpolate({
|
|
38
39
|
inputRange: [0, 1],
|
|
39
40
|
outputRange: [0, 16]
|
|
40
41
|
});
|
|
41
|
-
const backgroundColor = disabled &&
|
|
42
|
+
const backgroundColor = disabled && currentValue ? Color.primary[1000] : disabled && !currentValue ? Color.gray[200] : currentValue ? Color.primary[1000] : Color.gray[300];
|
|
42
43
|
return /*#__PURE__*/_jsxs(View, {
|
|
43
44
|
style: {
|
|
44
45
|
gap: 4,
|
|
@@ -59,7 +60,7 @@ export default function Switch({
|
|
|
59
60
|
transform: [{
|
|
60
61
|
translateX
|
|
61
62
|
}],
|
|
62
|
-
backgroundColor: dotColor
|
|
63
|
+
backgroundColor: dotColor ?? Color.base.white100
|
|
63
64
|
}]
|
|
64
65
|
})
|
|
65
66
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Animated","Pressable","StyleSheet","View","Easing","useEffect","useRef","useState","LabelForm","Typography","Color","jsx","_jsx","jsxs","_jsxs","Switch","label","dotColor","value","
|
|
1
|
+
{"version":3,"names":["Animated","Pressable","StyleSheet","View","Easing","useEffect","useRef","useState","LabelForm","Typography","Color","jsx","_jsx","jsxs","_jsxs","Switch","label","dotColor","value","onChange","hint","hasError","disabled","isControlled","undefined","internalValue","setInternalValue","currentValue","animValue","Value","current","timing","toValue","duration","easing","out","circle","useNativeDriver","start","handlePress","newValue","translateX","interpolate","inputRange","outputRange","backgroundColor","primary","gray","style","gap","opacity","children","title","styles","touchArea","onPress","track","transform","base","white100","color","danger","variant","create","width","height","padding","borderRadius","justifyContent","position","top","left"],"sourceRoot":"../../../src","sources":["Input/Switch.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,6 +7,6 @@ interface SwitchProps {
|
|
|
7
7
|
hasError?: true;
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
}
|
|
10
|
-
export default function Switch({ label, dotColor, value
|
|
10
|
+
export default function Switch({ label, dotColor, value, onChange, hint, hasError, disabled, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export {};
|
|
12
12
|
//# sourceMappingURL=Switch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/Input/Switch.tsx"],"names":[],"mappings":"AAMA,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/Input/Switch.tsx"],"names":[],"mappings":"AAMA,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAgB,GACjB,EAAE,WAAW,2CAkEb"}
|
package/package.json
CHANGED
package/src/Input/Switch.tsx
CHANGED
|
@@ -13,36 +13,36 @@ interface SwitchProps {
|
|
|
13
13
|
hasError?: true;
|
|
14
14
|
disabled?: boolean;
|
|
15
15
|
}
|
|
16
|
-
|
|
17
16
|
export default function Switch({
|
|
18
17
|
label,
|
|
19
18
|
dotColor,
|
|
20
|
-
value
|
|
19
|
+
value,
|
|
21
20
|
onChange,
|
|
22
21
|
hint,
|
|
23
22
|
hasError,
|
|
24
23
|
disabled = false,
|
|
25
24
|
}: SwitchProps) {
|
|
26
|
-
const
|
|
27
|
-
const
|
|
25
|
+
const isControlled = value !== undefined;
|
|
26
|
+
const [internalValue, setInternalValue] = useState<boolean>(false);
|
|
27
|
+
const currentValue = isControlled ? value : internalValue;
|
|
28
|
+
|
|
29
|
+
const animValue = useRef(new Animated.Value(currentValue ? 1 : 0)).current;
|
|
28
30
|
|
|
29
31
|
useEffect(() => {
|
|
30
32
|
Animated.timing(animValue, {
|
|
31
|
-
toValue:
|
|
33
|
+
toValue: currentValue ? 1 : 0,
|
|
32
34
|
duration: 200,
|
|
33
35
|
easing: Easing.out(Easing.circle),
|
|
34
36
|
useNativeDriver: false,
|
|
35
37
|
}).start();
|
|
36
|
-
}, [
|
|
37
|
-
|
|
38
|
-
useEffect(() => {
|
|
39
|
-
setValue(defaultValue);
|
|
40
|
-
}, [defaultValue]);
|
|
38
|
+
}, [currentValue, animValue]);
|
|
41
39
|
|
|
42
40
|
const handlePress = () => {
|
|
43
41
|
if (disabled) return;
|
|
44
|
-
const newValue = !
|
|
45
|
-
|
|
42
|
+
const newValue = !currentValue;
|
|
43
|
+
if (!isControlled) {
|
|
44
|
+
setInternalValue(newValue);
|
|
45
|
+
}
|
|
46
46
|
onChange?.(newValue);
|
|
47
47
|
};
|
|
48
48
|
|
|
@@ -52,18 +52,17 @@ export default function Switch({
|
|
|
52
52
|
});
|
|
53
53
|
|
|
54
54
|
const backgroundColor =
|
|
55
|
-
disabled &&
|
|
55
|
+
disabled && currentValue
|
|
56
56
|
? Color.primary[1000]
|
|
57
|
-
: disabled && !
|
|
57
|
+
: disabled && !currentValue
|
|
58
58
|
? Color.gray[200]
|
|
59
|
-
:
|
|
59
|
+
: currentValue
|
|
60
60
|
? Color.primary[1000]
|
|
61
61
|
: Color.gray[300];
|
|
62
62
|
|
|
63
63
|
return (
|
|
64
64
|
<View style={{ gap: 4, opacity: disabled ? 0.5 : 1 }}>
|
|
65
65
|
{label ? <LabelForm title={label} /> : null}
|
|
66
|
-
|
|
67
66
|
<Pressable
|
|
68
67
|
style={styles.touchArea}
|
|
69
68
|
onPress={handlePress}
|
|
@@ -75,13 +74,12 @@ export default function Switch({
|
|
|
75
74
|
styles.circle,
|
|
76
75
|
{
|
|
77
76
|
transform: [{ translateX }],
|
|
78
|
-
backgroundColor: dotColor
|
|
77
|
+
backgroundColor: dotColor ?? Color.base.white100,
|
|
79
78
|
},
|
|
80
79
|
]}
|
|
81
80
|
/>
|
|
82
81
|
</View>
|
|
83
82
|
</Pressable>
|
|
84
|
-
|
|
85
83
|
{hint ? (
|
|
86
84
|
<Typography color={hasError ? Color.danger[500] : ''} variant="t2">
|
|
87
85
|
{hint}
|