Skip to content

Commit 7240052

Browse files
aroldo-cittatiaroldo-cittati
authored
Fix Checkbox Indeterminate State Error (#1434)
* fix: update animation hooks and improve Checkbox component styling * test: update snapshots for Accordion and Checkbox components * fix: rename checkbox inner styles from 'after' to 'before' and update animation logic * test: update snapshots
1 parent b2ca64b commit 7240052

File tree

7 files changed

+134
-48
lines changed

7 files changed

+134
-48
lines changed

‎components/_util/hooks/useAnimations.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ type animateType = (_TimingAnimationConfig: {
1717

1818
interface ConfigureInterface {
1919
initialValue: number
20-
animate: animateType
20+
}
21+
22+
interface AnimatedFuncParams extends Animated.TimingAnimationConfig {
23+
callback?: Animated.EndCallback
2124
}
2225

2326
// Animated.Value hook
@@ -36,6 +39,10 @@ export function useAnimate(configure: ConfigureInterface) {
3639
export function useAnimatedTiming(): [Animated.Value, animateType] {
3740
const animatedRef = React.useRef<Animated.CompositeAnimation | void>()
3841

42+
var [animatedValue] = useAnimate({
43+
initialValue: 0,
44+
})
45+
3946
const animatedFunc = React.useCallback(
4047
({
4148
toValue = 1,
@@ -44,7 +51,7 @@ export function useAnimatedTiming(): [Animated.Value, animateType] {
4451
delay,
4552
useNativeDriver = false,
4653
callback,
47-
}) => {
54+
}: AnimatedFuncParams) => {
4855
animatedRef.current?.stop()
4956
animatedRef.current = Animated.timing(animatedValue, {
5057
toValue,
@@ -54,13 +61,8 @@ export function useAnimatedTiming(): [Animated.Value, animateType] {
5461
useNativeDriver,
5562
}).start(callback)
5663
},
57-
// @ts-ignore
5864
[animatedValue],
5965
)
60-
var [animatedValue] = useAnimate({
61-
initialValue: 0,
62-
animate: animatedFunc,
63-
})
6466

6567
return [animatedValue, animatedFunc]
6668
}

‎components/accordion/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,12 @@ exports[`renders ./components/accordion/demo/basic.tsx correctly 1`] = `
107107
<View
108108
collapsable={false}
109109
pointerEvents="auto"
110-
style={Object {}}
110+
style={
111+
Object {
112+
"height": 0,
113+
"overflow": "hidden",
114+
}
115+
}
111116
>
112117
<View
113118
collapsable={false}
@@ -552,7 +557,12 @@ exports[`renders ./components/accordion/demo/basic.tsx correctly 1`] = `
552557
<View
553558
collapsable={false}
554559
pointerEvents="auto"
555-
style={Object {}}
560+
style={
561+
Object {
562+
"height": 0,
563+
"overflow": "hidden",
564+
}
565+
}
556566
>
557567
<View
558568
collapsable={false}

‎components/checkbox/Checkbox.tsx‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -54,18 +54,24 @@ const InternalCheckbox: React.ForwardRefRenderFunction<
5454
outputRange: [0, 1],
5555
}),
5656
}
57-
const transitionTransform = {
58-
transform: [
59-
// hack: rotate & radius bug in android
60-
...(restProps.accessibilityRole === 'radio' ? [] : [{ rotate: '45deg' }]),
61-
{
62-
scale: animatedValue.interpolate({
63-
inputRange: [0, 1],
64-
outputRange: [0, 1],
65-
}),
66-
},
67-
],
68-
}
57+
const transitionTransform = useMemo(() => {
58+
return {
59+
transform: [
60+
{
61+
rotate: animatedValue.interpolate({
62+
inputRange: [0, 1],
63+
outputRange: ['0deg', '45deg'],
64+
}),
65+
},
66+
{
67+
scale: animatedValue.interpolate({
68+
inputRange: [0, 1],
69+
outputRange: indeterminate ? [1, 0] : [0, 1],
70+
}),
71+
},
72+
],
73+
}
74+
}, [animatedValue, indeterminate])
6975

7076
//initial animate or receive props
7177
useEffect(() => {
@@ -121,10 +127,10 @@ const InternalCheckbox: React.ForwardRefRenderFunction<
121127
.split(' ')
122128
.map((a) => _styles[a])
123129

124-
const antd_checkbox_inner_after = classNames(undefined, {
125-
[`${prefixCls}_inner_after`]: !indeterminate,
126-
[`${prefixCls}_inner_after_indeterminate`]: indeterminate,
127-
[`${prefixCls}_inner_after_disabled`]: disabled,
130+
const antd_checkbox_inner_before = classNames(undefined, {
131+
[`${prefixCls}_inner_before`]: !indeterminate,
132+
[`${prefixCls}_inner_before_indeterminate`]: indeterminate,
133+
[`${prefixCls}_inner_before_disabled`]: disabled,
128134
})
129135
.split(' ')
130136
.map((a) => _styles[a])
@@ -152,7 +158,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<
152158
style={[antd_checkbox_inner, transitionOpacity]}
153159
/>
154160
<Animated.View
155-
style={[transitionTransform, antd_checkbox_inner_after]}
161+
style={[antd_checkbox_inner_before, transitionTransform]}
156162
/>
157163
</View>
158164
</View>

‎components/checkbox/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
151151
"position": "absolute",
152152
"transform": Array [
153153
Object {
154-
"rotate": "45deg",
154+
"rotate": "0deg",
155155
},
156156
Object {
157157
"scale": 0,
@@ -375,7 +375,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
375375
"position": "absolute",
376376
"transform": Array [
377377
Object {
378-
"rotate": "45deg",
378+
"rotate": "0deg",
379379
},
380380
Object {
381381
"scale": 0,
@@ -557,7 +557,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
557557
"position": "absolute",
558558
"transform": Array [
559559
Object {
560-
"rotate": "45deg",
560+
"rotate": "0deg",
561561
},
562562
Object {
563563
"scale": 0,
@@ -782,7 +782,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
782782
"position": "absolute",
783783
"transform": Array [
784784
Object {
785-
"rotate": "45deg",
785+
"rotate": "0deg",
786786
},
787787
Object {
788788
"scale": 0,
@@ -1178,7 +1178,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
11781178
"position": "absolute",
11791179
"transform": Array [
11801180
Object {
1181-
"rotate": "45deg",
1181+
"rotate": "0deg",
11821182
},
11831183
Object {
11841184
"scale": 0,
@@ -1373,7 +1373,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
13731373
"position": "absolute",
13741374
"transform": Array [
13751375
Object {
1376-
"rotate": "45deg",
1376+
"rotate": "0deg",
13771377
},
13781378
Object {
13791379
"scale": 0,
@@ -1565,7 +1565,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
15651565
"position": "absolute",
15661566
"transform": Array [
15671567
Object {
1568-
"rotate": "45deg",
1568+
"rotate": "0deg",
15691569
},
15701570
Object {
15711571
"scale": 0,
@@ -1757,7 +1757,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
17571757
"position": "absolute",
17581758
"transform": Array [
17591759
Object {
1760-
"rotate": "45deg",
1760+
"rotate": "0deg",
17611761
},
17621762
Object {
17631763
"scale": 0,
@@ -2022,7 +2022,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
20222022
"position": "absolute",
20232023
"transform": Array [
20242024
Object {
2025-
"rotate": "45deg",
2025+
"rotate": "0deg",
20262026
},
20272027
Object {
20282028
"scale": 0,
@@ -2215,6 +2215,9 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
22152215
Object {
22162216
"rotate": "0deg",
22172217
},
2218+
Object {
2219+
"scale": 1,
2220+
},
22182221
],
22192222
"width": 8,
22202223
}
@@ -2417,7 +2420,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
24172420
"position": "absolute",
24182421
"transform": Array [
24192422
Object {
2420-
"rotate": "45deg",
2423+
"rotate": "0deg",
24212424
},
24222425
Object {
24232426
"scale": 0,
@@ -2610,7 +2613,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
26102613
"position": "absolute",
26112614
"transform": Array [
26122615
Object {
2613-
"rotate": "45deg",
2616+
"rotate": "0deg",
26142617
},
26152618
Object {
26162619
"scale": 0,
@@ -2806,7 +2809,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
28062809
"position": "absolute",
28072810
"transform": Array [
28082811
Object {
2809-
"rotate": "45deg",
2812+
"rotate": "0deg",
28102813
},
28112814
Object {
28122815
"scale": 0,

‎components/checkbox/style/index.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ export interface CheckboxStyle {
99
checkbox_disabled: ViewStyle
1010
checkbox_inner: ViewStyle
1111
checkbox_inner_disabled: ViewStyle
12-
checkbox_inner_after: ViewStyle
13-
checkbox_inner_after_disabled: ViewStyle
12+
checkbox_inner_before: ViewStyle
13+
checkbox_inner_before_disabled: ViewStyle
1414
checkbox_label: ViewStyle
1515
checkbox_label_disabled: ViewStyle
1616
checkbox_inner_indeterminate: ViewStyle
17-
checkbox_inner_after_indeterminate: ViewStyle
17+
checkbox_inner_before_indeterminate: ViewStyle
1818
}
1919

2020
export default (theme: Theme) =>
@@ -68,8 +68,8 @@ export default (theme: Theme) =>
6868
},
6969

7070
// ==========inner::after============
71-
checkbox_inner_after: {
72-
// transform: [{ rotate: '45deg' }],
71+
checkbox_inner_before: {
72+
transform: [{ rotate: '45deg' }],
7373
position: 'absolute',
7474
width: 6,
7575
height: 9,
@@ -80,14 +80,13 @@ export default (theme: Theme) =>
8080
borderLeftWidth: 0,
8181
},
8282
// 半选状态样式
83-
checkbox_inner_after_indeterminate: {
84-
transform: [{ rotate: '0deg' }],
83+
checkbox_inner_before_indeterminate: {
8584
position: 'absolute',
8685
width: 8,
8786
height: 8,
8887
backgroundColor: theme.brand_primary,
8988
},
90-
checkbox_inner_after_disabled: {
89+
checkbox_inner_before_disabled: {
9190
borderColor: theme.checkbox_border_disabled,
9291
},
9392

0 commit comments

Comments
 (0)