feat(forms): disabled action buttons while submiting data

Author: assisrafael

README.md

@@ -6,8 +6,6 @@ A React implementation of Boostrap v4 components.
 
 ## Roadmap
 
-- [] UrlLinkedTabs
-- [] UrlLinkedPagination
 - [] Smartable
 - [] Form Range
 - [] Form generation based on a configuration option
@@ -19,7 +17,6 @@ A React implementation of Boostrap v4 components.
 - [] Keyboard navigation on FormAutocomplete
 - [] Automatic input id
 - [] Subforms
-- [] Button with loading/saving state
 - [] Sidebar
 - [] Stepper
 - [] Tree

demo/FormExamples.jsx

@@ -25,10 +25,14 @@ export function FormExamples() {
         dateField: new Date().toISOString(),
       }}
       onChange={console.info}
-      onSubmit={(formData, reset) => {
+      onSubmit={(formData) => {
         console.log('onSubmit', formData);
-        // return Promise.resolve();
-        reset();
+
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve();
+          }, 1000);
+        });
       }}
       transform={(formData, pathUpdated, update) => {
         formData.__v = formData.__v ? formData.__v + 1 : 1;

src/forms/Form.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FormContext } from './helpers/form-helpers';
 import { useForm } from './helpers/useForm';
@@ -19,6 +19,7 @@ export function Form({
 }) {
   const formState = useForm(initialValues, { validations, onChange, transform });
   const formRef = useRef(null);
+  const [isSubmiting, setIsSubmiting] = useState(false);
 
   function resetForm() {
     formRef.current.classList.remove('was-validated');
@@ -36,11 +37,20 @@ export function Form({
       return;
     }
 
-    const res = onSubmit(formState.getFormData(), resetForm);
+    setIsSubmiting(true);
+    const submitResponse = onSubmit(formState.getFormData(), resetForm);
 
-    if (res && res.then) {
-      res.then(resetForm);
+    let submitPromise = Promise.resolve();
+
+    if (submitResponse && submitResponse.then) {
+      submitPromise = submitResponse.then(() => {
+        resetForm();
+      });
     }
+
+    submitPromise.finally(() => {
+      setIsSubmiting(false);
+    });
   }
 
   function handleCancel() {
@@ -61,7 +71,7 @@ export function Form({
     <form {...formProps}>
       <FormContext.Provider value={formState}>{children}</FormContext.Provider>
 
-      {customActions || <FormActions {...{ submitLabel, cancelLabel, onCancel: handleCancel }} />}
+      <FormActions {...{ submitLabel, cancelLabel, onCancel: handleCancel, isSubmiting, customActions }} />
     </form>
   );
 }

src/forms/FormActions.jsx

@@ -1,21 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isFunction } from '../utils/types';
+
+export function FormActions({ submitLabel, cancelLabel, onCancel, isSubmiting, customActions }) {
+  if (customActions) {
+    return isFunction(customActions) ? customActions(isSubmiting) : customActions;
+  }
 
-export function FormActions({ submitLabel, cancelLabel, onCancel }) {
   return (
     <div className="form-actions">
-      <button type="submit" className="btn btn-primary mr-1">
-        {submitLabel}
+      <button type="submit" className="btn btn-primary mr-1" disabled={isSubmiting}>
+        {isFunction(submitLabel) ? submitLabel(isSubmiting) : submitLabel}
       </button>
-      <button type="button" className="btn btn-secondary" onClick={onCancel}>
+      <button type="button" className="btn btn-secondary" onClick={onCancel} disabled={isSubmiting}>
         {cancelLabel}
+        {isFunction(cancelLabel) ? cancelLabel(isSubmiting) : cancelLabel}
       </button>
     </div>
   );
 }
 
 FormActions.propTypes = {
-  submitLabel: PropTypes.string,
-  cancelLabel: PropTypes.string,
+  submitLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  cancelLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   onCancel: PropTypes.func.isRequired,
+  isSubmiting: PropTypes.bool,
+  customActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 };