81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
|
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
|
||
|
|
import Paper from "@material-ui/core/Paper";
|
||
|
|
import Popper from "@material-ui/core/Popper";
|
||
|
|
import { fade } from "@material-ui/core/styles/colorManipulator";
|
||
|
|
import makeStyles from "@material-ui/core/styles/makeStyles";
|
||
|
|
import React from "react";
|
||
|
|
|
||
|
|
import { IMenuItem } from "../AppLayout/menuStructure";
|
||
|
|
|
||
|
|
export interface MenuItemProps {
|
||
|
|
menuItem: IMenuItem;
|
||
|
|
onClick: (url: string, event: React.MouseEvent) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const useStyles = makeStyles(
|
||
|
|
theme => ({
|
||
|
|
paper: {
|
||
|
|
borderRadius: 16,
|
||
|
|
padding: theme.spacing(3)
|
||
|
|
},
|
||
|
|
popper: {
|
||
|
|
marginLeft: theme.spacing(3),
|
||
|
|
zIndex: 2
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
{
|
||
|
|
name: "MenuItem"
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
const MenuItem: React.FC<MenuItemProps> = ({ menuItem, onClick }) => {
|
||
|
|
const classes = useStyles({});
|
||
|
|
const [open, setOpen] = React.useState(false);
|
||
|
|
const anchor = React.useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
const handleClick = (event: React.MouseEvent, menuItem: IMenuItem) => {
|
||
|
|
if (menuItem.children) {
|
||
|
|
setOpen(true);
|
||
|
|
} else {
|
||
|
|
onClick(menuItem.url, event);
|
||
|
|
setOpen(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={anchor} onClick={event => handleClick(event, menuItem)}>
|
||
|
|
{menuItem.label}
|
||
|
|
{menuItem.children && (
|
||
|
|
<Popper
|
||
|
|
className={classes.popper}
|
||
|
|
open={open}
|
||
|
|
anchorEl={anchor.current}
|
||
|
|
transition
|
||
|
|
disablePortal
|
||
|
|
placement="right-start"
|
||
|
|
>
|
||
|
|
<ClickAwayListener
|
||
|
|
onClickAway={() => setOpen(false)}
|
||
|
|
mouseEvent="onClick"
|
||
|
|
>
|
||
|
|
<Paper elevation={6} className={classes.paper}>
|
||
|
|
{menuItem.children.map(subMenuItem => (
|
||
|
|
<div
|
||
|
|
key={subMenuItem.url}
|
||
|
|
onClick={event => handleClick(event, subMenuItem)}
|
||
|
|
data-test="select-option"
|
||
|
|
>
|
||
|
|
{subMenuItem.label}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</Paper>
|
||
|
|
</ClickAwayListener>
|
||
|
|
</Popper>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
MenuItem.displayName = "MenuItem";
|
||
|
|
export default MenuItem;
|