fix(@uform/react): invariant initialValues will not be changed when f…

…orm rerender (#214)

.travis.yml

@@ -10,6 +10,7 @@ node_js:
   - "11"
 
 before_script:
+  - lerna clean --yes
   - lerna bootstrap --no-ci
 
 script:

package.json

@@ -29,6 +29,9 @@
     "lint": "eslint --ext .ts,.tsx,.js \"packages/*/src/**.@(ts|tsx|js)\" \"scripts/**/*.js\" --fix",
     "postinstall": "opencollective-postinstall"
   },
+  "resolutions": {
+    "@types/react": "16.8.23"
+  },
   "devDependencies": {
     "@alifd/next": "^1.14.2",
     "@babel/cli": "^7.2.0",

packages/builder-next/package.json

@@ -17,6 +17,9 @@
   "scripts": {
     "build": "tsc"
   },
+  "resolutions": {
+    "@types/react": "16.8.23"
+  },
   "peerDependencies": {
     "@alifd/next": "^1.13.1",
     "@babel/runtime": "^7.4.4",

packages/builder-next/tsconfig.json

@@ -3,14 +3,9 @@
   "compilerOptions": {
     "outDir": "./lib",
     "declaration": false,
-    "allowJs": true
+    "allowJs": true,
+    "skipLibCheck": true
   },
-  "include": [
-    "./src/**/*.js",
-    "./src/**/*.ts",
-    "./src/**/*.tsx"
-  ],
-  "exclude": [
-    "./src/__tests__/*"
-  ]
-}
+  "include": ["./src/**/*.js", "./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["./src/__tests__/*"]
+}

packages/builder/package.json

@@ -23,6 +23,9 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
+  "resolutions": {
+    "@types/react": "16.8.23"
+  },
   "dependencies": {
     "@uform/react": "^0.3.7",
     "@uform/utils": "^0.3.7",

packages/builder/tsconfig.json

@@ -3,12 +3,9 @@
   "compilerOptions": {
     "outDir": "./lib",
     "declaration": false,
-    "allowJs": true
+    "allowJs": true,
+    "skipLibCheck": true
   },
-  "include": [
-    "./src/**/*.js"
-  ],
-  "exclude": [
-    "./src/__tests__/*"
-  ]
-}
+  "include": ["./src/**/*.js"],
+  "exclude": ["./src/__tests__/*"]
+}

packages/core/src/index.ts

@@ -5,7 +5,13 @@ import {
 } from '@uform/validator'
 
 import { Form } from './form'
-import { caculateSchemaInitialValues, isFn, each, isEmpty } from './utils'
+import {
+  caculateSchemaInitialValues,
+  isFn,
+  each,
+  isEmpty,
+  clone
+} from './utils'
 
 export * from './path'
 
@@ -27,7 +33,7 @@ export const createForm = ({
   let fields = []
   let calculatedValues = caculateSchemaInitialValues(
     schema,
-    isEmpty(values) ? initialValues : values,
+    isEmpty(values) ? clone(initialValues) : clone(values),
     ({ name, path, schemaPath }, schema: ISchema, value: any) => {
       fields.push({ name, path, schemaPath, schema, value })
     }
@@ -78,6 +84,11 @@ export const createForm = ({
   return form
 }
 
-export { setValidationLocale, setValidationLanguage, Form }
+export {
+  setValidationLocale,
+  setValidationLanguage,
+  Form,
+  caculateSchemaInitialValues
+}
 
 export default createForm

packages/react/src/__tests__/value.spec.js

@@ -25,6 +25,17 @@ registerFormField(
   ))
 )
 
+registerFormField(
+  'name-string',
+  connect()(props => (
+    <input
+      data-testid={`test-input-${props.name}`}
+      {...props}
+      value={props.value || ''}
+    />
+  ))
+)
+
 test('default value', async () => {
   const Component = () => (
     <SchemaForm defaultValue={{ foo: '' }}>
@@ -260,26 +271,74 @@ test('controlled with hooks by dynamic value', async () => {
   expect(onChangeHandler).toHaveBeenCalledTimes(3)
 })
 
+test('invariant initialValues will not be changed when form rerender', async () => {
+  const Component = () => {
+    const [, setDisabled] = useState(false)
+
+    return (
+      <div>
+        <SchemaForm
+          initialValues={{ a1: 'a1' }}
+          onSubmit={() => {
+            act(setDisabled)
+          }}
+        >
+          <Field type="name-string" x-props={{ name: 'a1' }} name="a1" />
+          <Field
+            type="name-string"
+            name="a2"
+            x-props={{ name: 'a2' }}
+            default={'a2'}
+          />
+          <Field type="name-string" name="a3" x-props={{ name: 'a3' }} />
+          <button type="submit">Click</button>
+        </SchemaForm>
+      </div>
+    )
+  }
+
+  const { queryByTestId, queryByText } = render(<Component />)
+  expect(queryByTestId('test-input-a1').value).toEqual('a1')
+  expect(queryByTestId('test-input-a2').value).toEqual('a2')
+  expect(queryByTestId('test-input-a3').value).toEqual('')
+
+  fireEvent.click(queryByText('Click'))
+  await sleep(33)
+
+  expect(queryByTestId('test-input-a1').value).toEqual('a1')
+  expect(queryByTestId('test-input-a2').value).toEqual('a2')
+  expect(queryByTestId('test-input-a3').value).toEqual('')
+
+  // 重新设置 SchemaForm Rerender
+  fireEvent.click(queryByText('Click'))
+  await sleep(33)
+
+  expect(queryByTestId('test-input-a1').value).toEqual('a1')
+  expect(queryByTestId('test-input-a2').value).toEqual('a2')
+  expect(queryByTestId('test-input-a3').value).toEqual('')
+})
+
 test('submit with number name', async () => {
   const onSubmitHandler = jest.fn()
   const Component = () => {
     return (
       <SchemaForm onSubmit={onSubmitHandler}>
         <Field type="object" name="aaa">
-          <Field name="123" type="string" />
+          <Field name="bbb" type="string" />
         </Field>
         <button type="submit">Click</button>
       </SchemaForm>
     )
   }
 
-  const { queryByTestId, baseElement, queryByText } = render(<Component />)
+  const { queryByTestId, queryByText } = render(<Component />)
   fireEvent.change(queryByTestId('test-input'), { target: { value: '333' } })
   fireEvent.click(queryByText('Click'))
+
   await sleep(33)
   expect(onSubmitHandler).toHaveBeenCalledWith({
     aaa: {
-      '123': '333'
+      bbb: '333'
     }
   })
 })

packages/react/src/state/form.tsx

@@ -192,7 +192,10 @@ export const StateForm = createHOC((options, Form) => {
         !isEmpty(initialValues) &&
         !isEqual(initialValues, prevProps.initialValues)
       ) {
-        this.form.initialize({ values: initialValues, initialValues })
+        this.form.initialize({
+          values: initialValues,
+          initialValues
+        })
       }
       if (!isEmpty(editable) && !isEqual(editable, prevProps.editable)) {
         this.form.changeEditable(editable)

packages/utils/src/schema.ts

@@ -100,7 +100,7 @@ const schemaTraverse = (
 export const caculateSchemaInitialValues = (
   schema: ISchema,
   initialValues: any,
-  callback: (pathInfo: IPathInfo, schema: ISchema, value: any) => void
+  callback?: (pathInfo: IPathInfo, schema: ISchema, value: any) => void
 ) => {
   initialValues = initialValues || schema.default || {}
   schemaTraverse(schema, (subSchema, $path, parentPath) => {
@@ -121,7 +121,7 @@ export const caculateSchemaInitialValues = (
       if (!isEmpty(value)) {
         setIn(initialValues, name, value)
       }
-      if (isFn(callback)) {
+      if (callback && isFn(callback)) {
         const newPath = {
           name,
           path,