diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx index fd49209f1..148f1175d 100644 --- a/src/components/Filter/Filter.tsx +++ b/src/components/Filter/Filter.tsx @@ -46,7 +46,6 @@ const useStyles = makeStyles( color: theme.palette.primary.main, fontSize: 14, fontWeight: 600 as 600, - marginRight: 4, textTransform: "uppercase" }, filterButton: { @@ -75,6 +74,13 @@ const useStyles = makeStyles( }, rotate: { transform: "rotate(180deg)" + }, + separator: { + backgroundColor: theme.palette.primary.main, + display: "inline-block", + height: 28, + margin: theme.spacing(0, 1.5, 0, 1), + width: 1 } }), { name: "Filter" } @@ -87,17 +93,30 @@ const Filter: React.FC = props => { const [isFilterMenuOpened, setFilterMenuOpened] = React.useState(false); const [data, dispatch, reset] = useFilter(menu); + const isFilterActive = menu.some(filterElement => filterElement.active); + return (
setFilterMenuOpened(!isFilterMenuOpened)} > + {isFilterActive && ( + <> + + + {menu.reduce( + (acc, filterElement) => acc + (filterElement.active ? 1 : 0), + 0 + )} + + + )} = ({ onTabSave={onTabSave} tabs={tabs} allTabLabel={intl.formatMessage({ - defaultMessage: "All Products", + defaultMessage: "All Orders", description: "tab name" })} filterStructure={filterStructure} searchPlaceholder={intl.formatMessage({ - defaultMessage: "Search Products..." + defaultMessage: "Search Orders..." })} />