mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
docs: Add Form prefix demo (#39580)
* docs: Add prefix demo * test: update snapshot
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
b93d040fce
commit
b04b759597
@ -6580,6 +6580,133 @@ exports[`renders ./components/form/demo/form-in-modal.tsx extend context correct
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/form/demo/form-item-path.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-vertical"
|
||||
id="form_item_path"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
for="form_item_path_user_name_firstName"
|
||||
title="First Name"
|
||||
>
|
||||
First Name
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
id="form_item_path_user_name_firstName"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
for="form_item_path_user_name_lastName"
|
||||
title="Last Name"
|
||||
>
|
||||
Last Name
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
id="form_item_path_user_name_lastName"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
for="form_item_path_user_age"
|
||||
title="Age"
|
||||
>
|
||||
Age
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
id="form_item_path_user_age"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/form/demo/global-state.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<form
|
||||
|
||||
@ -3971,6 +3971,133 @@ exports[`renders ./components/form/demo/form-in-modal.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/form/demo/form-item-path.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-vertical"
|
||||
id="form_item_path"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
for="form_item_path_user_name_firstName"
|
||||
title="First Name"
|
||||
>
|
||||
First Name
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
id="form_item_path_user_name_firstName"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
for="form_item_path_user_name_lastName"
|
||||
title="Last Name"
|
||||
>
|
||||
Last Name
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
id="form_item_path_user_name_lastName"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
for="form_item_path_user_age"
|
||||
title="Age"
|
||||
>
|
||||
Age
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
id="form_item_path_user_age"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/form/demo/global-state.tsx correctly 1`] = `
|
||||
Array [
|
||||
<form
|
||||
|
||||
7
components/form/demo/form-item-path.md
Normal file
7
components/form/demo/form-item-path.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
在某些场景，你希望统一设置一些字段的前缀。你可以通过 HOC 实现该效果。
|
||||
|
||||
## en-US
|
||||
|
||||
In some scenarios, you may want to set a prefix for some fields consistently. You can achieve this effect with HOC.
|
||||
59
components/form/demo/form-item-path.tsx
Normal file
59
components/form/demo/form-item-path.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import { Form, Input, Button } from 'antd';
|
||||
import type { FormItemProps } from 'antd';
|
||||
|
||||
const MyFormItemContext = React.createContext<(string | number)[]>([]);
|
||||
|
||||
interface MyFormItemGroupProps {
|
||||
prefix: string | number | (string | number)[];
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
function toArr(str: string | number | (string | number)[]): (string | number)[] {
|
||||
return Array.isArray(str) ? str : [str];
|
||||
}
|
||||
|
||||
const MyFormItemGroup = ({ prefix, children }: MyFormItemGroupProps) => {
|
||||
const prefixPath = React.useContext(MyFormItemContext);
|
||||
const concatPath = React.useMemo(() => [...prefixPath, ...toArr(prefix)], [prefixPath, prefix]);
|
||||
|
||||
return <MyFormItemContext.Provider value={concatPath}>{children}</MyFormItemContext.Provider>;
|
||||
};
|
||||
|
||||
const MyFormItem = ({ name, ...props }: FormItemProps) => {
|
||||
const prefixPath = React.useContext(MyFormItemContext);
|
||||
const concatName = name !== undefined ? [...prefixPath, ...toArr(name)] : undefined;
|
||||
|
||||
return <Form.Item name={concatName} {...props} />;
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const onFinish = (value: object) => {
|
||||
console.log(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form name="form_item_path" layout="vertical" onFinish={onFinish}>
|
||||
<MyFormItemGroup prefix={['user']}>
|
||||
<MyFormItemGroup prefix={['name']}>
|
||||
<MyFormItem name="firstName" label="First Name">
|
||||
<Input />
|
||||
</MyFormItem>
|
||||
<MyFormItem name="lastName" label="Last Name">
|
||||
<Input />
|
||||
</MyFormItem>
|
||||
</MyFormItemGroup>
|
||||
|
||||
<MyFormItem name="age" label="Age">
|
||||
<Input />
|
||||
</MyFormItem>
|
||||
</MyFormItemGroup>
|
||||
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -25,6 +25,7 @@ High performance Form component with data scope management. Including data colle
|
||||
<code src="./demo/layout-can-wrap.tsx">label can wrap</code>
|
||||
<code src="./demo/warning-only.tsx">No block rule</code>
|
||||
<code src="./demo/useWatch.tsx">Watch Hooks</code>
|
||||
<code src="./demo/form-item-path.tsx">Path Prefix</code>
|
||||
<code src="./demo/dynamic-form-item.tsx">Dynamic Form Item</code>
|
||||
<code src="./demo/dynamic-form-items.tsx">Dynamic Form nest Items</code>
|
||||
<code src="./demo/dynamic-form-items-no-style.tsx" debug>Dynamic Form nest pure Items</code>
|
||||
|
||||
@ -26,6 +26,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA
|
||||
<code src="./demo/layout-can-wrap.tsx">表单标签可换行</code>
|
||||
<code src="./demo/warning-only.tsx">非阻塞校验</code>
|
||||
<code src="./demo/useWatch.tsx">字段监听 Hooks</code>
|
||||
<code src="./demo/form-item-path.tsx">字段路径前缀</code>
|
||||
<code src="./demo/dynamic-form-item.tsx">动态增减表单项</code>
|
||||
<code src="./demo/dynamic-form-items.tsx">动态增减嵌套字段</code>
|
||||
<code src="./demo/dynamic-form-items-no-style.tsx" debug>动态增减嵌套纯字段</code>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user