Merge branch 'formily_next' into refactor_schema_expression

alibaba · Sep 13, 2021 · f3113ca · f3113ca
2 parents eb18ed4 + 6463371
commit f3113ca
Show file tree

Hide file tree

Showing 64 changed files with 929 additions and 163 deletions.
diff --git a/designable/antd/playground/template.ejs b/designable/antd/playground/template.ejs
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <head>
+  <meta charset="utf-8">
   <title>
     Designable Playground
   </title>

diff --git a/designable/setters/src/components/ValidatorSetter/index.tsx b/designable/setters/src/components/ValidatorSetter/index.tsx
@@ -102,12 +102,12 @@ const ValidatorSchema: ISchema = {
             'x-component': 'NumberPicker',
           },
           whitespace: {
-            type: 'string',
+            type: 'boolean',
             'x-decorator': 'FormItem',
             'x-component': 'Switch',
           },
           required: {
-            type: 'string',
+            type: 'boolean',
             'x-decorator': 'FormItem',
             'x-component': 'Switch',
           },

diff --git a/docs/guide/advanced/build.md b/docs/guide/advanced/build.md
@@ -24,10 +24,12 @@ export default {
     [
       'babel-plugin-import',
       { libraryName: 'antd', libraryDirectory: 'es', style: true },
+      'antd',
     ],
     [
       'babel-plugin-import',
       { libraryName: '@formily/antd', libraryDirectory: 'esm', style: true },
+      '@formily/antd',
     ],
   ],
 }
@@ -92,12 +94,12 @@ modify `config-overrides.js`
 -   return config;
 - };
 + module.exports = override(
-+   fixBabelImports('import', {
++   fixBabelImports('antd', {
 +     libraryName: 'antd',
 +     libraryDirectory: 'es',
 +     style: true
 +   }),
-+   fixBabelImports('import', {
++   fixBabelImports('@formily/antd', {
 +     libraryName: '@formily/antd',
 +     libraryDirectory: 'esm',
 +     style: true
@@ -130,15 +132,17 @@ Modify `.babelrc` or babel-loader
         "libraryName": "antd",
         "libraryDirectory": "es",
         "style": true
-      }
+      },
+      "antd"
     ],
     [
       "import",
       {
         "libraryName": "@formily/antd",
         "libraryDirectory": "esm",
         "style": true
-      }
+      },
+      "@formily/antd"
     ]
   ]
 }

diff --git a/docs/guide/advanced/build.zh-CN.md b/docs/guide/advanced/build.zh-CN.md
@@ -24,10 +24,12 @@ export default {
     [
       'babel-plugin-import',
       { libraryName: 'antd', libraryDirectory: 'es', style: true },
+      'antd',
     ],
     [
       'babel-plugin-import',
       { libraryName: '@formily/antd', libraryDirectory: 'esm', style: true },
+      '@formily/antd',
     ],
   ],
 }
@@ -92,12 +94,12 @@ yarn add babel-plugin-import --dev
 -   return config;
 - };
 + module.exports = override(
-+   fixBabelImports('import', {
++   fixBabelImports('antd', {
 +     libraryName: 'antd',
 +     libraryDirectory: 'es',
 +     style: true
 +   }),
-+   fixBabelImports('import', {
++   fixBabelImports('@formily/antd', {
 +     libraryName: '@formily/antd',
 +     libraryDirectory: 'esm',
 +     style: true
@@ -130,15 +132,17 @@ yarn add babel-plugin-import --dev
         "libraryName": "antd",
         "libraryDirectory": "es",
         "style": true
-      }
+      },
+      "antd"
     ],
     [
       "import",
       {
         "libraryName": "@formily/antd",
         "libraryDirectory": "esm",
         "style": true
-      }
+      },
+      "@formily/antd"
     ]
   ]
 }

diff --git a/packages/antd/docs/components/ArrayTable.md b/packages/antd/docs/components/ArrayTable.md
@@ -533,7 +533,7 @@ const schema = {
             'x-component-props': { width: 100, title: 'Explicitly hidden->A2' },
             properties: {
               a1: {
-                type: 'string',
+                type: 'boolean',
                 'x-decorator': 'FormItem',
                 'x-component': 'Switch',
               },

diff --git a/packages/antd/docs/components/ArrayTable.zh-CN.md b/packages/antd/docs/components/ArrayTable.zh-CN.md
@@ -533,7 +533,7 @@ const schema = {
             'x-component-props': { width: 100, title: '显隐->A2' },
             properties: {
               a1: {
-                type: 'string',
+                type: 'boolean',
                 'x-decorator': 'FormItem',
                 'x-component': 'Switch',
               },

diff --git a/packages/antd/docs/components/FormItem.md b/packages/antd/docs/components/FormItem.md
@@ -487,7 +487,7 @@ export default () => {
             bordered: false,
           }}
         />
-        <SchemaField.String
+        <SchemaField.Boolean
           name="Switch"
           title="Switch"
           x-decorator="FormItem"
@@ -616,7 +616,7 @@ export default () => {
             inset: true,
           }}
         />
-        <SchemaField.String
+        <SchemaField.Boolean
           name="Switch"
           title="Switch"
           x-decorator="FormItem"
@@ -1040,7 +1040,7 @@ export default () => {
             x-component="TreeSelect"
             required
           />
-          <SchemaField.String
+          <SchemaField.Boolean
             name="Switch"
             title="Switch"
             x-decorator="FormItem"

diff --git a/packages/antd/docs/components/FormItem.zh-CN.md b/packages/antd/docs/components/FormItem.zh-CN.md
@@ -487,7 +487,7 @@ export default () => {
             bordered: false,
           }}
         />
-        <SchemaField.String
+        <SchemaField.Boolean
           name="Switch"
           title="Switch"
           x-decorator="FormItem"
@@ -616,7 +616,7 @@ export default () => {
             inset: true,
           }}
         />
-        <SchemaField.String
+        <SchemaField.Boolean
           name="Switch"
           title="Switch"
           x-decorator="FormItem"
@@ -1040,7 +1040,7 @@ export default () => {
             x-component="TreeSelect"
             required
           />
-          <SchemaField.String
+          <SchemaField.Boolean
             name="Switch"
             title="Switch"
             x-decorator="FormItem"

diff --git a/packages/antd/docs/components/Switch.md b/packages/antd/docs/components/Switch.md
@@ -22,7 +22,7 @@ const form = createForm()
 export default () => (
   <FormProvider form={form}>
     <SchemaField>
-      <SchemaField.Number
+      <SchemaField.Boolean
         name="switch"
         title="Switch"
         x-decorator="FormItem"
@@ -57,7 +57,7 @@ const schema = {
   type: 'object',
   properties: {
     switch: {
-      type: 'number',
+      type: 'boolean',
       title: 'Switch',
       'x-decorator': 'FormItem',
       'x-component': 'Switch',

diff --git a/packages/antd/docs/components/Switch.zh-CN.md b/packages/antd/docs/components/Switch.zh-CN.md
@@ -22,7 +22,7 @@ const form = createForm()
 export default () => (
   <FormProvider form={form}>
     <SchemaField>
-      <SchemaField.Number
+      <SchemaField.Boolean
         name="switch"
         title="开关"
         x-decorator="FormItem"
@@ -57,7 +57,7 @@ const schema = {
   type: 'object',
   properties: {
     switch: {
-      type: 'number',
+      type: 'boolean',
       title: '开关',
       'x-decorator': 'FormItem',
       'x-component': 'Switch',

diff --git a/packages/antd/src/array-base/index.tsx b/packages/antd/src/array-base/index.tsx
@@ -118,7 +118,12 @@ ArrayBase.SortHandle = (props) => {
 
 ArrayBase.Index = (props) => {
   const index = useIndex()
-  return <span {...props}>#{index + 1}.</span>
+  const prefixCls = usePrefixCls('formily-array-base')
+  return (
+    <span {...props} className={`${prefixCls}-index`}>
+      #{index + 1}.
+    </span>
+  )
 }
 
 ArrayBase.Addition = (props) => {

diff --git a/packages/antd/src/array-table/index.tsx b/packages/antd/src/array-table/index.tsx
@@ -245,6 +245,10 @@ const ArrayTablePagination: React.FC<IArrayTablePaginationProps> = (props) => {
   )
 }
 
+const RowComp = (props: any) => {
+  return <SortableRow index={props['data-row-key'] || 0} {...props} />
+}
+
 export const ArrayTable: ComposedArrayTable = observer(
   (props: TableProps<any>) => {
     const ref = useRef<HTMLDivElement>()
@@ -305,14 +309,7 @@ export const ArrayTable: ComposedArrayTable = observer(
                         {...props}
                       />
                     ),
-                    row: (props: any) => {
-                      return (
-                        <SortableRow
-                          index={props['data-row-key'] || 0}
-                          {...props}
-                        />
-                      )
-                    },
+                    row: RowComp,
                   },
                 }}
               />

diff --git a/packages/core/docs/api/entry/FormEffectHooks.md b/packages/core/docs/api/entry/FormEffectHooks.md
@@ -203,6 +203,10 @@ export default () => {
 
 Side effect hooks for monitoring form value changes
 
+<Alert>
+It should be noted that this hook is triggered synchronously. For some behaviors that trigger `set` operation of `Proxy` multiple times, the results may not be as expected. For example, when deleting elements from array by `splice`, the array length will be the same as before deletion. (<a href="https://github.com/alibaba/formily/issues/2128">#2128</a>)
+</Alert>
+
 #### Signature
 
 ```ts

diff --git a/packages/core/docs/api/entry/FormEffectHooks.zh-CN.md b/packages/core/docs/api/entry/FormEffectHooks.zh-CN.md
@@ -203,6 +203,10 @@ export default () => {
 
 用于监听表单值变化的副作用钩子
 
+<Alert>
+需要注意此钩子是同步触发的，对于某些会多次触发 Proxy set 操作的行为，得到的结果可能会与预期不符。例如: 数组 splice 删除元素时，数组长度会和删除之前相同，只是被删除元素被置为了 undefined。此时需要使用方按需添加 debounce 或 setTimeout。(<a href="https://github.com/alibaba/formily/issues/2128">#2128</a>)
+</Alert>
+
 #### 签名
 
 ```ts

diff --git a/packages/core/src/__tests__/array.spec.ts b/packages/core/src/__tests__/array.spec.ts
@@ -467,3 +467,50 @@ test('nest array remove', async () => {
   await metrics.remove(1)
   expect(form.fields['metrics.0.content.0.attr']).not.toBeUndefined()
 })
+
+test('incomplete insertion of array elements', async () => {
+  const form = attach(
+    createForm({
+      values: {
+        array: [{ aa: 1 }, { aa: 2 }, { aa: 3 }],
+      },
+    })
+  )
+  const array = attach(
+    form.createArrayField({
+      name: 'array',
+    })
+  )
+  attach(
+    form.createObjectField({
+      name: '0',
+      basePath: 'array',
+    })
+  )
+  attach(
+    form.createField({
+      name: 'aa',
+      basePath: 'array.0',
+    })
+  )
+  attach(
+    form.createObjectField({
+      name: '2',
+      basePath: 'array',
+    })
+  )
+  attach(
+    form.createField({
+      name: 'aa',
+      basePath: 'array.2',
+    })
+  )
+  expect(form.fields['array.0.aa']).not.toBeUndefined()
+  expect(form.fields['array.1.aa']).toBeUndefined()
+  expect(form.fields['array.2.aa']).not.toBeUndefined()
+  await array.unshift({})
+  expect(form.fields['array.0.aa']).toBeUndefined()
+  expect(form.fields['array.1.aa']).not.toBeUndefined()
+  expect(form.fields['array.2.aa']).toBeUndefined()
+  expect(form.fields['array.3.aa']).not.toBeUndefined()
+})
diff --git a/packages/core/src/shared/constants.ts b/packages/core/src/shared/constants.ts
@@ -26,3 +26,5 @@ export const GlobalState = {
   effectStart: false,
   effectEnd: false,
 }
+
+export const NumberIndexReg = /^\.(\d+)/