Docs on drop target `linearIndex` vs `childIndex`

[holloway]

Is your feature request related to a problem? Please describe.

Are there any docs on how to implement drop handlers (<ControlledTreeEnvironment>), specifically on how the drop target types should be interpreted and what the difference between linearIndex and childIndex is?

[lukasbach]

Hey! At the moment, there are no dedicated docs for that. The gist is essentially just to implement the onDrop handler, you can use the implementation in the uncontrolled environment for that as reference, although it is a bit verbose and messy to be honest.

When the user is dropping an item, he is hovering over an ("target") item. The target type provides details where on that item that is:

• "item": User is dropping in the center part of an item. This means the item is a folder and props.canDropOnFolder is true, or it is not a folder and props.canDropOnNonFolder is true. The expectation is that the dragged items are inserted into the hovered target item. The target variable provided to the onDrop handler is of type DraggingPositionItem
• "between-items": User is either dragging on the top part or bottom part of the hovered item. The expactation is that the dragged items are inserted above the target item if they are hovering on the top part, or below if they are hovering on the bottom part. The target variable provided to the onDrop handler is of type DraggingPositionBetweenItems. The variable target.linePosition has the value "top" or "bottom" and determines this distinction.
• "root": The user is dragging somewhere on the the top-level of the tree. This means, either the tree is empty, and the user is dropping on the empty tree container, or the container in which the tree items are rendered extends downwards of the last item, and the user is dropping there. The expecation is that the item is inserted in the top-level of the tree at the bottom. This is demonstrated in this demo, and was introduced as fix for Can't drop items on an empty tree #182 (commit). In implementation, I think you can handle this identical to the targetType "item", since in the case of "root", the other props are identical to the "item" case with the referencing item being the root item. The target variable provided to the onDrop handler is of type DraggingPositionRoot

Regarding linearIndex and childIndex: childIndex refers to the position of an item within its parent. linearIndex refers to the overall position of the item within the entire tree, would all items be laid out in a linear manner. As an example:

The item "Black" has the childIndex 2, and the linearIndex 5.

Hope that was helpful, let me know if anything else is unclear!

[natetewelde]

When trying to implement the way its done in the uncontrolled tree environment, I'm running into the issue of items not being iterable in the initial for loop?

[lukasbach]

When trying to implement the way its done in the uncontrolled tree environment, I'm running into the issue of items not being iterable in the initial for loop?

What do you mean? Can you provide the implementation for the handler that you used and a log output of what value the items property has?

[natetewelde]

I was actually able to get it to not throw the error. Just would like an example of how to implement a simple custom onDrop handler that mimics the behavior of the uncontrolled tree.

[lukasbach]

Ah okay. One example is the actual implementation of the uncontrolled tree, but I have to admit, that it is far from simple. Unfortunately, it has a lot of corner cases that it respects at the moment, so that is all I have as an example at the moment.