mirror of https://github.com/usememos/memos
feat: memo editor dialog (#1772)
* feat: memo editor dialog * chore: update mark * chore: updatepull/1788/head
boojack
2 years ago
committed by
GitHub
parent
25ce36e495
commit
dd8c10743d
@ -1,41 +0,0 @@
|
|||||||
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 { generateDialog } from "../Dialog";
|
||||||
|
import Icon from "../Icon";
|
||||||
|
import MemoEditor from ".";
|
||||||
|
|
||||||
|
interface Props extends DialogProps {
|
||||||
|
memoId?: MemoId;
|
||||||
|
relationList?: MemoRelation[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const MemoEditorDialog: React.FC<Props> = ({ memoId, relationList, destroy }: Props) => {
|
||||||
|
const handleCloseBtnClick = () => {
|
||||||
|
destroy();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="dialog-header-container">
|
||||||
|
<p className="title-text flex items-center">MEMOS</p>
|
||||||
|
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||||
|
<Icon.X />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col justify-start items-start max-w-full w-[36rem]">
|
||||||
|
<MemoEditor memoId={memoId} relationList={relationList} onConfirm={handleCloseBtnClick} />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function showMemoEditorDialog(props: Pick<Props, "memoId" | "relationList"> = {}): void {
|
||||||
|
generateDialog(
|
||||||
|
{
|
||||||
|
className: "memo-editor-dialog",
|
||||||
|
dialogName: "memo-editor-dialog",
|
||||||
|
},
|
||||||
|
MemoEditorDialog,
|
||||||
|
props
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,138 +0,0 @@
|
|||||||
import { Button, Checkbox } from "@mui/joy";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { toast } from "react-hot-toast";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import useLoading from "@/hooks/useLoading";
|
|
||||||
import { useEditorStore, useResourceStore } from "@/store/module";
|
|
||||||
import { getResourceUrl } from "@/utils/resource";
|
|
||||||
import Icon from "./Icon";
|
|
||||||
import { generateDialog } from "./Dialog";
|
|
||||||
import showPreviewImageDialog from "./PreviewImageDialog";
|
|
||||||
import "@/less/resources-selector-dialog.less";
|
|
||||||
|
|
||||||
type Props = DialogProps;
|
|
||||||
|
|
||||||
interface State {
|
|
||||||
checkedArray: boolean[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
|
|
||||||
const { destroy } = props;
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const loadingState = useLoading();
|
|
||||||
const editorStore = useEditorStore();
|
|
||||||
const resourceStore = useResourceStore();
|
|
||||||
const resources = resourceStore.state.resources;
|
|
||||||
const [state, setState] = useState<State>({
|
|
||||||
checkedArray: [],
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
resourceStore
|
|
||||||
.fetchResourceList()
|
|
||||||
.catch((error) => {
|
|
||||||
console.error(error);
|
|
||||||
toast.error(error.response.data.message);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
loadingState.setFinish();
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const checkedResourceIdArray = editorStore.state.resourceList.map((resource) => resource.id);
|
|
||||||
setState({
|
|
||||||
checkedArray: resources.map((resource) => {
|
|
||||||
return checkedResourceIdArray.includes(resource.id);
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
}, [resources]);
|
|
||||||
|
|
||||||
const handlePreviewBtnClick = (resource: Resource) => {
|
|
||||||
const resourceUrl = getResourceUrl(resource);
|
|
||||||
if (resource.type.startsWith("image")) {
|
|
||||||
showPreviewImageDialog(
|
|
||||||
resources.filter((r) => r.type.startsWith("image")).map((r) => getResourceUrl(r)),
|
|
||||||
resources.findIndex((r) => r.id === resource.id)
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
window.open(resourceUrl);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCheckboxChange = (index: number) => {
|
|
||||||
const newCheckedArr = state.checkedArray;
|
|
||||||
newCheckedArr[index] = !newCheckedArr[index];
|
|
||||||
setState({
|
|
||||||
checkedArray: newCheckedArr,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleConfirmBtnClick = () => {
|
|
||||||
const resourceList = resources.filter((_, index) => {
|
|
||||||
return state.checkedArray[index];
|
|
||||||
});
|
|
||||||
editorStore.setResourceList(resourceList);
|
|
||||||
destroy();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="dialog-header-container">
|
|
||||||
<p className="title-text">{t("common.resources")}</p>
|
|
||||||
<button className="btn close-btn" onClick={destroy}>
|
|
||||||
<Icon.X className="icon-img" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="dialog-content-container">
|
|
||||||
{loadingState.isLoading ? (
|
|
||||||
<div className="loading-text-container">
|
|
||||||
<p className="tip-text">{t("resource.fetching-data")}</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="resource-table-container">
|
|
||||||
<div className="fields-container">
|
|
||||||
<span className="field-text name-text">{t("common.name")}</span>
|
|
||||||
<span className="field-text type-text">Type</span>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
{resources.length === 0 ? (
|
|
||||||
<p className="tip-text">{t("resource.no-resources")}</p>
|
|
||||||
) : (
|
|
||||||
resources.map((resource, index) => (
|
|
||||||
<div key={resource.id} className="resource-container">
|
|
||||||
<span className="field-text name-text cursor-pointer" onClick={() => handlePreviewBtnClick(resource)}>
|
|
||||||
{resource.filename}
|
|
||||||
</span>
|
|
||||||
<span className="field-text type-text">{resource.type}</span>
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Checkbox checked={state.checkedArray[index]} onChange={() => handleCheckboxChange(index)} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex justify-between w-full mt-2 px-2">
|
|
||||||
<span className="text-sm font-mono text-gray-400 leading-8">
|
|
||||||
{t("message.count-selected-resources")}: {state.checkedArray.filter((checked) => checked).length}
|
|
||||||
</span>
|
|
||||||
<div className="flex flex-row justify-start items-center">
|
|
||||||
<Button onClick={handleConfirmBtnClick}>{t("common.confirm")}</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function showResourcesSelectorDialog() {
|
|
||||||
generateDialog(
|
|
||||||
{
|
|
||||||
className: "resources-selector-dialog",
|
|
||||||
dialogName: "resources-selector-dialog",
|
|
||||||
},
|
|
||||||
ResourcesSelectorDialog,
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import store, { useAppSelector } from "..";
|
|
||||||
import { setEditMemoId, setMemoVisibility, setRelationList, setResourceList } from "../reducer/editor";
|
|
||||||
|
|
||||||
export const useEditorStore = () => {
|
|
||||||
const state = useAppSelector((state) => state.editor);
|
|
||||||
|
|
||||||
return {
|
|
||||||
state,
|
|
||||||
getState: () => {
|
|
||||||
return store.getState().editor;
|
|
||||||
},
|
|
||||||
setEditMemoWithId: (editMemoId: MemoId) => {
|
|
||||||
store.dispatch(setEditMemoId(editMemoId));
|
|
||||||
},
|
|
||||||
clearEditMemo: () => {
|
|
||||||
store.dispatch(setEditMemoId());
|
|
||||||
},
|
|
||||||
setMemoVisibility: (memoVisibility: Visibility) => {
|
|
||||||
store.dispatch(setMemoVisibility(memoVisibility));
|
|
||||||
},
|
|
||||||
setResourceList: (resourceList: Resource[]) => {
|
|
||||||
store.dispatch(setResourceList(resourceList));
|
|
||||||
},
|
|
||||||
setRelationList: (relationList: MemoRelation[]) => {
|
|
||||||
store.dispatch(setRelationList(relationList));
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
|
||||||
|
|
||||||
interface State {
|
|
||||||
memoVisibility: Visibility;
|
|
||||||
resourceList: Resource[];
|
|
||||||
relationList: MemoRelation[];
|
|
||||||
editMemoId?: MemoId;
|
|
||||||
}
|
|
||||||
|
|
||||||
const editorSlice = createSlice({
|
|
||||||
name: "editor",
|
|
||||||
initialState: {
|
|
||||||
memoVisibility: "PRIVATE",
|
|
||||||
resourceList: [],
|
|
||||||
relationList: [],
|
|
||||||
} as State,
|
|
||||||
reducers: {
|
|
||||||
setEditMemoId: (state, action: PayloadAction<Option<MemoId>>) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
editMemoId: action.payload,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
setMemoVisibility: (state, action: PayloadAction<Visibility>) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
memoVisibility: action.payload,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
setResourceList: (state, action: PayloadAction<Resource[]>) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
resourceList: action.payload,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
setRelationList: (state, action: PayloadAction<MemoRelation[]>) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
relationList: action.payload,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const { setEditMemoId, setMemoVisibility, setResourceList, setRelationList } = editorSlice.actions;
|
|
||||||
|
|
||||||
export default editorSlice.reducer;
|
|
||||||
Loading…
Reference in New Issue