Skip to content

Commit e03eac5

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 3aa7acb commit e03eac5

File tree

1 file changed

+34
-9
lines changed

1 file changed

+34
-9
lines changed

Libraries/Components/Pressable/Pressable.js

Lines changed: 34 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/StyleSheetTypes';
2928
import type {
3029
LayoutEvent,
31-
MouseEvent, // TODO(macOS ISS#2323203)
30+
MouseEvent,
3231
PressEvent,
3332
} from '../../Types/CoreEventTypes';
34-
import type {DraggedTypesType} from '../View/DraggedType'; // TODO(macOS ISS#2323203)
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
*/
@@ -162,11 +180,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
162180
android_disableSound,
163181
android_ripple,
164182
children,
183+
delayHoverIn,
184+
delayHoverOut,
165185
delayLongPress,
166186
disabled,
167187
focusable,
168-
onMouseEnter, // [TODO(macOS GH#774)
169-
onMouseLeave, // ]TODO(macOS GH#774)
188+
onHoverIn,
189+
onHoverOut,
170190
onLongPress,
171191
onPress,
172192
onPressIn,
@@ -192,9 +212,12 @@ function Pressable(props: Props, forwardedRef): React.Node {
192212
hitSlop,
193213
pressRectOffset: pressRetentionOffset,
194214
android_disableSound,
215+
delayHoverIn,
216+
delayHoverOut,
195217
delayLongPress,
196-
onHoverIn: onMouseEnter, // [TODO(macOS GH#774)
197-
onHoverOut: onMouseLeave, // ]TODO(macOS GH#774)
218+
delayPressIn: unstable_pressDelay,
219+
onHoverIn,
220+
onHoverOut,
198221
onLongPress,
199222
onPress,
200223
onPressIn(event: PressEvent): void {
@@ -220,11 +243,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
220243
[
221244
android_disableSound,
222245
android_rippleConfig,
246+
delayHoverIn,
247+
delayHoverOut,
223248
delayLongPress,
224249
disabled,
225250
hitSlop,
226-
onMouseEnter, // [TODO(macOS GH#774)
227-
onMouseLeave, // ]TODO(macOS GH#774)
251+
onHoverIn,
252+
onHoverOut,
228253
onLongPress,
229254
onPress,
230255
onPressIn,

0 commit comments

Comments
 (0)