Draggable list demo expansion

[g-danna]

Hello react-spring community! Let me start by thanking the maintainers for their hard work on this magic library!

I've been working on and expanding the draggable list demo with a few features. Some I've been (to some extent) successful at, others... eh, not really. I'll use this post as a way to share examples for anyone who might find them useful, and, at the same time, to ask for some help in solving some issues.

Features added on top of the useSprings demo:

• Typescript version
• From absolutely to relatively positioned items
• Toggle sort mode
  • When set to true, shrinks the list from the content auto height to a fixed one (almost done)
  • onSortComplete(newOrder: number[]) callback with the new order that can be used to re-render the list with the new order (almost done)
• Scroll window up/down automatically when approaching the top/bottom respectively

CodeSandbox Link

Toggle sort mode

Say you want to sort long paragraphs of selectable text, or anything that has auto height or a very long height, then I think it's useful to be able to toggle a 'sort mode' in which the list items change props and have a fixed height.

For example, on LinkedIn, if you have an education entry with a very long description and your browser window is smaller than its height, you won't be able to sort it at all. This is also where the relatively positioned elements and the automatic edge scrolling features come into play.

Issues to solve:

1. If the user clicks the toggle sort mode button fast enough, the height animation will stop mid-way. The items are now sortable but have don't have the wanted height. I used the async spring scripting for this, and I don't know if there are some gotchas I don't know, or if it's a bug.
2. When exiting of sort-mode, only if the the onSortComplete(newOrder) callback is provided, the list elements change into the new order either animating (ignoring the immediate attribute) or in a weird two-frame animation, which you can see below. Here, there definitely is some gotcha I don't understand about react's lifecycles, and would appreciate any tip. I've read the complete guide to useEffect() but I can't wrap my head around it completely apparently.

Thank you in advance for your help! ✌️

[aleclarson]

Interesting demo! I'll be sure to test this out on the next RC before it's released to see if it surfaces any bugs. 👍

[YashasKirito]

@guglielmodanna Were you able to get the scroll window feature to work? I've been trying to create that animation but i haven't gotten any great ideas as to how to approach this problem.

Any suggestions would help. Thanks! ♥️