@ramesesinc/platform-core 0.1.6 → 0.1.8

package/dist/components/table/DataTable.tsx

@@ -1,572 +0,0 @@
-import React, { memo, ReactNode, useMemo } from "react";
-import { RowProvider } from "../../core/RowContext";
-import { render } from "../../lib/utils/ExprUtil";
-import { useTableContext } from "./TableContext";
-
-// import "./DataTable.css";
-
-// ============================================================================
-// TYPE DEFINITIONS  (unchanged from original)
-// ============================================================================
-
-export interface ColumnDefinition {
-  id?: string;
-  title?: string | React.ReactNode;
-  width?: string | number;
-  align?: "left" | "center" | "right";
-  render?: (value: any, row: any, rowIndex: number) => React.ReactNode;
-  formatter?: (value: any, row?: any) => string;
-  colspan?: number;
-  rowspan?: number;
-  headerRow?: number;
-  datatype?: "string" | "number" | "date" | "boolean" | "currency" | "expr";
-  subrow?: number;
-  visible?: boolean;
-  sortable?: boolean;
-  expr?: string;
-  primary?: boolean;
-  component?: string | null;
-}
-
-export interface DataTableProps {
-  // When used INSIDE TableProvider these can be omitted; the context drives them.
-  data?: any[];
-  columns?: ColumnDefinition[];
-
-  loading?: boolean;
-  emptyMessage?: string;
-  striped?: boolean;
-  bordered?: boolean;
-  hover?: boolean;
-  dense?: boolean;
-  stickyHeader?: boolean;
-  maxHeight?: string | number;
-  rowKey?: string;
-  onRowClick?: (row: any, rowIndex: number) => void;
-  onCellClick?: (value: any, row: any, column: ColumnDefinition, rowIndex: number, colIndex: number) => void;
-  selectedRows?: string[];
-  onSelectionChange?: (selectedKeys: string[]) => void;
-  selectable?: boolean;
-  className?: string;
-  rowClassName?: (row: any, rowIndex: number) => string;
-  cellRenderer?: (value: any, row: any, column: ColumnDefinition) => React.ReactNode;
-  headerRenderer?: (column: ColumnDefinition) => React.ReactNode;
-  multiRowHeader?: ColumnDefinition[][];
-  rowActions?: (row: any, rowIndex: number) => React.ReactNode;
-  rowsPerItem?: number;
-}
-
-interface SortConfig {
-  key: string | null;
-  direction: "asc" | "desc" | null;
-}
-
-// ============================================================================
-// HEADER sub-component – pure, only re-renders when columns change
-// ============================================================================
-
-interface TableHeaderProps {
-  visibleColumns: ColumnDefinition[];
-  selectable: boolean;
-  rowActions?: (row: any, rowIndex: number) => React.ReactNode;
-  data: any[];
-  selectedRows: string[];
-  handleSelectAll: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  sortConfig: SortConfig;
-  handleSort: (columnId: string, sortable?: boolean) => void;
-  headerRenderer?: (column: ColumnDefinition) => React.ReactNode;
-  multiRowHeader?: ColumnDefinition[][];
-}
-
-const TableHeader = memo(
-  ({
-    visibleColumns,
-    selectable,
-    rowActions,
-    data,
-    selectedRows,
-    handleSelectAll,
-    sortConfig,
-    handleSort,
-    headerRenderer,
-    multiRowHeader,
-  }: TableHeaderProps) => {
-    const getColumnKey = (column: ColumnDefinition, index: number): string => column.id || column.expr || `col-${index}`;
-
-    const getColumnTitle = (column: ColumnDefinition): React.ReactNode => column.title || column.id || "";
-
-    const renderHeader = (column: ColumnDefinition) => {
-      if (headerRenderer) return headerRenderer(column);
-      const title = getColumnTitle(column);
-      if (!title) return null;
-      return (
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: column.align === "center" ? "center" : column.align === "right" ? "flex-end" : "flex-start",
-            gap: "6px",
-            cursor: column.sortable ? "pointer" : "default",
-            userSelect: "none",
-          }}
-          onClick={() => column.id && handleSort(column.id, column.sortable)}
-        >
-          {title}
-          {column.sortable && column.id && sortConfig.key === column.id && (
-            <span style={{ fontSize: "10px", color: "#3b82f6" }}>{sortConfig.direction === "asc" ? "▲" : "▼"}</span>
-          )}
-        </div>
-      );
-    };
-
-    if (multiRowHeader && multiRowHeader.length > 0) {
-      return (
-        <>
-          {multiRowHeader.map((headerRow, rowIndex) => (
-            <tr key={`header-row-${rowIndex}`}>
-              {selectable && rowIndex === 0 && (
-                <th className="dt-checkbox-cell" rowSpan={multiRowHeader.length}>
-                  <input type="checkbox" onChange={handleSelectAll} checked={data.length > 0 && selectedRows.length === data.length} />
-                </th>
-              )}
-              {headerRow.map((column, colIndex) => (
-                <th
-                  key={getColumnKey(column, colIndex)}
-                  style={{ width: column.width, textAlign: column.align || "left" }}
-                  colSpan={column.colspan}
-                  rowSpan={column.rowspan}
-                >
-                  {renderHeader(column)}
-                </th>
-              ))}
-              {rowActions && rowIndex === 0 && (
-                <th className="dt-actions-cell" rowSpan={multiRowHeader.length}>
-                  Actions
-                </th>
-              )}
-            </tr>
-          ))}
-        </>
-      );
-    }
-
-    // Auto multi-row detection
-    const needsMultiRow = visibleColumns.some(
-      (col) => (col.rowspan && col.rowspan > 1) || (col.colspan && col.colspan > 1) || (col.headerRow !== undefined && col.headerRow > 0),
-    );
-
-    if (needsMultiRow) {
-      const maxHeaderRow = Math.max(...visibleColumns.filter((col) => !col.subrow || col.subrow === 0).map((col) => col.headerRow ?? 0), 0);
-      const totalHeaderRows = maxHeaderRow + 1;
-      const headerRows: JSX.Element[] = [];
-
-      for (let rowIdx = 0; rowIdx <= maxHeaderRow; rowIdx++) {
-        const colsInRow = visibleColumns.filter((col) => {
-          if (col.subrow && col.subrow > 0) return false;
-          return (col.headerRow ?? 0) === rowIdx;
-        });
-        if (colsInRow.length === 0) continue;
-
-        headerRows.push(
-          <tr key={`header-row-${rowIdx}`}>
-            {selectable && rowIdx === 0 && (
-              <th className="dt-checkbox-cell" rowSpan={totalHeaderRows}>
-                <input type="checkbox" onChange={handleSelectAll} checked={data.length > 0 && selectedRows.length === data.length} />
-              </th>
-            )}
-            {colsInRow.map((column, index) => (
-              <th
-                key={getColumnKey(column, index)}
-                style={{
-                  width: column.width,
-                  textAlign: column.align || (column.colspan ? "center" : "left"),
-                }}
-                rowSpan={column.rowspan || 1}
-                colSpan={column.colspan || 1}
-                className={column.sortable ? "sortable" : ""}
-              >
-                {renderHeader(column)}
-              </th>
-            ))}
-            {rowActions && rowIdx === 0 && (
-              <th className="dt-actions-cell" rowSpan={totalHeaderRows}>
-                Actions
-              </th>
-            )}
-          </tr>,
-        );
-      }
-      return <>{headerRows}</>;
-    }
-
-    // Simple single-row header
-    return (
-      <tr>
-        {selectable && (
-          <th className="dt-checkbox-cell">
-            <input type="checkbox" onChange={handleSelectAll} checked={data.length > 0 && selectedRows.length === data.length} />
-          </th>
-        )}
-        {visibleColumns.map((column, index) => {
-          if (column.subrow && column.subrow > 0) return null;
-          return (
-            <th
-              key={getColumnKey(column, index)}
-              style={{ width: column.width, textAlign: column.align || "left" }}
-              className={column.sortable ? "sortable" : ""}
-            >
-              {renderHeader(column)}
-            </th>
-          );
-        })}
-        {rowActions && <th className="dt-actions-cell">Actions</th>}
-      </tr>
-    );
-  },
-);
-
-// ============================================================================
-// BODY sub-component – pure, only re-renders when rows change
-// ============================================================================
-
-interface TableBodyProps {
-  sortedData: any[];
-  visibleColumns: ColumnDefinition[];
-  emptyMessage: string;
-  selectable: boolean;
-  rowActions?: (row: any, rowIndex: number) => React.ReactNode;
-  selectedRows: string[];
-  handleSelectRow: (row: any) => void;
-  handleRowClick: (row: any, rowIndex: number) => void;
-  handleCellClick: (e: React.MouseEvent, value: any, row: any, column: ColumnDefinition, rowIndex: number, colIndex: number) => void;
-  rowClassName?: (row: any, rowIndex: number) => string;
-  rowKey: string;
-  rowsPerItem: number;
-  cellRenderer?: (value: any, row: any, column: ColumnDefinition) => React.ReactNode;
-}
-
-const TableBody = memo(
-  ({
-    sortedData,
-    visibleColumns,
-    emptyMessage,
-    selectable,
-    rowActions,
-    selectedRows,
-    handleSelectRow,
-    handleRowClick,
-    handleCellClick,
-    rowClassName,
-    rowKey,
-    rowsPerItem,
-    cellRenderer,
-  }: TableBodyProps) => {
-    const generateKey = () => `RP-${Math.random().toString(36).slice(2)}`;
-    const getNestedValue = (obj: any, path?: string): any => {
-      if (!path) return null;
-      return path.split(".").reduce((acc, part) => acc && acc[part], obj);
-    };
-
-    const getRowKey = (row: any): string => row[rowKey] || JSON.stringify(row);
-    const isRowSelected = (row: any): boolean => selectedRows.includes(getRowKey(row));
-    const getColumnKey = (column: ColumnDefinition, index: number): string => column.id || column.expr || `col-${index}`;
-
-    /*
-    const renderExpression = (expr: string, row: any): string => {
-      try {
-        return expr.replace(/\{\{(\w+(?:\.\w+)*)\}\}/g, (_match, path) => {
-          const value = getNestedValue(row, path);
-          return value != null ? String(value) : "";
-        });
-      } catch (err: any) {
-        return `Error: ${err.message}`;
-      }
-    };
-    */
-
-    const formatValue = (value: any, datatype = "string", row: any): string => {
-      if (value === null || value === undefined) return "";
-      switch (datatype) {
-        case "number":
-          return typeof value === "number" ? value.toLocaleString() : value;
-        case "currency":
-          return typeof value === "number" ? `$${value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : value;
-        case "date":
-          return value instanceof Date ? value.toLocaleDateString() : new Date(value).toLocaleDateString();
-        case "boolean":
-          return value ? "✓" : "✗";
-        default:
-          return String(value);
-      }
-    };
-
-    const renderCellContent = (row: any, column: ColumnDefinition, rowIndex: number) => {
-      if (column.expr) {
-        const rendered = render(column.expr, row);
-        if (column.render) return column.render(rendered, row, rowIndex);
-        return <span dangerouslySetInnerHTML={{ __html: rendered }} />;
-      }
-      const value = column.id ? getNestedValue(row, column.id) : null;
-      if (cellRenderer) return cellRenderer(value, row, column);
-      if (column.render) return column.render(value, row, rowIndex);
-      if (column.formatter) return column.formatter(value, row);
-      return formatValue(value, column.datatype || "string", row);
-    };
-
-    if (!sortedData || sortedData.length === 0) {
-      return (
-        <tr>
-          <td colSpan={visibleColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} style={{ textAlign: "center", padding: "24px" }}>
-            {emptyMessage}
-          </td>
-        </tr>
-      );
-    }
-
-    return (
-      <>
-        {sortedData.map((row, itemIndex) => {
-          const isSelected = isRowSelected(row);
-          const customRowClass = rowClassName ? rowClassName(row, itemIndex) : "";
-          const rows: ReactNode[] = [];
-
-          for (let subrowIndex = 0; subrowIndex < rowsPerItem; subrowIndex++) {
-            const rowClasses = [isSelected && "dt-selected", customRowClass].filter(Boolean).join(" ");
-
-            rows.push(
-              <RowProvider key={generateKey()} data={row}>
-                <tr key={`${getRowKey(row)}-subrow-${subrowIndex}`} className={rowClasses} onClick={() => handleRowClick(row, itemIndex)}>
-                  {selectable && subrowIndex === 0 && (
-                    <td className="dt-checkbox-cell" rowSpan={rowsPerItem}>
-                      <input type="checkbox" checked={isSelected} onChange={() => handleSelectRow(row)} onClick={(e) => e.stopPropagation()} />
-                    </td>
-                  )}
-                  {visibleColumns.map((column, colIndex) => {
-                    if (!column.id && !column.expr) return null;
-                    if ((column.subrow || 0) !== subrowIndex) return null;
-                    if (column.subrow && column.subrow > 0 && subrowIndex > 0) return null;
-
-                    const value = column.id ? getNestedValue(row, column.id) : null;
-                    return (
-                      <td
-                        key={getColumnKey(column, colIndex)}
-                        style={{ textAlign: column.align || "left" }}
-                        className={`
-                        ${column.datatype === "number" || column.datatype === "currency" ? "dt-numeric" : ""}
-                        ${column.datatype === "boolean" ? "dt-boolean" : ""}
-                      `.trim()}
-                        onClick={(e) => handleCellClick(e, value, row, column, itemIndex, colIndex)}
-                      >
-                        {renderCellContent(row, column, itemIndex)}
-                      </td>
-                    );
-                  })}
-                  {rowActions && subrowIndex === 0 && (
-                    <td className="dt-actions-cell" rowSpan={rowsPerItem}>
-                      {rowActions(row, itemIndex)}
-                    </td>
-                  )}
-                </tr>
-              </RowProvider>,
-            );
-          }
-          return rows;
-        })}
-      </>
-    );
-  },
-);
-
-// ============================================================================
-// DATATABLE COMPONENT
-// ============================================================================
-
-export const DataTable: React.FC<DataTableProps> = ({
-  // Direct props (fallback when used outside TableProvider)
-  data: propData,
-  columns: propColumns,
-
-  loading: propLoading = false,
-  emptyMessage = "No data available",
-  striped = false,
-  bordered = false,
-  hover = true,
-  dense = false,
-  stickyHeader = false,
-  maxHeight,
-  rowKey = "id",
-  onRowClick,
-  onCellClick,
-  selectedRows = [],
-  onSelectionChange,
-  selectable = false,
-  className = "",
-  rowClassName,
-  cellRenderer,
-  headerRenderer,
-  multiRowHeader,
-  rowActions,
-  rowsPerItem = 1,
-}) => {
-  // Try to consume context; if not inside a provider, ctx will be null.
-  let ctxColumns: ColumnDefinition[] | undefined;
-  let ctxRows: any[] | undefined;
-  let ctxLoading: boolean | undefined;
-
-  try {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const ctx = useTableContext();
-    ctxColumns = ctx.columns;
-    ctxRows = ctx.rows;
-    ctxLoading = ctx.loading;
-  } catch {
-    // Not inside TableProvider – use props directly
-  }
-
-  // Context wins over direct props
-  const data: any[] = ctxRows ?? propData ?? [];
-  const columns: ColumnDefinition[] = propColumns ?? ctxColumns ?? [];
-  const loading = ctxLoading ?? propLoading;
-
-  // ---- Sort state ----
-  const [sortConfig, setSortConfig] = React.useState<SortConfig>({
-    key: null,
-    direction: null,
-  });
-
-  // ---- Derived values ----
-  const visibleColumns = useMemo(
-    () =>
-      columns.filter((col) => {
-        if (col.visible === false) return false;
-        return col.title || col.id || col.expr || col.render;
-      }),
-    [columns],
-  );
-
-  const sortedData = useMemo(() => {
-    if (!sortConfig.key) return data;
-    const getNestedValue = (obj: any, path: string): any => path.split(".").reduce((acc, part) => acc && acc[part], obj);
-
-    return [...data].sort((a, b) => {
-      const aVal = getNestedValue(a, sortConfig.key!);
-      const bVal = getNestedValue(b, sortConfig.key!);
-      if (aVal === bVal) return 0;
-      if (aVal == null) return 1;
-      if (bVal == null) return -1;
-      const cmp = aVal < bVal ? -1 : 1;
-      return sortConfig.direction === "asc" ? cmp : -cmp;
-    });
-  }, [data, sortConfig]);
-
-  // ---- Handlers ----
-  const handleRowClick = (row: any, rowIndex: number) => onRowClick?.(row, rowIndex);
-
-  const handleCellClick = (e: React.MouseEvent, value: any, row: any, column: ColumnDefinition, rowIndex: number, colIndex: number) => {
-    e.stopPropagation();
-    onCellClick?.(value, row, column, rowIndex, colIndex);
-  };
-
-  const getRowKey = (row: any): string => row[rowKey] || JSON.stringify(row);
-
-  const handleSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!onSelectionChange) return;
-    if (e.target.checked) {
-      onSelectionChange(data.map((row) => getRowKey(row)));
-    } else {
-      onSelectionChange([]);
-    }
-  };
-
-  const handleSelectRow = (row: any) => {
-    if (!onSelectionChange) return;
-    const key = getRowKey(row);
-    if (selectedRows.includes(key)) {
-      onSelectionChange(selectedRows.filter((k) => k !== key));
-    } else {
-      onSelectionChange([...selectedRows, key]);
-    }
-  };
-
-  const handleSort = (columnId: string, sortable?: boolean) => {
-    if (!sortable) return;
-    setSortConfig((prev) => {
-      if (prev.key === columnId) {
-        if (prev.direction === "asc") return { key: columnId, direction: "desc" };
-        if (prev.direction === "desc") return { key: null, direction: null };
-      }
-      return { key: columnId, direction: "asc" };
-    });
-  };
-
-  // ---- CSS ----
-  const tableClasses = [
-    "data-table",
-    striped && "dt-striped",
-    bordered && "dt-bordered",
-    hover && "dt-hover",
-    dense && "dt-dense",
-    stickyHeader && "dt-sticky-header",
-    className,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  const containerStyle: React.CSSProperties = {};
-  if (maxHeight) {
-    containerStyle.maxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
-    containerStyle.overflowY = "auto";
-  }
-
-  // ---- Render ----
-  if (loading) {
-    return (
-      <div className="dt-loading">
-        <div className="dt-spinner"></div>
-        <p>Loading...</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="dt-container" style={containerStyle}>
-      <table className={tableClasses}>
-        <thead>
-          {/* TableHeader only re-renders when columns or sort config changes */}
-          <TableHeader
-            visibleColumns={visibleColumns}
-            selectable={selectable}
-            rowActions={rowActions}
-            data={data}
-            selectedRows={selectedRows}
-            handleSelectAll={handleSelectAll}
-            sortConfig={sortConfig}
-            handleSort={handleSort}
-            headerRenderer={headerRenderer}
-            multiRowHeader={multiRowHeader}
-          />
-        </thead>
-        <tbody>
-          {/* TableBody only re-renders when rows change */}
-          <TableBody
-            sortedData={sortedData}
-            visibleColumns={visibleColumns}
-            emptyMessage={emptyMessage}
-            selectable={selectable}
-            rowActions={rowActions}
-            selectedRows={selectedRows}
-            handleSelectRow={handleSelectRow}
-            handleRowClick={handleRowClick}
-            handleCellClick={handleCellClick}
-            rowClassName={rowClassName}
-            rowKey={rowKey}
-            rowsPerItem={rowsPerItem}
-            cellRenderer={cellRenderer}
-          />
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-export default DataTable;