feat(form): formList support function children (#3635)

ant-design · Sep 10, 2021 · 93fb20d · 93fb20d
1 parent d89667e
commit 93fb20d
Show file tree

Hide file tree

Showing 5 changed files with 649 additions and 128 deletions.
diff --git a/packages/form/src/components/Dependency/index.tsx b/packages/form/src/components/Dependency/index.tsx
@@ -75,7 +75,6 @@ const ProFormDependency: React.FC<ProFormDependencyProps> = ({
           }, {});
           return children?.({ ...values }, form as FormInstance<any>);
         }
-
         // 在 FormList 中时
         // ignoreFormListField === true 时取全局依赖值
         if (ignoreFormListField) {

diff --git a/packages/form/src/components/Group/demos/base-use.tsx b/packages/form/src/components/Group/demos/base-use.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import ProForm, { ProFormList, ProFormText, ProFormDependency } from '@ant-design/pro-form';
+
+const Demo = () => {
+  return (
+    <ProForm>
+      <ProFormList
+        name={['default', 'users']}
+        label="用户信息"
+        initialValue={[
+          {
+            name: '1111',
+          },
+        ]}
+        itemContainerRender={(doms) => {
+          return <ProForm.Group>{doms}</ProForm.Group>;
+        }}
+      >
+        {(filed, index) => {
+          return <ProFormText initialValue={index} name="rowKey" label={`第 ${index} 配置`} />;
+        }}
+        <ProFormText name="name" label="姓名" />
+        <ProFormDependency name={['name']}>
+          {({ name }) => {
+            if (!name) {
+              return null;
+            }
+            return <ProFormText name="remark" label="昵称详情" />;
+          }}
+        </ProFormDependency>
+      </ProFormList>
+    </ProForm>
+  );
+};
+
+export default Demo;
diff --git a/packages/form/src/components/Group/index.md b/packages/form/src/components/Group/index.md
@@ -111,17 +111,21 @@ name 参数必须要是一个数组，如果是嵌套的结构可以这样配置
 
 ## 代码示例
 
+### 基本使用
+
+<code src="./demos/base-use" heigh="174px" title="ProForm.List" />
+
 ### 自定义 List
 
-<code src="./demos/customize.tsx" heigh="1774px" title="ProForm.List" />
+<code src="./demos/customize.tsx" heigh="174px" title="ProForm.List" />
 
 ### 基本使用
 
-<code src="./demos/list.tsx" heigh="1774px" title="ProForm.List" />
+<code src="./demos/list.tsx" heigh="174px" title="ProForm.List" />
 
 ### 互相依赖表单
 
-<code src="./demos/dependency.tsx" heigh="1774px" title="ProForm.List" />
+<code src="./demos/dependency.tsx" heigh="174px" title="ProForm.List" />
 
 ### 获取表单依赖值