import * as React from "react"; import { TreeView, TreeItem } from "@mui/x-tree-view"; import { useRouter } from "next/router"; import { styled } from "@mui/material/styles"; const TCTreeItem = styled(TreeItem)(({ theme }) => ({ "& .MuiTreeItem-content": { borderRadius: "10px", "&:hover": { backgroundColor: "rgba(25, 118, 210, 0.59)", }, "& .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 router = useRouter(); const memoTree = React.useMemo(() => renderTree(props.tree), [props.tree]); const expandedNodes = [props.tree.id]; return ( <> {"<-"} Back To Portfolio } defaultExpanded={expandedNodes} defaultExpandIcon={} onNodeSelect={(event, nodIds) => { const currentNode = binaryFind(props.flattenNodes, nodIds); if (currentNode != null && currentNode.routePath != null) { router.push(currentNode.routePath); } }} sx={{ overflowY: "scroll" }} > {memoTree} ); } function binaryFind(sourceList, valToFind) { let leftIndex = 0; let rightIndex = sourceList.length - 1; let middleIndex; while (rightIndex >= leftIndex) { middleIndex = leftIndex + Math.floor((rightIndex - leftIndex) / 2); const currentValue = sourceList[middleIndex]; if (currentValue.id == valToFind) return currentValue; if (currentValue.id > valToFind) rightIndex = middleIndex - 1; else leftIndex = middleIndex + 1; } // We reach here when element is not // present in array return null; } function ChevronRightIcon() { return ( ); } function ChevronDownIcon() { return ( ); } function renderTree(nodes, layer = 0) { return ( {Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node, layer + 1)) : null} ); }