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

package/components/data/table/live-table/index.js

@@ -1,121 +1,99 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmLiveTable = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _react = _interopRequireWildcard(require("react"));
-var _withBaseWrapper = _interopRequireDefault(require("../../../../higherOrder/withBaseWrapper"));
-var _dialog = _interopRequireDefault(require("../../../dialogs/dialog"));
-var _dialogBody = require("@wavemaker-ai/react-runtime/components/dialogs/dialog-body");
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _WidgetProvider = require("@wavemaker-ai/react-runtime/context/WidgetProvider");
-var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement;
-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; }
-/** Named export WmTable is wrapped with withStandalone → displayName `withStandalone(WmTable)`. */
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState,
+  useMemo,
+  useEffect,
+  useCallback,
+  Children,
+  cloneElement,
+  isValidElement
+} from "react";
+import withBaseWrapper from "../../../../higherOrder/withBaseWrapper";
+import WmDialog from "../../../dialogs/dialog";
+import { WmDialogBody } from "../../../dialogs/dialog-body";
+import Box from "@mui/material/Box";
+import { useWidgetProxy } from "../../../../context/WidgetProvider";
+import withStandalone from "../../../../higherOrder/withStandalone";
 function isWmTableChildType(displayName) {
   console.log("displayName", displayName);
   return displayName === "WmTable" || displayName === "WmTableStandalone" || displayName === "withStandalone(WmTable)";
 }
-var WmLiveTable = function WmLiveTable(props) {
-  var _useState = (0, _react.useState)(false),
-    isDialogOpen = _useState[0],
-    setIsDialogOpen = _useState[1];
-  var _useState2 = (0, _react.useState)(null),
-    formData = _useState2[0],
-    setFormData = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    isAddingNewRow = _useState3[0],
-    setIsAddingNewRow = _useState3[1];
-  var _useState4 = (0, _react.useState)(0),
-    formKey = _useState4[0],
-    setFormKey = _useState4[1]; // Key to force form re-creation
-  var isDialogLayout = props.formlayout === "dialog";
-  var _props$formlayout = props.formlayout,
-    formlayout = _props$formlayout === void 0 ? "form" : _props$formlayout,
-    listener = props.listener,
-    _props$standalone = props.standalone,
-    standalone = _props$standalone === void 0 ? false : _props$standalone;
-
-  // Separate WmTable and WmLiveForm from children - optimized with early exit
-  var _useMemo = (0, _react.useMemo)(function () {
-      var tableChild;
-      var formChild;
-      var childArray = _react.Children.toArray(props.children);
-      for (var i = 0; i < childArray.length; i++) {
-        var child = childArray[i];
-        if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
-          var _child$type, _child$type2;
-          var displayName = ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) || "";
-          if (!tableChild && isWmTableChildType(displayName)) {
-            tableChild = child;
-          } else if (!formChild && displayName === "WmLiveForm") {
-            formChild = child;
-          }
-
-          // Early exit if both children found
-          if (tableChild && formChild) break;
+const WmLiveTable = (props) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [formData, setFormData] = useState(null);
+  const [isAddingNewRow, setIsAddingNewRow] = useState(false);
+  const [formKey, setFormKey] = useState(0);
+  const isDialogLayout = props.formlayout === "dialog";
+  const { formlayout = "form", listener, standalone = false } = props;
+  const { tableChild, formChild } = useMemo(() => {
+    var _a, _b;
+    let tableChild2;
+    let formChild2;
+    const childArray = Children.toArray(props.children);
+    for (let i = 0; i < childArray.length; i++) {
+      const child = childArray[i];
+      if (isValidElement(child)) {
+        const displayName = ((_a = child.type) == null ? void 0 : _a.displayName) || ((_b = child.type) == null ? void 0 : _b.name) || "";
+        if (!tableChild2 && isWmTableChildType(displayName)) {
+          tableChild2 = child;
+        } else if (!formChild2 && displayName === "WmLiveForm") {
+          formChild2 = child;
         }
+        if (tableChild2 && formChild2) break;
       }
-      return {
-        tableChild: tableChild,
-        formChild: formChild
-      };
-    }, [props.children]),
-    tableChild = _useMemo.tableChild,
-    formChild = _useMemo.formChild;
-  var tableWidget = (0, _WidgetProvider.useWidgetProxy)((tableChild === null || tableChild === void 0 ? void 0 : tableChild.props.name) || "", standalone);
-  var formWidget = (0, _WidgetProvider.useWidgetProxy)((formChild === null || formChild === void 0 ? void 0 : formChild.props.name) || "", standalone);
-  var handleOpenDialog = (0, _react.useCallback)(function () {
+    }
+    return { tableChild: tableChild2, formChild: formChild2 };
+  }, [props.children]);
+  const tableWidget = useWidgetProxy((tableChild == null ? void 0 : tableChild.props.name) || "", standalone);
+  const formWidget = useWidgetProxy((formChild == null ? void 0 : formChild.props.name) || "", standalone);
+  const handleOpenDialog = useCallback(() => {
     setIsDialogOpen(true);
   }, []);
-  var handleCloseDialog = (0, _react.useCallback)(function () {
+  const handleCloseDialog = useCallback(() => {
     setIsDialogOpen(false);
-    // Clear form data when dialog closes
     setFormData(null);
   }, []);
-
-  // Helper to get form widget - always get fresh value from listener
-  var getFormWidget = (0, _react.useCallback)(function () {
-    // Always get fresh value from listener to ensure we have the latest registered methods
+  const getFormWidget = useCallback(() => {
     return formWidget;
-  }, [formChild === null || formChild === void 0 ? void 0 : formChild.props.name]);
-  var getTableWidget = (0, _react.useCallback)(function () {
+  }, [formChild == null ? void 0 : formChild.props.name]);
+  const getTableWidget = useCallback(() => {
     return tableWidget;
   }, [tableWidget]);
-
-  // Expose LiveTable methods through its own listener
-  (0, _react.useEffect)(function () {
-    if (!(listener !== null && listener !== void 0 && listener.onChange) || !(formChild !== null && formChild !== void 0 && formChild.props.name) || !tableWidget) return;
-    var liveTableContext = {
-      addNewRow: function addNewRow(event, widget, row) {
-        var formWidget = getFormWidget();
-        var tableWidget = getTableWidget();
-
-        // Set flag to indicate we're adding a new row
+  useEffect(() => {
+    if (!(listener == null ? void 0 : listener.onChange) || !(formChild == null ? void 0 : formChild.props.name) || !tableWidget) return;
+    const liveTableContext = {
+      addNewRow: (event, widget, row) => {
+        var _a;
+        const formWidget2 = getFormWidget();
+        const tableWidget2 = getTableWidget();
         setIsAddingNewRow(true);
         if (isDialogLayout) {
-          var _listener$Widgets;
-          // Clear form data for new row and increment key to force form re-creation
           setFormData({});
-          setFormKey(function (prev) {
-            return prev + 1;
-          }); // Force new form instance
-          // Clear the global widget registry to prevent stale form values
-          if (formChild !== null && formChild !== void 0 && formChild.props.name && listener !== null && listener !== void 0 && (_listener$Widgets = listener.Widgets) !== null && _listener$Widgets !== void 0 && _listener$Widgets[formChild.props.name]) {
+          setFormKey((prev) => prev + 1);
+          if ((formChild == null ? void 0 : formChild.props.name) && ((_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[formChild.props.name])) {
             listener.Widgets[formChild.props.name].formdata = {};
-            // Clear formfields to reset individual field values
             if (listener.Widgets[formChild.props.name].formfields) {
-              Object.keys(listener.Widgets[formChild.props.name].formfields).forEach(function (key) {
-                var field = listener.Widgets[formChild.props.name].formfields[key];
+              Object.keys(listener.Widgets[formChild.props.name].formfields).forEach((key) => {
+                const field = listener.Widgets[formChild.props.name].formfields[key];
                 if (field) {
                   field.datavalue = field.defaultvalue || "";
                   field.value = field.defaultvalue || "";
@@ -125,159 +103,119 @@ var WmLiveTable = function WmLiveTable(props) {
           }
           handleOpenDialog();
         } else if (formlayout === "form") {
-          // For non-dialog mode, clear form data by setting empty object
           setFormData({});
-          // Also update the form widget's formdata in context
-          if (formWidget && formChild !== null && formChild !== void 0 && formChild.props.name && listener !== null && listener !== void 0 && listener.Widgets) {
+          if (formWidget2 && (formChild == null ? void 0 : formChild.props.name) && (listener == null ? void 0 : listener.Widgets)) {
             listener.Widgets[formChild.props.name].formdata = {};
           }
-          // Reset the form
-          formWidget === null || formWidget === void 0 || formWidget["new"]();
+          formWidget2 == null ? void 0 : formWidget2.new();
         } else if (formlayout === "inline" || formlayout === "quickedit") {
-          tableWidget === null || tableWidget === void 0 || tableWidget.addNewRow();
+          tableWidget2 == null ? void 0 : tableWidget2.addNewRow();
         }
       },
-      editRow: function editRow(event, widget, row) {
-        var tableWidget = getTableWidget();
-
-        // Reset flag since we're editing, not adding new
+      editRow: (event, widget, row) => {
+        const tableWidget2 = getTableWidget();
         setIsAddingNewRow(false);
         if (isDialogLayout) {
-          // Set form data first, then open dialog
           setFormData(row);
           handleOpenDialog();
         } else if (formlayout === "form") {
-          var _formWidget = getFormWidget();
-          _formWidget === null || _formWidget === void 0 || _formWidget.edit(row);
+          const formWidget2 = getFormWidget();
+          formWidget2 == null ? void 0 : formWidget2.edit(row);
         } else if (formlayout === "inline" || formlayout === "quickedit") {
-          tableWidget === null || tableWidget === void 0 || tableWidget.editRow(event, widget, row);
+          tableWidget2 == null ? void 0 : tableWidget2.editRow(event, widget, row);
         }
       },
-      closeDialog: function closeDialog() {
+      closeDialog: () => {
         if (isDialogLayout) {
           handleCloseDialog();
         }
       }
     };
     listener.onChange(props.name, liveTableContext);
-  }, [props.name, formChild === null || formChild === void 0 ? void 0 : formChild.props.name]);
-
-  // Create stable callbacks for form handlers
-  var handleFormSuccess = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var _formChild$props, _formChild$props$onSu;
-    var _formWidget2$setShowV, _formWidget2, tableWidget;
-    return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          if (isDialogLayout) {
-            handleCloseDialog();
-          } else {
-            // Set form to view mode after successful submission
-            _formWidget2 = getFormWidget();
-            _formWidget2 === null || _formWidget2 === void 0 || (_formWidget2$setShowV = _formWidget2.setShowViewMode) === null || _formWidget2$setShowV === void 0 || _formWidget2$setShowV.call(_formWidget2, true);
-          }
-          tableWidget = getTableWidget();
-          if (!(tableWidget && tableWidget.datasource)) {
-            _context.next = 12;
-            break;
-          }
-          _context.prev = 3;
-          if (!(tableWidget.refresh && typeof tableWidget.refresh === "function")) {
-            _context.next = 7;
-            break;
-          }
-          _context.next = 7;
-          return tableWidget.refresh(isAddingNewRow);
-        case 7:
-          _context.next = 12;
-          break;
-        case 9:
-          _context.prev = 9;
-          _context.t0 = _context["catch"](3);
-          console.error("Error refreshing table data:", _context.t0);
-        case 12:
-          // Reset the flag after refresh
-          setIsAddingNewRow(false);
-
-          //  @ts-expect-error Call original onSuccess if it exists @ts-expect-error
-          formChild === null || formChild === void 0 || (_formChild$props = formChild.props) === null || _formChild$props === void 0 || (_formChild$props$onSu = _formChild$props.onSuccess) === null || _formChild$props$onSu === void 0 || _formChild$props$onSu.call(_formChild$props);
-        case 14:
-        case "end":
-          return _context.stop();
+  }, [props.name, formChild == null ? void 0 : formChild.props.name]);
+  const handleFormSuccess = useCallback(async () => {
+    var _a, _b, _c;
+    if (isDialogLayout) {
+      handleCloseDialog();
+    } else {
+      const formWidget2 = getFormWidget();
+      (_a = formWidget2 == null ? void 0 : formWidget2.setShowViewMode) == null ? void 0 : _a.call(formWidget2, true);
+    }
+    const tableWidget2 = getTableWidget();
+    if (tableWidget2 && tableWidget2.datasource) {
+      try {
+        if (tableWidget2.refresh && typeof tableWidget2.refresh === "function") {
+          await tableWidget2.refresh(isAddingNewRow);
+        }
+      } catch (error) {
+        console.error("Error refreshing table data:", error);
       }
-    }, _callee, null, [[3, 9]]);
-  })), [isDialogLayout, handleCloseDialog, getFormWidget, getTableWidget, formChild === null || formChild === void 0 ? void 0 : formChild.props, isAddingNewRow]);
-  var handleFormCancel = (0, _react.useCallback)(function () {
-    var _formChild$props2, _formChild$props2$can;
+    }
+    setIsAddingNewRow(false);
+    (_c = (_b = formChild == null ? void 0 : formChild.props) == null ? void 0 : _b.onSuccess) == null ? void 0 : _c.call(_b);
+  }, [
+    isDialogLayout,
+    handleCloseDialog,
+    getFormWidget,
+    getTableWidget,
+    formChild == null ? void 0 : formChild.props,
+    isAddingNewRow
+  ]);
+  const handleFormCancel = useCallback(() => {
+    var _a, _b, _c;
     handleCloseDialog();
-    // Reset the flag when cancelling
     setIsAddingNewRow(false);
-    //  @ts-expect-error Call original cancel if it exists
-    formChild === null || formChild === void 0 || (_formChild$props2 = formChild.props) === null || _formChild$props2 === void 0 || (_formChild$props2$can = _formChild$props2.cancel) === null || _formChild$props2$can === void 0 || _formChild$props2$can.call(_formChild$props2);
+    (_b = (_a = formChild == null ? void 0 : formChild.props) == null ? void 0 : _a.cancel) == null ? void 0 : _b.call(_a);
     if (formlayout === "form") {
-      var _formWidget3$setShowV;
-      // Set form to view mode after successful submission
-      var _formWidget3 = getFormWidget();
-      _formWidget3 === null || _formWidget3 === void 0 || (_formWidget3$setShowV = _formWidget3.setShowViewMode) === null || _formWidget3$setShowV === void 0 || _formWidget3$setShowV.call(_formWidget3, true);
+      const formWidget2 = getFormWidget();
+      (_c = formWidget2 == null ? void 0 : formWidget2.setShowViewMode) == null ? void 0 : _c.call(formWidget2, true);
     }
-  }, [handleCloseDialog, formChild === null || formChild === void 0 ? void 0 : formChild.props, formlayout, getFormWidget]);
-
-  // Enhance form child with success/cancel handlers - memoized more efficiently
-  var enhancedFormChild = (0, _react.useMemo)(function () {
-    if (!formChild || ! /*#__PURE__*/(0, _react.isValidElement)(formChild)) return formChild;
-    var newProps = _objectSpread(_objectSpread({}, formChild.props), {}, {
+  }, [handleCloseDialog, formChild == null ? void 0 : formChild.props, formlayout, getFormWidget]);
+  const enhancedFormChild = useMemo(() => {
+    if (!formChild || !isValidElement(formChild)) return formChild;
+    const newProps = __spreadValues(__spreadProps(__spreadValues({}, formChild.props), {
       isLayoutDialog: isDialogLayout,
       onSuccess: handleFormSuccess,
       cancel: handleFormCancel
-    }, formData !== null && {
-      formdata: formData
-    });
-    return /*#__PURE__*/(0, _react.cloneElement)(formChild, newProps);
+    }), formData !== null && { formdata: formData });
+    return cloneElement(formChild, newProps);
   }, [formChild, isDialogLayout, handleFormSuccess, handleFormCancel, formData, formKey]);
-  var enhancedTableChild = (0, _react.useMemo)(function () {
-    if (!tableChild || ! /*#__PURE__*/(0, _react.isValidElement)(tableChild)) return tableChild;
-    return /*#__PURE__*/(0, _react.cloneElement)(tableChild, _objectSpread(_objectSpread({}, tableChild.props), {}, {
-      formName: formChild === null || formChild === void 0 ? void 0 : formChild.props.name,
+  const enhancedTableChild = useMemo(() => {
+    if (!tableChild || !isValidElement(tableChild)) return tableChild;
+    return cloneElement(tableChild, __spreadProps(__spreadValues({}, tableChild.props), {
+      formName: formChild == null ? void 0 : formChild.props.name,
       hidden: props.hidden
     }));
   }, [tableChild, props.hidden]);
-
-  // Render based on formlayout
   if (isDialogLayout) {
-    return __jsx(_react["default"].Fragment, null, enhancedTableChild, formChild && __jsx(_dialog["default"], {
-      isopen: isDialogOpen,
-      onClose: handleCloseDialog,
-      name: "".concat(props.name, "_dialog"),
-      listener: props.listener,
-      modal: true,
-      closable: true,
-      title: formChild.props.title,
-      iconclass: formChild.props.iconclass,
-      dialogtype: "design-dialog"
-    }, __jsx(_dialogBody.WmDialogBody, {
-      name: "popup-body",
-      listener: {}
-    }, __jsx("div", {
-      key: "form-wrapper-".concat(formKey)
-    }, enhancedFormChild))));
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      enhancedTableChild,
+      formChild && /* @__PURE__ */ jsx(
+        WmDialog,
+        {
+          isopen: isDialogOpen,
+          onClose: handleCloseDialog,
+          name: `${props.name}_dialog`,
+          listener: props.listener,
+          modal: true,
+          closable: true,
+          title: formChild.props.title,
+          iconclass: formChild.props.iconclass,
+          dialogtype: "design-dialog",
+          children: /* @__PURE__ */ jsx(WmDialogBody, { name: "popup-body", listener: {}, children: /* @__PURE__ */ jsx("div", { children: enhancedFormChild }, `form-wrapper-${formKey}`) })
+        }
+      )
+    ] });
   }
-
-  // Default: render as form
-  return __jsx(_Box["default"], {
-    component: "div",
-    className: "app-livegrid",
-    hidden: props.hidden
-  }, enhancedTableChild, enhancedFormChild);
+  return /* @__PURE__ */ jsxs(Box, { component: "div", className: "app-livegrid", hidden: props.hidden, children: [
+    enhancedTableChild,
+    enhancedFormChild
+  ] });
 };
-var WmLiveTableStandalone = exports.WmLiveTable = (0, _withStandalone["default"])(WmLiveTable);
+const WmLiveTableStandalone = withStandalone(WmLiveTable);
 WmLiveTableStandalone.displayName = "WmLiveTableStandalone";
-/**
- * The WmLiveTable component combines WmTable and WmLiveForm for inline CRUD with table and form views.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-live-table--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-live-table--docs#tab-overview)
- *
- * @param props - {@link WmLiveTableProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmLiveTable);
+var live_table_default = withBaseWrapper(WmLiveTable);
+export {
+  WmLiveTableStandalone as WmLiveTable,
+  live_table_default as default
+};

package/components/data/table/props.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});