react-arborist icon indicating copy to clipboard operation
react-arborist copied to clipboard

Add API & DND support for moving nodes + hierarchy to a separate tree instance

Open viveleroi opened this issue 1 year ago • 3 comments

We need to have two tree instances which allow users to move nodes (complete with their hierarchy) between them.

For the API, we'd have a button that onClick, moves all selected nodes from tree1 to tree2. The node will disappear from tree1, and appear in tree2. If it's parent nodes have no other children, they too will disappear. If any parent nodes already existed in tree2, they will merge.

Drag and drop would use the same move logic, it would just occur when a user drags a node.

I don't see any clear support for this yet.

viveleroi avatar Oct 29 '22 22:10 viveleroi

I'm looking for the exact use case. Is this something that's being considered?

Marius-AdamDT avatar Jan 31 '23 09:01 Marius-AdamDT

I haven't actively been thinking about this. Off the top of my head we need to:

  1. Be able to identify the tree from which the drag started and the tree into which it dropped. We don't support that yet.

Moving the data can be handled in your app code since the <Tree> component can be fully controlled.

You could totally do it today with a button click though.

If you kept a ref to both trees, you could get the "treeRef.current.selectedNodes" from the first tree in the onClick handler of the button. Then you could update your data in the second tree and remove those nodes from the first tree.

jameskerr avatar Jan 31 '23 19:01 jameskerr

@jameskerr thanks for the quick reply! That does sound like a doable workaround for the time being! I'll try and whip up a code sandbox once I've got something working 👍

Marius-AdamDT avatar Feb 01 '23 16:02 Marius-AdamDT