projects
/
arvados-workbench2.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
19783: Add flexbox wrappers to allow dialog content to shrink on small window height
[arvados-workbench2.git]
/
src
/
components
/
popover
/
popover.tsx
diff --git
a/src/components/popover/popover.tsx
b/src/components/popover/popover.tsx
index b7e082be4cc9916914ae1599a64cae6a34283387..ce9f8ce25c82f7b2795f1b4266f5fb375e35d8a8 100644
(file)
--- a/
src/components/popover/popover.tsx
+++ b/
src/components/popover/popover.tsx
@@
-2,18
+2,18
@@
//
// SPDX-License-Identifier: AGPL-3.0
//
// SPDX-License-Identifier: AGPL-3.0
-import
* as
React from 'react';
+import React from 'react';
import { Popover as MaterialPopover } from '@material-ui/core';
import { PopoverOrigin } from '@material-ui/core/Popover';
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 {
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
};
state = {
anchorEl: undefined
};
@@
-24,13
+24,15
@@
class Popover extends React.Component<PopoverProps> {
};
render() {
};
render() {
+ const Trigger = this.props.triggerComponent || DefaultTrigger;
return (
<>
return (
<>
- <
this.props.triggerComponent onClick={this.handle
Click} />
+ <
Trigger onClick={this.handleTrigger
Click} />
<MaterialPopover
anchorEl={this.state.anchorEl}
open={Boolean(this.state.anchorEl)}
onClose={this.handleClose}
<MaterialPopover
anchorEl={this.state.anchorEl}
open={Boolean(this.state.anchorEl)}
onClose={this.handleClose}
+ onClick={this.handleSelfClick}
transformOrigin={this.transformOrigin}
anchorOrigin={this.transformOrigin}
>
transformOrigin={this.transformOrigin}
anchorOrigin={this.transformOrigin}
>
@@
-44,10
+46,19
@@
class Popover extends React.Component<PopoverProps> {
this.setState({ anchorEl: undefined });
}
this.setState({ anchorEl: undefined });
}
- handleClick = (event: React.MouseEvent<any>) => {
+ handle
Trigger
Click = (event: React.MouseEvent<any>) => {
this.setState({ anchorEl: event.currentTarget });
}
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>
+);