68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import { App as AntApp, DatePicker, Form, Input, Modal } from "antd";
|
|
import dayjs from "dayjs";
|
|
import { useEffect } from "react";
|
|
|
|
import type { Material } from "../types";
|
|
|
|
interface AddMaterialModalProps {
|
|
onAdd: (material: Material) => void;
|
|
onOpenChange: (open: boolean) => void;
|
|
open: boolean;
|
|
}
|
|
|
|
interface FormValues {
|
|
associatedDate: dayjs.Dayjs;
|
|
description: string;
|
|
}
|
|
|
|
export function AddMaterialModal({ onAdd, onOpenChange, open }: AddMaterialModalProps) {
|
|
const { message } = AntApp.useApp();
|
|
const [form] = Form.useForm<FormValues>();
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
form.resetFields();
|
|
}, [form, open]);
|
|
|
|
const handleFinish = (values: FormValues) => {
|
|
const material: Material = {
|
|
associatedDate: values.associatedDate.format("YYYY-MM-DD"),
|
|
createdAt: new Date().toISOString(),
|
|
description: values.description,
|
|
id: crypto.randomUUID(),
|
|
};
|
|
onAdd(material);
|
|
message.success("素材已添加");
|
|
onOpenChange(false);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
destroyOnHidden
|
|
okText="确定"
|
|
onCancel={() => onOpenChange(false)}
|
|
onOk={() => void form.submit()}
|
|
open={open}
|
|
title="新增素材"
|
|
>
|
|
<Form
|
|
form={form}
|
|
initialValues={{ associatedDate: dayjs() }}
|
|
layout="vertical"
|
|
onFinish={(values) => void handleFinish(values)}
|
|
>
|
|
<Form.Item
|
|
label="描述"
|
|
name="description"
|
|
rules={[{ message: "请输入描述", required: true, whitespace: true }]}
|
|
>
|
|
<Input.TextArea maxLength={500} placeholder="请输入素材描述" />
|
|
</Form.Item>
|
|
<Form.Item label="关联时间" name="associatedDate" rules={[{ message: "请选择关联时间", required: true }]}>
|
|
<DatePicker className="app-inbox-datepicker" />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
}
|