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 <ryanlntn@gmail.com> * [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 <ryanlntn@gmail.com> * 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 <ryanlntn@gmail.com> * Grammar fixes. (#856) Updates simple grammar issues. Co-authored-by: Nick Trescases <42704557+ntre@users.noreply.github.com> Co-authored-by: Anandraj <anandrag@microsoft.com> Co-authored-by: Saad Najmi <saadnajmi2@gmail.com> Co-authored-by: pull[bot] <39814207+pull[bot]@users.noreply.github.com> Co-authored-by: Ryan Linton <ryanlntn@gmail.com> Co-authored-by: Muhammad Hamza Zaman <mh.zaman.4069@gmail.com> * 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.  [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. #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 <ryanlntn@gmail.com> Co-authored-by: Nick Trescases <42704557+ntre@users.noreply.github.com> Co-authored-by: Anandraj <anandrag@microsoft.com> Co-authored-by: Muhammad Hamza Zaman <mh.zaman.4069@gmail.com>
microsoft · Dec 7, 2021 · f8e26e3 · f8e26e3
1 parent f88f01a
commit f8e26e3
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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')}