Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: touchable ripple overlay #3875

Merged
merged 1 commit into from
May 15, 2023
Merged

fix: touchable ripple overlay #3875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/components/CrossFadeIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ type Props = {
* Size of the icon.
*/
size: number;
/**
* TestID used for testing purposes
*/
testID?: string;
/**
* @optional
*/
Expand All @@ -29,6 +33,7 @@ const CrossFadeIcon = ({
size,
source,
theme: themeOverrides,
testID = 'cross-fade-icon',
}: Props) => {
const theme = useInternalTheme(themeOverrides);
const [currentIcon, setCurrentIcon] = React.useState<IconSource>(
Expand Down Expand Up @@ -97,6 +102,7 @@ const CrossFadeIcon = ({
transform: [{ rotate: rotatePrev }],
},
]}
testID={`${testID}-previous`}
>
<Icon source={previousIcon} size={size} color={color} theme={theme} />
</Animated.View>
Expand All @@ -109,6 +115,7 @@ const CrossFadeIcon = ({
transform: [{ rotate: rotateNext }],
},
]}
testID={`${testID}-current`}
>
<Icon source={currentIcon} size={size} color={color} theme={theme} />
</Animated.View>
Expand Down
39 changes: 20 additions & 19 deletions src/components/TouchableRipple/TouchableRipple.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
StyleSheet,
Pressable,
GestureResponderEvent,
View,
} from 'react-native';

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

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

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

const handlePressIn = (e: GestureResponderEvent) => {
setShowUnderlay(true);
onPressIn?.(e);
};

const handlePressOut = (e: GestureResponderEvent) => {
setShowUnderlay(false);
onPressOut?.(e);
};

if (TouchableRipple.supported) {
return (
<Pressable
Expand All @@ -107,15 +97,22 @@ const TouchableRipple = ({
<Pressable
{...rest}
disabled={disabled}
style={[
borderless && styles.overflowHidden,
showUnderlay && { backgroundColor: calculatedUnderlayColor },
style,
]}
onPressIn={handlePressIn}
onPressOut={handlePressOut}
style={[borderless && styles.overflowHidden, style]}
>
{React.Children.only(children)}
{({ pressed }) => (
<>
{pressed && (
<View
testID="touchable-ripple-underlay"
style={[
styles.underlay,
{ backgroundColor: calculatedUnderlayColor },
]}
/>
)}
{React.Children.only(children)}
</>
)}
</Pressable>
);
};
Expand All @@ -127,6 +124,10 @@ const styles = StyleSheet.create({
overflowHidden: {
overflow: 'hidden',
},
underlay: {
...StyleSheet.absoluteFillObject,
zIndex: 2,
},
});

export default TouchableRipple;
18 changes: 12 additions & 6 deletions src/components/__tests__/Appbar/Appbar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,8 @@ describe('AppbarAction', () => {
<Appbar.Action icon="menu" testID="appbar-action" />
</Appbar>
);
const appbarActionIcon = getByTestId('appbar-action').props.children[0];
const appbarActionIcon = getByTestId('cross-fade-icon-current').props
.children;
expect(appbarActionIcon.props.color).toBe(
getTheme().colors.onSurfaceVariant
);
Expand All @@ -279,7 +280,8 @@ describe('AppbarAction', () => {
<Appbar.Action icon="menu" testID="appbar-action" isLeading />
</Appbar>
);
const appbarActionIcon = getByTestId('appbar-action').props.children[0];
const appbarActionIcon = getByTestId('cross-fade-icon-current').props
.children;
expect(appbarActionIcon.props.color).toBe(getTheme().colors.onSurface);
});

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

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

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

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

expect(appbarActionIcon.props.color).toBe('#ffffff');
});
Expand All @@ -329,7 +334,8 @@ describe('AppbarAction', () => {
</Provider>
);

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

expect(appbarActionIcon.props.color).toBe('#ffffff');
});
Expand Down
6 changes: 2 additions & 4 deletions src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
Object {
"overflow": "hidden",
},
false,
Array [
Object {
"alignItems": "center",
Expand Down Expand Up @@ -386,7 +385,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
Object {
"overflow": "hidden",
},
false,
Array [
Object {
"alignItems": "center",
Expand Down Expand Up @@ -590,7 +588,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
Object {
"overflow": "hidden",
},
false,
Array [
Object {
"alignItems": "center",
Expand Down Expand Up @@ -636,6 +633,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
],
}
}
testID="cross-fade-icon-current"
>
<View
style={
Expand Down Expand Up @@ -830,7 +828,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
Object {
"overflow": "hidden",
},
false,
Array [
Object {
"alignItems": "center",
Expand Down Expand Up @@ -876,6 +873,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
],
}
}
testID="cross-fade-icon-current"
>
<Text
accessibilityElementsHidden={true}
Expand Down
7 changes: 0 additions & 7 deletions src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ exports[`renders Checkbox with custom testID 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down Expand Up @@ -111,7 +110,6 @@ exports[`renders checked Checkbox with color 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down Expand Up @@ -193,7 +191,6 @@ exports[`renders checked Checkbox with onPress 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down Expand Up @@ -275,7 +272,6 @@ exports[`renders indeterminate Checkbox 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down Expand Up @@ -358,7 +354,6 @@ exports[`renders indeterminate Checkbox with color 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down Expand Up @@ -441,7 +436,6 @@ exports[`renders unchecked Checkbox with color 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down Expand Up @@ -523,7 +517,6 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down
8 changes: 0 additions & 8 deletions src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ exports[`can render leading checkbox control 1`] = `
onStartShouldSetResponder={[Function]}
style={
Array [
false,
false,
undefined,
]
Expand Down Expand Up @@ -72,7 +71,6 @@ exports[`can render leading checkbox control 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down Expand Up @@ -189,7 +187,6 @@ exports[`can render the Android checkbox on different platforms 1`] = `
onStartShouldSetResponder={[Function]}
style={
Array [
false,
false,
undefined,
]
Expand Down Expand Up @@ -273,7 +270,6 @@ exports[`can render the Android checkbox on different platforms 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"height": 36,
Expand Down Expand Up @@ -390,7 +386,6 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
onStartShouldSetResponder={[Function]}
style={
Array [
false,
false,
undefined,
]
Expand Down Expand Up @@ -474,7 +469,6 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down Expand Up @@ -555,7 +549,6 @@ exports[`renders unchecked 1`] = `
onStartShouldSetResponder={[Function]}
style={
Array [
false,
false,
undefined,
]
Expand Down Expand Up @@ -639,7 +632,6 @@ exports[`renders unchecked 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down
4 changes: 0 additions & 4 deletions src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down Expand Up @@ -110,7 +109,6 @@ exports[`RadioButton on default platform renders properly 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down Expand Up @@ -192,7 +190,6 @@ exports[`RadioButton on ios platform renders properly 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down Expand Up @@ -274,7 +271,6 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down
1 change: 0 additions & 1 deletion src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ exports[`RadioButtonGroup renders properly 1`] = `
Object {
"overflow": "hidden",
},
false,
Object {
"borderRadius": 18,
"padding": 6,
Expand Down
Loading