refactor(useActionsColumn): add typescript types (#5514)

* refactor(useActionsColumn): add typescript types * refactor(useActionsColumn): add typescript types
carbon-design-system · Jun 19, 2024 · d385937 · d385937
1 parent 6952560
commit d385937
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/packages/ibm-products/src/components/Datagrid/types/index.ts b/packages/ibm-products/src/components/Datagrid/types/index.ts
@@ -5,8 +5,10 @@ import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonG
 import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
 import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
 
-import {
+import React, {
   CSSProperties,
+  ComponentType,
+  FunctionComponent,
   JSXElementConstructor,
   MutableRefObject,
   ReactNode,
@@ -38,7 +40,7 @@ import {
   UseTableHooks,
 } from 'react-table';
 import { CarbonIconType } from '@carbon/react/icons';
-import { type ButtonProps } from '@carbon/react';
+import { IconButton, type ButtonProps } from '@carbon/react';
 import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
 
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
@@ -188,6 +190,16 @@ interface DataGridTableState
 export interface DataGridTableInstance<T extends object = any>
   extends TableInstance<T> {}
 
+export interface RowAction {
+  id?: string;
+  itemText?: string;
+  icon?: ComponentType | FunctionComponent;
+  align?: React.ComponentProps<typeof IconButton>['align'];
+  shouldHideMenuItem?: (...args) => void;
+  shouldDisableMenuItem?: (...args) => void;
+  disabled?: boolean;
+  onClick?: (...args) => void;
+}
 export interface DataGridState<T extends object = any>
   extends TableCommonProps,
     UsePaginationInstanceProps<T>,
@@ -216,6 +228,7 @@ export interface DataGridState<T extends object = any>
   batchActions?: boolean;
   row: DatagridRow;
   rows: Array<DatagridRow<any>>;
+  rowActions?: RowAction[];
   columns: Array<DatagridColumn>;
   key?: any;
   rowSize?: Size;

diff --git a/...c/components/Datagrid/useActionsColumn.js → .../components/Datagrid/useActionsColumn.tsx b/...c/components/Datagrid/useActionsColumn.js → .../components/Datagrid/useActionsColumn.tsx
@@ -15,16 +15,17 @@ import {
 } from '@carbon/react';
 import { pkg } from '../../settings';
 import { prepareProps } from '../../global/js/utils/props-helper';
+import { Hooks, TableInstance } from 'react-table';
+import { DataGridState, RowAction } from './types';
 const blockClass = `${pkg.prefix}--datagrid`;
 
-const useActionsColumn = (hooks) => {
-  const useAttachActionsOnInstance = (instance) => {
+const useActionsColumn = (hooks: Hooks) => {
+  const useAttachActionsOnInstance = (instance: TableInstance) => {
     const {
       rowActions,
       isFetching,
       state: { selectedRowIds },
-    } = instance;
-
+    } = instance as DataGridState;
     const getDisabledState = (rowIndex) => {
       const selectedRowIndexes = Object.keys(selectedRowIds).map((n) =>
         Number(n)
@@ -58,9 +59,10 @@ const useActionsColumn = (hooks) => {
                       style={{ display: 'flex' }}
                     >
                       {rowActions.map((action, index) => {
-                        const preparedActionProps = prepareProps(action, [
-                          'isDelete',
-                        ]);
+                        const preparedActionProps: RowAction = prepareProps(
+                          action,
+                          ['isDelete']
+                        );
                         const {
                           align,
                           id,
@@ -110,11 +112,11 @@ const useActionsColumn = (hooks) => {
                                   return;
                                 }
                                 e.stopPropagation();
-                                onClick(id, row, e);
+                                onClick?.(id, row, e);
                               }}
                               disabled={isDisabledByRow}
                             >
-                              <Icon />
+                              {Icon && <Icon />}
                             </IconButton>
                           </div>
                         );
@@ -159,7 +161,7 @@ const useActionsColumn = (hooks) => {
                               disabled={isDisabledByRow}
                               onClick={(e) => {
                                 e.stopPropagation();
-                                onClick(id, row, e);
+                                onClick?.(id, row, e);
                               }}
                               key={id}
                             />

diff --git a/packages/ibm-products/src/custom-typings/index.d.ts b/packages/ibm-products/src/custom-typings/index.d.ts
@@ -74,6 +74,7 @@ declare module '@carbon/react' {
     Heading,
     IconButton,
     IconTab,
+    IconSkeleton,
     IdPrefix,
     InlineLoading,
     InlineNotification,