Support setting hitSlop with single value (JS) [re-land]
Summary: JS changes to support D32138347 (a96bdb7154
). This was previously reverted due to missing iOS Paper support. Changelog: [Android][Fixed] Enable hitSlop to be set using a single number. Original commit changeset: 91cfcc86582c Original Phabricator Diff: D32559015 (589b129581
) Reviewed By: yungsters Differential Revision: D33453327 fbshipit-source-id: d289a0a8b8208bc9c68e6ca537632b745e8196ed
This commit is contained in:
Родитель
1d839ff2b0
Коммит
17d10da557
|
@ -22,7 +22,7 @@ import type {
|
|||
} from '../View/ViewAccessibility';
|
||||
import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
|
||||
import usePressability from '../../Pressability/usePressability';
|
||||
import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
|
||||
import {type RectOrSize} from '../../StyleSheet/Rect';
|
||||
import type {
|
||||
LayoutEvent,
|
||||
MouseEvent,
|
||||
|
@ -233,6 +233,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
|
|||
delayLongPress,
|
||||
disabled,
|
||||
focusable,
|
||||
hitSlop,
|
||||
onHoverIn,
|
||||
onHoverOut,
|
||||
onLongPress,
|
||||
|
@ -259,8 +260,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
|
|||
|
||||
const [pressed, setPressed] = usePressState(testOnly_pressed === true);
|
||||
|
||||
const hitSlop = normalizeRect(props.hitSlop);
|
||||
|
||||
const accessibilityState =
|
||||
disabled != null
|
||||
? {...props.accessibilityState, disabled}
|
||||
|
|
|
@ -20,7 +20,7 @@ import type {
|
|||
ScrollEvent, // TODO(macOS GH#774)
|
||||
KeyEvent, // TODO(macOS GH#774)
|
||||
} from '../../Types/CoreEventTypes';
|
||||
import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
|
||||
import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType';
|
||||
import type {Node} from 'react';
|
||||
import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
|
||||
import type {
|
||||
|
@ -597,7 +597,7 @@ export type ViewProps = $ReadOnly<{|
|
|||
*
|
||||
* See https://reactnative.dev/docs/view#hitslop
|
||||
*/
|
||||
hitSlop?: ?EdgeInsetsProp,
|
||||
hitSlop?: ?EdgeInsetsOrSizeProp,
|
||||
|
||||
/**
|
||||
* Controls whether the `View` can be the target of touch events.
|
||||
|
|
|
@ -10,18 +10,14 @@
|
|||
|
||||
import normalizeColor from '../StyleSheet/normalizeColor';
|
||||
import type {ColorValue} from '../StyleSheet/StyleSheet';
|
||||
import {normalizeRect, type RectOrSize} from '../StyleSheet/Rect';
|
||||
|
||||
import View from '../Components/View/View';
|
||||
import * as React from 'react';
|
||||
|
||||
type Props = $ReadOnly<{|
|
||||
color: ColorValue,
|
||||
hitSlop: ?$ReadOnly<{|
|
||||
bottom?: ?number,
|
||||
left?: ?number,
|
||||
right?: ?number,
|
||||
top?: ?number,
|
||||
|}>,
|
||||
hitSlop: ?RectOrSize,
|
||||
|}>;
|
||||
|
||||
/**
|
||||
|
@ -39,16 +35,16 @@ type Props = $ReadOnly<{|
|
|||
* );
|
||||
*
|
||||
*/
|
||||
export function PressabilityDebugView({color, hitSlop}: Props): React.Node {
|
||||
export function PressabilityDebugView(props: Props): React.Node {
|
||||
if (__DEV__) {
|
||||
if (isEnabled()) {
|
||||
const normalizedColor = normalizeColor(color);
|
||||
const normalizedColor = normalizeColor(props.color);
|
||||
if (typeof normalizedColor !== 'number') {
|
||||
return null;
|
||||
}
|
||||
const baseColor =
|
||||
'#' + (normalizedColor ?? 0).toString(16).padStart(8, '0');
|
||||
|
||||
const hitSlop = normalizeRect(props.hitSlop);
|
||||
return (
|
||||
<View
|
||||
pointerEvents="none"
|
||||
|
|
|
@ -10,6 +10,9 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
import type {Rect} from './Rect';
|
||||
import type {Rect, RectOrSize} from './Rect';
|
||||
|
||||
// TODO: allow all EdgeInsets-like property to be set using a single number
|
||||
// and unify EdgeInsetsProp with EdgeInsetsOrSizeProp
|
||||
export type EdgeInsetsProp = Rect;
|
||||
export type EdgeInsetsOrSizeProp = RectOrSize;
|
||||
|
|
Загрузка…
Ссылка в новой задаче