feat(forms): allow data change monitoring events

Author: assisrafael

demo/FormExamples.jsx

@@ -15,6 +15,7 @@ export function FormExamples() {
   return (
     <Form
       initialValues={{ textField: 'abc' }}
+      onChange={console.info}
       onSubmit={(formData, reset) => {
         console.log('onSubmit', formData);
         // return Promise.resolve();

package.json

@@ -36,6 +36,7 @@
     "eslint": "^6.8.0",
     "eslint-plugin-react": "^7.19.0",
     "jest": "^25.2.3",
+    "lodash-es": "^4.17.15",
     "prettier": "^2.0.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/forms/Form.jsx

@@ -12,10 +12,11 @@ export function Form({
   initialValues,
   onCancel,
   onSubmit,
+  onChange,
   submitLabel,
   validations,
 }) {
-  const formState = useForm(initialValues, validations);
+  const formState = useForm(initialValues, validations, onChange);
   const formRef = useRef(null);
 
   function resetForm() {
@@ -72,12 +73,13 @@ Form.defaultProps = {
 
 Form.propTypes = {
   cancelLabel: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   customValidation: PropTypes.bool,
-  customActions: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+  customActions: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   initialValues: PropTypes.object,
   onCancel: PropTypes.func,
   onSubmit: PropTypes.func.isRequired,
+  onChange: PropTypes.func,
   submitLabel: PropTypes.string,
   validations: PropTypes.object,
 };

src/forms/FormAutocomplete.jsx

@@ -42,12 +42,12 @@ export function FormAutocomplete({
         ref={searchInputRef}
         className={`form-control ${isFocused ? '' : 'd-none'} ${controlFeedback}`}
         onChange={handleInputChange.bind(null, {
-          update(_, value) {
-            setSearchValue(value);
-            onSearch(value);
+          update(_, nextSearchValue) {
+            setSearchValue(nextSearchValue);
+            onSearch(nextSearchValue);
             open();
 
-            if (value) {
+            if (nextSearchValue && value) {
               setValue(null);
             }
           },
@@ -56,7 +56,7 @@ export function FormAutocomplete({
           if (openOnFocus) {
             setTimeout(() => {
               open();
-            }, 250);
+            }, 100);
           }
         }}
         onBlur={() => {
@@ -110,7 +110,7 @@ export function FormAutocomplete({
           setTimeout(() => {
             setFocus(false);
             close();
-          }, 250);
+          }, 100);
         }}
         template={template}
         onTouchStart={() => setIgnoreBlur(true)}

src/forms/helpers/useForm.js

@@ -1,13 +1,22 @@
-import { useState } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useArrayValueMap } from '../../utils/useValueMap';
 import { setValueByPath, deepClone, getValueByPath } from '../../utils/getters-setters';
 import { validateFormElement } from './form-helpers';
+import { debounce } from 'lodash-es';
 
-export function useForm(initialState, validations) {
+export function useForm(initialState, validations, onChange) {
   const [formState, setFormState] = useState(initialState);
   const [submitAttempted, setSubmitAttempted] = useState(false);
   const { getAllKeys: getElementNames, get: getElementRefs, push: registerElementRef } = useArrayValueMap();
 
+  if (onChange) {
+    const _onChange = useCallback(debounce(onChange, 500), []);
+
+    useEffect(() => {
+      _onChange(formState);
+    }, [formState]);
+  }
+
   return {
     register(name, elementRef) {
       registerElementRef(name, elementRef);