Closed jortizsao closed 3 years ago
Thanks for opening this issue.
Indeed, having an internal order is unfortunate in this case as we end up having 2 sources of truth. 😞
I need to think about what the best API would be to handle this to ensure the internal array (used for tracking DOM nodes) is always reflecting the actual order of the SortableItems.
The first idea that comes to my mind and that would be easy to understand for the developer using the library is to require an index
prop in the each SortableItem
. Then, we can automatically update the internal state if one item changes.
The first idea that comes to my mind and that would be easy to understand for the developer using the library is to require an index prop in the each SortableItem. Then, we can automatically update the internal state if one item changes.
Maybe a key
or id
similar to how React uses for rendering a list of items? With that SortableItem
key, it's possible to identify if an item has changed its position
Ok, I have been checking the source code more deeply and I think I get why you said to require the index
since the SortableItem
doesn't know its new position within the list.
However, from the interface/api perspective, I think it makes it more intuitive to use a key
and then the library been able to manage the order from it, although with the current implementation seems more difficult to achieve this than using the index
instead 😄
The thing is that key
is reserved for React and is not visible to the component on which it is applied.
The key
is actually already required and used for all examples as you are usually using SortableItem
inside a array.map()
loop.
I think I found a fix that should work without changing the API 🎉 Please try v0.2.1 and tell me if it solves your issue 🙂
I think I found a fix that should work without changing the API 🎉 Please try v0.2.1 and tell me if it solves your issue 🙂
Yes, I can confirm it works. 🎉. Thank you so much. I had already forked the repo and started trying to fix but you were faster!
Is your feature request related to a problem? Please describe.
It seems that the SortableList keeps its own internal order. Thus, the real order and the internal order are out of sync when sorting the list from outside (i.e not using drag-n-drop) once the component has been rendered. So sorting again using drag-n-drop after externally re-sorted, leads to unexpected behaviour.
Describe the solution you'd like
Maybe expose a function that can set the internal order from outside. Similar to
swap
in https://github.com/bmcmahen/react-grid-dndThanks for the great library!