fix(core): fix onFormValuesChange does not trigger with ArrayField in…

…itialValue (#1787)

designable/antd/package.json

@@ -30,7 +30,7 @@
     "start": "webpack-dev-server --config playground/webpack.dev.ts"
   },
   "devDependencies": {
-    "@designable/react-settings-form": "^0.4.2",
+    "@designable/react-settings-form": "^0.4.7",
     "autoprefixer": "^9.0",
     "file-loader": "^5.0.2",
     "fs-extra": "^8.1.0",
@@ -56,9 +56,9 @@
     "react-is": ">=16.8.0 || >=17.0.0"
   },
   "dependencies": {
-    "@designable/core": "^0.4.2",
-    "@designable/formily": "^0.4.2",
-    "@designable/react": "^0.4.2",
+    "@designable/core": "^0.4.7",
+    "@designable/formily": "^0.4.7",
+    "@designable/react": "^0.4.7",
     "@formily/antd": "2.0.0-beta.77",
     "@formily/core": "2.0.0-beta.77",
     "@formily/react": "2.0.0-beta.77",

designable/antd/playground/template.ejs

@@ -14,7 +14,7 @@
   <div id="root">
   </div>
   <script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
-  <script src="https://unpkg.com/react/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
   <script src="https://unpkg.com/antd/dist/antd-with-locales.min.js"></script>
 </body>

designable/setters/package.json

@@ -40,10 +40,11 @@
     "react-is": ">=16.8.0 || >=17.0.0"
   },
   "dependencies": {
-    "@designable/core": "^0.4.2",
-    "@designable/formily": "^0.4.2",
-    "@designable/react": "^0.4.2",
-    "@designable/react-settings-form": "^0.4.2",
+    "@designable/core": "^0.4.7",
+    "@designable/formily": "^0.4.7",
+    "@designable/react": "^0.4.7",
+    "@designable/shared": "^0.4.7",
+    "@designable/react-settings-form": "^0.4.7",
     "@formily/antd": "2.0.0-beta.77",
     "@formily/core": "2.0.0-beta.77",
     "@formily/react": "2.0.0-beta.77",

designable/setters/src/components/ReactionsSetter/FieldPropertySetter.tsx

@@ -55,10 +55,10 @@ export const FieldPropertySetter: React.FC<IFieldPropertySetterProps> = (
   return (
     <div className={prefix}>
       <Menu
-        mode="inline"
+        mode="vertical"
         style={{
           width: 240,
-          height: 300,
+          height: 200,
           paddingRight: 4,
           overflowY: 'auto',
           overflowX: 'hidden',
@@ -88,8 +88,8 @@ export const FieldPropertySetter: React.FC<IFieldPropertySetterProps> = (
       </Menu>
       <div className={prefix + '-coder-wrapper'}>
         <div
-          className={prefix + '-coder-title'}
-        >{`$self.${selectKeys[0]} = `}</div>
+          className={prefix + '-coder-start'}
+        >{`$self.${selectKeys[0]} = {{`}</div>
         <div className={prefix + '-coder'}>
           <MonacoInput
             key={selectKeys[0]}
@@ -108,6 +108,7 @@ export const FieldPropertySetter: React.FC<IFieldPropertySetterProps> = (
             }}
           />
         </div>
+        <div className={prefix + '-coder-end'}>{`}}`}</div>
       </div>
     </div>
   )

designable/setters/src/components/ReactionsSetter/index.tsx

@@ -3,9 +3,10 @@ import { clone } from '@formily/shared'
 import { createForm, isVoidField } from '@formily/core'
 import { createSchemaField } from '@formily/react'
 import { GlobalRegistry } from '@designable/core'
+import { requestIdle } from '@designable/shared'
 import { usePrefix, TextWidget } from '@designable/react'
 import { MonacoInput } from '@designable/react-settings-form'
-import { Form, ArrayTable, Input, FormItem } from '@formily/antd'
+import { Form, ArrayTable, Input, FormItem, FormCollapse } from '@formily/antd'
 import { Modal, Card, Button } from 'antd'
 import { PathSelector } from './PathSelector'
 import { FieldPropertySetter } from './FieldPropertySetter'
@@ -20,6 +21,7 @@ export interface IReactionsSetterProps {
 const SchemaField = createSchemaField({
   components: {
     Card,
+    FormCollapse,
     Input,
     FormItem,
     PathSelector,
@@ -42,9 +44,14 @@ export const ReactionsSetter: React.FC<IReactionsSetterProps> = (props) => {
   const closeModal = () => setModalVisible(false)
   useEffect(() => {
     if (modalVisible) {
-      requestIdleCallback(() => {
-        setInnerVisible(true)
-      })
+      requestIdle(
+        () => {
+          setInnerVisible(true)
+        },
+        {
+          timeout: 400,
+        }
+      )
     } else {
       setInnerVisible(false)
     }
@@ -59,6 +66,7 @@ export const ReactionsSetter: React.FC<IReactionsSetterProps> = (props) => {
           'SettingComponents.ReactionsSetter.configureReactions'
         )}
         width="65%"
+        centered
         bodyStyle={{ padding: 10 }}
         transitionName=""
         maskTransitionName=""
@@ -210,25 +218,30 @@ export const ReactionsSetter: React.FC<IReactionsSetterProps> = (props) => {
                   />
                 </SchemaField.Void>
                 <SchemaField.Void
-                  x-component="Card"
+                  x-component="FormCollapse"
                   x-component-props={{
-                    title: GlobalRegistry.getDesignerMessage(
-                      'SettingComponents.ReactionsSetter.actionReactions'
-                    ),
-                    size: 'small',
-                    type: 'inner',
                     style: { marginBottom: 10 },
                   }}
                 >
-                  <SchemaField.String
-                    name="fulfill.run"
-                    x-component="MonacoInput"
+                  <SchemaField.Void
+                    x-component="FormCollapse.CollapsePanel"
                     x-component-props={{
-                      width: '100%',
-                      height: 200,
-                      language: 'typescript',
+                      key: 'run',
+                      header: GlobalRegistry.getDesignerMessage(
+                        'SettingComponents.ReactionsSetter.actionReactions'
+                      ),
                     }}
-                  />
+                  >
+                    <SchemaField.String
+                      name="fulfill.run"
+                      x-component="MonacoInput"
+                      x-component-props={{
+                        width: '100%',
+                        height: 200,
+                        language: 'typescript',
+                      }}
+                    />
+                  </SchemaField.Void>
                 </SchemaField.Void>
               </SchemaField>
             </Form>

designable/setters/src/components/ReactionsSetter/styles.less

@@ -2,7 +2,7 @@
 
 .dn-reactions-setter {
   width: 100%;
-  min-height: 600px;
+  min-height: 523px;
 
   ::-webkit-scrollbar {
     width: 5px;
@@ -18,29 +18,73 @@
   ::-webkit-scrollbar-thumb:hover {
     background-color: rgba(0, 0, 0, 0.3);
   }
+
+  .@{ant-prefix}-collapse {
+    border: 1px solid @border-color-split;
+
+    &-header {
+      padding: 8px 10px !important;
+      background-color: @background-color-light  !important;
+      border-bottom: 1px solid @border-color-split  !important;
+      font-weight: 500 !important;
+
+      .@{ant-prefix}-collapse-arrow {
+        margin-right: 4px !important;
+      }
+    }
+
+    &-item {
+      border: none !important;
+    }
+
+    &-content {
+      border: none !important;
+    }
+
+    &-content-box {
+      padding: 12px 0 12px 0 !important;
+    }
+  }
 }
 
 .dn-field-property-setter {
   display: flex;
-  height: 300px;
+  height: 200px;
 
   &-coder-wrapper {
     display: flex;
     flex-direction: column;
-    width: 100%;
+    flex-grow: 2;
     height: 100%;
+    padding-left: 4px;
     position: relative;
   }
 
-  &-coder-title {
-    font-size: 30px;
+  &-coder-start {
+    font-size: 18px;
+    line-height: 30px;
+    margin-bottom: 4px;
+    color: @text-color;
+    padding-left: 20px;
+    font-weight: 300;
+    flex-grow: 0;
+    opacity: 0.96;
+  }
+
+  &-coder-end {
+    font-size: 18px;
     color: @text-color;
-    padding-left: 68px;
-    padding-bottom: 10px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    padding-left: 20px;
+    line-height: 30px;
+    font-weight: 300;
+    flex-grow: 0;
+    opacity: 0.96;
   }
 
   &-coder {
     min-width: 0;
     flex-grow: 2;
   }
-}
+}

designable/setters/src/locales/en-US.ts

@@ -40,6 +40,7 @@ export default {
         componentProps: 'Component Props',
         decorator: 'Decorator',
         decoratorProps: 'Decorator Props',
+        pleaseSelect: 'Please Select',
       },
     },
   },

designable/setters/src/locales/zh-CN.ts

@@ -38,6 +38,7 @@ export default {
         componentProps: '组件属性',
         decorator: '容器',
         decoratorProps: '容器属性',
+        pleaseSelect: '请选择',
       },
     },
   },

packages/core/src/__tests__/form.spec.ts

@@ -1092,3 +1092,26 @@ test('form lifecycle can be triggered after call form.setXXX', () => {
   expect(initialValuesTriggerNum).toEqual(3)
   expect(valuesTriggerNum).toEqual(6)
 })
+
+test('form values change with array field(default value)', async () => {
+  const handler = jest.fn()
+  const form = attach(
+    createForm({
+      effects() {
+        onFormValuesChange(handler)
+      },
+    })
+  )
+  const array = attach(
+    form.createArrayField({
+      name: 'array',
+      initialValue: [
+        {
+          hello: 'world',
+        },
+      ],
+    })
+  )
+  await array.push({})
+  expect(handler).toBeCalledTimes(2)
+})

packages/core/src/shared/internals.ts

@@ -10,6 +10,7 @@ import {
   isPlainObj,
   toArr,
   isNumberLike,
+  shallowClone,
 } from '@formily/shared'
 import { ValidatorTriggerType, validate } from '@formily/validator'
 import { action, batch, toJS } from '@formily/reactive'
@@ -432,16 +433,16 @@ export const initFieldValue = (field: Field, designable: boolean) => {
       field.props.initialValue
     )
     if (isEmptyValue && !isEmptyInitialValue) {
-      field.value = field.props.initialValue
+      field.value = shallowClone(field.props.initialValue)
     } else if (isValid(field.props.value)) {
       field.value = field.props.value
     } else if (isValid(field.props.initialValue)) {
-      field.value = field.props.initialValue
+      field.value = shallowClone(field.props.initialValue)
     }
   }
   if (designable) {
     if (isValid(field.props.initialValue)) {
-      field.initialValue = field.props.initialValue
+      field.initialValue = shallowClone(field.props.initialValue)
     }
     if (isValid(field.props.value)) {
       field.value = field.props.value