search

minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
530 stars 71 forks source link

Expand transition animation like MUI Tree View #167

Closed chris-oms closed 1 year ago

chris-oms commented 1 year ago

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

minop1205 commented 1 year ago

@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.

chris-oms commented 1 year ago

@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.

minop1205 commented 1 year ago

@chris-oms How many nodes are there in total? Also, can you provide JSON of the tree data to solve performance issues?

chris-oms commented 1 year ago

@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', }, }

Nerevar123 commented 1 year ago

@minop1205 same problem, with 300 nodes working, with 14k - browser dies

format:

... {droppable: true, id: '4', parent: '1', text: 'node 4'} ...

minop1205 commented 1 year ago

@chris-oms @Nerevar123

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
nilesh2b commented 1 year ago

@minop1205 For me initialOpen={true} is not working with dynamic routes.

minop1205 commented 1 year ago

@nilesh2b Can you please create a new Issue since the topic is different?

minop1205 commented 1 year ago

https://github.com/minop1205/react-dnd-treeview/pull/182

minop1205 commented 1 year ago

Improved performance by not rendering hidden nodes even when enableAnimateExpand is set to true.

Released as version 3.4.1.

halbano commented 1 year ago

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.

minop1205 commented 1 year ago

@halbano Thank you for your report. Will you please create a new issue for your problem?

halbano commented 1 year ago

@minop1205 I've created the new issue here: https://github.com/minop1205/react-dnd-treeview/issues/206