search

mathieueveillard / react-beautiful-dnd-grid

Adds grid support to react-beautiful-dnd
MIT License
56 stars 18 forks source link

What about making the item count adaptable to the screen width? #2

Open mathieueveillard opened 5 years ago

mathieueveillard commented 5 years ago

https://github.com/atlassian/react-beautiful-dnd/issues/316#issuecomment-484009776

mathieueveillard commented 5 years ago

Hi @cilvet,

I believe this would require to write another HOC that computes the maxItems props and provides it to its child component. Computing maxItems requires information of a single item width (can be provided as prop) as well as the width of the parent container (react-container-dimensions could help). Though, not sure this is so react-ish.

What would be the case leading to this requirement?

Thanks

davidchappy commented 5 years ago

Here's our use case, a responsive grid of fixed-size cards. We'd love to use this library if width auto-detection worked.

flashcards

Edit: As a point of reference, react-sortable-hoc works great, except that it suffers from the mobile dragging issue.

mathieueveillard commented 5 years ago

Hi @davidchappy, and thank you for the follow-up and the elements of context.

Definitely, an HOC looks like an appropriate solution. You could use maxItems as key of the wrapped component in order to recreate it each time maxItems updates.

Now I wonder if it should be part of react-beautiful-dnd-grid: I certainly understand your need, but to me, it looks like a separate topic than drag and drop. Proof is the solution I suggest, based on a HOC. Furthermore, some other applications could have different expectations, like shrinking the items width while maintaining the same number of items per row. This could lead to over-generic solutions.

davidchappy commented 5 years ago

Thanks @mathieueveillard. I think that makes a lot of sense technically, but from a practical use perspective it seems that many would need this to be mobile responsive. Perhaps a responsive or fixedWidth flag?