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