Migrate 'ComparativeCategoryWidgetUI' component from makeStyles to st…

…yled-component + cleanup (#648)
CartoDB · May 5, 2023 · 392dd80 · 392dd80
1 parent 0a6c994
commit 392dd80
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 196 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@
 - BarWidgetUI component migrated from makeStyles to styled-components + cleanup [#644](https://github.com/CartoDB/carto-react/pull/644)
 - CategoryWidgetUI component migrated from makeStyles to styled-components + cleanup [#645](https://github.com/CartoDB/carto-react/pull/645)
 - HistogramWidgetUI component migrated from makeStyles to styled-components + cleanup [#646](https://github.com/CartoDB/carto-react/pull/646)
+- ComparativeCategoryWidgetUI component migrated from makeStyles to styled-components + cleanup [#648](https://github.com/CartoDB/carto-react/pull/648)
 
 ## 2.0
 

diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategoryItem.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategoryItem.js
@@ -7,14 +7,13 @@ import AnimatedNumber, {
 } from '../../../custom-components/AnimatedNumber';
 import { transposedCategoryItemPropTypes } from './transposeCategoryData';
 import { OTHERS_KEY } from './ComparativeCategoryWidgetUI';
-import { useCategoryStyles } from './useCategoryStyles';
+import { Bullet, BulletWrapper, CategoryItemWrapperInner, CategoryItemWrapperRoot, Progressbar, ProgressbarWrapper, SignWrapper, StyledTooltip } from './comparative.styled';
 
 const IDENTITY_FN = (v) => v;
 const EMPTY_ARRAY = [];
 
 function ComparativeCategoryTooltip({ item, index, names, formatter = IDENTITY_FN }) {
   const theme = useTheme();
-  const classes = useCategoryStyles();
   const reference = item.data[0];
   const data = item.data[index];
   const name = names[index];
@@ -34,20 +33,8 @@ function ComparativeCategoryTooltip({ item, index, names, formatter = IDENTITY_F
         {item.label}
       </Typography>
       <Box pt={1} pb={0.5}>
-        <Box
-          style={{
-            display: 'flex',
-            alignItems: 'baseline',
-            gap: theme.spacing(0.75)
-          }}
-        >
-          <div
-            className={classes.bullet}
-            style={{
-              backgroundColor:
-                item.key === OTHERS_KEY ? theme.palette.background.default : data.color
-            }}
-          ></div>
+        <BulletWrapper alignItems='baseline'>
+          <Bullet color={item.key === OTHERS_KEY ? theme.palette.background.default : data.color} />
           <Typography color='inherit' variant='caption'>
             {name}
           </Typography>
@@ -56,21 +43,13 @@ function ComparativeCategoryTooltip({ item, index, names, formatter = IDENTITY_F
               flexGrow: 1
             }}
           ></Box>
-          <Box
-            style={{
-              marginLeft: theme.spacing(1),
-              padding: theme.spacing(0, 1),
-              backgroundColor: numberColor,
-              color: 'white',
-              borderRadius: theme.spacing(2)
-            }}
-          >
+          <SignWrapper backgroundColor={numberColor}>
             <Typography color='inherit' variant='caption'>
               {signText}
               {formatter(Math.abs(compareValue))}
             </Typography>
-          </Box>
-        </Box>
+          </SignWrapper>
+        </BulletWrapper>
       </Box>
     </div>
   );
@@ -89,15 +68,6 @@ ComparativeCategoryTooltip.propTypes = {
   index: PropTypes.number
 };
 
-const StyledTooltip = withStyles((theme) => ({
-  tooltip: {
-    color: theme.palette.common.white,
-    maxWidth: 260,
-    marginBottom: 0,
-    overflow: 'hidden'
-  }
-}))(Tooltip);
-
 function CategoryItem({
   item,
   animation,
@@ -111,7 +81,6 @@ function CategoryItem({
   onClick = IDENTITY_FN,
   names
 }) {
-  const classes = useCategoryStyles();
   const theme = useTheme();
 
   function getProgressbarLength(value) {
@@ -128,26 +97,12 @@ function CategoryItem({
   );
 
   return (
-    <Box
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        flexWrap: 'nowrap',
-        overflow: 'hidden',
-        gap: theme.spacing(1)
-      }}
+    <CategoryItemWrapperRoot
       onClick={() => onClick(item.key)}
       className={className}
     >
       {showCheckbox ? <Checkbox checked={checkboxChecked} /> : null}
-      <Box
-        style={{
-          padding: theme.spacing(0.5, 0),
-          flexGrow: '1',
-          maxWidth: '100%',
-          minWidth: 0
-        }}
-      >
+      <CategoryItemWrapperInner>
         <Typography variant='body2' noWrap>
           {item.label}
         </Typography>
@@ -156,15 +111,10 @@ function CategoryItem({
             key={`${item.key}_${i}`}
             title={tooltipContent(i)}
             placement='top-start'
+            arrow={false}
           >
-            <Box
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: theme.spacing(2)
-              }}
-            >
-              <div className={classes.progressbar}>
+            <ProgressbarWrapper>
+              <Progressbar className='progressbar'>
                 <div
                   style={
                     /* @ts-ignore */ {
@@ -174,7 +124,7 @@ function CategoryItem({
                     }
                   }
                 ></div>
-              </div>
+              </Progressbar>
               <Typography
                 variant={i === 0 ? 'body2' : 'caption'}
                 color={i === 0 ? 'textPrimary' : 'textSecondary'}
@@ -186,11 +136,11 @@ function CategoryItem({
                   formatter={formatter}
                 />
               </Typography>
-            </Box>
+            </ProgressbarWrapper>
           </StyledTooltip>
         ))}
-      </Box>
-    </Box>
+      </CategoryItemWrapperInner>
+    </CategoryItemWrapperRoot>
   );
 }
 

diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategorySkeleton.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategorySkeleton.js
@@ -1,40 +1,34 @@
 import React from 'react';
 import { Box } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
-import { useCategoryStyles } from './useCategoryStyles';
 import Typography from '../../../components/atoms/Typography';
+import { CategoriesList, LabelWrapper, Progressbar, Toolbar, Wrapper } from './comparative.styled';
 
 export default function CategorySkeleton() {
-  const classes = useCategoryStyles();
   return (
-    <div className={classes.wrapper}>
-      <Box
-        display='flex'
-        alignItems='center'
-        justifyContent='space-between'
-        className={classes.toolbar}
-      >
+    <Wrapper>
+      <Toolbar center={true}>
         <Typography variant='caption'>
           <Skeleton variant='text' width={100} />
         </Typography>
-      </Box>
-      <Box className={classes.categoriesList}>
+      </Toolbar>
+      <CategoriesList>
         {[...Array(4)].map((_, i) => (
           <Box key={i} py={0.5}>
-            <Box display='flex' justifyContent='space-between' flexWrap='nowrap'>
+            <LabelWrapper>
               <Typography variant='body2' noWrap>
                 <Skeleton variant='text' width={100} />
               </Typography>
               <Typography variant='body2'>
                 <Skeleton variant='text' width={70} />
               </Typography>
-            </Box>
+            </LabelWrapper>
             {[...Array(3)].map((_, i) => (
-              <div key={i} className={classes.progressbar}></div>
+              <Progressbar key={i} />
             ))}
           </Box>
         ))}
-      </Box>
-    </div>
+      </CategoriesList>
+    </Wrapper>
   );
 }
diff --git a/...act-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js b/...act-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js
@@ -5,18 +5,16 @@ import {
   InputAdornment,
   Link,
   SvgIcon,
-  TextField,
   useTheme
 } from '@mui/material';
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { animationOptionsPropTypes } from '../../../custom-components/AnimatedNumber';
 import CategoryWidgetUI from '../../CategoryWidgetUI';
 import { transposeCategoryData } from './transposeCategoryData';
-import { useCategoryStyles } from './useCategoryStyles';
-import CategoryItem from './CategoryItem';
 import CategorySkeleton from './CategorySkeleton';
 import Typography from '../../../components/atoms/Typography';
+import { Bullet, BulletWrapper, BulletListWrapper, CategoriesList, SearchInput, Toolbar, Wrapper, CategoryItemStyled } from './comparative.styled';
 
 const IDENTITY_FN = (v) => v;
 const EMPTY_ARRAY = [];
@@ -72,7 +70,6 @@ function ComparativeCategoryWidgetUI({
   formatter = IDENTITY_FN,
   tooltipFormatter = IDENTITY_FN
 }) {
-  const classes = useCategoryStyles();
   const theme = useTheme();
   const [searchActive, setSearchActive] = useState(false);
   const [blockingActive, setBlockingActive] = useState(false);
@@ -227,16 +224,9 @@ function ComparativeCategoryWidgetUI({
     : undefined;
 
   return (
-    <div className={classes.wrapper}>
+    <Wrapper>
       {filterable ? (
-        <Box
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center'
-          }}
-          className={classes.toolbar}
-        >
+        <Toolbar center={true}>
           <Typography variant='caption'>
             {selectedCategories.length ? selectedCategories.length : 'All'}
             {' selected'}
@@ -260,16 +250,15 @@ function ComparativeCategoryWidgetUI({
               </Box>
             ) : null}
           </Typography>
-        </Box>
+        </Toolbar>
       ) : null}
       {searchActive ? (
-        <Box className={classes.toolbar}>
-          <TextField
+        <Toolbar>
+          <SearchInput
             size='small'
             placeholder='Search'
             onChange={(ev) => setSearchValue(ev.currentTarget.value)}
             onFocus={(ev) => ev.currentTarget.scrollIntoView()}
-            className={classes.searchInput}
             InputProps={{
               startAdornment: (
                 <InputAdornment position='start'>
@@ -278,9 +267,9 @@ function ComparativeCategoryWidgetUI({
               )
             }}
           />
-        </Box>
+        </Toolbar>
       ) : null}
-      <Box className={classes.categoriesList}>
+      <CategoriesList>
         {list.length === 0 ? (
           <>
             <Typography variant='body2'>No results</Typography>
@@ -290,22 +279,22 @@ function ComparativeCategoryWidgetUI({
           </>
         ) : null}
         {list.map((d) => (
-          <CategoryItem
+          <CategoryItemStyled
             key={d.key}
             item={d}
             animation={animation}
             animationOptions={animationOptions}
             maxValue={maxValue}
             showCheckbox={filterable && searchActive}
             checkboxChecked={tempSelection.indexOf(d.key) !== -1}
-            className={filterable ? classes.categoryGroupHover : classes.categoryGroup}
+            filterable={filterable}
             formatter={formatter}
             tooltipFormatter={tooltipFormatter}
             onClick={clickHandler}
             names={names}
           />
         ))}
-      </Box>
+      </CategoriesList>
       {showSearchToggle ? (
         <Button
           size='small'
@@ -321,35 +310,15 @@ function ComparativeCategoryWidgetUI({
           Cancel
         </Button>
       ) : null}
-      <Box
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          flexWrap: 'wrap',
-          gap: theme.spacing(1.5),
-          padding: theme.spacing(2, 0)
-        }}
-      >
+      <BulletListWrapper>
         {names.map((name, i) => (
-          <Box
-            key={names[i]}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: theme.spacing(0.75)
-            }}
-          >
-            <div
-              className={classes.bullet}
-              style={{
-                backgroundColor: colors?.[i] || theme.palette.background.default
-              }}
-            ></div>
+          <BulletWrapper key={names[i]}>
+            <Bullet color={colors?.[i] || theme.palette.background.default} />
             <Typography variant='overline'>{name}</Typography>
-          </Box>
+          </BulletWrapper>
         ))}
-      </Box>
-    </div>
+      </BulletListWrapper>
+    </Wrapper>
   );
 }