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, 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             <IconButton
  43                 aria-label='more'
  44                 aria-controls='long-menu'
  45                 aria-haspopup='true'
  46                 onClick={handleClick}
  47                 className={classes.iconButton}
  48             >
  49                 <DoubleRightArrows />
  50             </IconButton>
  51             <Menu
  52                 id='long-menu'
  53                 anchorEl={anchorEl}
  54                 keepMounted
  55                 open={open}
  56                 onClose={handleClose}
  57             >
  58                 {React.Children.map(children, (child: any) => {
  59                     if (!visibilityMap[child.props['data-targetid']]) {
  60                         return (
  61                             <MenuItem
  62                                 key={child}
  63                                 onClick={handleClose}
  64                             >
  65                                 {React.cloneElement(child, {
  66                                     className: classnames(child.className, classes.inOverflowMenu),
  67                                 })}
  68                             </MenuItem>
  69                         );
  70                     }
  71                     return null;
  72                 })}
  73             </Menu>
  74         </div>
  75     );
  76 });