Skip to content

Commit 2c25126

Browse files
lukewalczaklukewalczak
authored
fix: touchable ripple overlay (#3875)
1 parent ab2588b commit 2c25126

28 files changed

+86
-167
lines changed

‎src/components/CrossFadeIcon.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ type Props = {
1818
* Size of the icon.
1919
*/
2020
size: number;
21+
/**
22+
* TestID used for testing purposes
23+
*/
24+
testID?: string;
2125
/**
2226
* @optional
2327
*/
@@ -29,6 +33,7 @@ const CrossFadeIcon = ({
2933
size,
3034
source,
3135
theme: themeOverrides,
36+
testID = 'cross-fade-icon',
3237
}: Props) => {
3338
const theme = useInternalTheme(themeOverrides);
3439
const [currentIcon, setCurrentIcon] = React.useState<IconSource>(
@@ -97,6 +102,7 @@ const CrossFadeIcon = ({
97102
transform: [{ rotate: rotatePrev }],
98103
},
99104
]}
105+
testID={`${testID}-previous`}
100106
>
101107
<Icon source={previousIcon} size={size} color={color} theme={theme} />
102108
</Animated.View>
@@ -109,6 +115,7 @@ const CrossFadeIcon = ({
109115
transform: [{ rotate: rotateNext }],
110116
},
111117
]}
118+
testID={`${testID}-current`}
112119
>
113120
<Icon source={currentIcon} size={size} color={color} theme={theme} />
114121
</Animated.View>

‎src/components/TouchableRipple/TouchableRipple.native.tsx‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
StyleSheet,
88
Pressable,
99
GestureResponderEvent,
10+
View,
1011
} from 'react-native';
1112

1213
import { useInternalTheme } from '../../core/theming';
@@ -45,7 +46,6 @@ const TouchableRipple = ({
4546
...rest
4647
}: Props) => {
4748
const theme = useInternalTheme(themeOverrides);
48-
const [showUnderlay, setShowUnderlay] = React.useState<boolean>(false);
4949

5050
const { onPress, onLongPress, onPressIn, onPressOut } = rest;
5151

@@ -72,16 +72,6 @@ const TouchableRipple = ({
7272
Platform.Version >= ANDROID_VERSION_PIE &&
7373
borderless;
7474

75-
const handlePressIn = (e: GestureResponderEvent) => {
76-
setShowUnderlay(true);
77-
onPressIn?.(e);
78-
};
79-
80-
const handlePressOut = (e: GestureResponderEvent) => {
81-
setShowUnderlay(false);
82-
onPressOut?.(e);
83-
};
84-
8575
if (TouchableRipple.supported) {
8676
return (
8777
<Pressable
@@ -107,15 +97,22 @@ const TouchableRipple = ({
10797
<Pressable
10898
{...rest}
10999
disabled={disabled}
110-
style={[
111-
borderless && styles.overflowHidden,
112-
showUnderlay && { backgroundColor: calculatedUnderlayColor },
113-
style,
114-
]}
115-
onPressIn={handlePressIn}
116-
onPressOut={handlePressOut}
100+
style={[borderless && styles.overflowHidden, style]}
117101
>
118-
{React.Children.only(children)}
102+
{({ pressed }) => (
103+
<>
104+
{pressed && (
105+
<View
106+
testID="touchable-ripple-underlay"
107+
style={[
108+
styles.underlay,
109+
{ backgroundColor: calculatedUnderlayColor },
110+
]}
111+
/>
112+
)}
113+
{React.Children.only(children)}
114+
</>
115+
)}
119116
</Pressable>
120117
);
121118
};
@@ -127,6 +124,10 @@ const styles = StyleSheet.create({
127124
overflowHidden: {
128125
overflow: 'hidden',
129126
},
127+
underlay: {
128+
...StyleSheet.absoluteFillObject,
129+
zIndex: 2,
130+
},
130131
});
131132

132133
export default TouchableRipple;

‎src/components/__tests__/Appbar/Appbar.test.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,8 @@ describe('AppbarAction', () => {
267267
<Appbar.Action icon="menu" testID="appbar-action" />
268268
</Appbar>
269269
);
270-
const appbarActionIcon = getByTestId('appbar-action').props.children[0];
270+
const appbarActionIcon = getByTestId('cross-fade-icon-current').props
271+
.children;
271272
expect(appbarActionIcon.props.color).toBe(
272273
getTheme().colors.onSurfaceVariant
273274
);
@@ -279,7 +280,8 @@ describe('AppbarAction', () => {
279280
<Appbar.Action icon="menu" testID="appbar-action" isLeading />
280281
</Appbar>
281282
);
282-
const appbarActionIcon = getByTestId('appbar-action').props.children[0];
283+
const appbarActionIcon = getByTestId('cross-fade-icon-current').props
284+
.children;
283285
expect(appbarActionIcon.props.color).toBe(getTheme().colors.onSurface);
284286
});
285287

@@ -289,7 +291,8 @@ describe('AppbarAction', () => {
289291
<Appbar.Action icon="menu" color="purple" testID="appbar-action" />
290292
</Appbar>
291293
);
292-
const appbarActionIcon = getByTestId('appbar-action').props.children[0];
294+
const appbarActionIcon = getByTestId('cross-fade-icon-current').props
295+
.children;
293296
expect(appbarActionIcon.props.color).toBe('purple');
294297
});
295298

@@ -299,7 +302,8 @@ describe('AppbarAction', () => {
299302
<Appbar.BackAction color="purple" testID="appbar-action" />
300303
</Appbar>
301304
);
302-
const appbarBackActionIcon = getByTestId('appbar-action').props.children[0];
305+
const appbarBackActionIcon = getByTestId('cross-fade-icon-current').props
306+
.children;
303307
expect(appbarBackActionIcon.props.color).toBe('purple');
304308
});
305309

@@ -313,7 +317,8 @@ describe('AppbarAction', () => {
313317
</Appbar>
314318
);
315319

316-
const appbarActionIcon = getByTestId('appbar-action').props.children[0];
320+
const appbarActionIcon = getByTestId('cross-fade-icon-current').props
321+
.children;
317322

318323
expect(appbarActionIcon.props.color).toBe('#ffffff');
319324
});
@@ -329,7 +334,8 @@ describe('AppbarAction', () => {
329334
</PaperProvider>
330335
);
331336

332-
const appbarActionIcon = getByTestId('appbar-action').props.children[0];
337+
const appbarActionIcon = getByTestId('cross-fade-icon-current').props
338+
.children;
333339

334340
expect(appbarActionIcon.props.color).toBe('#ffffff');
335341
});

‎src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
157157
Object {
158158
"overflow": "hidden",
159159
},
160-
false,
161160
Array [
162161
Object {
163162
"alignItems": "center",
@@ -339,7 +338,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
339338
Object {
340339
"overflow": "hidden",
341340
},
342-
false,
343341
Array [
344342
Object {
345343
"alignItems": "center",
@@ -520,7 +518,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
520518
Object {
521519
"overflow": "hidden",
522520
},
523-
false,
524521
Array [
525522
Object {
526523
"alignItems": "center",
@@ -566,6 +563,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
566563
],
567564
}
568565
}
566+
testID="cross-fade-icon-current"
569567
>
570568
<View
571569
style={
@@ -749,7 +747,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
749747
Object {
750748
"overflow": "hidden",
751749
},
752-
false,
753750
Array [
754751
Object {
755752
"alignItems": "center",
@@ -795,6 +792,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
795792
],
796793
}
797794
}
795+
testID="cross-fade-icon-current"
798796
>
799797
<Text
800798
accessibilityElementsHidden={true}

‎src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ exports[`renders Checkbox with custom testID 1`] = `
2727
Object {
2828
"overflow": "hidden",
2929
},
30-
false,
3130
Object {
3231
"borderRadius": 18,
3332
"padding": 6,
@@ -111,7 +110,6 @@ exports[`renders checked Checkbox with color 1`] = `
111110
Object {
112111
"overflow": "hidden",
113112
},
114-
false,
115113
Object {
116114
"borderRadius": 18,
117115
"padding": 6,
@@ -193,7 +191,6 @@ exports[`renders checked Checkbox with onPress 1`] = `
193191
Object {
194192
"overflow": "hidden",
195193
},
196-
false,
197194
Object {
198195
"borderRadius": 18,
199196
"padding": 6,
@@ -275,7 +272,6 @@ exports[`renders indeterminate Checkbox 1`] = `
275272
Object {
276273
"overflow": "hidden",
277274
},
278-
false,
279275
Object {
280276
"borderRadius": 18,
281277
"padding": 6,
@@ -358,7 +354,6 @@ exports[`renders indeterminate Checkbox with color 1`] = `
358354
Object {
359355
"overflow": "hidden",
360356
},
361-
false,
362357
Object {
363358
"borderRadius": 18,
364359
"padding": 6,
@@ -441,7 +436,6 @@ exports[`renders unchecked Checkbox with color 1`] = `
441436
Object {
442437
"overflow": "hidden",
443438
},
444-
false,
445439
Object {
446440
"borderRadius": 18,
447441
"padding": 6,
@@ -523,7 +517,6 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
523517
Object {
524518
"overflow": "hidden",
525519
},
526-
false,
527520
Object {
528521
"borderRadius": 18,
529522
"padding": 6,

‎src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ exports[`can render leading checkbox control 1`] = `
2424
onStartShouldSetResponder={[Function]}
2525
style={
2626
Array [
27-
false,
2827
false,
2928
undefined,
3029
]
@@ -72,7 +71,6 @@ exports[`can render leading checkbox control 1`] = `
7271
Object {
7372
"overflow": "hidden",
7473
},
75-
false,
7674
Object {
7775
"borderRadius": 18,
7876
"padding": 6,
@@ -189,7 +187,6 @@ exports[`can render the Android checkbox on different platforms 1`] = `
189187
onStartShouldSetResponder={[Function]}
190188
style={
191189
Array [
192-
false,
193190
false,
194191
undefined,
195192
]
@@ -273,7 +270,6 @@ exports[`can render the Android checkbox on different platforms 1`] = `
273270
Object {
274271
"overflow": "hidden",
275272
},
276-
false,
277273
Object {
278274
"borderRadius": 18,
279275
"height": 36,
@@ -390,7 +386,6 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
390386
onStartShouldSetResponder={[Function]}
391387
style={
392388
Array [
393-
false,
394389
false,
395390
undefined,
396391
]
@@ -474,7 +469,6 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
474469
Object {
475470
"overflow": "hidden",
476471
},
477-
false,
478472
Object {
479473
"borderRadius": 18,
480474
"padding": 6,
@@ -555,7 +549,6 @@ exports[`renders unchecked 1`] = `
555549
onStartShouldSetResponder={[Function]}
556550
style={
557551
Array [
558-
false,
559552
false,
560553
undefined,
561554
]
@@ -639,7 +632,6 @@ exports[`renders unchecked 1`] = `
639632
Object {
640633
"overflow": "hidden",
641634
},
642-
false,
643635
Object {
644636
"borderRadius": 18,
645637
"padding": 6,

‎src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
2727
Object {
2828
"overflow": "hidden",
2929
},
30-
false,
3130
Object {
3231
"borderRadius": 18,
3332
"padding": 6,
@@ -110,7 +109,6 @@ exports[`RadioButton on default platform renders properly 1`] = `
110109
Object {
111110
"overflow": "hidden",
112111
},
113-
false,
114112
Object {
115113
"borderRadius": 18,
116114
"padding": 6,
@@ -192,7 +190,6 @@ exports[`RadioButton on ios platform renders properly 1`] = `
192190
Object {
193191
"overflow": "hidden",
194192
},
195-
false,
196193
Object {
197194
"borderRadius": 18,
198195
"padding": 6,
@@ -274,7 +271,6 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
274271
Object {
275272
"overflow": "hidden",
276273
},
277-
false,
278274
Object {
279275
"borderRadius": 18,
280276
"padding": 6,

‎src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ exports[`RadioButtonGroup renders properly 1`] = `
3030
Object {
3131
"overflow": "hidden",
3232
},
33-
false,
3433
Object {
3534
"borderRadius": 18,
3635
"padding": 6,

0 commit comments

Comments
 (0)