mirror of https://github.com/usememos/memos
refactor: memo editor components (#1625)
boojack
2 years ago
committed by
GitHub
parent
8911ea1619
commit
e3496ac1a2
@ -0,0 +1,45 @@
|
||||
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;
|
||||
@ -0,0 +1,41 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useEditorStore } from "@/store/module";
|
||||
import Icon from "@/components/Icon";
|
||||
import showCreateResourceDialog from "@/components/CreateResourceDialog";
|
||||
import showResourcesSelectorDialog from "@/components/ResourcesSelectorDialog";
|
||||
|
||||
const ResourceSelector = () => {
|
||||
const { t } = useTranslation();
|
||||
const editorStore = useEditorStore();
|
||||
|
||||
const handleUploadFileBtnClick = () => {
|
||||
showCreateResourceDialog({
|
||||
onConfirm: (resourceList) => {
|
||||
editorStore.setResourceList([...editorStore.state.resourceList, ...resourceList]);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="action-btn relative group">
|
||||
<Icon.FileText className="icon-img" />
|
||||
<div className="hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-1 rounded w-auto overflow-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600 group-hover:flex">
|
||||
<div
|
||||
className="w-full flex text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 truncate hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0"
|
||||
onClick={handleUploadFileBtnClick}
|
||||
>
|
||||
<Icon.Plus className="w-4 mr-1" />
|
||||
<span>{t("common.create")}</span>
|
||||
</div>
|
||||
<div
|
||||
className="w-full flex text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 truncate hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0"
|
||||
onClick={showResourcesSelectorDialog}
|
||||
>
|
||||
<Icon.Database className="w-4 mr-1" />
|
||||
<span>{t("editor.resources")}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default ResourceSelector;
|
||||
@ -0,0 +1,39 @@
|
||||
import { useTagStore } from "@/store/module";
|
||||
import Icon from "@/components/Icon";
|
||||
|
||||
interface Props {
|
||||
onTagSelectorClick: (tag: string) => void;
|
||||
}
|
||||
|
||||
const TagSelector = (props: Props) => {
|
||||
const { onTagSelectorClick } = props;
|
||||
const tagStore = useTagStore();
|
||||
const tags = tagStore.state.tags;
|
||||
|
||||
return (
|
||||
<div className="action-btn relative group">
|
||||
<Icon.Hash className="icon-img" />
|
||||
<div className="hidden flex-row justify-start items-start flex-wrap absolute top-6 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600 group-hover:flex">
|
||||
{tags.length > 0 ? (
|
||||
tags.map((tag) => {
|
||||
return (
|
||||
<span
|
||||
className="w-auto max-w-full truncate text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0"
|
||||
onClick={() => onTagSelectorClick(tag)}
|
||||
key={tag}
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="italic text-sm ml-2" onClick={(e) => e.stopPropagation()}>
|
||||
No tags found
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagSelector;
|
||||
@ -0,0 +1,35 @@
|
||||
import { useEditorStore } from "@/store/module";
|
||||
import { deleteMemoResource } from "@/helpers/api";
|
||||
import Icon from "../Icon";
|
||||
import ResourceIcon from "../ResourceIcon";
|
||||
|
||||
const ResourceListView = () => {
|
||||
const editorStore = useEditorStore();
|
||||
const editorState = editorStore.state;
|
||||
|
||||
const handleDeleteResource = async (resourceId: ResourceId) => {
|
||||
editorStore.setResourceList(editorState.resourceList.filter((resource) => resource.id !== resourceId));
|
||||
if (editorState.editMemoId) {
|
||||
await deleteMemoResource(editorState.editMemoId, resourceId);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{editorState.resourceList && editorState.resourceList.length > 0 && (
|
||||
<div className="resource-list-wrapper">
|
||||
{editorState.resourceList.map((resource) => {
|
||||
return (
|
||||
<div key={resource.id} className="resource-container">
|
||||
<ResourceIcon resourceType="resource.type" className="icon-img" />
|
||||
<span className="name-text">{resource.filename}</span>
|
||||
<Icon.X className="close-icon" onClick={() => handleDeleteResource(resource.id)} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ResourceListView;
|
||||
Loading…
Reference in New Issue