import { useState } from "react"; import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { TFunction } from "i18next"; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, } from "reactstrap"; import { useNoteStore } from "src/Stores"; const toSrc = (src: number, t: TFunction) => { switch (src) { case 0: return t("toSrc0"); case 1: return t("toSrc1"); case 2: return t("toSrc2"); case 3: return t("toSrc3"); default: return ""; } }; export default observer(() => { const [isSrcOpened, setSrcOpened] = useState(false); const { src, setSrc } = useNoteStore(); const { t } = useTranslation(); const onInput = (src: number) => () => { setSrc(src); }; return ( <Dropdown isOpen={isSrcOpened} toggle={() => { setSrcOpened(!isSrcOpened); }} > <DropdownToggle caret>{toSrc(src, t)}</DropdownToggle> <DropdownMenu> <DropdownItem onClick={onInput(0)}>{toSrc(0, t)}</DropdownItem> <DropdownItem onClick={onInput(1)}>{toSrc(1, t)}</DropdownItem> <DropdownItem onClick={onInput(2)}>{toSrc(2, t)}</DropdownItem> <DropdownItem onClick={onInput(3)}>{toSrc(3, t)}</DropdownItem> </DropdownMenu> </Dropdown> ); });