mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

demo: a better Form usage inside Modal (#47574)

Browse Source 
* demo: a better Form usage inside Modal

* chore: drop ref usage

* fix: useForm

* show values after submit

* chore: update snapshot

* chore: remove form preserve
This commit is contained in:
afc163 2024-03-02 01:11:00 +08:00 committed by GitHub
parent 08224052c8
commit 7abae5e973
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 80 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -7290,7 +7290,7 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
`;
exports[`renders components/form/demo/form-in-modal.tsx extend context correctly 1`] = `
<div>
Array [
<button
class="ant-btn ant-btn-primary"
type="button"
@ -7298,8 +7298,9 @@ exports[`renders components/form/demo/form-in-modal.tsx extend context correctly
<span>
New Collection
</span>
</button>
</div>
</button>,
<pre />,
]
`;
exports[`renders components/form/demo/form-in-modal.tsx extend context correctly 2`] = `[]`;

7
components/form/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -4217,7 +4217,7 @@ exports[`renders components/form/demo/form-context.tsx correctly 1`] = `
`;
exports[`renders components/form/demo/form-in-modal.tsx correctly 1`] = `
<div>
Array [
<button
class="ant-btn ant-btn-primary"
type="button"
@ -4225,8 +4225,9 @@ exports[`renders components/form/demo/form-in-modal.tsx correctly 1`] = `
<span>
New Collection
</span>
</button>
</div>
</button>,
<pre />,
]
`;
exports[`renders components/form/demo/form-item-path.tsx correctly 1`] = `

6
components/form/demo/form-in-modal.md
View File

@ -7,9 +7,3 @@
## en-US
When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.
```css
.collection-create-form_last-form-item {
margin-bottom: 0;
}
```

127
components/form/demo/form-in-modal.tsx
View File

@ -1,96 +1,113 @@
import React, { useState } from 'react';
import { Button, Form, Input, Modal, Radio } from 'antd';
import React, { useState, useEffect } from 'react';
import { Button, Form, Input, Modal, Radio, type FormInstance } from 'antd';
interface Values {
title: string;
description: string;
modifier: string;
title?: string;
description?: string;
modifier?: string;
}
interface CollectionCreateFormProps {
open: boolean;
onCreate: (values: Values) => void;
onCancel: () => void;
initialValues: Values;
onFormInstanceReady: (instance: FormInstance<Values>) => void;
}
const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
initialValues,
onFormInstanceReady,
}) => {
const [form] = Form.useForm();
useEffect(() => {
onFormInstanceReady(form);
}, []);
return (
<Form layout="vertical" form={form} name="form_in_modal" initialValues={initialValues}>
<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>
);
};
interface CollectionCreateFormModalProps {
open: boolean;
onCreate: (values: Values) => void;
onCancel: () => void;
initialValues: Values;
}
const CollectionCreateFormModal: React.FC<CollectionCreateFormModalProps> = ({
open,
onCreate,
onCancel,
initialValues,
}) => {
const [form] = Form.useForm();
const [formInstance, setFormInstance] = useState<FormInstance>();
return (
<Modal
open={open}
title="Create a new collection"
okText="Create"
cancelText="Cancel"
okButtonProps={{ autoFocus: true }}
onCancel={onCancel}
onOk={() => {
form
.validateFields()
.then((values) => {
form.resetFields();
onCreate(values);
})
.catch((info) => {
console.log('Validate Failed:', info);
});
destroyOnClose
onOk={async () => {
try {
const values = await formInstance?.validateFields();
formInstance?.resetFields();
onCreate(values);
} catch (error) {
console.log('Failed:', error);
}
}}
>
<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>
<CollectionCreateForm
initialValues={initialValues}
onFormInstanceReady={(instance) => {
setFormInstance(instance);
}}
/>
</Modal>
);
};
const App: React.FC = () => {
const [formValues, setFormValues] = useState<Values>();
const [open, setOpen] = useState(false);
const onCreate = (values: any) => {
const onCreate = (values: Values) => {
console.log('Received values of form: ', values);
setFormValues(values);
setOpen(false);
};
return (
<div>
<Button
type="primary"
onClick={() => {
setOpen(true);
}}
>
<>
<Button type="primary" onClick={() => setOpen(true)}>
New Collection
</Button>
<CollectionCreateForm
<pre>{JSON.stringify(formValues, null, 2)}</pre>
<CollectionCreateFormModal
open={open}
onCreate={onCreate}
onCancel={() => {
setOpen(false);
}}
onCancel={() => setOpen(false)}
initialValues={{ modifier: 'public' }}
/>
</div>
</>
);
};