[DataGrid] apiRef.current.getRow can return null (#2010)

* [typescript] apiRef.current.getRow can return undefined * Fix * Run yarn docs:api * Fix * Code review
mui · Jul 6, 2021 · abfb0cd · abfb0cd
1 parent 548bb01
commit abfb0cd
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 6 deletions.
diff --git a/docs/pages/api-docs/data-grid/grid-api.md b/docs/pages/api-docs/data-grid/grid-api.md
@@ -39,7 +39,7 @@ import { GridApi } from '@material-ui/x-grid';
 | <span class="prop-name">getEditCellPropsParams</span>                                             | <span class="prop-type">(rowId: GridRowId, field: string) =&gt; GridEditCellPropsParams</span>                                                                                           | Gets the params to be passed when calling `setEditCellProps`.                                                                                                  |
 | <span class="prop-name">getEditRowsModel</span>                                                   | <span class="prop-type">() =&gt; GridEditRowsModel</span>                                                                                                                                | Gets the edit rows model of the grid.                                                                                                                          |
 | <span class="prop-name">getLocaleText</span>                                                      | <span class="prop-type">(key: T) =&gt; GridLocaleText&lt;&gt;[T]</span>                                                                                                                  | Returns the translation for the `key`.                                                                                                                         |
-| <span class="prop-name">getRow</span>                                                             | <span class="prop-type">(id: GridRowId) =&gt; GridRowData</span>                                                                                                                         | Gets the row data with a given id.                                                                                                                             |
+| <span class="prop-name">getRow</span>                                                             | <span class="prop-type">(id: GridRowId) =&gt; null \| GridRowData</span>                                                                                                                 | Gets the row data with a given id.                                                                                                                             |
 | <span class="prop-name">getRowElement</span>                                                      | <span class="prop-type">(id: GridRowId) =&gt; null \| HTMLDivElement</span>                                                                                                              | Gets the underlying DOM element for a row at the given `id`.                                                                                                   |
 | <span class="prop-name">getRowIdFromRowIndex</span>                                               | <span class="prop-type">(index: number) =&gt; GridRowId</span>                                                                                                                           | Gets the `GridRowId` of a row at a specific index.                                                                                                             |
 | <span class="prop-name">getRowIndex</span>                                                        | <span class="prop-type">(id: GridRowId) =&gt; number</span>                                                                                                                              | Gets the row index of a row with a given id.                                                                                                                   |

diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridParamsApi.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridParamsApi.ts
@@ -40,10 +40,16 @@ export function useGridParamsApi(apiRef: GridApiRef) {
 
   const getRowParams = React.useCallback(
     (id: GridRowId) => {
+      const row = apiRef.current.getRow(id);
+
+      if (!row) {
+        throw new Error(`No row with id #${id} found`);
+      }
+
       const params: GridRowParams = {
         id,
         columns: apiRef.current.getAllColumns(),
-        row: apiRef.current.getRow(id),
+        row,
         api: apiRef.current,
         getValue: apiRef.current.getCellValue,
       };
@@ -56,6 +62,10 @@ export function useGridParamsApi(apiRef: GridApiRef) {
     (id: GridRowId, field: string) => {
       const row = apiRef.current.getRow(id);
 
+      if (!row) {
+        throw new Error(`No row with id #${id} found`);
+      }
+
       const params: GridValueGetterParams = {
         id,
         field,
@@ -79,6 +89,11 @@ export function useGridParamsApi(apiRef: GridApiRef) {
       const colDef = apiRef.current.getColumn(field);
       const value = apiRef.current.getCellValue(id, field);
       const row = apiRef.current.getRow(id);
+
+      if (!row) {
+        throw new Error(`No row with id #${id} found`);
+      }
+
       const params: GridCellParams = {
         id,
         field,
@@ -114,6 +129,11 @@ export function useGridParamsApi(apiRef: GridApiRef) {
 
       if (!colDef || !colDef.valueGetter) {
         const rowModel = apiRef.current.getRow(id);
+
+        if (!rowModel) {
+          throw new Error(`No row with id #${id} found`);
+        }
+
         return rowModel[field];
       }
 

diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts
@@ -110,7 +110,7 @@ export const useGridRows = (
     [apiRef],
   );
   const getRow = React.useCallback(
-    (id: GridRowId): GridRowModel => apiRef.current.state.rows.idRowsLookup[id],
+    (id: GridRowId): GridRowModel | null => apiRef.current.state.rows.idRowsLookup[id] ?? null,
     [apiRef],
   );
 

diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts
@@ -90,9 +90,15 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps):
 
   const selectRow = React.useCallback(
     (id: GridRowId, isSelected = true, allowMultiple = false) => {
+      const row = apiRef.current.getRow(id);
+
+      if (!row) {
+        return;
+      }
+
       selectRowModel({
         id,
-        row: apiRef.current.getRow(id),
+        row,
         allowMultipleOverride: allowMultiple,
         isSelected,
       });

diff --git a/packages/grid/_modules_/grid/models/api/gridRowApi.ts b/packages/grid/_modules_/grid/models/api/gridRowApi.ts
@@ -46,5 +46,5 @@ export interface GridRowApi {
    * @param {GridRowId} id The id of the row.
    * @returns {GridRowModel} The row data.
    */
-  getRow: (id: GridRowId) => GridRowModel;
+  getRow: (id: GridRowId) => GridRowModel | null;
 }
diff --git a/packages/grid/x-grid/src/tests/editRows.XGrid.test.tsx b/packages/grid/x-grid/src/tests/editRows.XGrid.test.tsx
@@ -560,6 +560,6 @@ describe('<XGrid /> - Edit Rows', () => {
 
     fireEvent.keyDown(input, { key: 'Enter' });
     expect(cell).to.have.text('1,942');
-    expect(apiRef.current.getRow(baselineProps.rows[0].id).year).to.equal(1942);
+    expect(apiRef.current.getRow(baselineProps.rows[0].id)!.year).to.equal(1942);
   });
 });
diff --git a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx
@@ -44,6 +44,18 @@ describe('<XGrid /> - Selection', () => {
         id: 2,
         brand: 'Puma',
       },
+      {
+        id: 3,
+        brand: 'Under Armour',
+      },
+      {
+        id: 4,
+        brand: 'Asics',
+      },
+      {
+        id: 5,
+        brand: 'Reebok',
+      },
     ],
     columns: [{ field: 'brand' }],
   };