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

mui · Jul 31, 2024 · 995fccc · 995fccc
1 parent ca2fb5c
commit 995fccc
Show file tree

Hide file tree

Showing 71 changed files with 3,144 additions and 108 deletions.
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
@@ -510,6 +510,7 @@ const pages: MuiPage[] = [
           { pathname: '/x/react-tree-view/rich-tree-view/expansion' },
           { pathname: '/x/react-tree-view/rich-tree-view/customization' },
           { pathname: '/x/react-tree-view/rich-tree-view/focus' },
+          { pathname: '/x/react-tree-view/rich-tree-view/ordering', plan: 'pro' },
         ],
       },
       {

diff --git a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js
@@ -25,6 +25,7 @@ import {
 } from '@mui/x-tree-view/TreeItem2';
 import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
 import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
+import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
 
 const ITEMS = [
   {
@@ -212,6 +213,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
     getCheckboxProps,
     getLabelProps,
     getGroupTransitionProps,
+    getDragAndDropOverlayProps,
     status,
     publicAPI,
   } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
@@ -245,6 +247,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
           <CustomLabel
             {...getLabelProps({ icon, expandable: expandable && status.expanded })}
           />
+          <TreeItem2DragAndDropOverlay {...getDragAndDropOverlayProps()} />
         </CustomTreeItemContent>
         {children && <TransitionComponent {...getGroupTransitionProps()} />}
       </StyledTreeItemRoot>

diff --git a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx
@@ -28,6 +28,7 @@ import {
 } from '@mui/x-tree-view/TreeItem2';
 import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
 import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
+import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
 
 type FileType = 'image' | 'pdf' | 'doc' | 'video' | 'folder' | 'pinned' | 'trash';
@@ -248,6 +249,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
     getCheckboxProps,
     getLabelProps,
     getGroupTransitionProps,
+    getDragAndDropOverlayProps,
     status,
     publicAPI,
   } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
@@ -281,6 +283,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
           <CustomLabel
             {...getLabelProps({ icon, expandable: expandable && status.expanded })}
           />
+          <TreeItem2DragAndDropOverlay {...getDragAndDropOverlayProps()} />
         </CustomTreeItemContent>
         {children && <TransitionComponent {...getGroupTransitionProps()} />}
       </StyledTreeItemRoot>

diff --git a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.js
@@ -15,6 +15,7 @@ import {
 } from '@mui/x-tree-view/TreeItem2';
 import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
 import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
+import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
 
 const ITEMS = [
   {
@@ -50,6 +51,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
     getCheckboxProps,
     getLabelProps,
     getGroupTransitionProps,
+    getDragAndDropOverlayProps,
     status,
   } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
 
@@ -74,6 +76,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
             <TreeItem2Checkbox {...getCheckboxProps()} />
             <TreeItem2Label {...getLabelProps()} />
           </Box>
+          <TreeItem2DragAndDropOverlay {...getDragAndDropOverlayProps()} />
         </CustomTreeItemContent>
         {children && <TreeItem2GroupTransition {...getGroupTransitionProps()} />}
       </TreeItem2Root>

diff --git a/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx b/docs/data/tree-view/rich-tree-view/customization/HeadlessAPI.tsx
@@ -18,6 +18,7 @@ import {
 } from '@mui/x-tree-view/TreeItem2';
 import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
 import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
+import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
 
 const ITEMS: TreeViewBaseItem[] = [
   {
@@ -60,6 +61,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
     getCheckboxProps,
     getLabelProps,
     getGroupTransitionProps,
+    getDragAndDropOverlayProps,
     status,
   } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
 
@@ -84,6 +86,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
             <TreeItem2Checkbox {...getCheckboxProps()} />
             <TreeItem2Label {...getLabelProps()} />
           </Box>
+          <TreeItem2DragAndDropOverlay {...getDragAndDropOverlayProps()} />
         </CustomTreeItemContent>
         {children && <TreeItem2GroupTransition {...getGroupTransitionProps()} />}
       </TreeItem2Root>

diff --git a/docs/data/tree-view/rich-tree-view/items/items.md b/docs/data/tree-view/rich-tree-view/items/items.md
@@ -187,6 +187,11 @@ const itemTree = apiRef.current.getItemTree();
 
 {{"demo": "ApiMethodGetItemTree.js", "defaultCodeOpen": false}}
 
+:::info
+This method is mostly useful when the Tree View has some internal updates on the items.
+For now, the only features causing updates on the items is the [re-ordering](/x/react-tree-view/rich-tree-view/ordering/).
+:::
+
 ### Get an item's children by ID
 
 Use the `getItemOrderedChildrenIds` API method to get an item's children by its ID.

diff --git a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.js b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.js
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
+
+const ITEMS = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function DragAndDrop() {
+  return (
+    <Box sx={{ minHeight: 352, minWidth: 300 }}>
+      <RichTreeViewPro
+        items={ITEMS}
+        itemsReordering
+        defaultExpandedItems={['grid', 'pickers']}
+        experimentalFeatures={{
+          indentationAtItemLevel: true,
+          itemsReordering: true,
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
+
+const ITEMS: TreeViewBaseItem[] = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function DragAndDrop() {
+  return (
+    <Box sx={{ minHeight: 352, minWidth: 300 }}>
+      <RichTreeViewPro
+        items={ITEMS}
+        itemsReordering
+        defaultExpandedItems={['grid', 'pickers']}
+        experimentalFeatures={{
+          indentationAtItemLevel: true,
+          itemsReordering: true,
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx.preview
@@ -0,0 +1,9 @@
+<RichTreeViewPro
+  items={ITEMS}
+  itemsReordering
+  defaultExpandedItems={['grid', 'pickers']}
+  experimentalFeatures={{
+    indentationAtItemLevel: true,
+    itemsReordering: true,
+  }}
+/>