mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
98 lines
2.1 KiB
TypeScript
98 lines
2.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Button, Form, Input, Modal, Radio } from 'antd';
|
|
|
|
interface Values {
|
|
title: string;
|
|
description: string;
|
|
modifier: string;
|
|
}
|
|
|
|
interface CollectionCreateFormProps {
|
|
open: boolean;
|
|
onCreate: (values: Values) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
|
|
open,
|
|
onCreate,
|
|
onCancel,
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
title="Create a new collection"
|
|
okText="Create"
|
|
cancelText="Cancel"
|
|
onCancel={onCancel}
|
|
onOk={() => {
|
|
form
|
|
.validateFields()
|
|
.then((values) => {
|
|
form.resetFields();
|
|
onCreate(values);
|
|
})
|
|
.catch((info) => {
|
|
console.log('Validate Failed:', info);
|
|
});
|
|
}}
|
|
>
|
|
<Form
|
|
form={form}
|
|
layout="vertical"
|
|
name="form_in_modal"
|
|
initialValues={{ modifier: 'public' }}
|
|
>
|
|
<Form.Item
|
|
name="title"
|
|
label="Title"
|
|
rules={[{ required: true, message: 'Please input the title of collection!' }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="description" label="Description">
|
|
<Input type="textarea" />
|
|
</Form.Item>
|
|
<Form.Item name="modifier" className="collection-create-form_last-form-item">
|
|
<Radio.Group>
|
|
<Radio value="public">Public</Radio>
|
|
<Radio value="private">Private</Radio>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const onCreate = (values: any) => {
|
|
console.log('Received values of form: ', values);
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Button
|
|
type="primary"
|
|
onClick={() => {
|
|
setOpen(true);
|
|
}}
|
|
>
|
|
New Collection
|
|
</Button>
|
|
<CollectionCreateForm
|
|
open={open}
|
|
onCreate={onCreate}
|
|
onCancel={() => {
|
|
setOpen(false);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|