[TreeView] Add recursive demo (#19636)

docs/src/pages/components/tree-view/RecursiveTreeView.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TreeView from '@material-ui/lab/TreeView';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
+
+const data = {
+  id: 'root',
+  name: 'Parent',
+  children: [
+    {
+      id: '1',
+      name: 'Child - 1',
+    },
+    {
+      id: '3',
+      name: 'Child - 3',
+      children: [
+        {
+          id: '4',
+          name: 'Child - 4',
+        },
+      ],
+    },
+  ],
+};
+
+const useStyles = makeStyles({
+  root: {
+    height: 110,
+    flexGrow: 1,
+    maxWidth: 400,
+  },
+});
+
+export default function RecursiveTreeView() {
+  const classes = useStyles();
+
+  const renderTree = nodes => (
+    <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
+      {Array.isArray(nodes.children) ? nodes.children.map(node => renderTree(node)) : null}
+    </TreeItem>
+  );
+
+  return (
+    <TreeView
+      className={classes.root}
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpanded={['root']}
+      defaultExpandIcon={<ChevronRightIcon />}
+    >
+      {renderTree(data)}
+    </TreeView>
+  );
+}

docs/src/pages/components/tree-view/RecursiveTreeView.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TreeView from '@material-ui/lab/TreeView';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
+
+interface RenderTree {
+  id: string;
+  name: string;
+  children?: RenderTree[];
+}
+
+const data: RenderTree = {
+  id: 'root',
+  name: 'Parent',
+  children: [
+    {
+      id: '1',
+      name: 'Child - 1',
+    },
+    {
+      id: '3',
+      name: 'Child - 3',
+      children: [
+        {
+          id: '4',
+          name: 'Child - 4',
+        },
+      ],
+    },
+  ],
+};
+
+const useStyles = makeStyles({
+  root: {
+    height: 110,
+    flexGrow: 1,
+    maxWidth: 400,
+  },
+});
+
+export default function RecursiveTreeView() {
+  const classes = useStyles();
+
+  const renderTree = (nodes: RenderTree) => (
+    <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
+      {Array.isArray(nodes.children) ? nodes.children.map(node => renderTree(node)) : null}
+    </TreeItem>
+  );
+
+  return (
+    <TreeView
+      className={classes.root}
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpanded={['root']}
+      defaultExpandIcon={<ChevronRightIcon />}
+    >
+      {renderTree(data)}
+    </TreeView>
+  );
+}

docs/src/pages/components/tree-view/tree-view.md

@@ -17,6 +17,28 @@ The tree view also offers a controlled API.
 
 {{"demo": "pages/components/tree-view/ControlledTreeView.js"}}
 
+## Rich object
+
+While the `TreeView`/`TreeItem` component API maximizes flexibility, an extra step is needed to handle a rich object.
+
+Let's consider a data variable with the following shape, recursion can be used to handle it.
+
+```js
+const data = {
+  id: 'root',
+  name: 'Parent',
+  children: [
+    {
+      id: '1',
+      name: 'Child - 1',
+    },
+    // …
+  ],
+};
+```
+
+{{"demo": "pages/components/tree-view/RecursiveTreeView.js", "defaultCodeOpen": false}}
+
 ## Customized tree view
 
 ### Custom icons, border and animation