Skip to content

Commit 4f26a6b

Browse files
okwasniewskiokwasniewski
committed
fix: set cursor pointer by default, update tests
1 parent 93c57e8 commit 4f26a6b

File tree

9 files changed

+176
-51
lines changed

9 files changed

+176
-51
lines changed

‎packages/react-native/Libraries/Components/Pressable/Pressable.js

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import type {
2424
import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
2525
import usePressability from '../../Pressability/usePressability';
2626
import {type RectOrSize} from '../../StyleSheet/Rect';
27+
import StyleSheet from '../../StyleSheet/StyleSheet';
2728
import useMergeRefs from '../../Utilities/useMergeRefs';
2829
import View from '../View/View';
2930
import useAndroidRippleForView, {
@@ -193,10 +194,6 @@ type Props = $ReadOnly<{|
193194
* https://github.com/facebook/react-native/issues/34424
194195
*/
195196
'aria-label'?: ?string,
196-
/**
197-
* Props needed for visionOS.
198-
*/
199-
...VisionOSProps,
200197
|}>;
201198

202199
/**
@@ -344,14 +341,23 @@ function Pressable(props: Props, forwardedRef): React.Node {
344341
{...restPropsWithDefaults}
345342
{...eventHandlers}
346343
ref={mergedRef}
347-
style={typeof style === 'function' ? style({pressed}) : style}
344+
style={[
345+
styles.pressable,
346+
typeof style === 'function' ? style({pressed}) : style,
347+
]}
348348
collapsable={false}>
349349
{typeof children === 'function' ? children({pressed}) : children}
350350
{__DEV__ ? <PressabilityDebugView color="red" hitSlop={hitSlop} /> : null}
351351
</View>
352352
);
353353
}
354354

355+
const styles = StyleSheet.create({
356+
pressable: {
357+
cursor: 'pointer',
358+
},
359+
});
360+
355361
function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
356362
const [pressed, setPressed] = useState(false);
357363
return [pressed || forcePressed, setPressed];

‎packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap

Lines changed: 80 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,14 @@ exports[`<Pressable /> should render as expected: should deep render when mocked
3131
onResponderTerminate={[Function]}
3232
onResponderTerminationRequest={[Function]}
3333
onStartShouldSetResponder={[Function]}
34-
visionos_hoverEffect="highlight"
34+
style={
35+
Array [
36+
Object {
37+
"cursor": "pointer",
38+
},
39+
undefined,
40+
]
41+
}
3542
>
3643
<View />
3744
</View>
@@ -68,7 +75,14 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
6875
onResponderTerminate={[Function]}
6976
onResponderTerminationRequest={[Function]}
7077
onStartShouldSetResponder={[Function]}
71-
visionos_hoverEffect="highlight"
78+
style={
79+
Array [
80+
Object {
81+
"cursor": "pointer",
82+
},
83+
undefined,
84+
]
85+
}
7286
>
7387
<View />
7488
</View>
@@ -117,7 +131,14 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
117131
onResponderTerminate={[Function]}
118132
onResponderTerminationRequest={[Function]}
119133
onStartShouldSetResponder={[Function]}
120-
visionos_hoverEffect="highlight"
134+
style={
135+
Array [
136+
Object {
137+
"cursor": "pointer",
138+
},
139+
undefined,
140+
]
141+
}
121142
>
122143
<View />
123144
</View>
@@ -154,7 +175,14 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
154175
onResponderTerminate={[Function]}
155176
onResponderTerminationRequest={[Function]}
156177
onStartShouldSetResponder={[Function]}
157-
visionos_hoverEffect="highlight"
178+
style={
179+
Array [
180+
Object {
181+
"cursor": "pointer",
182+
},
183+
undefined,
184+
]
185+
}
158186
>
159187
<View />
160188
</View>
@@ -207,7 +235,14 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
207235
onResponderTerminate={[Function]}
208236
onResponderTerminationRequest={[Function]}
209237
onStartShouldSetResponder={[Function]}
210-
visionos_hoverEffect="highlight"
238+
style={
239+
Array [
240+
Object {
241+
"cursor": "pointer",
242+
},
243+
undefined,
244+
]
245+
}
211246
>
212247
<View />
213248
</View>
@@ -244,7 +279,14 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
244279
onResponderTerminate={[Function]}
245280
onResponderTerminationRequest={[Function]}
246281
onStartShouldSetResponder={[Function]}
247-
visionos_hoverEffect="highlight"
282+
style={
283+
Array [
284+
Object {
285+
"cursor": "pointer",
286+
},
287+
undefined,
288+
]
289+
}
248290
>
249291
<View />
250292
</View>
@@ -299,7 +341,14 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
299341
onResponderTerminate={[Function]}
300342
onResponderTerminationRequest={[Function]}
301343
onStartShouldSetResponder={[Function]}
302-
visionos_hoverEffect="highlight"
344+
style={
345+
Array [
346+
Object {
347+
"cursor": "pointer",
348+
},
349+
undefined,
350+
]
351+
}
303352
>
304353
<View />
305354
</View>
@@ -336,7 +385,14 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
336385
onResponderTerminate={[Function]}
337386
onResponderTerminationRequest={[Function]}
338387
onStartShouldSetResponder={[Function]}
339-
visionos_hoverEffect="highlight"
388+
style={
389+
Array [
390+
Object {
391+
"cursor": "pointer",
392+
},
393+
undefined,
394+
]
395+
}
340396
>
341397
<View />
342398
</View>
@@ -399,7 +455,14 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
399455
onResponderTerminate={[Function]}
400456
onResponderTerminationRequest={[Function]}
401457
onStartShouldSetResponder={[Function]}
402-
visionos_hoverEffect="highlight"
458+
style={
459+
Array [
460+
Object {
461+
"cursor": "pointer",
462+
},
463+
undefined,
464+
]
465+
}
403466
>
404467
<View />
405468
</View>
@@ -436,7 +499,14 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
436499
onResponderTerminate={[Function]}
437500
onResponderTerminationRequest={[Function]}
438501
onStartShouldSetResponder={[Function]}
439-
visionos_hoverEffect="highlight"
502+
style={
503+
Array [
504+
Object {
505+
"cursor": "pointer",
506+
},
507+
undefined,
508+
]
509+
}
440510
>
441511
<View />
442512
</View>

‎packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ type Props = $ReadOnly<{|
3636
...React.ElementConfig<TouchableWithoutFeedback>,
3737
...AndroidProps,
3838
...IOSProps,
39-
...VisionOSProps,
4039

4140
activeOpacity?: ?number,
4241
underlayColor?: ?ColorValue,
@@ -330,10 +329,13 @@ class TouchableHighlight extends React.Component<Props, State> {
330329
accessibilityElementsHidden={
331330
this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
332331
}
333-
style={StyleSheet.compose(
334-
this.props.style,
335-
this.state.extraStyles?.underlay,
336-
)}
332+
style={[
333+
styles.touchable,
334+
StyleSheet.compose(
335+
this.props.style,
336+
this.state.extraStyles?.underlay,
337+
),
338+
]}
337339
onLayout={this.props.onLayout}
338340
hitSlop={this.props.hitSlop}
339341
hasTVPreferredFocus={this.props.hasTVPreferredFocus}
@@ -380,6 +382,12 @@ class TouchableHighlight extends React.Component<Props, State> {
380382
}
381383
}
382384

385+
const styles = StyleSheet.create({
386+
touchable: {
387+
cursor: 'pointer',
388+
},
389+
});
390+
383391
const Touchable: React.AbstractComponent<
384392
$ReadOnly<$Diff<Props, {|hostRef: React.Ref<typeof View>|}>>,
385393
React.ElementRef<typeof View>,

‎packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import Pressability, {
1818
} from '../../Pressability/Pressability';
1919
import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
2020
import flattenStyle from '../../StyleSheet/flattenStyle';
21+
import StyleSheet from '../../StyleSheet/StyleSheet';
2122
import Platform from '../../Utilities/Platform';
2223
import * as React from 'react';
2324

@@ -33,7 +34,6 @@ type TVProps = $ReadOnly<{|
3334
type Props = $ReadOnly<{|
3435
...React.ElementConfig<TouchableWithoutFeedback>,
3536
...TVProps,
36-
...VisionOSProps,
3737

3838
activeOpacity?: ?number,
3939
style?: ?ViewStyleProp,
@@ -276,7 +276,7 @@ class TouchableOpacity extends React.Component<Props, State> {
276276
accessibilityElementsHidden={
277277
this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
278278
}
279-
style={[this.props.style, {opacity: this.state.anim}]}
279+
style={[styles.touchable, this.props.style, {opacity: this.state.anim}]}
280280
nativeID={this.props.id ?? this.props.nativeID}
281281
testID={this.props.testID}
282282
onLayout={this.props.onLayout}
@@ -324,6 +324,12 @@ class TouchableOpacity extends React.Component<Props, State> {
324324
}
325325
}
326326

327+
const styles = StyleSheet.create({
328+
touchable: {
329+
cursor: 'pointer',
330+
},
331+
});
332+
327333
const Touchable: React.AbstractComponent<
328334
Props,
329335
React.ElementRef<typeof Animated.View>,

‎packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,14 @@ exports[`TouchableHighlight renders correctly 1`] = `
1919
onResponderTerminate={[Function]}
2020
onResponderTerminationRequest={[Function]}
2121
onStartShouldSetResponder={[Function]}
22-
style={Object {}}
22+
style={
23+
Array [
24+
Object {
25+
"cursor": "pointer",
26+
},
27+
Object {},
28+
]
29+
}
2330
>
2431
<Text>
2532
Touchable
@@ -51,6 +58,14 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled
5158
onResponderTerminate={[Function]}
5259
onResponderTerminationRequest={[Function]}
5360
onStartShouldSetResponder={[Function]}
61+
style={
62+
Array [
63+
Object {
64+
"cursor": "pointer",
65+
},
66+
undefined,
67+
]
68+
}
5469
>
5570
<View />
5671
</View>
@@ -80,6 +95,14 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled
8095
onResponderTerminate={[Function]}
8196
onResponderTerminationRequest={[Function]}
8297
onStartShouldSetResponder={[Function]}
98+
style={
99+
Array [
100+
Object {
101+
"cursor": "pointer",
102+
},
103+
undefined,
104+
]
105+
}
83106
>
84107
<View />
85108
</View>
@@ -109,6 +132,14 @@ exports[`TouchableHighlight with disabled state should disable button when acces
109132
onResponderTerminate={[Function]}
110133
onResponderTerminationRequest={[Function]}
111134
onStartShouldSetResponder={[Function]}
135+
style={
136+
Array [
137+
Object {
138+
"cursor": "pointer",
139+
},
140+
undefined,
141+
]
142+
}
112143
>
113144
<View />
114145
</View>
@@ -139,6 +170,14 @@ exports[`TouchableHighlight with disabled state should keep accessibilityState w
139170
onResponderTerminate={[Function]}
140171
onResponderTerminationRequest={[Function]}
141172
onStartShouldSetResponder={[Function]}
173+
style={
174+
Array [
175+
Object {
176+
"cursor": "pointer",
177+
},
178+
undefined,
179+
]
180+
}
142181
>
143182
<View />
144183
</View>
@@ -168,6 +207,14 @@ exports[`TouchableHighlight with disabled state should overwrite accessibilitySt
168207
onResponderTerminate={[Function]}
169208
onResponderTerminationRequest={[Function]}
170209
onStartShouldSetResponder={[Function]}
210+
style={
211+
Array [
212+
Object {
213+
"cursor": "pointer",
214+
},
215+
undefined,
216+
]
217+
}
171218
>
172219
<View />
173220
</View>

0 commit comments

Comments
 (0)