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>
|
</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`] = `
|
exports[`renders ./components/form/demo/global-state.tsx extend context correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
<form
|
<form
|
||||||
|
|||||||
@ -3971,6 +3971,133 @@ exports[`renders ./components/form/demo/form-in-modal.tsx correctly 1`] = `
|
|||||||
</div>
|
</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`] = `
|
exports[`renders ./components/form/demo/global-state.tsx correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
<form
|
<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/layout-can-wrap.tsx">label can wrap</code>
|
||||||
<code src="./demo/warning-only.tsx">No block rule</code>
|
<code src="./demo/warning-only.tsx">No block rule</code>
|
||||||
<code src="./demo/useWatch.tsx">Watch Hooks</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-item.tsx">Dynamic Form Item</code>
|
||||||
<code src="./demo/dynamic-form-items.tsx">Dynamic Form nest Items</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>
|
<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/layout-can-wrap.tsx">表单标签可换行</code>
|
||||||
<code src="./demo/warning-only.tsx">非阻塞校验</code>
|
<code src="./demo/warning-only.tsx">非阻塞校验</code>
|
||||||
<code src="./demo/useWatch.tsx">字段监听 Hooks</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-item.tsx">动态增减表单项</code>
|
||||||
<code src="./demo/dynamic-form-items.tsx">动态增减嵌套字段</code>
|
<code src="./demo/dynamic-form-items.tsx">动态增减嵌套字段</code>
|
||||||
<code src="./demo/dynamic-form-items-no-style.tsx" debug>动态增减嵌套纯字段</code>
|
<code src="./demo/dynamic-form-items-no-style.tsx" debug>动态增减嵌套纯字段</code>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user