XeNote/components/FolderTree.js

72 lines
2.4 KiB
JavaScript
Raw Normal View History

import * as React from 'react';
2023-12-24 02:06:57 +00:00
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': {
2023-12-31 21:16:04 +00:00
borderRadius: '10px',
2023-12-24 02:06:57 +00:00
'& .MuiTreeItem-label': {
fontSize: '1rem',
paddingLeft: '6px',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,',
lineHeight: 2.0,
2022-04-19 04:39:51 +00:00
},
2023-12-24 02:06:57 +00:00
},
2022-04-19 04:39:51 +00:00
}))
export default function FolderTree(props) {
2023-12-24 02:06:57 +00:00
const renderTree = (nodes) => (
<TCTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
{Array.isArray(nodes.children)
? nodes.children.map((node) => renderTree(node))
: null}
</TCTreeItem>
);
2023-12-24 02:06:57 +00:00
const router = useRouter()
// const childrenNodeIds = props.tree.children.map(aNode => {return aNode.id})
const expandedNodes = [props.tree.id]
return (
<>
2023-12-31 21:16:04 +00:00
<a href="http://localhost:3000" class="mb-5 flex-none rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">{"<-"} Back To Portfolio</a>
<TreeView
aria-label="rich object"
defaultCollapseIcon={<ChevronDownIcon />}
defaultExpanded={expandedNodes}
defaultExpandIcon={<ChevronRightIcon />}
onNodeSelect={(event, nodIds) => {
const currentNode = props.flattenNodes.find(aNode => {
return aNode.id === nodIds
})
if (currentNode != null && currentNode.routePath != null) {
router.push(currentNode.routePath)
}
}}
2023-12-31 21:16:04 +00:00
sx={{ flexGrow: 1, overflowY: 'auto' }}
>
{renderTree(props.tree)}
</TreeView>
</>
2023-12-24 02:06:57 +00:00
);
}
function ChevronRightIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<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" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
)
}