import * as React from 'react'; import { TreeView, TreeItem } from '@mui/x-tree-view'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import { useRouter } from 'next/router' import { styled } from '@mui/material/styles'; const TCTreeItem = styled(TreeItem)(({ theme }) => ({ '& .MuiTreeItem-content': { '& .MuiTreeItem-label': { fontSize: '1rem', paddingLeft: '6px', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,', lineHeight: 2.0, }, }, })) export default function FolderTree(props) { const renderTree = (nodes) => ( {Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node)) : null} ); const router = useRouter() // const childrenNodeIds = props.tree.children.map(aNode => {return aNode.id}) const expandedNodes = [props.tree.id] return ( } defaultExpanded={expandedNodes} defaultExpandIcon={} 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) // router.reload() } }} sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} > {renderTree(props.tree)} ); }