feat(form): ProFormFieldSet support funtion

infra-fe · Mar 20, 2024 · 650668d · 650668d
1 parent b5a3569
commit 650668d
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 38 deletions.
diff --git a/packages/form/src/components/FieldSet/demos/components-other-readonly.tsx b/packages/form/src/components/FieldSet/demos/components-other-readonly.tsx
@@ -103,6 +103,7 @@ const Demo = () => (
         name: '蚂蚁金服有限公司',
         radio: 'a',
         list: ['1', '2', '3'],
+        list2: ['1', '2', '5', '5'],
         select: 'china',
         'radio-button': 'a',
         dragger: [
@@ -339,6 +340,26 @@ const Demo = () => (
         -
         <ProFormText width="md" />
       </ProFormFieldSet>
+
+      <ProFormFieldSet
+        name="list2"
+        label="组件列表自动增加"
+        transform={(value: any) => ({ startTime: value[0], endTime: value[1] })}
+      >
+        {(value) => {
+          return value?.map((e, index) => {
+            return (
+              <ProFormText
+                key={index}
+                width="md"
+                fieldProps={{
+                  value: e,
+                }}
+              />
+            );
+          });
+        }}
+      </ProFormFieldSet>
       <ProFormUploadDragger max={4} label="Dragger" name="dragger" />
 
       <ProForm.Group title="日期相关分组">

diff --git a/packages/form/src/components/FieldSet/index.tsx b/packages/form/src/components/FieldSet/index.tsx
@@ -1,5 +1,5 @@
-import { useRefFunction } from '@ant-design/pro-utils';
-import type { FormItemProps, SpaceProps } from 'antd';
+import { runFunction, useRefFunction } from '@ant-design/pro-utils';
+import type { SpaceProps } from 'antd';
 import { Input, Space } from 'antd';
 import type { GroupProps } from 'antd/lib/input';
 import toArray from 'rc-util/lib/Children/toArray';
@@ -18,7 +18,9 @@ export type ProFormFieldSetProps<T = any> = {
   fieldProps?: any;
   convertValue?: ProFormItemProps['convertValue'];
   transform?: ProFormItemProps['transform'];
-  children?: React.ReactNode;
+  children?:
+    | ((value: T[], props: ProFormFieldSetProps) => React.ReactNode)
+    | React.ReactNode;
   lightProps?: LightWrapperProps;
 };
 
@@ -36,19 +38,20 @@ export function defaultGetValueFromEvent(valuePropName: string, ...args: any) {
   return event;
 }
 
-const FieldSet: React.FC<ProFormFieldSetProps> = ({
-  children,
-  value = [],
-  valuePropName,
-  onChange,
-  fieldProps,
-  space,
-  type = 'space',
-  transform,
-  convertValue,
-  lightProps,
-  ...rest
-}) => {
+const FieldSet: React.FC<ProFormFieldSetProps> = (props) => {
+  const {
+    children,
+    value = [],
+    valuePropName,
+    onChange,
+    fieldProps,
+    space,
+    type = 'space',
+    transform,
+    convertValue,
+    lightProps,
+    ...rest
+  } = props;
   /**
    * 使用方法的引用防止闭包
    *
@@ -67,7 +70,7 @@ const FieldSet: React.FC<ProFormFieldSetProps> = ({
   });
 
   let itemIndex = -1;
-  const list = toArray(children).map((item: any) => {
+  const list = toArray(runFunction(children, value, props)).map((item: any) => {
     if (React.isValidElement(item)) {
       itemIndex += 1;
       const index = itemIndex;
@@ -124,25 +127,25 @@ const FieldSet: React.FC<ProFormFieldSetProps> = ({
   return <RowWrapper Wrapper={Wrapper}>{list}</RowWrapper>;
 };
 
-const BaseProFormFieldSet: React.FC<FormItemProps & ProFormFieldSetProps> =
-  React.forwardRef(({ children, space, valuePropName, ...rest }, ref) => {
-    useImperativeHandle(ref, () => ({}));
-    return (
-      <FieldSet
-        space={space}
-        valuePropName={valuePropName}
-        {...rest.fieldProps}
-        // 把 fieldProps 里的重置掉
-        onChange={undefined}
-        {...rest}
-      >
-        {children}
-      </FieldSet>
-    );
-  });
+const BaseProFormFieldSet: React.FC<
+  Omit<ProFormItemProps, 'children'> & ProFormFieldSetProps
+> = React.forwardRef(({ children, space, valuePropName, ...rest }, ref) => {
+  useImperativeHandle(ref, () => ({}));
+  return (
+    <FieldSet
+      space={space}
+      valuePropName={valuePropName}
+      {...rest.fieldProps}
+      // 把 fieldProps 里的重置掉
+      onChange={undefined}
+      {...rest}
+    >
+      {children}
+    </FieldSet>
+  );
+});
 
-const ProFormFieldSet = createField<FormItemProps & ProFormFieldSetProps>(
-  BaseProFormFieldSet,
-) as typeof BaseProFormFieldSet;
+const ProFormFieldSet =
+  createField<Omit<ProFormItemProps, 'children'>>(BaseProFormFieldSet);
 
-export default ProFormFieldSet;
+export default ProFormFieldSet as typeof BaseProFormFieldSet;
diff --git a/packages/form/src/typing.ts b/packages/form/src/typing.ts
@@ -160,7 +160,7 @@ export type ProFormFieldItemProps<T = Record<string, any>, K = any> = {
    */
   footerRender?: LightFilterFooterRender;
 
-  children?: React.ReactNode;
+  children?: any;
 } & Omit<ProFormItemProps, 'valueType'> &
   Pick<ProFormGridConfig, 'colProps'> &
   ExtendsProps;

diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
@@ -5863,6 +5863,62 @@ exports[`form demos > 📸 renders ./packages/form/src/components/FieldSet/demos
             </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="validate_other_list2"
+                title="组件列表自动增加"
+              >
+                组件列表自动增加
+              </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"
+                >
+                  <div
+                    class="ant-space ant-space-horizontal ant-space-align-start ant-space-gap-row-small ant-space-gap-col-small"
+                    style="flex-wrap: wrap;"
+                  >
+                    <div
+                      class="ant-space-item"
+                    >
+                      1
+                    </div>
+                    <div
+                      class="ant-space-item"
+                    >
+                      2
+                    </div>
+                    <div
+                      class="ant-space-item"
+                    >
+                      5
+                    </div>
+                    <div
+                      class="ant-space-item"
+                    >
+                      5
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
         <div
           class="ant-form-item"
         >