mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
chore: remove external resource dialog
This commit is contained in:
@ -145,7 +145,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
function showCreateMemoRelationDialog(props: Omit<Props, "destroy" | "hide">) {
|
function showCreateMemoRelationDialog(props: Omit<Props, "destroy">) {
|
||||||
generateDialog(
|
generateDialog(
|
||||||
{
|
{
|
||||||
className: "create-memo-relation-dialog",
|
className: "create-memo-relation-dialog",
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Autocomplete, Button, IconButton, Input, List, ListItem, Option, Select, Typography } from "@mui/joy";
|
import { Button, IconButton, List, ListItem, Typography } from "@mui/joy";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { useRef, useState } from "react";
|
||||||
import { toast } from "react-hot-toast";
|
import { toast } from "react-hot-toast";
|
||||||
import { useResourceStore } from "@/store/v1";
|
import { useResourceStore } from "@/store/v1";
|
||||||
@ -7,17 +7,12 @@ import { useTranslate } from "@/utils/i18n";
|
|||||||
import { generateDialog } from "./Dialog";
|
import { generateDialog } from "./Dialog";
|
||||||
import Icon from "./Icon";
|
import Icon from "./Icon";
|
||||||
|
|
||||||
const fileTypeAutocompleteOptions = ["image/*", "text/*", "audio/*", "video/*", "application/*"];
|
|
||||||
|
|
||||||
interface Props extends DialogProps {
|
interface Props extends DialogProps {
|
||||||
onCancel?: () => void;
|
onCancel?: () => void;
|
||||||
onConfirm?: (resourceList: Resource[]) => void;
|
onConfirm?: (resourceList: Resource[]) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
type SelectedMode = "local-file" | "external-link";
|
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
selectedMode: SelectedMode;
|
|
||||||
uploadingFlag: boolean;
|
uploadingFlag: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -26,16 +21,8 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
|
|||||||
const { destroy, onCancel, onConfirm } = props;
|
const { destroy, onCancel, onConfirm } = props;
|
||||||
const resourceStore = useResourceStore();
|
const resourceStore = useResourceStore();
|
||||||
const [state, setState] = useState<State>({
|
const [state, setState] = useState<State>({
|
||||||
selectedMode: "local-file",
|
|
||||||
uploadingFlag: false,
|
uploadingFlag: false,
|
||||||
});
|
});
|
||||||
const [resourceCreate, setResourceCreate] = useState<Resource>(
|
|
||||||
Resource.fromPartial({
|
|
||||||
filename: "",
|
|
||||||
externalLink: "",
|
|
||||||
type: "",
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const [fileList, setFileList] = useState<File[]>([]);
|
const [fileList, setFileList] = useState<File[]>([]);
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
@ -73,44 +60,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
|
|||||||
destroy();
|
destroy();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSelectedModeChanged = (mode: "local-file" | "external-link") => {
|
|
||||||
setState((state) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
selectedMode: mode,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleExternalLinkChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const externalLink = event.target.value;
|
|
||||||
setResourceCreate((state) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
externalLink,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFileNameChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const filename = event.target.value;
|
|
||||||
setResourceCreate((state) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
filename,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFileTypeChanged = (fileType: string) => {
|
|
||||||
setResourceCreate((state) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
type: fileType,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFileInputChange = async () => {
|
const handleFileInputChange = async () => {
|
||||||
if (!fileInputRef.current || !fileInputRef.current.files) {
|
if (!fileInputRef.current || !fileInputRef.current.files) {
|
||||||
return;
|
return;
|
||||||
@ -124,15 +73,9 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const allowConfirmAction = () => {
|
const allowConfirmAction = () => {
|
||||||
if (state.selectedMode === "local-file") {
|
|
||||||
if (!fileInputRef.current || !fileInputRef.current.files || fileInputRef.current.files.length === 0) {
|
if (!fileInputRef.current || !fileInputRef.current.files || fileInputRef.current.files.length === 0) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
} else if (state.selectedMode === "external-link") {
|
|
||||||
if (resourceCreate.filename === "" || resourceCreate.externalLink === "" || resourceCreate.type === "") {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -150,7 +93,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
|
|||||||
|
|
||||||
const createdResourceList: Resource[] = [];
|
const createdResourceList: Resource[] = [];
|
||||||
try {
|
try {
|
||||||
if (state.selectedMode === "local-file") {
|
|
||||||
if (!fileInputRef.current || !fileInputRef.current.files) {
|
if (!fileInputRef.current || !fileInputRef.current.files) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -172,10 +114,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
|
|||||||
});
|
});
|
||||||
createdResourceList.push(resource);
|
createdResourceList.push(resource);
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
const resource = await resourceStore.createResource({ resource: resourceCreate });
|
|
||||||
createdResourceList.push(resource);
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
toast.error(error.details);
|
toast.error(error.details);
|
||||||
@ -196,22 +134,7 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
|
|||||||
</IconButton>
|
</IconButton>
|
||||||
</div>
|
</div>
|
||||||
<div className="dialog-content-container !w-80">
|
<div className="dialog-content-container !w-80">
|
||||||
<Typography className="!mb-1" level="body-md">
|
<div className="w-full relative bg-blue-50 dark:bg-zinc-900 rounded-md border-dashed border-2 dark:border-zinc-700 flex flex-row justify-center items-center py-8 hover:opacity-90">
|
||||||
{t("resource.create-dialog.upload-method")}
|
|
||||||
</Typography>
|
|
||||||
<Select
|
|
||||||
className="w-full mb-2"
|
|
||||||
onChange={(_, value) => handleSelectedModeChanged(value as SelectedMode)}
|
|
||||||
value={state.selectedMode}
|
|
||||||
startDecorator={<Icon.File className="w-4 h-auto" />}
|
|
||||||
>
|
|
||||||
<Option value="local-file">{t("resource.create-dialog.local-file.option")}</Option>
|
|
||||||
<Option value="external-link">{t("resource.create-dialog.external-link.option")}</Option>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
{state.selectedMode === "local-file" && (
|
|
||||||
<>
|
|
||||||
<div className="w-full relative bg-blue-50 dark:bg-zinc-900 rounded-md flex flex-row justify-center items-center py-8">
|
|
||||||
<label htmlFor="files" className="p-2 px-4 text-sm text-white cursor-pointer bg-blue-500 block rounded hover:opacity-80">
|
<label htmlFor="files" className="p-2 px-4 text-sm text-white cursor-pointer bg-blue-500 block rounded hover:opacity-80">
|
||||||
{t("resource.create-dialog.local-file.choose")}
|
{t("resource.create-dialog.local-file.choose")}
|
||||||
</label>
|
</label>
|
||||||
@ -252,44 +175,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
|
|||||||
</ListItem>
|
</ListItem>
|
||||||
))}
|
))}
|
||||||
</List>
|
</List>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{state.selectedMode === "external-link" && (
|
|
||||||
<>
|
|
||||||
<Typography className="!mb-1" level="body-md">
|
|
||||||
{t("resource.create-dialog.external-link.link")}
|
|
||||||
</Typography>
|
|
||||||
<Input
|
|
||||||
className="mb-2"
|
|
||||||
placeholder={t("resource.create-dialog.external-link.link-placeholder")}
|
|
||||||
value={resourceCreate.externalLink}
|
|
||||||
onChange={handleExternalLinkChanged}
|
|
||||||
fullWidth
|
|
||||||
/>
|
|
||||||
<Typography className="!mb-1" level="body-md">
|
|
||||||
{t("resource.create-dialog.external-link.file-name")}
|
|
||||||
</Typography>
|
|
||||||
<Input
|
|
||||||
className="mb-2"
|
|
||||||
placeholder={t("resource.create-dialog.external-link.file-name-placeholder")}
|
|
||||||
value={resourceCreate.filename}
|
|
||||||
onChange={handleFileNameChanged}
|
|
||||||
fullWidth
|
|
||||||
/>
|
|
||||||
<Typography className="!mb-1" level="body-md">
|
|
||||||
{t("resource.create-dialog.external-link.type")}
|
|
||||||
</Typography>
|
|
||||||
<Autocomplete
|
|
||||||
className="w-full"
|
|
||||||
size="sm"
|
|
||||||
placeholder={t("resource.create-dialog.external-link.type-placeholder")}
|
|
||||||
freeSolo={true}
|
|
||||||
options={fileTypeAutocompleteOptions}
|
|
||||||
onChange={(_, value) => handleFileTypeChanged(value || "")}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="mt-2 w-full flex flex-row justify-end items-center space-x-1">
|
<div className="mt-2 w-full flex flex-row justify-end items-center space-x-1">
|
||||||
<Button variant="plain" color="neutral" onClick={handleCloseDialog}>
|
<Button variant="plain" color="neutral" onClick={handleCloseDialog}>
|
||||||
@ -304,7 +189,7 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
function showCreateResourceDialog(props: Omit<Props, "destroy" | "hide">) {
|
function showCreateResourceDialog(props: Omit<Props, "destroy">) {
|
||||||
generateDialog<Props>(
|
generateDialog<Props>(
|
||||||
{
|
{
|
||||||
dialogName: "create-resource-dialog",
|
dialogName: "create-resource-dialog",
|
||||||
|
@ -67,7 +67,7 @@ const BaseDialog: React.FC<Props> = (props: Props) => {
|
|||||||
export function generateDialog<T extends DialogProps>(
|
export function generateDialog<T extends DialogProps>(
|
||||||
config: DialogConfig,
|
config: DialogConfig,
|
||||||
DialogComponent: React.FC<T>,
|
DialogComponent: React.FC<T>,
|
||||||
props?: Omit<T, "destroy" | "hide">,
|
props?: Omit<T, "destroy">,
|
||||||
): DialogCallback {
|
): DialogCallback {
|
||||||
const tempDiv = document.createElement("div");
|
const tempDiv = document.createElement("div");
|
||||||
const dialog = createRoot(tempDiv);
|
const dialog = createRoot(tempDiv);
|
||||||
@ -82,20 +82,18 @@ export function generateDialog<T extends DialogProps>(
|
|||||||
tempDiv.remove();
|
tempDiv.remove();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
hide: () => {},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const dialogProps = {
|
const dialogProps = {
|
||||||
...props,
|
...props,
|
||||||
destroy: cbs.destroy,
|
destroy: cbs.destroy,
|
||||||
hide: cbs.hide,
|
|
||||||
} as T;
|
} as T;
|
||||||
|
|
||||||
const Fragment = (
|
const Fragment = (
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<CssVarsProvider theme={theme}>
|
<CssVarsProvider theme={theme}>
|
||||||
<CommonContextProvider>
|
<CommonContextProvider>
|
||||||
<BaseDialog destroy={cbs.destroy} hide={cbs.hide} clickSpaceDestroy={true} {...config}>
|
<BaseDialog destroy={cbs.destroy} clickSpaceDestroy={true} {...config}>
|
||||||
<DialogComponent {...dialogProps} />
|
<DialogComponent {...dialogProps} />
|
||||||
</BaseDialog>
|
</BaseDialog>
|
||||||
</CommonContextProvider>
|
</CommonContextProvider>
|
||||||
|
1
web/src/types/view.d.ts
vendored
1
web/src/types/view.d.ts
vendored
@ -1,6 +1,5 @@
|
|||||||
interface DialogCallback {
|
interface DialogCallback {
|
||||||
destroy: FunctionType;
|
destroy: FunctionType;
|
||||||
hide: FunctionType;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type DialogProps = DialogCallback;
|
type DialogProps = DialogCallback;
|
||||||
|
Reference in New Issue
Block a user