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

[DataGrid] Add touch support on column resize #537

Merged

Conversation

DanailH
Copy link
Member

@DanailH DanailH commented Nov 4, 2020

Fixes #416

This PR adds the ability to resize columns on touch devices. The solution was taken from the Slider component that is part of the core repo -> https://github.com/mui-org/material-ui/blob/0d0e370c6e783f967fbd922ac925f576bee2b9ae/packages/material-ui/src/Slider/Slider.js#L675

Preview: https://deploy-preview-537--material-ui-x.netlify.app/components/data-grid/#commercial-version

@oliviertassinari oliviertassinari changed the title Add touch support on column resize [DataGrid] Add touch support on column resize Nov 4, 2020
@oliviertassinari oliviertassinari added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request labels Nov 4, 2020
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

  • On Android, I can no longer sort
  • On iOS it sorts when I resize

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 6, 2020

The hover style gets persisted on mobile, fixed in d8df748.

Capture d’écran 2020-11-06 à 14 04 42

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 6, 2020

The following error is thrown when using the resize (dev & prod)

Capture d’écran 2020-11-06 à 14 07 37

That was because the touchstart event was attaching to the document and was being fired multiple time if you have more than 1 grid on the page, I changed it so now it attaches to the columns header.

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 6, 2020

@DanailH Well done :). We don't have any resizing tests for the mouse part of the logic. I think that we could consider adding some, but I think that it can be merged without. We could wait to solve a regression to add them.

@oliviertassinari oliviertassinari force-pushed the feature/DataGrid-416-column-resize-mobile-support branch from c4f72cd to 1551072 Compare November 9, 2020 13:33
…ithub.com:DanailH/material-ui-x into feature/DataGrid-416-column-resize-mobile-support
@DanailH DanailH merged commit 02de9d2 into mui:master Nov 9, 2020
dtassone pushed a commit to dtassone/material-ui-x that referenced this pull request Nov 9, 2020
* Add support for touch column resize

* Change the touch start event listner from the separator to the document

* Allow resizing on mobile only when column separator is touched

* fix hover

* Attach touchStart event to the columns header element, not the document

* Add support for touch column resize

* Change the touch start event listner from the separator to the document

* Allow resizing on mobile only when column separator is touched

* Attach touchStart event to the columns header element, not the document

* fix hover

* minimize git diff

* Use findParentElementFromClassName dom util

* Add new findHeaderElementFromField dom util

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[DataGrid] Add support for Column resizing on mobile
3 participants