Migrate 'TableWidgetUI' component from makeStyles to styled-component…

… + cleanup (#642)
CartoDB · Apr 28, 2023 · 129dff0 · 129dff0
1 parent cde030f
commit 129dff0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - RangeWidgetUI component migrated from makeStyles to styled-components [#639](https://github.com/CartoDB/carto-react/pull/639)
 - FeatureSelectionWidgetUI component migrated from makeStyles to styled-components [#640](https://github.com/CartoDB/carto-react/pull/640)
 - LegendWrapper component migrated from makeStyles to styled-components + cleanup [#641](https://github.com/CartoDB/carto-react/pull/641)
+- TableWidgetUI component migrated from makeStyles to styled-components + cleanup [#642](https://github.com/CartoDB/carto-react/pull/642)
 
 ## 2.0
 

diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js
@@ -223,6 +223,7 @@ export const dataDisplayOverrides = {
         border: `2px solid ${commonPalette.divider}`,
         borderRadius: getSpacing(0.5),
         fontWeight: themeTypography.fontWeightMedium,
+        paddingRight: getSpacing(3),
         '& .MuiSelect-icon': {
           top: '50%',
           transform: 'translateY(-50%)',

diff --git a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js
@@ -8,23 +8,31 @@ import {
   TableHead,
   TableRow,
   TableSortLabel,
-  TablePagination
+  TablePagination,
+  styled
 } from '@mui/material';
 
-import makeStyles from '@mui/styles/makeStyles';
+const TableHeadCellLabel = styled(TableSortLabel)(({ theme }) => ({
+  ...theme.typography.caption,
+  color: theme.palette.text.secondary
+}));
+
+const TableRowStyled = styled(TableRow)(({ theme }) => ({
+  maxHeight: theme.spacing(6.5),
+  transition: 'background-color 0.25s ease',
+  '&.MuiTableRow-hover:hover': {
+    cursor: 'pointer',
+    backgroundColor: theme.palette.background.default
+  }
+}));
 
-const useStyles = makeStyles((theme) => ({
-  tableRow: {
-    maxHeight: theme.spacing(6.5)
-  },
-  tableCell: {
+const TableCellStyled = styled(TableCell)(() => ({
+  overflow: 'hidden',
+  '& p': {
+    maxWidth: '100%',
+    whiteSpace: 'nowrap',
     overflow: 'hidden',
-    '& p': {
-      maxWidth: '100%',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    }
+    textOverflow: 'ellipsis'
   }
 }));
 
@@ -101,22 +109,19 @@ function TableWidgetUI({
 }
 
 function TableHeaderComponent({ columns, sorting, sortBy, sortDirection, onSort }) {
-  const classes = useStyles();
-
   return (
     <TableHead>
       <TableRow>
         {columns.map(({ field, headerName, align }) => (
           <TableCell key={field} align={align || 'left'}>
             {sorting ? (
-              <TableSortLabel
+              <TableHeadCellLabel
                 active={sortBy === field}
                 direction={sortBy === field ? sortDirection : 'asc'}
                 onClick={() => onSort(field)}
-                className={classes.tableHeadCellLabel}
               >
                 {headerName}
-              </TableSortLabel>
+              </TableHeadCellLabel>
             ) : (
               headerName
             )}
@@ -128,34 +133,30 @@ function TableHeaderComponent({ columns, sorting, sortBy, sortDirection, onSort
 }
 
 function TableBodyComponent({ columns, rows, onRowClick }) {
-  const classes = useStyles();
-
   return (
     <TableBody>
       {rows.map((row, i) => {
         const rowKey = row.cartodb_id || row.id || i;
 
         return (
-          <TableRow
+          <TableRowStyled
             key={rowKey}
-            className={classes.tableRow}
             hover={!!onRowClick}
             onClick={() => onRowClick && onRowClick(row)}
           >
             {columns.map(
               ({ field, headerName, align, component }) =>
                 headerName && (
-                  <TableCell
+                  <TableCellStyled
                     key={`${rowKey}_${field}`}
                     scope='row'
                     align={align || 'left'}
-                    className={classes.tableCell}
                   >
                     {component ? component(row[field]) : row[field]}
-                  </TableCell>
+                  </TableCellStyled>
                 )
             )}
-          </TableRow>
+          </TableRowStyled>
         );
       })}
     </TableBody>