import React from 'react';
import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
import { fade, makeStyles, withStyles, Theme, createStyles } from '@material-ui/core/styles';
import TreeView from '@material-ui/lab/TreeView';
import TreeItem, { TreeItemProps } from '@material-ui/lab/TreeItem';
import Collapse from '@material-ui/core/Collapse';
import { useSpring, animated } from 'react-spring/web.cjs'; // web.cjs is required for IE 11 support
import { TransitionProps } from '@material-ui/core/transitions';
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(props: TransitionProps) {
const style = useSpring({
from: { opacity: 0, transform: 'translate3d(20px,0,0)' },
to: { opacity: props.in ? 1 : 0, transform: `translate3d(${props.in ? 0 : 20}px,0,0)` },
});
return (
);
}
const StyledTreeItem = withStyles((theme: Theme) =>
createStyles({
iconContainer: {
'& .close': {
opacity: 0.3,
},
},
group: {
marginLeft: 7,
paddingLeft: 18,
borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
},
}),
)((props: TreeItemProps) => );
const useStyles = makeStyles(
createStyles({
root: {
height: 264,
flexGrow: 1,
maxWidth: 400,
},
}),
);
export default function CustomizedTreeView() {
const classes = useStyles();
return (
}
defaultExpandIcon={}
defaultEndIcon={}
>
);
}