feat: 🎸 ProAddition now can use more than one

Author: charlzyx

bun.lockb

@@ -169,6 +169,57 @@ const schema: ISchema = {
           },
           title: "添加条目",
         },
+        add2: {
+          type: "void",
+          "x-component": "ProArrayTable.ProAddition",
+          "x-component-props": {
+            onOk: (
+              data: any,
+              ctx: ReturnType<typeof ProArrayTable.useProArrayTableContext>,
+            ) => {
+              // 如果添加数据后将超过当前页，则自动切换到下一页
+              const total = ctx?.array.field?.value.length || 0;
+              if (
+                total >=
+                ctx.pagination!.current! * ctx.pagination.pageSize!
+              ) {
+                ctx.pagination.setPagination((memo) => {
+                  return { ...memo, current: memo.current + 1 };
+                });
+              }
+
+              ctx.array.field.push(data);
+              console.log(data);
+            },
+            schema: {
+              type: "void",
+              properties: {
+                id: {
+                  title: "ID",
+                  type: "string",
+                  "x-decorator": "FormItem",
+                  "x-component": "Input",
+                },
+                domain: {
+                  title: "域名",
+                  "x-decorator": "FormItem",
+                  type: "string",
+                  "x-component": "Input",
+                },
+                desc: {
+                  title: "描述",
+                  "x-decorator": "FormItem",
+                  type: "string",
+                  "x-component": "Input.TextArea",
+                  "x-component-props": {
+                    rows: 4,
+                  },
+                },
+              },
+            },
+          },
+          title: "演示多个添加共存",
+        },
       },
     },
   },

docs/components/demos/ProArrayTableWithShadow.tsx

@@ -64,6 +64,15 @@ const schema: ISchema = {
     layout: "vertical",
   },
   properties: {
+    _modal: {
+      type: "void",
+      title: "Void内置的Modal",
+      "x-decorator": "ShadowForm",
+      "x-component": "ShadowModal",
+      "x-decorator-props": {
+        schema: shadowSchema,
+      },
+    },
     info: {
       type: "object",
       "x-read-pretty": true,

docs/components/demos/ShadowFormAll.tsx

@@ -62,5 +62,7 @@
     "rimraf": "^5.0.5",
     "rspress": "latest"
   },
-  "files": ["dist"]
-}
+  "files": [
+    "dist"
+  ]
+}

package.json

@@ -231,12 +231,12 @@ export const useExpandRender = (index: number) => {
 
 export const useAddition = () => {
   const schema = useFieldSchema();
-  return schema.reduceProperties((addition, schema, key) => {
+  return schema.reduceProperties((buf, schema, key) => {
     if (isAdditionComponent(schema)) {
-      return <RecursionField schema={schema} name={key} />;
+      buf.push(<RecursionField schema={schema} name={key} />);
     }
-    return addition;
-  }, null);
+    return buf;
+  }, [] as React.ReactElement[]);
 };
 
 export const useShadowComponents = () => {

src/pro-array-table/hooks.tsx

@@ -1,6 +1,6 @@
 import { FormProvider, useField, useFieldSchema } from "@formily/react";
 import { toJS } from "@formily/reactive";
-import React, { useContext, useEffect, useRef } from "react";
+import React, { useContext, useEffect, useId, useRef } from "react";
 import { empty, omit, pick } from "../__builtins__";
 import { Alert, BUTTON_TYPE, Button, Divider, Modal, Space } from "../adaptor";
 import { ArrayBase } from "../adaptor/adaptor";
@@ -271,13 +271,15 @@ export const ProAddition = ({
     React.ComponentProps<typeof Modal>,
     "onOk" | "onCancel" | "children"
   >) => {
+  const id = useId();
+  const actName = `_pro_additino_${id}`;
   return (
     <React.Fragment>
-      <ArrayTableShowModal act="_pro_addition" {...props}></ArrayTableShowModal>
+      <ArrayTableShowModal act={actName} {...props}></ArrayTableShowModal>
       <DelegateAction
         initLoader={() => empty}
         index={Infinity}
-        act={"_pro_addition"}
+        act={actName}
       ></DelegateAction>
     </React.Fragment>
   );