Skip to content

[0.64] Pull in upstream fixes to expose hover props on Pressable #884 #923

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 7, 2021
Merged

[0.64] Pull in upstream fixes to expose hover props on Pressable #884 #923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
63cb5cd
Expose Pressability Hover config props in Pressable (#32405)
Saadnajmi Oct 26, 2021
e467680
Add back macOS test
Saadnajmi Dec 7, 2021
bafbf67
update podfile
Saadnajmi Dec 7, 2021
b53de68
remove unnecessary line
Saadnajmi Dec 7, 2021
9718b5c
Merge branch '0.64-stable' of github.com:microsoft/react-native-macos…
Saadnajmi Dec 7, 2021
e404639
update podfile
Saadnajmi Dec 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 33 additions & 8 deletions Libraries/Components/Pressable/Pressable.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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