Merge pull request #759 from rvsia/afterBeforeSubmit

feat(manager): add after/before submit callbacks

Author: Hyperkid123

packages/form-state-manager/src/files/use-field.ts

@@ -63,6 +63,8 @@ const useField = ({
   format,
   parse = defaultParse,
   formatOnBlur,
+  beforeSubmit,
+  afterSubmit,
   ...props
 }: UseField): UseFieldData => {
   const { registerField, unregisterField, change, getFieldValue, blur, focus, formOptions, ...rest } = useContext(FormManagerContext);
@@ -78,7 +80,9 @@ const useField = ({
       validate,
       subscription,
       internalId,
-      defaultValue
+      defaultValue,
+      beforeSubmit,
+      afterSubmit
     });
 
     return internalId;

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

@@ -1473,4 +1473,82 @@ describe('managerApi', () => {
       });
     });
   });
+
+  describe('after & before submit', () => {
+    it('calls after submit', () => {
+      const onSubmit = jest.fn();
+
+      const managerApi = createManagerApi({ onSubmit });
+
+      const afterSubmit1 = jest.fn();
+      const afterSubmit2 = jest.fn();
+      const afterSubmit3 = jest.fn();
+
+      managerApi().registerField({ name: 'field', internalId: '1', render: jest.fn(), afterSubmit: afterSubmit1 });
+      managerApi().registerField({ name: 'field', internalId: '2', render: jest.fn(), afterSubmit: afterSubmit2 });
+      managerApi().registerField({ name: 'field2', render: jest.fn(), afterSubmit: afterSubmit3 });
+
+      expect(afterSubmit1).not.toHaveBeenCalled();
+      expect(afterSubmit2).not.toHaveBeenCalled();
+      expect(afterSubmit3).not.toHaveBeenCalled();
+
+      managerApi().submit();
+
+      expect(afterSubmit1).toHaveBeenCalled();
+      expect(afterSubmit2).toHaveBeenCalled();
+      expect(afterSubmit3).toHaveBeenCalled();
+    });
+
+    it('calls before submit', () => {
+      const onSubmit = jest.fn();
+
+      const managerApi = createManagerApi({ onSubmit });
+
+      const beforeSubmit1 = jest.fn();
+      const beforeSubmit2 = jest.fn();
+      const beforeSubmit3 = jest.fn();
+
+      managerApi().registerField({ name: 'field', internalId: '1', render: jest.fn(), beforeSubmit: beforeSubmit1 });
+      managerApi().registerField({ name: 'field', internalId: '2', render: jest.fn(), beforeSubmit: beforeSubmit2 });
+      managerApi().registerField({ name: 'field2', render: jest.fn(), beforeSubmit: beforeSubmit3 });
+
+      expect(beforeSubmit1).not.toHaveBeenCalled();
+      expect(beforeSubmit2).not.toHaveBeenCalled();
+      expect(beforeSubmit3).not.toHaveBeenCalled();
+
+      managerApi().submit();
+
+      expect(beforeSubmit1).toHaveBeenCalled();
+      expect(beforeSubmit2).toHaveBeenCalled();
+      expect(beforeSubmit3).toHaveBeenCalled();
+
+      expect(onSubmit).toHaveBeenCalled();
+    });
+
+    it('bails out on before submit returning false', () => {
+      const onSubmit = jest.fn();
+
+      const managerApi = createManagerApi({ onSubmit });
+
+      const beforeSubmit1 = jest.fn();
+      const beforeSubmit2 = jest.fn().mockImplementation(() => false);
+      const beforeSubmit3 = jest.fn();
+
+      managerApi().registerField({ name: 'field', internalId: '1', render: jest.fn(), beforeSubmit: beforeSubmit1 });
+      managerApi().registerField({ name: 'field', internalId: '2', render: jest.fn(), beforeSubmit: beforeSubmit2 });
+      managerApi().registerField({ name: 'field2', render: jest.fn(), beforeSubmit: beforeSubmit3 });
+
+      expect(beforeSubmit1).not.toHaveBeenCalled();
+      expect(beforeSubmit2).not.toHaveBeenCalled();
+      expect(beforeSubmit3).not.toHaveBeenCalled();
+
+      managerApi().submit();
+
+      expect(beforeSubmit1).toHaveBeenCalled();
+      expect(beforeSubmit2).toHaveBeenCalled();
+      expect(beforeSubmit3).not.toHaveBeenCalled();
+
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+  });
 });

packages/form-state-manager/src/types/field-config.d.ts

@@ -4,6 +4,8 @@ import { FieldRender } from './manager-api';
 import { Validator } from './validate';
 
 export type IsEqual = (a: any, b: any) => boolean;
+export type AfterSubmit = () => void;
+export type BeforeSubmit = () => void | false;
 
 export interface FieldConfig extends AnyObject {
   name: string;
@@ -21,6 +23,8 @@ export interface FieldConfig extends AnyObject {
   initialValue?: any;
   defaultValue?: any;
   data?: AnyObject;
+  afterSubmit?: AfterSubmit;
+  beforeSubmit?: BeforeSubmit;
 }
 
 export default FieldConfig;

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

@@ -1,6 +1,6 @@
 import AnyObject, { AnyBooleanObject } from './any-object';
 import { FormEvent } from 'react';
-import FieldConfig, { IsEqual } from './field-config';
+import FieldConfig, { IsEqual, AfterSubmit, BeforeSubmit } from './field-config';
 import { FormValidator, Validator } from './validate';
 import { Subscription, Meta } from './use-field';
 
@@ -20,7 +20,7 @@ export type UpdateFieldState = (name: string, mutateState: (prevState: FieldStat
 
 export type Callback = () => void;
 export type Change = (name: string, value?: any) => void;
-export type HandleSubmit = (event: FormEvent) => void;
+export type HandleSubmit = (event?: FormEvent) => void;
 export type RegisterField = (field: FieldConfig) => void;
 export type UnregisterField = (field: Omit<FieldConfig, 'render'>) => void;
 export type GetState = () => ManagerState;
@@ -62,6 +62,8 @@ export type FieldRender = () => void;
 export interface ListenerField {
   render: FieldRender;
   subscription?: Subscription;
+  afterSubmit?: AfterSubmit;
+  beforeSubmit?: BeforeSubmit;
 }
 
 export interface FieldListenerFields {
@@ -178,6 +180,8 @@ export interface SubscriberConfig extends AnyObject {
   internalId?: number | string;
   isEqual?: IsEqual;
   validateFields?: Array<string>;
+  afterSubmit?: AfterSubmit;
+  beforeSubmit?: BeforeSubmit;
 }
 
 export interface CreateManagerApiConfig {

packages/form-state-manager/src/types/use-field.d.ts

@@ -1,6 +1,7 @@
 import { Validator } from './validate';
 import { DataType } from './data-types';
 import AnyObject from './any-object';
+import { AfterSubmit, BeforeSubmit } from './field-config';
 
 export interface Subscription {
   active?: boolean;
@@ -77,6 +78,8 @@ export interface UseField extends AnyObject {
   format?: Format;
   parse?: Parse;
   formatOnBlur?: boolean;
+  afterSubmit?: AfterSubmit;
+  beforeSubmit?: BeforeSubmit;
 }
 
 export default UseField;

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

@@ -463,9 +463,27 @@ const createManagerApi: CreateManagerApi = ({
     setFieldState(name, (prevState) => ({ ...prevState, meta: { ...prevState.meta, active: false } }));
   }
 
-  function handleSubmit(event: FormEvent): void {
-    event.preventDefault();
+  function handleSubmit(event?: FormEvent): void {
+    event && event.preventDefault && event.preventDefault();
+
+    let error = false;
+    state.registeredFields.forEach((name) =>
+      traverseObject(state.fieldListeners[name].fields, (field) => {
+        error = error || (field.beforeSubmit && field.beforeSubmit() === false);
+      })
+    );
+
+    if (error) {
+      return;
+    }
+
     config.onSubmit(state.values);
+
+    state.registeredFields.forEach((name) =>
+      traverseObject(state.fieldListeners[name].fields, (field) => {
+        field.afterSubmit && field.afterSubmit();
+      })
+    );
   }
 
   function isInitialized(name: string): boolean {
@@ -649,7 +667,9 @@ const createManagerApi: CreateManagerApi = ({
         ...state.fieldListeners[subscriberConfig.name]?.fields,
         [subscriberConfig.internalId || subscriberConfig.name]: {
           render: subscriberConfig.render,
-          subscription: subscriberConfig.subscription
+          subscription: subscriberConfig.subscription,
+          afterSubmit: subscriberConfig.afterSubmit,
+          beforeSubmit: subscriberConfig.beforeSubmit
         }
       }
     };