How to get a collection of items from a list with ‘group/block’ select.
Assume using REACT to render a sorted list where each item can be selected with mouse click. The selector is an ‘id’ which was assigned with building the list before sorting/rendering. Already a function is assigned for using event.ctrlKey, event.metaKey etc to perform actions on one of the selected items.
Question is how to get a continuous group/block of items of the displayed list which were selected with previous common used action with ‘shift’ and ‘left mouse click’.
Searching the web didn’t gave examples with plain vanilla react, only some libs (eg. npm-based) not looking simple and maybe a bit of an overkill.
I thought there is an easy react-way to get a group/block of items on list with using keystrokes like Cntrl/Alt/Shift etc. But I could not find it, maybe there are libs for that, but … it works going the harder/hacking way .
After building the ‘source’ array for the list and sorting it, a required filtering is used to add also the current list item number for each item.
With selecting items on the list that way not only enables to identify each item by it’s occurrence on the list, but also to grap any group and all of it’s items attributes.
So – basically – solved!
Thanks for following this, maybe there is a more elegant approach?
Selection (ordering, drag-drop, etc.) and other list actions are tricky to get right. Throw touch gestures into the mix, and you are looking at a lot of custom code haha. It all depends on how far you want to go. If your current approach works, then stick with it. If not, there is nothing wrong with using a 3rd party library
Creating engaging and entertaining content for designers and developers since 1998.
.
