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

package/components/data/table/components/AddNewRow.js

@@ -1,194 +1,162 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AddNewRow = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _clsx = _interopRequireDefault(require("clsx"));
-var _lodashEs = require("lodash-es");
-var _tableRowAction = _interopRequireDefault(require("../table-row-action"));
-var __jsx = _react["default"].createElement;
-// Helper function to create empty cells
-var createEmptyCell = function createEmptyCell(key) {
-  var className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "text-center";
-  return __jsx(_material.TableCell, {
-    key: key
-  }, __jsx(_material.Box, {
-    className: className
-  }));
-};
-
-// Helper function to create action buttons
-var createActionButton = function createActionButton(key, name, actionKey, title, iconClass, _onClick, listener) {
-  return __jsx(_tableRowAction["default"], {
-    key: key,
-    name: name,
-    className: "".concat(actionKey === "acceptNew" ? "save" : "cancel", " row-action-button btn app-button btn-transparent ").concat(name, "-button"),
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TableRow, TableCell, Box } from "@mui/material";
+import clsx from "clsx";
+import { filter } from "lodash-es";
+import WmTableRowAction from "../table-row-action";
+const createEmptyCell = (key, className = "text-center") => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Box, { className }) }, key);
+const createActionButton = (key, name, actionKey, title, iconClass, onClick, listener) => /* @__PURE__ */ jsx(
+  WmTableRowAction,
+  {
+    name,
+    className: `${actionKey === "acceptNew" ? "save" : "cancel"} row-action-button btn app-button btn-transparent ${name}-button`,
     "data-action-key": actionKey,
     displayName: "",
-    title: title,
+    title,
     iconclass: iconClass,
     action: actionKey === "acceptNew" ? "save" : "cancel",
     row: {},
     rowIndex: -1,
-    listener: listener,
+    listener,
     show: true,
-    onClick: function onClick(event) {
-      event === null || event === void 0 || event.preventDefault();
-      event === null || event === void 0 || event.stopPropagation();
-      _onClick();
+    onClick: (event) => {
+      event == null ? void 0 : event.preventDefault();
+      event == null ? void 0 : event.stopPropagation();
+      onClick();
     }
-  });
-};
-
-// Helper function to create action buttons cell
-var createActionButtonsCell = function createActionButtonsCell(key, editMode, onSave, onCancel, listener) {
-  return __jsx(_material.TableCell, {
-    key: key
-  }, __jsx(_material.Box, {
-    component: "span",
-    className: "actions-column"
-  }, editMode === "inline" ?
+  },
+  key
+);
+const createActionButtonsCell = (key, editMode, onSave, onCancel, listener) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Box, { component: "span", className: "actions-column", children: editMode === "inline" ? (
   // Show save/cancel buttons for inline edit
-  __jsx(_react["default"].Fragment, null, createActionButton("accept-new", "accept-new-row", "acceptNew", "Save", "wi wi-done", onSave, listener), createActionButton("cancel-new", "cancel-new-row", "cancelNew", "Cancel", "wi wi-cancel", onCancel, listener)) :
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    createActionButton(
+      "accept-new",
+      "accept-new-row",
+      "acceptNew",
+      "Save",
+      "wi wi-done",
+      onSave,
+      listener
+    ),
+    createActionButton(
+      "cancel-new",
+      "cancel-new-row",
+      "cancelNew",
+      "Cancel",
+      "wi wi-cancel",
+      onCancel,
+      listener
+    )
+  ] })
+) : (
   // No actions for quick edit mode
-  null));
-};
-var AddNewRow = exports.AddNewRow = function AddNewRow(_ref) {
-  var isAddingNewRow = _ref.isAddingNewRow,
-    editMode = _ref.editMode,
-    wmTableColumns = _ref.wmTableColumns,
-    rowActions = _ref.rowActions,
-    showrowindex = _ref.showrowindex,
-    _ref$radioselect = _ref.radioselect,
-    radioselect = _ref$radioselect === void 0 ? false : _ref$radioselect,
-    _ref$multiselect = _ref.multiselect,
-    multiselect = _ref$multiselect === void 0 ? false : _ref$multiselect,
-    sessionKey = _ref.sessionKey,
-    editingRowData = _ref.editingRowData,
-    renderEditableCell = _ref.renderEditableCell,
-    onKeyDown = _ref.onKeyDown,
-    onSave = _ref.handleSave,
-    onCancel = _ref.handleCancel,
-    listener = _ref.listener,
-    _ref$hasRowExpansion = _ref.hasRowExpansion,
-    hasRowExpansion = _ref$hasRowExpansion === void 0 ? false : _ref$hasRowExpansion,
-    _ref$expansionPositio = _ref.expansionPosition,
-    expansionPosition = _ref$expansionPositio === void 0 ? 0 : _ref$expansionPositio;
+  null
+) }) }, key);
+const AddNewRow = ({
+  isAddingNewRow,
+  editMode,
+  wmTableColumns,
+  rowActions,
+  showrowindex,
+  radioselect = false,
+  multiselect = false,
+  sessionKey,
+  editingRowData,
+  renderEditableCell,
+  onKeyDown,
+  handleSave: onSave,
+  handleCancel: onCancel,
+  listener,
+  hasRowExpansion = false,
+  expansionPosition = 0
+}) => {
+  var _a, _b;
   if (!isAddingNewRow || editMode !== "inline" && editMode !== "quickedit") {
     return null;
   }
-  var rowKey = editMode === "quickedit" ? "quick-edit-new-row" : "add-new-row";
-
-  // Filter visible columns and separate manual action column
-  var allVisibleColumns = (0, _lodashEs.filter)(wmTableColumns, function (col) {
-    return col.show !== false;
-  });
-  var manualActionColumn = allVisibleColumns.find(function (col) {
-    return col.binding === "rowOperations";
-  });
-  var visibleColumns = allVisibleColumns.filter(function (col) {
-    return col.binding !== "rowOperations";
-  });
-
-  // Calculate total columns including system columns
-  var totalCells = [];
-
-  // Add selection column
+  const rowKey = editMode === "quickedit" ? "quick-edit-new-row" : "add-new-row";
+  const allVisibleColumns = filter(
+    wmTableColumns,
+    (col) => col.show !== false
+  );
+  const manualActionColumn = allVisibleColumns.find((col) => col.binding === "rowOperations");
+  const visibleColumns = allVisibleColumns.filter((col) => col.binding !== "rowOperations");
+  const totalCells = [];
   if (radioselect || multiselect) {
-    totalCells.push(createEmptyCell("".concat(rowKey, "-selection")));
+    totalCells.push(createEmptyCell(`${rowKey}-selection`));
   }
-
-  // Add row index column
   if (showrowindex) {
-    totalCells.push(createEmptyCell("".concat(rowKey, "-index")));
+    totalCells.push(createEmptyCell(`${rowKey}-index`));
   }
-
-  // Add manual action column if positioned at 0
   if (manualActionColumn && manualActionColumn.rowactionsposition === 0) {
-    totalCells.push(createActionButtonsCell("".concat(rowKey, "-manual-actions"), editMode, onSave, onCancel, listener));
+    totalCells.push(
+      createActionButtonsCell(`${rowKey}-manual-actions`, editMode, onSave, onCancel, listener)
+    );
   }
-
-  // Calculate expansion cell position
-  var dataColumnStartIndex = totalCells.length;
-  var calculateExpansionIndex = function calculateExpansionIndex() {
+  const dataColumnStartIndex = totalCells.length;
+  const calculateExpansionIndex = () => {
     if (!hasRowExpansion) return -1;
-
-    // Handle numeric positions
     if (typeof expansionPosition === "number" || !isNaN(Number(expansionPosition))) {
       return dataColumnStartIndex + Number(expansionPosition);
-    }
-    // Handle -1 position (after all columns)
-    else if (expansionPosition === "-1" || String(expansionPosition) === "-1") {
+    } else if (expansionPosition === "-1" || String(expansionPosition) === "-1") {
       return dataColumnStartIndex + visibleColumns.length;
-    }
-    // Handle column name positions
-    else if (typeof expansionPosition === "string") {
-      // For nested paths like "name.location.url", we need to match the exact field value
-      var columnIndex = visibleColumns.findIndex(function (col) {
-        return col.field === expansionPosition || col.binding === expansionPosition;
-      });
-      // Place AFTER the named column
+    } else if (typeof expansionPosition === "string") {
+      const columnIndex = visibleColumns.findIndex(
+        (col) => col.field === expansionPosition || col.binding === expansionPosition
+      );
       return columnIndex >= 0 ? dataColumnStartIndex + columnIndex + 1 : dataColumnStartIndex;
     }
-    // Default to beginning
     return dataColumnStartIndex;
   };
-  var expansionInsertIndex = calculateExpansionIndex();
-
-  // Add expansion cell at the beginning if it's positioned before all data columns
-  var expansionCellAdded = false;
+  const expansionInsertIndex = calculateExpansionIndex();
+  let expansionCellAdded = false;
   if (hasRowExpansion && expansionInsertIndex === dataColumnStartIndex) {
-    totalCells.push(createEmptyCell("".concat(rowKey, "-expansion")));
+    totalCells.push(createEmptyCell(`${rowKey}-expansion`));
     expansionCellAdded = true;
   }
-
-  // Add data columns
-  for (var index = 0; index < visibleColumns.length; index++) {
-    var _ref2, _editingRowData$field;
-    var column = visibleColumns[index];
-    var actualIndex = dataColumnStartIndex + index;
-
-    // Insert expansion cell at calculated position
+  for (let index = 0; index < visibleColumns.length; index++) {
+    const column = visibleColumns[index];
+    const actualIndex = dataColumnStartIndex + index;
     if (hasRowExpansion && actualIndex === expansionInsertIndex && !expansionCellAdded) {
-      totalCells.push(createEmptyCell("".concat(rowKey, "-expansion")));
+      totalCells.push(createEmptyCell(`${rowKey}-expansion`));
       expansionCellAdded = true;
     }
-
-    // Insert manual action column if positioned at this index
-    if (manualActionColumn && manualActionColumn.rowactionsposition !== undefined && manualActionColumn.rowactionsposition !== 0 && Number(manualActionColumn.rowactionsposition) === index + 1) {
-      totalCells.push(createActionButtonsCell("".concat(rowKey, "-manual-actions"), editMode, onSave, onCancel, listener));
+    if (manualActionColumn && manualActionColumn.rowactionsposition !== void 0 && manualActionColumn.rowactionsposition !== 0 && Number(manualActionColumn.rowactionsposition) === index + 1) {
+      totalCells.push(
+        createActionButtonsCell(`${rowKey}-manual-actions`, editMode, onSave, onCancel, listener)
+      );
     }
-    var fieldName = String(column.field || "field_".concat(index));
-    var widgetType = String(column.editWidgetType || "WmText");
-    var editValue = (_ref2 = (_editingRowData$field = editingRowData[fieldName]) !== null && _editingRowData$field !== void 0 ? _editingRowData$field : column.defaultvalue) !== null && _ref2 !== void 0 ? _ref2 : "";
-    totalCells.push(__jsx(_material.TableCell, {
-      key: "new-row-".concat(fieldName),
-      className: (0, _clsx["default"])("app-datagrid-cell cell-editing form-group", {
-        "required-field": column.required
-      })
-    }, column.readonly ? __jsx(_react["default"].Fragment, null) : renderEditableCell(column, fieldName, widgetType, editValue, "new-row")));
+    const fieldName = String(column.field || `field_${index}`);
+    const widgetType = String(column.editWidgetType || "WmText");
+    const editValue = (_b = (_a = editingRowData[fieldName]) != null ? _a : column.defaultvalue) != null ? _b : "";
+    totalCells.push(
+      /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          className: clsx("app-datagrid-cell cell-editing form-group", {
+            "required-field": column.required
+          }),
+          children: column.readonly ? /* @__PURE__ */ jsx(Fragment, {}) : renderEditableCell(column, fieldName, widgetType, editValue, "new-row")
+        },
+        `new-row-${fieldName}`
+      )
+    );
   }
-
-  // Add expansion cell at the end if it's positioned after all data columns
   if (hasRowExpansion && expansionInsertIndex === dataColumnStartIndex + visibleColumns.length && !expansionCellAdded) {
-    totalCells.push(createEmptyCell("".concat(rowKey, "-expansion")));
+    totalCells.push(createEmptyCell(`${rowKey}-expansion`));
   }
-
-  // Add manual action column at the end if not already added
-  if (manualActionColumn && (manualActionColumn.rowactionsposition === undefined || manualActionColumn.rowactionsposition === -1 || Number(manualActionColumn.rowactionsposition) > visibleColumns.length)) {
-    totalCells.push(createActionButtonsCell("".concat(rowKey, "-manual-actions"), editMode, onSave, onCancel, listener));
+  if (manualActionColumn && (manualActionColumn.rowactionsposition === void 0 || manualActionColumn.rowactionsposition === -1 || Number(manualActionColumn.rowactionsposition) > visibleColumns.length)) {
+    totalCells.push(
+      createActionButtonsCell(`${rowKey}-manual-actions`, editMode, onSave, onCancel, listener)
+    );
   }
-
-  // Add default actions column if no manual action column
   if (!manualActionColumn && rowActions.length > 0) {
-    totalCells.push(createActionButtonsCell("".concat(rowKey, "-actions"), editMode, onSave, onCancel, listener));
+    totalCells.push(
+      createActionButtonsCell(`${rowKey}-actions`, editMode, onSave, onCancel, listener)
+    );
   }
-  return __jsx(_material.TableRow, {
-    className: "add-new-row",
-    key: rowKey
-  }, totalCells);
-};
+  return /* @__PURE__ */ jsx(TableRow, { className: "add-new-row", children: totalCells }, rowKey);
+};
+export {
+  AddNewRow
+};

package/components/data/table/components/EditableCell.js

@@ -1,92 +1,85 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.EditableCell = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _FieldValidationError = require("./FieldValidationError");
-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;
-var EditableCell = exports.EditableCell = function EditableCell(_ref) {
-  var _fieldValidationError;
-  var column = _ref.column,
-    rowData = _ref.rowData,
-    rowId = _ref.rowId,
-    fieldName = _ref.fieldName,
-    widgetType = _ref.widgetType,
-    editValue = _ref.editValue,
-    fieldValidationErrorsRef = _ref.fieldValidationErrorsRef,
-    cellUpdateCallbacksRef = _ref.cellUpdateCallbacksRef,
-    fieldRefs = _ref.fieldRefs,
-    renderFormWidget = _ref.renderFormWidget,
-    updateFieldValue = _ref.updateFieldValue,
-    _ref$sessionKey = _ref.sessionKey,
-    sessionKey = _ref$sessionKey === void 0 ? 0 : _ref$sessionKey,
-    onKeyDown = _ref.onKeyDown,
-    _ref$editMode = _ref.editMode,
-    editMode = _ref$editMode === void 0 ? "inline" : _ref$editMode;
-  var cellRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(0),
-    setForceUpdate = _useState[1];
-
-  // Generate a unique field key for validation tracking
-  var fieldKey = "".concat(rowId, "_").concat(fieldName);
-
-  // Create a ref callback to register the cell element for validation
-  var cellRefCallback = function cellRefCallback(element) {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box } from "@mui/material";
+import { FieldValidationError } from "./FieldValidationError";
+const EditableCell = ({
+  column,
+  rowData,
+  rowId,
+  fieldName,
+  widgetType,
+  editValue,
+  fieldValidationErrorsRef,
+  cellUpdateCallbacksRef,
+  fieldRefs,
+  renderFormWidget,
+  updateFieldValue,
+  sessionKey = 0,
+  onKeyDown,
+  editMode = "inline"
+}) => {
+  var _a;
+  const cellRef = useRef(null);
+  const [, setForceUpdate] = useState(0);
+  const fieldKey = `${rowId}_${fieldName}`;
+  const cellRefCallback = (element) => {
     cellRef.current = element;
     if (element && fieldRefs.current) {
       fieldRefs.current[fieldKey] = element;
     }
   };
-
-  // Register a cell update callback to force re-render on validation state changes
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (cellUpdateCallbacksRef.current) {
-      cellUpdateCallbacksRef.current[fieldKey] = function () {
-        return setForceUpdate(function (prev) {
-          return prev + 1;
-        });
-      };
+      cellUpdateCallbacksRef.current[fieldKey] = () => setForceUpdate((prev) => prev + 1);
     }
-    return function () {
+    return () => {
       if (cellUpdateCallbacksRef.current) {
         delete cellUpdateCallbacksRef.current[fieldKey];
       }
     };
   }, [fieldKey, cellUpdateCallbacksRef]);
-
-  // Determine if we should show validation error
-  var showError = ((_fieldValidationError = fieldValidationErrorsRef.current) === null || _fieldValidationError === void 0 ? void 0 : _fieldValidationError[fieldKey]) === true;
-
-  // Handle keyboard events for quick edit mode
-  var handleKeyDown = function handleKeyDown(e) {
+  const showError = ((_a = fieldValidationErrorsRef.current) == null ? void 0 : _a[fieldKey]) === true;
+  const handleKeyDown = (e) => {
     if (onKeyDown) {
-      // @ts-ignore
       onKeyDown(e, rowId);
     }
   };
-  return __jsx(_material.Box, {
-    ref: cellRefCallback,
-    onKeyDown: editMode === "quickedit" || editMode === "inline" ? handleKeyDown : undefined,
-    "data-field-name": fieldName,
-    "data-row-id": rowId
-  }, renderFormWidget(fieldName, widgetType, editValue, function (newValue) {
-    return updateFieldValue(fieldName, newValue, rowId);
-  }, {
-    required: column.required,
-    disabled: column.disabled,
-    placeholder: column.placeholder,
-    defaultvalue: column.defaultvalue,
-    sessionKey: "".concat(sessionKey, "_").concat(rowId, "_").concat(fieldName),
-    rowData: rowData,
-    column: column
-  }), showError && __jsx(_FieldValidationError.FieldValidationError, {
-    showError: true,
-    title: column.validationmessage ? column.validationmessage : column.required ? "This field is required" : "Field validation failed"
-  }));
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: cellRefCallback,
+      onKeyDown: editMode === "quickedit" || editMode === "inline" ? handleKeyDown : void 0,
+      "data-field-name": fieldName,
+      "data-row-id": rowId,
+      children: [
+        renderFormWidget(
+          fieldName,
+          widgetType,
+          editValue,
+          (newValue) => updateFieldValue(fieldName, newValue, rowId),
+          {
+            required: column.required,
+            disabled: column.disabled,
+            placeholder: column.placeholder,
+            defaultvalue: column.defaultvalue,
+            sessionKey: `${sessionKey}_${rowId}_${fieldName}`,
+            rowData,
+            column
+          }
+        ),
+        showError && /* @__PURE__ */ jsx(
+          FieldValidationError,
+          {
+            showError: true,
+            title: column.validationmessage ? column.validationmessage : column.required ? "This field is required" : "Field validation failed"
+          }
+        )
+      ]
+    }
+  );
+};
+var EditableCell_default = EditableCell;
+export {
+  EditableCell,
+  EditableCell_default as default
 };
-var _default = exports["default"] = EditableCell;

package/components/data/table/components/FieldValidationError.js

@@ -1,24 +1,23 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.FieldValidationError = void 0;
-var _react = _interopRequireDefault(require("react"));
-var __jsx = _react["default"].createElement;
-var FieldValidationError = exports.FieldValidationError = function FieldValidationError(_ref) {
-  var showError = _ref.showError,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? "Field validation failed" : _ref$title;
+import { jsx } from "react/jsx-runtime";
+const FieldValidationError = ({
+  showError,
+  title = "Field validation failed"
+}) => {
   if (!showError) {
     return null;
   }
-  return __jsx("span", {
-    className: "text-danger wi wi-error",
-    "data-placement": "top",
-    "data-container": "body",
-    title: title
-  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "text-danger wi wi-error",
+      "data-placement": "top",
+      "data-container": "body",
+      title
+    }
+  );
+};
+var FieldValidationError_default = FieldValidationError;
+export {
+  FieldValidationError,
+  FieldValidationError_default as default
 };
-var _default = exports["default"] = FieldValidationError;