fix: remove condition from cell render

kronostechnologies · Apr 19, 2024 · 9148bf2 · 9148bf2
1 parent f1a66da
commit 9148bf2
Showing 1 changed file with 42 additions and 41 deletions.
diff --git a/packages/react/src/components/table/table.tsx b/packages/react/src/components/table/table.tsx
@@ -14,6 +14,7 @@ import {
     ExpandedState,
     TableOptions,
     RowSelectionState,
+    CellContext,
 } from '@tanstack/react-table';
 import { TFunction } from 'i18next';
 import { useTranslation } from '../../i18n/use-translation';
@@ -142,45 +143,40 @@ const ExpandButton = styled(IconButton) <{ $expanded: boolean }>`
 `;
 
 function getUtilityColumn<T extends object>(type: UtilityColumnType, t: TFunction<'translation'>): TableColumn<T> {
-    return {
-        id: type,
-        className: utilColumnClassName,
-        header(props: HeaderContext<T, unknown>) {
-            if (type === 'selection') {
-                const { table } = props;
-                return (
-                    <Checkbox
-                        data-testid="row-checkbox-all"
-                        checked={table.getIsAllRowsSelected()}
-                        indeterminate={table.getIsSomeRowsSelected()}
-                        onChange={table.getToggleAllRowsSelectedHandler()}
-                    />
-                );
-            }
-            // For 'numbers' type or any other type, return null or an empty header
-            return null;
-        },
-        cell({ row }) {
-            if (type === 'selection') {
-                return (
-                    <Checkbox
-                        data-testid={`row-checkbox-${row.index}`}
-                        checked={row.getIsSelected()}
-                        disabled={!row.getCanSelect()}
-                        indeterminate={row.getIsSomeSelected()}
-                        onChange={row.getToggleSelectedHandler()}
-                    />
-                );
-            }
-
-            if (type === 'numbers') {
-                return (
-                    <RowNumber>{row.index + 1}</RowNumber>
-                );
-            }
-
-            if (type === 'expand' && row.getCanExpand()) {
+    let renderHeader: (props: HeaderContext<T, unknown>) => JSX.Element | null = () => null;
+    let renderCell: (row: CellContext<T, unknown>) => JSX.Element | null = () => null;
+
+    switch (type) {
+        case 'selection':
+            renderHeader = ({ table }) => (
+                <Checkbox
+                    data-testid="row-checkbox-all"
+                    checked={table.getIsAllRowsSelected()}
+                    indeterminate={table.getIsSomeRowsSelected()}
+                    onChange={table.getToggleAllRowsSelectedHandler()}
+                />
+            );
+            renderCell = ({ row }) => (
+                <Checkbox
+                    data-testid={`row-checkbox-${row.index}`}
+                    checked={row.getIsSelected()}
+                    disabled={!row.getCanSelect()}
+                    indeterminate={row.getIsSomeSelected()}
+                    onChange={row.getToggleSelectedHandler()}
+                />
+            );
+            break;
+
+        case 'numbers':
+            renderCell = ({ row }) => <RowNumber>{row.index + 1}</RowNumber>;
+            break;
+
+        case 'expand':
+            renderCell = ({ row }) => {
                 const isExpanded = row.getIsExpanded();
+                if (!row.getCanExpand()) {
+                    return null;
+                }
                 return (
                     <ExpandButton
                         type="button"
@@ -196,10 +192,15 @@ function getUtilityColumn<T extends object>(type: UtilityColumnType, t: TFunctio
                         }
                     />
                 );
-            }
+            };
+            break;
+    }
 
-            return null;
-        },
+    return {
+        id: type,
+        className: utilColumnClassName,
+        header: renderHeader,
+        cell: renderCell,
     };
 }