feat(forms2): useFormEffect allows a "name" argument for watching data changes

Author: assisrafael

demo/Form2Examples.jsx

@@ -115,8 +115,8 @@ function FormArrayOfObjects() {
 function FormObserver() {
   const [state, setState] = useState(0);
 
-  useFormEffect((formData) => {
-    console.log('FormObserver.formData :>> ', formData);
+  useFormEffect('Obj', (data) => {
+    console.log('FormObserver :>> ', data);
     setState((p) => p + 1);
   });
 

src/forms2/helpers/useFormEffect.jsx

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

src/forms2/helpers/useFormHelper.jsx

@@ -34,9 +34,9 @@ export class FormHelper {
   }
 
   notifyListeners(formData) {
-    for (const listener of this.listeners) {
+    for (const { name, observerFn } of this.listeners) {
       setTimeout(() => {
-        listener.observerFn(formData);
+        observerFn(getValueByPath(formData, name));
       }, 0);
     }
   }
@@ -59,13 +59,22 @@ export class FormHelper {
     this.listeners = this.listeners.filter(({ id }) => id !== listenerId);
   }
 
-  subscribe(observerFn) {
+  subscribe(_name, _observerFn) {
     const listenerId = this.nextListenerId;
 
+    let name = _name,
+      observerFn = _observerFn;
+
+    if (!_observerFn) {
+      observerFn = name;
+      name = '';
+    }
+
     this.nextListenerId += 1;
 
     this.listeners.push({
       id: listenerId,
+      name,
       observerFn,
     });
 
@@ -99,8 +108,8 @@ export function useFormHelper(initialValues, { debounceWait, transform, onChange
     register(name, formControl) {
       formHelper.current.register(name, formControl);
     },
-    subscribe(observerFn) {
-      return formHelper.current.subscribe(observerFn);
+    subscribe(name, observerFn) {
+      return formHelper.current.subscribe(name, observerFn);
     },
   };
 }