109 lines
2.6 KiB
JavaScript
109 lines
2.6 KiB
JavaScript
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 (
|
|
<>
|
|
<a href="http://localhost:3000">{"<-"} Back To Portfolio</a>
|
|
|
|
<TreeView
|
|
aria-label="rich object"
|
|
defaultCollapseIcon={<ChevronDownIcon />}
|
|
defaultExpanded={expandedNodes}
|
|
defaultExpandIcon={<ChevronRightIcon />}
|
|
onNodeSelect={(event, nodIds) => {
|
|
// TODO: already sorted, impliment binary search
|
|
const currentNode = props.flattenNodes.find((aNode) => {
|
|
return aNode.id === nodIds;
|
|
});
|
|
console.log({ currentNode });
|
|
if (currentNode != null && currentNode.routePath != null) {
|
|
router.push(currentNode.routePath);
|
|
}
|
|
}}
|
|
sx={{ overflowY: "scroll" }}
|
|
>
|
|
{memoTree}
|
|
</TreeView>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function ChevronRightIcon() {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
height={10}
|
|
width={10}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="m8.25 4.5 7.5 7.5-7.5 7.5"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function ChevronDownIcon() {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
height={10}
|
|
width={10}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="m19.5 8.25-7.5 7.5-7.5-7.5"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function renderTree(nodes, layer = 0) {
|
|
return (
|
|
<TCTreeItem
|
|
key={nodes.id}
|
|
nodeId={nodes.id}
|
|
label={nodes.name}
|
|
sx={{ marginLeft: 1 * layer }}
|
|
>
|
|
{Array.isArray(nodes.children)
|
|
? nodes.children.map((node) => renderTree(node, layer + 1))
|
|
: null}
|
|
</TCTreeItem>
|
|
);
|
|
}
|