XeNote/components/FolderTree.js

135 lines
3.4 KiB
JavaScript
Raw Normal View History

import * as React from "react";
import { TreeView, TreeItem } from "@mui/x-tree-view";
import { useRouter } from "next/router";
import { styled } from "@mui/material/styles";
2022-04-19 04:39:51 +00:00
2023-12-24 02:06:57 +00:00
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,',
2023-12-24 02:06:57 +00:00
lineHeight: 2.0,
2022-04-19 04:39:51 +00:00
},
2023-12-24 02:06:57 +00:00
},
}));
export default function FolderTree(props) {
const router = useRouter();
const memoTree = React.useMemo(() => renderTree(props.tree), [props.tree]);
const expandedNodes = [props.tree.id];
2023-12-24 02:06:57 +00:00
return (
<>
<a href="http://localhost:3000">{"<-"} Back To Portfolio</a>
2023-12-31 21:16:04 +00:00
<TreeView
aria-label="rich object"
defaultCollapseIcon={<ChevronDownIcon />}
defaultExpanded={expandedNodes}
defaultExpandIcon={<ChevronRightIcon />}
onNodeSelect={(event, nodIds) => {
2024-02-17 01:35:38 +00:00
const currentNode = binaryFind(props.flattenNodes, nodIds);
// const currentNode = props.flattenNodes.find((aNode) => {
// console.log(aNode.id);
// return aNode.id === nodIds;
// });
console.log({ currentNode });
if (currentNode != null && currentNode.routePath != null) {
router.push(currentNode.routePath);
}
}}
sx={{ overflowY: "scroll" }}
>
{memoTree}
</TreeView>
</>
2023-12-24 02:06:57 +00:00
);
}
2024-02-17 01:35:38 +00:00
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];
console.log(currentValue);
// If the element is present at the middle
// itself
if (currentValue.id == valToFind) return currentValue;
// If element is smaller than mid, then
// it can only be present in left subarray
if (currentValue.id > valToFind) rightIndex = middleIndex - 1;
// Else the element can only be present
// in right subarray
else leftIndex = middleIndex + 1;
}
// We reach here when element is not
// present in array
return null;
}
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>
);
}