From 392dd802dc768febd61c1af073c6d65e47225dfc Mon Sep 17 00:00:00 2001 From: Janto Lima Date: Fri, 5 May 2023 21:29:26 +0200 Subject: [PATCH] Migrate 'ComparativeCategoryWidgetUI' component from makeStyles to styled-component + cleanup (#648) --- CHANGELOG.md | 1 + .../CategoryItem.js | 80 ++-------- .../CategorySkeleton.js | 26 ++- .../ComparativeCategoryWidgetUI.js | 65 ++------ .../comparative.styled.js | 149 ++++++++++++++++++ .../useCategoryStyles.js | 67 -------- 6 files changed, 192 insertions(+), 196 deletions(-) create mode 100644 packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/comparative.styled.js delete mode 100644 packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/useCategoryStyles.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 28a93eccb..873fbdf41 100644 --- 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 index 376d36702..f39ba477d 100644 --- 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} - -
+ + {name} @@ -56,21 +43,13 @@ function ComparativeCategoryTooltip({ item, index, names, formatter = IDENTITY_F flexGrow: 1 }} > - + {signText} {formatter(Math.abs(compareValue))} - - + + ); @@ -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 ( - onClick(item.key)} className={className} > {showCheckbox ? : null} - + {item.label} @@ -156,15 +111,10 @@ function CategoryItem({ key={`${item.key}_${i}`} title={tooltipContent(i)} placement='top-start' + arrow={false} > - -
+ +
-
+ - + ))} - - + + ); } diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategorySkeleton.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategorySkeleton.js index ae9b5fb7f..37087fb09 100644 --- 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 ( -
- + + - - + + {[...Array(4)].map((_, i) => ( - + - + {[...Array(3)].map((_, i) => ( -
+ ))} ))} - -
+ + ); } diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js index 4bfb824f4..8f1073687 100644 --- a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js @@ -5,7 +5,6 @@ import { InputAdornment, Link, SvgIcon, - TextField, useTheme } from '@mui/material'; import React, { useMemo, useState } from 'react'; @@ -13,10 +12,9 @@ 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 ( -
+ {filterable ? ( - + {selectedCategories.length ? selectedCategories.length : 'All'} {' selected'} @@ -260,16 +250,15 @@ function ComparativeCategoryWidgetUI({ ) : null} - + ) : null} {searchActive ? ( - - + setSearchValue(ev.currentTarget.value)} onFocus={(ev) => ev.currentTarget.scrollIntoView()} - className={classes.searchInput} InputProps={{ startAdornment: ( @@ -278,9 +267,9 @@ function ComparativeCategoryWidgetUI({ ) }} /> - + ) : null} - + {list.length === 0 ? ( <> No results @@ -290,7 +279,7 @@ function ComparativeCategoryWidgetUI({ ) : null} {list.map((d) => ( - ))} - + {showSearchToggle ? (
+ + ); } diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/comparative.styled.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/comparative.styled.js new file mode 100644 index 000000000..46aff3801 --- /dev/null +++ b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/comparative.styled.js @@ -0,0 +1,149 @@ +import { Box, TextField, Tooltip, styled } from '@mui/material'; +import CategoryItem from './CategoryItem'; + +export const Wrapper = styled('div')(({theme}) => ({ + padding: theme.spacing(2, 0), + ...theme.typography.body2 +})); + +export const CategoriesList = styled(Box)(({theme}) => ({ + overflow: 'auto', + maxHeight: theme.spacing(40), + paddingRight: theme.spacing(1), + margin: theme.spacing(0.5, 0) +})); + +export const BulletListWrapper = styled(Box)(({theme}) => ({ + display: 'flex', + alignItems: 'center', + flexWrap: 'wrap', + gap: theme.spacing(1.5), + padding: theme.spacing(2, 0) +})); + +export const BulletWrapper = styled(Box)(({theme, alignItems='center'}) => ({ + display: 'flex', + alignItems, + gap: theme.spacing(0.75) +})); + +export const Bullet = styled('div', { + shouldForwardProp: (prop) => prop !== 'color' +} +)(({theme, color: backgroundColor}) => ({ + flexShrink: 0, + width: theme.spacing(1), + height: theme.spacing(1), + borderRadius: theme.spacing(1), + backgroundColor, + +})); + + +export const ProgressbarWrapper = styled(Box)(({theme}) => ({ + display: 'flex', + alignItems: 'center', + gap: theme.spacing(2) +})); + +export const Progressbar = styled('div')(({theme}) => ({ + height: theme.spacing(0.5), + width: '100%', + borderRadius: theme.spacing(0.5), + backgroundColor: theme.palette.action.disabledBackground, + + '& div': { + width: 0, + height: '100%', + borderRadius: theme.spacing(0.5), + transition: `background-color ${theme.transitions.easing.sharp} ${theme.transitions.duration.shortest}ms, + width ${theme.transitions.easing.sharp} ${theme.transitions.duration.complex}ms` + } +})); + +export const Toolbar = styled(Box, { + shouldForwardProp: (prop) => prop !== 'center' +})(({theme, center = false}) => ({ + marginBottom: theme.spacing(2), + paddingRight: theme.spacing(1), + ...(center && { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + }), + '& .MuiTypography-caption': { + color: theme.palette.text.secondary + }, + + '& .MuiButton-label': { + ...theme.typography.caption + }, + + '& a': { + cursor: 'pointer' + } +})); + + +export const StyledTooltip = styled(Tooltip)(({theme}) => ({ + '.MuiTooltip-tooltip': { + color: theme.palette.common.white, + maxWidth: 260, + marginBottom: 0, + overflow: 'hidden', + }, +})); + + +export const SearchInput = styled(TextField)(({theme}) => ({ + marginTop: theme.spacing(-0.5) +})); + + +export const LabelWrapper = styled(Box)(() => ({ + display: 'flex', + flexWrap: 'nowrap', + justifyContent: 'space-between', +})); + + +export const CategoryItemStyled = styled(CategoryItem, { + shouldForwardProp: (prop) => prop !== 'filterable' +})(({theme, filterable}) => ({ + '& .progressbar div': { + backgroundColor: 'var(--color)' + }, + ...(filterable && { + cursor: 'pointer', + '&:hover .progressbar div': { + backgroundColor: 'var(--hover-color)' + }, + }) +})); + +export const CategoryItemWrapperRoot = styled(Box)(({theme}) => ({ + display: 'flex', + alignItems: 'center', + flexWrap: 'nowrap', + overflow: 'hidden', + gap: theme.spacing(1) +})); + +export const CategoryItemWrapperInner = styled(Box)(({theme}) => ({ + padding: theme.spacing(0.5, 0), + flexGrow: '1', + maxWidth: '100%', + minWidth: 0 +})); + + +export const SignWrapper = styled(Box, { + shouldForwardProp: (prop) => prop !== 'backgroundColor' +})(({theme, backgroundColor}) => ({ + marginLeft: theme.spacing(1), + padding: theme.spacing(0, 1), + backgroundColor, + color: 'white', + borderRadius: theme.spacing(2) +})); + diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/useCategoryStyles.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/useCategoryStyles.js deleted file mode 100644 index ebcbf4ed0..000000000 --- a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/useCategoryStyles.js +++ /dev/null @@ -1,67 +0,0 @@ -import makeStyles from '@mui/styles/makeStyles'; - -export const useCategoryStyles = makeStyles((theme) => ({ - wrapper: { - padding: theme.spacing(2, 0), - ...theme.typography.body2 - }, - categoriesList: { - overflow: 'auto', - maxHeight: theme.spacing(40), - paddingRight: theme.spacing(1), - margin: theme.spacing(0.5, 0) - }, - progressbar: { - height: theme.spacing(0.5), - width: '100%', - borderRadius: theme.spacing(0.5), - backgroundColor: theme.palette.action.disabledBackground, - - '& div': { - width: 0, - height: '100%', - borderRadius: theme.spacing(0.5), - transition: `background-color ${theme.transitions.easing.sharp} ${theme.transitions.duration.shortest}ms, - width ${theme.transitions.easing.sharp} ${theme.transitions.duration.complex}ms` - } - }, - toolbar: { - marginBottom: theme.spacing(2), - paddingRight: theme.spacing(1), - - '& .MuiTypography-caption': { - color: theme.palette.text.secondary - }, - - '& .MuiButton-label': { - ...theme.typography.caption - }, - - '& a': { - cursor: 'pointer' - } - }, - searchInput: { - marginTop: theme.spacing(-0.5) - }, - categoryGroup: { - '& $progressbar div': { - backgroundColor: 'var(--color)' - } - }, - categoryGroupHover: { - cursor: 'pointer', - '&:hover $progressbar div': { - backgroundColor: 'var(--hover-color)' - }, - '& $progressbar div': { - backgroundColor: 'var(--color)' - } - }, - bullet: { - flexShrink: 0, - width: theme.spacing(1), - height: theme.spacing(1), - borderRadius: theme.spacing(1) - } -}));