From 63cb5cd692940df2b3c2a92a5e09aa2ec7180c6f Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Mon, 25 Oct 2021 19:46:10 -0700 Subject: [PATCH 1/5] 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. [General] [Fixed] - Pressabel not passing hover props and event handlers to PressabilityConfig Pull Request resolved: https://github.com/facebook/react-native/pull/32405 Test Plan: I fixed a similar issue in `react-native-macos` that I am now trying to contribute back upstream. https://github.com/microsoft/react-native-macos/pull/855 Reviewed By: yungsters Differential Revision: D31667737 Pulled By: sota000 fbshipit-source-id: f0bbe48302703bb2c45280d2afeec8d7a4586b6a --- Libraries/Components/Pressable/Pressable.js | 42 +++++++++++++++++---- 1 file changed, 34 insertions(+), 8 deletions(-) diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js index 34d3c8ccf716a3..e68bf38dd17d1f 100644 --- a/Libraries/Components/Pressable/Pressable.js +++ b/Libraries/Components/Pressable/Pressable.js @@ -25,10 +25,9 @@ import type { import {PressabilityDebugView} from '../../Pressability/PressabilityDebug'; import usePressability from '../../Pressability/usePressability'; import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect'; -import type {ColorValue} from '../../StyleSheet/StyleSheet'; import type { LayoutEvent, - MouseEvent, // TODO(macOS GH#774) + MouseEvent, PressEvent, } from '../../Types/CoreEventTypes'; import type {DraggedTypesType} from '../View/DraggedType'; // TODO(macOS GH#774) @@ -65,6 +64,16 @@ type Props = $ReadOnly<{| */ children: React.Node | ((state: StateCallbackType) => React.Node), + /** + * Duration to wait after hover in before calling `onHoverIn`. + */ + delayHoverIn?: ?number, + + /** + * Duration to wait after hover out before calling `onHoverOut`. + */ + delayHoverOut?: ?number, + /** * Duration (in milliseconds) from `onPressIn` before `onLongPress` is called. */ @@ -91,6 +100,16 @@ type Props = $ReadOnly<{| */ onLayout?: ?(event: LayoutEvent) => void, + /** + * Called when the hover is activated to provide visual feedback. + */ + onHoverIn?: ?(event: MouseEvent) => mixed, + + /** + * Called when the hover is deactivated to undo visual feedback. + */ + onHoverOut?: ?(event: MouseEvent) => mixed, + /** * Called when a long-tap gesture is detected. */ @@ -167,11 +186,13 @@ function Pressable(props: Props, forwardedRef): React.Node { android_disableSound, android_ripple, children, + delayHoverIn, + delayHoverOut, delayLongPress, disabled, focusable, - onMouseEnter, // [TODO(macOS GH#774) - onMouseLeave, // ]TODO(macOS GH#774) + onHoverIn, + onHoverOut, onLongPress, onPress, onPressIn, @@ -208,10 +229,12 @@ function Pressable(props: Props, forwardedRef): React.Node { hitSlop, pressRectOffset: pressRetentionOffset, android_disableSound, + delayHoverIn, + delayHoverOut, delayLongPress, delayPressIn: unstable_pressDelay, - onHoverIn: onMouseEnter, // [TODO(macOS GH#774) - onHoverOut: onMouseLeave, // ]TODO(macOS GH#774) + onHoverIn, + onHoverOut, onLongPress, onPress, onPressIn(event: PressEvent): void { @@ -237,11 +260,14 @@ function Pressable(props: Props, forwardedRef): React.Node { [ android_disableSound, android_rippleConfig, + cancelable, + delayHoverIn, + delayHoverOut, delayLongPress, disabled, hitSlop, - onMouseEnter, // [TODO(macOS GH#774) - onMouseLeave, // ]TODO(macOS GH#774) + onHoverIn, + onHoverOut, onLongPress, onPress, onPressIn, From e46768041bc6729a213747674872fdffcab79f4d Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Tue, 7 Dec 2021 13:51:17 -0600 Subject: [PATCH 2/5] Add back macOS test --- packages/rn-tester/js/examples/Pressable/PressableExample.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js index 6c8764654ea56e..b592a2b0e6d7f1 100644 --- a/packages/rn-tester/js/examples/Pressable/PressableExample.js +++ b/packages/rn-tester/js/examples/Pressable/PressableExample.js @@ -99,8 +99,8 @@ function PressableFeedbackEvents() { testID="pressable_feedback_events_button" accessibilityLabel="pressable feedback events" accessibilityRole="button" - onMouseEnter={() => appendEvent('mouseEnter')} // [TODO(macOS GH#774) - onMouseLeave={() => appendEvent('mouseLeave')} // ]TODO(macOS GH#774) + onHoverIn={() => appendEvent('hoverIn')} // [TODO(macOS GH#774) + onHoverOut={() => appendEvent('hoverOut')} // ]TODO(macOS GH#774) onPress={() => appendEvent('press')} onPressIn={() => appendEvent('pressIn')} onPressOut={() => appendEvent('pressOut')} From bafbf67d3a33606ef7a4abc0cb053e93f69071cc Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Tue, 7 Dec 2021 13:52:35 -0600 Subject: [PATCH 3/5] update podfile --- packages/rn-tester/Podfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rn-tester/Podfile.lock b/packages/rn-tester/Podfile.lock index 84a608549a5d9e..ded81e8c6fda7c 100644 --- a/packages/rn-tester/Podfile.lock +++ b/packages/rn-tester/Podfile.lock @@ -508,7 +508,7 @@ SPEC CHECKSUMS: CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 0ea4559a49682230337df966e735d6cc7760108e FBLazyVector: dabdf8d73d4d845ba8931aa84f697613791c986f - FBReactNativeSpec: efe59907b8830a89c3a0798a6193fc972022d4be + FBReactNativeSpec: ae0a2207ad59bf70885771c03a37be866dd2f5bf Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021 Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41 Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c From b53de68a963f92ed2a739c7d18a602f0eb5d4025 Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Tue, 7 Dec 2021 14:01:11 -0600 Subject: [PATCH 4/5] remove unnecessary line --- Libraries/Components/Pressable/Pressable.js | 1 - 1 file changed, 1 deletion(-) diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js index e68bf38dd17d1f..c9046c2cabb889 100644 --- a/Libraries/Components/Pressable/Pressable.js +++ b/Libraries/Components/Pressable/Pressable.js @@ -260,7 +260,6 @@ function Pressable(props: Props, forwardedRef): React.Node { [ android_disableSound, android_rippleConfig, - cancelable, delayHoverIn, delayHoverOut, delayLongPress, From e4046399c6bd32ed570173ee51c34733f0ac3c83 Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Tue, 7 Dec 2021 15:10:42 -0600 Subject: [PATCH 5/5] update podfile --- packages/rn-tester/Podfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rn-tester/Podfile.lock b/packages/rn-tester/Podfile.lock index eeb7e7185aad73..1517b6063081f9 100644 --- a/packages/rn-tester/Podfile.lock +++ b/packages/rn-tester/Podfile.lock @@ -508,7 +508,7 @@ SPEC CHECKSUMS: CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 0ea4559a49682230337df966e735d6cc7760108e FBLazyVector: c5de505838fe71cd49ad8a0a647e9e506ba0fccf - FBReactNativeSpec: 84b776b54e14dec317a4525eed6e37a7de350c4b + FBReactNativeSpec: fb1b52da62c8f1cc4c1bcc5e30d13e9ba6009d99 Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021 Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41 Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c