1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React, { useState, useMemo, ReactElement, JSXElementConstructor } from 'react';
6 import { DoubleRightArrows } from 'components/icon/icon';
7 import classnames from 'classnames';
8 import { IconButton, Menu, MenuItem, StyleRulesCallback, Tooltip, WithStyles, withStyles } from '@material-ui/core';
9 import { ArvadosTheme } from 'common/custom-theme';
11 type CssRules = 'inOverflowMenu' | 'openMenuButton' | 'menu' | 'menuItem' | 'menuElement';
13 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
16 backgroundColor: 'transparent',
27 backgroundColor: 'white',
39 export type OverflowChild = ReactElement<{ className: string; }, string | JSXElementConstructor<any>>
41 type OverflowMenuProps = {
42 children: OverflowChild[]
47 export const OverflowMenu = withStyles(styles)((props: OverflowMenuProps & WithStyles<CssRules>) => {
48 const { children, className, visibilityMap, classes } = props;
49 const [anchorEl, setAnchorEl] = useState(null);
50 const open = Boolean(anchorEl);
51 const handleClick = (event) => {
52 setAnchorEl(event.currentTarget);
55 const handleClose = () => {
59 const shouldShowMenu = useMemo(() => Object.values(visibilityMap).some((v) => v === false), [visibilityMap]);
60 if (!shouldShowMenu) {
64 <div className={className}>
65 <Tooltip title="More options" disableFocusListener>
68 aria-controls='long-menu'
71 className={classes.openMenuButton}
72 data-cy='overflow-menu-button'
84 className={classes.menu}
85 data-cy='overflow-menu'
87 {React.Children.map(children, (child: any) => {
88 if (!visibilityMap[child.props['data-targetid']]) {
92 className={classes.menuItem}
94 {React.cloneElement(child, {
95 className: classnames(classes.menuElement),