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' | 'active' | 'checkbox';
  29
  30 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  31     root: {
  32         // border: '1px dashed green',
  33         margin: 0,
  34         borderRadius: '7px',
  35         '&:hover': {
  36             backgroundColor: grey[200],
  37         },
  38         '&:focus': {
  39             color: theme.palette.text.primary,
  40         },
  41     },
  42     active: {
  43         color: theme.palette.text.primary,
  44         '& $iconButton': {
  45             opacity: 1,
  46         },
  47     },
  48     icon: {
  49         // border: '1px solid red',
  50         cursor: 'pointer',
  51         fontSize: 20,
  52         userSelect: 'none',
  53         '&:hover': {
  54             color: theme.palette.text.primary,
  55         },
  56     },
  57     iconButton: {
  58         color: theme.palette.text.primary,
  59         opacity: 0.6,
  60         padding: 1,
  61         paddingBottom: 5,
  62     },
  63     checkbox: {
  64         width: 24,
  65         height: 24,
  66     },
  67 });
  68
  69 enum SelectionMode {
  70     ALL = 'all',
  71     NONE = 'none',
  72 }
  73
  74 export interface DataTableMultiselectProps {
  75     name: string;
  76     options: string[];
  77 }
  78
  79 interface DataTableFMultiselectPopState {
  80     anchorEl?: HTMLElement;
  81 }
  82
  83 export const DataTableMultiselectPopover = withStyles(styles)(
  84     class extends React.Component<DataTableMultiselectProps & WithStyles<CssRules>, DataTableFMultiselectPopState> {
  85         state: DataTableFMultiselectPopState = {
  86             anchorEl: undefined,
  87         };
  88         icon = React.createRef<HTMLElement>();
  89
  90         render() {
  91             const { name, classes, children, options } = this.props;
  92             return (
  93                 <>
  94                     <Tooltip disableFocusListener title='Multiselect Actions'>
  95                         <ButtonBase className={classnames(classes.root)} component='span' onClick={this.open} disableRipple>
  96                             {children}
  97                             <IconButton component='span' classes={{ root: classes.iconButton }} tabIndex={-1}>
  98                                 <i className={classnames(['fas fa-sort-down', classes.icon])} data-fa-transform='shrink-3' ref={this.icon} />
  99                             </IconButton>
 100                         </ButtonBase>
 101                     </Tooltip>
 102                     <Popover
 103                         anchorEl={this.state.anchorEl}
 104                         open={!!this.state.anchorEl}
 105                         anchorOrigin={DefaultTransformOrigin}
 106                         transformOrigin={DefaultTransformOrigin}
 107                         onClose={this.close}
 108                     >
 109                         <Card>
 110                             <CardContent>
 111                                 <Typography variant='caption'>{'OPTIONS'}</Typography>
 112                             </CardContent>
 113                             {options.length && options.map((option, i) => <div key={i}>{option}</div>)}
 114                             <CardActions>
 115                                 <Button color='primary' variant='outlined' size='small' onClick={this.close}>
 116                                     Close
 117                                 </Button>
 118                             </CardActions>
 119                         </Card>
 120                     </Popover>
 121                     <this.MountHandler />
 122                 </>
 123             );
 124         }
 125
 126         open = () => {
 127             this.setState({ anchorEl: this.icon.current || undefined });
 128         };
 129
 130         submit = debounce(() => {
 131             // const { onChange } = this.props;
 132             // if (onChange) {
 133             //     onChange(this.state.filters);
 134             // }
 135         }, 1000);
 136
 137         MountHandler = () => {
 138             useEffect(() => {
 139                 return () => {
 140                     this.submit.cancel();
 141                 };
 142             }, []);
 143             return null;
 144         };
 145
 146         close = () => {
 147             this.setState((prev) => ({
 148                 ...prev,
 149                 anchorEl: undefined,
 150             }));
 151         };
 152     }
 153 );