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}: LanguageSelectionComponentProps) => {
19 const {t} = useTranslation();
20 const [anchorEl, setAnchorEl] = useState(null);
21 const bannerHeight = useBannerStore(s => s.height);
22 const bannerOffset = useBannerStore(s => s.offset);
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 position="absolute" top={bannerOffset - bannerHeight} right={0} zIndex={1050} p={1}>
38 <IconButton
39 color="primary"
40 aria-label="Languages"
41 onClick={handleClick}
42 >
43 <Icon>language</Icon>
44 </IconButton>
45 </Box>
46 <Menu
47 id="LanguagesMenu"
48 anchorEl={anchorEl}
49 keepMounted
50 open={Boolean(anchorEl)}
51 onClose={() => setAnchorEl(null)}
52 >
53 <MenuItem
54 disabled={language === Enum_Userspermissionsuser_Lang.Fr}
55 onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.Fr)}
56 >{t`languages.fr`}</MenuItem>
57 <MenuItem
58 disabled={language === Enum_Userspermissionsuser_Lang.En}
59 onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.En)}
60 >{t`languages.en`}</MenuItem>
61 </Menu>
62 </>
63 );
64};
65
66export default withLanguagesSelection(IconLanguageSelection);