Skip to content
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.

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

[react-events] usePress from useKeyboard and useTap #16772

Merged

Conversation

necolas
Copy link
Contributor

@necolas necolas commented Sep 13, 2019

This implements usePress in user-space as a combination of useKeyboard and useTap (in an either/or configuration). The existing usePress API is preserved for now. The previous usePress implementation is moved to PressLegacy.

Demo: https://codesandbox.io/s/usepress-usetap-usekeyboard-fcvg7

packages/react-events/src/dom/Tap.js Outdated Show resolved Hide resolved
packages/react-events/src/dom/Tap.js Outdated Show resolved Hide resolved
@necolas necolas force-pushed the react-events/press-from-tap-and-keyboard branch from 530a56a to 5d74159 Compare September 13, 2019 00:25
@trueadm
Copy link
Contributor

trueadm commented Sep 13, 2019

Not sure why the mixed-responders test started failing.

Change the test code from:

    // Trigger a click event
      input.dispatchEvent(
        new MouseEvent('mousedown', {bubbles: true, cancelable: true}),
      );
      input.dispatchEvent(
        new MouseEvent('mouseup', {bubbles: true, cancelable: true}),
      );

To this:

    // Trigger a click event
      input.dispatchEvent(
        new MouseEvent('mousedown', {
          bubbles: true,
          cancelable: true,
          buttons: 1,
        }),
      );
      input.dispatchEvent(
        new MouseEvent('mouseup', {
          bubbles: true,
          cancelable: true,
          buttons: 1,
        }),
      );

And it should fix the test as you now check the buttons value in Tap to validate the mouse event.

@necolas necolas force-pushed the react-events/press-from-tap-and-keyboard branch from 5d74159 to c0b50d4 Compare September 16, 2019 17:55
@necolas
Copy link
Contributor Author

necolas commented Sep 16, 2019

Only 2 tests fail now, and they are related to calling preventDefault on a "virtual" click event that was not caused by the "Enter" key, i.e., a screen-reader dispatched the event. The useKeyboard hook doesn't currently provide a way to configure preventing native behavior for the clicks, only keys.

@necolas necolas force-pushed the react-events/press-from-tap-and-keyboard branch 5 times, most recently from d9cbe74 to 42b6dd6 Compare September 16, 2019 20:46
@sizebot
Copy link

sizebot commented Sep 16, 2019

Details of bundled changes.

Comparing: 494300b...aaa151f

react-ui

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-ui-events/focus.development.js 0.0% -0.2% 10.92 KB 10.92 KB 2.36 KB 2.36 KB UMD_DEV
react-ui-events/press.development.js -78.9% -73.0% 20.69 KB 4.37 KB 4.82 KB 1.3 KB UMD_DEV
react-ui-events/tap.development.js -0.2% +0.7% 16.42 KB 16.39 KB 3.63 KB 3.66 KB UMD_DEV
react-ui-events/focus.production.min.js 0.0% -0.3% 4.09 KB 4.09 KB 1.39 KB 1.39 KB UMD_PROD
react-ui-events/press.production.min.js -71.0% -65.3% 6.96 KB 2.02 KB 2.62 KB 930 B UMD_PROD
ReactEventsPressLegacy-dev.js n/a n/a 0 B 21.34 KB 0 B 4.96 KB FB_WWW_DEV
react-ui-events/tap.production.min.js 🔺+0.5% 🔺+0.8% 5.77 KB 5.8 KB 2.22 KB 2.24 KB UMD_PROD
react-ui-events/context-menu.development.js 0.0% -0.3% 2.67 KB 2.67 KB 1003 B 1000 B UMD_DEV
react-ui-events/input.development.js 0.0% -0.3% 4.51 KB 4.51 KB 1.44 KB 1.44 KB UMD_DEV
react-ui-events/scroll.development.js 0.0% -0.2% 6.29 KB 6.29 KB 1.65 KB 1.65 KB UMD_DEV
react-ui-events/context-menu.production.min.js 0.0% -0.4% 1.38 KB 1.38 KB 728 B 725 B UMD_PROD
react-ui-events/input.production.min.js 0.0% -0.4% 1.83 KB 1.83 KB 981 B 977 B UMD_PROD
ReactEventsKeyboard-dev.js +0.5% +0.5% 6.97 KB 7.01 KB 2.38 KB 2.39 KB FB_WWW_DEV
react-ui-events/scroll.production.min.js 0.0% -0.3% 2.62 KB 2.62 KB 1.15 KB 1.14 KB UMD_PROD
ReactEventsKeyboard-prod.js -0.8% -0.7% 5.42 KB 5.38 KB 1.74 KB 1.73 KB FB_WWW_PROD
react-ui-events/context-menu.development.js 0.0% -0.3% 2.48 KB 2.48 KB 958 B 955 B NODE_DEV
react-ui-events/input.development.js 0.0% -0.2% 4.33 KB 4.33 KB 1.39 KB 1.39 KB NODE_DEV
react-ui-events/scroll.development.js 0.0% -0.2% 6.11 KB 6.11 KB 1.61 KB 1.6 KB NODE_DEV
react-ui-events/context-menu.production.min.js 0.0% -0.6% 1.19 KB 1.19 KB 667 B 663 B NODE_PROD
react-ui-events/input.production.min.js 0.0% -0.3% 1.65 KB 1.65 KB 914 B 911 B NODE_PROD
react-ui-events/scroll.production.min.js 0.0% -0.3% 2.43 KB 2.43 KB 1.09 KB 1.09 KB NODE_PROD
react-ui-events/hover.development.js 0.0% -0.2% 7 KB 7 KB 1.55 KB 1.55 KB UMD_DEV
react-ui-events/press-legacy.development.js n/a n/a 0 B 20.73 KB 0 B 4.83 KB UMD_DEV
react-ui-events/hover.production.min.js 0.0% -0.3% 3.11 KB 3.11 KB 1.13 KB 1.13 KB UMD_PROD
react-ui-events/press-legacy.production.min.js n/a n/a 0 B 6.97 KB 0 B 2.62 KB UMD_PROD
react-ui-events/hover.development.js 0.0% -0.3% 6.81 KB 6.81 KB 1.51 KB 1.5 KB NODE_DEV
react-ui-events/press-legacy.development.js n/a n/a 0 B 20.54 KB 0 B 4.78 KB NODE_DEV
react-ui-events/hover.production.min.js 0.0% -0.4% 2.93 KB 2.93 KB 1.07 KB 1.07 KB NODE_PROD
react-ui-events/press-legacy.production.min.js n/a n/a 0 B 6.79 KB 0 B 2.56 KB NODE_PROD
ReactEventsPressLegacy-prod.js n/a n/a 0 B 16.2 KB 0 B 3.56 KB FB_WWW_PROD
react-ui-events/focus.development.js 0.0% -0.2% 10.73 KB 10.73 KB 2.31 KB 2.31 KB NODE_DEV
react-ui-events/press.development.js -80.0% -74.3% 20.51 KB 4.1 KB 4.77 KB 1.22 KB NODE_DEV
react-ui-events/tap.development.js -0.2% +0.7% 16.24 KB 16.21 KB 3.58 KB 3.6 KB NODE_DEV
react-ui-events/focus.production.min.js 0.0% -0.3% 3.92 KB 3.92 KB 1.32 KB 1.32 KB NODE_PROD
react-ui-events/press.production.min.js -74.2% -67.9% 6.78 KB 1.75 KB 2.56 KB 841 B NODE_PROD
react-ui-events/tap.production.min.js 🔺+0.5% 🔺+0.7% 5.67 KB 5.7 KB 2.21 KB 2.22 KB NODE_PROD
react-ui-events/drag.development.js 0.0% -0.2% 5.22 KB 5.22 KB 1.54 KB 1.54 KB UMD_DEV
react-ui-events/keyboard.development.js +0.5% +0.5% 6.88 KB 6.91 KB 2.38 KB 2.39 KB UMD_DEV
react-ui-events/swipe.development.js 0.0% -0.2% 5.99 KB 5.99 KB 1.62 KB 1.62 KB UMD_DEV
react-ui-events/drag.production.min.js 0.0% -0.5% 2.24 KB 2.24 KB 1.07 KB 1.07 KB UMD_PROD
react-ui-events/keyboard.production.min.js 🔺+0.1% 0.0% 2.79 KB 2.79 KB 1.39 KB 1.39 KB UMD_PROD
ReactEventsPress-dev.js -80.9% -75.8% 21.32 KB 4.06 KB 4.96 KB 1.2 KB FB_WWW_DEV
react-ui-events/swipe.production.min.js 0.0% -0.4% 2.44 KB 2.44 KB 1.1 KB 1.1 KB UMD_PROD
ReactEventsTap-dev.js -0.1% +0.8% 16.1 KB 16.08 KB 3.59 KB 3.61 KB FB_WWW_DEV
ReactEventsPress-prod.js -78.3% -71.3% 16.2 KB 3.51 KB 3.56 KB 1.02 KB FB_WWW_PROD
ReactEventsTap-prod.js -0.3% 🔺+0.8% 12.93 KB 12.89 KB 2.89 KB 2.91 KB FB_WWW_PROD
react-ui-events/drag.development.js 0.0% -0.0% 6.97 KB 6.97 KB 2.21 KB 2.21 KB NODE_DEV
react-ui-events/keyboard.development.js +0.5% +0.6% 6.69 KB 6.73 KB 2.33 KB 2.34 KB NODE_DEV
react-ui-events/swipe.development.js 0.0% -0.1% 5.81 KB 5.81 KB 1.58 KB 1.58 KB NODE_DEV
react-ui-events/drag.production.min.js 0.0% -0.2% 2.87 KB 2.87 KB 1.38 KB 1.37 KB NODE_PROD
react-ui-events/keyboard.production.min.js 🔺+0.1% 🔺+0.1% 2.61 KB 2.62 KB 1.34 KB 1.34 KB NODE_PROD
react-ui-events/swipe.production.min.js 0.0% -0.3% 2.26 KB 2.26 KB 1.05 KB 1.04 KB NODE_PROD

Generated by 🚫 dangerJS against aaa151f

This implements 'usePress' in user-space as a combination of 'useKeyboard' and
'useTap'.  The existing 'usePress' API is preserved for now. The previous
implementation is moved to 'PressLegacy'.
@necolas necolas force-pushed the react-events/press-from-tap-and-keyboard branch from 42b6dd6 to aaa151f Compare September 16, 2019 21:20
@necolas necolas merged commit 3af05de into facebook:master Sep 16, 2019
@necolas necolas deleted the react-events/press-from-tap-and-keyboard branch December 20, 2019 15:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants