chore: remove external resource dialog

This commit is contained in:
Steven
2024-04-29 22:57:47 +08:00
parent 155c5baf2c
commit 8a3845ff54
4 changed files with 66 additions and 184 deletions

View File

@ -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",

View File

@ -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",

View File

@ -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>

View File

@ -1,6 +1,5 @@
interface DialogCallback { interface DialogCallback {
destroy: FunctionType; destroy: FunctionType;
hide: FunctionType;
} }
type DialogProps = DialogCallback; type DialogProps = DialogCallback;