feat(forms): allow form data transformation after each input change

Author: assisrafael

demo/FormExamples.jsx

@@ -21,6 +21,11 @@ export function FormExamples() {
         // return Promise.resolve();
         reset();
       }}
+      transform={(formData) => {
+        formData.__v = formData.__v ? formData.__v + 1 : 1;
+
+        return formData;
+      }}
       onCancel={() => console.log('onCancel')}
       customValidation={true}
       validations={{

src/forms/Form.jsx

@@ -15,8 +15,9 @@ export function Form({
   onChange,
   submitLabel,
   validations,
+  transform,
 }) {
-  const formState = useForm(initialValues, validations, onChange);
+  const formState = useForm(initialValues, { validations, onChange, transform });
   const formRef = useRef(null);
 
   function resetForm() {
@@ -69,17 +70,19 @@ Form.defaultProps = {
   cancelLabel: 'Cancel',
   customValidation: false,
   submitLabel: 'Submit',
+  transform: (data) => data,
 };
 
 Form.propTypes = {
   cancelLabel: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  customValidation: PropTypes.bool,
   customActions: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  customValidation: PropTypes.bool,
   initialValues: PropTypes.object,
   onCancel: PropTypes.func,
-  onSubmit: PropTypes.func.isRequired,
   onChange: PropTypes.func,
+  onSubmit: PropTypes.func.isRequired,
   submitLabel: PropTypes.string,
+  transform: PropTypes.func,
   validations: PropTypes.object,
 };

src/forms/helpers/useForm.js

@@ -4,7 +4,7 @@ import { setValueByPath, deepClone, getValueByPath } from '../../utils/getters-s
 import { validateFormElement } from './form-helpers';
 import { debounce } from 'lodash-es';
 
-export function useForm(initialState, validations, onChange) {
+export function useForm(initialState, { validations, onChange, transform }) {
   const [formState, setFormState] = useState(initialState);
   const [submitAttempted, setSubmitAttempted] = useState(false);
   const { getAllKeys: getElementNames, get: getElementRefs, push: registerElementRef } = useArrayValueMap();
@@ -31,7 +31,7 @@ export function useForm(initialState, validations, onChange) {
       }
     },
     update(name, value) {
-      setFormState((prevFormState) => nextState(prevFormState, name, value));
+      setFormState((prevFormState) => transform(nextState(prevFormState, name, value), name));
 
       if (validations) {
         this.validateForm(nextState(formState, name, value));