From b04b759597d96cc3cc1a765b286be31fe9c7c5da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 15 Dec 2022 16:01:52 +0800 Subject: [PATCH] docs: Add Form prefix demo (#39580) * docs: Add prefix demo * test: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 127 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 127 ++++++++++++++++++ components/form/demo/form-item-path.md | 7 + components/form/demo/form-item-path.tsx | 59 ++++++++ components/form/index.en-US.md | 1 + components/form/index.zh-CN.md | 1 + 6 files changed, 322 insertions(+) create mode 100644 components/form/demo/form-item-path.md create mode 100644 components/form/demo/form-item-path.tsx diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index b591a70672..692b203d60 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -6580,6 +6580,133 @@ exports[`renders ./components/form/demo/form-in-modal.tsx extend context correct `; +exports[`renders ./components/form/demo/form-item-path.tsx extend context correctly 1`] = ` +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+`; + exports[`renders ./components/form/demo/global-state.tsx extend context correctly 1`] = ` Array [
`; +exports[`renders ./components/form/demo/form-item-path.tsx correctly 1`] = ` + +
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+`; + exports[`renders ./components/form/demo/global-state.tsx correctly 1`] = ` Array [
([]); + +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 {children}; +}; + +const MyFormItem = ({ name, ...props }: FormItemProps) => { + const prefixPath = React.useContext(MyFormItemContext); + const concatName = name !== undefined ? [...prefixPath, ...toArr(name)] : undefined; + + return ; +}; + +const App: React.FC = () => { + const onFinish = (value: object) => { + console.log(value); + }; + + return ( + + + + + + + + + + + + + + + + + + + ); +}; + +export default App; diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index fb08775bb0..f4bdb3c9fb 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -25,6 +25,7 @@ High performance Form component with data scope management. Including data colle label can wrap No block rule Watch Hooks +Path Prefix Dynamic Form Item Dynamic Form nest Items Dynamic Form nest pure Items diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 0566875192..88392806eb 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -26,6 +26,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA 表单标签可换行 非阻塞校验 字段监听 Hooks +字段路径前缀 动态增减表单项 动态增减嵌套字段 动态增减嵌套纯字段