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