'use client';
// MATERIAL - UI
import { alpha, styled } from '@mui/material/styles';
import Collapse from '@mui/material/Collapse';
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
import { TransitionProps } from '@mui/material/transitions';
import { TreeItem, TreeItemProps, TreeView, treeItemClasses } from '@mui/x-tree-view';
// THIRD - PARTY
import { useSpring, animated } from 'react-spring';
// PROJECT IMPORTS
import MainCard from 'components/MainCard';
function MinusSquare(props: SvgIconProps) {
return (
{/* tslint:disable-next-line: max-line-length */}
);
}
function PlusSquare(props: SvgIconProps) {
return (
{/* tslint:disable-next-line: max-line-length */}
);
}
function CloseSquare(props: SvgIconProps) {
return (
{/* tslint:disable-next-line: max-line-length */}
);
}
function TransitionComponent({ ...others }: TransitionProps) {
const style = useSpring({
from: {
opacity: 0,
transform: 'translate3d(20px,0,0)'
},
to: {
opacity: others.in ? 1 : 0,
transform: `translate3d(${others.in ? 0 : 20}px,0,0)`
}
});
return (
);
}
const StyledTreeItem = styled((props: TreeItemProps) => )(({ theme }) => ({
[`& .${treeItemClasses.iconContainer}`]: {
'& .close': {
opacity: 0.3
}
},
[`& .${treeItemClasses.group}`]: {
marginLeft: 15,
paddingLeft: 18,
borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`
}
}));
StyledTreeItem.displayName = 'StyledTreeItem';
// ==============================|| TREE VIEW - CUSTOMIZED ||============================== //
export default function CustomizedTreeView() {
const customTreeviewCodeString = `// CustomizedTreeView.tsx
}
defaultExpandIcon={}
defaultEndIcon={}
sx={{ height: 320, flexGrow: 1, overflowY: 'auto' }}
>
`;
return (
}
defaultExpandIcon={}
defaultEndIcon={}
sx={{ height: 320, flexGrow: 1, overflowY: 'auto' }}
>
);
}