refactor: Added types to TableActionList and wrapComponent (#15689)

* refactor: added types to TableActionList and wrapComponent * chore: type ReactNode to ReactElement * chore: className should be optional in wrapComponent * chore: changed imports * chore: fixed type error --------- Co-authored-by: TJ Egan <[email protected]>
carbon-design-system · Feb 21, 2024 · b738b35 · b738b35
1 parent 74924c5
commit b738b35
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/...c/components/DataTable/TableActionList.js → ...c/components/DataTable/TableActionList.ts b/...c/components/DataTable/TableActionList.js → ...c/components/DataTable/TableActionList.ts
diff --git a/packages/react/src/components/DataTable/TableHead.tsx b/packages/react/src/components/DataTable/TableHead.tsx
@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { ThHTMLAttributes } from 'react';
+import { ThHTMLAttributes } from 'react';
 import wrapComponent from '../../tools/wrapComponent';
 
 export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
 
-const TableHead: React.FC<TableHeadProps> = wrapComponent({
+const TableHead = wrapComponent({
   name: 'TableHead',
   type: 'thead',
 });

diff --git a/packages/react/src/tools/wrapComponent.js → packages/react/src/tools/wrapComponent.ts b/packages/react/src/tools/wrapComponent.js → packages/react/src/tools/wrapComponent.ts
@@ -5,16 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { usePrefix } from '../internal/usePrefix';
+import { ReactAttr } from '../types/common';
+
+type HTMLTagName = keyof HTMLElementTagNameMap;
+
+type WrapComponentArgs<T extends HTMLTagName> = {
+  name: string;
+  type: T;
+  className?: string | ((prefix: string) => string);
+};
 
 /**
  * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
  * @returns
  */
-const wrapComponent = ({ name, className: getClassName, type }) => {
+const wrapComponent = <T extends HTMLTagName>({
+  name,
+  className: getClassName,
+  type,
+}: WrapComponentArgs<T>): ((props: ReactAttr<T>) => React.ReactElement) => {
   /**
    *
    * @param {{ className?: string, [x: string]: any}} param0
@@ -41,7 +54,7 @@ const wrapComponent = ({ name, className: getClassName, type }) => {
     className: PropTypes.string,
   };
 
-  return Component;
+  return Component as (props: ReactAttr<T>) => React.ReactElement;
 };
 
 export default wrapComponent;