From aa647567ad2e7bb0c6a475c3ed7ab2f04d0dbd0d Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 6 May 2020 14:42:12 -0700 Subject: [PATCH] [change] Remove hitSlop Rely on the native behavior of browsers to provide hitslop for touch on interactive elements. Fix 1609 --- .../docs/src/components/View/View.stories.mdx | 14 --------- .../src/exports/Pressable/index.js | 2 -- .../src/exports/Text/types.js | 4 +-- .../exports/TouchableWithoutFeedback/index.js | 2 -- .../__snapshots__/index-test.js.snap | 22 -------------- .../src/exports/View/__tests__/index-test.js | 12 -------- .../src/exports/View/index.js | 29 ------------------- .../src/exports/View/types.js | 3 +- 8 files changed, 2 insertions(+), 86 deletions(-) diff --git a/packages/docs/src/components/View/View.stories.mdx b/packages/docs/src/components/View/View.stories.mdx index 6d1224e9..f422edf6 100644 --- a/packages/docs/src/components/View/View.stories.mdx +++ b/packages/docs/src/components/View/View.stories.mdx @@ -23,7 +23,6 @@ Please also refer to the in-depth "Accessibility" and "Style" guides. | accessibilityValue | ?Object | | | accessible | ?boolean | | | children | ?any | | -| hitSlop | ?Object | | | importantForAccessibility | ?string | | | nativeID | ?string | | | onBlur | ?Function | | @@ -49,19 +48,6 @@ Please also refer to the in-depth "Accessibility" and "Style" guides. | style | ?Style | | | testID | ?string | | -### hitSlop - -This defines how far a touch event can start away from the view (in pixels). -Typical interface guidelines recommend touch targets that are at least 30 - 40 -points/density-independent pixels. - -For example, if a touchable view has a height of 20 the touchable height can be -extended to 40 with hitSlop. - -```js - -``` - ### onLayout This is invoked when a component is mounted and when its layout changes. `x` and diff --git a/packages/react-native-web/src/exports/Pressable/index.js b/packages/react-native-web/src/exports/Pressable/index.js index c68eca3c..81501505 100644 --- a/packages/react-native-web/src/exports/Pressable/index.js +++ b/packages/react-native-web/src/exports/Pressable/index.js @@ -44,8 +44,6 @@ type Props = $ReadOnly<{| delayPressOut?: ?number, // Whether the press behavior is disabled. disabled?: ?boolean, - // Additional distance outside of this view in which a press is detected. - hitSlop?: $PropertyType, // Called when the view blurs onBlur?: $PropertyType, // Called when the view is focused diff --git a/packages/react-native-web/src/exports/Text/types.js b/packages/react-native-web/src/exports/Text/types.js index 30d7f4e5..7d7982df 100644 --- a/packages/react-native-web/src/exports/Text/types.js +++ b/packages/react-native-web/src/exports/Text/types.js @@ -61,10 +61,8 @@ export type TextStyle = { WebkitFontSmoothing?: ?string }; -type AllowedViewProps = $Diff; - export type TextProps = { - ...AllowedViewProps, + ...ViewProps, accessibilityRelationship?: { activedescendant?: ?string, controls?: ?string, diff --git a/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js b/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js index d06002fd..f3d5d56a 100644 --- a/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js +++ b/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js @@ -32,7 +32,6 @@ export type Props = $ReadOnly<{| delayPressOut?: ?number, disabled?: ?boolean, focusable?: ?boolean, - hitSlop?: $PropertyType, importantForAccessibility?: $PropertyType, nativeID?: $PropertyType, onBlur?: $PropertyType, @@ -56,7 +55,6 @@ const forwardPropsList = { children: true, disabled: true, focusable: true, - hitSlop: true, importantForAccessibility: true, nativeID: true, onBlur: true, diff --git a/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap index 48dc1be5..0cfddbcf 100644 --- a/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap @@ -17,28 +17,6 @@ exports[`components/View non-text is rendered 1`] = ` `; -exports[`components/View prop "hitSlop" handles partial offsets 1`] = ` -
- -
-`; - -exports[`components/View prop "hitSlop" renders a span with negative position offsets 1`] = ` -
- -
-`; - exports[`components/View prop "pointerEvents" 1`] = `
{ }); }); - describe('prop "hitSlop"', () => { - test('renders a span with negative position offsets', () => { - const { container } = render(); - expect(container.firstChild).toMatchSnapshot(); - }); - - test('handles partial offsets', () => { - const { container } = render(); - expect(container.firstChild).toMatchSnapshot(); - }); - }); - test('prop "pointerEvents"', () => { const { container } = render(); expect(container.firstChild).toMatchSnapshot(); diff --git a/packages/react-native-web/src/exports/View/index.js b/packages/react-native-web/src/exports/View/index.js index 5e8a81bc..d63c4e25 100644 --- a/packages/react-native-web/src/exports/View/index.js +++ b/packages/react-native-web/src/exports/View/index.js @@ -78,23 +78,8 @@ const forwardPropsList = { const pickProps = props => pick(props, forwardPropsList); -function createHitSlopElement(hitSlop) { - const hitSlopStyle = {}; - for (const prop in hitSlop) { - if (hitSlop.hasOwnProperty(prop)) { - const value = hitSlop[prop]; - hitSlopStyle[prop] = value > 0 ? -1 * value : 0; - } - } - return createElement('span', { - classList: [classes.hitSlop], - style: hitSlopStyle - }); -} - const View = forwardRef((props, forwardedRef) => { const { - hitSlop, onLayout, onMoveShouldSetResponder, onMoveShouldSetResponderCapture, @@ -131,9 +116,6 @@ const View = forwardRef((props, forwardedRef) => { } }); - const children = hitSlop - ? React.Children.toArray([createHitSlopElement(hitSlop), props.children]) - : props.children; const classList = [classes.view]; const style = StyleSheet.compose( hasTextAncestor && styles.inline, @@ -162,7 +144,6 @@ const View = forwardRef((props, forwardedRef) => { }); const supportedProps = pickProps(props); - supportedProps.children = children; supportedProps.classList = classList; supportedProps.ref = setRef; supportedProps.style = style; @@ -187,16 +168,6 @@ const classes = css.create({ padding: 0, position: 'relative', zIndex: 0 - }, - // this zIndex-ordering positions the hitSlop above the View but behind - // its children - hitSlop: { - position: 'absolute', - top: 0, - left: 0, - right: 0, - bottom: 0, - zIndex: -1 } }); diff --git a/packages/react-native-web/src/exports/View/types.js b/packages/react-native-web/src/exports/View/types.js index 1c354131..9a2fb1aa 100644 --- a/packages/react-native-web/src/exports/View/types.js +++ b/packages/react-native-web/src/exports/View/types.js @@ -8,7 +8,7 @@ * @flow */ -import type { ColorValue, EdgeInsetsValue, GenericStyleProp, LayoutEvent } from '../../types'; +import type { ColorValue, GenericStyleProp, LayoutEvent } from '../../types'; import type { AnimationStyles, @@ -93,7 +93,6 @@ export type ViewProps = { }, accessible?: boolean, children?: ?any, - hitSlop?: ?EdgeInsetsValue, importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants', nativeID?: ?string, onBlur?: (e: any) => void,