feat: exporta função de clear Form

demo/FormExamples.jsx

@@ -129,6 +129,8 @@ export function FormExamples() {
         });
       }}
       transform={(formData, _, update) => {
+        console.log('transform >> formData:', formData);
+
         formData.__v = formData.__v ? formData.__v + 1 : 1;
 
         update(formData);
@@ -141,14 +143,17 @@ export function FormExamples() {
       validations={validations}
       customActions={
         useCustomActions
-          ? (isSubmiting, { onCancel, resetForm }) => (
+          ? (isSubmiting, { onCancel, resetForm, clearForm }) => (
               <div>
-                <button type="submit" className="btn btn-success">
+                <button type="submit" className="btn btn-success me-2">
                   Custom save
                 </button>
-                <button type="button" className="btn btn-secondary" onClick={() => resetForm()}>
+                <button type="button" className="btn btn-secondary me-2" onClick={() => resetForm()}>
                   Custom reset
                 </button>
+                <button type="button" className="btn btn-info" onClick={() => clearForm()}>
+                  Custom clear
+                </button>
               </div>
             )
           : undefined
@@ -757,6 +762,7 @@ export function FormExamples() {
       />
 
       <ResetForm />
+      <ClearForm />
     </Form>
   );
 }
@@ -765,7 +771,7 @@ const ResetForm = () => {
   const formControl = useFormControl();
 
   const reset = () => {
-    console.log('reset form');
+    console.log('reset form - resets to initial state');
 
     formControl.resetFormData();
   };
@@ -777,6 +783,22 @@ const ResetForm = () => {
   );
 };
 
+const ClearForm = () => {
+  const formControl = useFormControl();
+
+  const clear = () => {
+    console.log('clear form - sets empty state');
+
+    formControl.clearFormData();
+  };
+
+  return (
+    <button type="button" className="btn btn-outline-info ms-2 mb-3" onClick={clear}>
+      Clear form
+    </button>
+  );
+};
+
 const FormSwitchExample = () => {
   const autocompleteField1FormControl = useFormControl('autocompleteField1');
 

src/forms/Form.jsx

@@ -22,6 +22,7 @@ export function Form({
   const formRef = useRef(null);
   const [isSubmiting, setIsSubmiting] = useState(false);
 
+  /* Resets to initial values/state */
   function resetForm() {
     if (formRef.current && formRef.current.classList) {
       formRef.current.classList.remove('was-validated');
@@ -30,6 +31,14 @@ export function Form({
     formState.reset();
   }
 
+  function clearForm() {
+    if (formRef.current && formRef.current.classList) {
+      formRef.current.classList.remove('was-validated');
+    }
+
+    formState.clear();
+  }
+
   function handleSubmit(e) {
     e.preventDefault();
     e.stopPropagation();
@@ -76,7 +85,17 @@ export function Form({
     <form {...formProps}>
       <FormContext.Provider value={formState}>{children}</FormContext.Provider>
 
-      <FormActions {...{ submitLabel, cancelLabel, onCancel: handleCancel, isSubmiting, customActions, resetForm }} />
+      <FormActions
+        {...{
+          submitLabel,
+          cancelLabel,
+          onCancel: handleCancel,
+          isSubmiting,
+          customActions,
+          resetForm,
+          clearForm,
+        }}
+      />
     </form>
   );
 }

src/forms/FormActions.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { isFunction } from 'js-var-type';
 
-export function FormActions({ submitLabel, cancelLabel, onCancel, isSubmiting, customActions, resetForm }) {
+export function FormActions({ submitLabel, cancelLabel, clearForm, onCancel, isSubmiting, customActions, resetForm }) {
   if (customActions) {
-    return isFunction(customActions) ? customActions(isSubmiting, { onCancel, resetForm }) : customActions;
+    return isFunction(customActions) ? customActions(isSubmiting, { clearForm, onCancel, resetForm }) : customActions;
   }
 
   return (
@@ -22,6 +22,7 @@ export function FormActions({ submitLabel, cancelLabel, onCancel, isSubmiting, c
 FormActions.propTypes = {
   submitLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   cancelLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  clearForm: PropTypes.func,
   onCancel: PropTypes.func.isRequired,
   isSubmiting: PropTypes.bool,
   customActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),

src/forms/helpers/useForm.js

@@ -44,15 +44,30 @@ function useFormState(initialState, { onChange, transform }) {
         return nextFormState;
       });
     },
+    /* Resets to initial values/state */
     resetState() {
       setIsDirty(false);
       setFormState(initialState);
     },
+    /* Sets empty state */
+    clearState() {
+      setIsDirty(true);
+
+      setFormState(() => {
+        const nextFormState = {};
+
+        setTimeout(() => {
+          transformRef.current(nextFormState);
+        });
+
+        return nextFormState;
+      });
+    },
   };
 }
 
 export function useForm(initialState, { validations, onChange, transform }) {
-  const { getState, updateState, resetState } = useFormState(initialState, { onChange, transform });
+  const { getState, updateState, resetState, clearState } = useFormState(initialState, { onChange, transform });
   const [submitAttempted, setSubmitAttempted] = useState(false);
   const [, setRefreshForm] = useState(false);
   const { getAllKeys: getElementNames, get: getElementRefs, push: registerElementRef } = useArrayValueMap();
@@ -125,6 +140,9 @@ export function useForm(initialState, { validations, onChange, transform }) {
     getValue(name) {
       return getValueByPath(formState, name);
     },
+    clear() {
+      clearState();
+    },
     reset() {
       resetState();
       setSubmitAttempted(false);

src/forms/helpers/useFormControl.js

@@ -48,7 +48,8 @@ export function useFormControl(name, type) {
     handleOnChange,
     register,
     getFormData: () => formState.getFormData(),
-    resetFormData: () => formState.reset(),
+    resetFormData: () => formState.reset() /* Resets to initial values/state */,
+    clearFormData: () => formState.clear() /* Sets empty state */,
     isValid: () => formState.getValidationMessage(name) === '',
     getFormSubmitedAttempted: () => formState.getSubmitedAttempted(),
   };