diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.js b/docs/src/pages/components/tree-view/RecursiveTreeView.js new file mode 100644 index 00000000000000..537e43a47cbe56 --- /dev/null +++ b/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 => ( + + {Array.isArray(nodes.children) ? nodes.children.map(node => renderTree(node)) : null} + + ); + + return ( + } + defaultExpanded={['root']} + defaultExpandIcon={} + > + {renderTree(data)} + + ); +} diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx new file mode 100644 index 00000000000000..afcb4c6b291667 --- /dev/null +++ b/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) => ( + + {Array.isArray(nodes.children) ? nodes.children.map(node => renderTree(node)) : null} + + ); + + return ( + } + defaultExpanded={['root']} + defaultExpandIcon={} + > + {renderTree(data)} + + ); +} diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md index ff8a3bb367fddc..80f2c5113bb499 100644 --- a/docs/src/pages/components/tree-view/tree-view.md +++ b/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