@vulcanjs/react-ui 0.7.2-alpha.5 → 0.8.0

package/dist/index.js

@@ -665,11 +665,14 @@ var LoadingButton = /* @__PURE__ */ __name((_a) => {
     className: `loading-button ${loading ? "loading-button-loading" : "loading-button-notloading"} ${className}`,
     onClick
   }, rest), /* @__PURE__ */ React4.createElement("span", {
-    style: wrapperStyle
+    style: wrapperStyle,
+    className: "loading-button-inner"
   }, /* @__PURE__ */ React4.createElement("span", {
-    style: labelStyle
+    style: labelStyle,
+    className: "loading-button-label"
   }, label || children), /* @__PURE__ */ React4.createElement("span", {
-    style: loadingStyle
+    style: loadingStyle,
+    className: "loading-button-loader"
   }, /* @__PURE__ */ React4.createElement(Components2.Loading, null))));
 }, "LoadingButton");
 
@@ -899,7 +902,7 @@ var useFormContext = /* @__PURE__ */ __name(() => {
 }, "useFormContext");
 
 // components/form/core/Form/Form.tsx
-import React7, { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import React7, { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 import { runCallbacks, getErrors } from "@vulcanjs/core";
 import { useIntlContext as useIntlContext2 } from "@vulcanjs/react-i18n";
 import { removeProperty } from "@vulcanjs/utils";
@@ -1553,6 +1556,46 @@ var useWarnOnUnsaved = /* @__PURE__ */ __name(({ isChanged, warnUnsavedChanges }
   });
 }, "useWarnOnUnsaved");
 
+// components/form/core/Form/hooks.ts
+import { useState as useState2 } from "react";
+var useSubmitCallbacks = /* @__PURE__ */ __name(() => {
+  const [callbacks, setCallbacks] = useState2({
+    submitFormCallbacks: [],
+    successFormCallbacks: [],
+    failureFormCallbacks: []
+  });
+  const addToSubmitForm = /* @__PURE__ */ __name((callback) => {
+    setCallbacks((cbs) => __spreadProps(__spreadValues({}, cbs), {
+      submitFormCallbacks: [
+        ...cbs.submitFormCallbacks,
+        callback
+      ]
+    }));
+  }, "addToSubmitForm");
+  const addToSuccessForm = /* @__PURE__ */ __name((callback) => {
+    setCallbacks((cbs) => __spreadProps(__spreadValues({}, cbs), {
+      successFormCallbacks: [
+        ...cbs.successFormCallbacks,
+        callback
+      ]
+    }));
+  }, "addToSuccessForm");
+  const addToFailureForm = /* @__PURE__ */ __name((callback) => {
+    setCallbacks((cbs) => __spreadProps(__spreadValues({}, cbs), {
+      failureFormCallbacks: [
+        ...cbs.failureFormCallbacks,
+        callback
+      ]
+    }));
+  }, "addToFailureForm");
+  return {
+    callbacks,
+    addToSuccessForm,
+    addToSubmitForm,
+    addToFailureForm
+  };
+}, "useSubmitCallbacks");
+
 // components/form/core/Form/Form.tsx
 function _extends4() {
   _extends4 = Object.assign || function(target) {
@@ -1569,6 +1612,8 @@ function _extends4() {
   return _extends4.apply(this, arguments);
 }
 __name(_extends4, "_extends");
+var NEW_FORM_TYPE = "new";
+var EDIT_FORM_TYPE = "edit";
 var compactParent = /* @__PURE__ */ __name((object, path) => {
   const parentPath = getParentPath(path);
   const compactIfArray = /* @__PURE__ */ __name((x) => Array.isArray(x) ? compact2(x) : x, "compactIfArray");
@@ -1581,8 +1626,8 @@ var compactObject = /* @__PURE__ */ __name((o) => omitBy(o, (f) => f === null ||
 var getInitialStateFromProps = /* @__PURE__ */ __name((nextProps) => {
   const schema = nextProps.schema || nextProps.model.schema;
   const convertedSchema = convertSchema(schema);
-  const formType = nextProps.document ? "edit" : "new";
-  const defaultValues = formType === "new" ? getDefaultValues(convertedSchema) : {};
+  const formType = nextProps.document ? EDIT_FORM_TYPE : NEW_FORM_TYPE;
+  const defaultValues = formType === NEW_FORM_TYPE ? getDefaultValues(convertedSchema) : {};
   const initialDocument = merge2({}, defaultValues, nextProps.prefilledProps, compactObject(nextProps.document));
   Object.keys(convertedSchema).forEach((key) => {
     let minCount = convertedSchema[key].minCount;
@@ -1645,7 +1690,7 @@ var getChildrenProps = /* @__PURE__ */ __name((props, state, options, callbacks)
     cancelCallback,
     revertCallback,
     document: currentDocument,
-    deleteDocument: formType === "edit" && showRemove && showDelete && deleteDocument || null
+    deleteDocument: formType === EDIT_FORM_TYPE && showRemove && showDelete && deleteDocument || null
   };
   const formLayoutProps = {
     formProps,
@@ -1719,11 +1764,10 @@ var Form = /* @__PURE__ */ __name((props) => {
   };
   const allProps = __spreadValues(__spreadValues({}, defaultProps), props);
   const defaultValues = {};
-  const submitFormCallbacks = [];
-  const successFormCallbacks = [];
-  const failureFormCallbacks = [];
   const intl = useIntlContext2();
-  const [errors, setErrors] = useState2([]);
+  const { callbacks, addToFailureForm, addToSubmitForm, addToSuccessForm } = useSubmitCallbacks();
+  const { submitFormCallbacks, successFormCallbacks, failureFormCallbacks } = callbacks;
+  const [errors, setErrors] = useState3([]);
   const throwError = /* @__PURE__ */ __name((error) => {
     let formErrors = getErrors(error);
     console.log(formErrors);
@@ -1735,49 +1779,18 @@ var Form = /* @__PURE__ */ __name((props) => {
   const clearFieldErrors = /* @__PURE__ */ __name((path) => {
     setErrors((prevErrors) => prevErrors.filter((error) => error.path !== path));
   }, "clearFieldErrors");
-  const [deletedValues, setDeletedValues] = useState2([]);
+  const [deletedValues, setDeletedValues] = useState3([]);
   const addToDeletedValues = /* @__PURE__ */ __name((name) => {
     setDeletedValues((prevDeletedValues) => [
       ...prevDeletedValues,
       name
     ]);
   }, "addToDeletedValues");
-  const [callbacks, setCallbacks] = useState2({
-    submitFormCallbacks: [],
-    successFormCallbacks: [],
-    failureFormCallbacks: []
-  });
-  const addToSubmitForm = /* @__PURE__ */ __name((callback) => {
-    setCallbacks((cbs) => __spreadValues({}, cbs));
-  }, "addToSubmitForm");
-  const addToSuccessForm = /* @__PURE__ */ __name((callback) => {
-    setCallbacks((cbs) => __spreadProps(__spreadValues({}, cbs), {
-      successFormCallbacks: [
-        ...cbs.successFormCallbacks,
-        callback
-      ]
-    }));
-  }, "addToSuccessForm");
-  const addToFailureForm = /* @__PURE__ */ __name((callback) => {
-    setCallbacks((cbs) => __spreadProps(__spreadValues({}, cbs), {
-      failureFormCallbacks: [
-        ...cbs.failureFormCallbacks,
-        callback
-      ]
-    }));
-  }, "addToFailureForm");
-  const clearFormCallbacks = /* @__PURE__ */ __name(() => {
-    setCallbacks({
-      submitFormCallbacks: [],
-      successFormCallbacks: [],
-      failureFormCallbacks: []
-    });
-  }, "clearFormCallbacks");
-  const [currentValues, setCurrentValues] = useState2({});
-  const submitFormContext = /* @__PURE__ */ __name((formType) => (event) => {
-    submitForm(formType)(event);
+  const [currentValues, setCurrentValues] = useState3({});
+  const submitFormContext = /* @__PURE__ */ __name(async (event) => {
+    await submitForm(event);
   }, "submitFormContext");
-  const [currentDocument, setCurrentDocument] = useState2(initialDocument);
+  const [currentDocument, setCurrentDocument] = useState3(initialDocument);
   const updateCurrentValues = /* @__PURE__ */ __name((newValues, options = {}) => {
     const { mode = "overwrite" } = options;
     const { changeCallback } = props;
@@ -1818,8 +1831,8 @@ var Form = /* @__PURE__ */ __name((props) => {
       props.refetch();
     }
   }, "refetchForm");
-  const [disabled, setDisabled] = useState2(!!props.disabled);
-  const [success, setSuccess] = useState2(false);
+  const [disabled, setDisabled] = useState3(!!props.disabled);
+  const [success, setSuccess] = useState3(false);
   const clearForm = /* @__PURE__ */ __name((options = {}) => {
     const { document: optionsDocument } = options;
     const document = optionsDocument ? merge2({}, props.prefilledProps, optionsDocument) : null;
@@ -1830,21 +1843,21 @@ var Form = /* @__PURE__ */ __name((props) => {
     setDisabled(false);
   }, "clearForm");
   const newMutationSuccessCallback = /* @__PURE__ */ __name(function(result) {
-    mutationSuccessCallback(result, "new");
+    mutationSuccessCallback(result, NEW_FORM_TYPE);
   }, "newMutationSuccessCallback");
   const editMutationSuccessCallback = /* @__PURE__ */ __name(function(result) {
-    mutationSuccessCallback(result, "edit");
+    mutationSuccessCallback(result, EDIT_FORM_TYPE);
   }, "editMutationSuccessCallback");
   const formRef = useRef2(null);
   const mutationSuccessCallback = /* @__PURE__ */ __name(function(result, mutationType) {
     setDisabled(false);
     setSuccess(true);
-    if (mutationType === "new")
+    if (mutationType === NEW_FORM_TYPE)
       refetchForm();
     let { document } = result;
     if (formRef.current) {
       clearForm({
-        document: mutationType === "edit" ? document : void 0
+        document: mutationType === EDIT_FORM_TYPE ? document : void 0
       });
     }
     document = runCallbacks({
@@ -1883,16 +1896,7 @@ var Form = /* @__PURE__ */ __name((props) => {
         form: void 0
       });
   }, "mutationErrorCallback");
-  const submitForm = /* @__PURE__ */ __name((formType) => async (event) => {
-    var _a, _b;
-    event && event.preventDefault();
-    event && event.stopPropagation();
-    const { contextName } = props;
-    if (disabled) {
-      return;
-    }
-    setErrors([]);
-    setDisabled(true);
+  const getSubmitData = /* @__PURE__ */ __name(() => {
     let data = getData({
       replaceIntlFields: true,
       addExtraFields: false,
@@ -1907,42 +1911,64 @@ var Form = /* @__PURE__ */ __name((props) => {
     if (props.submitCallback) {
       data = props.submitCallback(data) || data;
     }
-    if (formType === "new") {
-      try {
-        const result = await createDocument({
-          input: {
-            data,
-            contextName
-          }
-        });
-        if ((_a = result.errors) == null ? void 0 : _a.length) {
-          mutationErrorCallback(document1, result.errors[0]);
-        } else {
-          newMutationSuccessCallback(result);
+    return data;
+  }, "getSubmitData");
+  const submitFormCreate = /* @__PURE__ */ __name(async (event) => {
+    var _a;
+    event && event.preventDefault();
+    event && event.stopPropagation();
+    const { contextName } = props;
+    if (disabled) {
+      return;
+    }
+    setErrors([]);
+    setDisabled(true);
+    const data = getSubmitData();
+    try {
+      const result = await createDocument({
+        input: {
+          data,
+          contextName
         }
-      } catch (error) {
-        mutationErrorCallback(document1, error);
+      });
+      if ((_a = result.errors) == null ? void 0 : _a.length) {
+        mutationErrorCallback(document1, result.errors[0]);
+      } else {
+        newMutationSuccessCallback(result);
       }
-    } else {
-      try {
-        const documentId = currentDocument._id;
-        const result = await updateDocument({
-          input: {
-            id: documentId,
-            data,
-            contextName
-          }
-        });
-        if ((_b = result.errors) == null ? void 0 : _b.length) {
-          mutationErrorCallback(document1, result.errors[0]);
-        } else {
-          editMutationSuccessCallback(result);
+    } catch (error) {
+      mutationErrorCallback(document1, error);
+    }
+  }, "submitFormCreate");
+  const submitFormUpdate = /* @__PURE__ */ __name(async (event) => {
+    var _a;
+    event && event.preventDefault();
+    event && event.stopPropagation();
+    const { contextName } = props;
+    if (disabled) {
+      return;
+    }
+    setErrors([]);
+    setDisabled(true);
+    const data = getSubmitData();
+    try {
+      const documentId = currentDocument._id;
+      const result = await updateDocument({
+        input: {
+          id: documentId,
+          data,
+          contextName
         }
-      } catch (error) {
-        mutationErrorCallback(document1, error);
+      });
+      if ((_a = result.errors) == null ? void 0 : _a.length) {
+        mutationErrorCallback(document1, result.errors[0]);
+      } else {
+        editMutationSuccessCallback(result);
       }
+    } catch (error) {
+      mutationErrorCallback(document1, error);
     }
-  }, "submitForm");
+  }, "submitFormUpdate");
   const deleteDocumentWithConfirm = /* @__PURE__ */ __name(() => {
     const document = currentDocument;
     const documentId = props.document._id;
@@ -1971,13 +1997,14 @@ var Form = /* @__PURE__ */ __name((props) => {
   }, "deleteDocumentWithConfirm");
   const { successComponent, document: document1, currentUser, model, warnUnsavedChanges } = props;
   const FormComponents = useVulcanComponents();
-  const formType1 = document1 ? "edit" : "new";
-  const mutableFields = formType1 === "edit" ? getEditableFields(schema, currentUser, initialDocument) : getInsertableFields(schema, currentUser);
+  const formType = document1 ? EDIT_FORM_TYPE : NEW_FORM_TYPE;
+  const submitForm = formType === NEW_FORM_TYPE ? submitFormCreate : submitFormUpdate;
+  const mutableFields = formType === EDIT_FORM_TYPE ? getEditableFields(schema, currentUser, initialDocument) : getInsertableFields(schema, currentUser);
   const { formLayoutProps, formGroupProps } = getChildrenProps(props, {
     disabled,
     currentDocument
   }, {
-    formType: formType1
+    formType
   }, {
     deleteDocument: deleteDocumentWithConfirm
   });
@@ -1991,7 +2018,7 @@ var Form = /* @__PURE__ */ __name((props) => {
       clearForm,
       refetchForm,
       isChanged,
-      submitForm: submitFormContext(formType1),
+      submitForm: submitFormContext,
       addToDeletedValues,
       updateCurrentValues,
       getDocument: () => currentDocument,
@@ -2000,7 +2027,6 @@ var Form = /* @__PURE__ */ __name((props) => {
       addToSubmitForm,
       addToSuccessForm,
       addToFailureForm,
-      clearFormCallbacks,
       errors,
       currentValues,
       deletedValues,