src/components/popover/popover.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Popover as MaterialPopover } from '@material-ui/core';
   7
   8 import { PopoverOrigin } from '@material-ui/core/Popover';
   9
  10 export interface PopoverProps {
  11     triggerComponent: React.ComponentType<{ onClick: (event: React.MouseEvent<any>) => void }>;
  12 }
  13
  14
  15 class Popover extends React.Component<PopoverProps> {
  16
  17     state = {
  18         anchorEl: undefined
  19     };
  20
  21     transformOrigin: PopoverOrigin = {
  22         vertical: "top",
  23         horizontal: "right",
  24     };
  25
  26     render() {
  27         return (
  28             <>
  29                 <this.props.triggerComponent onClick={this.handleClick} />
  30                 <MaterialPopover
  31                     anchorEl={this.state.anchorEl}
  32                     open={Boolean(this.state.anchorEl)}
  33                     onClose={this.handleClose}
  34                     transformOrigin={this.transformOrigin}
  35                     anchorOrigin={this.transformOrigin}
  36                 >
  37                     {this.props.children}
  38                 </MaterialPopover>
  39             </>
  40         );
  41     }
  42
  43     handleClose = () => {
  44         this.setState({ anchorEl: undefined });
  45     }
  46
  47     handleClick = (event: React.MouseEvent<any>) => {
  48         this.setState({ anchorEl: event.currentTarget });
  49     }
  50
  51 }
  52
  53 export default Popover;