@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.314

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

@@ -1,238 +1,132 @@
-"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
- */
+import { useRef, useCallback, useState, useMemo } from "react";
+import isEqual from "lodash-es/isEqual";
+import {
+  getFormTypeConfig,
+  isChildFormType
+} from "../props";
 function isEmpty(value) {
-  return value === undefined || value === null || value === "";
+  return value === void 0 || 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)({
+function useFormDataSync({
+  reset,
+  formType,
+  formName
+}) {
+  const config = useMemo(() => getFormTypeConfig(formType), [formType]);
+  const isChildForm = isChildFormType(formType);
+  const shouldWrapData = config.dataResetStrategy === "wrapped";
+  const [currentFormData, setCurrentFormData] = useState(null);
+  const stateRef = 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) {
+  const lastSyncedExternalDataRef = useRef(null);
+  const applyResetStrategy = useCallback(
+    (data) => {
+      return shouldWrapData && formName ? { [formName]: data } : data;
+    },
+    [shouldWrapData, formName]
+  );
+  const updateState = useCallback((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) {
+  const withUpdateLock = useCallback((operation) => {
     stateRef.current.isUpdating = true;
     operation();
-    setTimeout(function () {
+    setTimeout(() => {
       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;
+  const shouldSync = useCallback(
+    (incomingData) => {
+      if (!incomingData || incomingData._wmListItemId) return false;
+      if (stateRef.current.isUpdating) return false;
+      const { state, currentData } = stateRef.current;
+      if (state === "UNINITIALIZED" || !currentData) {
+        return true;
+      }
+      if (isEqual(incomingData, currentData)) {
+        return false;
+      }
+      const incomingKeys = Object.keys(incomingData);
+      const currentKeys = Object.keys(currentData);
+      if (!isChildForm) {
+        const hasNewFields = incomingKeys.some((key) => !(key in currentData));
+        if (hasNewFields && lastSyncedExternalDataRef.current !== null) {
+          const isSameAsLastSynced = isEqual(incomingData, lastSyncedExternalDataRef.current);
+          if (isSameAsLastSynced) {
+            return false;
+          }
         }
+        return hasNewFields;
       }
-
-      // 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) {
+      const incomingIsStale = currentKeys.some((key) => {
+        const cur = currentData[key];
+        const inc = incomingData[key];
+        const curHasValue = !isEmpty(cur);
+        const incHasValue = !isEmpty(inc);
+        if (curHasValue && !incHasValue) return true;
+        if (curHasValue && incHasValue && !isEqual(cur, inc)) return true;
+        if (!curHasValue && incHasValue) return true;
+        return false;
+      });
+      return !incomingIsStale;
+    },
+    [isChildForm]
+  );
+  const syncFormData = useCallback(
+    (data) => {
+      if (!shouldSync(data)) return;
+      lastSyncedExternalDataRef.current = data;
+      withUpdateLock(() => {
+        reset(applyResetStrategy(data));
+        updateState(data, "SYNCED");
+      });
+    },
+    [shouldSync, withUpdateLock, reset, applyResetStrategy, updateState, formName, isChildForm]
+  );
+  const resetFormData = useCallback(
+    (data) => {
+      if (!data || typeof data !== "object" || Array.isArray(data)) return;
+      lastSyncedExternalDataRef.current = data;
+      withUpdateLock(() => {
+        reset(applyResetStrategy(data));
+        updateState(data, "SYNCED");
+      });
+    },
+    [withUpdateLock, reset, applyResetStrategy, updateState]
+  );
+  const clearFormData = useCallback(
+    (cleanedData) => {
+      const dataToReset = cleanedData || {};
+      withUpdateLock(() => {
+        reset(applyResetStrategy(dataToReset));
+        updateState(dataToReset, "SYNCED");
+      });
+    },
+    [withUpdateLock, reset, applyResetStrategy, updateState]
+  );
+  const markCurrentData = useCallback((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 () {
+  const isUpdating = useCallback(() => {
     return stateRef.current.isUpdating;
   }, []);
   return {
-    currentFormData: currentFormData,
-    syncFormData: syncFormData,
-    resetFormData: resetFormData,
-    clearFormData: clearFormData,
-    markCurrentData: markCurrentData,
-    isUpdating: isUpdating
+    currentFormData,
+    syncFormData,
+    resetFormData,
+    clearFormData,
+    markCurrentData,
+    isUpdating
   };
-}
+}
+export {
+  useFormDataSync
+};

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

@@ -1,175 +1,123 @@
-"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();
+import { useState, useCallback } from "react";
+import { cleanNullValues, setWidgetFormData } from "../utils";
+import { usesPrefixedFields } from "../props";
+function useFormOperations({
+  formName,
+  formfields,
+  formRef,
+  formReff,
+  formType,
+  fullDataPath,
+  parentFormDataContext,
+  clearFormData,
+  resetFormData,
+  trigger,
+  submit,
+  listener,
+  widgetFormType,
+  debouncedFilter
+}) {
+  const hasPrefixedFields = usesPrefixedFields(formType);
+  const [showViewMode, setShowViewMode] = useState(false);
+  const formreset = useCallback(async () => {
+    const cleanedData = {};
+    const formNamePrefix = `${formName}.`;
+    Object.keys(formfields).forEach((key) => {
+      var _a, _b;
+      if (formfields[key].formName !== formName) return;
+      if (key.endsWith("_formWidget")) return;
+      let fieldKey = key;
+      if (hasPrefixedFields) {
+        if (key.startsWith(formNamePrefix)) {
+          fieldKey = key.substring(formNamePrefix.length);
+        } else {
+          return;
+        }
       }
-    }, _callee);
-  })), [formName, formfields, hasPrefixedFields, clearFormData, trigger, fullDataPath, parentFormDataContext, formRef, formReff]);
-
-  /**
-   * Creates a new entry by resetting the form
-   */
-  var create = (0, _react.useCallback)(function () {
+      if (formfields[key].readonly || formfields[key].readOnly || formfields[key].disabled) {
+        cleanedData[fieldKey] = formfields[key].defaultvalue || formfields[key].value;
+      } else {
+        cleanedData[fieldKey] = "";
+      }
+      const isRange = ((_a = formfields[key]) == null ? void 0 : _a.isRange) === true || ((_b = formfields[key]) == null ? void 0 : _b.isRange) === "true";
+      if (widgetFormType === "live-filter" && isRange) {
+        cleanedData[`${fieldKey}_maxWidget`] = "";
+      }
+    });
+    clearFormData(cleanedData);
+    trigger();
+    if (fullDataPath && (parentFormDataContext == null ? void 0 : parentFormDataContext.onChildDataChange)) {
+      parentFormDataContext.onChildDataChange(fullDataPath, cleanedData);
+    }
+    const el = formRef.current;
+    if (el) {
+      el.dispatchEvent(new CustomEvent("wmformreset", { bubbles: true }));
+    }
+    if (formReff == null ? void 0 : formReff.current) {
+      Object.values(formReff.current).forEach((childForm) => {
+        var _a;
+        return (_a = childForm == null ? void 0 : childForm.formreset) == null ? void 0 : _a.call(childForm);
+      });
+    }
+  }, [
+    formName,
+    formfields,
+    hasPrefixedFields,
+    clearFormData,
+    trigger,
+    fullDataPath,
+    parentFormDataContext,
+    formRef,
+    formReff
+  ]);
+  const create = useCallback(() => {
     formreset();
     formreset();
     setShowViewMode(false);
   }, [formreset]);
-
-  /**
-   * Loads data for editing
-   */
-  var edit = (0, _react.useCallback)(function (data) {
-    if (data) {
-      var cleanedData = (0, _utils.cleanNullValues)(data);
+  const edit = useCallback(
+    (data) => {
+      if (data) {
+        const cleanedData = cleanNullValues(data);
+        resetFormData(cleanedData);
+      }
+      setShowViewMode(false);
+    },
+    [resetFormData]
+  );
+  const setFormData = useCallback(
+    (data) => {
+      if (!data || typeof data !== "object" || Array.isArray(data)) {
+        return;
+      }
+      const cleanedData = 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 () {
+      setWidgetFormData(listener, formName, cleanedData);
+      if (widgetFormType === "live-filter" && debouncedFilter) {
+        debouncedFilter();
+      }
+    },
+    [resetFormData, formName, widgetFormType, debouncedFilter]
+  );
+  const saveAndNew = useCallback(() => {
     submit();
     clearFormData({});
   }, [submit, clearFormData]);
-
-  /**
-   * Saves the form and switches to view mode
-   */
-  var saveAndView = (0, _react.useCallback)(function () {
+  const saveAndView = useCallback(() => {
     submit();
     setShowViewMode(true);
   }, [submit]);
   return {
-    formreset: formreset,
-    create: create,
-    edit: edit,
-    setFormData: setFormData,
-    saveAndNew: saveAndNew,
-    saveAndView: saveAndView,
-    showViewMode: showViewMode,
-    setShowViewMode: setShowViewMode
+    formreset,
+    create,
+    edit,
+    setFormData,
+    saveAndNew,
+    saveAndView,
+    showViewMode,
+    setShowViewMode
   };
-}
+}
+export {
+  useFormOperations
+};