[typescript] Improve type coverage of colDef (#2188)

* [typescript] Improve type coverage of colDef
mui · Aug 9, 2021 · c4f5b06 · c4f5b06
1 parent 76b0a51
commit c4f5b06
Show file tree

Hide file tree

Showing 22 changed files with 42 additions and 23 deletions.
diff --git a/docs/pages/api-docs/data-grid/grid-cell-params.md b/docs/pages/api-docs/data-grid/grid-cell-params.md
@@ -16,7 +16,7 @@ import { GridCellParams } from '@material-ui/data-grid';
 | :------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------------- |
 | <span class="prop-name">api</span>                                                           | <span class="prop-type">any</span>                                                | GridApi that let you manipulate the grid.                        |
 | <span class="prop-name">cellMode</span>                                                      | <span class="prop-type">GridCellMode</span>                                       | The mode of the cell.                                            |
-| <span class="prop-name">colDef</span>                                                        | <span class="prop-type">any</span>                                                | The column of the row that the current cell belongs to.          |
+| <span class="prop-name">colDef</span>                                                        | <span class="prop-type">GridStateColDef</span>                                    | The column of the row that the current cell belongs to.          |
 | <span class="prop-name">field</span>                                                         | <span class="prop-type">string</span>                                             | The column field of the cell that triggered the event            |
 | <span class="prop-name">formattedValue</span>                                                | <span class="prop-type">GridCellValue</span>                                      | The cell value formatted with the column valueFormatter.         |
 | <span class="prop-name">getValue</span>                                                      | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                           |

diff --git a/docs/pages/api-docs/data-grid/grid-row-params.md b/docs/pages/api-docs/data-grid/grid-row-params.md
@@ -15,7 +15,7 @@ import { GridRowParams } from '@material-ui/data-grid';
 | Name                                    | Type                                                                              | Description                                                |
 | :-------------------------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------- |
 | <span class="prop-name">api</span>      | <span class="prop-type">any</span>                                                | GridApiRef that let you manipulate the grid.               |
-| <span class="prop-name">columns</span>  | <span class="prop-type">any</span>                                                | All grid columns.                                          |
+| <span class="prop-name">columns</span>  | <span class="prop-type">GridColumns</span>                                        | All grid columns.                                          |
 | <span class="prop-name">getValue</span> | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                     |
 | <span class="prop-name">id</span>       | <span class="prop-type">GridRowId</span>                                          | The grid row id.                                           |
 | <span class="prop-name">row</span>      | <span class="prop-type">GridRowData</span>                                        | The row model of the row that the current cell belongs to. |
diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js
@@ -87,7 +87,12 @@ async function transpileFile(tsxPath, program, ignoreCache = false) {
 
     const propTypesAST = typescriptToProptypes.parseFromProgram(tsxPath, program, {
       shouldResolveObject: ({ name }) => {
-        if (name === 'classes' || name === 'state' || name === 'currentColumn') {
+        if (
+          name === 'classes' ||
+          name === 'state' ||
+          name === 'currentColumn' ||
+          name === 'colDef'
+        ) {
           return false;
         }
 

diff --git a/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js b/docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js
@@ -127,7 +127,7 @@ renderCellExpand.propTypes = {
   /**
    * The column of the row that the current cell belongs to.
    */
-  colDef: PropTypes.any.isRequired,
+  colDef: PropTypes.object.isRequired,
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */

diff --git a/docs/src/pages/components/data-grid/sorting/ComparatorSortingGrid.tsx b/docs/src/pages/components/data-grid/sorting/ComparatorSortingGrid.tsx
@@ -22,8 +22,8 @@ const columns: GridColumns = [
         params.getValue(params.id, 'age') || 'x'
       }`,
     sortComparator: (v1, v2, param1, param2) =>
-      param1.api.getCellValue(param1.id, 'age') -
-      param2.api.getCellValue(param2.id, 'age'),
+      (param1.api.getCellValue(param1.id, 'age') as number) -
+      (param2.api.getCellValue(param2.id, 'age') as number),
     width: 150,
   },
   { field: 'dateCreated', type: 'date', width: 180 },

diff --git a/docs/src/pages/components/data-grid/style/style.md b/docs/src/pages/components/data-grid/style/style.md
@@ -47,7 +47,7 @@ interface GridRowParams {
   /**
    * All grid columns.
    */
-  columns: any;
+  columns: GridColumns;
   /**
    * GridApiRef that let you manipulate the grid.
    */

diff --git a/packages/grid/_modules_/grid/components/cell/GridBooleanCell.tsx b/packages/grid/_modules_/grid/components/cell/GridBooleanCell.tsx
@@ -20,7 +20,7 @@ export const GridBooleanCell = React.memo((props: GridCellParams & SvgIconProps)
   } = props;
 
   const Icon = React.useMemo(
-    () => (value ? api.components.BooleanCellTrueIcon : api.components.BooleanCellFalseIcon),
+    () => (value ? api.components.BooleanCellTrueIcon! : api.components.BooleanCellFalseIcon!),
     [api.components.BooleanCellFalseIcon, api.components.BooleanCellTrueIcon, value],
   );
 

diff --git a/packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx b/packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx
@@ -58,7 +58,7 @@ export function GridEditSingleSelectCell(props: GridCellParams & SelectProps) {
       open
       {...other}
     >
-      {colDef.valueOptions.map(renderSingleSelectOptions)}
+      {colDef.valueOptions?.map(renderSingleSelectOptions)}
     </Select>
   );
 }

diff --git a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx
@@ -128,7 +128,7 @@ export function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
 
   if (column.headerClassName) {
     const headerClassName = isFunction(column.headerClassName)
-      ? column.headerClassName({ field: column.field, colDef: column, api: apiRef })
+      ? column.headerClassName({ field: column.field, colDef: column, api: apiRef.current })
       : column.headerClassName;
 
     classNames.push(headerClassName);

diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts
@@ -115,8 +115,8 @@ export function useGridEditRows(
 
   const isCellEditable = React.useCallback(
     (params: GridCellParams) =>
-      params.colDef.editable &&
-      params.colDef!.renderEditCell &&
+      !!params.colDef.editable &&
+      !!params.colDef!.renderEditCell &&
       (!options.isCellEditable || options.isCellEditable(params)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [options.isCellEditable],

diff --git a/packages/grid/_modules_/grid/models/api/gridEditRowApi.ts b/packages/grid/_modules_/grid/models/api/gridEditRowApi.ts
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { GridCellMode } from '../gridCell';
 import { GridEditRowsModel } from '../gridEditRowModel';
 import { GridRowId } from '../gridRows';

diff --git a/packages/grid/_modules_/grid/models/gridFilterOperator.ts b/packages/grid/_modules_/grid/models/gridFilterOperator.ts
@@ -2,13 +2,14 @@ import * as React from 'react';
 import { GridFilterInputValueProps } from '../components/panel/filterPanel/GridFilterInputValueProps';
 import { GridFilterItem } from './gridFilterItem';
 import { GridCellParams } from './params/gridCellParams';
+import type { GridStateColDef } from './colDef';
 
 export interface GridFilterOperator {
   label?: string;
   value: string;
   getApplyFilterFn: (
     filterItem: GridFilterItem,
-    column: any,
+    column: GridStateColDef,
   ) => null | ((params: GridCellParams) => boolean);
   InputComponent?: React.JSXElementConstructor<GridFilterInputValueProps>;
   InputComponentProps?: Record<string, any>;

diff --git a/packages/grid/_modules_/grid/models/params/gridCellParams.ts b/packages/grid/_modules_/grid/models/params/gridCellParams.ts
@@ -1,5 +1,6 @@
 import { GridCellMode, GridCellValue } from '../gridCell';
 import { GridRowId, GridRowModel } from '../gridRows';
+import type { GridStateColDef } from '../colDef';
 
 /**
  * Object passed as parameter in the column [[GridColDef]] cell renderer.
@@ -28,7 +29,7 @@ export interface GridCellParams {
   /**
    * The column of the row that the current cell belongs to.
    */
-  colDef: any;
+  colDef: GridStateColDef;
   /**
    * GridApi that let you manipulate the grid.
    */

diff --git a/packages/grid/_modules_/grid/models/params/gridColumnHeaderParams.ts b/packages/grid/_modules_/grid/models/params/gridColumnHeaderParams.ts
@@ -1,3 +1,5 @@
+import type { GridStateColDef } from '../colDef';
+
 /**
  * Object passed as parameter in the column [[GridColDef]] header renderer.
  */
@@ -9,7 +11,7 @@ export interface GridColumnHeaderParams {
   /**
    * The column of the current header component.
    */
-  colDef: any;
+  colDef: GridStateColDef;
   /**
    * API ref that let you manipulate the grid.
    */

diff --git a/packages/grid/_modules_/grid/models/params/gridColumnOrderChangeParams.ts b/packages/grid/_modules_/grid/models/params/gridColumnOrderChangeParams.ts
@@ -1,3 +1,5 @@
+import type { GridStateColDef } from '../colDef';
+
 /**
  * Object passed as parameter of the column order change event.
  */
@@ -13,7 +15,7 @@ export interface GridColumnOrderChangeParams {
   /**
    * The column of the current header component.
    */
-  colDef: any;
+  colDef: GridStateColDef;
   /**
    * The target column index.
    */

diff --git a/packages/grid/_modules_/grid/models/params/gridColumnResizeParams.ts b/packages/grid/_modules_/grid/models/params/gridColumnResizeParams.ts
@@ -1,3 +1,5 @@
+import type { GridStateColDef } from '../colDef';
+
 /**
  * Object passed as parameter of the column resize event.
  */
@@ -9,7 +11,7 @@ export interface GridColumnResizeParams {
   /**
    * The column of the current header component.
    */
-  colDef: any;
+  colDef: GridStateColDef;
   /**
    * API ref that let you manipulate the grid.
    */

diff --git a/packages/grid/_modules_/grid/models/params/gridColumnVisibilityChangeParams.ts b/packages/grid/_modules_/grid/models/params/gridColumnVisibilityChangeParams.ts
@@ -1,3 +1,5 @@
+import type { GridStateColDef } from '../colDef';
+
 /**
  * Object passed as parameter of the column visibility change event.
  */
@@ -9,7 +11,7 @@ export interface GridColumnVisibilityChangeParams {
   /**
    * The column of the current header component.
    */
-  colDef: any;
+  colDef: GridStateColDef;
   /**
    * API ref that let you manipulate the grid.
    */

diff --git a/packages/grid/_modules_/grid/models/params/gridRowParams.ts b/packages/grid/_modules_/grid/models/params/gridRowParams.ts
@@ -1,5 +1,6 @@
 import { GridCellValue } from '../gridCell';
 import { GridRowId, GridRowModel } from '../gridRows';
+import type { GridColumns } from '../colDef';
 
 /**
  * Object passed as parameter in the column [[GridColDef]] cell renderer.
@@ -16,7 +17,7 @@ export interface GridRowParams {
   /**
    * All grid columns.
    */
-  columns: any;
+  columns: GridColumns;
   /**
    * GridApiRef that let you manipulate the grid.
    */

diff --git a/packages/grid/_modules_/grid/models/params/gridRowScrollEndParams.ts b/packages/grid/_modules_/grid/models/params/gridRowScrollEndParams.ts
@@ -1,4 +1,4 @@
-import { GridColumns } from '../colDef/gridColDef';
+import type { GridColumns } from '../colDef';
 
 /**
  * Object passed as parameter in the onRowsScrollEnd callback.

diff --git a/packages/grid/_modules_/grid/models/params/gridSortModelParams.ts b/packages/grid/_modules_/grid/models/params/gridSortModelParams.ts
@@ -1,5 +1,6 @@
 import { GridColumns } from '../colDef/gridColDef';
 import { GridSortModel } from '../gridSortModel';
+
 /**
  * Object passed as parameter of the column sorted event.
  */

diff --git a/packages/grid/_modules_/grid/models/params/gridStateChangeParams.ts b/packages/grid/_modules_/grid/models/params/gridStateChangeParams.ts
@@ -1,6 +1,7 @@
 import { GridState } from '../../hooks/features/core/gridState';
+import { GridApi } from '../api';
 
 export interface GridStateChangeParams {
   state: GridState;
-  api: any;
+  api: GridApi;
 }
diff --git a/packages/storybook/src/stories/grid-sorting.stories.tsx b/packages/storybook/src/stories/grid-sorting.stories.tsx
@@ -256,8 +256,8 @@ export const CustomComparator = () => {
         params.getValue(params.id, 'age') || 'x'
       }`,
     sortComparator: (v1, v2, cellParams1, cellParams2) =>
-      cellParams1.api.getCellValue(cellParams1.id, 'age') -
-      cellParams2.api.getCellValue(cellParams2.id, 'age'),
+      (cellParams1.api.getCellValue(cellParams1.id, 'age') as number) -
+      (cellParams2.api.getCellValue(cellParams2.id, 'age') as number),
     width: 150,
   };