From ec18643526d5f1d3cab25e5db7437adabd6ea34a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= Date: Wed, 18 Sep 2024 14:24:29 +0200 Subject: [PATCH] chore: remove automatic cursor pointer (#161) --- .../Components/Pressable/Pressable.js | 12 +-- .../__snapshots__/Pressable-test.js.snap | 80 ------------------- .../Touchable/TouchableHighlight.js | 17 +--- .../Components/Touchable/TouchableOpacity.js | 9 +-- .../TouchableHighlight-test.js.snap | 49 +----------- .../TouchableOpacity-test.js.snap | 3 - .../__snapshots__/Button-test.js.snap | 9 --- 7 files changed, 7 insertions(+), 172 deletions(-) diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js index 8b4bc667bdbf38..bd0d6a43a3a666 100644 --- a/packages/react-native/Libraries/Components/Pressable/Pressable.js +++ b/packages/react-native/Libraries/Components/Pressable/Pressable.js @@ -24,7 +24,6 @@ import type { import {PressabilityDebugView} from '../../Pressability/PressabilityDebug'; import usePressability from '../../Pressability/usePressability'; import {type RectOrSize} from '../../StyleSheet/Rect'; -import StyleSheet from '../../StyleSheet/StyleSheet'; import useMergeRefs from '../../Utilities/useMergeRefs'; import View from '../View/View'; import useAndroidRippleForView, { @@ -348,10 +347,7 @@ function Pressable( {...restPropsWithDefaults} {...eventHandlers} ref={mergedRef} - style={[ - styles.pressable, - typeof style === 'function' ? style({pressed}) : style, - ]} + style={typeof style === 'function' ? style({pressed}) : style} collapsable={false}> {typeof children === 'function' ? children({pressed}) : children} {__DEV__ ? : null} @@ -359,12 +355,6 @@ function Pressable( ); } -const styles = StyleSheet.create({ - pressable: { - cursor: 'pointer', - }, -}); - function usePressState(forcePressed: boolean): [boolean, (boolean) => void] { const [pressed, setPressed] = useState(false); return [pressed || forcePressed, setPressed]; diff --git a/packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap b/packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap index 9fddf3ccb102dc..307aaba80c6af8 100644 --- a/packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap +++ b/packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap @@ -31,14 +31,6 @@ exports[` should render as expected: should deep render when mocked onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -75,14 +67,6 @@ exports[` should render as expected: should deep render when not mo onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -119,14 +103,6 @@ exports[` should be disabled when disabled is true: onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -163,14 +139,6 @@ exports[` should be disabled when disabled is true: onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -207,14 +175,6 @@ exports[` should be disable onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -251,14 +211,6 @@ exports[` should be disable onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -295,14 +247,6 @@ exports[` shou onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -339,14 +283,6 @@ exports[` shou onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -383,14 +319,6 @@ exports[` sh onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -427,14 +355,6 @@ exports[` sh onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js index 8c4deafdd3af98..e59b2954e91a7e 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js @@ -329,13 +329,10 @@ class TouchableHighlight extends React.Component { accessibilityElementsHidden={ this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden } - style={[ - styles.touchable, - StyleSheet.compose( - this.props.style, - this.state.extraStyles?.underlay, - ), - ]} + style={StyleSheet.compose( + this.props.style, + this.state.extraStyles?.underlay, + )} onLayout={this.props.onLayout} hitSlop={this.props.hitSlop} hasTVPreferredFocus={this.props.hasTVPreferredFocus} @@ -384,12 +381,6 @@ class TouchableHighlight extends React.Component { } } -const styles = StyleSheet.create({ - touchable: { - cursor: 'pointer', - }, -}); - const Touchable: React.AbstractComponent< $ReadOnly<$Diff>, React.ElementRef, diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js index fa0669931fc346..f047f91c02012a 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js @@ -18,7 +18,6 @@ import Pressability, { } from '../../Pressability/Pressability'; import {PressabilityDebugView} from '../../Pressability/PressabilityDebug'; import flattenStyle from '../../StyleSheet/flattenStyle'; -import StyleSheet from '../../StyleSheet/StyleSheet'; import Platform from '../../Utilities/Platform'; import * as React from 'react'; @@ -276,7 +275,7 @@ class TouchableOpacity extends React.Component { accessibilityElementsHidden={ this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden } - style={[styles.touchable, this.props.style, {opacity: this.state.anim}]} + style={[this.props.style, {opacity: this.state.anim}]} nativeID={this.props.id ?? this.props.nativeID} testID={this.props.testID} onLayout={this.props.onLayout} @@ -327,12 +326,6 @@ class TouchableOpacity extends React.Component { } } -const styles = StyleSheet.create({ - touchable: { - cursor: 'pointer', - }, -}); - const Touchable: React.AbstractComponent< Props, React.ElementRef, diff --git a/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap b/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap index f26560d45d738a..35c845e97493fc 100644 --- a/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap +++ b/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap @@ -19,14 +19,7 @@ exports[`TouchableHighlight renders correctly 1`] = ` onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - Object {}, - ] - } + style={Object {}} > Touchable @@ -58,14 +51,6 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -95,14 +80,6 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -132,14 +109,6 @@ exports[`TouchableHighlight with disabled state should disable button when acces onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -170,14 +139,6 @@ exports[`TouchableHighlight with disabled state should keep accessibilityState w onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > @@ -207,14 +168,6 @@ exports[`TouchableHighlight with disabled state should overwrite accessibilitySt onResponderTerminate={[Function]} onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} - style={ - Array [ - Object { - "cursor": "pointer", - }, - undefined, - ] - } > diff --git a/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap b/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap index ca634909ca5afc..17f2e7f6f764e0 100644 --- a/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap +++ b/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap @@ -31,7 +31,6 @@ exports[`TouchableOpacity renders correctly 1`] = ` onStartShouldSetResponder={[Function]} style={ Object { - "cursor": "pointer", "opacity": 1, } } @@ -73,7 +72,6 @@ exports[`TouchableOpacity renders in disabled state when a disabled prop is pass onStartShouldSetResponder={[Function]} style={ Object { - "cursor": "pointer", "opacity": 1, } } @@ -115,7 +113,6 @@ exports[`TouchableOpacity renders in disabled state when a key disabled in acces onStartShouldSetResponder={[Function]} style={ Object { - "cursor": "pointer", "opacity": 1, } } diff --git a/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap b/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap index a3efb80e477bfc..5b4294e0e8c850 100644 --- a/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap +++ b/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap @@ -32,7 +32,6 @@ exports[`