services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, { useState, useMemo } 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';
  10
  11 type CssRules = 'inOverflowMenu' | 'iconButton';
  12
  13 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  14     inOverflowMenu: {
  15         '&:hover': {
  16             backgroundColor: 'transparent',
  17         },
  18     },
  19     iconButton: {
  20         right: '10px',
  21     },
  22 });
  23
  24 export const OverflowMenu = withStyles(styles)((props: any & WithStyles<CssRules>) => {
  25     const { children, className, visibilityMap, classes } = props;
  26     const [anchorEl, setAnchorEl] = useState(null);
  27     const open = Boolean(anchorEl);
  28     const handleClick = (event) => {
  29         setAnchorEl(event.currentTarget);
  30     };
  31
  32     const handleClose = () => {
  33         setAnchorEl(null);
  34     };
  35
  36     const shouldShowMenu = useMemo(() => Object.values(visibilityMap).some((v) => v === false), [visibilityMap]);
  37     if (!shouldShowMenu) {
  38         return null;
  39     }
  40     return (
  41         <div className={className}>
  42             <Tooltip title="More Options" disableFocusListener>
  43                 <IconButton
  44                     aria-label='more'
  45                     aria-controls='long-menu'
  46                     aria-haspopup='true'
  47                     onClick={handleClick}
  48                     className={classes.iconButton}
  49                 >
  50                         <DoubleRightArrows />
  51                 </IconButton>
  52             </Tooltip>
  53             <Menu
  54                 id='long-menu'
  55                 anchorEl={anchorEl}
  56                 keepMounted
  57                 open={open}
  58                 onClose={handleClose}
  59             >
  60                 {React.Children.map(children, (child: any) => {
  61                     if (!visibilityMap[child.props['data-targetid']]) {
  62                         return (
  63                             <MenuItem
  64                                 key={child}
  65                                 onClick={handleClose}
  66                             >
  67                                 {React.cloneElement(child, {
  68                                     className: classnames(child.className, classes.inOverflowMenu),
  69                                 })}
  70                             </MenuItem>
  71                         );
  72                     }
  73                     return null;
  74                 })}
  75             </Menu>
  76         </div>
  77     );
  78 });