Add click away

This commit is contained in:
dominik-zeglen 2020-01-16 13:40:22 +01:00
parent aeb209744a
commit 15470221c2

View file

@ -1,4 +1,5 @@
import ButtonBase from "@material-ui/core/ButtonBase"; import ButtonBase from "@material-ui/core/ButtonBase";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import Grow from "@material-ui/core/Grow"; import Grow from "@material-ui/core/Grow";
import Popper from "@material-ui/core/Popper"; import Popper from "@material-ui/core/Popper";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
@ -96,10 +97,12 @@ const Filter: React.FC<FilterProps> = props => {
const isFilterActive = menu.some(filterElement => filterElement.active); const isFilterActive = menu.some(filterElement => filterElement.active);
return ( return (
<ClickAwayListener onClickAway={() => setFilterMenuOpened(false)}>
<div ref={anchor}> <div ref={anchor}>
<ButtonBase <ButtonBase
className={classNames(classes.filterButton, classes.addFilterButton, { className={classNames(classes.filterButton, classes.addFilterButton, {
[classes.addFilterButtonActive]: isFilterMenuOpened || isFilterActive [classes.addFilterButtonActive]:
isFilterMenuOpened || isFilterActive
})} })}
onClick={() => setFilterMenuOpened(!isFilterMenuOpened)} onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
> >
@ -148,6 +151,7 @@ const Filter: React.FC<FilterProps> = props => {
)} )}
</Popper> </Popper>
</div> </div>
</ClickAwayListener>
); );
}; };
Filter.displayName = "Filter"; Filter.displayName = "Filter";