tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix treeview imports

Browse Source
This commit is contained in:
Triston Armstrong 2023-12-23 20:06:57 -06:00
parent 08b53b105e
commit ccab82f972
1 changed files with 43 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
components/FolderTree.js
View File

@ -1,55 +1,54 @@
import * as React from 'react'; import * as React from 'react';
import TreeView from '@mui/lab/TreeView'; import { TreeView, TreeItem } from '@mui/x-tree-view';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import TreeItem from '@mui/lab/TreeItem'; import { useRouter } from 'next/router'
import {useRouter} from 'next/router' import { styled } from '@mui/material/styles';
import {styled} from '@mui/material/styles';
const TCTreeItem = styled(TreeItem)(({theme}) => ({ const TCTreeItem = styled(TreeItem)(({ theme }) => ({
'& .MuiTreeItem-content': { '& .MuiTreeItem-content': {
'& .MuiTreeItem-label': { '& .MuiTreeItem-label': {
fontSize: '1rem', fontSize: '1rem',
paddingLeft: '6px', paddingLeft: '6px',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,',
lineHeight: 2.0, lineHeight: 2.0,
},
}, },
},
})) }))
export default function FolderTree(props) { export default function FolderTree(props) {
const renderTree = (nodes) => ( const renderTree = (nodes) => (
<TCTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}> <TCTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
{Array.isArray(nodes.children) {Array.isArray(nodes.children)
? nodes.children.map((node) => renderTree(node)) ? nodes.children.map((node) => renderTree(node))
: null} : null}
</TCTreeItem> </TCTreeItem>
); );
const router = useRouter() const router = useRouter()
// const childrenNodeIds = props.tree.children.map(aNode => {return aNode.id}) // const childrenNodeIds = props.tree.children.map(aNode => {return aNode.id})
const expandedNodes = [props.tree.id] const expandedNodes = [props.tree.id]
return ( return (
<TreeView <TreeView
aria-label="rich object" aria-label="rich object"
defaultCollapseIcon={<ExpandMoreIcon/>} defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpanded={expandedNodes} defaultExpanded={expandedNodes}
defaultExpandIcon={<ChevronRightIcon/>} defaultExpandIcon={<ChevronRightIcon />}
onNodeSelect={(event, nodIds) => { onNodeSelect={(event, nodIds) => {
const currentNode = props.flattenNodes.find(aNode => { const currentNode = props.flattenNodes.find(aNode => {
return aNode.id === nodIds return aNode.id === nodIds
}) })
// console.log(event) // console.log(event)
// console.log(currentNode) // console.log(currentNode)
if (currentNode != null && currentNode.routePath != null) { if (currentNode != null && currentNode.routePath != null) {
router.push(currentNode.routePath) router.push(currentNode.routePath)
// router.reload() // router.reload()
} }
}} }}
sx={{flexGrow: 1, maxWidth: 400, overflowY: 'auto'}} sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
> >
{renderTree(props.tree)} {renderTree(props.tree)}
</TreeView> </TreeView>
); );
} }