dillon1000/react

Commit

[react-events] Tap responder (#16628)

This is a partial replacement for the 'Press' responder:

1. `useTap` is scoped to pointers (no keyboard support). Our current thinking is
that "responders" should be limited to working with pointers, and that they can
be combined with 'useKeyboard' in user-space. For example, we might create a
'usePress' hook in user-space that combines 'useTap' with 'useKeyboard' to react
to both pointers and keyboard interactions.

2. `useTap` cancels the gesture once the pointer moves over an element that is
not within the responder target's subtree. This differs from `usePress` (and
React Native), where the gesture remains active after the pointer exits the
target's subtree and is restarted once the pointer reenters. One of the
drawbacks with the `usePress` behavior is that it requires repeatedly measuring
DOM elements (which can cause jank) to perform hit region tests. `useTap` avoids
doing this and relies on `document.elementFromPoint` only to support the
TouchEvent fallbacks.

3. `useTap` calls `onTapUpdate` when the active gesture's state changes,
`onTapEnd` when the gesture successfully completes. and `onTapCancel` when it
fails. There is no `onTap` callback. `usePress` did not explicitly report back
when the gesture failed, and product developers were confused about the
difference between `onPress` and `onPressEnd`.

4. `useTap` explicitly separates the PointerEvent implementation from the
MouseEvent/TouchEvent fallback.

5. `useTap` has better unit test coverage . All pointer types and the fallback
environment are tested. The shape of the gesture state object is also defined
and tested.
Browse files
Changed paths14 files
First-parent comparison
M packages/react-dom/src/events/DOMEventResponderSystem.js ModifiedA packages/react-events/npm/tap.js AddedM packages/react-events/package.json ModifiedM packages/react-events/src/dom/Press.js ModifiedA packages/react-events/src/dom/Tap.js AddedA packages/react-events/src/dom/__tests__/Tap-test.internal.js AddedA packages/react-events/src/dom/shared/index.js AddedM packages/react-events/src/dom/testing-library/domEnvironment.js ModifiedM packages/react-events/src/dom/testing-library/domEventSequences.js ModifiedM packages/react-events/src/dom/testing-library/domEvents.js ModifiedM packages/react-events/src/dom/testing-library/index.js ModifiedA packages/react-events/tap.js AddedM packages/shared/ReactDOMTypes.js ModifiedM scripts/rollup/bundles.js Modified
Patch

Files changed

Rendering syntax-highlighted changes…