Merge pull request #774 from rvsia/multipleIsEqual

fix(manager): allow multiple isEqual for a field

Author: Hyperkid123

packages/form-state-manager/src/tests/files/use-field.test.js

@@ -451,7 +451,7 @@ describe('useField', () => {
 
       expect(wrapper.find(SpyComponent).prop('meta')).toEqual(expect.objectContaining({ validating: false, valid: true }));
 
-      await act(() => {
+      await act(async () => {
         input.simulate('change', { target: { value: 'foo' } });
       });
       /**

packages/form-state-manager/src/tests/utils/manager-api.test.js

@@ -155,6 +155,42 @@ describe('managerApi', () => {
 
       expect(isEqual).toHaveBeenCalledWith('cosi', 'initial');
     });
+
+    it('should compute value using isEqual - multiple functions - false result', () => {
+      const managerApi = createManagerApi({ initialValues: { field1: 'initial' } });
+
+      const render = jest.fn();
+      const isEqual = jest.fn().mockImplementation(() => true);
+      const isEqual2 = jest.fn().mockImplementation(() => false);
+
+      managerApi().registerField({ name: 'field1', internalId: 1, render, isEqual });
+      managerApi().registerField({ name: 'field1', internalId: 2, render, isEqual: isEqual2 });
+
+      managerApi().change('field1', 'cosi');
+
+      expect(isEqual).toHaveBeenCalledWith('cosi', 'initial');
+      expect(isEqual2).toHaveBeenCalledWith('cosi', 'initial');
+
+      expect(managerApi().getFieldState('field1').pristine).toEqual(false);
+    });
+
+    it('should compute value using isEqual - multiple functions - true result', () => {
+      const managerApi = createManagerApi({ initialValues: { field1: 'initial' } });
+
+      const render = jest.fn();
+      const isEqual = jest.fn().mockImplementation(() => true);
+      const isEqual2 = jest.fn().mockImplementation(() => true);
+
+      managerApi().registerField({ name: 'field1', internalId: 1, render, isEqual });
+      managerApi().registerField({ name: 'field1', internalId: 2, render, isEqual: isEqual2 });
+
+      managerApi().change('field1', 'cosi');
+
+      expect(isEqual).toHaveBeenCalledWith('cosi', 'initial');
+      expect(isEqual2).toHaveBeenCalledWith('cosi', 'initial');
+
+      expect(managerApi().getFieldState('field1').pristine).toEqual(true);
+    });
   });
 
   it('should change different api instance separatelly', () => {

packages/form-state-manager/src/types/manager-api.d.ts

@@ -65,6 +65,7 @@ export interface ListenerField {
   afterSubmit?: AfterSubmit;
   beforeSubmit?: BeforeSubmit;
   validate?: Validator;
+  isEqual?: IsEqual;
 }
 
 export interface FieldListenerFields {
@@ -74,7 +75,6 @@ export interface FieldListenerFields {
 export interface FieldListener {
   count: number;
   state: FieldState;
-  isEqual?: IsEqual;
   asyncWatcher: AsyncWatcherApi;
   fields: FieldListenerFields;
   validateFields?: Array<string>;

packages/form-state-manager/src/utils/manager-api.ts

@@ -22,7 +22,7 @@ import CreateManagerApi, {
   CreateManagerApiConfig
 } from '../types/manager-api';
 import AnyObject from '../types/any-object';
-import FieldConfig from '../types/field-config';
+import FieldConfig, { IsEqual } from '../types/field-config';
 import { Meta } from '../types/use-field';
 import { formLevelValidator, isPromise } from './validate';
 import { FormValidator, FormLevelError, Validator } from '../types/validate';
@@ -429,7 +429,15 @@ const createManagerApi: CreateManagerApi = ({
 
     // TODO modify all affected field state variables
     batch(() => {
-      const isEqualFn = state.fieldListeners[name]?.isEqual || defaultIsEqual;
+      const allIsEqual: Array<IsEqual> = state.fieldListeners[name]
+        ? Object.values(state.fieldListeners[name].fields)
+            .map(({ isEqual }) => isEqual as IsEqual, [])
+            .filter(Boolean)
+        : [];
+
+      const isEqualFn =
+        allIsEqual.length > 0 ? (a: any, b: any) => allIsEqual.reduce((acc: boolean, curr: IsEqual) => acc && curr(a, b), true) : defaultIsEqual;
+
       const pristine = isEqualFn(value, state.fieldListeners[name]?.state?.meta?.initial || get(state.initialValues, name));
 
       setFieldState(name, (prevState) => ({
@@ -663,15 +671,15 @@ const createManagerApi: CreateManagerApi = ({
         : {}),
       count: (state.fieldListeners[subscriberConfig.name]?.count || 0) + 1,
       validateFields: subscriberConfig.validateFields,
-      isEqual: subscriberConfig.isEqual,
       fields: {
         ...state.fieldListeners[subscriberConfig.name]?.fields,
         [subscriberConfig.internalId || subscriberConfig.name]: {
           validate: subscriberConfig.validate,
           render: subscriberConfig.render,
           subscription: subscriberConfig.subscription,
           afterSubmit: subscriberConfig.afterSubmit,
-          beforeSubmit: subscriberConfig.beforeSubmit
+          beforeSubmit: subscriberConfig.beforeSubmit,
+          isEqual: subscriberConfig.isEqual
         }
       }
     };