frontend/containers/Languages/MenuItem.tsx (view raw)
1import {useState} from 'react';
2import MenuList from '@mui/material/MenuList';
3import MenuItem from '@mui/material/MenuItem';
4import Box from '@mui/material/Box';
5import {useTheme} from '@mui/material/styles';
6import {useTranslation} from 'react-i18next';
7import {Enum_Userspermissionsuser_Lang as SupportedLocales} from '../../generated/graphql';
8import withLanguagesSelection, {
9 LanguageSelectionComponentProps,
10} from './withLanguagesSelection';
11
12const Languages = ({
13 language,
14 onChangeLang,
15}: LanguageSelectionComponentProps) => {
16 const theme = useTheme();
17 const {t} = useTranslation();
18 const [isSelecting, setSelecting] = useState(false);
19
20 const handleClick = event => {
21 setSelecting(!isSelecting);
22 };
23
24 const onConfirm = (lang: SupportedLocales) => {
25 setSelecting(false);
26 onChangeLang(lang);
27 };
28
29 return (
30 <Box>
31 <MenuItem onClick={handleClick}>{t('menu.language')}</MenuItem>
32 <MenuList
33 sx={{
34 visibility: isSelecting ? 'visible' : 'hidden',
35 maxHeight: isSelecting ? 'none' : 0,
36 padding: isSelecting ? `0 ${theme.spacing(0.5)}` : 0,
37 overflow: 'hidden',
38 }}
39 dense
40 >
41 <MenuItem
42 disabled={language === SupportedLocales['fr']}
43 onClick={() => onConfirm(SupportedLocales['fr'])}
44 >{t`languages.fr`}</MenuItem>
45 <MenuItem
46 disabled={language === SupportedLocales['en']}
47 onClick={() => onConfirm(SupportedLocales['en'])}
48 >{t`languages.en`}</MenuItem>
49 </MenuList>
50 </Box>
51 );
52};
53
54export default withLanguagesSelection(Languages);