[react-events] Tap responder #16628
Merged
[react-events] Tap responder #16628
+1,470
−42
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
ReactDOM: size: 0.0%, gzip: -0.0% Details of bundled changes.Comparing: f512537...23cc4f2 react-dom
react-events
Generated by 🚫 dangerJS |
necolas
force-pushed
the
react-events/tap-responder
branch
from
1655201 to
6a7c145
Compare
necolas
commented
Aug 31, 2019
necolas
commented
Aug 31, 2019
necolas
force-pushed
the
react-events/tap-responder
branch
from
6a7c145 to
9df4e0b
Compare
|
Using useKeyboard in user space may lead to inconsistent UX. I thought the point of builtin usePress was to avoid opinions here. There was a case with scrolling down on pressing space. Is it considered in new implementation? |
trueadm
approved these changes
Sep 3, 2019
trueadm
reviewed
Sep 3, 2019
trueadm
reviewed
Sep 3, 2019
|
@TrySound We'll still provide |
necolas
force-pushed
the
react-events/tap-responder
branch
from
9df4e0b to
e59a72c
Compare
necolas
commented
Sep 4, 2019
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.
necolas
force-pushed
the
react-events/tap-responder
branch
4 times, most recently
from
f005593 to
c8aa125
Compare
Details of bundled changes.Comparing: c66edb9...cb40f04 react-events
|
trueadm
reviewed
Sep 4, 2019
| if (type === 'pointermove' && activePointerId !== pointerId) { | ||
| if ( | ||
| type === 'pointermove' && | ||
| activePointerId !== nativeEvent.pointerId |
There was a problem hiding this comment.
Why not extract pointerId above? You use it just below.
There was a problem hiding this comment.
The value is only used (and not null) within the the PointerEvent branches.
trueadm
reviewed
Sep 4, 2019
trueadm
reviewed
Sep 4, 2019
trueadm
reviewed
Sep 4, 2019
trueadm
reviewed
Sep 4, 2019
trueadm
reviewed
Sep 4, 2019
trueadm
reviewed
Sep 4, 2019
Reduces the minified size most. Smaller percentage improvement for gzip.
necolas
force-pushed
the
react-events/tap-responder
branch
from
c8aa125 to
cb40f04
Compare
trueadm
approved these changes
Sep 4, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a partial replacement for the 'Press' responder:
useTapis scoped to pointers (no keyboard support). Our current thinking isthat "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.
useTapcancels the gesture once the pointer moves over an element that isnot within the responder target's subtree. This differs from
usePress(andReact 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
usePressbehavior is that it requires repeatedly measuringDOM elements (which can cause jank) to perform hit region tests.
useTapavoidsdoing this and relies on
document.elementFromPointonly to support theTouchEvent fallbacks.
useTapcallsonTapUpdatewhen the active gesture's state changes,onTapEndwhen the gesture successfully completes. andonTapCancelwhen itfails. There is no
onTapcallback.usePressdid not explicitly report backwhen the gesture failed, and product developers were confused about the
difference between
onPressandonPressEnd.useTapexplicitly separates the PointerEvent implementation from theMouseEvent/TouchEvent fallback.
useTaphas better unit test coverage . All pointer types and the fallbackenvironment are tested. The shape of the gesture state object is also defined
and tested.
Demo