@wavemaker-ai/react-runtime 1.0.0-rc.647499 → 1.0.0-rc.647565

package/components/data/form/base-form/hooks/useFormSubmission.js

@@ -1,291 +1,231 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFormSubmission = useFormSubmission;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _react = require("react");
-var _lodashEs = require("lodash-es");
-var _utils = require("../../../utils");
-var _utils2 = require("../../../table/utils");
-var _utils3 = require("../utils");
-var _props = require("../props");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * Hook for managing form submission logic
- *
- * Handles:
- * - Form data transformation before submit
- * - Submit and delete operations
- * - Success/error callbacks
- * - Data output notification
- */
-function useFormSubmission(_ref) {
-  var formName = _ref.formName,
-    formfields = _ref.formfields,
-    externalFormDataref = _ref.formDataref,
-    getValues = _ref.getValues,
-    formType = _ref.formType,
-    validateFieldsOnSubmit = _ref.validateFieldsOnSubmit,
-    resetFormData = _ref.resetFormData,
-    toggleMessage = _ref.toggleMessage,
-    setShowViewMode = _ref.setShowViewMode,
-    listener = _ref.listener,
-    datasource = _ref.datasource,
-    formSubmit = _ref.formSubmit,
-    widgettype = _ref.widgettype,
-    onBeforeSubmit = _ref.onBeforeSubmit,
-    onSubmit = _ref.onSubmit,
-    onResult = _ref.onResult,
-    onSuccess = _ref.onSuccess,
-    onError = _ref.onError,
-    insertmessage = _ref.insertmessage,
-    updatemessage = _ref.updatemessage,
-    deletemessage = _ref.deletemessage,
-    postmessage = _ref.postmessage,
-    errormessage = _ref.errormessage,
-    messagelayout = _ref.messagelayout,
-    standalone = _ref.standalone;
-  // Check if this form uses prefixed field registration
-  var hasPrefixedFields = (0, _props.usesPrefixedFields)(formType);
-
-  // Use the external ref directly for reading in handleFormSubmit
-  // Note: updateFormData is now defined in index.tsx to ensure stable ref access
-  var formDataref = externalFormDataref;
-  var notifyDataOutput = (0, _react.useCallback)(function (data) {
-    var _listener$onChange;
-    var cleanedData = (0, _utils2.cleanRowData)(data);
-    listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, formName, {
-      dataoutput: cleanedData
-    });
-  }, [formName]);
-  var updateFormDataOutput = (0, _react.useCallback)(function (data, formWidgets) {
-    Object.keys(formWidgets).forEach(function (key) {
-      if (!(0, _lodashEs.find)(data, {
-        key: key
-      })) {
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { useCallback } from "react";
+import { find } from "lodash-es";
+import { findOperationType } from "../../../utils";
+import { cleanRowData } from "../../../table/utils";
+import {
+  filterTableColumns,
+  filterArraysByRenderedForms,
+  mergeWithFormDataRef,
+  transformToNestedObject
+} from "../utils";
+import { usesPrefixedFields } from "../props";
+function useFormSubmission({
+  formName,
+  formfields,
+  formDataref: externalFormDataref,
+  getValues,
+  formType,
+  validateFieldsOnSubmit,
+  resetFormData,
+  toggleMessage,
+  setShowViewMode,
+  listener,
+  datasource,
+  formSubmit,
+  widgettype,
+  onBeforeSubmit,
+  onSubmit,
+  onResult,
+  onSuccess,
+  onError,
+  insertmessage,
+  updatemessage,
+  deletemessage,
+  postmessage,
+  errormessage,
+  messagelayout,
+  standalone
+}) {
+  const hasPrefixedFields = usesPrefixedFields(formType);
+  const formDataref = externalFormDataref;
+  const notifyDataOutput = useCallback(
+    (data) => {
+      var _a;
+      const cleanedData = cleanRowData(data);
+      (_a = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a.call(listener, formName, { dataoutput: cleanedData });
+    },
+    [formName]
+  );
+  const updateFormDataOutput = useCallback((data, formWidgets) => {
+    Object.keys(formWidgets).forEach((key) => {
+      if (!find(data, { key })) {
         data[key] = formWidgets[key];
       }
     });
     return data;
   }, []);
-  var prepareSubmitData = (0, _react.useCallback)(function (formData) {
-    var _datasource$name, _datasource$name$toLo;
-    if ((datasource === null || datasource === void 0 || (_datasource$name = datasource.name) === null || _datasource$name === void 0 || (_datasource$name$toLo = _datasource$name.toLowerCase) === null || _datasource$name$toLo === void 0 ? void 0 : _datasource$name$toLo.call(_datasource$name)) !== "crudvariable") {
-      return formData;
-    }
-    var primaryKeys = datasource.execute("getPrimaryKey");
-    var operation = (0, _utils.findOperationType)(formData, primaryKeys);
-    return {
-      inputFields: formData,
-      operation: operation === "insert" ? "create" : operation
-    };
-  }, [datasource]);
-  var getSuccessMessage = (0, _react.useCallback)(function (data) {
-    if (widgettype === "live-form") {
-      var operationType = data.operationType;
-      return operationType === "insert" && insertmessage || operationType === "update" && updatemessage || operationType === "delete" && deletemessage || postmessage;
-    }
-    return postmessage;
-  }, [widgettype, insertmessage, updatemessage, deletemessage, postmessage]);
-  var onResultCb = (0, _react.useCallback)(/*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(data, status, event) {
-      var errorMsg;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (onResult) {
-              onResult(event, {}, data);
-            }
-            if (status) {
-              onSuccess === null || onSuccess === void 0 || onSuccess(event, {}, data);
-              if (messagelayout === "Inline") {
-                toggleMessage(true, "Data saved successfully", "success");
-              }
-            } else {
-              onError === null || onError === void 0 || onError(event, {}, data);
-              if (messagelayout === "Inline") {
-                errorMsg = errormessage || data;
-                toggleMessage(true, errorMsg, "error");
-              }
-            }
-          case 2:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x, _x2, _x3) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), [onResult, onSuccess, onError, messagelayout, errormessage, toggleMessage]);
-  var handleSubmitSuccess = (0, _react.useCallback)(function (data, resolve) {
-    if (standalone) {
-      onResultCb(data === null || data === void 0 ? void 0 : data.params, "success");
-      var message = getSuccessMessage(data);
-      toggleMessage(true, message, "success");
-      resolve === null || resolve === void 0 || resolve(data);
-    } else {
-      var operationType = data.operationType;
-      if (widgettype === "live-form" && (operationType === "insert" || operationType === "delete")) {
-        resetFormData(data);
-        setShowViewMode(false);
+  const prepareSubmitData = useCallback(
+    (formData) => {
+      var _a, _b;
+      if (((_b = (_a = datasource == null ? void 0 : datasource.name) == null ? void 0 : _a.toLowerCase) == null ? void 0 : _b.call(_a)) !== "crudvariable") {
+        return formData;
       }
-      onResultCb(data === null || data === void 0 ? void 0 : data.params, "success");
-      var _message = getSuccessMessage(data);
-      toggleMessage(true, _message, "success");
-      resolve(data);
-    }
-  }, [widgettype, resetFormData, setShowViewMode, onResultCb, getSuccessMessage, toggleMessage]);
-  var handleSubmitError = (0, _react.useCallback)(function (error, reject) {
-    var errorMsg = errormessage || (error === null || error === void 0 ? void 0 : error.message) || error;
-    onResultCb(errorMsg, "");
-    reject(error);
-  }, [errormessage, onResultCb]);
-  var executeFormSubmit = (0, _react.useCallback)(/*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(formData, operationType) {
-      var firstParam;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            firstParam = prepareSubmitData(formData);
-            return _context2.abrupt("return", new Promise(function (resolve, reject) {
-              formSubmit(firstParam, function (data) {
-                return handleSubmitSuccess(data, resolve);
-              }, function (error) {
-                return handleSubmitError(error, reject);
-              }, operationType);
-            }));
-          case 2:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function (_x4, _x5) {
-      return _ref3.apply(this, arguments);
-    };
-  }(), [prepareSubmitData, formSubmit, handleSubmitSuccess, handleSubmitError]);
-  var handleFormSubmit = (0, _react.useCallback)(/*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(data, e, operationType) {
-      var _listener$Widgets;
-      var formWidgets, filteredData, filteredByRendered, mergedData, result, formData, cleanedFormData, cleanedMergedData;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            e = e || new Event("submit");
-
-            // For forms with prefixed fields, unwrap data from form name wrapper
-            if (hasPrefixedFields && formName && data[formName] && (0, _typeof2["default"])(data[formName]) === "object") {
-              data = _objectSpread({}, data[formName]);
-            }
-            formWidgets = listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 || (_listener$Widgets = _listener$Widgets[formName]) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets.dataoutput;
-            if (formWidgets && Object.keys(formWidgets).length > 0) {
-              data = updateFormDataOutput(data, formWidgets);
-            }
-
-            // Filter and transform data
-            filteredData = (0, _utils3.filterTableColumns)(data);
-            filteredByRendered = (0, _utils3.filterArraysByRenderedForms)(filteredData, listener === null || listener === void 0 ? void 0 : listener.Widgets);
-            mergedData = (0, _utils3.mergeWithFormDataRef)(filteredByRendered, formDataref === null || formDataref === void 0 ? void 0 : formDataref.current); // Execute onBeforeSubmit hook
-            if (!onBeforeSubmit) {
-              _context3.next = 13;
-              break;
-            }
-            _context3.next = 10;
-            return onBeforeSubmit(e, {}, mergedData);
-          case 10:
-            result = _context3.sent;
-            if (!(result === false)) {
-              _context3.next = 13;
-              break;
-            }
-            return _context3.abrupt("return");
-          case 13:
-            // Transform flat data to nested structure
-            formData = (0, _utils3.transformToNestedObject)(mergedData, formfields, formName); // Clean internal properties before submission
-            cleanedFormData = (0, _utils2.cleanRowData)(formData);
-            cleanedMergedData = (0, _utils2.cleanRowData)(mergedData); // Handle form submission with cleaned data
-            notifyDataOutput(cleanedMergedData);
-            onSubmit === null || onSubmit === void 0 || onSubmit(e, {}, cleanedFormData);
-            _context3.next = 20;
-            return executeFormSubmit(cleanedFormData, operationType);
-          case 20:
-          case "end":
-            return _context3.stop();
+      const primaryKeys = datasource.execute("getPrimaryKey");
+      const operation = findOperationType(formData, primaryKeys);
+      return {
+        inputFields: formData,
+        operation: operation === "insert" ? "create" : operation
+      };
+    },
+    [datasource]
+  );
+  const getSuccessMessage = useCallback(
+    (data) => {
+      if (widgettype === "live-form") {
+        const { operationType } = data;
+        return operationType === "insert" && insertmessage || operationType === "update" && updatemessage || operationType === "delete" && deletemessage || postmessage;
+      }
+      return postmessage;
+    },
+    [widgettype, insertmessage, updatemessage, deletemessage, postmessage]
+  );
+  const onResultCb = useCallback(
+    async (data, status, event) => {
+      if (onResult) {
+        onResult(event, {}, data);
+      }
+      if (status) {
+        onSuccess == null ? void 0 : onSuccess(event, {}, data);
+        if (messagelayout === "Inline") {
+          toggleMessage(true, "Data saved successfully", "success");
         }
-      }, _callee3);
-    }));
-    return function (_x6, _x7, _x8) {
-      return _ref4.apply(this, arguments);
-    };
-  }(), [hasPrefixedFields, formName, formfields, onBeforeSubmit, onSubmit, updateFormDataOutput, notifyDataOutput, executeFormSubmit]);
-  var submit = (0, _react.useCallback)(/*#__PURE__*/function () {
-    var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(e) {
-      var valid, data;
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            e === null || e === void 0 || e.preventDefault();
-            e === null || e === void 0 || e.stopPropagation();
-            _context4.next = 4;
-            return validateFieldsOnSubmit();
-          case 4:
-            valid = _context4.sent;
-            if (valid) {
-              _context4.next = 7;
-              break;
-            }
-            return _context4.abrupt("return");
-          case 7:
-            data = getValues();
-            handleFormSubmit(data, new Event("submit"));
-            return _context4.abrupt("return", true);
-          case 10:
-          case "end":
-            return _context4.stop();
+      } else {
+        onError == null ? void 0 : onError(event, {}, data);
+        if (messagelayout === "Inline") {
+          const errorMsg = errormessage || data;
+          toggleMessage(true, errorMsg, "error");
         }
-      }, _callee4);
-    }));
-    return function (_x9) {
-      return _ref5.apply(this, arguments);
-    };
-  }(), [validateFieldsOnSubmit, getValues, handleFormSubmit]);
-  var deleteEntry = (0, _react.useCallback)(/*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(e) {
-      var isValid, data;
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
-          case 0:
-            e === null || e === void 0 || e.preventDefault();
-            e === null || e === void 0 || e.stopPropagation();
-            _context5.next = 4;
-            return validateFieldsOnSubmit();
-          case 4:
-            isValid = _context5.sent;
-            if (isValid) {
-              data = getValues();
-              handleFormSubmit(data, new Event("submit"), "delete");
-            }
-          case 6:
-          case "end":
-            return _context5.stop();
+      }
+    },
+    [onResult, onSuccess, onError, messagelayout, errormessage, toggleMessage]
+  );
+  const handleSubmitSuccess = useCallback(
+    (data, resolve) => {
+      if (standalone) {
+        onResultCb(data == null ? void 0 : data.params, "success");
+        const message = getSuccessMessage(data);
+        toggleMessage(true, message, "success");
+        resolve == null ? void 0 : resolve(data);
+      } else {
+        const { operationType } = data;
+        if (widgettype === "live-form" && (operationType === "insert" || operationType === "delete")) {
+          resetFormData(data);
+          setShowViewMode(false);
         }
-      }, _callee5);
-    }));
-    return function (_x0) {
-      return _ref6.apply(this, arguments);
-    };
-  }(), [validateFieldsOnSubmit, getValues, handleFormSubmit]);
+        onResultCb(data == null ? void 0 : data.params, "success");
+        const message = getSuccessMessage(data);
+        toggleMessage(true, message, "success");
+        resolve(data);
+      }
+    },
+    [widgettype, resetFormData, setShowViewMode, onResultCb, getSuccessMessage, toggleMessage]
+  );
+  const handleSubmitError = useCallback(
+    (error, reject) => {
+      const errorMsg = errormessage || (error == null ? void 0 : error.message) || error;
+      onResultCb(errorMsg, "");
+      reject(error);
+    },
+    [errormessage, onResultCb]
+  );
+  const executeFormSubmit = useCallback(
+    async (formData, operationType) => {
+      const firstParam = prepareSubmitData(formData);
+      return new Promise((resolve, reject) => {
+        formSubmit(
+          firstParam,
+          (data) => handleSubmitSuccess(data, resolve),
+          (error) => handleSubmitError(error, reject),
+          operationType
+        );
+      });
+    },
+    [prepareSubmitData, formSubmit, handleSubmitSuccess, handleSubmitError]
+  );
+  const handleFormSubmit = useCallback(
+    async (data, e, operationType) => {
+      var _a, _b;
+      e = e || new Event("submit");
+      if (hasPrefixedFields && formName && data[formName] && typeof data[formName] === "object") {
+        data = __spreadValues({}, data[formName]);
+      }
+      const formWidgets = (_b = (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[formName]) == null ? void 0 : _b.dataoutput;
+      if (formWidgets && Object.keys(formWidgets).length > 0) {
+        data = updateFormDataOutput(data, formWidgets);
+      }
+      const filteredData = filterTableColumns(data);
+      const filteredByRendered = filterArraysByRenderedForms(filteredData, listener == null ? void 0 : listener.Widgets);
+      const mergedData = mergeWithFormDataRef(filteredByRendered, formDataref == null ? void 0 : formDataref.current);
+      if (onBeforeSubmit) {
+        const result = await onBeforeSubmit(e, {}, mergedData);
+        if (result === false) return;
+      }
+      const formData = transformToNestedObject(mergedData, formfields, formName);
+      const cleanedFormData = cleanRowData(formData);
+      const cleanedMergedData = cleanRowData(mergedData);
+      notifyDataOutput(cleanedMergedData);
+      onSubmit == null ? void 0 : onSubmit(e, {}, cleanedFormData);
+      await executeFormSubmit(cleanedFormData, operationType);
+    },
+    [
+      hasPrefixedFields,
+      formName,
+      formfields,
+      onBeforeSubmit,
+      onSubmit,
+      updateFormDataOutput,
+      notifyDataOutput,
+      executeFormSubmit
+    ]
+  );
+  const submit = useCallback(
+    async (e) => {
+      e == null ? void 0 : e.preventDefault();
+      e == null ? void 0 : e.stopPropagation();
+      const valid = await validateFieldsOnSubmit();
+      if (!valid) {
+        return;
+      }
+      const data = getValues();
+      handleFormSubmit(data, new Event("submit"));
+      return true;
+    },
+    [validateFieldsOnSubmit, getValues, handleFormSubmit]
+  );
+  const deleteEntry = useCallback(
+    async (e) => {
+      e == null ? void 0 : e.preventDefault();
+      e == null ? void 0 : e.stopPropagation();
+      const isValid = await validateFieldsOnSubmit();
+      if (isValid) {
+        const data = getValues();
+        handleFormSubmit(data, new Event("submit"), "delete");
+      }
+    },
+    [validateFieldsOnSubmit, getValues, handleFormSubmit]
+  );
   return {
-    submit: submit,
-    deleteEntry: deleteEntry,
-    handleFormSubmit: handleFormSubmit
+    submit,
+    deleteEntry,
+    handleFormSubmit
   };
-}
+}
+export {
+  useFormSubmission
+};