Skip to content

Commit 1b30dd0

Browse files
Saadnajmifacebook-github-bot
authored andcommitted
Expose Pressability Hover config props in Pressable (#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. ## Changelog <!-- 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: #32405 Test Plan: I fixed a similar issue in `react-native-macos` that I am now trying to contribute back upstream. microsoft#855 Reviewed By: yungsters Differential Revision: D31667737 Pulled By: sota000 fbshipit-source-id: f0bbe48302703bb2c45280d2afeec8d7a4586b6a
1 parent b2415c4 commit 1b30dd0

File tree

1 file changed

+37
-1
lines changed

1 file changed

+37
-1
lines changed

Libraries/Components/Pressable/Pressable.js

+37-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@ import type {
2323
import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
2424
import usePressability from '../../Pressability/usePressability';
2525
import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
26-
import type {LayoutEvent, PressEvent} from '../../Types/CoreEventTypes';
26+
import type {
27+
LayoutEvent,
28+
MouseEvent,
29+
PressEvent,
30+
} from '../../Types/CoreEventTypes';
2731
import View from '../View/View';
2832

2933
type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
@@ -63,6 +67,16 @@ type Props = $ReadOnly<{|
6367
*/
6468
children: React.Node | ((state: StateCallbackType) => React.Node),
6569

70+
/**
71+
* Duration to wait after hover in before calling `onHoverIn`.
72+
*/
73+
delayHoverIn?: ?number,
74+
75+
/**
76+
* Duration to wait after hover out before calling `onHoverOut`.
77+
*/
78+
delayHoverOut?: ?number,
79+
6680
/**
6781
* Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
6882
*/
@@ -89,6 +103,16 @@ type Props = $ReadOnly<{|
89103
*/
90104
onLayout?: ?(event: LayoutEvent) => mixed,
91105

106+
/**
107+
* Called when the hover is activated to provide visual feedback.
108+
*/
109+
onHoverIn?: ?(event: MouseEvent) => mixed,
110+
111+
/**
112+
* Called when the hover is deactivated to undo visual feedback.
113+
*/
114+
onHoverOut?: ?(event: MouseEvent) => mixed,
115+
92116
/**
93117
* Called when a long-tap gesture is detected.
94118
*/
@@ -152,9 +176,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
152176
android_ripple,
153177
cancelable,
154178
children,
179+
delayHoverIn,
180+
delayHoverOut,
155181
delayLongPress,
156182
disabled,
157183
focusable,
184+
onHoverIn,
185+
onHoverOut,
158186
onLongPress,
159187
onPress,
160188
onPressIn,
@@ -196,8 +224,12 @@ function Pressable(props: Props, forwardedRef): React.Node {
196224
hitSlop,
197225
pressRectOffset: pressRetentionOffset,
198226
android_disableSound,
227+
delayHoverIn,
228+
delayHoverOut,
199229
delayLongPress,
200230
delayPressIn: unstable_pressDelay,
231+
onHoverIn,
232+
onHoverOut,
201233
onLongPress,
202234
onPress,
203235
onPressIn(event: PressEvent): void {
@@ -224,9 +256,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
224256
android_disableSound,
225257
android_rippleConfig,
226258
cancelable,
259+
delayHoverIn,
260+
delayHoverOut,
227261
delayLongPress,
228262
disabled,
229263
hitSlop,
264+
onHoverIn,
265+
onHoverOut,
230266
onLongPress,
231267
onPress,
232268
onPressIn,

0 commit comments

Comments
 (0)