fix isStriped

fix Progress animated fix Sx ref in TablePagination comment out some non-working styles with // TODO
KevinVandy · Sep 27, 2023 · 08633ce · 08633ce
1 parent 9c251dd
commit 08633ce
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 38 deletions.
diff --git a/packages/mantine-react-table/src/body/MRT_TableBody.tsx b/packages/mantine-react-table/src/body/MRT_TableBody.tsx
@@ -15,7 +15,7 @@ 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;

diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx
@@ -28,7 +28,7 @@ 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;
@@ -184,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,
@@ -218,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_TableBodyRow.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx
@@ -17,7 +17,7 @@ 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>;

diff --git a/packages/mantine-react-table/src/column.utils.ts b/packages/mantine-react-table/src/column.utils.ts
@@ -393,11 +393,15 @@ export const MRT_DefaultDisplayColumn = {
 export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
 
 export const getPrimaryShade = (theme: MantineTheme): number =>
-  (theme.colorScheme === 'dark'
-    ? // @ts-ignore
-      theme.primaryShade?.dark ?? theme.primaryShade
-    : // @ts-ignore
-      theme.primaryShade?.light ?? theme.primaryShade) ?? 7;
+  typeof theme.primaryShade === 'number'
+    ? theme.primaryShade
+    : theme.primaryShade?.dark ?? 7;
+// TODO: where is colorScheme?
+// (theme.colorScheme === 'dark'
+//   ? // @ts-ignore
+//     theme.primaryShade?.dark ?? theme.primaryShade
+//   : // @ts-ignore
+//     theme.primaryShade?.light ?? theme.primaryShade) ?? 7;
 
 export const getPrimaryColor = (
   theme: MantineTheme,

diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx
@@ -7,7 +7,7 @@ import {
   type MRT_TableInstance,
   type MRT_VirtualItem,
 } from '../types';
-import { funcValue } from '../funcValue';
+import { funcValue, styleValue } from '../funcValue';
 
 import classes from './MRT_TableFooterRow.module.css';
 

diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCellResizeHandle.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCellResizeHandle.tsx
@@ -1,6 +1,6 @@
 import { Box, Divider } from '@mantine/core';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
-import { getPrimaryColor } from '../column.utils';
+
 import classes from './MRT_TableHeadCellResizeHandle.module.css';
 
 interface Props<TData extends Record<string, any> = {}> {

diff --git a/packages/mantine-react-table/src/menus/MRT_FilterOptionMenu.tsx b/packages/mantine-react-table/src/menus/MRT_FilterOptionMenu.tsx
@@ -246,13 +246,16 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
                   handleSelectFilterMode(option as MRT_FilterOption)
                 }
                 color={option === filterOption ? 'blue' : undefined}
-                style={{
-                  '& > .mantine-Menu-itemLabel': {
-                    display: 'flex',
-                    flexWrap: 'nowrap',
-                    gap: '1ch',
-                  },
-                }}
+                style={
+                  {
+                    // TODO: move to module
+                    // '& > .mantine-Menu-itemLabel': {
+                    //   display: 'flex',
+                    //   flexWrap: 'nowrap',
+                    //   gap: '1ch',
+                    // },
+                  }
+                }
                 value={option}
               >
                 <Flex

diff --git a/packages/mantine-react-table/src/toolbar/MRT_ProgressBar.tsx b/packages/mantine-react-table/src/toolbar/MRT_ProgressBar.tsx
@@ -33,7 +33,7 @@ export const MRT_ProgressBar = <TData extends Record<string, any> = {}>({
       }}
     >
       <Progress
-        animate
+        animated
         aria-busy="true"
         aria-label="Loading"
         radius={0}

diff --git a/packages/mantine-react-table/src/toolbar/MRT_TablePagination.tsx b/packages/mantine-react-table/src/toolbar/MRT_TablePagination.tsx
@@ -1,4 +1,11 @@
-import { ActionIcon, Flex, Pagination, Select, Text } from '@mantine/core';
+import {
+  ActionIcon,
+  Flex,
+  type MantineStyleProp,
+  Pagination,
+  Select,
+  Text,
+} from '@mantine/core';
 import { type MRT_TableInstance } from '../types';
 import { funcValue } from '../funcValue';
 
@@ -7,12 +14,13 @@ interface Props<TData extends Record<string, any> = {}> {
   table: MRT_TableInstance<TData>;
 }
 
-const commonActionButtonStyles: Sx = {
+const commonActionButtonStyles: MantineStyleProp = {
   userSelect: 'none',
-  '&:disabled': {
-    backgroundColor: 'transparent',
-    border: 'none',
-  },
+  // TODO: move to module
+  // '&:disabled': {
+  //   backgroundColor: 'transparent',
+  //   border: 'none',
+  // },
 };
 
 export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
@@ -84,18 +92,20 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
           label={localization.rowsPerPage}
           onChange={(value: string) => setPageSize(+value)}
           value={pageSize.toString()}
-          style={{
-            '@media (min-width: 720px)': {
+          style={
+            {
               // TODO: move to module
-              display: 'flex',
-              alignItems: 'center',
-              gap: '8px',
-            },
-            '& .mantine-Select-input': {
-              width: '80px',
-            },
-          }}
-          withinPortal
+              // '@media (min-width: 720px)': {
+              //   display: 'flex',
+              //   alignItems: 'center',
+              //   gap: '8px',
+              // },
+              // '& .mantine-Select-input': {
+              //   width: '80px',
+              // },
+            }
+          }
+          // withinPortal // TODO: doesn't exist anymore.
         />
       )}
       {paginationDisplayMode === 'pages' ? (