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 {Object.keys(SupportedLocales).map(locale => (
42 <MenuItem
43 key={locale}
44 disabled={language === SupportedLocales[locale]}
45 onClick={() => onConfirm(SupportedLocales[locale])}
46 >
47 {t(`PROTECTED.languages.${locale}`)}
48 </MenuItem>
49 ))}
50 </MenuList>
51 </Box>
52 );
53};
54
55export default withLanguagesSelection(Languages);