feat(forms2): include form data observer custom hook

Author: assisrafael

demo/Form2Examples.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
-import React, { useEffect } from 'react';
-import { Form2, FormInput2, FormSelect2, FormSwitch2, useFormControl2 } from '../dist/main';
+import React, { useEffect, useState } from 'react';
+import { Form2, FormInput2, FormSelect2, FormSwitch2, useFormControl2, useFormEffect } from '../dist/main';
 
 export function Form2Examples() {
   return (
@@ -75,6 +75,11 @@ export function Form2Examples() {
           <label htmlFor="">Version</label>
           <FormVersion />
         </div>
+
+        <div className="form-group">
+          <label htmlFor="">Observer</label>
+          <FormObserver />
+        </div>
         <button className="btn btn-success">Submit</button>
       </Form2>
     </div>
@@ -106,3 +111,14 @@ function FormArrayOfObjects() {
 
   return (getValue() || []).map((v, index) => <FormInput2 key={index} name={`arrObj[${index}].o`} />);
 }
+
+function FormObserver() {
+  const [state, setState] = useState(0);
+
+  useFormEffect((formData) => {
+    console.log('FormObserver.formData :>> ', formData);
+    setState((p) => p + 1);
+  });
+
+  return <div>{state}</div>;
+}

src/forms2/helpers/useFormEffect.jsx

@@ -0,0 +1,13 @@
+import { useContext, useEffect } from 'react';
+import { FormContext } from './useFormHelper';
+
+export function useFormEffect(observerFn) {
+  const formHelper = useContext(FormContext);
+
+  useEffect(() => {
+    const unsubscribe = formHelper.subscribe(observerFn);
+
+    return () => unsubscribe();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

src/forms2/helpers/useFormHelper.jsx

@@ -11,6 +11,8 @@ export class FormHelper {
     this.formData = { ...initialValues };
     this.formControls = new Map();
     this.callHooks = debounce((fn) => fn(this.formData), debounceWait);
+    this.listeners = [];
+    this.nextListenerId = 0;
   }
 
   register(name, formControl) {
@@ -25,7 +27,18 @@ export class FormHelper {
 
   notify(name, value, hooks) {
     setValueByPath(this.formData, name, value);
-    this.callHooks(hooks);
+    this.callHooks((formData) => {
+      hooks(formData);
+      this.notifyListeners(formData);
+    });
+  }
+
+  notifyListeners(formData) {
+    for (const listener of this.listeners) {
+      setTimeout(() => {
+        listener.observerFn(formData);
+      }, 0);
+    }
   }
 
   updateFormData(data) {
@@ -41,6 +54,25 @@ export class FormHelper {
       }
     });
   }
+
+  unsubscribe(listenerId) {
+    this.listeners = this.listeners.filter(({ id }) => id !== listenerId);
+  }
+
+  subscribe(observerFn) {
+    const listenerId = this.nextListenerId;
+
+    this.nextListenerId += 1;
+
+    this.listeners.push({
+      id: listenerId,
+      observerFn,
+    });
+
+    return () => {
+      this.unsubscribe(listenerId);
+    };
+  }
 }
 
 export function useFormHelper(initialValues, { debounceWait, transform, onChange }) {
@@ -67,5 +99,8 @@ export function useFormHelper(initialValues, { debounceWait, transform, onChange
     register(name, formControl) {
       formHelper.current.register(name, formControl);
     },
+    subscribe(observerFn) {
+      return formHelper.current.subscribe(observerFn);
+    },
   };
 }

src/forms2/index.jsx

@@ -3,3 +3,4 @@ export * from './FormInput';
 export * from './FormSelect';
 export * from './FormSwitch';
 export * from './helpers/useFormControl';
+export * from './helpers/useFormEffect';