React-beautiful-dnd: Proposal: merge @atlaskit/tree into react-beautiful-dnd

[ianschmitz]

I was debating whether to open an issue here or in the @atlaskit/tree tracker, but thought GitHub would be more appropriate since it would get more eyes from the general react-beautiful-dnd community.

At my company we've been a long time user of react-beautiful-dnd since the early versions, and have loved it ever since ❤️. We've been long wanting drag-and-drop tree support from RBD for different use cases, and with the recent preview release of @atlaskit/tree we have that... sort of.

Don't get me wrong, the tree package solves some simple use cases very well, but we've run into issues where I believe having tree support be a core feature of RBD would have avoided:

• The internal implementation means it isn't possible to have multiple lists. The Tree component renders a DragDropContext and has very specific logic implemented for the onDrag* props. This means we can't drag between multiple trees, or for our specific use case, a flat RBD list to a tree.
  
• The @atlaskit/tree package depends on [email protected], while 11.x is current. We've now got two versions of RBD in our bundle which is unfortunate, unless we hold back on updating RBD, but we can't take advantage of the latest improvements. RBD seems to release major versions on a fairly regular cadence, so i can see this being an ongoing issue.
• An outstanding bug https://github.com/atlassian/react-beautiful-dnd/issues/1237 which would have likely been caught prior.
• Doesn't selectively set isNestingEnabled (which internally sets isCombineEnabled on the Droppable) for individual tree items based on the value of the item's hasChildren. For example if thinking about a file/folder tree structure, it doesn't make sense to drop a file onto another file, but it does make sense to drop a file onto a folder to be a child of that folder. In my picture example above, the blue items represent items with hasChildren: true, and the grey items are hasChildren: false. I handle this in code currently to ignore drops on items that don't support children, but it makes for an awkward drop animation

My proposal is to merge the tree support as a proper feature of RBD. Looking through the source code of tree, i don't foresee this being a huge challenge, but i may have overlooked some things.

Thanks for considering and for creating react-beautiful-dnd!

[alexreardon]

The @atlaskit/tree package depends on [email protected], while 11.x

This should be resolved soon. We are about to bump Atlaskit to react 16.x /cc @petegleeson

The internal implementation means it isn't possible to have multiple lists.

This would be a valid feature to add to tree for sure. @balnagy is there an issue for this?

merge the tree support as a proper feature of RBD

This is interesting and worth more thought. Perhaps we could move to a multi package setup 🤔

[crapthings]

can i make osx finder or windows explorer like feature use rbd for now?

its two different view but the left side should be a tree like this one

left side tree can be reorganization

[ianschmitz]

This is interesting and worth more thought. Perhaps we could move to a multi package setup

Yeah that could work!

There may be some ways that we could tweak the tree API to be more consistent with RBD. The current API is fairly simple, but is quite a bit different than the Droppable/Draggable rendering pattern of RBD.

[balnagy]

@alexreardon Here is the Atlaskit ticket for multiple tree feature.

[mheavenor]

Is there an update on this? I would love to see this be made a proper feature of RBD.

[Amheklerior]

I'm currently having exactly the same issue implementing a similar use case - _a single level list with draggable items on one side and a tree structure with reorderable items on the other side_.

Is there any update on this topic?

Thanks.

[wrobbinz]

For example if thinking about a file/folder tree structure, it doesn't make sense to drop a file onto another file, but it does make sense to drop a file onto a folder to be a child of that folder.

Wanted to chime in that I'm running into this same issue and wanting some way to conditionally set isNestingEnabled on a per node basis. I'm currently exiting out of onDragEnd based off a custom node property of isFolder, but as @ianschmitz stated, this results in clunky UX.

[h3rnandez]

Hi Guys!
I have the same case, Is there any update on this topic?
Regards!

[avele]

I'm really looking forward to multiple tree support feature being implemented, too.

[nitinreddy3]

Any updates on this?

[fgandarilla]

Hey guys, some one have a solution for this case?