Multi-select / Sortable Component - suitable libraries and final functionality #10
Replies: 2 comments 3 replies
-
Thank you very much for writing this discussion and for outlining our options, @AdrianFiroiu .
Other than that, I also agree with using |
Beta Was this translation helpful? Give feedback.
-
It appears that the react-beautiful-dnd package doesn’t support (wrapped) grid layouts as of 2021-02-05 as it seems there has been a great and I would say intense discussion around this feature request, the maintainers made it clear that there will no plan in implementing this feature (back) in the future. This could be a blocker for us as grid sorting will certainly be needed since we are not intended to install and introduce a sizable library just to be used with lists only. atlassian/react-beautiful-dnd#316 |
Beta Was this translation helpful? Give feedback.
-
Hello everyone,
I have opened this discussion as part of the wp-block-components repository in order to bring together a few topics from across a few PRs that touched upon this discussion's subject matter.
I would see 2 main points of discussion, with common characteristics between them, that we could address:
1. Multi-select Component
For the multi-select component I have noticed that we are currently using the react-multi-select-component package. @mahdiyazdani and @gooklani have suggested, here and here, a more suitable alternative by using react-select instead.
At ~22k GitHub stars for react-select, compared to ~150 for react-multi-select-component, and backed by Atlassian it seems like the most suitable choice. One lacking feature out of the box, that I observed, was the lack of a - Select All - type of functionality, but that is something we can build ourselves quite easily.
One important aspect we've shortly discussed in regards to the multi-select component is whether or not the items within should be sortable. As @mahdiyazdani has mentioned in this PR here - is that we should not rely on the "react-sortable-hoc" package that react-select uses for demonstration but instead integrate our component with another, better supported, library such as dnd-kit or other alternatives.
❓In this direction I would like to open a few questions for clarification:
2. Sortable Component in the Inspector & library choice for sorting
For the sorting functionality, as mentioned in point 1 as well, we should not rely anymore on react-sortable-hoc and choose from a few suitable libraries.
I have tested the dnd-kit package but I have found it to be a bit difficult to work with and the documentation was not the most helpful. If someone else has more experience with implementing it I would be happy to work together on it's implementation.
Because of these hurdles, I have opted for the react-beautiful-dnd package which is also backed by Atlassian with ~23k stars on GitHub. As a quick PoC, I have implemented the sorting as an
Inspector
component element below (normally we would want to split things out into separate components but in this example everything is just done in one place for simplicity):Because of its large feature set and support for horizontal lists, it should be straightforward to implement it as part of the multi-select component as well if it is required.
The documentation is pretty thorough and there are a great number of examples available here for almost all use cases.
Of course, this is just my suggestion so please feel free to suggest other alternatives as well or maybe reinforce dnd-kit as a stronger option if you would like.
Thank you for taking the time and I look forward to your feedback!
@kuserich @mahdiyazdani @gooklani @kalibir
Beta Was this translation helpful? Give feedback.
All reactions