memos/web/src/components/MemoEditor/ActionButton/MemoVisibilitySelector.tsx

46 lines
1.4 KiB
TypeScript

import { toLower } from "lodash-es";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
import { useEditorStore, useGlobalStore } from "@/store/module";
import Selector from "@/components/kit/Selector";
const MemoVisibilitySelector = () => {
const { t } = useTranslation();
const editorStore = useEditorStore();
const {
state: { systemStatus },
} = useGlobalStore();
const editorState = editorStore.state;
const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
return {
value: item.value,
text: t(`memo.visibility.${toLower(item.value)}`),
};
});
useEffect(() => {
if (systemStatus.disablePublicMemos) {
editorStore.setMemoVisibility("PRIVATE");
}
}, [systemStatus.disablePublicMemos]);
const handleMemoVisibilityOptionChanged = async (value: string) => {
const visibilityValue = value as Visibility;
editorStore.setMemoVisibility(visibilityValue);
};
return (
<Selector
className="visibility-selector"
disabled={systemStatus.disablePublicMemos}
tooltipTitle={t("memo.visibility.disabled")}
value={editorState.memoVisibility}
dataSource={memoVisibilityOptionSelectorItems}
handleValueChanged={handleMemoVisibilityOptionChanged}
/>
);
};
export default MemoVisibilitySelector;