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

[Flare] Add more functionality to Scroll event responder #16036

Merged
merged 1 commit into from
Jul 2, 2019

Conversation

trueadm
Copy link
Contributor

@trueadm trueadm commented Jul 2, 2019

This PR adds more functionality to the Scroll event responder. Specifically:

  • Adds the direction property on the event object
  • Adds onScrollDragStart and onScrollDragEnd
  • Removes onMomentumScrollStart and onMomentumScrollEnd Flow prop types.
  • Fixed a bug when disabled never removed root events

I looked into how we might implement the momentum scroll events and ultimately decided it wasn't worth the logic to support. The issue is that trackpad events fire wheel and scroll for each bit of momentum and thus it's not possible to know if the user is doing this – or if it's a system setting (like on MacOS).

Furthermore, working out the difference in delta between scrolls and mousewheels is one possibility (as other third party libraries try do), but the amount of code it requires and the complexity in handling edge cases makes it non-trivial. Adding support for touch based momentum is simpler but then this feature feels half-baked. I'd much rather leave it as a TODO for later work.

@sizebot
Copy link

sizebot commented Jul 2, 2019

Details of bundled changes.

Comparing: 5cb8f6f...8a59925

react-events

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-events-focus.development.js 0.0% +0.1% 7.19 KB 7.19 KB 1.84 KB 1.84 KB UMD_DEV
react-events-scroll.development.js +45.6% +29.2% 3.92 KB 5.7 KB 1.22 KB 1.57 KB UMD_DEV
react-events-focus.production.min.js 0.0% 🔺+0.1% 3.09 KB 3.09 KB 1.18 KB 1.18 KB UMD_PROD
react-events-scroll.production.min.js 🔺+34.7% 🔺+28.8% 1.78 KB 2.4 KB 876 B 1.1 KB UMD_PROD
react-events-swipe.production.min.js 0.0% 🔺+0.1% 2.65 KB 2.65 KB 1.2 KB 1.2 KB UMD_PROD
react-events-swipe.development.js 0.0% +0.1% 6.03 KB 6.03 KB 1.68 KB 1.68 KB NODE_DEV
react-events-press.production.min.js 0.0% -0.0% 8.68 KB 8.68 KB 3.09 KB 3.09 KB NODE_PROD
react-events-focus-scope.development.js 0.0% +0.1% 4.25 KB 4.25 KB 1.32 KB 1.32 KB UMD_DEV
react-events-focus-scope.production.min.js 0.0% 🔺+0.1% 1.62 KB 1.62 KB 874 B 875 B NODE_PROD
react-events-focus.development.js 0.0% +0.1% 7.01 KB 7.01 KB 1.79 KB 1.79 KB NODE_DEV
react-events-scroll.development.js +47.9% +30.7% 3.73 KB 5.52 KB 1.16 KB 1.52 KB NODE_DEV
react-events-focus.production.min.js 0.0% 🔺+0.1% 2.91 KB 2.91 KB 1.1 KB 1.11 KB NODE_PROD
react-events-scroll.production.min.js 🔺+39.2% 🔺+30.6% 1.59 KB 2.21 KB 798 B 1.02 KB NODE_PROD
ReactEventsScroll-dev.js +51.6% +32.0% 3.71 KB 5.62 KB 1.16 KB 1.53 KB FB_WWW_DEV
ReactEventsScroll-prod.js 🔺+43.5% 🔺+36.4% 3.11 KB 4.46 KB 994 B 1.32 KB FB_WWW_PROD

Generated by 🚫 dangerJS

@@ -165,13 +230,19 @@ const ScrollResponder: ReactDOMEventResponder = {
state.pointerType = pointerType;
break;
}
case 'wheel': {
state.pointerType = 'mouse';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you mention that trackPad fires both scroll and wheel events?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mentioned it in the summary of this PR. Did you mean for me to add a comment somewhere too?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the pointerType going to be correct here if trackPad is the source of the wheel event?

Copy link
Contributor Author

@trueadm trueadm Jul 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unless I'm missing something. There's no way to know if it's a trackpad or not. Mouse events can trigger wheel events too.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK sounds like we'll just not have trackpad as a pointer type for scroll

@trueadm trueadm merged commit 6b946ad into facebook:master Jul 2, 2019
@trueadm trueadm deleted the scroll-events branch July 2, 2019 22:51
trueadm added a commit to trueadm/react that referenced this pull request Jul 3, 2019
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

4 participants