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