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

[Tooltip] Refactor event handling #23092

Merged
merged 6 commits into from Oct 17, 2020

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Oct 16, 2020

Review by commit helps understand the refactoring process.

We're currently (sometimes) composing user-event handlers in the Tooltip event handlers. The current implementation is hard to parse (e.g. when coming back to the component after some time) and doesn't follow existing patterns.

I refactored it in a couple of steps:

  1. Ignore event types in behavioral handlers (like handleEnter and handleLeave)
  2. Actually handle events in on* props instead of handling behavior
  3. compose handlers where appropriate (i.e. when overriding props in e.g. children.props) otherwise simply assign (e.g in interactiveWrapperListeners)

The only behavior that changed is the order of events for focus events (cdbad40#diff-ec0479377a3497fa2a9c6db5b8a61bbd82b435648c4994ff7d6b9948c6d026a7L883-R883). Previously you'd see onOpen before onFocus. Now the order is reverse which is consistent with the other event triggers.

Curious about the size impact. I'd be fine with a couple of added bytes if this means that I don't have treat events differently when working with the Tooltip.
Edit: Size win as well.

@eps1lon eps1lon added the component: tooltip This is the name of the generic UI component, not the React module! label Oct 16, 2020
Comment on lines +371 to +372
const handleMouseOver = handleEnter;
const handleMouseLeave = handleLeave;
Copy link
Member Author

Choose a reason for hiding this comment

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

These can certainly be inlined but inlining them would make it easier to accidentally introduce different behavior. This approach makes it also easier to experiment with pointer events. We can spare the 10 bytes (const a=a;) for now. We're better served applying Closure compiler.

@mui-pr-bot
Copy link

mui-pr-bot commented Oct 16, 2020

Details of bundle changes

Generated by 🚫 dangerJS against cdbad40

@eps1lon eps1lon force-pushed the chore/tooltip/event-refactor branch from f646b70 to cdbad40 Compare October 16, 2020 12:06
@eps1lon eps1lon marked this pull request as ready for review October 16, 2020 12:14
@eps1lon eps1lon merged commit 7d6a67e into mui:next Oct 17, 2020
@eps1lon eps1lon deleted the chore/tooltip/event-refactor branch October 17, 2020 15:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: tooltip This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants