Skip to content

Expose Pressability Hover config props in Pressable#32405

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

Closed
Saadnajmi wants to merge 2 commits into from
Closed

Expose Pressability Hover config props in Pressable #32405

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69ce218
add hover props to pressable
Saadnajmi Oct 14, 2021
f516aab
yarn lint --fix
Saadnajmi Oct 14, 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
38 changes: 37 additions & 1 deletion Libraries/Components/Pressable/Pressable.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,11 @@ import type {
import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
import usePressability from '../../Pressability/usePressability';
import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
import type {LayoutEvent, PressEvent} from '../../Types/CoreEventTypes';
import type {
LayoutEvent,
MouseEvent,
PressEvent,
} from '../../Types/CoreEventTypes';
import View from '../View/View';

type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
Expand DownExpand Up@@ -63,6 +67,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@@ -89,6 +103,16 @@ type Props = $ReadOnly<{|
*/
onLayout?: ?(event: LayoutEvent) => mixed,

/**
* 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 DownExpand Up@@ -152,9 +176,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
android_ripple,
cancelable,
children,
delayHoverIn,
delayHoverOut,
delayLongPress,
disabled,
focusable,
onHoverIn,
onHoverOut,
onLongPress,
onPress,
onPressIn,
Expand DownExpand Up@@ -196,8 +224,12 @@ function Pressable(props: Props, forwardedRef): React.Node {
hitSlop,
pressRectOffset: pressRetentionOffset,
android_disableSound,
delayHoverIn,
delayHoverOut,
delayLongPress,
delayPressIn: unstable_pressDelay,
onHoverIn,
onHoverOut,
onLongPress,
onPress,
onPressIn(event: PressEvent): void {
Expand All@@ -224,9 +256,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
android_disableSound,
android_rippleConfig,
cancelable,
delayHoverIn,
delayHoverOut,
delayLongPress,
disabled,
hitSlop,
onHoverIn,
onHoverOut,
onLongPress,
onPress,
onPressIn,
Expand Down