Skip to content

Commit 0818f75

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. microsoft#855 Reviewed By: yungsters Differential Revision: D31667737 Pulled By: sota000 fbshipit-source-id: f0bbe48302703bb2c45280d2afeec8d7a4586b6a
1 parent 39bd488 commit 0818f75

1 file changed

Lines changed: 33 additions & 9 deletions

File tree

Libraries/Components/Pressable/Pressable.js

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,11 @@ 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';
34-
import type {DraggedTypesType} from '../View/DraggedType'; // TODO(macOS GH#774)
3533
import View from '../View/View';
3634

3735
type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
@@ -65,6 +63,16 @@ type Props = $ReadOnly<{|
6563
*/
6664
children: React.Node | ((state: StateCallbackType) => React.Node),
6765

66+
/**
67+
* Duration to wait after hover in before calling `onHoverIn`.
68+
*/
69+
delayHoverIn?: ?number,
70+
71+
/**
72+
* Duration to wait after hover out before calling `onHoverOut`.
73+
*/
74+
delayHoverOut?: ?number,
75+
6876
/**
6977
* Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
7078
*/
@@ -91,6 +99,16 @@ type Props = $ReadOnly<{|
9199
*/
92100
onLayout?: ?(event: LayoutEvent) => void,
93101

102+
/**
103+
* Called when the hover is activated to provide visual feedback.
104+
*/
105+
onHoverIn?: ?(event: MouseEvent) => mixed,
106+
107+
/**
108+
* Called when the hover is deactivated to undo visual feedback.
109+
*/
110+
onHoverOut?: ?(event: MouseEvent) => mixed,
111+
94112
/**
95113
* Called when a long-tap gesture is detected.
96114
*/
@@ -167,11 +185,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
167185
android_disableSound,
168186
android_ripple,
169187
children,
188+
delayHoverIn,
189+
delayHoverOut,
170190
delayLongPress,
171191
disabled,
172192
focusable,
173-
onMouseEnter, // [TODO(macOS GH#774)
174-
onMouseLeave, // ]TODO(macOS GH#774)
193+
onHoverIn,
194+
onHoverOut,
175195
onLongPress,
176196
onPress,
177197
onPressIn,
@@ -208,10 +228,12 @@ function Pressable(props: Props, forwardedRef): React.Node {
208228
hitSlop,
209229
pressRectOffset: pressRetentionOffset,
210230
android_disableSound,
231+
delayHoverIn,
232+
delayHoverOut,
211233
delayLongPress,
212234
delayPressIn: unstable_pressDelay,
213-
onHoverIn: onMouseEnter, // [TODO(macOS GH#774)
214-
onHoverOut: onMouseLeave, // ]TODO(macOS GH#774)
235+
onHoverIn,
236+
onHoverOut,
215237
onLongPress,
216238
onPress,
217239
onPressIn(event: PressEvent): void {
@@ -237,11 +259,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
237259
[
238260
android_disableSound,
239261
android_rippleConfig,
262+
delayHoverIn,
263+
delayHoverOut,
240264
delayLongPress,
241265
disabled,
242266
hitSlop,
243-
onMouseEnter, // [TODO(macOS GH#774)
244-
onMouseLeave, // ]TODO(macOS GH#774)
267+
onHoverIn,
268+
onHoverOut,
245269
onLongPress,
246270
onPress,
247271
onPressIn,

0 commit comments

Comments
 (0)