[TreeView] Support item reordering using drag and drop #12213

flaviendelangle · 2024-02-26T13:33:05Z

Requirements for this PR

Basic example

Enable the indentationAtItemLevel experimental feature (see [TreeView] Allow to define indentation at the item level #13126)
Pass the itemsReordering prop

<RichTreeViewPro
    items={ITEMS}
    itemsReordering
    experimentalFeatures={{ indentationAtItemLevel: true }}
/>

Current status

Support on TreeItem
Support on TreeItem2
Write doc
Write tests

mui-bot · 2024-02-26T13:37:42Z

Deploy preview: https://deploy-preview-12213--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against 8d0d69c

github-actions · 2024-02-28T12:29:22Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2024-03-04T07:53:23Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2024-03-06T09:55:03Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2024-03-11T08:13:00Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2024-03-25T13:07:25Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2024-03-28T09:31:51Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

cherniavskii · 2024-03-28T14:51:54Z

docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.js

I have implemented drag and drop for the pivoting panel in #9877 – there's no touchscreen support yet, but maybe you'll find it useful.
Preview: https://deploy-preview-9877--material-ui-x.netlify.app/x/react-data-grid/pivoting/

Thanks!
What was the reason why you went for the touchXXX event instead of dragXXX?

Did I? I don't recall using touch events

mouseXXX sorry, which will force you to use touchXXX to support mobile from what I understand

I don't remember exactly, but it probably didn't work as expected.
I will double check this

I used mouse events only for panel resizing. But after reading Matheus' comment in #9330 (comment) I switched to pointer events – see https://github.com/cherniavskii/mui-x/blob/pivoting/packages/x-data-grid-premium/src/hooks/utils/useResize.ts

For drag & drop, I used the draggable attribute and drag events. I've extracted the useResize hook to a separate file to avoid confusion: https://github.com/cherniavskii/mui-x/blob/pivoting/packages/x-data-grid-premium/src/components/GridPivotPanel.tsx

github-actions · 2024-04-03T14:41:51Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2024-05-07T06:51:36Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx

github-actions · 2024-05-23T17:10:44Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

flaviendelangle · 2024-05-24T13:11:48Z

packages/x-tree-view/src/models/items.ts

@@ -4,3 +4,9 @@ export type TreeViewItemId = string;
 export type TreeViewBaseItem<R extends {} = { id: string; label: string }> = R & {
  children?: TreeViewBaseItem<R>[];
 };
+
+export type TreeViewItemsReorderingAction =


This type need to be on the community package because it is used in TreeItem2DragAndDropOverlay which is on the community package (to avoid creating a different Tree Item component on the pro package)

flaviendelangle · 2024-05-24T13:13:33Z

packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx

+  ],
+}));
+
+function TreeItem2DragAndDropOverlay(props: TreeItem2DragAndDropOverlayProps) {


This is on the community package because it allows to have a single Tree Item component shared across all plans.
For now I did not try to add any shiny abstraction to have it in the pro package, I think having a dummy component here is the best trade-off

If we want to go a little further, we can see how to inject the style from the pro plan since it's almost all the this component currently have, but I don't think it's worth the effort for now

flaviendelangle · 2024-05-24T13:15:50Z

packages/x-tree-view/src/internals/useTreeView/useTreeView.ts

@@ -122,6 +124,9 @@ export const useTreeView = <Plugins extends readonly TreeViewPlugin<TreeViewAnyP
  contextValue.runItemPlugins = (itemPluginProps) => {


I think I'll move all the runItemPlugin calls in a standalone hook to be able to document it more thoroughly, but it would make the review harder so it stays here for now.

The idea of these new enhancers is to have each plugin responsible for generating its props passed to the various slots.
It allows to have TreeItem2DragAndDropOverlay being super dumb.
If we scale this to more plugins, we might have to have a smarter merging process for callbacks and refs, but I don't think it's a top priority.

flaviendelangle · 2024-05-24T13:27:44Z

docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js

+  };
+
+  return (
+    <TreeItem2Provider itemId={itemId}>


I don't think we can skip re-creating the whole Tree Item here in order to get the content props and re-dispatch them to the drag handle.

One way of doing it would be to add handleDragStart and handleDragStop on useTreeItem2Utils.
That way, this demo could just override its content slot to render the default TreeItem2Content with the children it receives plus the added icon (and pass the handlers to it from useTreeItem2Utils).
It could then use slotProps and defaultMuiPrevented to remove the behaviors from the root.

Basically it would be closer to this demo, which would be super nice because if in the future we add editing, or anything else, it would just work out of the box.

But adding it to useTreeItem2Utils is not trivial because it means this hook must be able to be enriched from the plugins somehow, and right now it does not.
That will be a nice follow up.

flaviendelangle · 2024-05-24T13:46:41Z

...iew-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts

+export interface UseTreeItem2DragAndDropOverlaySlotPropsFromItemsReordering
+  extends TreeItem2DragAndDropOverlayProps {}
+
+declare module '@mui/x-tree-view/useTreeItem2' {


One limitation of using declare here is that if you use one RichTreeView and one RichTreeViewPro, and if this RichTreeView use a custom Tree Item, then this custom Tree Item will have a drag & drop props on the value returned by getRootProps and the other functions.

I think it's fine

flaviendelangle · 2024-05-28T13:58:35Z

Opened for review

flaviendelangle · 2024-05-28T15:02:51Z

docs/data/tree-view/rich-tree-view/items/items.md

+
+{{"demo": "ApiMethodGetItemTree.js", "defaultCodeOpen": false}}
+
+:::info


We will be able to create a way better demo once we have the label editing

github-actions · 2024-05-30T13:59:28Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

flaviendelangle self-assigned this Feb 26, 2024

flaviendelangle added breaking change component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! labels Feb 26, 2024

flaviendelangle marked this pull request as draft February 26, 2024 13:33

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 28, 2024

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Feb 29, 2024

flaviendelangle removed the breaking change label Mar 4, 2024

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Mar 4, 2024

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 6, 2024

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 11, 2024

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 19, 2024

flaviendelangle changed the base branch from next to master March 21, 2024 14:10

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 25, 2024

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 25, 2024

flaviendelangle changed the title ~~[TreeView] POC: Drag & drop~~ [TreeView] Add support for drag and drop Mar 28, 2024

flaviendelangle mentioned this pull request Mar 28, 2024

[TreeView] Create pro package #12240

Merged

2 tasks

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 28, 2024

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 28, 2024

cherniavskii reviewed Mar 28, 2024

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 3, 2024

flaviendelangle force-pushed the drag-and-drop-tree-view branch from f953fb6 to 88a8b4d Compare April 22, 2024 08:22

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 7, 2024

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 10, 2024

flaviendelangle changed the title ~~[TreeView] Add support for drag and drop~~ [TreeView] SUpport item reordering using drag and drop May 13, 2024

flaviendelangle changed the title ~~[TreeView] SUpport item reordering using drag and drop~~ [TreeView] Support item reordering using drag and drop May 13, 2024

noraleonte reviewed May 16, 2024

View reviewed changes

packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx Outdated Show resolved Hide resolved

flaviendelangle mentioned this pull request May 20, 2024

[TreeView] Allow to define indentation at the item level #13126

Merged

flaviendelangle force-pushed the drag-and-drop-tree-view branch 3 times, most recently from 1587447 to f48f825 Compare May 22, 2024 11:37

flaviendelangle mentioned this pull request May 23, 2024

[TreeView] Allow to customize the indentation of nested items #13225

Merged

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 23, 2024

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 24, 2024

flaviendelangle commented May 24, 2024

View reviewed changes

flaviendelangle requested review from noraleonte, joserodolfofreitas, LukasTy and arthurbalduini May 28, 2024 13:26

flaviendelangle marked this pull request as ready for review May 28, 2024 13:26

flaviendelangle commented May 28, 2024

View reviewed changes

flaviendelangle force-pushed the drag-and-drop-tree-view branch from aa4dc51 to 461c01a Compare May 30, 2024 07:04

[TreeView] Support item reordering using drag and drop

5fbedd1

flaviendelangle force-pushed the drag-and-drop-tree-view branch from 461c01a to 5fbedd1 Compare May 30, 2024 07:11

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 30, 2024

Merge branch 'master' into drag-and-drop-tree-view

8d0d69c

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TreeView] Support item reordering using drag and drop #12213

[TreeView] Support item reordering using drag and drop #12213

flaviendelangle commented Feb 26, 2024 •

edited

mui-bot commented Feb 26, 2024 •

edited

github-actions bot commented Feb 28, 2024

github-actions bot commented Mar 4, 2024

github-actions bot commented Mar 6, 2024

github-actions bot commented Mar 11, 2024

github-actions bot commented Mar 25, 2024

github-actions bot commented Mar 28, 2024

cherniavskii Mar 28, 2024

flaviendelangle Mar 28, 2024

cherniavskii Mar 28, 2024

flaviendelangle Mar 28, 2024

cherniavskii Mar 28, 2024

cherniavskii Apr 1, 2024

github-actions bot commented Apr 3, 2024

github-actions bot commented May 7, 2024

github-actions bot commented May 23, 2024

flaviendelangle May 24, 2024

flaviendelangle May 24, 2024

flaviendelangle May 24, 2024

flaviendelangle May 24, 2024

flaviendelangle May 24, 2024

flaviendelangle commented May 28, 2024 •

edited

flaviendelangle May 28, 2024

github-actions bot commented May 30, 2024

		@@ -122,6 +124,9 @@ export const useTreeView = <Plugins extends readonly TreeViewPlugin<TreeViewAnyP
		contextValue.runItemPlugins = (itemPluginProps) => {


		{{"demo": "ApiMethodGetItemTree.js", "defaultCodeOpen": false}}

		:::info

[TreeView] Support item reordering using drag and drop #12213

Are you sure you want to change the base?

[TreeView] Support item reordering using drag and drop #12213

Conversation

flaviendelangle commented Feb 26, 2024 • edited

Requirements for this PR

Basic example

Current status

mui-bot commented Feb 26, 2024 • edited

github-actions bot commented Feb 28, 2024

github-actions bot commented Mar 4, 2024

github-actions bot commented Mar 6, 2024

github-actions bot commented Mar 11, 2024

github-actions bot commented Mar 25, 2024

github-actions bot commented Mar 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Apr 3, 2024

github-actions bot commented May 7, 2024

github-actions bot commented May 23, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flaviendelangle commented May 28, 2024 • edited

Choose a reason for hiding this comment

github-actions bot commented May 30, 2024

flaviendelangle commented Feb 26, 2024 •

edited

mui-bot commented Feb 26, 2024 •

edited

flaviendelangle commented May 28, 2024 •

edited