Add active filters indicator

This commit is contained in:
dominik-zeglen 2019-12-20 17:31:26 +01:00
parent 238bff1d9b
commit fe6996c0cf
2 changed files with 23 additions and 4 deletions

View file

@ -46,7 +46,6 @@ const useStyles = makeStyles(
color: theme.palette.primary.main, color: theme.palette.primary.main,
fontSize: 14, fontSize: 14,
fontWeight: 600 as 600, fontWeight: 600 as 600,
marginRight: 4,
textTransform: "uppercase" textTransform: "uppercase"
}, },
filterButton: { filterButton: {
@ -75,6 +74,13 @@ const useStyles = makeStyles(
}, },
rotate: { rotate: {
transform: "rotate(180deg)" 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" } { name: "Filter" }
@ -87,17 +93,30 @@ const Filter: React.FC<FilterProps> = props => {
const [isFilterMenuOpened, setFilterMenuOpened] = React.useState(false); const [isFilterMenuOpened, setFilterMenuOpened] = React.useState(false);
const [data, dispatch, reset] = useFilter(menu); const [data, dispatch, reset] = useFilter(menu);
const isFilterActive = menu.some(filterElement => filterElement.active);
return ( return (
<div ref={anchor}> <div ref={anchor}>
<ButtonBase <ButtonBase
className={classNames(classes.filterButton, classes.addFilterButton, { className={classNames(classes.filterButton, classes.addFilterButton, {
[classes.addFilterButtonActive]: isFilterMenuOpened [classes.addFilterButtonActive]: isFilterMenuOpened || isFilterActive
})} })}
onClick={() => setFilterMenuOpened(!isFilterMenuOpened)} onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
> >
<Typography className={classes.addFilterText}> <Typography className={classes.addFilterText}>
<FormattedMessage defaultMessage="Filters" description="button" /> <FormattedMessage defaultMessage="Filters" description="button" />
</Typography> </Typography>
{isFilterActive && (
<>
<span className={classes.separator} />
<Typography className={classes.addFilterText}>
{menu.reduce(
(acc, filterElement) => acc + (filterElement.active ? 1 : 0),
0
)}
</Typography>
</>
)}
</ButtonBase> </ButtonBase>
<Popper <Popper
className={classes.popover} className={classes.popover}

View file

@ -73,12 +73,12 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
onTabSave={onTabSave} onTabSave={onTabSave}
tabs={tabs} tabs={tabs}
allTabLabel={intl.formatMessage({ allTabLabel={intl.formatMessage({
defaultMessage: "All Products", defaultMessage: "All Orders",
description: "tab name" description: "tab name"
})} })}
filterStructure={filterStructure} filterStructure={filterStructure}
searchPlaceholder={intl.formatMessage({ searchPlaceholder={intl.formatMessage({
defaultMessage: "Search Products..." defaultMessage: "Search Orders..."
})} })}
/> />
<OrderList {...listProps} /> <OrderList {...listProps} />