@jmruthers/pace-core 0.6.1 → 0.6.3

package/src/components/DataTable/components/RowComponent.tsx

@@ -0,0 +1,391 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { flexRender } from '@tanstack/react-table';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { Button } from '../../Button/Button';
+import { ActionButtons } from './ActionButtons';
+import { EditableRow } from './EditableRow';
+import { cn } from '../../../utils/core/cn';
+import { createLogger } from '../../../utils/core/logger';
+import { getTableCellClasses, getTableRowClasses } from '../styles';
+import type {
+  DataRecord,
+  DataTableAction,
+  DataTableColumn,
+  HierarchicalConfig,
+  HierarchicalDataRow,
+} from '../types';
+import { calculateIndentation } from '../utils/hierarchicalUtils';
+import { getRowIdSafe } from '../utils/rowUtils';
+
+/**
+ * Props for the Row component.
+ * Defines the configuration for rendering a single table row.
+ */
+export interface RowProps {
+  row: any;
+  style?: React.CSSProperties;
+  isEditing?: boolean;
+  editingData?: Record<string, any>;
+  onEditingDataChange?: (data: Record<string, any>) => void;
+  onSaveEditing?: () => void;
+  onCancelEditing?: () => void;
+  getRowId?: (row: any, index: number) => string;
+  grouping: string[];
+  editingRowId?: string | null;
+  hierarchical?:
+    | (HierarchicalConfig & {
+        state?: {
+          isExpanded: (rowId: string) => boolean;
+          hasChildren: (rowId: string) => boolean;
+          getChildrenCount: (rowId: string) => number;
+          toggleRow: (rowId: string) => void;
+        };
+      })
+    | undefined;
+  actions?: DataTableAction<DataRecord>[] | Array<{
+    label: string;
+    onClick: (row: any) => void;
+    icon?: any;
+    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';
+    disabled?: boolean | ((row?: any) => boolean);
+    visible?: boolean | ((row?: any) => boolean);
+    testId?: string;
+    showInEditMode?: boolean;
+    hideInViewMode?: boolean;
+    showInViewMode?: boolean;
+    hidden?: boolean;
+    showForParent?: boolean;
+    showForChild?: boolean;
+    parentIcon?: any;
+    childIcon?: any;
+    parentLabel?: string;
+    childLabel?: string;
+  }>;
+  rbac?: {
+    pageId?: string;
+    pageName?: string;
+  };
+  permissions?: {
+    canRead: { can: boolean; isLoading: boolean };
+    canCreate: { can: boolean; isLoading: boolean };
+    canUpdate: { can: boolean; isLoading: boolean };
+    canDelete: { can: boolean; isLoading: boolean };
+    canExport: { can: boolean; isLoading: boolean };
+    canImport: { can: boolean; isLoading: boolean };
+  };
+}
+
+const RowComponent = ({
+    row,
+    style,
+    isEditing,
+    editingData,
+    onEditingDataChange,
+    onSaveEditing,
+    onCancelEditing,
+    getRowId,
+    grouping,
+    editingRowId,
+    hierarchical,
+    actions,
+    rbac,
+    permissions,
+  }: RowProps) => {
+    const rowRef = useRef<HTMLTableRowElement>(null);
+    const firstInputRef = useRef<HTMLInputElement>(null);
+    const logger = createLogger('RowComponent');
+
+    const rowId = getRowIdSafe(row.original, row.index, getRowId);
+
+    const hierarchicalRow = row.original as HierarchicalDataRow;
+    const isHierarchical = hierarchical?.enabled && hierarchicalRow?.isParent !== undefined;
+    const isParent = isHierarchical && hierarchicalRow.isParent;
+    const isChild = isHierarchical && !hierarchicalRow.isParent;
+
+    const visibleCells = row.getVisibleCells();
+    const isSelected = typeof row.getIsSelected === 'function' ? row.getIsSelected() : false;
+
+    useEffect(() => {
+      if (isEditing && firstInputRef.current) {
+        firstInputRef.current.focus();
+        firstInputRef.current.select();
+      }
+    }, [isEditing]);
+
+    useEffect(() => {
+      if (!isEditing) return;
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        const target = event.target as HTMLElement;
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+          if (event.key === 'Enter' && !event.shiftKey && target.tagName === 'INPUT') {
+            event.preventDefault();
+            onSaveEditing?.();
+          } else if (event.key === 'Escape') {
+            event.preventDefault();
+            onCancelEditing?.();
+          }
+        }
+      };
+
+      const currentRow = rowRef.current;
+      if (currentRow) {
+        currentRow.addEventListener('keydown', handleKeyDown);
+        return () => {
+          currentRow.removeEventListener('keydown', handleKeyDown);
+        };
+      }
+    }, [isEditing, onSaveEditing, onCancelEditing]);
+
+    // CRITICAL: All hooks must be called before any early returns to avoid React hooks violations
+    // Move useMemo hooks here so they're always called, regardless of early returns below
+    const indentSize = hierarchical?.indentSize || 24;
+    const indentation = useMemo(() => {
+      return isChild && hierarchical?.state ? calculateIndentation(hierarchicalRow, [], indentSize) : 0;
+    }, [isChild, hierarchical?.state, hierarchicalRow, indentSize]);
+
+    const rowClassName = useMemo(() => {
+      if (isHierarchical) {
+        const hierarchicalClass = isParent
+          ? hierarchical?.parentRowClassName || 'bg-main-50 hover:bg-main-100 font-medium'
+          : hierarchical?.childRowClassName || 'bg-sec-25 hover:bg-sec-50';
+        return cn(getTableRowClasses({ isSelected, isVirtualized: false }), hierarchicalClass);
+      }
+      return getTableRowClasses({ isSelected, isVirtualized: false });
+    }, [isHierarchical, isParent, isSelected, hierarchical]);
+
+    if (row.getIsGrouped && row.getIsGrouped()) {
+      const groupValue = row.getValue(grouping[0]);
+      const subRowsCount = row.subRows?.length || 0;
+      const isExpanded = row.getIsExpanded();
+
+      const childRows: DataRecord[] = row.subRows?.map((subRow: any) => subRow.original) || [];
+
+      return (
+        <tr className="bg-sec-50 hover:bg-sec-100" style={style}>
+          {visibleCells.map((cell: any, cellIndex: number) => {
+            const columnDef = cell.column.columnDef as DataTableColumn<DataRecord>;
+            const isGroupingColumn = cellIndex === 0 || grouping.includes(cell.column.id || '');
+
+            if (isGroupingColumn && cellIndex === 0) {
+              return (
+                <td
+                  key={cell.id}
+                  className={getTableCellClasses({
+                    isCompact: true,
+                    className: 'px-3 py-2 flex items-center font-medium',
+                  })}
+                >
+                  <Button variant="ghost" size="sm" onClick={() => row.toggleExpanded()} className="p-0 h-auto mr-2">
+                    {isExpanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
+                  </Button>
+                  <span className="text-sm">
+                    {String(groupValue)} ({subRowsCount} items)
+                  </span>
+                </td>
+              );
+            }
+
+            if (columnDef.aggregateFn && childRows.length > 0) {
+              try {
+                const aggregatedValue = columnDef.aggregateFn(childRows, columnDef);
+
+                let cellContent: React.ReactNode;
+                if (columnDef.aggregateCell) {
+                  cellContent = columnDef.aggregateCell(aggregatedValue, childRows, columnDef);
+                } else if (columnDef.cell) {
+                  const mockCell = {
+                    ...cell,
+                    getValue: () => aggregatedValue,
+                    renderValue: () => aggregatedValue,
+                  };
+                  cellContent = flexRender(columnDef.cell, {
+                    ...mockCell,
+                    row: row,
+                    column: cell.column,
+                    cell: mockCell,
+                    getValue: () => aggregatedValue,
+                    renderValue: () => aggregatedValue,
+                  });
+                } else {
+                  cellContent = aggregatedValue != null ? String(aggregatedValue) : '';
+                }
+
+                return (
+                  <td
+                    key={cell.id}
+                    className={getTableCellClasses({
+                      isCompact: true,
+                      className: `px-3 py-2 ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`,
+                    })}
+                  >
+                    {cellContent}
+                  </td>
+                );
+              } catch (error) {
+                logger.warn('Error in aggregation function:', error);
+                return (
+                  <td
+                    key={cell.id}
+                    className={getTableCellClasses({
+                      isCompact: true,
+                      className: 'px-3 py-2',
+                    })}
+                  />
+                );
+              }
+            }
+
+            return (
+              <td
+                key={cell.id}
+                className={getTableCellClasses({
+                  isCompact: true,
+                  className: 'px-3 py-2',
+                })}
+              />
+            );
+          })}
+        </tr>
+      );
+    }
+
+    if (isEditing && editingData && onEditingDataChange && onSaveEditing && onCancelEditing) {
+      return (
+        <EditableRow
+          row={row}
+          editingData={editingData}
+          onEditingDataChange={onEditingDataChange}
+          onSave={onSaveEditing}
+          onCancel={onCancelEditing}
+          actions={actions ?? []}
+          getRowId={getRowId}
+          isParent={isParent}
+          hierarchical={!!hierarchical}
+        />
+      );
+    }
+
+    return (
+      <tr
+        ref={rowRef}
+        key={row.id}
+        role="row"
+        style={{
+          ...style,
+          ...(isChild && indentation > 0 ? { paddingLeft: `${indentation}px` } : {}),
+        }}
+        className={rowClassName}
+        aria-selected={isSelected ? 'true' : 'false'}
+      >
+        {visibleCells.map((cell: any, cellIndex: number) => {
+          const isFirstCell = cellIndex === 0;
+          const shouldShowExpansionButton = isHierarchical && isParent && isFirstCell && hierarchical?.state;
+          const isExpanded = shouldShowExpansionButton ? hierarchical?.state?.isExpanded(rowId) : false;
+          const hasChildren = shouldShowExpansionButton ? hierarchical?.state?.hasChildren(rowId) : false;
+
+          return (
+            <td
+              key={cell.id}
+              className={getTableCellClasses({
+                isCompact: true,
+                className: `px-3 py-2 ${
+                  cell.column.id === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words'
+                } ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`,
+              })}
+            >
+              {shouldShowExpansionButton && hasChildren && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => hierarchical?.state?.toggleRow(rowId)}
+                  className="size-6 p-0 flex-shrink-0"
+                  aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
+                  title={isExpanded ? 'Collapse row' : 'Expand row'}
+                >
+                  {isExpanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
+                </Button>
+              )}
+              {cell.column.id === 'actions' ? (
+                <ActionButtons
+                  row={row}
+                  actions={actions}
+                  isEditing={isEditing}
+                  isParent={isParent}
+                  hierarchical={!!hierarchical}
+                  rbac={rbac}
+                  permissions={permissions}
+                />
+              ) : (
+                flexRender(cell.column.columnDef.cell, {
+                  ...cell.getContext(),
+                  hierarchical: hierarchical,
+                  isParent: isParent,
+                  isChild: isChild,
+                  isHierarchical: isHierarchical,
+                  rowId: rowId,
+                  isExpanded: isExpanded,
+                  hasChildren: hasChildren,
+                })
+              )}
+            </td>
+          );
+        })}
+      </tr>
+    );
+  };
+
+RowComponent.displayName = 'RowComponent';
+
+const areRowPropsEqual = (prevProps: RowProps, nextProps: RowProps): boolean => {
+  if (prevProps.row.id !== nextProps.row.id || prevProps.row.index !== nextProps.row.index) {
+    return false;
+  }
+
+  if (prevProps.isEditing !== nextProps.isEditing) {
+    return false;
+  }
+
+  if (prevProps.editingRowId !== nextProps.editingRowId) {
+    return false;
+  }
+
+  if (prevProps.style !== nextProps.style) {
+    if (!prevProps.style || !nextProps.style) {
+      return false;
+    }
+    const prevStyle = prevProps.style as Record<string, unknown>;
+    const nextStyle = nextProps.style as Record<string, unknown>;
+    const styleKeys = new Set([...Object.keys(prevStyle), ...Object.keys(nextStyle)]);
+    for (const key of styleKeys) {
+      if (prevStyle[key] !== nextStyle[key]) {
+        return false;
+      }
+    }
+  }
+
+  if (
+    prevProps.grouping.length !== nextProps.grouping.length ||
+    prevProps.grouping.some((id, i) => id !== nextProps.grouping[i])
+  ) {
+    return false;
+  }
+
+  if (prevProps.hierarchical?.enabled !== nextProps.hierarchical?.enabled) {
+    return false;
+  }
+
+  const prevSelected = typeof prevProps.row.getIsSelected === 'function' ? prevProps.row.getIsSelected() : false;
+  const nextSelected = typeof nextProps.row.getIsSelected === 'function' ? nextProps.row.getIsSelected() : false;
+  if (prevSelected !== nextSelected) {
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * Memoized row component for performance optimization.
+ * Prevents unnecessary re-renders when row props haven't changed.
+ */
+export const MemoizedRow = React.memo(RowComponent, areRowPropsEqual);