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