djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add click away

Browse source
This commit is contained in:
dominik-zeglen 2020-01-16 13:40:22 +01:00
parent aeb209744a
commit 15470221c2
1 changed files with 55 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
src/components/Filter/Filter.tsx
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,58 +97,61 @@ const Filter: React.FC<FilterProps> = props => {
const isFilterActive = menu.some(filterElement => filterElement.active); const isFilterActive = menu.some(filterElement => filterElement.active);
return ( return (
<div ref={anchor}> <ClickAwayListener onClickAway={() => setFilterMenuOpened(false)}>
<ButtonBase <div ref={anchor}>
className={classNames(classes.filterButton, classes.addFilterButton, { <ButtonBase
[classes.addFilterButtonActive]: isFilterMenuOpened || isFilterActive className={classNames(classes.filterButton, classes.addFilterButton, {
})} [classes.addFilterButtonActive]:
onClick={() => setFilterMenuOpened(!isFilterMenuOpened)} isFilterMenuOpened || isFilterActive
> })}
<Typography className={classes.addFilterText}> onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
<FormattedMessage defaultMessage="Filters" description="button" /> >
</Typography> <Typography className={classes.addFilterText}>
{isFilterActive && ( <FormattedMessage defaultMessage="Filters" description="button" />
<> </Typography>
<span className={classes.separator} /> {isFilterActive && (
<Typography className={classes.addFilterText}> <>
{menu.reduce( <span className={classes.separator} />
(acc, filterElement) => acc + (filterElement.active ? 1 : 0), <Typography className={classes.addFilterText}>
0 {menu.reduce(
)} (acc, filterElement) => acc + (filterElement.active ? 1 : 0),
</Typography> 0
</> )}
)} </Typography>
</ButtonBase> </>
<Popper )}
className={classes.popover} </ButtonBase>
open={isFilterMenuOpened} <Popper
anchorEl={anchor.current} className={classes.popover}
transition open={isFilterMenuOpened}
disablePortal anchorEl={anchor.current}
placement="bottom-start" transition
> disablePortal
{({ TransitionProps, placement }) => ( placement="bottom-start"
<Grow >
{...TransitionProps} {({ TransitionProps, placement }) => (
style={{ <Grow
transformOrigin: {...TransitionProps}
placement === "bottom" ? "right top" : "right bottom" style={{
}} transformOrigin:
> placement === "bottom" ? "right top" : "right bottom"
<FilterContent
currencySymbol={currencySymbol}
filters={data}
onClear={reset}
onFilterPropertyChange={dispatch}
onSubmit={() => {
onFilterAdd(data);
setFilterMenuOpened(false);
}} }}
/> >
</Grow> <FilterContent
)} currencySymbol={currencySymbol}
</Popper> filters={data}
</div> onClear={reset}
onFilterPropertyChange={dispatch}
onSubmit={() => {
onFilterAdd(data);
setFilterMenuOpened(false);
}}
/>
</Grow>
)}
</Popper>
</div>
</ClickAwayListener>
); );
}; };
Filter.displayName = "Filter"; Filter.displayName = "Filter";