import { useState } from "react"; import { Link } from "react-router-dom"; import clsx from "clsx"; import { makeStyles, createStyles, List, ListItem, // ListItemIcon, ListItemText, Collapse, } from "@material-ui/core"; import { fade } from "@material-ui/core/styles"; import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; import { Table } from "contexts/FiretableContext"; import { routes } from "constants/routes"; const useStyles = makeStyles((theme) => createStyles({ listItem: { color: theme.palette.text.secondary, minHeight: 48, }, listItemSelected: { "&&, &&:hover": { color: theme.palette.primary.main, backgroundColor: fade( theme.palette.primary.main, theme.palette.action.selectedOpacity ), }, }, listItemIcon: {}, listItemText: { ...theme.typography.button, display: "block", color: "inherit", }, dropdownIcon: { transition: theme.transitions.create("transform") }, dropdownIconOpen: { transform: "rotate(180deg)" }, childListItem: { minHeight: 40, paddingLeft: theme.spacing(4), }, childListItemText: { ...theme.typography.overline, display: "block", color: "inherit", }, }) ); export interface INavDrawerItemProps { section: string; tables: Table[]; currentSection?: string; currentTable: string; } export default function NavDrawerItem({ section, tables, currentSection, currentTable, }: INavDrawerItemProps) { const classes = useStyles(); const [open, setOpen] = useState(section === currentSection); return ( <li> <ListItem button classes={{ root: clsx( classes.listItem, !open && currentSection === section && classes.listItemSelected ), }} selected={!open && currentSection === section} onClick={() => setOpen((o) => !o)} > <ListItemText primary={section} classes={{ primary: classes.listItemText }} /> <ArrowDropDownIcon className={clsx( classes.dropdownIcon, open && classes.dropdownIconOpen )} /> </ListItem> <Collapse in={open}> <List> {tables.map((table) => ( <li key={table.collection}> <ListItem button selected={table.collection === currentTable} classes={{ root: clsx(classes.listItem, classes.childListItem), selected: classes.listItemSelected, }} component={Link} to={ table.isCollectionGroup ? `${routes.tableGroup}/${table.collection}` : `${routes.table}/${table.collection.replace( /\//g, "~2F" )}` } > <ListItemText primary={table.name} classes={{ primary: classes.childListItemText }} /> </ListItem> </li> ))} </List> </Collapse> </li> ); }