search

brimdata / react-arborist

The complete tree view component for React
MIT License
2.98k stars 136 forks source link

Show max depth or prevent drop on folders #187

Open theearlofsandwich opened 10 months ago

theearlofsandwich commented 10 months ago

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.

jameskerr commented 10 months ago

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