all repos — caroster @ ee31f8ea32ae67c14b88a82de8005742b4c92cb2

[Octree] Group carpool to your event https://caroster.io

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;