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

Show max depth or prevent drop on folders

Open theearlofsandwich opened this issue 2 years ago • 1 comments
trafficstars

I've got a tree that has categories and within those there are child links. I render two different trees, one that shows just the top level categories (and I want it only to ever display the root level nodes) and one that when you select a category shows the children of the selected category. Imagine it's a bit like windows explorer with 2 panes, and the left pane only ever shows the top level items.

image

This is all working great apart from one small thing! :)

If you drag within the top level category tree and drop onto one of the other categories, it then opens the node and shows all the sub items.

image

Is there a way you can tell a tree to allow drag and drop, but not to automatically open the folders if you drag something into it OR only ever show a max-depth of children (so you could set it to one for example)

I'm using a controlled tree and have my own handlers for onMove etc.

I hope that rather convoluted explanation makes sense... Thanks for any help, it's a terrific package!

EDIT: Managed to find a couple of different solutions - leaving this here in case anyone has a similar problem...

Solution 1: Pass a modified version of the top level node data into the left hand tree where I strip all the children from the array. That makes it behave as leaf nodes, so no folder opening!

Solution 2: (I like this one better) - use the disableDrop callback on the tree to disable dropping whenever it finds a node with children.

theearlofsandwich avatar Nov 11 '23 15:11 theearlofsandwich

Great! Glad you found a solution. I love seeing screenshots of people using the package. Happy coding.

jameskerr avatar Nov 15 '23 22:11 jameskerr