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