From a6c96b35cf09d9f7132774197fad480cd9bf90fc Mon Sep 17 00:00:00 2001 From: Danail Hadjiatanasov Date: Thu, 24 Nov 2022 15:52:43 +0200 Subject: [PATCH] [DataGrid] Rename `rowsScroll` event to `scrollPositionChange` (#6957) --- docs/data/data-grid/events/events.json | 14 +++++++------- .../migration-data-grid-v5.md | 1 + .../infiniteLoader/useGridInfiniteLoader.ts | 4 ++-- .../src/tests/events.DataGridPro.test.tsx | 4 ++-- .../x-data-grid/src/components/GridScrollArea.tsx | 4 ++-- .../columnHeaders/useGridColumnHeaders.tsx | 4 ++-- .../virtualization/useGridVirtualScroller.tsx | 5 ++--- .../src/models/events/gridEventLookup.ts | 2 +- 8 files changed, 19 insertions(+), 19 deletions(-) diff --git a/docs/data/data-grid/events/events.json b/docs/data/data-grid/events/events.json index 45d299f22b490..d30f1bf4a9961 100644 --- a/docs/data/data-grid/events/events.json +++ b/docs/data/data-grid/events/events.json @@ -359,13 +359,6 @@ "params": "GridRowSelectionCheckboxParams", "event": "MuiEvent>" }, - { - "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"], - "name": "rowsScroll", - "description": "Fired during the scroll of the grid viewport.", - "params": "GridScrollParams", - "event": "MuiEvent" - }, { "projects": ["x-data-grid-pro", "x-data-grid-premium"], "name": "rowsScrollEnd", @@ -374,6 +367,13 @@ "event": "MuiEvent<{}>", "componentProp": "onRowsScrollEnd" }, + { + "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"], + "name": "scrollPositionChange", + "description": "Fired during the scroll of the grid viewport.", + "params": "GridScrollParams", + "event": "MuiEvent" + }, { "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"], "name": "sortModelChange", diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md index 356836f24519e..f941b5416201a 100644 --- a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md +++ b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md @@ -61,6 +61,7 @@ The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, si ### Events - The `selectionChange` event was renamed to `rowSelectionChange`. +- The `rowsScroll` event was renamed to `scrollPositionChange`. - The `columnVisibilityChange` event was removed. Use `columnVisibilityModelChange` instead. - The `cellNavigationKeyDown` event was removed. Use `cellKeyDown` and check the key provided in the event argument. - The `columnHeaderNavigationKeyDown` event was removed. Use `columnHeaderKeyDown` and check the key provided in the event argument. diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts b/packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts index 9c868472486a6..fbe62f935b3cf 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts +++ b/packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts @@ -71,13 +71,13 @@ export const useGridInfiniteLoader = ( ], ); - const handleGridScroll = React.useCallback>( + const handleGridScroll = React.useCallback>( ({ left, top }) => { handleRowsScrollEnd({ left, top }); }, [handleRowsScrollEnd], ); - useGridApiEventHandler(apiRef, 'rowsScroll', handleGridScroll); + useGridApiEventHandler(apiRef, 'scrollPositionChange', handleGridScroll); useGridApiOptionHandler(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd); }; diff --git a/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx index aba02b70f0e04..1bc18e85cf98e 100644 --- a/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx @@ -333,7 +333,7 @@ describe(' - Events Params', () => { it('publishing GRID_ROWS_SCROLL should call onRowsScrollEnd callback', () => { const handleRowsScrollEnd = spy(); render(); - act(() => apiRef.current.publishEvent('rowsScroll', { left: 0, top: 3 * 52 })); + act(() => apiRef.current.publishEvent('scrollPositionChange', { left: 0, top: 3 * 52 })); expect(handleRowsScrollEnd.callCount).to.equal(1); }); @@ -351,7 +351,7 @@ describe(' - Events Params', () => { rowCount={50} />, ); - act(() => apiRef.current.publishEvent('rowsScroll', { left: 0, top: 3 * 52 })); + act(() => apiRef.current.publishEvent('scrollPositionChange', { left: 0, top: 3 * 52 })); expect(handleFetchRows.callCount).to.equal(1); }); diff --git a/packages/grid/x-data-grid/src/components/GridScrollArea.tsx b/packages/grid/x-data-grid/src/components/GridScrollArea.tsx index c4d907fa51c66..b5f8318f00776 100644 --- a/packages/grid/x-data-grid/src/components/GridScrollArea.tsx +++ b/packages/grid/x-data-grid/src/components/GridScrollArea.tsx @@ -72,7 +72,7 @@ function GridScrollAreaRaw(props: ScrollAreaProps) { const ownerState = { ...props, classes: rootProps.classes }; const classes = useUtilityClasses(ownerState); - const handleScrolling = React.useCallback>( + const handleScrolling = React.useCallback>( (newScrollPosition) => { scrollPosition.current = newScrollPosition; }, @@ -115,7 +115,7 @@ function GridScrollAreaRaw(props: ScrollAreaProps) { setDragging((prevDragging) => !prevDragging); }, []); - useGridApiEventHandler(apiRef, 'rowsScroll', handleScrolling); + useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling); useGridApiEventHandler(apiRef, 'columnHeaderDragStart', toggleDragging); useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', toggleDragging); diff --git a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index 7a181fec58a90..6e4837a658b0a 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -164,7 +164,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { } }, [renderContext, updateInnerPosition]); - const handleScroll = React.useCallback>( + const handleScroll = React.useCallback>( ({ left, renderContext: nextRenderContext = null }, event) => { if (!innerRef.current) { return; @@ -235,7 +235,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart); useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop); - useGridApiEventHandler(apiRef, 'rowsScroll', handleScroll); + useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScroll); // Helper for computation common between getColumnHeaders and getColumnGroupHeaders const getColumnsToRender = (params?: GetHeadersParams) => { diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 3cb6254c83a9a..33d7595367e7d 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -308,7 +308,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const { top, left } = scrollPosition.current!; const params = { top, left, renderContext: initialRenderContext }; - apiRef.current.publishEvent('rowsScroll', params); + apiRef.current.publishEvent('scrollPositionChange', params); }, [apiRef, computeRenderContext, containerWidth, updateRenderContext]); const handleScroll = (event: React.UIEvent) => { @@ -347,9 +347,8 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { bottomColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || prevTotalWidth.current !== columnsTotalWidth; - // TODO v6: rename event to a wider name, it's not only fired for row scrolling apiRef.current.publishEvent( - 'rowsScroll', + 'scrollPositionChange', { top: scrollTop, left: scrollLeft, diff --git a/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts b/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts index 957e86387fcc5..246e8e60bfc04 100644 --- a/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts +++ b/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts @@ -464,7 +464,7 @@ export interface GridEventLookup /** * Fired during the scroll of the grid viewport. */ - rowsScroll: { params: GridScrollParams; event: React.UIEvent | MuiBaseEvent }; + scrollPositionChange: { params: GridScrollParams; event: React.UIEvent | MuiBaseEvent }; /** * Fired when the content size used by the `GridVirtualScroller` changes. * @ignore - do not document.