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 {
7 Enum_Userspermissionsuser_Lang,
8} from '../../generated/graphql';
9import withLanguagesSelection, {
10 LanguageSelectionComponentProps,
11} from './withLanguagesSelection';
12
13const Languages = ({
14 language,
15 setLanguage,
16 onConfirmCallback,
17}: LanguageSelectionComponentProps) => {
18 const {t} = useTranslation();
19 const [isSelecting, setSelecting] = useState(false);
20 const {languagesList} = useStyles({isSelecting});
21
22 const handleClick = event => {
23 setSelecting(!isSelecting);
24 };
25
26 const onConfirm = (lang: Enum_Userspermissionsuser_Lang) => {
27 setLanguage(lang);
28 setSelecting(false);
29
30 onConfirmCallback(lang);
31 };
32
33 return (
34 <>
35 <MenuItem onClick={handleClick}>{t('menu.language')}</MenuItem>
36 <MenuList className={languagesList} dense>
37 <MenuItem
38 disabled={language === Enum_Userspermissionsuser_Lang.Fr}
39 onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.Fr)}
40 >{t`languages.fr`}</MenuItem>
41 <MenuItem
42 disabled={language === Enum_Userspermissionsuser_Lang.En}
43 onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.En)}
44 >{t`languages.en`}</MenuItem>
45 </MenuList>
46 </>
47 );
48};
49
50const useStyles = makeStyles(theme => ({
51 languagesList: ({isSelecting}: {isSelecting: boolean}) => ({
52 visibility: isSelecting ? 'visible' : 'hidden',
53 maxHeight: isSelecting ? 'none' : 0,
54 padding: isSelecting ? `0 ${theme.spacing(0.5)}px` : 0,
55 overflow: 'hidden',
56 }),
57}));
58
59export default withLanguagesSelection(Languages);