@wavemaker-ai/react-runtime 1.0.0-rc.309

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

@@ -0,0 +1,238 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormDataSync = useFormDataSync;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _props = require("../props");
+/**
+ * Sync State Machine (Simplified with Origin Tracking)
+ *
+ * The circular sync problem is now handled by origin tracking in the parent context.
+ * Child forms skip sync when the data change originated from a child edit.
+ *
+ * States:
+ * - UNINITIALIZED: No data has been synced yet (accepts any incoming data)
+ * - SYNCED: Data has been synced from external source (accepts new/changed data)
+ *
+ * Transitions:
+ * - UNINITIALIZED -> SYNCED: First sync from external source
+ * - SYNCED -> SYNCED: New data from external source (when different)
+ */
+
+/**
+ * Checks if a value is considered "empty" for sync purposes
+ */
+function isEmpty(value) {
+  return value === undefined || value === null || value === "";
+}
+
+/**
+ * Form Data Sync Manager
+ *
+ * Coordinates bidirectional data flow in nested forms:
+ * - DOWN: Props/widget data initializes forms
+ * - UP: User edits propagate to parent forms via events
+ * - DOWN: Context updates flow to child forms
+ *
+ * Key behaviors:
+ * 1. First sync always accepted (initialization)
+ * 2. Identical data ignored (no-op)
+ * 3. User clears block stale external data until genuinely new data arrives
+ * 4. Child forms have additional staleness checks for parent sync delays
+ */
+function useFormDataSync(_ref) {
+  var reset = _ref.reset,
+    formType = _ref.formType,
+    formName = _ref.formName;
+  var config = (0, _react.useMemo)(function () {
+    return (0, _props.getFormTypeConfig)(formType);
+  }, [formType]);
+  var isChildForm = (0, _props.isChildFormType)(formType);
+  var shouldWrapData = config.dataResetStrategy === "wrapped";
+  var _useState = (0, _react.useState)(null),
+    currentFormData = _useState[0],
+    setCurrentFormData = _useState[1];
+  var stateRef = (0, _react.useRef)({
+    state: "UNINITIALIZED",
+    currentData: null,
+    isUpdating: false
+  });
+
+  // Track the last externally synced data (in its original nested form)
+  // This prevents re-syncing the same data after a reset
+  var lastSyncedExternalDataRef = (0, _react.useRef)(null);
+
+  /**
+   * Applies the data reset strategy based on form type
+   */
+  var applyResetStrategy = (0, _react.useCallback)(function (data) {
+    return shouldWrapData && formName ? (0, _defineProperty2["default"])({}, formName, data) : data;
+  }, [shouldWrapData, formName]);
+
+  /**
+   * Updates internal state after a sync operation
+   */
+  var updateState = (0, _react.useCallback)(function (data, newState) {
+    stateRef.current.currentData = data;
+    stateRef.current.state = newState;
+    setCurrentFormData(data);
+  }, []);
+
+  /**
+   * Guards against re-entrant sync operations
+   */
+  var withUpdateLock = (0, _react.useCallback)(function (operation) {
+    stateRef.current.isUpdating = true;
+    operation();
+    setTimeout(function () {
+      stateRef.current.isUpdating = false;
+    }, 0);
+  }, []);
+
+  /**
+   * Determines if incoming data should trigger a sync
+   *
+   * With origin tracking, circular sync is handled at the effect level.
+   * This function only needs to check for valid/changed data.
+   */
+  var shouldSync = (0, _react.useCallback)(function (incomingData) {
+    // Guard: Invalid data or re-entrant call
+    if (!incomingData || incomingData._wmListItemId) return false;
+    if (stateRef.current.isUpdating) return false;
+    var _stateRef$current = stateRef.current,
+      state = _stateRef$current.state,
+      currentData = _stateRef$current.currentData;
+
+    // State: UNINITIALIZED - accept any valid data
+    if (state === "UNINITIALIZED" || !currentData) {
+      return true;
+    }
+
+    // Guard: Identical data
+    if ((0, _isEqual["default"])(incomingData, currentData)) {
+      return false;
+    }
+
+    // Check for meaningful changes
+    var incomingKeys = Object.keys(incomingData);
+    var currentKeys = Object.keys(currentData);
+    if (!isChildForm) {
+      // Standalone forms: only sync if incoming data has new fields
+      // Never overwrite existing fields - user edits take precedence
+      var hasNewFields = incomingKeys.some(function (key) {
+        return !(key in currentData);
+      });
+
+      // CRITICAL FIX: After a form reset, the currentData has flattened keys (e.g., "EmployeeAddress.dateofbirth")
+      // but incomingData has nested keys (e.g., "EmployeeAddress"). This causes hasNewFields to be true
+      // even though the data hasn't actually changed. We need to check if the incoming data is the same
+      // as what was last synced (before flattening).
+      if (hasNewFields && lastSyncedExternalDataRef.current !== null) {
+        var isSameAsLastSynced = (0, _isEqual["default"])(incomingData, lastSyncedExternalDataRef.current);
+        if (isSameAsLastSynced) {
+          // Data is the same as what was already synced - don't re-sync after reset
+          return false;
+        }
+      }
+
+      // For standalone forms with data already synced, only allow new fields
+      // Don't allow changes to existing fields (would overwrite user edits)
+      return hasNewFields;
+    }
+
+    // Child forms: reject stale parent data that hasn't caught up with user edits
+    var incomingIsStale = currentKeys.some(function (key) {
+      var cur = currentData[key];
+      var inc = incomingData[key];
+      var curHasValue = !isEmpty(cur);
+      var incHasValue = !isEmpty(inc);
+
+      // Current has value that incoming lacks or differs
+      if (curHasValue && !incHasValue) return true;
+      if (curHasValue && incHasValue && !(0, _isEqual["default"])(cur, inc)) return true;
+
+      // User intentionally cleared a field (current is empty, incoming has value)
+      // This is stale because user's clear action should be preserved
+      if (!curHasValue && incHasValue) return true;
+      return false;
+    });
+    return !incomingIsStale;
+  }, [isChildForm]);
+
+  /**
+   * Sync data from external source (props, context, events)
+   * With origin tracking, circular sync is blocked at effect level
+   */
+  var syncFormData = (0, _react.useCallback)(function (data) {
+    if (!shouldSync(data)) return;
+
+    // Store the original external data before flattening for future comparisons
+    lastSyncedExternalDataRef.current = data;
+    withUpdateLock(function () {
+      reset(applyResetStrategy(data));
+      updateState(data, "SYNCED");
+    });
+  }, [shouldSync, withUpdateLock, reset, applyResetStrategy, updateState, formName, isChildForm]);
+
+  /**
+   * Force set form data (bypasses staleness guards)
+   * Use for explicit user actions: edit(), setFormData()
+   */
+  var resetFormData = (0, _react.useCallback)(function (data) {
+    if (!data || (0, _typeof2["default"])(data) !== "object" || Array.isArray(data)) return;
+
+    // Update the last synced reference so future syncs compare against this data
+    lastSyncedExternalDataRef.current = data;
+    withUpdateLock(function () {
+      reset(applyResetStrategy(data));
+      updateState(data, "SYNCED");
+    });
+  }, [withUpdateLock, reset, applyResetStrategy, updateState]);
+
+  /**
+   * Clear form to empty/default state
+   * Use for: formreset(), create(), saveAndNew()
+   */
+  var clearFormData = (0, _react.useCallback)(function (cleanedData) {
+    var dataToReset = cleanedData || {};
+    withUpdateLock(function () {
+      reset(applyResetStrategy(dataToReset));
+      updateState(dataToReset, "SYNCED");
+    });
+  }, [withUpdateLock, reset, applyResetStrategy, updateState]);
+
+  /**
+   * Update tracked data after user edits (from watch callback or child changes)
+   * Keeps internal ref in sync without triggering React state update.
+   * This prevents re-render cascades on every keystroke - the ref is sufficient
+   * for staleness checks. React state (currentFormData) only updates on
+   * external sync operations (syncFormData, resetFormData, clearFormData).
+   */
+  var markCurrentData = (0, _react.useCallback)(function (data) {
+    stateRef.current.currentData = data;
+    if (stateRef.current.state === "UNINITIALIZED" && data && Object.keys(data).length > 0) {
+      stateRef.current.state = "SYNCED";
+    }
+  }, []);
+
+  /**
+   * Check if a sync operation is in progress
+   */
+  var isUpdating = (0, _react.useCallback)(function () {
+    return stateRef.current.isUpdating;
+  }, []);
+  return {
+    currentFormData: currentFormData,
+    syncFormData: syncFormData,
+    resetFormData: resetFormData,
+    clearFormData: clearFormData,
+    markCurrentData: markCurrentData,
+    isUpdating: isUpdating
+  };
+}

package/components/data/form/base-form/hooks/useFormOperations.d.ts

@@ -0,0 +1,13 @@
+import { UseFormOperationsOptions, UseFormOperationsReturn } from "../props";
+/**
+ * Hook for managing form CRUD operations
+ *
+ * Handles:
+ * - Form reset (clearing all fields)
+ * - Create new entry
+ * - Edit existing entry
+ * - Set form data programmatically
+ * - Save and new / Save and view actions
+ * - View mode state management
+ */
+export declare function useFormOperations({ formName, formfields, formRef, formReff, formType, fullDataPath, parentFormDataContext, clearFormData, resetFormData, trigger, submit, listener, widgetFormType, debouncedFilter, }: UseFormOperationsOptions): UseFormOperationsReturn;

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

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormOperations = useFormOperations;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _utils = require("../utils");
+var _props = require("../props");
+/**
+ * Hook for managing form CRUD operations
+ *
+ * Handles:
+ * - Form reset (clearing all fields)
+ * - Create new entry
+ * - Edit existing entry
+ * - Set form data programmatically
+ * - Save and new / Save and view actions
+ * - View mode state management
+ */
+function useFormOperations(_ref) {
+  var formName = _ref.formName,
+    formfields = _ref.formfields,
+    formRef = _ref.formRef,
+    formReff = _ref.formReff,
+    formType = _ref.formType,
+    fullDataPath = _ref.fullDataPath,
+    parentFormDataContext = _ref.parentFormDataContext,
+    clearFormData = _ref.clearFormData,
+    resetFormData = _ref.resetFormData,
+    trigger = _ref.trigger,
+    submit = _ref.submit,
+    listener = _ref.listener,
+    widgetFormType = _ref.widgetFormType,
+    debouncedFilter = _ref.debouncedFilter;
+  // Check if this form uses prefixed field registration (DIRECT_CHILD, LIST_CHILD)
+  var hasPrefixedFields = (0, _props.usesPrefixedFields)(formType);
+  var _useState = (0, _react.useState)(false),
+    showViewMode = _useState[0],
+    setShowViewMode = _useState[1];
+
+  /**
+   * Resets all form fields to empty/default values
+   * Also resets all registered child forms
+   */
+  var formreset = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var cleanedData, formNamePrefix, el;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          cleanedData = {};
+          formNamePrefix = "".concat(formName, ".");
+          Object.keys(formfields).forEach(function (key) {
+            var _formfields$key, _formfields$key2;
+            if (formfields[key].formName !== formName) return;
+
+            // Skip _formWidget suffixed keys - they are duplicates
+            if (key.endsWith("_formWidget")) return;
+
+            // For forms with prefixed field registration, handle keys correctly
+            var fieldKey = key;
+            if (hasPrefixedFields) {
+              if (key.startsWith(formNamePrefix)) {
+                fieldKey = key.substring(formNamePrefix.length);
+              } else {
+                return;
+              }
+            }
+
+            // Do not reset for readonly and disabled fields
+            if (formfields[key].readonly || formfields[key].readOnly || formfields[key].disabled) {
+              cleanedData[fieldKey] = formfields[key].defaultvalue || formfields[key].value;
+            } else {
+              cleanedData[fieldKey] = "";
+            }
+            var isRange = ((_formfields$key = formfields[key]) === null || _formfields$key === void 0 ? void 0 : _formfields$key.isRange) === true || ((_formfields$key2 = formfields[key]) === null || _formfields$key2 === void 0 ? void 0 : _formfields$key2.isRange) === "true";
+            if (widgetFormType === "live-filter" && isRange) {
+              cleanedData["".concat(fieldKey, "_maxWidget")] = "";
+            }
+          });
+          clearFormData(cleanedData);
+          trigger();
+
+          // For child forms, emit cleared data UP to parent form
+          if (fullDataPath && parentFormDataContext !== null && parentFormDataContext !== void 0 && parentFormDataContext.onChildDataChange) {
+            parentFormDataContext.onChildDataChange(fullDataPath, cleanedData);
+          }
+
+          // Dispatch event for uncontrolled widgets
+          el = formRef.current;
+          if (el) {
+            el.dispatchEvent(new CustomEvent("wmformreset", {
+              bubbles: true
+            }));
+          }
+
+          // Reset all registered child forms
+          if (formReff !== null && formReff !== void 0 && formReff.current) {
+            Object.values(formReff.current).forEach(function (childForm) {
+              var _childForm$formreset;
+              return childForm === null || childForm === void 0 || (_childForm$formreset = childForm.formreset) === null || _childForm$formreset === void 0 ? void 0 : _childForm$formreset.call(childForm);
+            });
+          }
+        case 9:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [formName, formfields, hasPrefixedFields, clearFormData, trigger, fullDataPath, parentFormDataContext, formRef, formReff]);
+
+  /**
+   * Creates a new entry by resetting the form
+   */
+  var create = (0, _react.useCallback)(function () {
+    formreset();
+    formreset();
+    setShowViewMode(false);
+  }, [formreset]);
+
+  /**
+   * Loads data for editing
+   */
+  var edit = (0, _react.useCallback)(function (data) {
+    if (data) {
+      var cleanedData = (0, _utils.cleanNullValues)(data);
+      resetFormData(cleanedData);
+    }
+    setShowViewMode(false);
+  }, [resetFormData]);
+
+  /**
+   * Sets form data programmatically
+   */
+  var setFormData = (0, _react.useCallback)(function (data) {
+    if (!data || (0, _typeof2["default"])(data) !== "object" || Array.isArray(data)) {
+      return;
+    }
+    var cleanedData = (0, _utils.cleanNullValues)(data);
+    resetFormData(cleanedData);
+    (0, _utils.setWidgetFormData)(listener, formName, cleanedData);
+    if (widgetFormType === "live-filter" && debouncedFilter) {
+      debouncedFilter();
+    }
+  }, [resetFormData, formName, widgetFormType, debouncedFilter]);
+
+  /**
+   * Saves the form and creates a new entry
+   */
+  var saveAndNew = (0, _react.useCallback)(function () {
+    submit();
+    clearFormData({});
+  }, [submit, clearFormData]);
+
+  /**
+   * Saves the form and switches to view mode
+   */
+  var saveAndView = (0, _react.useCallback)(function () {
+    submit();
+    setShowViewMode(true);
+  }, [submit]);
+  return {
+    formreset: formreset,
+    create: create,
+    edit: edit,
+    setFormData: setFormData,
+    saveAndNew: saveAndNew,
+    saveAndView: saveAndView,
+    showViewMode: showViewMode,
+    setShowViewMode: setShowViewMode
+  };
+}

package/components/data/form/base-form/hooks/useFormSubmission.d.ts

@@ -0,0 +1,11 @@
+import { UseFormSubmissionOptions, UseFormSubmissionReturn } from "../props";
+/**
+ * Hook for managing form submission logic
+ *
+ * Handles:
+ * - Form data transformation before submit
+ * - Submit and delete operations
+ * - Success/error callbacks
+ * - Data output notification
+ */
+export declare 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, }: UseFormSubmissionOptions): UseFormSubmissionReturn;