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