mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

docs: 🎬 refactor Form demo code

Browse Source
This commit is contained in:
afc163 2020-10-20 13:29:04 +08:00
parent 35fb8ee91d
commit f80828bfd6
4 changed files with 233 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1549,86 +1549,84 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
class="ant-form ant-form-horizontal"
id="dynamic_form_item"
>
<div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-row ant-form-item"
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input"
class="ant-form-item-control-input-content"
>
<div
class="ant-form-item-control-input-content"
<button
class="ant-btn ant-btn-dashed"
style="width:60%"
type="button"
>
<button
class="ant-btn ant-btn-dashed"
style="width:60%"
type="button"
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
<svg
aria-hidden="true"
class=""
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
class=""
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<defs />
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
<span>
Add field
</span>
</button>
<button
class="ant-btn ant-btn-dashed"
style="width:60%;margin-top:20px"
type="button"
<defs />
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
<span>
Add field
</span>
</button>
<button
class="ant-btn ant-btn-dashed"
style="width:60%;margin-top:20px"
type="button"
>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
<svg
aria-hidden="true"
class=""
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
class=""
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<defs />
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
<span>
Add field at head
</span>
</button>
</div>
<defs />
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
<span>
Add field at head
</span>
</button>
</div>
</div>
</div>
@ -1666,52 +1664,50 @@ exports[`renders ./components/form/demo/dynamic-form-items.md correctly 1`] = `
class="ant-form ant-form-horizontal"
id="dynamic_form_nest_item"
>
<div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-row ant-form-item"
class="ant-col ant-form-item-control"
>
<div
class="ant-col ant-form-item-control"
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input"
class="ant-form-item-control-input-content"
>
<div
class="ant-form-item-control-input-content"
<button
class="ant-btn ant-btn-dashed ant-btn-block"
type="button"
>
<button
class="ant-btn ant-btn-dashed ant-btn-block"
type="button"
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
<svg
aria-hidden="true"
class=""
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
class=""
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<defs />
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
<span>
Add field
</span>
</button>
</div>
<defs />
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
<span>
Add field
</span>
</button>
</div>
</div>
</div>
@ -1875,7 +1871,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly
</svg>
</span>
<span>
Add sights
Add sights
</span>
</button>
</div>

108
components/form/demo/dynamic-form-item.md
View File

@ -53,68 +53,61 @@ const DynamicFieldSet = () => {
},
]}
>
{(fields, { add, remove }, { errors }) => {
return (
<div>
{fields.map((field, index) => (
{(fields, { add, remove }, { errors }) => (
<>
{fields.map((field, index) => (
<Form.Item
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
label={index === 0 ? 'Passengers' : ''}
required={false}
key={field.key}
>
<Form.Item
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
label={index === 0 ? 'Passengers' : ''}
required={false}
key={field.key}
{...field}
validateTrigger={['onChange', 'onBlur']}
rules={[
{
required: true,
whitespace: true,
message: "Please input passenger's name or delete this field.",
},
]}
noStyle
>
<Form.Item
{...field}
validateTrigger={['onChange', 'onBlur']}
rules={[
{
required: true,
whitespace: true,
message: "Please input passenger's name or delete this field.",
},
]}
noStyle
>
<Input placeholder="passenger name" style={{ width: '60%' }} />
</Form.Item>
{fields.length > 1 ? (
<MinusCircleOutlined
className="dynamic-delete-button"
style={{ margin: '0 8px' }}
onClick={() => {
remove(field.name);
}}
/>
) : null}
<Input placeholder="passenger name" style={{ width: '60%' }} />
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: '60%' }}
>
<PlusOutlined /> Add field
</Button>
<Button
type="dashed"
onClick={() => {
add('The head item', 0);
}}
style={{ width: '60%', marginTop: '20px' }}
>
<PlusOutlined /> Add field at head
</Button>
<Form.ErrorList errors={errors} />
{fields.length > 1 ? (
<MinusCircleOutlined
className="dynamic-delete-button"
onClick={() => remove(field.name)}
/>
) : null}
</Form.Item>
</div>
);
}}
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{ width: '60%' }}
icon={<PlusOutlined />}
>
Add field
</Button>
<Button
type="dashed"
onClick={() => {
add('The head item', 0);
}}
style={{ width: '60%', marginTop: '20px' }}
icon={<PlusOutlined />}
>
Add field at head
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
@ -129,6 +122,7 @@ ReactDOM.render(<DynamicFieldSet />, mountNode);
```css
.dynamic-delete-button {
margin: 0 8px;
cursor: pointer;
position: relative;
top: 4px;

107
components/form/demo/dynamic-form-items-complex.md
View File

@ -17,6 +17,8 @@ This example demonstrates the case that a form contains multiple form controls.
import { Form, Input, Button, Space, Select } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
const { Option } = Select;
const areas = [
{ label: 'Beijing', value: 'Beijing' },
{ label: 'Shanghai', value: 'Shanghai' },
@ -44,65 +46,56 @@ const Demo = () => {
<Select options={areas} onChange={handleChange} />
</Form.Item>
<Form.List name="sights">
{(fields, { add, remove }) => {
return (
<>
{fields.map(field => (
<Space key={field.key} align="start">
<Form.Item
noStyle
shouldUpdate={(prevValues, curValues) =>
prevValues.area !== curValues.area || prevValues.sights !== curValues.sights
}
>
{() => (
<Form.Item
{...field}
label="Sight"
name={[field.name, 'sight']}
fieldKey={[field.fieldKey, 'sight']}
rules={[{ required: true, message: 'Missing sight' }]}
>
<Select disabled={!form.getFieldValue('area')} style={{ width: 130 }}>
{(sights[form.getFieldValue('area')] || []).map(item => (
<Select.Option key={item} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item>
)}
</Form.Item>
<Form.Item
{...field}
label="Price"
name={[field.name, 'price']}
fieldKey={[field.fieldKey, 'price']}
rules={[{ required: true, message: 'Missing price' }]}
>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(field.name)} />
</Space>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
block
{(fields, { add, remove }) => (
<>
{fields.map(field => (
<Space key={field.key} align="baseline">
<Form.Item
noStyle
shouldUpdate={(prevValues, curValues) =>
prevValues.area !== curValues.area || prevValues.sights !== curValues.sights
}
>
<PlusOutlined /> Add sights
</Button>
</Form.Item>
</>
);
}}
</Form.List>
{() => (
<Form.Item
{...field}
label="Sight"
name={[field.name, 'sight']}
fieldKey={[field.fieldKey, 'sight']}
rules={[{ required: true, message: 'Missing sight' }]}
>
<Select disabled={!form.getFieldValue('area')} style={{ width: 130 }}>
{(sights[form.getFieldValue('area')] || []).map(item => (
<Option key={item} value={item}>
{item}
</Option>
))}
</Select>
</Form.Item>
)}
</Form.Item>
<Form.Item
{...field}
label="Price"
name={[field.name, 'price']}
fieldKey={[field.fieldKey, 'price']}
rules={[{ required: true, message: 'Missing price' }]}
>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(field.name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add sights
</Button>
</Form.Item>
</>
)}
</Form.List>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit

73
components/form/demo/dynamic-form-items.md
View File

@ -25,52 +25,37 @@ const Demo = () => {
return (
<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
<Form.List name="users">
{(fields, { add, remove }) => {
return (
<div>
{fields.map(field => (
<Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="start">
<Form.Item
{...field}
name={[field.name, 'first']}
fieldKey={[field.fieldKey, 'first']}
rules={[{ required: true, message: 'Missing first name' }]}
>
<Input placeholder="First Name" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'last']}
fieldKey={[field.fieldKey, 'last']}
rules={[{ required: true, message: 'Missing last name' }]}
>
<Input placeholder="Last Name" />
</Form.Item>
<MinusCircleOutlined
onClick={() => {
remove(field.name);
}}
/>
</Space>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
block
{(fields, { add, remove }) => (
<>
{fields.map(field => (
<Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{...field}
name={[field.name, 'first']}
fieldKey={[field.fieldKey, 'first']}
rules={[{ required: true, message: 'Missing first name' }]}
>
<PlusOutlined /> Add field
</Button>
</Form.Item>
</div>
);
}}
<Input placeholder="First Name" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'last']}
fieldKey={[field.fieldKey, 'last']}
rules={[{ required: true, message: 'Missing last name' }]}
>
<Input placeholder="Last Name" />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(field.name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add field
</Button>
</Form.Item>
</>
)}
</Form.List>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit