revisit

mui · Jun 20, 2021 · 8f8efd4 · 8f8efd4
1 parent 5ca41e1
commit 8f8efd4
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 5 deletions.
diff --git a/packages/grid/_modules_/grid/constants/eventsConstants.ts b/packages/grid/_modules_/grid/constants/eventsConstants.ts
@@ -438,6 +438,15 @@ export const GRID_ROWS_UPDATED = 'rowsUpdated';
  */
 export const GRID_ROWS_SET = 'rowsSet';
 
+/**
+ * Implementation detail.
+ * Fired to reset the sortedRow when the set of rows changes.
+ * It's important as the rendered rows are coming from the sortedRow
+ * @ignore - do not document.
+ * @event
+ */
+export const GRID_ROWS_CLEARED = 'rowsCleared';
+
 /**
  * Fired when the columns state is changed.
  * Called with an array of strings correspoding to the field names.

diff --git a/packages/grid/_modules_/grid/hooks/features/filter/visibleGridRowsState.ts b/packages/grid/_modules_/grid/hooks/features/filter/visibleGridRowsState.ts
@@ -2,7 +2,6 @@ import { GridRowId } from '../../../models/gridRows';
 
 export interface VisibleGridRowsState {
   visibleRowsLookup: Record<GridRowId, boolean>;
-
   visibleRows?: GridRowId[];
 }
 

diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts
@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { GRID_ROWS_SET, GRID_ROWS_UPDATED } from '../../../constants/eventsConstants';
+import {
+  GRID_ROWS_CLEARED,
+  GRID_ROWS_SET,
+  GRID_ROWS_UPDATED,
+} from '../../../constants/eventsConstants';
 import { GridComponentProps } from '../../../GridComponentProps';
 import { GridApiRef } from '../../../models/api/gridApiRef';
 import { GridRowApi } from '../../../models/api/gridRowApi';
@@ -114,6 +118,10 @@ export const useGridRows = (
     (allNewRows: GridRowModel[]) => {
       logger.debug(`updating all rows, new length ${allNewRows.length}`);
 
+      if (internalRowsState.current.allRows.length > 0) {
+        apiRef.current.publishEvent(GRID_ROWS_CLEARED);
+      }
+
       const allRows: GridRowId[] = [];
       const idRowsLookup = allNewRows.reduce((acc, row) => {
         const id = getGridRowId(row, getRowId);
@@ -130,11 +138,12 @@ export const useGridRows = (
           : allRows.length;
 
       internalRowsState.current = { idRowsLookup, allRows, totalRowCount };
+
       setGridState((state) => ({ ...state, rows: internalRowsState.current }));
-      apiRef.current.publishEvent(GRID_ROWS_SET);
-      updateComponent();
+
+      forceUpdate(() => apiRef.current.publishEvent(GRID_ROWS_SET));
     },
-    [logger, gridState.options, setGridState, updateComponent, apiRef, getRowId],
+    [logger, gridState.options, setGridState, forceUpdate, apiRef, getRowId],
   );
 
   const updateRows = React.useCallback(

diff --git a/packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts b/packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts
@@ -3,6 +3,7 @@ import {
   GRID_COLUMN_HEADER_CLICK,
   GRID_COLUMN_HEADER_KEYDOWN,
   GRID_COLUMNS_UPDATED,
+  GRID_ROWS_CLEARED,
   GRID_ROWS_SET,
   GRID_ROWS_UPDATED,
   GRID_SORT_MODEL_CHANGE,
@@ -251,6 +252,12 @@ export const useGridSorting = (apiRef: GridApiRef, { rows }: { rows: GridRowsPro
     [sortColumn],
   );
 
+  const onRowsCleared = React.useCallback(() => {
+    setGridState((state) => {
+      return { ...state, sorting: { ...state.sorting, sortedRows: [] } };
+    });
+  }, [setGridState]);
+
   const getSortModel = React.useCallback(
     () => gridState.sorting.sortModel,
     [gridState.sorting.sortModel],
@@ -289,6 +296,7 @@ export const useGridSorting = (apiRef: GridApiRef, { rows }: { rows: GridRowsPro
   useGridApiEventHandler(apiRef, GRID_COLUMN_HEADER_CLICK, handleColumnHeaderClick);
   useGridApiEventHandler(apiRef, GRID_COLUMN_HEADER_KEYDOWN, handleColumnHeaderKeyDown);
   useGridApiEventHandler(apiRef, GRID_ROWS_SET, apiRef.current.applySorting);
+  useGridApiEventHandler(apiRef, GRID_ROWS_CLEARED, onRowsCleared);
   useGridApiEventHandler(apiRef, GRID_ROWS_UPDATED, apiRef.current.applySorting);
   useGridApiEventHandler(apiRef, GRID_COLUMNS_UPDATED, onColUpdated);
 

diff --git a/packages/grid/x-grid/src/tests/rows.XGrid.test.tsx b/packages/grid/x-grid/src/tests/rows.XGrid.test.tsx
@@ -170,10 +170,16 @@ describe('<XGrid /> - Rows', () => {
         },
       ];
       apiRef.current.setRows(newRows);
+
+      clock.tick(50);
+      expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']);
+      clock.tick(50);
       expect(getColumnValues()).to.deep.equal(['Asics']);
+
       apiRef.current.setRows(baselineProps.rows);
       // Force an update before the 100ms
       apiRef.current.forceUpdate(() => apiRef.current.state);
+      expect(getColumnValues()).to.deep.equal([]);
       clock.tick(100);
       expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']);
     });

diff --git a/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx b/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx
@@ -102,6 +102,7 @@ describe('<XGrid /> - Sorting', () => {
       },
     ];
     apiRef.current.setRows(newRows);
+    clock.tick(100);
     expect(getColumnValues()).to.deep.equal(['Asics', 'Hugo', 'RedBull']);
   });