[EuiDataGrid] Make various component callback types more consistent

cee-chen · cee-chen · commit d9a997469e51 · 2023-07-24T17:15:02.000-07:00
- prefer using `ComponentType` over `JSXElementConstructor` and over functions
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -13,7 +13,6 @@ import React, {
   createRef,
   FocusEvent,
   FunctionComponent,
-  JSXElementConstructor,
   KeyboardEvent,
   memo,
   MutableRefObject,
@@ -33,7 +32,6 @@ import {
   EuiDataGridSetCellProps,
   EuiDataGridCellValueElementProps,
   EuiDataGridCellValueProps,
-  EuiDataGridCellPopoverElementProps,
 } from '../data_grid_types';
 import {
   EuiDataGridCellActions,
@@ -66,8 +64,7 @@ const EuiDataGridCellContent: FunctionComponent<
     ...rest
   }) => {
     // React is more permissible than the TS types indicate
-    const CellElement =
-      renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
+    const CellElement = renderCellValue;
 
     return (
       <>
@@ -501,10 +498,8 @@ export class EuiDataGridCell extends Component<
         columnId,
         columnType,
       } = this.props;
-      const PopoverElement = (renderCellPopover ||
-        DefaultCellPopover) as JSXElementConstructor<EuiDataGridCellPopoverElementProps>;
-      const CellElement =
-        renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
+      const PopoverElement = renderCellPopover || DefaultCellPopover;
+      const CellElement = renderCellValue;
       const sharedProps = {
         rowIndex,
         colIndex,
diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx
@@ -6,11 +6,10 @@
  * Side Public License, v 1.
  */
 
-import React, { JSXElementConstructor, useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
   EuiDataGridColumn,
   EuiDataGridColumnCellAction,
-  EuiDataGridColumnCellActionProps,
 } from '../data_grid_types';
 
 import { EuiI18n } from '../../i18n';
@@ -74,11 +73,8 @@ export const EuiDataGridCellActions = ({
     );
     return visibleCellActions.map(
       (Action: EuiDataGridColumnCellAction, idx: number) => {
-        // React is more permissible than the TS types indicate
-        const ActionButtonElement =
-          Action as JSXElementConstructor<EuiDataGridColumnCellActionProps>;
         return (
-          <ActionButtonElement
+          <Action
             key={idx}
             rowIndex={rowIndex}
             colIndex={colIndex}
@@ -114,12 +110,10 @@ export const EuiDataGridCellPopoverActions = ({
 
   const renderActions = useCallback(
     (Action: EuiDataGridColumnCellAction, idx: number) => {
-      const ActionButtonElement =
-        Action as JSXElementConstructor<EuiDataGridColumnCellActionProps>;
       return (
         <EuiFlexItem key={idx}>
           <div>
-            <ActionButtonElement
+            <Action
               rowIndex={rowIndex}
               colIndex={colIndex}
               columnId={column!.id}
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
@@ -8,7 +8,6 @@
 
 import {
   ComponentType,
-  JSXElementConstructor,
   ReactNode,
   HTMLAttributes,
   CSSProperties,
@@ -18,7 +17,6 @@ import {
   Ref,
   Component,
   PropsWithChildren,
-  ComponentClass,
 } from 'react';
 import {
   VariableSizeGridProps,
@@ -279,7 +277,7 @@ export type CommonGridProps = CommonProps &
      * allowing hooks, context, and other React concepts to be used.
      * It receives #EuiDataGridCustomBodyProps as its only argument.
      */
-    renderCustomGridBody?: (args: EuiDataGridCustomBodyProps) => ReactNode;
+    renderCustomGridBody?: ComponentType<EuiDataGridCustomBodyProps>;
     /**
      * Defines the initial style of the grid. Accepts a partial #EuiDataGridStyle object.
      * Settings provided may be overwritten or merged with user defined preferences if `toolbarVisibility.showDisplaySelector.allowDensity = true` (which is the default).
@@ -454,7 +452,7 @@ export interface EuiDataGridCustomBodyProps {
    * You may also pass in any other optional cell prop overrides
    * that `EuiDataGridCell` accepts, such as `isExpandable` or `renderCellValue`.
    */
-  Cell: JSXElementConstructor<
+  Cell: ComponentType<
     {
       colIndex: number;
       visibleRowIndex: number;
@@ -560,7 +558,7 @@ export interface EuiDataGridCellPopoverElementProps
    * For certain columns or schemas, you may want to fall back to the standard EuiDataGrid popover display.
    * If so, that component is provided here as a passed React function component for your usage.
    */
-  DefaultCellPopover: JSXElementConstructor<EuiDataGridCellPopoverElementProps>;
+  DefaultCellPopover: ComponentType<EuiDataGridCellPopoverElementProps>;
   /**
    * Allows passing props to the wrapping cell expansion popover and panel.
    * Accepts any props that `EuiPopover` accepts, except for `button` and `closePopover`.
@@ -582,12 +580,8 @@ export interface EuiDataGridCellProps {
   isExpandable: boolean;
   className?: string;
   popoverContext: DataGridCellPopoverContextShape;
-  renderCellValue:
-    | ((props: EuiDataGridCellValueElementProps) => ReactNode)
-    | ComponentClass<EuiDataGridCellValueElementProps>;
-  renderCellPopover?:
-    | JSXElementConstructor<EuiDataGridCellPopoverElementProps>
-    | ((props: EuiDataGridCellPopoverElementProps) => ReactNode);
+  renderCellValue: ComponentType<EuiDataGridCellValueElementProps>;
+  renderCellPopover?: ComponentType<EuiDataGridCellPopoverElementProps>;
   setRowHeight?: (height: number) => void;
   getRowHeight?: (rowIndex: number) => number;
   style?: React.CSSProperties;
@@ -706,9 +700,8 @@ export interface EuiDataGridColumn {
   visibleCellActions?: number;
 }
 
-export type EuiDataGridColumnCellAction = (
-  props: EuiDataGridColumnCellActionProps
-) => ReactNode;
+export type EuiDataGridColumnCellAction =
+  ComponentType<EuiDataGridColumnCellActionProps>;
 
 export interface EuiDataGridColumnActions {
   /**
diff --git a/src/components/datagrid/utils/in_memory.tsx b/src/components/datagrid/utils/in_memory.tsx
@@ -8,7 +8,6 @@
 
 import React, {
   FunctionComponent,
-  JSXElementConstructor,
   useCallback,
   useEffect,
   useMemo,
@@ -22,7 +21,6 @@ import {
   EuiDataGridInMemory,
   EuiDataGridInMemoryValues,
   EuiDataGridInMemoryRendererProps,
-  EuiDataGridCellValueElementProps,
 } from '../data_grid_types';
 
 /**
@@ -91,8 +89,7 @@ export const EuiDataGridInMemoryRenderer: FunctionComponent<
   const [documentFragment] = useState(() => document.createDocumentFragment());
 
   const cells = useMemo(() => {
-    const CellElement =
-      renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
+    const CellElement = renderCellValue;
 
     const cells = [];
 
