Adapting the *WithBatteries components

Signed-off-by: Mike Turley <[email protected]>
patternfly-labs · Nov 28, 2023 · 1624c99 · 1624c99
1 parent 0fca532
commit 1624c99
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 50 deletions.
diff --git a/...module/src/tackle2-ui-legacy/components/TableControls/TableHeaderContentWithBatteries.tsx b/...module/src/tackle2-ui-legacy/components/TableControls/TableHeaderContentWithBatteries.tsx
@@ -1,28 +1,48 @@
 import React from 'react';
 import { Th } from '@patternfly/react-table';
+import { TableBatteries } from '../../../types';
 
-export interface TableHeaderContentWithBatteriesProps {
-  numColumnsBeforeData: number;
-  numColumnsAfterData: number;
+export interface TableHeaderContentWithBatteriesProps<
+  TItem,
+  TColumnKey extends string,
+  TSortableColumnKey extends TColumnKey,
+  TFilterCategoryKey extends string = string,
+  TPersistenceKeyPrefix extends string = string
+> extends TableBatteries<TItem, TColumnKey, TSortableColumnKey, TFilterCategoryKey, TPersistenceKeyPrefix> {
   children: React.ReactNode;
 }
 
-export const TableHeaderContentWithBatteries: React.FC<TableHeaderContentWithBatteriesProps> = ({
-  numColumnsBeforeData,
-  numColumnsAfterData,
-  children
-}) => (
-  <>
-    {Array(numColumnsBeforeData)
-      .fill(null)
-      .map((_, i) => (
-        <Th key={i} />
-      ))}
-    {children}
-    {Array(numColumnsAfterData)
-      .fill(null)
-      .map((_, i) => (
-        <Th key={i} />
-      ))}
-  </>
-);
+export const TableHeaderContentWithBatteries = <
+  TItem,
+  TColumnKey extends string,
+  TSortableColumnKey extends TColumnKey,
+  TFilterCategoryKey extends string = string,
+  TPersistenceKeyPrefix extends string = string
+>(
+  props: React.PropsWithChildren<
+    TableHeaderContentWithBatteriesProps<
+      TItem,
+      TColumnKey,
+      TSortableColumnKey,
+      TFilterCategoryKey,
+      TPersistenceKeyPrefix
+    >
+  >
+) => {
+  const { numColumnsBeforeData, numColumnsAfterData, children } = props;
+  return (
+    <>
+      {Array(numColumnsBeforeData)
+        .fill(null)
+        .map((_, i) => (
+          <Th key={i} />
+        ))}
+      {children}
+      {Array(numColumnsAfterData)
+        .fill(null)
+        .map((_, i) => (
+          <Th key={i} />
+        ))}
+    </>
+  );
+};
diff --git a/...es/module/src/tackle2-ui-legacy/components/TableControls/TableRowContentWithBatteries.tsx b/...es/module/src/tackle2-ui-legacy/components/TableControls/TableRowContentWithBatteries.tsx
@@ -8,36 +8,28 @@ export interface TableRowContentWithBatteriesProps<
   TSortableColumnKey extends TColumnKey,
   TFilterCategoryKey extends string = string,
   TPersistenceKeyPrefix extends string = string
-> {
-  isExpansionEnabled?: boolean;
-  expandableVariant?: 'single' | 'compound';
-  isSelectionEnabled?: boolean;
-  propHelpers: TableBatteries<
-    TItem,
-    TColumnKey,
-    TSortableColumnKey,
-    TFilterCategoryKey,
-    TPersistenceKeyPrefix
-  >['propHelpers'];
+> extends TableBatteries<TItem, TColumnKey, TSortableColumnKey, TFilterCategoryKey, TPersistenceKeyPrefix> {
   item: TItem;
   rowIndex: number;
   children: React.ReactNode;
 }
 
-export const TableRowContentWithBatteries = <TItem, TColumnKey extends string, TSortableColumnKey extends TColumnKey>({
-  isExpansionEnabled = false,
-  expandableVariant,
-  isSelectionEnabled = false,
-  propHelpers: { getSingleExpandButtonTdProps, getSelectCheckboxTdProps },
-  item,
-  rowIndex,
-  children
-}: React.PropsWithChildren<TableRowContentWithBatteriesProps<TItem, TColumnKey, TSortableColumnKey>>) => (
-  <>
-    {isExpansionEnabled && expandableVariant === 'single' ? (
-      <Td {...getSingleExpandButtonTdProps({ item, rowIndex })} />
-    ) : null}
-    {isSelectionEnabled ? <Td {...getSelectCheckboxTdProps({ item, rowIndex })} /> : null}
-    {children}
-  </>
-);
+export const TableRowContentWithBatteries = <TItem, TColumnKey extends string, TSortableColumnKey extends TColumnKey>(
+  props: React.PropsWithChildren<TableRowContentWithBatteriesProps<TItem, TColumnKey, TSortableColumnKey>>
+) => {
+  const {
+    expansion,
+    selection,
+    propHelpers: { getSingleExpandButtonTdProps, getSelectCheckboxTdProps },
+    item,
+    rowIndex,
+    children
+  } = props;
+  return (
+    <>
+      {expansion?.variant === 'single' ? <Td {...getSingleExpandButtonTdProps({ item, rowIndex })} /> : null}
+      {selection ? <Td {...getSelectCheckboxTdProps({ item, rowIndex })} /> : null}
+      {children}
+    </>
+  );
+};