@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/data/table/components/TableBody.js

@@ -0,0 +1,284 @@
+var __defProp = Object.defineProperty;
+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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useCallback } from "react";
+import { TableBody, TableRow, TableCell, Box } from "@mui/material";
+import { TABLE_CSS_CLASSES, TABLE_MESSAGES, getRowExpansionConfig } from "../utils";
+import { RowExpansionButton } from "./RowExpansionButton";
+import isEqual from "lodash-es/isEqual";
+import { TableDataRow } from "./TableDataRow";
+const SYSTEM_COLUMN_IDS = ["multiSelect", "radioSelect", "row-index", "rowIndex", "actions"];
+const DEFAULT_EXPANSION_WIDTH = "50px";
+const EXPANDED_ROW_BG_COLOR = "#f5f5f5";
+const DEFAULT_CELL_PADDING = "2rem";
+const isSystemColumn = (columnId) => SYSTEM_COLUMN_IDS.includes(columnId);
+const parsePosition = (position) => {
+  if (!position) return 0;
+  if (position === "-1" || position === -1) return -1;
+  return typeof position === "number" ? position : Number(position);
+};
+const EmptyRow = memo(
+  ({ colSpan, message, rowClass = "" }) => /* @__PURE__ */ jsx(TableRow, { className: rowClass, role: "row", tabIndex: 0, "data-row-id": "empty", children: /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      colSpan,
+      className: `${TABLE_CSS_CLASSES.tableCell} text-center`,
+      role: "cell",
+      "data-col-id": "empty-cell",
+      tabIndex: 0,
+      style: { padding: DEFAULT_CELL_PADDING },
+      children: message
+    }
+  ) })
+);
+EmptyRow.displayName = "EmptyRow";
+const ExpansionCell = memo(({ rowId, rowData, isExpanded, onToggle, config }) => /* @__PURE__ */ jsx(
+  TableCell,
+  {
+    className: "app-datagrid-cell row-expansion-cell",
+    role: "cell",
+    "data-col-id": "row-expansion",
+    tabIndex: 0,
+    style: {
+      textAlign: "center",
+      position: "relative",
+      width: config.columnwidth || DEFAULT_EXPANSION_WIDTH,
+      padding: "4px"
+    },
+    children: /* @__PURE__ */ jsx(Box, { component: "span", className: "row-expansion-column", "data-identifier": "rowExpansionButtons", children: /* @__PURE__ */ jsx(
+      RowExpansionButton,
+      {
+        rowId,
+        rowData,
+        isExpanded,
+        onToggle,
+        config
+      }
+    ) })
+  }
+));
+ExpansionCell.displayName = "ExpansionCell";
+const ExpandedContent = memo(({ rowId, rowData, config, colSpan, onInstanceLoad }) => {
+  const renderContent = useCallback(() => {
+    if (config.renderPartial) {
+      const _a = config, { name, content } = _a, restConfig = __objRest(_a, ["name", "content"]);
+      const partialProps = __spreadValues({
+        name: name || "table_row",
+        content,
+        rowData,
+        rowId
+      }, restConfig);
+      const onLoad = (widgetInstance) => {
+        if (onInstanceLoad) {
+          onInstanceLoad(rowId, widgetInstance != null ? widgetInstance : {}, rowData);
+        }
+      };
+      return config.renderPartial(partialProps, onLoad, rowData);
+    }
+    if (config.children) {
+      return config.children;
+    }
+    return /* @__PURE__ */ jsx("div", { children: config.content || "No content available" });
+  }, [config, rowData, rowId, onInstanceLoad]);
+  return /* @__PURE__ */ jsx(
+    TableRow,
+    {
+      className: "expanded-row-content",
+      "data-row-id": rowId,
+      role: "row",
+      tabIndex: 0,
+      style: { backgroundColor: EXPANDED_ROW_BG_COLOR },
+      children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          colSpan,
+          role: "cell",
+          "data-col-id": "expanded-content",
+          tabIndex: 0,
+          style: {
+            padding: "16px",
+            borderBottom: "1px solid #e0e0e0"
+          },
+          children: renderContent()
+        }
+      )
+    }
+  );
+});
+ExpandedContent.displayName = "ExpandedContent";
+const useExpansionPosition = (hasExpansion, rowExpansionConfig, columns) => {
+  return useMemo(() => {
+    if (!hasExpansion || !rowExpansionConfig) return -1;
+    const { position } = rowExpansionConfig;
+    const parsedPosition = parsePosition(position);
+    if (parsedPosition === -1) {
+      return columns.length - 1;
+    }
+    if (!isNaN(parsedPosition)) {
+      const firstDataColumnIndex = columns.findIndex((col) => !isSystemColumn(col.id));
+      return Math.max(0, firstDataColumnIndex + parsedPosition);
+    }
+    if (typeof position === "string") {
+      const columnIndex = columns.findIndex((col) => {
+        if (col.id === position || col.accessorKey === position) {
+          return true;
+        }
+        const normalizedPosition = position.replace(/\./g, "_");
+        return col.id === normalizedPosition;
+      });
+      return columnIndex >= 0 ? columnIndex + 1 : 0;
+    }
+    return 0;
+  }, [hasExpansion, rowExpansionConfig, columns]);
+};
+const TableBodyComponentBase = ({
+  table,
+  columns,
+  rowClass = "",
+  formposition = "bottom",
+  renderAddNewRow,
+  onRowClick,
+  isRowActive,
+  isRowSelected,
+  nodatamessage = TABLE_MESSAGES.noDataMessage,
+  rowExpansionConfig,
+  toggleRowExpansion,
+  isRowExpanded,
+  ColClassSignature,
+  rowsVersion,
+  tableData,
+  editingRowId = null,
+  isAddingNewRow = false,
+  registerRowDefInstance,
+  customExpressionColumns,
+  customColumnsRevision = 0,
+  columnsVersion = 0
+}) => {
+  const hasExpansion = rowExpansionConfig ? true : false;
+  const expansionInsertIndex = useExpansionPosition(
+    hasExpansion,
+    rowExpansionConfig || null,
+    columns
+  );
+  const totalColumns = columns.length + (hasExpansion ? 1 : 0);
+  const renderExpansionCell = useCallback(
+    (rowId, rowData) => {
+      if (!hasExpansion || !rowExpansionConfig) return null;
+      const rowConfig = getRowExpansionConfig(rowExpansionConfig, rowId, rowData);
+      if (!rowConfig) return null;
+      return /* @__PURE__ */ jsx(
+        ExpansionCell,
+        {
+          rowId,
+          rowData,
+          isExpanded: isRowExpanded(rowId),
+          onToggle: toggleRowExpansion,
+          config: rowConfig
+        },
+        `expansion-${rowId}`
+      );
+    },
+    [hasExpansion, rowExpansionConfig, isRowExpanded, toggleRowExpansion]
+  );
+  const renderTableContent = () => {
+    const rows = table.getRowModel().rows;
+    if (rows.length === 0 && !isAddingNewRow) {
+      return /* @__PURE__ */ jsx(EmptyRow, { colSpan: totalColumns, message: nodatamessage, rowClass });
+    }
+    return rows.map((row) => {
+      const rowId = row.id;
+      const isSelected = isRowSelected(rowId);
+      const isActive = isRowActive(rowId, isSelected);
+      const rowIsExpanded = (isRowExpanded == null ? void 0 : isRowExpanded(rowId)) || false;
+      const isEditingRow = editingRowId === rowId;
+      return /* @__PURE__ */ jsx(
+        TableDataRow,
+        {
+          row,
+          rowId,
+          index: row.index,
+          isSelected,
+          isActive,
+          rowIsExpanded,
+          isEditingRow,
+          hasExpansion,
+          expansionInsertIndex,
+          renderExpansionCell,
+          rowClass,
+          onRowClick,
+          ColClassSignature: ColClassSignature || "",
+          rowsVersion: rowsVersion || 0,
+          tableData: tableData || [],
+          ExpandedContent,
+          rowExpansionConfig,
+          totalColumns,
+          onInstanceLoad: registerRowDefInstance,
+          customExpressionColumns,
+          customColumnsRevision,
+          columnsVersion
+        },
+        rowId
+      );
+    });
+  };
+  return /* @__PURE__ */ jsxs(TableBody, { className: `app-grid-content ${TABLE_CSS_CLASSES.gridBody}`, children: [
+    formposition === "top" && renderAddNewRow(),
+    renderTableContent(),
+    formposition === "bottom" && renderAddNewRow()
+  ] });
+};
+const TableBodyComponent = memo(TableBodyComponentBase, (prev, current) => {
+  const keys = [
+    "rowClass",
+    "formposition",
+    "nodatamessage",
+    "rowsVersion",
+    "tableData",
+    "ColClassSignature",
+    "activeRowIds",
+    "selectedRowIds",
+    "editingRowId",
+    "table",
+    "renderAddNewRow",
+    "isAddingNewRow",
+    "customExpressionColumns",
+    "customColumnsRevision",
+    "columnsVersion"
+  ];
+  return keys.every((key) => {
+    if (key === "activeRowIds" || key === "selectedRowIds") {
+      return isEqual(prev[key], current[key]);
+    }
+    return prev[key] === current[key];
+  });
+});
+TableBodyComponent.displayName = "TableBodyComponent";
+export {
+  TableBodyComponent
+};

package/components/data/table/components/TableDataRow.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+interface DataRowProps {
+    row: any;
+    rowId: string;
+    isSelected: boolean;
+    isActive: boolean;
+    rowIsExpanded: boolean;
+    isEditingRow: boolean;
+    hasExpansion: boolean;
+    expansionInsertIndex: number;
+    renderExpansionCell: (rowId: string, rowData: any) => React.ReactNode;
+    rowClass: string;
+    onRowClick: (event: React.MouseEvent, rowOriginal: any, rowId: string) => void;
+    ColClassSignature: string;
+    rowsVersion: number;
+    tableData: any[];
+    ExpandedContent: React.ComponentType<any>;
+    rowExpansionConfig: any;
+    totalColumns: number;
+    index: number;
+    onInstanceLoad?: (rowId: string, instance: any, rowData: any) => void;
+    customExpressionColumns?: Record<string, (rowData: any) => React.ReactNode>;
+    customColumnsRevision?: number;
+    columnsVersion?: number;
+}
+export declare const TableDataRow: React.NamedExoticComponent<DataRowProps>;
+export {};

package/components/data/table/components/TableDataRow.js

@@ -0,0 +1,139 @@
+var __defProp = Object.defineProperty;
+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;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, Fragment, useMemo, useCallback } from "react";
+import { TableRow } from "@mui/material";
+import { RowCells } from "./RowCells";
+import { useEditedRow } from "../hooks/use-edited-rows";
+import { TABLE_CSS_CLASSES } from "../utils";
+const TableDataRowComponent = ({
+  row,
+  rowId,
+  isSelected,
+  isActive,
+  rowIsExpanded,
+  isEditingRow,
+  hasExpansion,
+  expansionInsertIndex,
+  renderExpansionCell,
+  rowClass,
+  onRowClick,
+  ColClassSignature,
+  rowsVersion,
+  tableData,
+  ExpandedContent,
+  rowExpansionConfig,
+  totalColumns,
+  index,
+  onInstanceLoad,
+  customExpressionColumns,
+  customColumnsRevision = 0,
+  columnsVersion = 0
+}) => {
+  const handleClick = useCallback(
+    (event) => onRowClick(event, row.original, rowId),
+    [onRowClick, row.original, rowId]
+  );
+  const editedTableData = useEditedRow(rowId);
+  const mergedRowData = useMemo(() => {
+    if (!editedTableData) {
+      return row.original;
+    }
+    const merged = __spreadValues(__spreadValues({}, row.original), editedTableData);
+    if (typeof row.original.getProperty === "function") {
+      merged.getProperty = (key) => {
+        if (editedTableData && Object.prototype.hasOwnProperty.call(editedTableData, key)) {
+          return editedTableData[key];
+        }
+        return row.original.getProperty(key);
+      };
+    }
+    return merged;
+  }, [row.original, editedTableData]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TableRow,
+      {
+        className: `${TABLE_CSS_CLASSES.tableRow} ${isActive ? "active" : ""} ${rowClass}`,
+        onClick: handleClick,
+        "data-row-id": row.index,
+        role: "row",
+        tabIndex: 0,
+        style: { cursor: "pointer" },
+        "data-editing": isEditingRow,
+        children: /* @__PURE__ */ jsx(
+          RowCells,
+          {
+            cells: row.getVisibleCells(),
+            hasExpansion,
+            expansionInsertIndex,
+            renderExpansionCell,
+            rowId,
+            rowData: mergedRowData,
+            ColClassSignature,
+            rowsVersion,
+            tableData,
+            isEditingRow,
+            isSelected,
+            customExpressionColumns,
+            customColumnsRevision,
+            columnsVersion
+          }
+        )
+      }
+    ),
+    hasExpansion && rowIsExpanded && rowExpansionConfig && /* @__PURE__ */ jsx(
+      ExpandedContent,
+      {
+        rowId,
+        rowData: row.original,
+        config: rowExpansionConfig,
+        colSpan: totalColumns,
+        onInstanceLoad
+      }
+    )
+  ] }, rowId);
+};
+const TableDataRow = memo(TableDataRowComponent, (prev, next) => {
+  const keys = [
+    "isSelected",
+    "isActive",
+    "rowIsExpanded",
+    "isEditingRow",
+    "rowClass",
+    "ColClassSignature",
+    "rowsVersion",
+    "row",
+    "index",
+    "customExpressionColumns",
+    "customColumnsRevision",
+    "columnsVersion",
+    // closure-captured props — stale closure if memo skips when these change
+    "onRowClick",
+    "renderExpansionCell",
+    "hasExpansion",
+    "expansionInsertIndex",
+    "ExpandedContent",
+    "onInstanceLoad",
+    "rowExpansionConfig",
+    "totalColumns"
+  ];
+  return keys.every((key) => prev[key] === next[key]);
+});
+export {
+  TableDataRow
+};

package/components/data/table/components/TableFilters.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { TableFilterMode } from "../props";
+interface GlobalSearchFilterProps {
+    value: string;
+    onChange: (value: string) => void;
+    selectedColumn: string;
+    onColumnChange: (columnId: string) => void;
+    columns: any[];
+    searchLabel?: string;
+    name?: string;
+    listener?: any;
+    filteronkeypress?: boolean;
+}
+export declare const GlobalSearchFilter: React.MemoExoticComponent<({ value, onChange, selectedColumn, onColumnChange, columns, searchLabel, name, filteronkeypress, listener, }: GlobalSearchFilterProps) => import("react/jsx-runtime").JSX.Element>;
+interface TableFilterRowProps {
+    columns: any[];
+    columnFilters: Record<string, any>;
+    onColumnFilterChange: (columnId: string, value: string, matchMode?: string) => void;
+    filterMode?: TableFilterMode;
+    listener: any;
+    renderFormWidget: (fieldName: string, widgetType: string, value: any, onChange: (value: any) => void, additionalProps?: any) => React.ReactNode;
+}
+export declare const TableFilterRow: React.MemoExoticComponent<({ columns, columnFilters, onColumnFilterChange, filterMode, renderFormWidget, listener, }: TableFilterRowProps) => import("react/jsx-runtime").JSX.Element>;
+export {};