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