87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
import { type FormEvent } from "react";
|
|
import { Folder } from "lucide-react";
|
|
import {
|
|
AppFormDialog,
|
|
dialogPrimaryButtonClass,
|
|
dialogSecondaryButtonClass,
|
|
} from "~/components/common/AppFormDialog";
|
|
import { Button } from "~/components/ui/button";
|
|
import {
|
|
destinationChipClass,
|
|
formFieldClass,
|
|
formInputClass,
|
|
modalFormClass,
|
|
} from "./modalUi";
|
|
|
|
type CreateFolderModalProps = {
|
|
open: boolean;
|
|
parentPath: string;
|
|
name: string;
|
|
busy: boolean;
|
|
onNameChange: (name: string) => void;
|
|
onSubmit: (event: FormEvent) => void;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export function CreateFolderModal({
|
|
open,
|
|
parentPath,
|
|
name,
|
|
busy,
|
|
onNameChange,
|
|
onSubmit,
|
|
onClose,
|
|
}: CreateFolderModalProps) {
|
|
return (
|
|
<AppFormDialog
|
|
open={open}
|
|
onOpenChange={(nextOpen) => {
|
|
if (!nextOpen) onClose();
|
|
}}
|
|
eyebrow="WORKSPACE"
|
|
title="新建文件夹"
|
|
>
|
|
<form className={modalFormClass} onSubmit={onSubmit}>
|
|
<div className={destinationChipClass}>
|
|
<Folder size={16} />
|
|
创建到：{parentPath || "个人根目录"}
|
|
</div>
|
|
<label className={formFieldClass}>
|
|
<span>文件夹名称</span>
|
|
<input
|
|
className={formInputClass}
|
|
autoFocus
|
|
maxLength={255}
|
|
placeholder="例如：模型训练"
|
|
value={name}
|
|
onChange={(event) => onNameChange(event.target.value)}
|
|
/>
|
|
</label>
|
|
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
type="button"
|
|
onClick={onClose}
|
|
className={dialogSecondaryButtonClass}
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
type="submit"
|
|
disabled={busy || !name.trim()}
|
|
className={dialogPrimaryButtonClass}
|
|
>
|
|
{busy
|
|
? <span className="button-spinner" />
|
|
: <Folder size={16} />}
|
|
{busy ? "正在创建…" : "创建文件夹"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</AppFormDialog>
|
|
);
|
|
}
|