services/workbench2/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { WithStyles, withStyles, ButtonBase, StyleRulesCallback, Theme, Popover, Card, Tooltip, IconButton } from "@material-ui/core";
   7 import classnames from "classnames";
   8 import { DefaultTransformOrigin } from "components/popover/helpers";
   9 import { grey } from "@material-ui/core/colors";
  10 import { TCheckedList } from "components/data-table/data-table";
  11
  12 export type CssRules = "root" | "icon" | "iconButton" | "disabled" | "optionsContainer" | "option";
  13
  14 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  15     root: {
  16         borderRadius: "7px",
  17         "&:hover": {
  18             backgroundColor: grey[200],
  19         },
  20         "&:focus": {
  21             color: theme.palette.text.primary,
  22         },
  23     },
  24     icon: {
  25         cursor: "pointer",
  26         fontSize: 20,
  27         userSelect: "none",
  28         "&:hover": {
  29             color: theme.palette.text.primary,
  30         },
  31         paddingBottom: "5px",
  32     },
  33     iconButton: {
  34         color: theme.palette.text.primary,
  35         opacity: 0.6,
  36         padding: 1,
  37         paddingBottom: 5,
  38     },
  39     disabled: {
  40         color: grey[500],
  41     },
  42     optionsContainer: {
  43         padding: "1rem 0",
  44         flex: 1,
  45     },
  46     option: {
  47         cursor: "pointer",
  48         display: "flex",
  49         padding: "3px 2rem",
  50         fontSize: "0.9rem",
  51         alignItems: "center",
  52         "&:hover": {
  53             backgroundColor: "rgba(0, 0, 0, 0.08)",
  54         },
  55     },
  56 });
  57
  58 export type DataTableMultiselectOption = {
  59     name: string;
  60     fn: (checkedList) => void;
  61 };
  62
  63 export interface DataTableMultiselectProps {
  64     name: string;
  65     disabled: boolean;
  66     options: DataTableMultiselectOption[];
  67     checkedList: TCheckedList;
  68 }
  69
  70 interface DataTableFMultiselectPopState {
  71     anchorEl?: HTMLElement;
  72 }
  73
  74 export const DataTableMultiselectPopover = withStyles(styles)(
  75     class extends React.Component<DataTableMultiselectProps & WithStyles<CssRules>, DataTableFMultiselectPopState> {
  76         state: DataTableFMultiselectPopState = {
  77             anchorEl: undefined,
  78         };
  79         icon = React.createRef<HTMLElement>();
  80
  81         render() {
  82             const { classes, children, options, checkedList, disabled } = this.props;
  83             return (
  84                 <>
  85                     <Tooltip
  86                         disableFocusListener
  87                         title="Select options"
  88                         data-cy="data-table-multiselect-popover"
  89                     >
  90                         <ButtonBase
  91                             className={classnames(classes.root)}
  92                             component="span"
  93                             onClick={disabled ? () => {} : this.open}
  94                             disableRipple
  95                         >
  96                             {children}
  97                             <IconButton
  98                                 component="span"
  99                                 classes={{ root: classes.iconButton }}
 100                                 tabIndex={-1}
 101                             >
 102                                 <i
 103                                     className={`${classnames(["fas fa-sort-down", classes.icon])}${disabled ? ` ${classes.disabled}` : ""}`}
 104                                     data-fa-transform="shrink-3"
 105                                     ref={this.icon}
 106                                 />
 107                             </IconButton>
 108                         </ButtonBase>
 109                     </Tooltip>
 110                     <Popover
 111                         anchorEl={this.state.anchorEl}
 112                         open={!!this.state.anchorEl}
 113                         anchorOrigin={DefaultTransformOrigin}
 114                         transformOrigin={DefaultTransformOrigin}
 115                         onClose={this.close}
 116                     >
 117                         <Card>
 118                             <div className={classes.optionsContainer}>
 119                                 {options.length &&
 120                                     options.map((option, i) => (
 121                                         <div
 122                                             data-cy={`multiselect-popover-${option.name}`}
 123                                             key={i}
 124                                             className={classes.option}
 125                                             onClick={() => {
 126                                                 option.fn(checkedList);
 127                                                 this.close();
 128                                             }}
 129                                         >
 130                                             {option.name}
 131                                         </div>
 132                                     ))}
 133                             </div>
 134                         </Card>
 135                     </Popover>
 136                 </>
 137             );
 138         }
 139
 140         open = () => {
 141             this.setState({ anchorEl: this.icon.current || undefined });
 142         };
 143
 144         close = () => {
 145             this.setState(prev => ({
 146                 ...prev,
 147                 anchorEl: undefined,
 148             }));
 149         };
 150     }
 151 );