frontend/containers/GenericToolbar/GenericMenu.js (view raw)
1import Divider from '@material-ui/core/Divider';
2import {makeStyles} from '@material-ui/core/styles';
3import Typography from '@material-ui/core/Typography';
4import Menu from '@material-ui/core/Menu';
5import MenuItem from '@material-ui/core/MenuItem';
6
7const GenericMenu = ({anchorEl, setAnchorEl, actions = []}) => {
8 const classes = useStyles();
9 if (actions.length === 0) return null;
10 return (
11 <Menu
12 anchorEl={anchorEl}
13 anchorOrigin={{
14 vertical: 'top',
15 horizontal: 'right',
16 }}
17 keepMounted
18 transformOrigin={{
19 vertical: 'top',
20 horizontal: 'right',
21 }}
22 open={!!anchorEl}
23 onClose={() => setAnchorEl(null)}
24 >
25 {actions &&
26 actions.map(
27 ({onClick, id, label, divider = false, ...menuItemProps}, idx) => {
28 if (divider)
29 return (
30 <Divider
31 key={idx}
32 variant="fullWidth"
33 className={classes.divider}
34 />
35 );
36 if (onClick)
37 return (
38 <MenuItem
39 onClick={() => {
40 if (!!onClick) onClick();
41 setAnchorEl(null);
42 }}
43 key={idx}
44 id={id || `MenuItem${idx}`}
45 {...menuItemProps}
46 >
47 {label}
48 </MenuItem>
49 );
50 else
51 return (
52 <Typography
53 variant="body1"
54 key={idx}
55 id={id || `MenuItem${idx}`}
56 className={classes.textItem}
57 >
58 {label}
59 </Typography>
60 );
61 }
62 )}
63 </Menu>
64 );
65};
66
67const useStyles = makeStyles(theme => ({
68 divider: {
69 margin: theme.spacing(1, 0),
70 },
71 textItem: {
72 margin: theme.spacing(1, 2),
73 '&:focus': {outline: 0},
74 },
75}));
76export default GenericMenu;