feat(StructuredListSkeleton): add types #13539

carbon-design-system · Apr 20, 2023 · a68f74d · a68f74d
1 parent 9262112
commit a68f74d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 26 deletions.
diff --git a/packages/react/src/components/StructuredList/StructuredList.Skeleton.tsx b/packages/react/src/components/StructuredList/StructuredList.Skeleton.tsx
@@ -10,27 +10,47 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
-const StructuredListSkeleton = ({ rowCount, border, className, ...rest }) => {
+export interface StructuredListSkeletonProps {
+  /**
+   * Specify whether a border should be added to your StructuredListSkeleton
+   */
+  border?: boolean;
+
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+
+  /**
+   * number of table rows
+   */
+  rowCount?: number;
+}
+
+export default function StructuredListSkeleton({
+  rowCount = 5,
+  border,
+  className,
+  ...rest
+}: StructuredListSkeletonProps) {
   const prefix = usePrefix();
-  const StructuredListSkeletonClasses = cx(className, {
-    [`${prefix}--skeleton`]: true,
-    [`${prefix}--structured-list`]: true,
-    [`${prefix}--structured-list--border`]: border,
-  });
+  const classNames = cx(
+    `${prefix}--skeleton`,
+    `${prefix}--structured-list`,
+    border && `${prefix}--structured-list--border`,
+    className
+  );
 
-  const rows = [];
-  for (var i = 0; i < rowCount; i++) {
-    rows.push(
-      <div className={`${prefix}--structured-list-row`} key={i}>
-        <div className={`${prefix}--structured-list-td`} />
-        <div className={`${prefix}--structured-list-td`} />
-        <div className={`${prefix}--structured-list-td`} />
-      </div>
-    );
-  }
+  const rows = new Array(rowCount).fill(null).map((_, i) => (
+    <div className={`${prefix}--structured-list-row`} key={i}>
+      <div className={`${prefix}--structured-list-td`} />
+      <div className={`${prefix}--structured-list-td`} />
+      <div className={`${prefix}--structured-list-td`} />
+    </div>
+  ));
 
   return (
-    <div className={StructuredListSkeletonClasses} {...rest}>
+    <div className={classNames} {...rest}>
       <div className={`${prefix}--structured-list-thead`}>
         <div
           className={`${prefix}--structured-list-row ${prefix}--structured-list-row--header-row`}>
@@ -48,7 +68,7 @@ const StructuredListSkeleton = ({ rowCount, border, className, ...rest }) => {
       <div className={`${prefix}--structured-list-tbody`}>{rows}</div>
     </div>
   );
-};
+}
 
 StructuredListSkeleton.propTypes = {
   /**
@@ -66,10 +86,3 @@ StructuredListSkeleton.propTypes = {
    */
   rowCount: PropTypes.number,
 };
-
-StructuredListSkeleton.defaultProps = {
-  rowCount: 5,
-  border: false,
-};
-
-export default StructuredListSkeleton;
diff --git a/packages/react/src/components/StructuredList/index.tsx b/packages/react/src/components/StructuredList/index.tsx
@@ -6,4 +6,4 @@
  */
 
 export * from './StructuredList';
-export { default as StructuredListSkeleton } from './StructuredList.Skeleton';
+export { default as StructuredListSkeleton, type StructuredListSkeletonProps } from './StructuredList.Skeleton';