Skip to content

Commit 24be703

Browse files
naughtonnaughton
authored
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
1 parent 7142847 commit 24be703

38 files changed

+268
-531
lines changed

‎packages/mantine-react-table/src/body/MRT_TableBody.tsx

+5-12
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@ import {
1010
type MRT_VirtualItem,
1111
type MRT_Virtualizer,
1212
} from '../types';
13+
import { funcValue, styleValue } from '../funcValue';
1314

1415
interface Props<TData extends Record<string, any> = {}> {
1516
columnVirtualizer?: MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>;
1617
enableHover?: boolean;
17-
isStriped?: boolean;
18+
isStriped?: boolean | 'odd' | 'even';
1819
table: MRT_TableInstance<TData>;
1920
virtualColumns?: MRT_VirtualItem[];
2021
virtualPaddingLeft?: number;
@@ -64,15 +65,9 @@ export const MRT_TableBody = <TData extends Record<string, any> = {}>({
6465
sorting,
6566
} = getState();
6667

67-
const tableBodyProps =
68-
mantineTableBodyProps instanceof Function
69-
? mantineTableBodyProps({ table })
70-
: mantineTableBodyProps;
68+
const tableBodyProps = funcValue(mantineTableBodyProps, { table });
7169

72-
const vProps =
73-
rowVirtualizerProps instanceof Function
74-
? rowVirtualizerProps({ table })
75-
: rowVirtualizerProps;
70+
const vProps = funcValue(rowVirtualizerProps, { table });
7671

7772
const shouldRankRows = useMemo(
7873
() =>
@@ -145,9 +140,7 @@ export const MRT_TableBody = <TData extends Record<string, any> = {}>({
145140
: 'inherit',
146141
minHeight: !rows.length ? '100px' : undefined,
147142
position: 'relative',
148-
...(tableBodyProps?.style instanceof Function
149-
? tableBodyProps?.style(theme)
150-
: (tableBodyProps?.style as any)),
143+
...styleValue(tableBodyProps, theme),
151144
})}
152145
>
153146
{creatingRow && createDisplayMode === 'row' && (

‎packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx

+12-24
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,13 @@ import {
2222
type MRT_TableInstance,
2323
type MRT_VirtualItem,
2424
} from '../types';
25+
import { funcValue } from '../funcValue';
26+
2527
import classes from './MRT_TableBodyRow.module.css';
2628

2729
interface Props<TData extends Record<string, any> = {}> {
2830
cell: MRT_Cell<TData>;
29-
isStriped?: boolean;
31+
isStriped?: boolean | 'odd' | 'even';
3032
measureElement?: (element: HTMLTableCellElement) => void;
3133
numRows?: number;
3234
rowIndex: number;
@@ -81,25 +83,13 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
8183
const { columnDef } = column;
8284
const { columnDefType } = columnDef;
8385

84-
const mTableCellBodyProps =
85-
mantineTableBodyCellProps instanceof Function
86-
? mantineTableBodyCellProps({ cell, column, row, table })
87-
: mantineTableBodyCellProps;
88-
89-
const mcTableCellBodyProps =
90-
columnDef.mantineTableBodyCellProps instanceof Function
91-
? columnDef.mantineTableBodyCellProps({ cell, column, row, table })
92-
: columnDef.mantineTableBodyCellProps;
93-
86+
const arg = { cell, column, row, table };
9487
const tableCellProps = {
95-
...mTableCellBodyProps,
96-
...mcTableCellBodyProps,
88+
...funcValue(mantineTableBodyCellProps, arg),
89+
...funcValue(columnDef.mantineTableBodyCellProps, arg),
9790
};
9891

99-
const skeletonProps =
100-
mantineSkeletonProps instanceof Function
101-
? mantineSkeletonProps({ cell, column, row, table })
102-
: mantineSkeletonProps;
92+
const skeletonProps = funcValue(mantineSkeletonProps, arg);
10393

10494
const [skeletonWidth, setSkeletonWidth] = useState(100);
10595
useEffect(() => {
@@ -152,10 +142,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
152142
}, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
153143

154144
const isEditable =
155-
(enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
156-
(columnDef.enableEditing instanceof Function
157-
? columnDef.enableEditing(row)
158-
: columnDef.enableEditing) !== false;
145+
(funcValue(enableEditing, row) &&
146+
funcValue(columnDef.enableEditing, row)) !== false;
159147

160148
const isEditing =
161149
isEditable &&
@@ -196,8 +184,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
196184

197185
const { style, className, __vars } = getCommonCellStyles({
198186
column,
199-
isStriped,
200-
row,
187+
// isStriped, TODO: why were these here?
188+
// row,
201189
table,
202190
theme,
203191
tableCellProps,
@@ -230,7 +218,7 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
230218
'--white-space': density === 'xs' ? 'nowrap' : 'normal',
231219
'--z-index':
232220
draggingColumn?.id === column.id
233-
? 2
221+
? '2'
234222
: column.getIsPinned()
235223
? '1'
236224
: '0',

‎packages/mantine-react-table/src/body/MRT_TableBodyCellValue.tsx

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Highlight, type HighlightProps } from '@mantine/core';
22
import { type MRT_Cell, type MRT_TableInstance } from '../types';
3+
import { funcValue } from '../funcValue';
34

45
const allowedTypes = ['string', 'number'];
56
const allowedFilterVariants = ['text', 'autocomplete'];
@@ -22,11 +23,12 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any> = {}>({
2223
const { globalFilter, globalFilterFn } = getState();
2324
const filterValue = column.getFilterValue();
2425

25-
const highlightProps = (
26-
mantineHighlightProps instanceof Function
27-
? mantineHighlightProps({ cell, column, row, table })
28-
: mantineHighlightProps
29-
) as Partial<HighlightProps>;
26+
const highlightProps = funcValue(mantineHighlightProps, {
27+
cell,
28+
column,
29+
row,
30+
table,
31+
}) as Partial<HighlightProps>;
3032

3133
let renderedCellValue =
3234
cell.getIsAggregated() && columnDef.AggregatedCell
@@ -75,11 +77,7 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any> = {}>({
7577
}
7678

7779
renderedCellValue = (
78-
<Highlight
79-
color="yellow.3"
80-
highlight={highlight}
81-
{...highlightProps}
82-
>
80+
<Highlight color="yellow.3" highlight={highlight} {...highlightProps}>
8381
{renderedCellValue?.toString()}
8482
</Highlight>
8583
);

‎packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx

+9-12
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import { type DragEvent, memo, useRef } from 'react';
22
import { Box } from '@mantine/core';
33
import clsx from 'clsx';
4-
import {
5-
Memo_MRT_TableBodyCell,
6-
MRT_TableBodyCell,
7-
} from './MRT_TableBodyCell';
4+
import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
85
import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
96
import {
107
type MRT_Cell,
@@ -13,13 +10,14 @@ import {
1310
type MRT_VirtualItem,
1411
type MRT_Virtualizer,
1512
} from '../types';
13+
import { funcValue, styleValue } from '../funcValue';
1614

1715
import classes from './MRT_TableBodyRow.module.css';
1816

1917
interface Props<TData extends Record<string, any> = {}> {
2018
columnVirtualizer?: MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>;
2119
enableHover?: boolean;
22-
isStriped?: boolean;
20+
isStriped?: boolean | 'odd' | 'even';
2321
measureElement?: (element: HTMLTableRowElement) => void;
2422
numRows?: number;
2523
row: MRT_Row<TData>;
@@ -61,10 +59,11 @@ export const MRT_TableBodyRow = <TData extends Record<string, any> = {}>({
6159
const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } =
6260
getState();
6361

64-
const tableRowProps =
65-
mantineTableBodyRowProps instanceof Function
66-
? mantineTableBodyRowProps({ row, staticRowIndex: rowIndex, table })
67-
: mantineTableBodyRowProps;
62+
const tableRowProps = funcValue(mantineTableBodyRowProps, {
63+
row,
64+
staticRowIndex: rowIndex,
65+
table,
66+
});
6867

6968
const handleDragEnter = (_e: DragEvent) => {
7069
if (enableRowOrdering && draggingRow) {
@@ -102,9 +101,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any> = {}>({
102101
transform: virtualRow
103102
? `translateY(${virtualRow?.start}px)`
104103
: undefined,
105-
...(tableRowProps?.style instanceof Function
106-
? tableRowProps.style(theme)
107-
: (tableRowProps?.style as any)),
104+
...styleValue(tableRowProps, theme),
108105
})}
109106
>
110107
{virtualPaddingLeft ? (

‎packages/mantine-react-table/src/body/MRT_TableBodyRowGrabHandle.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { type DragEvent, type RefObject } from 'react';
22
import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
33
import { type MRT_Row, type MRT_TableInstance } from '../types';
4+
import { funcValue } from '../funcValue';
45

56
interface Props<TData extends Record<string, any> = {}> {
67
row: MRT_Row<TData>;
@@ -19,10 +20,7 @@ export const MRT_TableBodyRowGrabHandle = <
1920
options: { mantineRowDragHandleProps },
2021
} = table;
2122

22-
const actionIconProps =
23-
mantineRowDragHandleProps instanceof Function
24-
? mantineRowDragHandleProps({ row, table })
25-
: mantineRowDragHandleProps;
23+
const actionIconProps = funcValue(mantineRowDragHandleProps, { row, table });
2624

2725
const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
2826
actionIconProps?.onDragStart?.(event);

‎packages/mantine-react-table/src/body/MRT_TableDetailPanel.tsx

+10-19
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
type MRT_TableInstance,
66
type MRT_VirtualItem,
77
} from '../types';
8+
import { funcValue, styleValue } from '../funcValue';
89

910
interface Props<TData extends Record<string, any> = {}> {
1011
parentRowRef: React.RefObject<HTMLTableRowElement>;
@@ -33,20 +34,14 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any> = {}>({
3334
} = table;
3435
const { isLoading } = getState();
3536

36-
const tableRowProps =
37-
mantineTableBodyRowProps instanceof Function
38-
? mantineTableBodyRowProps({
39-
isDetailPanel: true,
40-
row,
41-
staticRowIndex: rowIndex,
42-
table,
43-
})
44-
: mantineTableBodyRowProps;
37+
const tableRowProps = funcValue(mantineTableBodyRowProps, {
38+
isDetailPanel: true,
39+
row,
40+
staticRowIndex: rowIndex,
41+
table,
42+
});
4543

46-
const tableCellProps =
47-
mantineDetailPanelProps instanceof Function
48-
? mantineDetailPanelProps({ row, table })
49-
: mantineDetailPanelProps;
44+
const tableCellProps = funcValue(mantineDetailPanelProps, { row, table });
5045

5146
return (
5247
<Box
@@ -64,9 +59,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any> = {}>({
6459
: undefined,
6560
width: '100%',
6661
zIndex: virtualRow ? 2 : undefined,
67-
...(tableRowProps?.style instanceof Function
68-
? tableRowProps.style(theme)
69-
: (tableRowProps?.style as any)),
62+
...styleValue(tableRowProps, theme),
7063
})}
7164
>
7265
<Box
@@ -86,9 +79,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any> = {}>({
8679
paddingTop: row.getIsExpanded() ? '16px !important' : '0 !important',
8780
transition: 'all 100ms ease-in-out',
8881
width: `${table.getTotalSize()}px`,
89-
...(tableCellProps?.style instanceof Function
90-
? tableCellProps.style(theme)
91-
: (tableCellProps?.style as any)),
82+
...styleValue(tableCellProps, theme),
9283
})}
9384
>
9485
{renderDetailPanel && (

‎packages/mantine-react-table/src/buttons/MRT_CopyButton.tsx

+5-20
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
22
import { UnstyledButton, CopyButton, Tooltip, rgba } from '@mantine/core';
33
import { type MRT_Cell, type MRT_TableInstance } from '../types';
44
import { getPrimaryColor } from '../column.utils';
5+
import { funcValue, styleValue } from '../funcValue';
56

67
interface Props<TData extends Record<string, any> = {}> {
78
cell: MRT_Cell<TData>;
@@ -20,24 +21,10 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
2021
const { column, row } = cell;
2122
const { columnDef } = column;
2223

23-
const mTableBodyCellCopyButtonProps =
24-
mantineCopyButtonProps instanceof Function
25-
? mantineCopyButtonProps({ cell, column, row, table })
26-
: mantineCopyButtonProps;
27-
28-
const mcTableBodyCellCopyButtonProps =
29-
columnDef.mantineCopyButtonProps instanceof Function
30-
? columnDef.mantineCopyButtonProps({
31-
cell,
32-
column,
33-
row,
34-
table,
35-
})
36-
: columnDef.mantineCopyButtonProps;
37-
24+
const arg = { cell, column, row, table };
3825
const buttonProps = {
39-
...mTableBodyCellCopyButtonProps,
40-
...mcTableBodyCellCopyButtonProps,
26+
...funcValue(mantineCopyButtonProps, arg),
27+
...funcValue(columnDef.mantineCopyButtonProps, arg),
4128
};
4229

4330
return (
@@ -80,9 +67,7 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
8067
'&:hover': {
8168
backgroundColor: rgba(getPrimaryColor(theme), 0.1),
8269
},
83-
...(buttonProps?.style instanceof Function
84-
? buttonProps.style(theme)
85-
: (buttonProps?.style as any)),
70+
...styleValue(buttonProps, theme),
8671
})}
8772
title={undefined}
8873
>

‎packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.tsx

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ActionIcon, Tooltip } from '@mantine/core';
22
import { type MRT_TableInstance } from '../types';
3+
import { funcValue, styleValue } from '../funcValue';
34

45
interface Props<TData extends Record<string, any> = {}> {
56
table: MRT_TableInstance<TData>;
@@ -23,10 +24,7 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any> = {}>({
2324
} = table;
2425
const { density, isLoading } = getState();
2526

26-
const actionIconProps =
27-
mantineExpandAllButtonProps instanceof Function
28-
? mantineExpandAllButtonProps({ table })
29-
: mantineExpandAllButtonProps;
27+
const actionIconProps = funcValue(mantineExpandAllButtonProps, { table });
3028

3129
const isAllRowsExpanded = getIsAllRowsExpanded();
3230

@@ -56,9 +54,7 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any> = {}>({
5654
'&:hover': {
5755
opacity: 1,
5856
},
59-
...(actionIconProps?.style instanceof Function
60-
? actionIconProps?.style(theme)
61-
: (actionIconProps?.style as any)),
57+
...styleValue(actionIconProps, theme),
6258
})}
6359
title={undefined}
6460
>

0 commit comments

Comments
 (0)