Remove deprecated table from skeleton loader.

RedHatInsights · Aug 3, 2023 · c7903ab · c7903ab
1 parent a4fd535
commit c7903ab
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 71 deletions.
diff --git a/packages/components/src/SkeletonTable/SkeletonTable.tsx b/packages/components/src/SkeletonTable/SkeletonTable.tsx
@@ -1,80 +1,57 @@
-import React from 'react';
-import { ICell, IRow, RowSelectVariant, TableVariant } from '@patternfly/react-table';
-import { Table, TableBody, TableHeader } from '@patternfly/react-table/deprecated';
-import { Skeleton, SkeletonSize } from '../Skeleton';
-import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+import { Caption, Table, TableProps, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Skeleton } from '../Skeleton';
 
 import './SkeletonTable.scss';
 
-export interface SkeletonTableProps {
-  colSize?: number;
-  rowSize?: number;
-  columns?: (ICell | string)[];
-  paddingColumnSize?: number;
-  sortBy?: {
-    index?: number;
-    direction?: 'asc' | 'desc';
-  };
-  isSelectable?: boolean;
-  canSelectAll?: boolean;
-  hasRadio?: boolean;
+export type SkeletonTableProps = TableProps & {
   variant?: TableVariant;
-  isDark?: boolean;
-}
-
-const SkeletonTable: React.FunctionComponent<SkeletonTableProps> = ({
-  canSelectAll = false,
-  isSelectable = false,
-  sortBy,
-  variant,
-  isDark = false,
-  colSize = 0,
-  columns,
-  paddingColumnSize = 0,
-  hasRadio = false,
-  rowSize = 0,
-}) => {
-  const newArray = (size: number) => [...Array(size)];
-  const createColumns = () => {
-    return [...Array(colSize)].map(() => ({ title: <Skeleton isDark={isDark} size={SkeletonSize.sm} /> }));
-  };
-
-  const getColumns = (): (ICell | string)[] => {
-    return newArray(paddingColumnSize)
-      .map<ICell | string>(() => '')
-      .concat(columns || createColumns());
-  };
+  rows?: number;
+  caption?: ReactNode;
+} & (
+    | {
+        columns: ReactNode[];
+      }
+    | {
+        numberOfColumns: number;
+      }
+  );
 
-  const createRows = (): (IRow | string[])[] => {
-    const numberOfCols = columns ? columns.length : colSize;
-    return newArray(rowSize).map(() => ({
-      disableSelection: true,
-      cells: newArray(paddingColumnSize)
-        .map<{ title: React.ReactNode } | string>(() => '')
-        .concat(newArray(numberOfCols).map(() => ({ title: <Skeleton isDark={isDark} size={SkeletonSize.md} /> }))),
-    }));
-  };
+function hasCustomColumns(props: Record<string, any>): props is SkeletonTableProps & {
+  columns: ReactNode[];
+} {
+  return Array.isArray(props.columns);
+}
 
-  const selectVariant = (): RowSelectVariant => {
-    return hasRadio ? RowSelectVariant?.radio || 'radio' : RowSelectVariant?.checkbox || 'checkbox';
-  };
+const SkeletonTable: React.FunctionComponent<SkeletonTableProps> = (props) => {
+  const { variant, rows = 5, caption } = props;
+  const rowCells = hasCustomColumns(props) ? props.columns.length : props.numberOfColumns;
+  const rowArray = [...new Array(rowCells)];
+  const bodyRows = [...new Array(rows)].map((_, index) => (
+    <Tr key={index}>
+      {rowArray.map((_, index) => (
+        <Td key={index}>
+          <Skeleton />
+        </Td>
+      ))}
+    </Tr>
+  ));
 
   return (
-    <Table
-      className={classNames({
-        'ins-c-skeleton-table__dark': isDark,
-      })}
-      cells={getColumns()}
-      rows={createRows()}
-      sortBy={sortBy}
-      aria-label="Loading"
-      onSelect={isSelectable ? () => undefined : undefined}
-      selectVariant={isSelectable ? selectVariant() : undefined}
-      canSelectAll={canSelectAll}
-      variant={variant}
-    >
-      <TableHeader />
-      <TableBody />
+    <Table aria-label="Loading" variant={variant}>
+      {caption && <Caption>{caption}</Caption>}
+      <Thead>
+        <Tr>
+          {hasCustomColumns(props)
+            ? props.columns.map((c, index) => <Th key={index}>{c}</Th>)
+            : rowArray.map((_, index) => (
+                <Th key={index}>
+                  <Skeleton />
+                </Th>
+              ))}
+        </Tr>
+      </Thead>
+      <Tbody>{bodyRows}</Tbody>
     </Table>
   );
 };

diff --git a/packages/components/src/TagModal/TableWithFilter.tsx b/packages/components/src/TagModal/TableWithFilter.tsx
@@ -158,7 +158,7 @@ const TableWithFilter: React.FC<TableWithFilterProps> = ({
           <TableBody />
         </Table>
       ) : (
-        <SkeletonTable columns={columns} rowSize={pagination?.perPage || 10} />
+        <SkeletonTable numberOfColumns={columns.length} rows={pagination?.perPage || 10} />
       )}
       {onUpdateData && pagination && loaded && (
         <TableToolbar isFooter className="ins-c-inventory__table--toolbar">

diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -4,7 +4,6 @@ export * from './Section';
 export * from './Ansible';
 export * from './Main';
 export * from './SimpleTableFilter';
-export * from './Input';
 export * from './InsightsLabel';
 export * from './Battery';
 export * from './Breadcrumbs';