X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/a3620f307448f7854be04a12bce741385cc27ddd..6577969579f623c9788113083342a5268ee7c8c8:/src/components/popover/popover.tsx

diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index b7e082be..9f3cd780 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -6,14 +6,14 @@ import * as React from 'react';
 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;
 }
 
-
-class Popover extends React.Component<PopoverProps> {
-
+export class Popover extends React.Component<PopoverProps> {
     state = {
         anchorEl: undefined
     };
@@ -24,13 +24,15 @@ class Popover extends React.Component<PopoverProps> {
     };
 
     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}
                 >
@@ -44,10 +46,19 @@ class Popover extends React.Component<PopoverProps> {
         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 default Popover;
+export const DefaultTrigger: React.SFC<IconButtonProps> = (props) => (
+    <IconButton {...props}>
+        <i className="fas" />
+    </IconButton>
+);