Merge branch 'master'

[arvados-workbench2.git] / src / components / popover / popover.tsx

diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index b7e082be4cc9916914ae1599a64cae6a34283387..c8d40338cf8e1e782d40bfb54eb044432600efe5 100644 (file)
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -6,9 +6,11 @@ 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;
 }
 
 
@@ -24,13 +26,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 +48,22 @@ 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 const DefaultTrigger: React.SFC<IconButtonProps> = (props) => (
+    <IconButton {...props}>
+        <i className="fas" />
+    </IconButton>
+);
+
 export default Popover;