From 38be38d37db02306d538e5f3452b68c77b8cc5c5 Mon Sep 17 00:00:00 2001 From: Danail H Date: Wed, 31 Aug 2022 11:36:28 +0300 Subject: [PATCH] add unstbale_ prefix and include debounce in the demo --- .../data-grid/row-updates/LazyLoadingGrid.js | 22 ++++++++++++++----- .../data-grid/row-updates/LazyLoadingGrid.tsx | 21 +++++++++++++----- .../row-updates/LazyLoadingGrid.tsx.preview | 2 +- .../data/data-grid/row-updates/row-updates.md | 2 +- docs/pages/x/api/data-grid/grid-api.md | 2 +- .../src/tests/lazyLoader.DataGridPro.test.tsx | 4 ++-- .../src/hooks/features/rows/useGridRows.ts | 6 ++--- .../x-data-grid/src/models/api/gridRowApi.ts | 2 +- 8 files changed, 40 insertions(+), 21 deletions(-) diff --git a/docs/data/data-grid/row-updates/LazyLoadingGrid.js b/docs/data/data-grid/row-updates/LazyLoadingGrid.js index d5ebb27f6419..dfa9f7f54db8 100644 --- a/docs/data/data-grid/row-updates/LazyLoadingGrid.js +++ b/docs/data/data-grid/row-updates/LazyLoadingGrid.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import { debounce } from '@mui/material/utils'; import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro'; import { createFakeServer, loadServerRows } from '@mui/x-data-grid-generator'; @@ -69,12 +70,21 @@ export default function LazyLoadingGrid() { }, [dataServerSide, fetchRow]); // Fetch rows as they become visible in the viewport - const handleFetchRows = async (params) => { - const { slice, total } = await fetchRow(params); + const handleFetchRows = React.useCallback( + async (params) => { + console.log(params); + const { slice, total } = await fetchRow(params); + + apiRef.current.unstable_replaceRows(params.firstRowToRender, slice); + setRowCount(total); + }, + [apiRef, fetchRow], + ); - apiRef.current.replaceRows(params.firstRowToRender, slice); - setRowCount(total); - }; + const debouncedHandleFetchRows = React.useMemo( + () => debounce(handleFetchRows, 200), + [handleFetchRows], + ); return (
@@ -87,7 +97,7 @@ export default function LazyLoadingGrid() { sortingMode="server" filterMode="server" rowsLoadingMode="server" - onFetchRows={handleFetchRows} + onFetchRows={debouncedHandleFetchRows} experimentalFeatures={{ lazyLoading: true, }} diff --git a/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx b/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx index 5c7f6b5f7fbf..9a038b571637 100644 --- a/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx +++ b/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { debounce } from '@mui/material/utils'; import { DataGridPro, GridFetchRowsParams, @@ -77,12 +78,20 @@ export default function LazyLoadingGrid() { }, [dataServerSide, fetchRow]); // Fetch rows as they become visible in the viewport - const handleFetchRows = async (params: GridFetchRowsParams) => { - const { slice, total } = await fetchRow(params); + const handleFetchRows = React.useCallback( + async (params: GridFetchRowsParams) => { + const { slice, total } = await fetchRow(params); + + apiRef.current.unstable_replaceRows(params.firstRowToRender, slice); + setRowCount(total); + }, + [apiRef, fetchRow], + ); - apiRef.current.replaceRows(params.firstRowToRender, slice); - setRowCount(total); - }; + const debouncedHandleFetchRows = React.useMemo( + () => debounce(handleFetchRows, 200), + [handleFetchRows], + ); return (
@@ -95,7 +104,7 @@ export default function LazyLoadingGrid() { sortingMode="server" filterMode="server" rowsLoadingMode="server" - onFetchRows={handleFetchRows} + onFetchRows={debouncedHandleFetchRows} experimentalFeatures={{ lazyLoading: true, }} diff --git a/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx.preview b/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx.preview index 795151643599..5077be50494f 100644 --- a/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx.preview +++ b/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx.preview @@ -7,7 +7,7 @@ sortingMode="server" filterMode="server" rowsLoadingMode="server" - onFetchRows={handleFetchRows} + onFetchRows={debouncedHandleFetchRows} experimentalFeatures={{ lazyLoading: true, }} diff --git a/docs/data/data-grid/row-updates/row-updates.md b/docs/data/data-grid/row-updates/row-updates.md index b24fc077f34f..0b25a419573a 100644 --- a/docs/data/data-grid/row-updates/row-updates.md +++ b/docs/data/data-grid/row-updates/row-updates.md @@ -65,7 +65,7 @@ Finally, replace the empty rows with the newly fetched ones using `apiRef.curren {{"demo": "LazyLoadingGrid.js", "bg": "inline", "disableAd": true}} :::warning -The `onFetchRows` callback is called every time a new row is in the viewport, so when you scroll, you can easily send multiple requests to your backend. We recommend developers limit those by implementing throttling. +The `onFetchRows` callback is called every time a new row is in the viewport, so when you scroll, you can easily send multiple requests to your backend. We recommend developers limit those by implementing debouncing. ::: :::info diff --git a/docs/pages/x/api/data-grid/grid-api.md b/docs/pages/x/api/data-grid/grid-api.md index cf2e49fba0f5..518dd70e25bc 100644 --- a/docs/pages/x/api/data-grid/grid-api.md +++ b/docs/pages/x/api/data-grid/grid-api.md @@ -71,7 +71,6 @@ import { GridApi } from '@mui/x-data-grid-pro'; | pinColumn [](/x/introduction/licensing/#pro-plan) | (field: string, side: GridPinnedPosition) => void | Pins a column to the left or right side of the grid. | | publishEvent | GridEventPublisher | Emits an event. | | removeRowGroupingCriteria [](https://mui.com/store/items/material-ui-premium/) | (groupingCriteriaField: string) => void | Remove the field from the row grouping model. | -| replaceRows | (firstRowToReplace: number, newRows: GridRowModel[]) => void | Replace a set of rows with new rows. | | resize | () => void | Triggers a resize of the component and recalculation of width and height. | | restoreState | (stateToRestore: InitialState) => void | Inject the given values into the state of the DataGrid. | | scroll | (params: Partial<GridScrollParams>) => void | Triggers the viewport to scroll to the given positions (in pixels). | @@ -121,6 +120,7 @@ import { GridApi } from '@mui/x-data-grid-pro'; | unpinColumn [](/x/introduction/licensing/#pro-plan) | (field: string) => void | Unpins a column. | | unstable_getAllGroupDetails | () => GridColumnGroupLookup | Returns the column group lookup. | | unstable_getColumnGroupPath | (field: string) => GridColumnGroup['groupId'][] | Returns the id of the groups leading to the requested column.
The array is ordered by increasing depth (the last element is the direct parent of the column). | +| unstable_replaceRows | (firstRowToReplace: number, newRows: GridRowModel[]) => void | Replace a set of rows with new rows. | | unstable_setPinnedRows [](/x/introduction/licensing/#pro-plan) | (pinnedRows?: GridPinnedRowsProp) => void | Changes the pinned rows. | | updateColumn | (col: GridColDef) => void | Updates the definition of a column. | | updateColumns | (cols: GridColDef[]) => void | Updates the definition of multiple columns at the same time. | diff --git a/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx index 9e082cdf210e..f8a98ff7aa2b 100644 --- a/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx @@ -92,7 +92,7 @@ describe(' - Lazy loader', () => { expect(getRow(3).dataset.id).to.equal('auto-generated-skeleton-row-root-0'); }); - it('should update all rows accordingly when `apiRef.current.replaceRows` is called', () => { + it('should update all rows accordingly when `apiRef.current.unstable_replaceRows` is called', () => { render(); const newRows: GridRowModel[] = [ @@ -106,7 +106,7 @@ describe(' - Lazy loader', () => { 'auto-generated-skeleton-row-root-1', 'auto-generated-skeleton-row-root-2', ]); - act(() => apiRef.current.replaceRows(4, newRows)); + act(() => apiRef.current.unstable_replaceRows(4, newRows)); const updatedAllRows = apiRef.current.state.rows.ids; expect(updatedAllRows.slice(4, 6)).to.deep.equal([4, 5]); diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts index 1077797e13e4..3744c2b978ae 100644 --- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts +++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts @@ -332,12 +332,12 @@ export const useGridRows = ( [apiRef, logger], ); - const replaceRows = React.useCallback( + const replaceRows = React.useCallback( (firstRowToRender, newRows) => { if (props.signature === GridSignature.DataGrid && newRows.length > 1) { throw new Error( [ - "MUI: You can't replace rows using `apiRef.current.replaceRows` on the DataGrid.", + "MUI: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.', ].join('\n'), ); @@ -409,7 +409,7 @@ export const useGridRows = ( getRowNode, getRowIndexRelativeToVisibleRows, getRowGroupChildren, - replaceRows, + unstable_replaceRows: replaceRows, }; /** diff --git a/packages/grid/x-data-grid/src/models/api/gridRowApi.ts b/packages/grid/x-data-grid/src/models/api/gridRowApi.ts index 5ab0b87fc389..e09aa6d560d6 100644 --- a/packages/grid/x-data-grid/src/models/api/gridRowApi.ts +++ b/packages/grid/x-data-grid/src/models/api/gridRowApi.ts @@ -99,5 +99,5 @@ export interface GridRowApi { * @param {number} firstRowToReplace The index of the first row to be replaced. * @param {GridRowModel[]} newRows The new rows. */ - replaceRows: (firstRowToReplace: number, newRows: GridRowModel[]) => void; + unstable_replaceRows: (firstRowToReplace: number, newRows: GridRowModel[]) => void; }