-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathAnimatedCheckbox.tsx
133 lines (120 loc) · 3.28 KB
/
AnimatedCheckbox.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
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
import React, { useEffect } from "react";
import {
Pressable,
PressableProps,
StyleSheet,
View,
ViewStyle
} from "react-native";
import Animated, {
Easing,
interpolate,
useAnimatedStyle,
useSharedValue,
withSpring,
withTiming
} from "react-native-reanimated";
import { useIOFontDynamicScale } from "../../utils/accessibility";
import { useIOTheme } from "../../core";
import { IOSpringValues } from "../../core/IOAnimations";
import { IOColors } from "../../core/IOColors";
import { IOSelectionTickVisualParams } from "../../core/IOStyles";
import { AnimatedTick } from "../common/AnimatedTick";
type Props = {
size: number;
checked?: boolean;
};
type OwnProps = Props & Pick<PressableProps, "disabled" | "onPress">;
const checkBoxRadius: number = 5;
const styles = StyleSheet.create({
checkboxBorder: {
borderWidth: IOSelectionTickVisualParams.borderWidth,
borderCurve: "continuous",
position: "absolute",
left: 0,
top: 0
},
checkBoxSquare: {
borderCurve: "continuous",
position: "absolute",
left: 0,
top: 0
}
});
/**
* An animated checkbox. This can be used to implement a
* standard {@link CheckBox} or other composite components.
*/
export const AnimatedCheckbox = ({
size,
checked,
onPress,
disabled
}: OwnProps) => {
const theme = useIOTheme();
const { dynamicFontScale } = useIOFontDynamicScale();
const isChecked = checked ?? false;
const borderColor = IOColors[theme["selection-border-off"]];
const backgroundColor = IOColors[theme["selection-background-on"]];
const squareAnimationProgress = useSharedValue(checked ? 1 : 0);
const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
const checkboxSizeStyle: ViewStyle = {
width: size,
height: size,
borderRadius: checkBoxRadius * dynamicFontScale
};
const checkboxWrapperSizeStyle: ViewStyle = {
width: size,
height: size
};
useEffect(() => {
// eslint-disable-next-line functional/immutable-data
squareAnimationProgress.value = withSpring(
checked ? 1 : 0,
IOSpringValues.selection
);
// eslint-disable-next-line functional/immutable-data
tickAnimationProgress.value = withTiming(checked ? 1 : 0, {
duration: 400,
easing: Easing.elastic(1)
});
}, [checked, squareAnimationProgress, tickAnimationProgress]);
const animatedCheckboxSquare = useAnimatedStyle(() => {
const scale = interpolate(squareAnimationProgress.value, [0, 1], [0.5, 1]);
const opacity = squareAnimationProgress.value;
return {
opacity,
transform: [{ scale }]
};
});
return (
<Pressable
accessible={false}
disabled={disabled}
onPress={onPress}
style={checkboxWrapperSizeStyle}
testID="AnimatedCheckboxInput"
>
<View
style={[styles.checkboxBorder, checkboxSizeStyle, { borderColor }]}
/>
<Animated.View
style={[
styles.checkBoxSquare,
checkboxSizeStyle,
{ backgroundColor },
animatedCheckboxSquare
]}
/>
{isChecked && (
<View style={{ zIndex: 1 }}>
<AnimatedTick
size={size}
progress={tickAnimationProgress}
stroke={IOColors[theme["selection-tick"]]}
/>
</View>
)}
</Pressable>
);
};