remove last uses of style={{ that i can (#164)

naughton · web-flow · commit cf5cb0d40587 · 2023-10-09T19:33:47.000-05:00
diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx
@@ -1,5 +1,5 @@
 import { type DragEvent, memo, useRef } from 'react';
-import { TableTr } from '@mantine/core';
+import { Box, TableTr } from '@mantine/core';
 import clsx from 'clsx';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
@@ -102,7 +102,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any> = {}>({
         )}
       >
         {virtualPaddingLeft ? (
-          <td style={{ display: 'flex', width: virtualPaddingLeft }} />
+          <Box component="td" display="flex" w={virtualPaddingLeft} />
         ) : null}
         {(virtualColumns ?? row.getVisibleCells()).map((cellOrVirtualCell) => {
           const cell = columnVirtualizer
@@ -140,7 +140,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any> = {}>({
           );
         })}
         {virtualPaddingRight ? (
-          <td style={{ display: 'flex', width: virtualPaddingRight }} />
+          <Box component="td" display="flex" w={virtualPaddingRight} />
         ) : null}
       </TableTr>
       {renderDetailPanel && !row.getIsGrouped() && (
diff --git a/packages/mantine-react-table/src/filterFns.ts b/packages/mantine-react-table/src/filterFns.ts
@@ -4,6 +4,7 @@ import {
   type RankingInfo,
 } from '@tanstack/match-sorter-utils';
 import { filterFns, type Row } from '@tanstack/react-table';
+import type { MRT_FilterOption, MRT_Localization } from './types';
 
 const fuzzy = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
@@ -191,3 +192,11 @@ export const MRT_FilterFns = {
   notEquals,
   startsWith,
 };
+
+export function localizedFilterOption(
+  localization: MRT_Localization,
+  option: MRT_FilterOption,
+) {
+  const key = `filter${option[0].toUpperCase()}${option.slice(1)}`;
+  return localization[key as keyof MRT_Localization] ?? '';
+}
diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { TableTr } from '@mantine/core';
+import { Box, TableTr } from '@mantine/core';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import {
   type MRT_Header,
@@ -56,7 +56,7 @@ export const MRT_TableFooterRow = <TData extends Record<string, any> = {}>({
       {...tableRowProps}
     >
       {virtualPaddingLeft ? (
-        <th style={{ display: 'flex', width: virtualPaddingLeft }} />
+        <Box component="th" display="flex" w={virtualPaddingLeft} />
       ) : null}
       {(virtualColumns ?? footerGroup.headers).map((footerOrVirtualFooter) => {
         const footer = virtualColumns
@@ -68,7 +68,7 @@ export const MRT_TableFooterRow = <TData extends Record<string, any> = {}>({
         );
       })}
       {virtualPaddingRight ? (
-        <th style={{ display: 'flex', width: virtualPaddingRight }} />
+        <Box component="th" display="flex" w={virtualPaddingRight} />
       ) : null}
     </TableTr>
   );
diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterContainer.module.css b/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterContainer.module.css
@@ -0,0 +1,5 @@
+.filter-mode-label {
+  white-space: nowrap;
+  margin-top: 4px;
+  font-size: 10px;
+}
diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterContainer.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterContainer.tsx
@@ -5,6 +5,9 @@ import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
+import { localizedFilterOption } from '../filterFns';
+
+import classes from './MRT_TableHeadCellFilterContainer.module.css';
 
 interface Props<TData extends Record<string, any> = {}> {
   header: MRT_Header<TData>;
@@ -70,7 +73,6 @@ export const MRT_TableHeadCellFilterContainer = <
                     variant="transparent"
                     aria-label={localization.changeFilterMode}
                     size="md"
-                    style={{ transform: 'translateY(-2px)' }}
                   >
                     <IconFilterCog />
                   </ActionIcon>
@@ -92,18 +94,12 @@ export const MRT_TableHeadCellFilterContainer = <
         {showChangeModeButton ? (
           <Text
             component="label"
+            className={classes['filter-mode-label']}
             c="dimmed"
-            style={{ whiteSpace: 'nowrap', marginTop: '4px', fontSize: '10px' }}
           >
             {localization.filterMode.replace(
               '{filterType}',
-              // @ts-ignore
-              localization[
-                `filter${
-                  currentFilterOption?.charAt(0)?.toUpperCase() +
-                  currentFilterOption?.slice(1)
-                }`
-              ],
+              localizedFilterOption(localization, currentFilterOption),
             )}
           </Text>
         ) : null}
diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterLabel.module.css b/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterLabel.module.css
@@ -1,6 +1,14 @@
-.MRT_TableHeadCellFilterLabelActionIcon {
-  opacity: var(--opacity);
+.root {
+  opacity: 0.5;
   padding: 2px;
+  color: gray;
+  &.active {
+    opacity: 1;
+    color: var(--mantine-primary-color-filled);
+    @mixin hover {
+      color: var(--mantine-primary-color-filled-hover);
+    }
+  }
   @mixin hover {
     opacity: 1;
   }
diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterLabel.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterLabel.tsx
@@ -1,15 +1,11 @@
+import clsx from 'clsx';
 import { useState, type MouseEvent } from 'react';
-import {
-  ActionIcon,
-  Box,
-  Transition,
-  Tooltip,
-  Popover,
-  useMantineTheme,
-} from '@mantine/core';
-import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
+import { ActionIcon, Box, Popover, Tooltip, Transition } from '@mantine/core';
+
 import { type MRT_Header, type MRT_TableInstance } from '../types';
-import { getPrimaryColor } from '../column.utils';
+import { localizedFilterOption } from '../filterFns';
+import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
+
 import classes from './MRT_TableHeadCellFilterLabel.module.css';
 
 interface Props<TData extends Record<string, any> = {}> {
@@ -35,8 +31,6 @@ export const MRT_TableHeadCellFilterLabel = <
   const { column } = header;
   const { columnDef } = column;
 
-  const theme = useMantineTheme();
-
   const filterValue = column.getFilterValue();
 
   const [popoverOpened, setPopoverOpened] = useState(false);
@@ -61,13 +55,7 @@ export const MRT_TableHeadCellFilterLabel = <
           .replace('{column}', String(columnDef.header))
           .replace(
             '{filterType}',
-            // @ts-ignore
-            localization[
-              `filter${
-                currentFilterOption?.charAt(0)?.toUpperCase() +
-                currentFilterOption?.slice(1)
-              }`
-            ],
+            localizedFilterOption(localization, currentFilterOption),
           )
           .replace(
             '{filterValue}',
@@ -100,8 +88,8 @@ export const MRT_TableHeadCellFilterLabel = <
             (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
         }
       >
-        {(style) => (
-          <Box component="span" style={{ ...style, flex: '0 0' }}>
+        {() => (
+          <Box component="span">
             <Popover.Target>
               <Tooltip
                 disabled={popoverOpened}
@@ -111,8 +99,13 @@ export const MRT_TableHeadCellFilterLabel = <
                 withinPortal
               >
                 <ActionIcon
+                  size="sm"
                   variant="transparent"
-                  color={isFilterActive ? getPrimaryColor(theme) : 'gray'}
+                  className={clsx(
+                    'mrt-table-head-cell-filter-label-icon',
+                    classes.root,
+                    isFilterActive && classes.active,
+                  )}
                   onClick={(event: MouseEvent<HTMLButtonElement>) => {
                     event.stopPropagation();
                     if (columnFilterDisplayMode === 'popover') {
@@ -121,15 +114,11 @@ export const MRT_TableHeadCellFilterLabel = <
                       setShowColumnFilters(true);
                     }
                     setTimeout(() => {
-                      filterInputRefs.current[`${column.id}-0`]?.focus();
-                      filterInputRefs.current[`${column.id}-0`]?.select();
+                      const input = filterInputRefs.current[`${column.id}-0`];
+                      input?.focus();
+                      input?.select();
                     }, 100);
                   }}
-                  size="sm"
-                  className={classes.MRT_TableHeadCellFilterLabelActionIcon}
-                  __vars={{
-                    '--opacity': isFilterActive ? '1' : '0.5',
-                  }}
                 >
                   <IconFilter />
                 </ActionIcon>
diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadRow.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadRow.tsx
@@ -1,4 +1,4 @@
-import { TableTr } from '@mantine/core';
+import { Box, TableTr } from '@mantine/core';
 import clsx from 'clsx';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
 import {
@@ -48,7 +48,7 @@ export const MRT_TableHeadRow = <TData extends Record<string, any> = {}>({
       )}
     >
       {virtualPaddingLeft ? (
-        <th style={{ display: 'flex', width: virtualPaddingLeft }} />
+        <Box component="th" display="flex" w={virtualPaddingLeft} />
       ) : null}
       {(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader) => {
         const header = virtualColumns
@@ -60,7 +60,7 @@ export const MRT_TableHeadRow = <TData extends Record<string, any> = {}>({
         );
       })}
       {virtualPaddingRight ? (
-        <th style={{ display: 'flex', width: virtualPaddingRight }} />
+        <Box component="th" display="flex" w={virtualPaddingRight} />
       ) : null}
     </TableTr>
   );
diff --git a/packages/mantine-react-table/src/inputs/MRT_FilterTextInput.tsx b/packages/mantine-react-table/src/inputs/MRT_FilterTextInput.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { type MouseEvent, useEffect, useMemo, useRef, useState } from 'react';
 import {
   ActionIcon,
@@ -10,11 +11,11 @@ import {
   Select,
   TextInput,
 } from '@mantine/core';
-import clsx from 'clsx';
 import { DateInput } from '@mantine/dates';
 import { useDebouncedValue } from '@mantine/hooks';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { localizedFilterOption } from '../filterFns';
 
 import classes from './MRT_FilterTextInput.module.css';
 
@@ -108,13 +109,7 @@ export const MRT_FilterTextInput = <TData extends Record<string, any> = {}>({
 
   const currentFilterOption = columnDef._filterFn;
   const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
-    ? //@ts-ignore
-      localization[
-        `filter${
-          currentFilterOption?.charAt?.(0)?.toUpperCase() +
-          currentFilterOption?.slice(1)
-        }`
-      ]
+    ? localizedFilterOption(localization, currentFilterOption)
     : '';
   const filterPlaceholder = !isRangeFilter
     ? textInputProps?.placeholder ??
