2022-03-23 15:25:28 +00:00
|
|
|
import * as React from 'react';
|
|
|
|
import TreeView from '@mui/lab/TreeView';
|
|
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
|
|
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
|
|
|
import TreeItem from '@mui/lab/TreeItem';
|
2022-03-24 04:15:43 +00:00
|
|
|
import { useRouter } from 'next/router'
|
2022-03-23 15:25:28 +00:00
|
|
|
|
|
|
|
export default function FolderTree(props) {
|
|
|
|
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>
|
|
|
|
);
|
|
|
|
|
2022-03-24 04:15:43 +00:00
|
|
|
const router = useRouter()
|
2022-03-24 08:19:01 +00:00
|
|
|
// const childrenNodeIds = props.tree.children.map(aNode => {return aNode.id})
|
|
|
|
const expandedNodes = [props.tree.id]
|
2022-03-23 15:25:28 +00:00
|
|
|
return (
|
|
|
|
<TreeView
|
|
|
|
aria-label="rich object"
|
|
|
|
defaultCollapseIcon={<ExpandMoreIcon />}
|
2022-03-24 08:19:01 +00:00
|
|
|
defaultExpanded={expandedNodes}
|
2022-03-23 15:25:28 +00:00
|
|
|
defaultExpandIcon={<ChevronRightIcon />}
|
2022-03-24 04:15:43 +00:00
|
|
|
onNodeSelect = {(event, nodIds) => {
|
|
|
|
const currentNode = props.flattenNodes.find(aNode => {return aNode.id === nodIds})
|
|
|
|
// console.log(event)
|
|
|
|
// console.log(currentNode)
|
|
|
|
if (currentNode != null && currentNode.routePath != null) {
|
|
|
|
router.push(currentNode.routePath)
|
|
|
|
}
|
|
|
|
}}
|
2022-03-24 07:43:18 +00:00
|
|
|
sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
|
2022-03-23 15:25:28 +00:00
|
|
|
>
|
|
|
|
{renderTree(props.tree)}
|
|
|
|
</TreeView>
|
|
|
|
);
|
|
|
|
}
|