fix(Form): Always call $onFieldChange when $$setState()

qiqiboy · Nov 27, 2020 · e5289ea · e5289ea
1 parent 69976c5
commit e5289ea
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 22 deletions.
diff --git a/dist/react-formutil.cjs.development.js b/dist/react-formutil.cjs.development.js
@@ -758,7 +758,7 @@ var Form = /*#__PURE__*/function (_Component) {
             }
 
             '$newValue' in item && parsePath($newValues, item.name, item.$newValue);
-            '$prevValue' in item && parsePath($prevValues, item.name, item.$prevValue);
+            !item.$dirty && '$prevValue' in item && parsePath($prevValues, item.name, item.$prevValue);
             hasFormChanged = true;
           }
         });
@@ -916,6 +916,11 @@ var Form = /*#__PURE__*/function (_Component) {
               });
 
               if (findItem) {
+                if (!('$prevValue' in findItem)) {
+                  findItem.$dirty = true;
+                  findItem.$prevValue = findItem.$newValue;
+                }
+
                 findItem.$newValue = $newValue;
               } else {
                 _this.$$fieldChangedQueue.push({

diff --git a/dist/react-formutil.cjs.production.js b/dist/react-formutil.cjs.production.js
diff --git a/dist/react-formutil.esm.development.js b/dist/react-formutil.esm.development.js
@@ -691,7 +691,7 @@ var Form = /*#__PURE__*/function (_Component) {
             }
 
             '$newValue' in item && parsePath($newValues, item.name, item.$newValue);
-            '$prevValue' in item && parsePath($prevValues, item.name, item.$prevValue);
+            !item.$dirty && '$prevValue' in item && parsePath($prevValues, item.name, item.$prevValue);
             hasFormChanged = true;
           }
         });
@@ -849,6 +849,11 @@ var Form = /*#__PURE__*/function (_Component) {
               });
 
               if (findItem) {
+                if (!('$prevValue' in findItem)) {
+                  findItem.$dirty = true;
+                  findItem.$prevValue = findItem.$newValue;
+                }
+
                 findItem.$newValue = $newValue;
               } else {
                 _this.$$fieldChangedQueue.push({

diff --git a/dist/react-formutil.esm.production.js b/dist/react-formutil.esm.production.js
diff --git a/dist/react-formutil.umd.development.js b/dist/react-formutil.umd.development.js
@@ -1051,7 +1051,7 @@
               }
 
               '$newValue' in item && parsePath($newValues, item.name, item.$newValue);
-              '$prevValue' in item && parsePath($prevValues, item.name, item.$prevValue);
+              !item.$dirty && '$prevValue' in item && parsePath($prevValues, item.name, item.$prevValue);
               hasFormChanged = true;
             }
           });
@@ -1209,6 +1209,11 @@
                 });
 
                 if (findItem) {
+                  if (!('$prevValue' in findItem)) {
+                    findItem.$dirty = true;
+                    findItem.$prevValue = findItem.$newValue;
+                  }
+
                   findItem.$newValue = $newValue;
                 } else {
                   _this.$$fieldChangedQueue.push({

diff --git a/dist/react-formutil.umd.production.js b/dist/react-formutil.umd.production.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-formutil",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Happy to build the forms in React ^_^",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

diff --git a/src/Form.js b/src/Form.js
@@ -216,7 +216,7 @@ class Form extends Component {
                     }
 
                     '$newValue' in item && utils.parsePath($newValues, item.name, item.$newValue);
-                    '$prevValue' in item && utils.parsePath($prevValues, item.name, item.$prevValue);
+                    !item.$dirty && '$prevValue' in item && utils.parsePath($prevValues, item.name, item.$prevValue);
 
                     hasFormChanged = true;
                 }
@@ -378,6 +378,11 @@ class Form extends Component {
                         const findItem = utils.arrayFind(this.$$fieldChangedQueue, item => item.name === name);
 
                         if (findItem) {
+                            if (!('$prevValue' in findItem)) {
+                                findItem.$dirty = true;
+                                findItem.$prevValue = findItem.$newValue;
+                            }
+
                             findItem.$newValue = $newValue;
                         } else {
                             this.$$fieldChangedQueue.push({

diff --git a/tests/Field.test.tsx b/tests/Field.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { fireEvent, waitFor, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Field } from '../src';
@@ -113,12 +113,12 @@ describe('$validators', () => {
         async: jest.fn()
     };
     const $validators = {
-        syncValidate: (value) => {
+        syncValidate: value => {
             spyValidators.sync();
 
             return !!value || 'sync-validate!';
         },
-        asyncValidate: jest.fn((value) => {
+        asyncValidate: jest.fn(value => {
             return new Promise((resolve, reject) =>
                 setTimeout(() => {
                     spyValidators.async();
@@ -175,10 +175,10 @@ describe('$validators', () => {
 
 describe('$validateLazy', () => {
     const $validators = {
-        syncValidate: jest.fn((value) => {
+        syncValidate: jest.fn(value => {
             return !!value || 'sync-validate!';
         }),
-        asyncValidate: jest.fn((value) => {
+        asyncValidate: jest.fn(value => {
             return new Promise((resolve, reject) =>
                 setTimeout(() => {
                     reject(new Error('async-validate!'));
@@ -275,7 +275,7 @@ describe('$ref', () => {
         let $ref;
         const { getFieldutil } = renderField({
             name: 'a',
-            $ref: (ref) => ($ref = ref)
+            $ref: ref => ($ref = ref)
         });
 
         expect($ref).toBe(getFieldutil());
@@ -407,7 +407,7 @@ describe('$memo', () => {
 });
 
 describe('$onFieldChange()', () => {
-    test('called when field value change', async () => {
+    test('called when value change', async () => {
         const onChange = jest.fn();
         const { getFormutil, getElement } = renderField({
             name: 'a',
@@ -418,10 +418,37 @@ describe('$onFieldChange()', () => {
 
         userEvent.paste(getElement(), 'abc');
 
-        await waitFor(() => {
-            expect(onChange).toBeCalledTimes(1);
-            expect(onChange.mock.calls[0]).toEqual(['abc', '', getFormutil()]);
+        expect(onChange).toBeCalledTimes(1);
+        expect(onChange).toBeCalledWith('abc', '', getFormutil());
+    });
+
+    test('called when value change, even if before form mount', async () => {
+        const fieldChangeFn = jest.fn();
+        const formChangeFn = jest.fn();
+        const MyForm = ({ $formutil }) => {
+            useEffect(() => {
+                $formutil.$setValues({
+                    a: '2'
+                });
+            }, []); // eslint-disable-line
+
+            return <Field name="a" $defaultValue="1" $onFieldChange={fieldChangeFn} children={null} />;
+        };
+        const { getFormutil } = renderForm($formutil => <MyForm $formutil={$formutil} />, {
+            $onFormChange: formChangeFn
         });
+
+        expect(fieldChangeFn).toBeCalledTimes(1);
+        expect(fieldChangeFn).toBeCalledWith('2', '1', getFormutil());
+        expect(formChangeFn).toBeCalledTimes(1);
+
+        expect(formChangeFn).toBeCalledWith(
+            getFormutil(),
+            {
+                a: '2'
+            },
+            {}
+        );
     });
 });
 
@@ -575,7 +602,7 @@ describe('$fieldutil', () => {
         $focused: '$setFocused'
     };
 
-    Object.keys(stateMap).forEach((key) => {
+    Object.keys(stateMap).forEach(key => {
         const method = stateMap[key];
 
         test(method + '()', async () => {
@@ -594,7 +621,7 @@ describe('$fieldutil', () => {
     });
 
     test('$validate() / $onValidate()', async () => {
-        const callback = jest.fn((v) => !!v);
+        const callback = jest.fn(v => !!v);
 
         const { getFieldutil } = renderField({
             name: 'b',

diff --git a/tests/Form.test.tsx b/tests/Form.test.tsx
@@ -296,7 +296,7 @@ describe('$validator', () => {
 });
 
 describe('$onFormChange', () => {
-    test('should be called when field value changed', async () => {
+    test('should be called when form mount or field value changed', async () => {
         const changeSpy = jest.fn();
         const fieldChangeSpy = jest.fn();
         const { getFormutil } = renderForm(
@@ -1011,7 +1011,7 @@ describe('$formutil', () => {
 });
 
 describe('Complex nested form', () => {
-    test.only('condition render', async () => {
+    test('condition render', async () => {
         const renderFn = jest.fn();
         const changeFn = jest.fn();
         const { getFormutil, getByTestId } = renderForm($formutil => {