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);