97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
import { type FormEvent } from "react";
|
|
import Icon from "../../components/common/Icon";
|
|
import {
|
|
destinationChipClass,
|
|
formFieldClass,
|
|
formInputClass,
|
|
iconButtonClass,
|
|
modalBackdropClass,
|
|
modalCompactClass,
|
|
modalEyebrowClass,
|
|
modalFooterClass,
|
|
modalFormClass,
|
|
modalHeaderClass,
|
|
modalTitleClass,
|
|
primaryButtonClass,
|
|
secondaryButtonClass,
|
|
} 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) {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div className={modalBackdropClass} role="presentation">
|
|
<section className={modalCompactClass} role="dialog" aria-modal="true">
|
|
<div className={modalHeaderClass}>
|
|
<div>
|
|
<span className={modalEyebrowClass}>WORKSPACE</span>
|
|
<h2 className={modalTitleClass}>新建文件夹</h2>
|
|
</div>
|
|
<button
|
|
className={iconButtonClass}
|
|
type="button"
|
|
aria-label="关闭"
|
|
onClick={onClose}
|
|
>
|
|
<Icon name="close" />
|
|
</button>
|
|
</div>
|
|
<form className={modalFormClass} onSubmit={onSubmit}>
|
|
<div className={destinationChipClass}>
|
|
<Icon name="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={modalFooterClass}>
|
|
<button
|
|
className={secondaryButtonClass}
|
|
type="button"
|
|
onClick={onClose}
|
|
>
|
|
取消
|
|
</button>
|
|
<button
|
|
className={primaryButtonClass}
|
|
type="submit"
|
|
disabled={busy || !name.trim()}
|
|
>
|
|
{busy
|
|
? <span className="button-spinner" />
|
|
: <Icon name="folder" size={16} />}
|
|
{busy ? "正在创建…" : "创建文件夹"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|