app/src/containers/EventMenu/index.js (view raw)
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;