import { Popover as MaterialPopover } from '@material-ui/core';
import { PopoverOrigin } from '@material-ui/core/Popover';
+import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
export interface PopoverProps {
- triggerComponent: React.ComponentType<{ onClick: (event: React.MouseEvent<any>) => void }>;
+ triggerComponent?: React.ComponentType<{ onClick: (event: React.MouseEvent<any>) => void }>;
+ closeOnContentClick?: boolean;
}
};
render() {
+ const Trigger = this.props.triggerComponent || DefaultTrigger;
return (
<>
- <this.props.triggerComponent onClick={this.handleClick} />
+ <Trigger onClick={this.handleTriggerClick} />
<MaterialPopover
anchorEl={this.state.anchorEl}
open={Boolean(this.state.anchorEl)}
onClose={this.handleClose}
+ onClick={this.handleSelfClick}
transformOrigin={this.transformOrigin}
anchorOrigin={this.transformOrigin}
>
this.setState({ anchorEl: undefined });
}
- handleClick = (event: React.MouseEvent<any>) => {
+ handleTriggerClick = (event: React.MouseEvent<any>) => {
this.setState({ anchorEl: event.currentTarget });
}
+ handleSelfClick = () => {
+ if (this.props.closeOnContentClick) {
+ this.handleClose();
+ }
+ }
+
}
+export const DefaultTrigger: React.SFC<IconButtonProps> = (props) => (
+ <IconButton {...props}>
+ <i className="fas" />
+ </IconButton>
+);
+
export default Popover;