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.

Sign up for GitHub

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

Jump to bottom

[core] Improve the pointer event logic #19010

Merged
merged 1 commit into from
Dec 30, 2019
Merged

[core] Improve the pointer event logic #19010

merged 1 commit into from
Dec 30, 2019

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Dec 28, 2019 •
edited
Loading

Working on the data grid, I have realized that:

  • The slider and the swipeable drawer don't work into a different document, e.g. iframe, popup.
  • The slider and the swipeable drawer listen to the document.body which leads to the need to handle a mouseenter event.

We can simplify this and normalize it by listening to the owner document directly. I plan to use the same for the data grid component.

@oliviertassinari oliviertassinari added the core Infrastructure work going on behind the scenes label Dec 28, 2019
oliviertassinari
oliviertassinari commented Dec 28, 2019
View reviewed changes
packages/material-ui/src/Slider/Slider.js
const handleMouseEnter = useEventCallback(event => {
// If the slider was being interacted with but the mouse went off the window
// and then re-entered while unclicked then end the interaction.
if (event.buttons === 0) {
Copy link
Member Author

@oliviertassinari oliviertassinari Dec 28, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

bye-bye, ugly edge case :)

Copy link
Member Author

Choose a reason for hiding this comment

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

Clean-up 6b5bf53

@mui-pr-bot
Copy link

mui-pr-bot commented Dec 28, 2019 •
edited
Loading

Details of bundle changes.

Comparing: f3218f2...69f17ad

bundle Size Change Size Gzip Change Gzip
@material-ui/core[umd] ▼ -321 B (-0.10% ) 314 kB ▲ +10 B (+0.01% ) 90.6 kB
@material-ui/core ▼ -210 B (-0.06% ) 358 kB ▲ +25 B (+0.03% ) 97.7 kB
Slider ▼ -140 B (-0.19% ) 75.2 kB ▼ -1 B (-0.00% ) 23.9 kB
docs.main ▼ -24 B (-0.00% ) 613 kB ▲ +9 B (0.00% ) 196 kB
SwipeableDrawer ▲ +16 B (+0.02% ) 91.6 kB ▲ +6 B (+0.02% ) 28.7 kB
@material-ui/lab -- 176 kB -- 53.1 kB
@material-ui/styles -- 50.8 kB -- 15.3 kB
@material-ui/system -- 14.5 kB -- 4.04 kB
AppBar -- 63.6 kB -- 20 kB
Autocomplete -- 129 kB -- 40.4 kB
Avatar -- 64.9 kB -- 20.5 kB
AvatarGroup -- 62 kB -- 19.5 kB
Backdrop -- 67.4 kB -- 20.9 kB
Badge -- 65 kB -- 20.3 kB
BottomNavigation -- 62.1 kB -- 19.5 kB
BottomNavigationAction -- 75.2 kB -- 23.8 kB
Box -- 70.4 kB -- 21.5 kB
Breadcrumbs -- 67.7 kB -- 21.3 kB
Button -- 79.4 kB -- 24.4 kB
ButtonBase -- 73.6 kB -- 23.2 kB
ButtonGroup -- 82.8 kB -- 25.5 kB
Card -- 62.5 kB -- 19.6 kB
CardActionArea -- 74.7 kB -- 23.6 kB
CardActions -- 61.7 kB -- 19.4 kB
CardContent -- 61.7 kB -- 19.4 kB
CardHeader -- 64.8 kB -- 20.4 kB
CardMedia -- 62 kB -- 19.6 kB
Checkbox -- 81.6 kB -- 25.9 kB
Chip -- 82.2 kB -- 25.2 kB
CircularProgress -- 63.8 kB -- 20.2 kB
ClickAwayListener -- 3.85 kB -- 1.55 kB
Collapse -- 67.6 kB -- 21 kB
colorManipulator -- 3.85 kB -- 1.52 kB
Container -- 62.9 kB -- 19.7 kB
CssBaseline -- 57.3 kB -- 18 kB
Dialog -- 82.4 kB -- 25.8 kB
DialogActions -- 61.8 kB -- 19.4 kB
DialogContent -- 61.9 kB -- 19.5 kB
DialogContentText -- 63.7 kB -- 20.1 kB
DialogTitle -- 64 kB -- 20.1 kB
Divider -- 62.3 kB -- 19.6 kB
docs.landing -- 50.7 kB -- 13.4 kB
Drawer -- 84.2 kB -- 25.7 kB
ExpansionPanel -- 71.1 kB -- 22.3 kB
ExpansionPanelActions -- 61.8 kB -- 19.4 kB
ExpansionPanelDetails -- 61.6 kB -- 19.4 kB
ExpansionPanelSummary -- 77.8 kB -- 24.6 kB
Fab -- 76.5 kB -- 23.9 kB
Fade -- 23.2 kB -- 7.98 kB
FilledInput -- 73.2 kB -- 22.8 kB
FormControl -- 64.1 kB -- 20 kB
FormControlLabel -- 65.2 kB -- 20.5 kB
FormGroup -- 61.7 kB -- 19.4 kB
FormHelperText -- 63 kB -- 19.8 kB
FormLabel -- 63.2 kB -- 19.6 kB
Grid -- 64.8 kB -- 20.4 kB
GridList -- 62.2 kB -- 19.6 kB
GridListTile -- 63.4 kB -- 19.9 kB
GridListTileBar -- 62.9 kB -- 19.8 kB
Grow -- 23.8 kB -- 8.19 kB
Hidden -- 65.6 kB -- 20.7 kB
Icon -- 62.5 kB -- 19.6 kB
IconButton -- 75.8 kB -- 23.7 kB
Input -- 72.2 kB -- 22.6 kB
InputAdornment -- 64.8 kB -- 20.4 kB
InputBase -- 70.3 kB -- 22.1 kB
InputLabel -- 65 kB -- 20.1 kB
LinearProgress -- 65 kB -- 20.4 kB
Link -- 66.3 kB -- 21 kB
List -- 62 kB -- 19.4 kB
ListItem -- 76.8 kB -- 24.1 kB
ListItemAvatar -- 61.8 kB -- 19.4 kB
ListItemIcon -- 61.9 kB -- 19.4 kB
ListItemSecondaryAction -- 61.7 kB -- 19.4 kB
ListItemText -- 64.6 kB -- 20.4 kB
ListSubheader -- 62.4 kB -- 19.7 kB
Menu -- 88.1 kB -- 27.2 kB
MenuItem -- 77.8 kB -- 24.4 kB
MenuList -- 65.7 kB -- 20.6 kB
MobileStepper -- 67.5 kB -- 21.2 kB
Modal -- 14.3 kB -- 5.01 kB
NativeSelect -- 76.5 kB -- 24.2 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 73.7 kB -- 23 kB
Paper -- 62 kB -- 19.4 kB
Popover -- 82.5 kB -- 25.6 kB
Popper -- 28.7 kB -- 10.3 kB
Portal -- 2.9 kB -- 1.3 kB
Radio -- 82.7 kB -- 26.1 kB
RadioGroup -- 63.1 kB -- 19.8 kB
Rating -- 69.7 kB -- 22.5 kB
RootRef -- 4.21 kB -- 1.64 kB
Select -- 114 kB -- 34 kB
Skeleton -- 62.3 kB -- 19.7 kB
Slide -- 25.3 kB -- 8.71 kB
Snackbar -- 74.8 kB -- 23.4 kB
SnackbarContent -- 63.2 kB -- 20 kB
SpeedDial -- 85.7 kB -- 27.1 kB
SpeedDialAction -- 117 kB -- 37 kB
SpeedDialIcon -- 64.3 kB -- 20.2 kB
Step -- 62.3 kB -- 19.6 kB
StepButton -- 82 kB -- 26 kB
StepConnector -- 62.4 kB -- 19.7 kB
StepContent -- 68.7 kB -- 21.6 kB
StepIcon -- 64.3 kB -- 20.1 kB
StepLabel -- 68.3 kB -- 21.2 kB
Stepper -- 64.6 kB -- 20.4 kB
styles/createMuiTheme -- 16.4 kB -- 5.83 kB
SvgIcon -- 62.7 kB -- 19.6 kB
Switch -- 80.8 kB -- 25.5 kB
Tab -- 76 kB -- 24.1 kB
Table -- 62.2 kB -- 19.6 kB
TableBody -- 61.8 kB -- 19.4 kB
TableCell -- 63.7 kB -- 20.1 kB
TableContainer -- 61.7 kB -- 19.4 kB
TableFooter -- 61.8 kB -- 19.4 kB
TableHead -- 61.8 kB -- 19.4 kB
TablePagination -- 141 kB -- 41.3 kB
TableRow -- 62.2 kB -- 19.6 kB
TableSortLabel -- 77 kB -- 24.3 kB
Tabs -- 85.1 kB -- 27.1 kB
TextareaAutosize -- 5.09 kB -- 2.14 kB
TextField -- 123 kB -- 36.1 kB
ToggleButton -- 75.8 kB -- 24.1 kB
ToggleButtonGroup -- 62.9 kB -- 19.8 kB
Toolbar -- 62 kB -- 19.6 kB
Tooltip -- 101 kB -- 31.9 kB
TreeItem -- 73.4 kB -- 23.3 kB
TreeView -- 66.1 kB -- 20.8 kB
Typography -- 63.3 kB -- 19.9 kB
useAutocomplete -- 12.6 kB -- 4.7 kB
useMediaQuery -- 2.5 kB -- 1.06 kB
Zoom -- 23.3 kB -- 8.1 kB

Generated by 🚫 dangerJS against 69f17ad

@oliviertassinari oliviertassinari added component: slider This is the name of the generic UI component, not the React module! component: SwipeableDrawer The React component. PR: ready to ship labels Dec 28, 2019
@oliviertassinari oliviertassinari merged commit 83fb7f4 into mui:master Dec 30, 2019
@oliviertassinari oliviertassinari deleted the improve-pointer-event-logic branch December 30, 2019 09:54
@snyk-bot snyk-bot mentioned this pull request Jan 7, 2020
Open
@snyk-bot snyk-bot mentioned this pull request Feb 15, 2020
Open
This was referenced Feb 23, 2020
Open
Closed
@snyk-bot snyk-bot mentioned this pull request Apr 6, 2020
Open
@snyk-bot snyk-bot mentioned this pull request Apr 16, 2020
Merged
@oliviertassinari oliviertassinari added the component: drawer This is the name of the generic UI component, not the React module! label Nov 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
component: drawer This is the name of the generic UI component, not the React module! component: slider This is the name of the generic UI component, not the React module! component: SwipeableDrawer The React component. core Infrastructure work going on behind the scenes
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@oliviertassinari @mui-pr-bot