@wavemaker/react-runtime 11.14.1-rc.236

package/components/data/table/utils/columnBuilder.js

@@ -0,0 +1,209 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActionColumnSize = exports.createRowIndexColumn = exports.createEditingActionButtons = exports.createDefaultColumnProps = exports.createDataColumns = exports.createDataColumn = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _lodashEs = require("lodash-es");
+var _ = require(".");
+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; }
+/**
+ * Creates row index column definition
+ */
+var createRowIndexColumn = exports.createRowIndexColumn = function createRowIndexColumn() {
+  return {
+    id: "rowIndex",
+    header: "S. No.",
+    size: 60,
+    minSize: 60,
+    maxSize: 60,
+    enableResizing: false,
+    cell: function cell(_ref) {
+      var row = _ref.row,
+        table = _ref.table;
+      // Get current page information for continuous numbering across pages
+      var pageIndex = table.getState().pagination.pageIndex;
+      var pageSize = table.getState().pagination.pageSize;
+
+      // Check if we're using manual pagination (server-side)
+      var isManualPagination = table.options.manualPagination;
+      var rowPositionOnPage;
+      if (isManualPagination) {
+        // For server-side pagination, use the row's index in the current data
+        rowPositionOnPage = row.index;
+      } else {
+        // For client-side pagination, find position within paginated rows
+        var paginationModel = table.getPaginationRowModel();
+        var currentPageRows = paginationModel.rows;
+        rowPositionOnPage = currentPageRows.findIndex(function (pageRow) {
+          return pageRow.id === row.id;
+        });
+      }
+
+      // Calculate continuous row number across pages
+      var rowNumber = pageIndex * pageSize + rowPositionOnPage + 1;
+      return __jsx(_material.Box, {
+        "data-col-identifier": "rowIndex"
+      }, rowNumber);
+    },
+    enableSorting: false
+  };
+};
+
+/**
+ * Creates data column definition from WmTableColumnProps
+ */
+var createDataColumn = exports.createDataColumn = function createDataColumn(wmColumn, renderCell) {
+  var _wmColumn$styles;
+  // Extract width from either width prop or styles prop
+  var columnSize;
+  if (wmColumn.width) {
+    columnSize = parseInt(wmColumn.width);
+  } else if ((_wmColumn$styles = wmColumn.styles) !== null && _wmColumn$styles !== void 0 && _wmColumn$styles.width) {
+    columnSize = (0, _.parseWidth)(wmColumn.styles.width);
+  }
+  return {
+    accessorKey: wmColumn.field,
+    // Use sortby field for sorting if provided, otherwise use the display field
+    // Supports nested properties like "department.store.employee"
+    accessorFn: wmColumn.sortby ? function (row) {
+      return (0, _lodashEs.get)(row, wmColumn.sortby || "");
+    } : undefined,
+    header: wmColumn.caption,
+    size: columnSize,
+    minSize: 50,
+    // Minimum column width in pixels
+    maxSize: columnSize,
+    // Set maxSize if we have a specific width to maintain the width
+    enableResizing: !columnSize,
+    // Disable resizing if width is specified
+    cell: function cell(_ref2) {
+      var row = _ref2.row;
+      return renderCell(wmColumn, row);
+    },
+    enableSorting: wmColumn.sortable,
+    // Pass column styles and properties through meta for TableCell styling and filtering
+    meta: _objectSpread(_objectSpread({
+      textAlign: wmColumn.textalignment,
+      backgroundColor: wmColumn.backgroundcolor,
+      className: wmColumn.colClass
+    }, wmColumn.styles), {}, {
+      // Include widget types for filter rendering
+      widgetType: wmColumn.widgetType,
+      editWidgetType: wmColumn.editWidgetType,
+      editinputtype: wmColumn.editinputtype,
+      // Include column type for filtering
+      type: wmColumn.type || wmColumn.columntype || "string",
+      searchable: wmColumn.searchable !== false
+    })
+  };
+};
+
+/**
+ * Creates column definitions from table columns
+ */
+var createDataColumns = exports.createDataColumns = function createDataColumns(wmTableColumns, renderCell) {
+  var columns = [];
+  wmTableColumns.forEach(function (wmColumn) {
+    if (wmColumn.show) {
+      columns.push(createDataColumn(wmColumn, renderCell));
+    }
+  });
+  return columns;
+};
+
+/**
+ * Creates save/cancel action buttons for editing mode
+ */
+var createEditingActionButtons = exports.createEditingActionButtons = function createEditingActionButtons() {
+  return [{
+    key: "save-edit",
+    name: "save-edit-row",
+    className: "save row-action-button btn app-button btn-transparent save-edit-row-button",
+    dataActionKey: "saveEdit",
+    displayName: "",
+    title: "Save",
+    iconclass: "wi wi-done",
+    action: "save",
+    show: true,
+    widgettype: "button"
+  }, {
+    key: "cancel-edit",
+    name: "cancel-edit-row",
+    className: "cancel row-action-button btn app-button btn-transparent cancel-edit-row-button",
+    dataActionKey: "cancelEdit",
+    displayName: "",
+    title: "Cancel",
+    iconclass: "wi wi-cancel",
+    action: "cancel",
+    show: true,
+    widgettype: "button"
+  }];
+};
+
+/**
+ * Creates a default WmTableColumnProps object for dynamic column generation
+ * @param field - The field name for the column
+ * @param displayName - The display name/caption for the column
+ * @param type - The data type of the column
+ * @param index - The column index
+ * @returns A complete WmTableColumnProps object with sensible defaults
+ */
+var createDefaultColumnProps = exports.createDefaultColumnProps = function createDefaultColumnProps(field, displayName, type, index) {
+  return {
+    // Core properties
+    field: field,
+    binding: field,
+    caption: displayName,
+    displayName: displayName,
+    widgetType: "dynamic-text",
+    // Special type for dynamic columns to render raw text
+    editWidgetType: "WmText",
+    // Display settings
+    show: true,
+    pcdisplay: true,
+    mobiledisplay: true,
+    tabletdisplay: true,
+    // Positioning
+    index: index,
+    headerindex: index.toString(),
+    // Sorting and searching
+    sortable: true,
+    searchable: true,
+    showinfilter: true,
+    // Styling
+    textalignment: "left",
+    // width: "150px", // Fixed width to disable resizing for dynamic columns
+
+    // Data type properties
+    type: type,
+    columntype: type,
+    // Form field properties
+    required: false,
+    disabled: false,
+    readonly: false,
+    // Required props for compatibility
+    listener: null,
+    // Will be set by the component
+    name: field
+  };
+};
+
+/**
+ * Get action column size based on edit mode
+ */
+var getActionColumnSize = exports.getActionColumnSize = function getActionColumnSize(editmode) {
+  return editmode === "quickedit" ? {
+    size: 80,
+    minSize: 60
+  } : {
+    size: 100,
+    minSize: 80
+  };
+};

package/components/data/table/utils/columnProxy.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createColumnsProxy = createColumnsProxy;
+exports.keyMap = void 0;
+var keyMap = exports.keyMap = {
+  caption: "header",
+  name: "accessorKey",
+  columnSize: "size",
+  sortable: "enableSorting",
+  textalignment: "meta.textAlign",
+  backgroundcolor: "meta.backgroundColor",
+  colClass: "meta.className",
+  style: "meta"
+};
+function createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion) {
+  var proxy = {};
+  wmTableColumns.forEach(function (col, idx) {
+    var key = col.field;
+    if (key) {
+      proxy[key] = new Proxy(col, {
+        get: function get(target, prop) {
+          return target[prop];
+        },
+        set: function set(target, prop, value) {
+          if (target[prop] !== value) {
+            var mapped = keyMap[prop];
+            if (mapped && mapped.includes(".")) {
+              mapped = mapped.split(".")[1];
+            }
+            var finalKey = mapped || prop;
+            applyOverride(idx, finalKey, value);
+            target[prop] = value;
+            if (setColumnsVersion) {
+              setColumnsVersion(function (v) {
+                return v + 1;
+              });
+            }
+          }
+          return true;
+        }
+      });
+    }
+  });
+  return proxy;
+}

package/components/data/table/utils/columnWidthDistribution.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDataColumn = exports.hasExplicitWidth = exports.distributeColumnWidths = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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; }
+/**
+ * Column types that should not participate in equal width distribution
+ * These columns have specific functional purposes and should use their default/fixed sizes
+ */
+var NON_DATA_COLUMN_IDS = ["radioSelect", "multiSelect", "rowIndex", "actions"];
+
+/**
+ * Determines if a column is a data column that should participate in equal width distribution
+ */
+var isDataColumn = exports.isDataColumn = function isDataColumn(column) {
+  return !NON_DATA_COLUMN_IDS.includes(column.id || "");
+};
+
+/**
+ * Determines if a column has an explicit width defined
+ */
+var hasExplicitWidth = exports.hasExplicitWidth = function hasExplicitWidth(column) {
+  return typeof column.size === "number" && column.size > 0;
+};
+
+/**
+ * Calculates equal width distribution for data columns without explicit widths.
+ *
+ * This function implements the logic to ensure that:
+ * 1. Non-data columns (S.No, Actions, MultiSelect, RadioSelect) take only minimum necessary width
+ * 2. Data columns without explicit widths automatically share remaining space equally
+ * 3. Data columns with explicit widths (via column.width or column.styles.width) maintain their specified size
+ *
+ * @param columns - Array of column definitions
+ * @param tableWidth - Total available table width (default: 1200px for calculations)
+ * @returns Modified column definitions with auto-sized data columns
+ */
+var distributeColumnWidths = exports.distributeColumnWidths = function distributeColumnWidths(columns) {
+  var tableWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1200;
+  // Calculate total width used by non-data columns and data columns with explicit widths
+  var usedWidth = 0;
+  var dataColumnsNeedingWidth = 0;
+  columns.forEach(function (column) {
+    if (!isDataColumn(column)) {
+      // Non-data column - use its default size
+      var size = column.size || getDefaultColumnSize(column.id || "");
+      usedWidth += size;
+    } else if (hasExplicitWidth(column)) {
+      // Data column with explicit width
+      usedWidth += column.size;
+    } else {
+      // Data column needing auto-sizing
+      dataColumnsNeedingWidth++;
+    }
+  });
+
+  // Calculate width for auto-sized data columns
+  var autoColumnWidth = 150; // Default fallback width
+  if (dataColumnsNeedingWidth > 0) {
+    var remainingWidth = Math.max(tableWidth - usedWidth, dataColumnsNeedingWidth * 100);
+    autoColumnWidth = Math.floor(remainingWidth / dataColumnsNeedingWidth);
+    // Ensure minimum width
+    autoColumnWidth = Math.max(autoColumnWidth, 100);
+  }
+
+  // Apply calculated widths to columns
+  return columns.map(function (column) {
+    if (isDataColumn(column) && !hasExplicitWidth(column)) {
+      return _objectSpread(_objectSpread({}, column), {}, {
+        size: autoColumnWidth,
+        minSize: 100,
+        // Ensure reasonable minimum for data columns
+        enableResizing: true // Allow resizing for auto-sized columns
+      });
+    }
+    return column;
+  });
+};
+
+/**
+ * Get default size for non-data columns
+ */
+var getDefaultColumnSize = function getDefaultColumnSize(columnId) {
+  switch (columnId) {
+    case "radioSelect":
+    case "multiSelect":
+    case "rowIndex":
+    case "actions":
+      return 60;
+    default:
+      return 150;
+  }
+};

package/components/data/table/utils/constants.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TABLE_MESSAGES = exports.TABLE_DATA_STATES = exports.TABLE_CSS_CLASSES = exports.INTERACTIVE_TAG_NAMES = exports.INTERACTIVE_ROLES = exports.INTERACTIVE_DATA_ROLES = exports.INTERACTIVE_CLASSES = exports.DYNAMIC_COLUMNS_CONFIG = void 0;
+// CSS Class Names Constants
+var TABLE_CSS_CLASSES = exports.TABLE_CSS_CLASSES = {
+  tableRow: "app-datagrid-row",
+  headerCell: "app-datagrid-header-cell",
+  groupHeaderCell: "app-datagrid-group-header-cell",
+  tableCell: "app-datagrid-cell",
+  grid: "",
+  gridDefault: "table",
+  gridBody: "app-datagrid-body",
+  gridFooter: "app-datagrid-footer",
+  deleteRow: "danger",
+  ascIcon: "asc wi wi-long-arrow-up",
+  descIcon: "desc wi wi-long-arrow-down",
+  selectedColumn: "selected-column",
+  rowExpandIcon: "wi wi-minus-square",
+  rowCollapseIcon: "wi wi-plus-square",
+  gridRowExpansionClass: "table-row-expansion",
+  expandedRowClass: "expanded"
+};
+
+// Data States Constants
+var TABLE_DATA_STATES = exports.TABLE_DATA_STATES = {
+  loading: "Loading...",
+  ready: "",
+  error: "An error occurred in loading the data.",
+  nodata: "No data found."
+};
+
+// Table Messages Constants
+var TABLE_MESSAGES = exports.TABLE_MESSAGES = {
+  // Delete dialog messages
+  deleteConfirmTitle: "Delete Record",
+  deleteConfirmMessage: "Are you sure you want to delete this record?",
+  deleteOkText: "Ok",
+  deleteCancelText: "Cancel",
+  // Toast messages
+  deleteSuccess: "Record deleted successfully",
+  deleteError: "Failed to delete record",
+  insertSuccess: "Record added successfully",
+  updateSuccess: "Record updated successfully",
+  operationError: "An error occurred",
+  // Table states
+  noDataMessage: "No data found",
+  loadingMessage: "Loading...",
+  errorStateMessage: "An error occurred",
+  // Selection
+  radioSelectAriaLabel: "Select row",
+  multiSelectAriaLabel: "Select all rows"
+};
+
+/**
+ * Interactive element classes and attributes that should prevent row selection
+ */
+var INTERACTIVE_CLASSES = exports.INTERACTIVE_CLASSES = [
+// MUI base components
+"MuiInputBase", "MuiSelect", "MuiButton", "MuiCheckbox", "MuiRadio", "MuiSlider", "MuiSwitch", "MuiTextField", "MuiAutocomplete", "MuiChip", "MuiRating", "MuiToggleButton",
+// Date/time pickers
+"MuiPickersDay", "MuiDatePicker", "MuiTimePicker", "MuiDateTimePicker", "MuiCalendarPicker", "MuiClockPicker",
+// Color picker
+"MuiColorPicker",
+// Form controls
+"MuiFormControl", "MuiFormGroup", "MuiFormControlLabel",
+// WaveMaker specific widgets
+"app-text", "app-textarea", "app-checkbox", "app-slider", "app-currency", "app-switch", "app-select", "app-checkboxset", "app-radioset", "app-date", "app-time", "app-timestamp", "app-rating", "app-datetime", "app-search", "app-chips", "app-colorpicker", "app-calendar", "app-editor"];
+var INTERACTIVE_ROLES = exports.INTERACTIVE_ROLES = ["button", "textbox", "combobox", "listbox"];
+var INTERACTIVE_DATA_ROLES = exports.INTERACTIVE_DATA_ROLES = ["input", "select", "date", "time", "color", "editor", "checkbox", "radio", "slider", "chips", "rating"];
+var INTERACTIVE_TAG_NAMES = exports.INTERACTIVE_TAG_NAMES = ["INPUT", "BUTTON", "SELECT", "TEXTAREA", "A", "LABEL"];
+
+// Dynamic Columns Constants
+var DYNAMIC_COLUMNS_CONFIG = exports.DYNAMIC_COLUMNS_CONFIG = {
+  maxColumns: 10,
+  // Maximum number of columns to generate from data (matching Angular behavior)
+  sampleSize: 3 // Number of rows to sample for column detection
+};