Animating expanding and collapsing could be a UX necessity

[deniskabana]

Is your feature request related to a problem? Please describe.
For react-dropdown-tree-select everything is rendered as a single unordered list with padding added on node.style (for tree list with expanded children). I suppose this is due to CSS hiding when filtering (which is quite clever and fast) but kills hierarchy (elements are not wrapped). Makes it very very difficult to implement sliding animation for reveal (close animation is not as necessary for our use-case and from a UX standpoint could be omitted or just very quick).

TL;DR: Expanding children in a tree results in mounting and dismounting list items to the top-level row. Very hard to add animation to this type of usage.

Sandbox of the setup in GIF:
https://codesandbox.io/s/cool-noether-p3f41?fontsize=14&hidenavigation=1&theme=dark

Describe the solution you'd like

1. Wrap every list item content in a div, like <li class="node tree"><div class="list-item-container">...</div></li> and wrap nested children in a ul > li structure as well. I feel like I am missing something here, though.
2. Add an option to delay unmounting by any config / prop (e.g. delayUnmount?: number = 0) and create new callbacks -> nestedChildrenDidMount(nestedChildren: TreeNode[] | string[]) and nestedChildrenWillUnmount(timeUntilUnmount: number). Doesn't solve revealing animations however.
3. Consider adding callback specifically to let the users decide whether they can live with performance penalty on manipulating huge lists manually. That could be something like just revealing list of DOM nodes in a specific callback.

Describe alternatives you've considered
Right now, to achieve the desired result, I am using a hack - linear transition and style/className manipulation. Easing could have severe impact on performance and I don't think adding custom JS easing for multiple elements is worth the added overhead to the code. See https://codesandbox.io/s/cool-noether-p3f41?fontsize=14&hidenavigation=1&theme=dark for code.

Additional context
I'd be happy for any suggestions or ideas in this matter.

[deniskabana]

Update - JS controlled animation with easings

I have been working on another solution. This is a drop-in solution, that wraps the react-dropdown-tree-select in another component that intercepts onNodeToggle(currentNode) callback. This is what it looks like:

The code is commented and tested and working for even very large tree lists. To use it, copy AnimatedDropdown.js and easings.js into your project and use that as a direct replacement for react-dropdown-tree-select for now.

Code and demo

Working code sandbox with demo: https://codesandbox.io/s/xenodochial-meitner-v1950

NOTE: My demo works only if all list items have equal height !!
I've used very fast but naive implementation. Feel free to re-write it. Just change generated css to do visibility: hidden instead of height: 0 and measure the height of each child before starting.

[mrchief]

@deniskabana This looks amazing! I'm going to dig deeper and see if we can integrate it somehow. I'm thinking either as an HOC example or as part of the dist bundle (in a way that it is tree shakable). If you have ideas, please send them along.

[deniskabana]

@mrchief Thank you! I'd be glad to help integrate it with some help from any of the contributors :) I have some pointers and ideas about how we could make it even better were I to change the code that handles tree nodes.

[mrchief]

@deniskabana Please send them along. We can discuss the ideas here or if you want to send any PRs, feel free to do so.

As a pointer, when I said tree shakable, I meant something like this:

//// current situation
// only imports the core
import DropdownTreeSelect from 'react-dropdown-tree-select' 

//// future
// only imports the core
import DropdownTreeSelect from 'react-dropdown-tree-select' 

// imports animated hoc 
import { AnimatedDropdownTreeSelect } from 'react-dropdown-tree-select' 

As long as the core import doesn't bring the whole bundle (core + HoCs), this should be OK; in fact better than OK as we're now enhancing the developer's experience without imposing any extra bundling cost. Does that make sense?

[deniskabana]

@mrchief Sure thing! First of all let's review all issues with my current solutions:

Issues

1. It naively expects every single tree node to be of equal height; Does not work any other way without a major rewrite.
   Solution: Apply visibility: hidden to each tree node, measure height and store it. Use referenced heights in animating instead of calculated goal / length.
2. I do not provide any requestAnimationFrame loop cancellation. Nodes are unmounted as soon as I close it and there's failsafe to let it finish gracefully in the background.
   Solution: Attach a reference holder, kill animation on change and add it to componentWillUnmount()
3. It only works with expanding, not with collapsing.
   Solution: Collapsing means instant unmounting right now. For the case of animated tree list we would have to postpone unmounting with a timeout of given length (propagated from parent's config / props).
4. I use dynamically created string for matching elements without having any other external reference to them.
   Solution: Using refs to ensure the React way (albeit a bit slower).

Other propositions

1. Hiding tree nodes by default on mount with HTMLElement.style.visibility; animator function would be responsible for unhiding and starting the animation. Right now I'm adding a <style /> notation to the document.head with height: 0 for each ID to prevent flashing.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mrchief]

Hey @deniskabana, not sure what happened here. Were you expecting something from me?