Skip to content

Commit 248d349

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

File tree

8 files changed

+37
-50
lines changed

8 files changed

+37
-50
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: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ exports[`<Pressable /> should render as expected: should deep render when mocked
3131
onResponderTerminate={[Function]}
3232
onResponderTerminationRequest={[Function]}
3333
onStartShouldSetResponder={[Function]}
34-
visionos_hoverEffect="highlight"
3534
>
3635
<View />
3736
</View>
@@ -68,7 +67,6 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
6867
onResponderTerminate={[Function]}
6968
onResponderTerminationRequest={[Function]}
7069
onStartShouldSetResponder={[Function]}
71-
visionos_hoverEffect="highlight"
7270
>
7371
<View />
7472
</View>
@@ -117,7 +115,6 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
117115
onResponderTerminate={[Function]}
118116
onResponderTerminationRequest={[Function]}
119117
onStartShouldSetResponder={[Function]}
120-
visionos_hoverEffect="highlight"
121118
>
122119
<View />
123120
</View>
@@ -154,7 +151,6 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
154151
onResponderTerminate={[Function]}
155152
onResponderTerminationRequest={[Function]}
156153
onStartShouldSetResponder={[Function]}
157-
visionos_hoverEffect="highlight"
158154
>
159155
<View />
160156
</View>
@@ -207,7 +203,6 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
207203
onResponderTerminate={[Function]}
208204
onResponderTerminationRequest={[Function]}
209205
onStartShouldSetResponder={[Function]}
210-
visionos_hoverEffect="highlight"
211206
>
212207
<View />
213208
</View>
@@ -244,7 +239,6 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
244239
onResponderTerminate={[Function]}
245240
onResponderTerminationRequest={[Function]}
246241
onStartShouldSetResponder={[Function]}
247-
visionos_hoverEffect="highlight"
248242
>
249243
<View />
250244
</View>
@@ -299,7 +293,6 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
299293
onResponderTerminate={[Function]}
300294
onResponderTerminationRequest={[Function]}
301295
onStartShouldSetResponder={[Function]}
302-
visionos_hoverEffect="highlight"
303296
>
304297
<View />
305298
</View>
@@ -336,7 +329,6 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
336329
onResponderTerminate={[Function]}
337330
onResponderTerminationRequest={[Function]}
338331
onStartShouldSetResponder={[Function]}
339-
visionos_hoverEffect="highlight"
340332
>
341333
<View />
342334
</View>
@@ -399,7 +391,6 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
399391
onResponderTerminate={[Function]}
400392
onResponderTerminationRequest={[Function]}
401393
onStartShouldSetResponder={[Function]}
402-
visionos_hoverEffect="highlight"
403394
>
404395
<View />
405396
</View>
@@ -436,7 +427,6 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
436427
onResponderTerminate={[Function]}
437428
onResponderTerminationRequest={[Function]}
438429
onStartShouldSetResponder={[Function]}
439-
visionos_hoverEffect="highlight"
440430
>
441431
<View />
442432
</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__/TouchableOpacity-test.js.snap

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ exports[`TouchableOpacity renders correctly 1`] = `
3131
onStartShouldSetResponder={[Function]}
3232
style={
3333
Object {
34+
"cursor": "pointer",
3435
"opacity": 1,
3536
}
3637
}
37-
visionos_hoverEffect="highlight"
3838
>
3939
<Text>
4040
Touchable
@@ -76,7 +76,6 @@ exports[`TouchableOpacity renders in disabled state when a disabled prop is pass
7676
"opacity": 1,
7777
}
7878
}
79-
visionos_hoverEffect="highlight"
8079
>
8180
<Text>
8281
Touchable
@@ -118,7 +117,6 @@ exports[`TouchableOpacity renders in disabled state when a key disabled in acces
118117
"opacity": 1,
119118
}
120119
}
121-
visionos_hoverEffect="highlight"
122120
>
123121
<Text>
124122
Touchable

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

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ exports[`<Button /> should be disabled and it should set accessibilityState to d
3535
"opacity": 1,
3636
}
3737
}
38-
visionos_hoverEffect="highlight"
3938
>
4039
<View
4140
style={
@@ -102,7 +101,6 @@ exports[`<Button /> should be disabled when disabled is empty and accessibilityS
102101
"opacity": 1,
103102
}
104103
}
105-
visionos_hoverEffect="highlight"
106104
>
107105
<View
108106
style={
@@ -169,7 +167,6 @@ exports[`<Button /> should be disabled when disabled={true} and accessibilitySta
169167
"opacity": 1,
170168
}
171169
}
172-
visionos_hoverEffect="highlight"
173170
>
174171
<View
175172
style={
@@ -237,7 +234,6 @@ exports[`<Button /> should be set importantForAccessibility={no-hide-descendants
237234
"opacity": 1,
238235
}
239236
}
240-
visionos_hoverEffect="highlight"
241237
>
242238
<View
243239
style={
@@ -300,7 +296,6 @@ exports[`<Button /> should be set importantForAccessibility={no-hide-descendants
300296
"opacity": 1,
301297
}
302298
}
303-
visionos_hoverEffect="highlight"
304299
>
305300
<View
306301
style={
@@ -362,7 +357,6 @@ exports[`<Button /> should not be disabled when disabled={false} and accessibili
362357
"opacity": 1,
363358
}
364359
}
365-
visionos_hoverEffect="highlight"
366360
>
367361
<View
368362
style={
@@ -425,7 +419,6 @@ exports[`<Button /> should not be disabled when disabled={false} and accessibili
425419
"opacity": 1,
426420
}
427421
}
428-
visionos_hoverEffect="highlight"
429422
>
430423
<View
431424
style={
@@ -488,7 +481,6 @@ exports[`<Button /> should overwrite accessibilityState with value of disabled p
488481
"opacity": 1,
489482
}
490483
}
491-
visionos_hoverEffect="highlight"
492484
>
493485
<View
494486
style={
@@ -555,7 +547,6 @@ exports[`<Button /> should render as expected 1`] = `
555547
"opacity": 1,
556548
}
557549
}
558-
visionos_hoverEffect="highlight"
559550
>
560551
<View
561552
style={

‎packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
276276
* Controls whether the View can be the target of touch events.
277277
*/
278278
pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
279-
cursor?: CursorValue;
279+
cursor?: CursorValue | undefined;
280280
}
281281

282282
export type FontVariant =
@@ -406,5 +406,5 @@ export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
406406
tintColor?: ColorValue | undefined;
407407
opacity?: AnimatableNumericValue | undefined;
408408
objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | undefined;
409-
cursor?: CursorValue;
409+
cursor?: CursorValue | undefined;
410410
}

‎packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1813,9 +1813,6 @@ exports[`public API should not change unintentionally Libraries/Components/Press
18131813
export type StateCallbackType = $ReadOnly<{|
18141814
pressed: boolean,
18151815
|}>;
1816-
type VisionOSProps = $ReadOnly<{|
1817-
visionos_hoverEffect?: ?HoverEffect,
1818-
|}>;
18191816
type Props = $ReadOnly<{|
18201817
accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
18211818
accessibilityElementsHidden?: ?boolean,
@@ -1866,7 +1863,6 @@ type Props = $ReadOnly<{|
18661863
testOnly_pressed?: ?boolean,
18671864
unstable_pressDelay?: ?number,
18681865
\\"aria-label\\"?: ?string,
1869-
...VisionOSProps,
18701866
|}>;
18711867
declare export default React.AbstractComponent<
18721868
Props,
@@ -3327,14 +3323,10 @@ exports[`public API should not change unintentionally Libraries/Components/Touch
33273323
type IOSProps = $ReadOnly<{|
33283324
hasTVPreferredFocus?: ?boolean,
33293325
|}>;
3330-
type VisionOSProps = $ReadOnly<{|
3331-
hoverEffect?: ?HoverEffect,
3332-
|}>;
33333326
type Props = $ReadOnly<{|
33343327
...React.ElementConfig<TouchableWithoutFeedback>,
33353328
...AndroidProps,
33363329
...IOSProps,
3337-
...VisionOSProps,
33383330
activeOpacity?: ?number,
33393331
underlayColor?: ?ColorValue,
33403332
style?: ?ViewStyleProp,
@@ -3360,13 +3352,9 @@ exports[`public API should not change unintentionally Libraries/Components/Touch
33603352
nextFocusRight?: ?number,
33613353
nextFocusUp?: ?number,
33623354
|}>;
3363-
type VisionOSProps = $ReadOnly<{|
3364-
visionos_hoverEffect?: ?HoverEffect,
3365-
|}>;
33663355
type Props = $ReadOnly<{|
33673356
...React.ElementConfig<TouchableWithoutFeedback>,
33683357
...TVProps,
3369-
...VisionOSProps,
33703358
activeOpacity?: ?number,
33713359
style?: ?ViewStyleProp,
33723360
hostRef?: ?React.Ref<typeof Animated.View>,
@@ -3665,7 +3653,6 @@ type AndroidDrawableRipple = $ReadOnly<{|
36653653
borderless?: ?boolean,
36663654
rippleRadius?: ?number,
36673655
|}>;
3668-
export type HoverEffect = \\"lift\\" | \\"highlight\\";
36693656
type AndroidDrawable = AndroidDrawableThemeAttr | AndroidDrawableRipple;
36703657
type AndroidViewProps = $ReadOnly<{|
36713658
accessibilityLabelledBy?: ?string | ?Array<string>,
@@ -3693,7 +3680,6 @@ type IOSViewProps = $ReadOnly<{|
36933680
accessibilityElementsHidden?: ?boolean,
36943681
accessibilityLanguage?: ?Stringish,
36953682
shouldRasterizeIOS?: ?boolean,
3696-
visionos_hoverEffect?: ?HoverEffect,
36973683
|}>;
36983684
export type ViewProps = $ReadOnly<{|
36993685
...DirectEventProps,
@@ -7439,6 +7425,7 @@ export type EdgeInsetsValue = {
74397425
right: number,
74407426
bottom: number,
74417427
};
7428+
export type CursorValue = ?(\\"auto\\" | \\"pointer\\");
74427429
export type DimensionValue = number | string | \\"auto\\" | AnimatedNode | null;
74437430
export type AnimatableNumericValue = number | AnimatedNode;
74447431
type ____LayoutStyle_Internal = $ReadOnly<{
@@ -7591,6 +7578,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
75917578
opacity?: AnimatableNumericValue,
75927579
elevation?: number,
75937580
pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\",
7581+
cursor?: CursorValue,
75947582
}>;
75957583
export type ____ViewStyle_Internal = $ReadOnly<{
75967584
...____ViewStyle_InternalCore,

0 commit comments

Comments
 (0)