[core] Remove use of getState (#2300)

mui · Aug 12, 2021 · c682f5f · c682f5f
1 parent 116f233
commit c682f5f
Show file tree

Hide file tree

Showing 20 changed files with 55 additions and 58 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -203,7 +203,7 @@ Big thanks to the 11 contributors who made this release possible. Here are some
 
   ```diff
   -const filterState = apiRef.current.getState('filter');
-  +const filterState = apiRef.current.getState().filter;
+  +const filterState = apiRef.current.state.filter;
   ```
 
 - [DataGrid] Improve controllable sorting (#2095) @dtassone

diff --git a/docs/pages/api-docs/data-grid/grid-api.md b/docs/pages/api-docs/data-grid/grid-api.md
@@ -49,7 +49,6 @@ import { GridApi } from '@material-ui/x-grid';
 | <span class="prop-name">getSortedRowIds</span>                                                    | <span class="prop-type">() =&gt; GridRowId[]</span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Returns all row ids sorted according to the active sort model.                                                                                                 |
 | <span class="prop-name">getSortedRows</span>                                                      | <span class="prop-type">() =&gt; GridRowData[]</span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Returns all rows sorted according to the active sort model.                                                                                                    |
 | <span class="prop-name">getSortModel</span>                                                       | <span class="prop-type">() =&gt; GridSortModel</span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Returns the sort model currently applied to the grid.                                                                                                          |
-| <span class="prop-name">getState</span>                                                           | <span class="prop-type">() =&gt; GridState</span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Returns the state of the grid.                                                                                                                                 |
 | <span class="prop-name">getVisibleColumns</span>                                                  | <span class="prop-type">() =&gt; GridStateColDef[]</span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Returns the currently visible columns.                                                                                                                         |
 | <span class="prop-name">getVisibleRowModels</span>                                                | <span class="prop-type">() =&gt; Map&lt;GridRowId, GridRowData&gt;</span>                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Returns a sorted `Map` containing only the visible rows.                                                                                                       |
 | <span class="prop-name">hideColumnMenu</span>                                                     | <span class="prop-type">() =&gt; void</span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Hides the column menu that is open.                                                                                                                            |

diff --git a/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx b/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx
@@ -21,9 +21,7 @@ export function ColumnHeaderFilterIcon(props: ColumnHeaderFilterIconProps) {
       event.preventDefault();
       event.stopPropagation();
 
-      const { open, openedPanelValue } = gridPreferencePanelStateSelector(
-        apiRef!.current.getState(),
-      );
+      const { open, openedPanelValue } = gridPreferencePanelStateSelector(apiRef!.current.state);
 
       if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
         apiRef!.current.hideFilterPanel();

diff --git a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx
@@ -161,7 +161,7 @@ export function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
   );
 
   React.useLayoutEffect(() => {
-    const columnMenuState = apiRef!.current.getState().columnMenu;
+    const columnMenuState = apiRef!.current.state.columnMenu;
     if (hasFocus && !columnMenuState.open) {
       const focusableElement = headerCellRef.current!.querySelector(
         '[tabindex="0"]',

diff --git a/packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx b/packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx
@@ -27,8 +27,8 @@ export const GridHeaderCheckbox = React.forwardRef<HTMLInputElement, GridColumnH
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       const checked = event.target.checked;
       const rowsToBeSelected = options.checkboxSelectionVisibleOnly
-        ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef.current.getState())
-        : visibleSortedGridRowIdsSelector(apiRef.current.getState());
+        ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef.current.state)
+        : visibleSortedGridRowIdsSelector(apiRef.current.state);
       apiRef!.current.selectRows(rowsToBeSelected, checked, !event.target.indeterminate);
     };
 

diff --git a/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts b/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts
@@ -198,7 +198,7 @@ export function useGridColumns(
       logger.debug('updating GridColumns with new state');
 
       // Avoid dependency on gridState to avoid infinite loop
-      const refGridState = apiRef.current.getState();
+      const refGridState = apiRef.current.state;
       const newColumns: GridColumns = newState.all.map((field) => newState.lookup[field]);
       const updatedCols = getStateColumns(newColumns, refGridState.viewportSizes.width);
 
@@ -215,7 +215,7 @@ export function useGridColumns(
   const updateColumns = React.useCallback(
     (cols: GridColDef[]) => {
       // Avoid dependency on gridState to avoid infinite loop
-      const newState = upsertColumnsState(cols, apiRef.current.getState().columns);
+      const newState = upsertColumnsState(cols, apiRef.current.state.columns);
       setColumnsState(newState, false);
     },
     [apiRef, setColumnsState],
@@ -335,7 +335,7 @@ export function useGridColumns(
       `GridColumns gridState.viewportSizes.width, changed ${gridState.viewportSizes.width}`,
     );
     // Avoid dependency on gridState as I only want to update cols when viewport size changed.
-    const currentColumns = allGridColumnsSelector(apiRef.current.getState());
+    const currentColumns = allGridColumnsSelector(apiRef.current.state);
 
     apiRef.current.updateColumns(currentColumns);
   }, [apiRef, gridState.viewportSizes.width, logger]);

diff --git a/packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts b/packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts
@@ -284,7 +284,7 @@ export const useGridFilter = (
 
   const onColUpdated = React.useCallback(() => {
     logger.debug('onColUpdated - GridColumns changed, applying filters');
-    const filterState = apiRef.current.getState().filter;
+    const filterState = apiRef.current.state.filter;
     const columnsIds = filterableGridColumnsIdsSelector(apiRef.current.state);
     logger.debug('GridColumns changed, applying filters');
 

diff --git a/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts b/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts
@@ -34,7 +34,7 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
 
   const setColumnHeaderFocus = React.useCallback(
     (field: string, event?: React.SyntheticEvent) => {
-      const { cell } = apiRef.current.getState().focus;
+      const { cell } = apiRef.current.state.focus;
       if (cell) {
         apiRef.current.publishEvent(
           GridEvents.cellFocusOut,
@@ -103,7 +103,7 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
       const cellParams = lastClickedCell.current;
       lastClickedCell.current = null;
 
-      const { cell: focusedCell } = apiRef.current.getState().focus;
+      const { cell: focusedCell } = apiRef.current.state.focus;
 
       if (!focusedCell) {
         if (cellParams) {
@@ -147,7 +147,7 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
       if (params.cellMode === 'view') {
         return;
       }
-      const { cell } = apiRef.current.getState().focus;
+      const { cell } = apiRef.current.state.focus;
       if (cell?.id !== params.id || cell?.field !== params.field) {
         apiRef.current.setCellFocus(params.id, params.field);
       }
@@ -165,7 +165,7 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
   );
 
   React.useEffect(() => {
-    const { cell } = apiRef.current.getState().focus;
+    const { cell } = apiRef.current.state.focus;
 
     if (cell) {
       const updatedRow = apiRef.current.getRow(cell.id);

diff --git a/packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts b/packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts
@@ -39,7 +39,7 @@ export const useGridKeyboard = (apiRef: GridApiRef): void => {
 
       apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
 
-      const focusCell = apiRef.current.getState().focus.cell!;
+      const focusCell = apiRef.current.state.focus.cell!;
       const rowIndex = apiRef.current.getRowIndex(focusCell.id);
       // We select the rows in between
       const rowIds = Array(Math.abs(rowIndex - selectionFromRowIndex) + 1).fill(

diff --git a/packages/grid/_modules_/grid/hooks/features/pagination/useGridPageSize.ts b/packages/grid/_modules_/grid/hooks/features/pagination/useGridPageSize.ts
@@ -46,7 +46,7 @@ export const useGridPageSize = (
 
   React.useEffect(() => {
     const autoPageSize = containerSizes?.viewportPageSize;
-    const prevPageSize = apiRef.current.getState().pagination.pageSize;
+    const prevPageSize = apiRef.current.state.pagination.pageSize;
 
     let pageSize = prevPageSize;
 

diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts
@@ -57,7 +57,7 @@ export function useGridEditRows(
   );
 
   const handleColumnHeaderDragStart = useEventCallback((nativeEvent) => {
-    const { cell } = apiRef.current.getState().focus;
+    const { cell } = apiRef.current.state.focus;
     if (!cell) {
       return;
     }
@@ -99,7 +99,7 @@ export function useGridEditRows(
 
   const getCellMode = React.useCallback(
     (id, field) => {
-      const editState = apiRef.current.getState().editRows;
+      const editState = apiRef.current.state.editRows;
       const isEditing = editState[id] && editState[id][field];
       return isEditing ? 'edit' : 'view';
     },
@@ -166,7 +166,7 @@ export function useGridEditRows(
   );
 
   const getEditRowsModel = React.useCallback(
-    (): GridEditRowsModel => apiRef.current.getState().editRows,
+    (): GridEditRowsModel => apiRef.current.state.editRows,
     [apiRef],
   );
 
@@ -333,7 +333,7 @@ export function useGridEditRows(
   }, [apiRef, props.editRowsModel, props.onEditRowsModelChange]);
 
   React.useEffect(() => {
-    const currentEditRowsModel = apiRef.current.getState().editRows;
+    const currentEditRowsModel = apiRef.current.state.editRows;
 
     if (props.editRowsModel !== undefined && props.editRowsModel !== currentEditRowsModel) {
       apiRef.current.setEditRowsModel(props.editRowsModel || {});

diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridParamsApi.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridParamsApi.ts
@@ -62,8 +62,8 @@ export function useGridParamsApi(apiRef: GridApiRef) {
         throw new Error(`No row with id #${id} found`);
       }
 
-      const cellFocus = gridFocusCellSelector(apiRef.current.getState());
-      const cellTabIndex = gridTabIndexCellSelector(apiRef.current.getState());
+      const cellFocus = gridFocusCellSelector(apiRef.current.state);
+      const cellTabIndex = gridTabIndexCellSelector(apiRef.current.state);
 
       const params: GridValueGetterParams = {
         id,
@@ -93,8 +93,8 @@ export function useGridParamsApi(apiRef: GridApiRef) {
         throw new Error(`No row with id #${id} found`);
       }
 
-      const cellFocus = gridFocusCellSelector(apiRef.current.getState());
-      const cellTabIndex = gridTabIndexCellSelector(apiRef.current.getState());
+      const cellFocus = gridFocusCellSelector(apiRef.current.state);
+      const cellTabIndex = gridTabIndexCellSelector(apiRef.current.state);
 
       const params: GridCellParams = {
         id,

diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts
@@ -40,7 +40,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps):
     options;
 
   const getSelectedRows = React.useCallback(
-    () => selectedGridRowsSelector(apiRef.current.getState()),
+    () => selectedGridRowsSelector(apiRef.current.state),
     [apiRef],
   );
 
@@ -153,7 +153,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps):
 
   const setSelectionModel = React.useCallback<GridSelectionApi['setSelectionModel']>(
     (model) => {
-      const currentModel = apiRef.current.getState().selection;
+      const currentModel = apiRef.current.state.selection;
       if (currentModel !== model) {
         setGridState((state) => ({ ...state, selection: model }));
       }

diff --git a/packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts b/packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts
@@ -157,7 +157,7 @@ export const useGridSorting = (
       return;
     }
 
-    const sortModel = apiRef.current.getState().sorting.sortModel;
+    const sortModel = apiRef.current.state.sorting.sortModel;
 
     if (sortModel.length > 0) {
       const comparatorList = buildComparatorList(sortModel);

diff --git a/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualRows.ts b/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualRows.ts
@@ -249,7 +249,7 @@ export const useGridVirtualRows = (apiRef: GridApiRef): void => {
 
   const updateViewport = React.useCallback(
     (forceReRender = false) => {
-      const lastState = apiRef.current.getState();
+      const lastState = apiRef.current.state;
       const containerProps = lastState.containerSizes;
       if (!windowRef || !windowRef.current || !containerProps) {
         return;
@@ -419,7 +419,7 @@ export const useGridVirtualRows = (apiRef: GridApiRef): void => {
   );
 
   const getScrollPosition = React.useCallback(
-    () => scrollStateSelector(apiRef.current.getState()),
+    () => scrollStateSelector(apiRef.current.state),
     [apiRef],
   );
 

diff --git a/packages/grid/_modules_/grid/hooks/utils/useResizeContainer.ts b/packages/grid/_modules_/grid/hooks/utils/useResizeContainer.ts
@@ -20,7 +20,7 @@ export function useResizeContainer(
     gridLogger.debug(`resizing...`);
 
     apiRef.current.publishEvent(GridEvents.debouncedResize, {
-      containerSize: apiRef.current.getState().containerSizes?.windowSizes,
+      containerSize: apiRef.current.state.containerSizes?.windowSizes,
     });
   }, [apiRef, gridLogger]);
 

diff --git a/packages/grid/_modules_/grid/models/api/gridStateApi.ts b/packages/grid/_modules_/grid/models/api/gridStateApi.ts
@@ -8,8 +8,8 @@ export interface GridStateApi {
   state: GridState;
   /**
    * Returns the state of the grid.
-   * @param {string} stateId The part of the state to be returned.
-   * @returns {any} The state of the grid.
+   * @returns {GridState} The state of the grid.
+   * @ignore - do not document.
    */
   getState: () => GridState;
   /**

diff --git a/packages/grid/_modules_/grid/models/colDef/gridCheckboxSelection.tsx b/packages/grid/_modules_/grid/models/colDef/gridCheckboxSelection.tsx
@@ -16,7 +16,7 @@ export const gridCheckboxSelectionColDef: GridColDef = {
   disableColumnMenu: true,
   disableReorder: true,
   valueGetter: (params) => {
-    const selectionLookup = selectedIdsLookupSelector(params.api.getState());
+    const selectionLookup = selectedIdsLookupSelector(params.api.state);
     return selectionLookup[params.id] !== undefined;
   },
   renderHeader: (params) => <GridHeaderCheckbox {...params} />,

diff --git a/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx b/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx
@@ -253,7 +253,7 @@ describe('<XGrid /> - Filter', () => {
     render(<TestCase checkboxSelection filterModel={newModel} />);
     const checkAllCell = getColumnHeaderCell(0).querySelector('input');
     fireEvent.click(checkAllCell);
-    expect(apiRef.current.getState().selection).to.deep.equal([1]);
+    expect(apiRef.current.state.selection).to.deep.equal([1]);
   });
 
   it('should allow to clear filters by passing an empty filter model', () => {