@opencorestack/opengridx 0.1.6 → 0.1.7

package/lib/hooks/features/useGridDataSource.ts

@@ -0,0 +1,190 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { 
+  GridDataSource, 
+  GridRowModel, 
+  GridSortItem, 
+  GridFilterModel, 
+  GridPaginationModel,
+  GridGetRowsParams,
+  GridAggregationModel,
+  GridAggregationResult,
+} from '../../types';
+
+interface UseGridDataSourceParams<R extends GridRowModel> {
+  dataSource?: GridDataSource<R>;
+  sortModel: GridSortItem[];
+  filterModel: GridFilterModel;
+  paginationModel: GridPaginationModel;
+  paginationMode?: 'client' | 'server' | 'infinite';
+  sortingMode?: 'client' | 'server';
+  filterMode?: 'client' | 'server';
+  aggregationModel?: GridAggregationModel;
+  setRows: (rows: R[] | ((prev: R[]) => R[]), preserveRowCount?: boolean) => void;
+  setRowCount: (count: number) => void;
+  setDataSourceLoading: (loading: boolean) => void;
+  setDataSourceError: (error: any) => void;
+    onAggregationResults?: (results: GridAggregationResult) => void;
+}
+
+export function useGridDataSource<R extends GridRowModel>(params: UseGridDataSourceParams<R>) {
+  const {
+    dataSource,
+    sortModel,
+    filterModel,
+    paginationModel,
+    paginationMode,
+    sortingMode,
+    filterMode,
+    aggregationModel,
+    setRows,
+    setRowCount,
+    setDataSourceLoading,
+    setDataSourceError,
+    onAggregationResults,
+  } = params;
+
+  const prevParamsRef = useRef<{
+    sortModel: GridSortItem[];
+    filterModel: GridFilterModel;
+    page: number;
+    pageSize: number;
+  } | null>(null);
+
+  const activeRequestRef = useRef<number>(0);
+
+  const fetchRows = useCallback(async () => {
+    if (!dataSource) return;
+
+    const requestId = ++activeRequestRef.current;
+
+    setDataSourceLoading(true);
+    setDataSourceError(null);
+
+    const startRow = paginationModel.page * paginationModel.pageSize;
+    const endRow = startRow + paginationModel.pageSize;
+
+    const requestParams: GridGetRowsParams = {
+      startRow,
+      endRow,
+      sortModel,
+      filterModel,
+      groupKeys: [], 
+      aggregationModel,
+    };
+
+    try {
+      const response = await dataSource.getRows(requestParams);
+
+      if (requestId !== activeRequestRef.current) {
+        return;
+      }
+
+      let shouldAppend = false;
+
+      if (paginationMode === 'infinite') {
+        const prev = prevParamsRef.current;
+        if (prev) {
+
+          const sortChanged = JSON.stringify(prev.sortModel) !== JSON.stringify(sortModel);
+          const filterChanged = JSON.stringify(prev.filterModel) !== JSON.stringify(filterModel);
+          const pageSizeChanged = prev.pageSize !== paginationModel.pageSize;
+
+          if (!sortChanged && !filterChanged && !pageSizeChanged && paginationModel.page > prev.page) {
+            shouldAppend = true;
+          }
+        }
+      }
+
+      if (shouldAppend) {
+        setRows((prevRows) => [...prevRows, ...response.rows], true);
+      } else {
+        setRows(response.rows, true);
+      }
+
+      if (response.aggregationResults && onAggregationResults) {
+        onAggregationResults(response.aggregationResults);
+      }
+
+      if (response.rowCount !== undefined) {
+        setRowCount(response.rowCount);
+      } else if (paginationMode === 'infinite') {
+
+      }
+
+      prevParamsRef.current = {
+        sortModel,
+        filterModel,
+        page: paginationModel.page,
+        pageSize: paginationModel.pageSize
+      };
+
+    } catch (error) {
+      if (requestId === activeRequestRef.current) {
+        setDataSourceError(error);
+        console.error('Data Source Error:', error);
+      }
+    } finally {
+      if (requestId === activeRequestRef.current) {
+        setDataSourceLoading(false);
+      }
+    }
+  }, [
+    dataSource, 
+    paginationModel.page, 
+    paginationModel.pageSize, 
+    sortModel, 
+    filterModel,
+    paginationMode,
+    aggregationModel,
+    onAggregationResults,
+    setRows,
+    setRowCount,
+    setDataSourceLoading,
+    setDataSourceError
+  ]);
+
+  useEffect(() => {
+    const isServerSide = paginationMode === 'server' || paginationMode === 'infinite' || sortingMode === 'server' || filterMode === 'server';
+
+    if (dataSource && isServerSide) {
+      const timer = setTimeout(() => {
+        fetchRows();
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [fetchRows, dataSource, paginationMode, sortingMode, filterMode]);
+
+  const fetchChildren = useCallback(async (_parentId: string | number, groupKeys: string[]) => {
+      if (!dataSource) return;
+
+      setDataSourceLoading(true);
+      try {
+          const response = await dataSource.getRows({
+              startRow: 0,
+              endRow: -1, 
+              sortModel,
+              filterModel,
+              groupKeys
+          });
+
+          if (response.rows.length > 0) {
+              setRows((prevRows) => {
+
+                  const existingIds = new Set(prevRows.map(r => r.id));
+                  const newRows = response.rows.filter(r => !existingIds.has(r.id));
+                  return [...prevRows, ...newRows];
+              });
+          }
+      } catch (error) {
+          setDataSourceError(error);
+          console.error('Failed to fetch children:', error);
+      } finally {
+          setDataSourceLoading(false);
+      }
+  }, [dataSource, sortModel, filterModel, setRows, setDataSourceLoading, setDataSourceError]);
+
+  return {
+    fetchRows,
+    fetchChildren
+  };
+}

package/lib/hooks/features/useGridEditing.ts

@@ -0,0 +1,100 @@
+import { useState, useCallback, useRef } from 'react';
+import type { GridRowId, GridRowModel } from '../../types';
+
+export interface GridEditingState {
+
+    editingCell: {
+        id: GridRowId;
+        field: string;
+        value: any;
+        originalValue: any;
+    } | null;
+}
+
+export interface UseGridEditingParams<R extends GridRowModel> {
+    rows: R[];
+    getRowId: (row: R) => GridRowId;
+    processRowUpdate?: (newRow: R, oldRow: R) => R | Promise<R>;
+    onProcessRowUpdateError?: (error: any) => void;
+    onRowChange?: (newRow: R) => void; 
+}
+
+export function useGridEditing<R extends GridRowModel>(params: UseGridEditingParams<R>) {
+    const { 
+        rows, 
+        getRowId, 
+        processRowUpdate, 
+        onProcessRowUpdateError,
+        onRowChange 
+    } = params;
+
+    const [editingCell, setEditingCellState] = useState<GridEditingState['editingCell']>(null);
+    const editingCellRef = useRef<GridEditingState['editingCell']>(null);
+
+    const setEditingCell = useCallback((val: any) => {
+        setEditingCellState(val);
+        editingCellRef.current = typeof val === 'function' ? val(editingCellRef.current) : val;
+    }, []);
+
+    const startCellEdit = useCallback((params: { id: GridRowId, field: string, value: any }) => {
+        setEditingCell({
+            id: params.id,
+            field: params.field,
+            value: params.value,
+            originalValue: params.value
+        });
+    }, []);
+
+    const stopCellEdit = useCallback(async (params?: { cancel?: boolean }) => {
+        const currentCell = editingCellRef.current;
+        if (!currentCell) return;
+
+        if (params?.cancel) {
+            setEditingCell(null);
+            return;
+        }
+
+        const { id, field, value, originalValue } = currentCell;
+
+        if (value === originalValue) {
+            setEditingCell(null);
+            return;
+        }
+
+        const existingRow = rows.find(r => getRowId(r) === id);
+        if (!existingRow) {
+             setEditingCell(null);
+             return;
+        }
+
+        const newRow = { ...existingRow, [field]: value };
+
+        try {
+            if (processRowUpdate) {
+                const processedRow = await processRowUpdate(newRow, existingRow);
+                onRowChange?.(processedRow);
+            } else {
+                onRowChange?.(newRow);
+            }
+            setEditingCell(null);
+        } catch (error) {
+            if (onProcessRowUpdateError) {
+                onProcessRowUpdateError(error);
+            }
+        }
+
+    }, [editingCell, rows, getRowId, processRowUpdate, onRowChange, onProcessRowUpdateError]);
+
+    const setEditCellValue = useCallback((params: { id: GridRowId, field: string, value: any }) => {
+        if (editingCell && editingCell.id === params.id && editingCell.field === params.field) {
+            setEditingCell((prev: any) => prev ? { ...prev, value: params.value } : null);
+        }
+    }, [editingCell]);
+
+    return {
+        editingCell,
+        startCellEdit,
+        stopCellEdit,
+        setEditCellValue
+    };
+}

package/lib/hooks/features/useGridSpanning.ts

@@ -0,0 +1,349 @@
+
+import { useState, useCallback, useEffect } from 'react';
+import type { GridRowId, GridColDef, GridRowModel, GridRenderCellParams } from '../../types';
+
+type ColumnKey = string;
+
+export type CellColSpanInfo = 
+  | { 
+      spannedByColSpan: true; 
+      rightVisibleCellIndex: number; 
+      leftVisibleCellIndex: number; 
+    }
+  | { 
+      spannedByColSpan: false; 
+      cellProps: { 
+        colSpan: number; 
+        width: number; 
+      }; 
+    };
+
+type ColspanMap = Map<GridRowId, Record<ColumnKey, CellColSpanInfo>>;
+
+export interface RowSpanningCaches {
+  spannedCells: Record<GridRowId, Record<ColumnKey, number>>;
+  hiddenCells: Record<GridRowId, Record<ColumnKey, boolean>>;
+  hiddenCellOriginMap: Record<number, Record<ColumnKey, number>>;
+}
+
+export interface RowSpanningState {
+  caches: RowSpanningCaches;
+  processedRange: { firstRowIndex: number; lastRowIndex: number; };
+}
+
+export function useGridSpanning<R extends GridRowModel>(
+  rows: R[],
+  columns: GridColDef<R>[],
+  columnWidths: Record<string, number>
+) {
+
+  const [colspanMap, setColspanMap] = useState<ColspanMap>(new Map());
+
+  const [rowSpanningState, setRowSpanningState] = useState<RowSpanningState>({
+    caches: {
+      spannedCells: {},
+      hiddenCells: {},
+      hiddenCellOriginMap: {}
+    },
+    processedRange: { firstRowIndex: 0, lastRowIndex: 0 }
+  });
+
+  const resetColSpan = useCallback(() => {
+    setColspanMap(new Map());
+  }, []);
+
+  const getCellColSpanInfo = useCallback((rowId: GridRowId, field: string): CellColSpanInfo | undefined => {
+    return colspanMap.get(rowId)?.[field];
+  }, [colspanMap]);
+
+  const calculateColSpan = useCallback((
+    rowId: GridRowId,
+    row: R,
+    rowIndex: number,
+    minFirstColumn: number,
+    maxLastColumn: number
+  ) => {
+    const newMap = new Map(colspanMap);
+
+    for (let i = minFirstColumn; i < maxLastColumn; i++) {
+      const colDef = columns[i];
+      if (!colDef) continue;
+
+      let colSpan = 1;
+      if (colDef.colSpan) {
+        if (typeof colDef.colSpan === 'function') {
+          const params: GridRenderCellParams<R> = {
+            row,
+            value: row[colDef.field as keyof R],
+            field: colDef.field,
+            colDef,
+            rowIndex,
+            colIndex: i 
+          };
+          colSpan = colDef.colSpan(params);
+        } else {
+          colSpan = colDef.colSpan;
+        }
+      }
+
+      if (colSpan <= 1) {
+        setCellColSpanInfo(newMap, rowId, colDef.field, {
+          spannedByColSpan: false,
+          cellProps: { colSpan: 1, width: columnWidths[colDef.field] || 100 }
+        });
+        continue;
+      }
+
+      let width = columnWidths[colDef.field] || 100;
+      for (let j = 1; j < colSpan; j++) {
+        if (i + j < maxLastColumn) {
+          const nextCol = columns[i + j];
+          if (nextCol) {
+            width += columnWidths[nextCol.field] || 100;
+
+            setCellColSpanInfo(newMap, rowId, nextCol.field, {
+              spannedByColSpan: true,
+              leftVisibleCellIndex: i,
+              rightVisibleCellIndex: Math.min(i + colSpan - 1, columns.length - 1)
+            });
+          }
+        }
+      }
+
+      setCellColSpanInfo(newMap, rowId, colDef.field, {
+        spannedByColSpan: false,
+        cellProps: { colSpan, width }
+      });
+
+      i += colSpan - 1; 
+    }
+
+    setColspanMap(newMap);
+  }, [colspanMap, columns, columnWidths]);
+
+  const calculateRowSpan = useCallback((
+    firstRowIndex: number,
+    lastRowIndex: number
+  ) => {
+    const spannedCells: Record<GridRowId, Record<ColumnKey, number>> = {};
+    const hiddenCells: Record<GridRowId, Record<ColumnKey, boolean>> = {};
+    const hiddenCellOriginMap: Record<number, Record<ColumnKey, number>> = {};
+
+    columns.forEach((colDef, columnIndex) => {
+
+      if (!colDef.rowSpan) return;
+
+      for (let index = firstRowIndex; index < lastRowIndex; index++) {
+        const row = rows[index];
+        if (!row) continue;
+
+        if (hiddenCells[row.id]?.[colDef.field]) continue;
+
+        const cellValue = colDef.valueGetter
+          ? colDef.valueGetter({ row, field: colDef.field, value: row[colDef.field as keyof R] })
+          : row[colDef.field as keyof R];
+
+        let span = 1;
+        if (typeof colDef.rowSpan === 'function') {
+            const params: GridRenderCellParams<R> = {
+                row,
+                value: cellValue,
+                field: colDef.field,
+                colDef,
+                rowIndex: index,
+                colIndex: columnIndex
+            };
+            span = colDef.rowSpan(params);
+        } else if (typeof colDef.rowSpan === 'number') {
+            span = colDef.rowSpan;
+        }
+
+        if (span > 1) {
+          if (!spannedCells[row.id]) spannedCells[row.id] = {};
+          spannedCells[row.id][colDef.field] = span; 
+
+          for (let k = 1; k < span; k++) {
+            const nextIndex = index + k;
+            if (nextIndex < lastRowIndex && rows[nextIndex]) {
+              const nextRow = rows[nextIndex];
+              if (!hiddenCells[nextRow.id]) hiddenCells[nextRow.id] = {};
+              hiddenCells[nextRow.id][colDef.field] = true; 
+
+              if (!hiddenCellOriginMap[nextIndex]) hiddenCellOriginMap[nextIndex] = {};
+              hiddenCellOriginMap[nextIndex][colDef.field] = index; 
+            }
+          }
+        }
+      }
+    });
+
+    setRowSpanningState({
+      caches: { spannedCells, hiddenCells, hiddenCellOriginMap },
+      processedRange: { firstRowIndex, lastRowIndex }
+    });
+  }, [rows, columns]);
+
+  const resetRowSpan = useCallback(() => {
+    setRowSpanningState({
+      caches: {
+        spannedCells: {},
+        hiddenCells: {},
+        hiddenCellOriginMap: {}
+      },
+      processedRange: { firstRowIndex: 0, lastRowIndex: 0 }
+    });
+  }, []);
+
+  useEffect(() => {
+
+    const newMap = new Map<GridRowId, Record<ColumnKey, CellColSpanInfo>>();
+
+    rows.forEach((row, index) => {
+      for (let i = 0; i < columns.length; i++) {
+        const colDef = columns[i];
+        if (!colDef) continue;
+
+        let colSpan = 1;
+        if (colDef.colSpan) {
+          if (typeof colDef.colSpan === 'function') {
+            const params: GridRenderCellParams<R> = {
+              row,
+              value: row[colDef.field as keyof R],
+              field: colDef.field,
+              colDef,
+              rowIndex: index,
+              colIndex: i
+            };
+            colSpan = colDef.colSpan(params);
+          } else {
+            colSpan = colDef.colSpan;
+          }
+        }
+
+        if (colSpan <= 1) {
+          const colWidth = columnWidths[colDef.field] || (typeof colDef.width === 'number' ? colDef.width : 100);
+          setCellColSpanInfo(newMap, row.id, colDef.field, {
+            spannedByColSpan: false,
+            cellProps: { colSpan: 1, width: colWidth }
+          });
+          continue;
+        }
+
+        let width = columnWidths[colDef.field] || (typeof colDef.width === 'number' ? colDef.width : 100);
+        for (let j = 1; j < colSpan; j++) {
+          if (i + j < columns.length) {
+            const nextCol = columns[i + j];
+            if (nextCol) {
+              const nextColWidth = columnWidths[nextCol.field] || (typeof nextCol.width === 'number' ? nextCol.width : 100);
+              width += nextColWidth;
+
+              setCellColSpanInfo(newMap, row.id, nextCol.field, {
+                spannedByColSpan: true,
+                leftVisibleCellIndex: i,
+                rightVisibleCellIndex: Math.min(i + colSpan - 1, columns.length - 1)
+              });
+            }
+          }
+        }
+
+        setCellColSpanInfo(newMap, row.id, colDef.field, {
+          spannedByColSpan: false,
+          cellProps: { colSpan, width }
+        });
+
+        i += colSpan - 1; 
+      }
+    });
+
+    setColspanMap(newMap);
+
+    const spannedCells: Record<GridRowId, Record<ColumnKey, number>> = {};
+    const hiddenCells: Record<GridRowId, Record<ColumnKey, boolean>> = {};
+    const hiddenCellOriginMap: Record<number, Record<ColumnKey, number>> = {};
+
+    columns.forEach((colDef, columnIndex) => {
+      if (!colDef.rowSpan) return;
+
+      for (let index = 0; index < rows.length; index++) {
+        const row = rows[index];
+        if (!row) continue;
+
+        if (hiddenCells[row.id]?.[colDef.field]) continue;
+
+        const cellValue = colDef.valueGetter
+          ? colDef.valueGetter({ row, field: colDef.field, value: row[colDef.field as keyof R] })
+          : row[colDef.field as keyof R];
+
+        let span = 1;
+        if (typeof colDef.rowSpan === 'function') {
+            const params: GridRenderCellParams<R> = {
+                row,
+                value: cellValue,
+                field: colDef.field,
+                colDef,
+                rowIndex: index,
+                colIndex: columnIndex
+            };
+            span = colDef.rowSpan(params);
+        } else if (typeof colDef.rowSpan === 'number') {
+            span = colDef.rowSpan;
+        }
+
+        if (span > 1) {
+          if (!spannedCells[row.id]) spannedCells[row.id] = {};
+          spannedCells[row.id][colDef.field] = span;
+
+          for (let k = 1; k < span; k++) {
+            const nextIndex = index + k;
+            if (nextIndex < rows.length && rows[nextIndex]) {
+              const nextRow = rows[nextIndex];
+              if (!hiddenCells[nextRow.id]) hiddenCells[nextRow.id] = {};
+              hiddenCells[nextRow.id][colDef.field] = true;
+
+              if (!hiddenCellOriginMap[nextIndex]) hiddenCellOriginMap[nextIndex] = {};
+              hiddenCellOriginMap[nextIndex][colDef.field] = index;
+            }
+          }
+        }
+      }
+    });
+
+    setRowSpanningState({
+      caches: { spannedCells, hiddenCells, hiddenCellOriginMap },
+      processedRange: { firstRowIndex: 0, lastRowIndex: rows.length }
+    });
+  }, [rows, columns, columnWidths]);
+
+  const getSpannedCells = useCallback(() => rowSpanningState.caches.spannedCells, [rowSpanningState]);
+  const getHiddenCells = useCallback(() => rowSpanningState.caches.hiddenCells, [rowSpanningState]);
+  const getHiddenCellOriginMap = useCallback(() => rowSpanningState.caches.hiddenCellOriginMap, [rowSpanningState]);
+
+  return {
+
+    colspanMap,
+    resetColSpan,
+    getCellColSpanInfo,
+    calculateColSpan,
+
+    rowSpanningState,
+    calculateRowSpan,
+    resetRowSpan,
+    getSpannedCells,
+    getHiddenCells,
+    getHiddenCellOriginMap
+  };
+}
+
+function setCellColSpanInfo(
+  map: ColspanMap,
+  rowId: GridRowId,
+  field: string,
+  info: CellColSpanInfo
+) {
+  let columnInfo = map.get(rowId);
+  if (!columnInfo) {
+    columnInfo = {};
+    map.set(rowId, columnInfo);
+  }
+  columnInfo[field] = info;
+}