Merge pull request #253 from Enterwell/stage

Stage
Enterwell · Dec 20, 2023 · 2962de1 · 2962de1
2 parents 07ced57 + d9ea50d
commit 2962de1
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 1 deletion.
diff --git a/packages/react-mui-hooks/.changelog.json b/packages/react-mui-hooks/.changelog.json
@@ -0,0 +1,5 @@
+{
+  "categories": [
+    "useDataGrid"
+  ]
+}
diff --git a/packages/react-mui-hooks/changes/Added [useDataGrid] enablePagination optional prop b/packages/react-mui-hooks/changes/Added [useDataGrid] enablePagination optional prop
diff --git a/packages/react-mui-hooks/changes/Changed [useDataGrid] pagination enabled by default b/packages/react-mui-hooks/changes/Changed [useDataGrid] pagination enabled by default
diff --git a/packages/react-mui-hooks/hooks/useDataGrid.tsx b/packages/react-mui-hooks/hooks/useDataGrid.tsx
@@ -30,6 +30,7 @@ import {
     type GridValidRowModel,
     type DataGridPro,
     type GridSortItem,
+    type GridRowScrollEndParams,
 } from '@mui/x-data-grid-pro';
 import { useResizeObserver } from '@enterwell/react-hooks';
 import { format } from 'date-fns';
@@ -271,6 +272,7 @@ export type UseDataGridProps = {
     rowHeight?: number,
     selection?: boolean,
     checkboxSelection?: boolean,
+    enablePagination?: boolean,
     infiniteLoading?: boolean,
     keepNonExistentRowsSelected?: boolean
 };
@@ -306,6 +308,7 @@ export function useDataGrid({
     rowHeight = 40,
     selection,
     checkboxSelection,
+    enablePagination = true,
     infiniteLoading,
     keepNonExistentRowsSelected = true
 }: UseDataGridProps): UseDataGridResponse {
@@ -495,6 +498,16 @@ export function useDataGrid({
         ...resolveCustomTypeOperators(c),
     })), [columns, headerRenderer, rowHeight]);
 
+    /**
+     * Handles rows scroll end action.
+     */
+    const handleRowsScrollEnd = (params: GridRowScrollEndParams) => {
+      if (!infiniteLoading) return;
+
+      console.debug('Infinite loading: loading next page', params);
+      handlePaginationModelChange({ page: pageIndex + 1, pageSize });
+    };
+
     return {
         props: {
             ref: resizeRef,
@@ -511,11 +524,13 @@ export function useDataGrid({
             columns: columnsMemo,
             columnVisibilityModel: columnVisibility,
             onColumnVisibilityModelChange: handleColumnVisibilityChange,
+            pagination: !infiniteLoading && enablePagination,
             paginationMode: 'server',
             paginationModel: {
                 page: Math.max(pageIndex, 0),
                 pageSize,
             },
+            hideFooterPagination: infiniteLoading,
             onPaginationModelChange: handlePaginationModelChange,
             sortingMode: 'server',
             sortModel,
@@ -529,6 +544,8 @@ export function useDataGrid({
             },
             onRowClick,
             rowHeight,
+            scrollEndThreshold: rowHeight * Math.round(pageSize / 2),
+            onRowsScrollEnd: handleRowsScrollEnd,
             onCellKeyDown: handleCellKeyDown,
             columnHeaderHeight: rowHeight + 1,
             disableRowSelectionOnClick: !selection,

diff --git a/packages/react-mui-hooks/temp/react-mui-hooks.api.md b/packages/react-mui-hooks/temp/react-mui-hooks.api.md
@@ -39,7 +39,7 @@ export type TypedSortModel<T> = (GridSortItem & {
 })[];
 
 // @public
-export function useDataGrid({ tableId, pageSize, columns, columnVisibilityModel, defaultSort, onPage, onRowClick, rowHeight, selection, checkboxSelection, infiniteLoading, keepNonExistentRowsSelected }: UseDataGridProps): UseDataGridResponse;
+export function useDataGrid({ tableId, pageSize, columns, columnVisibilityModel, defaultSort, onPage, onRowClick, rowHeight, selection, checkboxSelection, enablePagination, infiniteLoading, keepNonExistentRowsSelected }: UseDataGridProps): UseDataGridResponse;
 
 // @public
 export type UseDataGridProps = {
@@ -56,6 +56,7 @@ export type UseDataGridProps = {
     rowHeight?: number;
     selection?: boolean;
     checkboxSelection?: boolean;
+    enablePagination?: boolean;
     infiniteLoading?: boolean;
     keepNonExistentRowsSelected?: boolean;
 };