refactor(typescript): Convert TableCell, TableExpandRow, TableExpande…

…dRow, TableRow to tsx (#13297) * refactor: fix ReactAttr missing some attributes * refactor: conversion of table rows and cell * refactor: update usages of ReactAttr * refactor: update ReactAttr uses * chore: this reverts commit 2a1e342 * Revert "refactor: fix ReactAttr missing some attributes" This reverts commit 6f4b640. * refactor: adjust types after revert * chore: merge * refactor: fix TableRow props type * refactor: update wrapComponent typing --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 20, 2023 · 888b0c0 · 888b0c0
1 parent 843ff10
commit 888b0c0
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 7 deletions.
diff --git a/...act/src/components/DataTable/TableCell.js → ...ct/src/components/DataTable/TableCell.tsx b/...act/src/components/DataTable/TableCell.js → ...ct/src/components/DataTable/TableCell.tsx
@@ -5,9 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { TdHTMLAttributes } from 'react';
 import wrapComponent from '../../tools/wrapComponent';
 
-const TableCell = wrapComponent({
+export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+
+const TableCell: React.FC<TableCellProps> = wrapComponent({
   name: 'TableCell',
   type: 'td',
 });

diff --git a/...rc/components/DataTable/TableExpandRow.js → ...c/components/DataTable/TableExpandRow.tsx b/...rc/components/DataTable/TableExpandRow.js → ...c/components/DataTable/TableExpandRow.tsx
@@ -7,10 +7,40 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { MouseEventHandler, PropsWithChildren } from 'react';
 import { ChevronRight } from '@carbon/icons-react';
 import TableCell from './TableCell';
 import { usePrefix } from '../../internal/usePrefix';
+import { TableRowProps } from './TableRow';
+
+interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
+  /**
+   * Specify the string read by a voice reader when the expand trigger is
+   * focused
+   */
+  ariaLabel: string;
+
+  /**
+   * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+   */
+  expandHeader?: string;
+
+  /**
+   * The description of the chevron right icon, to be put in its SVG `<title>` element.
+   */
+  expandIconDescription?: string;
+
+  /**
+   * Specify whether this row is expanded or not. This helps coordinate data
+   * attributes so that `TableExpandRow` and `TableExpandedRow` work together
+   */
+  isExpanded: boolean;
+
+  /**
+   * Hook for when a listener initiates a request to expand the given row
+   */
+  onExpand: MouseEventHandler<HTMLButtonElement>;
+}
 
 const TableExpandRow = ({
   ariaLabel,
@@ -22,7 +52,7 @@ const TableExpandRow = ({
   isSelected,
   expandHeader = 'expand',
   ...rest
-}) => {
+}: TableExpandRowProps) => {
   const prefix = usePrefix();
   const className = cx(
     {

diff --git a/.../components/DataTable/TableExpandedRow.js → ...components/DataTable/TableExpandedRow.tsx b/.../components/DataTable/TableExpandedRow.js → ...components/DataTable/TableExpandedRow.tsx
@@ -10,18 +10,26 @@ import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import TableCell from './TableCell';
 import { usePrefix } from '../../internal/usePrefix';
+import { ReactAttr } from '../../types/common';
+
+interface TableExpandedRowProps extends ReactAttr<HTMLTableRowElement> {
+  /**
+   * The width of the expanded row's internal cell
+   */
+  colSpan: number;
+}
 
 const TableExpandedRow = ({
   className: customClassName,
   children,
   colSpan,
   ...rest
-}) => {
-  const rowRef = useRef(null);
+}: TableExpandedRowProps) => {
+  const rowRef = useRef<HTMLTableRowElement>(null);
   const prefix = usePrefix();
   const className = cx(`${prefix}--expandable-row`, customClassName);
 
-  const toggleParentHoverClass = (eventType) => {
+  const toggleParentHoverClass = (eventType: 'enter' | 'leave') => {
     if (rowRef && rowRef.current && rowRef.current.previousElementSibling) {
       const parentNode = rowRef.current.previousElementSibling;
       if (eventType === 'enter') {

diff --git a/...eact/src/components/DataTable/TableRow.js → ...act/src/components/DataTable/TableRow.tsx b/...eact/src/components/DataTable/TableRow.js → ...act/src/components/DataTable/TableRow.tsx
@@ -10,8 +10,20 @@ import PropTypes from 'prop-types';
 import omit from 'lodash.omit';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
+import { ReactAttr } from '../../types/common';
 
-const TableRow = (props) => {
+export interface TableRowProps extends ReactAttr<HTMLTableRowElement> {
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className?: string;
+  /**
+   * Specify if the row is selected
+   */
+  isSelected?: boolean;
+}
+
+const TableRow = (props: TableRowProps) => {
   const prefix = usePrefix();
   // Remove unnecessary props if provided to this component, these are
   // only useful in `TableExpandRow`

diff --git a/packages/react/src/tools/wrapComponent.js b/packages/react/src/tools/wrapComponent.js
@@ -10,7 +10,16 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../internal/usePrefix';
 
+/**
+ * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
+ * @returns
+ */
 const wrapComponent = ({ name, className: getClassName, type }) => {
+  /**
+   *
+   * @param {{ className?: string, [x: string]: any}} param0
+   * @returns
+   */
   function Component({ className: baseClassName, ...other }) {
     const prefix = usePrefix();
     const componentClass = cx(