frontend/containers/Languages/Icon.tsx (view raw)
1import {useState} from 'react';
2import Box from '@mui/material/Box';
3import IconButton from '@mui/material/IconButton';
4import Icon from '@mui/material/Icon';
5import Menu from '@mui/material/Menu';
6import MenuItem from '@mui/material/MenuItem';
7import {useTranslation} from 'react-i18next';
8import {Enum_Userspermissionsuser_Lang as SupportedLocales} from '../../generated/graphql';
9import withLanguagesSelection, {
10 LanguageSelectionComponentProps,
11} from './withLanguagesSelection';
12
13const IconLanguageSelection = ({
14 language,
15 onChangeLang,
16 displayMenu,
17}: LanguageSelectionComponentProps & {displayMenu?: boolean}) => {
18 const {t} = useTranslation();
19 const [anchorEl, setAnchorEl] = useState(null);
20
21 const handleClick = event => {
22 setAnchorEl(event.currentTarget);
23 };
24
25 const onConfirm = (lang: SupportedLocales) => {
26 setAnchorEl(null);
27 onChangeLang(lang);
28 };
29
30 return (
31 <>
32 <Box
33 position="absolute"
34 top={displayMenu ? 56 : 0}
35 right={0}
36 zIndex={1050}
37 p={1}
38 >
39 <IconButton
40 color="primary"
41 aria-label="Languages"
42 onClick={handleClick}
43 size="large"
44 >
45 <Icon>language</Icon>
46 </IconButton>
47 </Box>
48 <Menu
49 id="LanguagesMenu"
50 anchorEl={anchorEl}
51 keepMounted
52 open={Boolean(anchorEl)}
53 onClose={() => setAnchorEl(null)}
54 >
55 {Object.keys(SupportedLocales).map(locale => (
56 <MenuItem
57 key={locale}
58 disabled={language === SupportedLocales[locale]}
59 onClick={() => onConfirm(SupportedLocales[locale])}
60 >
61 {t(`PROTECTED.languages.${locale}`)}
62 </MenuItem>
63 ))}
64 </Menu>
65 </>
66 );
67};
68
69export default withLanguagesSelection(IconLanguageSelection);