Skip to content

Commit

Permalink
[0.64] Pull in upstream fixes to expose hover props on Pressable #884 (
Browse files Browse the repository at this point in the history
…#923)

* 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. #855

Reviewed By: yungsters

Differential Revision: D31667737

Pulled By: sota000

fbshipit-source-id: f0bbe48302703bb2c45280d2afeec8d7a4586b6a

* Add back macOS test

* update podfile

* remove unnecessary line

* update podfile
  • Loading branch information
Saadnajmi authored Dec 7, 2021
1 parent 9d0fa3e commit b0c134a
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 11 deletions.
41 changes: 33 additions & 8 deletions Libraries/Components/Pressable/Pressable.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.
*/
Expand All @@ -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.
*/
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand All @@ -237,11 +260,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,
Expand Down
2 changes: 1 addition & 1 deletion packages/rn-tester/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -508,7 +508,7 @@ SPEC CHECKSUMS:
CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
DoubleConversion: 0ea4559a49682230337df966e735d6cc7760108e
FBLazyVector: c5de505838fe71cd49ad8a0a647e9e506ba0fccf
FBReactNativeSpec: 84b776b54e14dec317a4525eed6e37a7de350c4b
FBReactNativeSpec: fb1b52da62c8f1cc4c1bcc5e30d13e9ba6009d99
Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c
Expand Down
4 changes: 2 additions & 2 deletions packages/rn-tester/js/examples/Pressable/PressableExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
Expand Down

0 comments on commit b0c134a

Please sign in to comment.