Skip to content

Commit 63cb5cd

Browse files
committed
Expose Pressability Hover config props in Pressable (facebook#32405)
Summary: Several desktop forks (`react-native-macos`, `react-native-windows`, `react-native-web`) support mouse events, and while the stock Pressable component has the ability to support mouse events, it seems we aren't forwarding some props properly from Pressable -> Pressability. Pressability will calculate onMouseEnter / onMouseLeave event handlers based on the `onHoverIn/onHoverOut` callbacks passed into PressabilityConfig. https://github.com/facebook/react-native/blob/ad0d4534a751ed05f84ff971714c8f7a4d1deb3a/Libraries/Pressability/Pressability.js#L552 However, Pressable does not pass take in onHoverIn/onHoverOut props to pass to PressabilityConfig, so we can't take advantage of this functionality. This change should simply address that by passing the props through. <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [General] [Fixed] - Pressabel not passing hover props and event handlers to PressabilityConfig Pull Request resolved: facebook#32405 Test Plan: I fixed a similar issue in `react-native-macos` that I am now trying to contribute back upstream. #855 Reviewed By: yungsters Differential Revision: D31667737 Pulled By: sota000 fbshipit-source-id: f0bbe48302703bb2c45280d2afeec8d7a4586b6a
1 parent a0bbaee commit 63cb5cd

File tree

1 file changed

+34
-8
lines changed

1 file changed

+34
-8
lines changed

Libraries/Components/Pressable/Pressable.js

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,9 @@ import type {
2525
import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
2626
import usePressability from '../../Pressability/usePressability';
2727
import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
28-
import type {ColorValue} from '../../StyleSheet/StyleSheet';
2928
import type {
3029
LayoutEvent,
31-
MouseEvent, // TODO(macOS GH#774)
30+
MouseEvent,
3231
PressEvent,
3332
} from '../../Types/CoreEventTypes';
3433
import type {DraggedTypesType} from '../View/DraggedType'; // TODO(macOS GH#774)
@@ -65,6 +64,16 @@ type Props = $ReadOnly<{|
6564
*/
6665
children: React.Node | ((state: StateCallbackType) => React.Node),
6766

67+
/**
68+
* Duration to wait after hover in before calling `onHoverIn`.
69+
*/
70+
delayHoverIn?: ?number,
71+
72+
/**
73+
* Duration to wait after hover out before calling `onHoverOut`.
74+
*/
75+
delayHoverOut?: ?number,
76+
6877
/**
6978
* Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
7079
*/
@@ -91,6 +100,16 @@ type Props = $ReadOnly<{|
91100
*/
92101
onLayout?: ?(event: LayoutEvent) => void,
93102

103+
/**
104+
* Called when the hover is activated to provide visual feedback.
105+
*/
106+
onHoverIn?: ?(event: MouseEvent) => mixed,
107+
108+
/**
109+
* Called when the hover is deactivated to undo visual feedback.
110+
*/
111+
onHoverOut?: ?(event: MouseEvent) => mixed,
112+
94113
/**
95114
* Called when a long-tap gesture is detected.
96115
*/
@@ -167,11 +186,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
167186
android_disableSound,
168187
android_ripple,
169188
children,
189+
delayHoverIn,
190+
delayHoverOut,
170191
delayLongPress,
171192
disabled,
172193
focusable,
173-
onMouseEnter, // [TODO(macOS GH#774)
174-
onMouseLeave, // ]TODO(macOS GH#774)
194+
onHoverIn,
195+
onHoverOut,
175196
onLongPress,
176197
onPress,
177198
onPressIn,
@@ -208,10 +229,12 @@ function Pressable(props: Props, forwardedRef): React.Node {
208229
hitSlop,
209230
pressRectOffset: pressRetentionOffset,
210231
android_disableSound,
232+
delayHoverIn,
233+
delayHoverOut,
211234
delayLongPress,
212235
delayPressIn: unstable_pressDelay,
213-
onHoverIn: onMouseEnter, // [TODO(macOS GH#774)
214-
onHoverOut: onMouseLeave, // ]TODO(macOS GH#774)
236+
onHoverIn,
237+
onHoverOut,
215238
onLongPress,
216239
onPress,
217240
onPressIn(event: PressEvent): void {
@@ -237,11 +260,14 @@ function Pressable(props: Props, forwardedRef): React.Node {
237260
[
238261
android_disableSound,
239262
android_rippleConfig,
263+
cancelable,
264+
delayHoverIn,
265+
delayHoverOut,
240266
delayLongPress,
241267
disabled,
242268
hitSlop,
243-
onMouseEnter, // [TODO(macOS GH#774)
244-
onMouseLeave, // ]TODO(macOS GH#774)
269+
onHoverIn,
270+
onHoverOut,
245271
onLongPress,
246272
onPress,
247273
onPressIn,

0 commit comments

Comments
 (0)