From f8e26e3fd098b07febc2906f45d9f8a36d3cd95f Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Tue, 7 Dec 2021 14:02:01 -0600 Subject: [PATCH] Pull in upstream fixes to expose hover props on Pressable (#884) * add pull yml * match handleOpenURLNotification event payload with iOS (#755) (#2) Co-authored-by: Ryan Linton * [pull] master from microsoft:master (#11) * Deprecated api (#853) * Remove deprecated/unused context param * Update a few Mac deprecated APIs * Packing RN dependencies, hermes and ignoring javadoc failure, (#852) * Ignore javadoc failure * Bringing few more changes from 0.63-stable * Fixing a patch in engine selection * Fixing a patch in nuget spec * Fixing the output directory of nuget pack * Packaging dependencies in the nuget * Fix onMouseEnter/onMouseLeave callbacks not firing on Pressable (#855) * add pull yml * match handleOpenURLNotification event payload with iOS (#755) (#2) Co-authored-by: Ryan Linton * fix mouse evetns on pressable * delete extra yml from this branch * Add macOS tags * reorder props to have onMouseEnter/onMouseLeave always be before onPress Co-authored-by: pull[bot] <39814207+pull[bot]@users.noreply.github.com> Co-authored-by: Ryan Linton * Grammar fixes. (#856) Updates simple grammar issues. Co-authored-by: Nick Trescases <42704557+ntre@users.noreply.github.com> Co-authored-by: Anandraj Co-authored-by: Saad Najmi Co-authored-by: pull[bot] <39814207+pull[bot]@users.noreply.github.com> Co-authored-by: Ryan Linton Co-authored-by: Muhammad Hamza Zaman * 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 * Extra followup changes * remove some extra fork differences from change * Add back type * update podfile Co-authored-by: pull[bot] <39814207+pull[bot]@users.noreply.github.com> Co-authored-by: Ryan Linton Co-authored-by: Nick Trescases <42704557+ntre@users.noreply.github.com> Co-authored-by: Anandraj Co-authored-by: Muhammad Hamza Zaman --- Libraries/Components/Pressable/Pressable.js | 43 ++++++++++---- packages/rn-tester/Podfile.lock | 58 +++++++++---------- .../js/examples/Pressable/PressableExample.js | 4 +- 3 files changed, 64 insertions(+), 41 deletions(-) diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js index 34d3c8ccf716a3..ec0e2343dfb3ee 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. */ @@ -146,8 +165,6 @@ type Props = $ReadOnly<{| acceptsFirstMouse?: ?boolean, enableFocusRing?: ?boolean, tooltip?: ?string, - onMouseEnter?: (event: MouseEvent) => void, - onMouseLeave?: (event: MouseEvent) => void, onDragEnter?: (event: MouseEvent) => void, onDragLeave?: (event: MouseEvent) => void, onDrop?: (event: MouseEvent) => void, @@ -167,11 +184,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 +227,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 +258,13 @@ function Pressable(props: Props, forwardedRef): React.Node { [ android_disableSound, android_rippleConfig, + delayHoverIn, + delayHoverOut, delayLongPress, disabled, hitSlop, - onMouseEnter, // [TODO(macOS GH#774) - onMouseLeave, // ]TODO(macOS GH#774) + onHoverIn, + onHoverOut, onLongPress, onPress, onPressIn, diff --git a/packages/rn-tester/Podfile.lock b/packages/rn-tester/Podfile.lock index 25124c9b369844..4fcac42cfefef1 100644 --- a/packages/rn-tester/Podfile.lock +++ b/packages/rn-tester/Podfile.lock @@ -510,8 +510,8 @@ SPEC CHECKSUMS: CocoaAsyncSocket: 694058e7c0ed05a9e217d1b3c7ded962f4180845 CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f DoubleConversion: 0ea4559a49682230337df966e735d6cc7760108e - FBLazyVector: 2cd8b2450a7de278408f5be1467889e90a08f258 - FBReactNativeSpec: 02b76af7d3c9034135e4d9d94293bf768752d250 + FBLazyVector: 51cc83402f3d709f74795ff5c422a3d64aad2d5c + FBReactNativeSpec: 3a039b4dcabf30506715ca5c18c30d31d6c3e771 Flipper: be611d4b742d8c87fbae2ca5f44603a02539e365 Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41 Flipper-Folly: e4493b013c02d9347d5e0cb4d128680239f6c78a @@ -522,35 +522,35 @@ SPEC CHECKSUMS: glog: 0dc7efada961c0793012970b60faebbd58b0decb OpenSSL-Universal: ff34003318d5e1163e9529b08470708e389ffcdd RCT-Folly: b3998425a8ee9f695f57a204dc494534246f0fe9 - RCTRequired: a3bd1751e9cf0e38d20f3cbb929942bba696f228 - RCTTypeSafety: 9026992c34211be11abe388a656b8293c34ca51d - React: bbd3a9e2b0249733cbe9ad7acfaf8a76518d2bc3 - React-callinvoker: 47411c997957069224b8dab7c54df4120761609c - React-Core: 4aed02f28118c924e2ed70fa7986bd972e968375 - React-CoreModules: caf07250a9edfc74023809086c87b20e85b02c39 - React-cxxreact: 7c446b2022686f641f436c85ce3f150db8af2673 - React-jsi: c5d9184708894542c535b444e140def931175718 - React-jsiexecutor: 5d2ee18b3edcc35465d0bda5792d78d914b3db36 - React-jsinspector: 811d62cd7cda93f2e20455ce01d145318daad54f - React-perflogger: b3498f7e34f9a4d17f894c2881bae1a09c0f0244 - React-RCTActionSheet: a64e3b4f8443fbb7fa521f0c5c5d12ef32ca7333 - React-RCTAnimation: 8d43053e147b2a03a0dd814b29fdee7400812db2 - React-RCTBlob: b085c43bf4c3e6666249b8b3e1059c81e4b0e4da - React-RCTImage: c31b49d6fa0aca5f0d156689faf812f2fcbe327d - React-RCTLinking: 0f37717500127be6ade174ee0e90b1c2e030812b - React-RCTNetwork: 4436de92dd6069a955762d0b236824549e9c181c - React-RCTPushNotification: 4214b15df86eb9ca37a755213b0492e94b8e25ac - React-RCTSettings: 41666d59dd7f3f4b83308bc529cbd2885b8198ee - React-RCTTest: 9d497d39f71774fdceb5636872a31ea8cf6299c4 - React-RCTText: b6d0d3b2b4e3ea50682364d018343cd9816d457f - React-RCTVibration: d99e0b8f6b7c501259d277d4439e57098bccb7c5 - React-runtimeexecutor: 1c02384ab067ef628535c5ea9fea5237bdd63c0a + RCTRequired: 2d686a7dce047f5d49d3cfaaafcac309faabdfa3 + RCTTypeSafety: 381a24d058ab4456271b44774bb2b13bffe73fe4 + React: c057844fd06ecfa863cfb9c84991ab0f486540f3 + React-callinvoker: 488e8d69e0eb35579dc5ef2b36efd4aa1a94f40b + React-Core: 7260200dfa2667c56ed4cc27265c1e57d5d040fd + React-CoreModules: 1a58a4fbe3a667760e0921a85c5da21492fb7715 + React-cxxreact: 1e319bcd17b54b6768c10b8b9e89397f153d7f87 + React-jsi: a4a24e1ea3874772a28eaef6124b17fad1a29e41 + React-jsiexecutor: 332bca23c317135ea722ab7bdd1f65b61be13a0f + React-jsinspector: b1cb2f7a601f8aed95928062b908deddf3c82a48 + React-perflogger: 983acb8318ed9b7e9a7d0e1054218eaa24dfebe7 + React-RCTActionSheet: 83604ec93778a3b52805862d6feef63466765888 + React-RCTAnimation: 510927e07ee1e22b6a8ccbc7736df3105312c4cc + React-RCTBlob: eb1e62da8269a1acb2a48edfa36c872b79dda27a + React-RCTImage: e21d4e5881383144983a76fea1aa572b411f5d3e + React-RCTLinking: 793a4b3843b04c4e6f63c491cb114b24c17a8e5c + React-RCTNetwork: 7efd214d99d4e79d4ddabe76d2e01449267303d2 + React-RCTPushNotification: a4c94a936589b9b01ae6bc403b4b126f0ab64790 + React-RCTSettings: fe346a2cb5a0f73781b4430df3cba4ddeef9bafc + React-RCTTest: a75eb8f43f21d1b6429e081945447accdd7047f0 + React-RCTText: 38b52e9a804c7f5c5197f8f59cfc64295af63e38 + React-RCTVibration: dcb108280be8bf84c1ab716348587ffce989a40d + React-runtimeexecutor: fa0f514ab1020dbde36e9c88512930ceedb9bb2b React-TurboModuleCxx-RNW: 12172bdbaaf052406ec571465243fad4b2eb2702 - React-TurboModuleCxx-WinRTPort: ecb3b6ab042309397cb7473c7d6de5b62f918c0b - ReactCommon: 70e4686a26373df89f82a55f093f393d225ae10a - Yoga: 4eb93eb55b6973947ed8e71bb82c1dfaa849bd4c + React-TurboModuleCxx-WinRTPort: 3844727e8cd53c024b276029bd96e01358d702e8 + ReactCommon: 94a1371a376fb197ff69b52efef86dc19d627abb + Yoga: 28f20bff355b99c1d8bc07008f47546796859a1d YogaKit: f782866e155069a2cca2517aafea43200b01fd5a PODFILE CHECKSUM: 096cbc796e89167c003b0c49186597432f0fb5e8 -COCOAPODS: 1.10.2 +COCOAPODS: 1.11.2 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')}