projects
/
arvados-workbench2.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
toolbar accurately selects for appropriate buttons Arvados-DCO-1.1-Signed-off-by...
[arvados-workbench2.git]
/
src
/
components
/
dropdown-menu
/
dropdown-menu.tsx
diff --git
a/src/components/dropdown-menu/dropdown-menu.tsx
b/src/components/dropdown-menu/dropdown-menu.tsx
index 4f2b83af6591e6ab9d72d1e0d83914ff55bd4414..bb661bc288b3ec0bb1c30bc02f67f41c255174ea 100644
(file)
--- a/
src/components/dropdown-menu/dropdown-menu.tsx
+++ b/
src/components/dropdown-menu/dropdown-menu.tsx
@@
-2,50
+2,53
@@
//
// SPDX-License-Identifier: AGPL-3.0
//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
-import { Menu, IconButton } from '@material-ui/core';
+import React from 'react';
+import Menu from '@material-ui/core/Menu';
+import IconButton from '@material-ui/core/IconButton';
import { PopoverOrigin } from '@material-ui/core/Popover';
import { PopoverOrigin } from '@material-ui/core/Popover';
-
+import { Tooltip } from '@material-ui/core';
interface DropdownMenuProps {
id: string;
interface DropdownMenuProps {
id: string;
- icon: React.ComponentType;
+ icon: React.ReactElement<any>;
+ title: string;
}
}
-class DropdownMenu extends React.Component<DropdownMenuProps> {
+interface DropdownMenuState {
+ anchorEl: any;
+}
+export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMenuState> {
state = {
anchorEl: undefined
};
transformOrigin: PopoverOrigin = {
state = {
anchorEl: undefined
};
transformOrigin: PopoverOrigin = {
- vertical:
"top"
,
- horizontal:
"center"
+ vertical:
-50
,
+ horizontal:
0
};
render() {
};
render() {
- const { icon
: Icon, id, children
} = this.props;
+ const { icon
, id, children, title
} = this.props;
const { anchorEl } = this.state;
return (
<div>
const { anchorEl } = this.state;
return (
<div>
- <
IconButton
- aria-owns={anchorEl ? id : undefined}
- aria-haspopup="true"
-
color="inherit
"
- onClick={this.handleOpen}
-
- >
- <
Icon /
>
- </
IconButton
>
+ <
Tooltip title={title}>
+ <IconButton
+ aria-owns={anchorEl ? id : undefined}
+
aria-haspopup="true
"
+ color="inherit"
+ onClick={this.handleOpen}>
+ {icon}
+ <
/IconButton
>
+ </
Tooltip
>
<Menu
id={id}
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
onClick={this.handleClose}
<Menu
id={id}
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
onClick={this.handleClose}
- anchorOrigin={this.transformOrigin}
- transformOrigin={this.transformOrigin}
- >
+ transformOrigin={this.transformOrigin}>
{children}
</Menu>
</div>
{children}
</Menu>
</div>
@@
-60,6
+63,3
@@
class DropdownMenu extends React.Component<DropdownMenuProps> {
this.setState({ anchorEl: event.currentTarget });
}
}
this.setState({ anchorEl: event.currentTarget });
}
}
-
-
-export default DropdownMenu;