feat: 修复数据引用带了的副作用

alibaba · Feb 28, 2024 · 13b3715 · 13b3715
1 parent 7a172b3
commit 13b3715
Show file tree

Hide file tree

Showing 4 changed files with 513 additions and 33 deletions.
diff --git a/docs/form-render/api-props.md b/docs/form-render/api-props.md
@@ -46,7 +46,7 @@ group:
 | setValues         | 外部手动修改 formData，用于已填写的表单的数据回填                                                                     | `(formData: any) => void`                                                                                           |
 | setValueByPath    | 外部修改指定单个 field 的数据(原名 onItemChange)                                                                      | `(path: Path, value: any) => void`                                                                                  |
 | setSchemaByPath   | 指定路径修改 schema                                                                                                   | `(path: Path, schema: any) => void`                                                                                  |
-| setSchema         | 指定多个路径修改 schema                                                                                               | `({ path: value }) => void`                                                                                         |
+| setSchema         | 指定多个路径修改 schema，cover 传true将直接替换 schema                                                                                               | `({ path: value }, cover?: boolean) => void`                                                                                         |
 | getValues         | 获取表单内部维护的数据, 如果参数为空则返回当前所有数据                                                                | `(nameList?: Path[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any`             |
 | getHiddenValues   | 获取隐藏的表单数据                                                                                                    | `() => any`                                                                                                         |
 | getSchema            | 获取表单的 schema                                                                                                         | `()=> object`                                                                                                            |

diff --git a/docs/form-render/index.md b/docs/form-render/index.md
@@ -42,28 +42,146 @@ npm i form-render --save
  */
 import React from 'react';
 import FormRender, { useForm } from 'form-render';
-import schema from './schema/simple';
+// import schema from './schema/simple';
+
+
+const schema = {
+  type: 'object',
+  properties: {
+    countryCode: {
+      type: 'number',
+      placeholder: '区域-目的地',
+      widget: 'select',
+      width: '50%',
+      required: true,
+      props: {}
+    },
+    cityCode: {
+      type: 'number',
+      placeholder: '区域-城市',
+      widget: 'select',
+      width: '50%',
+      props: {}
+    },
+    subConfigValue: {
+      title: '热门日期',
+      type: 'array',
+      widget: 'simpleList',
+      props: {
+        hideCopy: true,
+        delConfirmProps: {
+          overlayClassName: 'del-confirm-hot-date'
+        }
+      },
+      items: {
+        type: 'object',
+        properties: {
+          date: {
+            type: 'range',
+            widget: 'dateRange',
+            required: true,
+            props: {}
+          }
+        }
+      }
+    }
+  },
+  displayType: "row",
+  labelWidth: 100,
+};
 
 export default () => {
   const form = useForm();
 
-  const onFinish = (formData) => {
-    console.log('formData:', formData);
+  const onMount = () => {
+    debugger;
+    form.setSchemaByPath('countryCode', {
+      props: {
+        options: [{ value: 1, label: 1}],
+      },
+    });
+  };
+
+  const watch = {
+    countryCode: (value: string) => {
+      // form.setValues({ cityCode: undefined });
+      // form.setSchemaByPath('cityCode', {
+      //   props: {
+      //     options: cityMap[value].map((item: any) => ({
+      //       label: item.provinceName,
+      //       value: item.provinceCode,
+      //     })),
+      //   },
+      // });
+    },
   };
 
   return (
-    <FormRender 
-      form={form} 
-      schema={schema} 
-      onFinish={onFinish} 
-      maxWidth={360} 
-      footer={true}
-    />
-  );
+            <FormRender form={form} schema={schema} onMount={onMount} watch={watch}  />
+
+
+  )
 }
+// export default () => {
+//   const form = useForm();
+
+//   const onFinish = (formData) => {
+//     console.log('formData:', formData);
+//   };
+
+//   return (
+//     <FormRender 
+//       form={form} 
+//       schema={schema} 
+//       onFinish={onFinish} 
+//       maxWidth={360} 
+//       footer={true}
+//       watch={{
+//         "#": (allValues, changedValues) => {
+//           // '#': () => {} 等同于 onValuesChange
+//           // console.log('表单 allValues：', allValues);
+//           setTimeout(() => {
+//             form.setSchema(
+//               {
+//                 type: "object",
+//                 displayType: "row",
+//                 column: 2,
+//                 properties: {
+//                   input12: {
+//                     title: "输入框xxxx",
+//                     displayType: "row",
+//                     type: "string",
+//                     widget: "input",
+//                   },
+//                   number12: {
+//                     title: "数字输入框",
+//                     type: "number",
+//                     widget: "inputNumber",
+//                   },
+//                   select12: {
+//                     title: "下啦单选",
+//                     widget: "select",
+//                     props: {
+//                       options: [
+//                         { label: "东", value: "east" },
+//                         { label: "西", value: "west" },
+//                       ],
+//                     },
+//                   },
+//                 },
+//               },
+//               true
+//             );
+//           }, 0);
+
+//         }
+//       }}
+//     />
+//   );
+// }
 ```
 
-**类组件**
+<!-- **类组件**
 
 对于使用类组件的同学，可以使用 `connectForm` 替代 `useForm` hooks。
 
@@ -106,4 +224,4 @@ export default connectForm(Demo);
 
 <div>
   <img src="https://gw.alipayobjects.com/mdn/rms_e18934/afts/img/A*4QYNTbKU6xAAAAAAAAAAAABkARQnAQ?raw=true" width="80%"/>
-</div>
+</div> -->