replace all instanceOf Function ternaries with a common function (#142)

* replace all instanceOf Function ternaries with a common function * fix isStriped fix Progress animated fix Sx ref in TablePagination comment out some non-working styles with // TODO
KevinVandy · Sep 27, 2023 · 24be703 · 24be703
1 parent 7142847
commit 24be703
Show file tree

Hide file tree

Showing 38 changed files with 268 additions and 531 deletions.
diff --git a/packages/mantine-react-table/src/body/MRT_TableBody.tsx b/packages/mantine-react-table/src/body/MRT_TableBody.tsx
@@ -10,11 +10,12 @@ import {
   type MRT_VirtualItem,
   type MRT_Virtualizer,
 } from '../types';
+import { funcValue, styleValue } from '../funcValue';
 
 interface Props<TData extends Record<string, any> = {}> {
   columnVirtualizer?: MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   enableHover?: boolean;
-  isStriped?: boolean;
+  isStriped?: boolean | 'odd' | 'even';
   table: MRT_TableInstance<TData>;
   virtualColumns?: MRT_VirtualItem[];
   virtualPaddingLeft?: number;
@@ -64,15 +65,9 @@ export const MRT_TableBody = <TData extends Record<string, any> = {}>({
     sorting,
   } = getState();
 
-  const tableBodyProps =
-    mantineTableBodyProps instanceof Function
-      ? mantineTableBodyProps({ table })
-      : mantineTableBodyProps;
+  const tableBodyProps = funcValue(mantineTableBodyProps, { table });
 
-  const vProps =
-    rowVirtualizerProps instanceof Function
-      ? rowVirtualizerProps({ table })
-      : rowVirtualizerProps;
+  const vProps = funcValue(rowVirtualizerProps, { table });
 
   const shouldRankRows = useMemo(
     () =>
@@ -145,9 +140,7 @@ export const MRT_TableBody = <TData extends Record<string, any> = {}>({
           : 'inherit',
         minHeight: !rows.length ? '100px' : undefined,
         position: 'relative',
-        ...(tableBodyProps?.style instanceof Function
-          ? tableBodyProps?.style(theme)
-          : (tableBodyProps?.style as any)),
+        ...styleValue(tableBodyProps, theme),
       })}
     >
       {creatingRow && createDisplayMode === 'row' && (

diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx
@@ -22,11 +22,13 @@ import {
   type MRT_TableInstance,
   type MRT_VirtualItem,
 } from '../types';
+import { funcValue } from '../funcValue';
+
 import classes from './MRT_TableBodyRow.module.css';
 
 interface Props<TData extends Record<string, any> = {}> {
   cell: MRT_Cell<TData>;
-  isStriped?: boolean;
+  isStriped?: boolean | 'odd' | 'even';
   measureElement?: (element: HTMLTableCellElement) => void;
   numRows?: number;
   rowIndex: number;
@@ -81,25 +83,13 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const mTableCellBodyProps =
-    mantineTableBodyCellProps instanceof Function
-      ? mantineTableBodyCellProps({ cell, column, row, table })
-      : mantineTableBodyCellProps;
-
-  const mcTableCellBodyProps =
-    columnDef.mantineTableBodyCellProps instanceof Function
-      ? columnDef.mantineTableBodyCellProps({ cell, column, row, table })
-      : columnDef.mantineTableBodyCellProps;
-
+  const arg = { cell, column, row, table };
   const tableCellProps = {
-    ...mTableCellBodyProps,
-    ...mcTableCellBodyProps,
+    ...funcValue(mantineTableBodyCellProps, arg),
+    ...funcValue(columnDef.mantineTableBodyCellProps, arg),
   };
 
-  const skeletonProps =
-    mantineSkeletonProps instanceof Function
-      ? mantineSkeletonProps({ cell, column, row, table })
-      : mantineSkeletonProps;
+  const skeletonProps = funcValue(mantineSkeletonProps, arg);
 
   const [skeletonWidth, setSkeletonWidth] = useState(100);
   useEffect(() => {
@@ -152,10 +142,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
   }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
 
   const isEditable =
-    (enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
-    (columnDef.enableEditing instanceof Function
-      ? columnDef.enableEditing(row)
-      : columnDef.enableEditing) !== false;
+    (funcValue(enableEditing, row) &&
+      funcValue(columnDef.enableEditing, row)) !== false;
 
   const isEditing =
     isEditable &&
@@ -196,8 +184,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
 
   const { style, className, __vars } = getCommonCellStyles({
     column,
-    isStriped,
-    row,
+    // isStriped,  TODO: why were these here?
+    // row,
     table,
     theme,
     tableCellProps,
@@ -230,7 +218,7 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
         '--white-space': density === 'xs' ? 'nowrap' : 'normal',
         '--z-index':
           draggingColumn?.id === column.id
-            ? 2
+            ? '2'
             : column.getIsPinned()
             ? '1'
             : '0',

diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCellValue.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyCellValue.tsx
@@ -1,5 +1,6 @@
 import { Highlight, type HighlightProps } from '@mantine/core';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import { funcValue } from '../funcValue';
 
 const allowedTypes = ['string', 'number'];
 const allowedFilterVariants = ['text', 'autocomplete'];
@@ -22,11 +23,12 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any> = {}>({
   const { globalFilter, globalFilterFn } = getState();
   const filterValue = column.getFilterValue();
 
-  const highlightProps = (
-    mantineHighlightProps instanceof Function
-      ? mantineHighlightProps({ cell, column, row, table })
-      : mantineHighlightProps
-  ) as Partial<HighlightProps>;
+  const highlightProps = funcValue(mantineHighlightProps, {
+    cell,
+    column,
+    row,
+    table,
+  }) as Partial<HighlightProps>;
 
   let renderedCellValue =
     cell.getIsAggregated() && columnDef.AggregatedCell
@@ -75,11 +77,7 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any> = {}>({
     }
 
     renderedCellValue = (
-      <Highlight
-        color="yellow.3"
-        highlight={highlight}
-        {...highlightProps}
-      >
+      <Highlight color="yellow.3" highlight={highlight} {...highlightProps}>
         {renderedCellValue?.toString()}
       </Highlight>
     );

diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx
@@ -1,10 +1,7 @@
 import { type DragEvent, memo, useRef } from 'react';
 import { Box } from '@mantine/core';
 import clsx from 'clsx';
-import {
-  Memo_MRT_TableBodyCell,
-  MRT_TableBodyCell,
-} from './MRT_TableBodyCell';
+import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import {
   type MRT_Cell,
@@ -13,13 +10,14 @@ import {
   type MRT_VirtualItem,
   type MRT_Virtualizer,
 } from '../types';
+import { funcValue, styleValue } from '../funcValue';
 
 import classes from './MRT_TableBodyRow.module.css';
 
 interface Props<TData extends Record<string, any> = {}> {
   columnVirtualizer?: MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   enableHover?: boolean;
-  isStriped?: boolean;
+  isStriped?: boolean | 'odd' | 'even';
   measureElement?: (element: HTMLTableRowElement) => void;
   numRows?: number;
   row: MRT_Row<TData>;
@@ -61,10 +59,11 @@ export const MRT_TableBodyRow = <TData extends Record<string, any> = {}>({
   const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } =
     getState();
 
-  const tableRowProps =
-    mantineTableBodyRowProps instanceof Function
-      ? mantineTableBodyRowProps({ row, staticRowIndex: rowIndex, table })
-      : mantineTableBodyRowProps;
+  const tableRowProps = funcValue(mantineTableBodyRowProps, {
+    row,
+    staticRowIndex: rowIndex,
+    table,
+  });
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableRowOrdering && draggingRow) {
@@ -102,9 +101,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any> = {}>({
           transform: virtualRow
             ? `translateY(${virtualRow?.start}px)`
             : undefined,
-          ...(tableRowProps?.style instanceof Function
-            ? tableRowProps.style(theme)
-            : (tableRowProps?.style as any)),
+          ...styleValue(tableRowProps, theme),
         })}
       >
         {virtualPaddingLeft ? (

diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRowGrabHandle.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyRowGrabHandle.tsx
@@ -1,6 +1,7 @@
 import { type DragEvent, type RefObject } from 'react';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { funcValue } from '../funcValue';
 
 interface Props<TData extends Record<string, any> = {}> {
   row: MRT_Row<TData>;
@@ -19,10 +20,7 @@ export const MRT_TableBodyRowGrabHandle = <
     options: { mantineRowDragHandleProps },
   } = table;
 
-  const actionIconProps =
-    mantineRowDragHandleProps instanceof Function
-      ? mantineRowDragHandleProps({ row, table })
-      : mantineRowDragHandleProps;
+  const actionIconProps = funcValue(mantineRowDragHandleProps, { row, table });
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
     actionIconProps?.onDragStart?.(event);

diff --git a/packages/mantine-react-table/src/body/MRT_TableDetailPanel.tsx b/packages/mantine-react-table/src/body/MRT_TableDetailPanel.tsx
@@ -5,6 +5,7 @@ import {
   type MRT_TableInstance,
   type MRT_VirtualItem,
 } from '../types';
+import { funcValue, styleValue } from '../funcValue';
 
 interface Props<TData extends Record<string, any> = {}> {
   parentRowRef: React.RefObject<HTMLTableRowElement>;
@@ -33,20 +34,14 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any> = {}>({
   } = table;
   const { isLoading } = getState();
 
-  const tableRowProps =
-    mantineTableBodyRowProps instanceof Function
-      ? mantineTableBodyRowProps({
-          isDetailPanel: true,
-          row,
-          staticRowIndex: rowIndex,
-          table,
-        })
-      : mantineTableBodyRowProps;
+  const tableRowProps = funcValue(mantineTableBodyRowProps, {
+    isDetailPanel: true,
+    row,
+    staticRowIndex: rowIndex,
+    table,
+  });
 
-  const tableCellProps =
-    mantineDetailPanelProps instanceof Function
-      ? mantineDetailPanelProps({ row, table })
-      : mantineDetailPanelProps;
+  const tableCellProps = funcValue(mantineDetailPanelProps, { row, table });
 
   return (
     <Box
@@ -64,9 +59,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any> = {}>({
           : undefined,
         width: '100%',
         zIndex: virtualRow ? 2 : undefined,
-        ...(tableRowProps?.style instanceof Function
-          ? tableRowProps.style(theme)
-          : (tableRowProps?.style as any)),
+        ...styleValue(tableRowProps, theme),
       })}
     >
       <Box
@@ -86,9 +79,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any> = {}>({
           paddingTop: row.getIsExpanded() ? '16px !important' : '0 !important',
           transition: 'all 100ms ease-in-out',
           width: `${table.getTotalSize()}px`,
-          ...(tableCellProps?.style instanceof Function
-            ? tableCellProps.style(theme)
-            : (tableCellProps?.style as any)),
+          ...styleValue(tableCellProps, theme),
         })}
       >
         {renderDetailPanel && (

diff --git a/packages/mantine-react-table/src/buttons/MRT_CopyButton.tsx b/packages/mantine-react-table/src/buttons/MRT_CopyButton.tsx
@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import { UnstyledButton, CopyButton, Tooltip, rgba } from '@mantine/core';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
 import { getPrimaryColor } from '../column.utils';
+import { funcValue, styleValue } from '../funcValue';
 
 interface Props<TData extends Record<string, any> = {}> {
   cell: MRT_Cell<TData>;
@@ -20,24 +21,10 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
   const { column, row } = cell;
   const { columnDef } = column;
 
-  const mTableBodyCellCopyButtonProps =
-    mantineCopyButtonProps instanceof Function
-      ? mantineCopyButtonProps({ cell, column, row, table })
-      : mantineCopyButtonProps;
-
-  const mcTableBodyCellCopyButtonProps =
-    columnDef.mantineCopyButtonProps instanceof Function
-      ? columnDef.mantineCopyButtonProps({
-          cell,
-          column,
-          row,
-          table,
-        })
-      : columnDef.mantineCopyButtonProps;
-
+  const arg = { cell, column, row, table };
   const buttonProps = {
-    ...mTableBodyCellCopyButtonProps,
-    ...mcTableBodyCellCopyButtonProps,
+    ...funcValue(mantineCopyButtonProps, arg),
+    ...funcValue(columnDef.mantineCopyButtonProps, arg),
   };
 
   return (
@@ -80,9 +67,7 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
               '&:hover': {
                 backgroundColor: rgba(getPrimaryColor(theme), 0.1),
               },
-              ...(buttonProps?.style instanceof Function
-                ? buttonProps.style(theme)
-                : (buttonProps?.style as any)),
+              ...styleValue(buttonProps, theme),
             })}
             title={undefined}
           >

diff --git a/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.tsx b/packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.tsx
@@ -1,5 +1,6 @@
 import { ActionIcon, Tooltip } from '@mantine/core';
 import { type MRT_TableInstance } from '../types';
+import { funcValue, styleValue } from '../funcValue';
 
 interface Props<TData extends Record<string, any> = {}> {
   table: MRT_TableInstance<TData>;
@@ -23,10 +24,7 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any> = {}>({
   } = table;
   const { density, isLoading } = getState();
 
-  const actionIconProps =
-    mantineExpandAllButtonProps instanceof Function
-      ? mantineExpandAllButtonProps({ table })
-      : mantineExpandAllButtonProps;
+  const actionIconProps = funcValue(mantineExpandAllButtonProps, { table });
 
   const isAllRowsExpanded = getIsAllRowsExpanded();
 
@@ -56,9 +54,7 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any> = {}>({
           '&:hover': {
             opacity: 1,
           },
-          ...(actionIconProps?.style instanceof Function
-            ? actionIconProps?.style(theme)
-            : (actionIconProps?.style as any)),
+          ...styleValue(actionIconProps, theme),
         })}
         title={undefined}
       >