import { useState } from "react"; import { observer } from "mobx-react-lite"; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, } from "reactstrap"; import { TFunction } from "i18next"; import { useTranslation } from "react-i18next"; import { useNoteStore } from "src/Stores"; const toFit = (fit: number, t: TFunction) => { switch (fit) { case 0: return t("toFit0"); case 1: return t("toFit1"); case 2: return t("toFit2"); case 3: return t("toFit3"); case 4: return t("toFit4"); case 5: return t("toFit5"); case 6: return t("toFit6"); default: return ""; } }; export default observer(() => { const { fit, setFit } = useNoteStore(); const [isFitOpened, setFitOpened] = useState(false); const { t } = useTranslation(); const onInput = (fit: number) => () => { setFit(fit); }; return ( <Dropdown isOpen={isFitOpened} toggle={() => { setFitOpened(!isFitOpened); }} > <DropdownToggle caret>{toFit(fit, t)}</DropdownToggle> <DropdownMenu> <DropdownItem onClick={onInput(0)}>{toFit(0, t)}</DropdownItem> <DropdownItem onClick={onInput(1)}>{toFit(1, t)}</DropdownItem> <DropdownItem onClick={onInput(2)}>{toFit(2, t)}</DropdownItem> <DropdownItem onClick={onInput(3)}>{toFit(3, t)}</DropdownItem> <DropdownItem onClick={onInput(4)}>{toFit(4, t)}</DropdownItem> <DropdownItem onClick={onInput(5)}>{toFit(5, t)}</DropdownItem> <DropdownItem onClick={onInput(6)}>{toFit(6, t)}</DropdownItem> </DropdownMenu> </Dropdown> ); });