Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Remove state.isScrolling #2337

Merged
merged 4 commits into from
Aug 26, 2021
Merged

[core] Remove state.isScrolling #2337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f45e2d
[DataGrid] Remove state.isScrolling
m4theushw Aug 13, 2021
650b1c3
Merge branch 'master' into clean-state
m4theushw Aug 23, 2021
be27330
replace XGrid with DataGridPro
m4theushw Aug 23, 2021
a782ccb
simplify logic
m4theushw Aug 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 2 additions & 23 deletions packages/grid/_modules_/grid/hooks/features/columnMenu/useGridColumnMenu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,28 +44,6 @@ export const useGridColumnMenu = (apiRef: GridApiRef): void => {
[logger, showColumnMenu, hideColumnMenu, gridState],
);

const handleColumnResizeStart = React.useCallback(() => {
setGridState((state) => {
if (state.columnMenu.open) {
return {
...state,
columnMenu: {
...state.columnMenu,
open: false,
},
};
}

return state;
});
}, [setGridState]);

React.useEffect(() => {
if (gridState.isScrolling) {
hideColumnMenu();
}
}, [gridState.isScrolling, hideColumnMenu]);

useGridApiMethod(
apiRef,
{
Expand All @@ -76,5 +54,6 @@ export const useGridColumnMenu = (apiRef: GridApiRef): void => {
'ColumnMenuApi',
);

useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleColumnResizeStart);
useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, hideColumnMenu);
useGridApiEventHandler(apiRef, GridEvents.rowsScroll, hideColumnMenu);
};
2 changes: 0 additions & 2 deletions packages/grid/_modules_/grid/hooks/features/core/gridState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ export interface GridState {
editRows: GridEditRowsModel;
pagination: GridPaginationState;
options: GridOptions;
isScrolling: boolean;
columns: GridColumnsState;
columnReorder: GridColumnReorderState;
columnResize: GridColumnResizeState;
Expand All @@ -63,7 +62,6 @@ export const getInitialGridState = (): GridState => ({
editRows: {},
pagination: getInitialPaginationState(),
options: DEFAULT_GRID_OPTIONS,
isScrolling: false,
columns: getInitialGridColumnsState(),
columnReorder: getInitialGridColumnReorderState(),
columnResize: getInitialGridColumnResizeState(),
Expand Down
17 changes: 1 addition & 16 deletions packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualRows.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,25 +386,14 @@ export const useGridVirtualRows = (
setRenderingState({ renderingZoneScroll: { left: 0, top: 0 } });
}, [scrollTo, setRenderingState, windowRef]);

const scrollingTimeout = React.useRef<any>(null);
const handleScroll = React.useCallback(() => {
// On iOS the inertia scrolling allows to return negative values.
if (windowRef.current!.scrollLeft < 0 || windowRef.current!.scrollTop < 0) return;

if (!scrollingTimeout.current) {
setGridState((state) => ({ ...state, isScrolling: true }));
}
clearTimeout(scrollingTimeout.current);
scrollingTimeout.current = setTimeout(() => {
scrollingTimeout.current = null;
setGridState((state) => ({ ...state, isScrolling: false }));
forceUpdate();
}, 300);

if (apiRef.current.updateViewport) {
apiRef.current.updateViewport();
}
}, [windowRef, apiRef, setGridState, forceUpdate]);
}, [windowRef, apiRef]);

// TODO move to useGridScroll, it's the same regardless of whether virtualization is on or not
const scroll = React.useCallback(
Expand Down Expand Up @@ -476,10 +465,6 @@ export const useGridVirtualRows = (
logger.debug(`totalRowCount has changed to ${totalRowCount}, updating viewport.`);
apiRef.current.updateViewport(true);
}

return () => {
clearTimeout(scrollingTimeout.current);
};
}, [
logger,
totalRowCount,
Expand Down
15 changes: 15 additions & 0 deletions packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,21 @@ describe('<DataGridPro /> - Column Headers', () => {
],
};

it('should close the menu when the window is scrolled', async () => {
render(
<div style={{ width: 300, height: 500 }}>
<DataGridPro {...baselineProps} columns={[{ field: 'brand' }]} />
</div>,
);
const columnCell = getColumnHeaderCell(0);
const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]');
fireEvent.click(menuIconButton);
await waitFor(() => expect(screen.queryByRole('menu')).not.to.equal(null));
const gridWindow = document.querySelector('.MuiDataGrid-window')!;
gridWindow.dispatchEvent(new Event('scroll'));
await waitFor(() => expect(screen.queryByRole('menu')).to.equal(null));
});

describe('GridColumnHeaderMenu', () => {
it('should close the menu of a column when resizing this column', async () => {
render(
Expand Down