Expand transition animation like MUI Tree View
chris-oms opened this issue · comments
Is your feature request related to a problem? Please describe.
The expanding of a parent item to display its child items does not include a grow/expand transition like the MUI TreeView component does. This makes it appear quite clunky. The way the child nodes are not nested inside the parent item and are only added to the DOM when open means adding the MUI Grow Util doesn't work.
Describe the solution you'd like
Either include hidden child components in the DOM and nest them inside the parent DOM element, or add expand/collapse transitions some other way
@chris-oms
Today I released v3.4.0.
This version adds the enableAnimateExpand API, which should give you the behavior you expect.
<Tree
{... .somePropx}
enableAnimateExpand={true}
/>
Please refer to this sample.
https://minop1205.github.io/react-dnd-treeview/?path=/docs/basic-examples-animateexpand--animate-expand-story
NOTE:
It is important to note that setting enableAnimateExpand to true will cause all hidden nodes to be rendered, which can cause performance problems if the number of nodes is large.
@minop1205 Thanks for adding this, however the performance issues make it unusable for me. I believe MUI's tree view renders all nodes from the get go, so I'm not sure where the difference lies.
@chris-oms How many nodes are there in total?
Also, can you provide JSON of the tree data to solve performance issues?
@minop1205 About 2000 overall, which is admittedly a lot, but no more than 20-30 child nodes in any particular parent. The default MUI tree view worked fine with the same data
Here's the JSON format of each item:
{ id: 14548, parent: 154, text: 'Example text', data: { itemType: 'Example itemType', level: 1, title: 'Example Title', value: 'Example Value', }, }
@minop1205 same problem, with 300 nodes working, with 14k - browser dies
format:
...
{droppable: true, id: '4', parent: '1', text: 'node 4'}
...
I have just made a performance fix.
It no longer render hidden nodes even if enableAnimationExpand is true.
Tested with 3000 nodes and animation issues seem to have improved.
It is currently available in alpha version, so please install and try it from below.
npm install @minoru/react-dnd-treeview@alpha
@minop1205 For me initialOpen={true} is not working with dynamic routes.
Improved performance by not rendering hidden nodes even when enableAnimateExpand is set to true.
Released as version 3.4.1.
Sorry to chime-in in a closed issue. I am having problems when I enable the animation to expand nodes:
ResizeObserver loop completed with undelivered notifications is the error I have.
Any ideas of what we can look into to get this solved? We want to use the animated version for the expansion.
Let me know @minop1205 if you want me to create a new issue instead.
@halbano Thank you for your report.
Will you please create a new issue for your problem?
@minop1205 I've created the new issue here: #206