1import React from 'react';
 2import Menu from '@material-ui/core/Menu';
 3import Divider from '@material-ui/core/Divider';
 4import MenuItem from '@material-ui/core/MenuItem';
 5import {makeStyles} from '@material-ui/core/styles';
 6import {useTranslation} from 'react-i18next';
 7import {useStrapi, useAuth} from 'strapi-react-context';
 8import {Typography} from '@material-ui/core';
 9
10const EventMenu = ({anchorEl, setAnchorEl, actions = []}) => {
11  const {t} = useTranslation();
12  const strapi = useStrapi();
13  const {logout, authState} = useAuth();
14  const classes = useStyles();
15  const [settings] = strapi.stores?.settings || [{}];
16  const logoutMenuItem = authState?.user
17    ? {label: t('menu.logout'), onClick: logout, id: 'LogoutTabs'}
18    : null;
19  const aboutMenuItem = {
20    label: t('menu.about'),
21    onClick: () => (window.location.href = settings['about_link']),
22    id: 'AboutTabs',
23  };
24
25  return (
26    <Menu
27      anchorEl={anchorEl}
28      anchorOrigin={{
29        vertical: 'top',
30        horizontal: 'right',
31      }}
32      keepMounted
33      transformOrigin={{
34        vertical: 'top',
35        horizontal: 'right',
36      }}
37      open={!!anchorEl}
38      onClose={() => setAnchorEl(null)}
39    >
40      {actions &&
41        [...actions, aboutMenuItem, logoutMenuItem]
42          .filter(Boolean)
43          .map(({label, id, onClick, divider = false, ...attributes}, idx) => {
44            if (divider) {
45              return (
46                <Divider
47                  key={idx}
48                  variant="fullWidth"
49                  className={classes.divider}
50                />
51              );
52            }
53            if (!!onClick)
54              return (
55                <MenuItem
56                  onClick={() => {
57                    onClick();
58                    setAnchorEl(null);
59                  }}
60                  key={idx}
61                  id={id || `MenuItem${idx}`}
62                  {...attributes}
63                >
64                  {label}
65                </MenuItem>
66              );
67
68            return (
69              <Typography
70                variant="body1"
71                key={idx}
72                id={id || `MenuItem${idx}`}
73                className={classes.textItem}
74              >
75                {label}
76              </Typography>
77            );
78          })}
79    </Menu>
80  );
81};
82const useStyles = makeStyles(theme => ({
83  divider: {
84    margin: theme.spacing(1, 0),
85  },
86  textItem: {
87    margin: theme.spacing(1, 2),
88    '&:focus': {outline: 0},
89  },
90}));
91export default EventMenu;