src/components/data-table-filters/data-table-filters-popover.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React 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 * as classnames from "classnames";
  22 import { DefaultTransformOrigin } from "~/components/popover/helpers";
  23 import { createTree } from '~/models/tree';
  24 import { DataTableFilters, DataTableFiltersTree } from "./data-table-filters-tree";
  25 import { getNodeDescendants } from '~/models/tree';
  26
  27 export type CssRules = "root" | "icon" | "iconButton" | "active" | "checkbox";
  28
  29 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  30     root: {
  31         cursor: "pointer",
  32         display: "inline-flex",
  33         justifyContent: "flex-start",
  34         flexDirection: "inherit",
  35         alignItems: "center",
  36         "&:hover": {
  37             color: theme.palette.text.primary,
  38         },
  39         "&:focus": {
  40             color: theme.palette.text.primary,
  41         },
  42     },
  43     active: {
  44         color: theme.palette.text.primary,
  45         '& $iconButton': {
  46             opacity: 1,
  47         },
  48     },
  49     icon: {
  50         fontSize: 12,
  51         userSelect: 'none',
  52         width: 16,
  53         height: 15,
  54         marginTop: 1
  55     },
  56     iconButton: {
  57         color: theme.palette.text.primary,
  58         opacity: 0.7,
  59     },
  60     checkbox: {
  61         width: 24,
  62         height: 24
  63     }
  64 });
  65
  66 enum SelectionMode {
  67     ALL = 'all',
  68     NONE = 'none'
  69 }
  70
  71 export interface DataTableFilterProps {
  72     name: string;
  73     filters: DataTableFilters;
  74     onChange?: (filters: DataTableFilters) => void;
  75
  76     /**
  77      * By default `all` filters selection means that label should be grayed out.
  78      * Use `none` when label is supposed to be grayed out when no filter is selected.
  79      */
  80     defaultSelection?: SelectionMode;
  81 }
  82
  83 interface DataTableFilterState {
  84     anchorEl?: HTMLElement;
  85     filters: DataTableFilters;
  86     prevFilters: DataTableFilters;
  87 }
  88
  89 export const DataTableFiltersPopover = withStyles(styles)(
  90     class extends React.Component<DataTableFilterProps & WithStyles<CssRules>, DataTableFilterState> {
  91         state: DataTableFilterState = {
  92             anchorEl: undefined,
  93             filters: createTree(),
  94             prevFilters: createTree(),
  95         };
  96         icon = React.createRef<HTMLElement>();
  97
  98         render() {
  99             const { name, classes, defaultSelection = SelectionMode.ALL, children } = this.props;
 100             const isActive = getNodeDescendants('')(this.state.filters)
 101                 .some(f => defaultSelection === SelectionMode.ALL
 102                     ? !f.selected
 103                     : f.selected
 104                 );
 105             return <>
 106                 <Tooltip title='Filters'>
 107                     <ButtonBase
 108                         className={classnames([classes.root, { [classes.active]: isActive }])}
 109                         component="span"
 110                         onClick={this.open}
 111                         disableRipple>
 112                         {children}
 113                         <IconButton component='span' classes={{root: classes.iconButton}} tabIndex={-1}>
 114                             <i className={classnames(["fas fa-filter", classes.icon])}
 115                                 data-fa-transform="shrink-3"
 116                                 ref={this.icon} />
 117                         </IconButton>
 118                     </ButtonBase>
 119                 </Tooltip>
 120                 <Popover
 121                     anchorEl={this.state.anchorEl}
 122                     open={!!this.state.anchorEl}
 123                     anchorOrigin={DefaultTransformOrigin}
 124                     transformOrigin={DefaultTransformOrigin}
 125                     onClose={this.cancel}>
 126                     <Card>
 127                         <CardContent>
 128                             <Typography variant="caption">
 129                                 {name}
 130                             </Typography>
 131                         </CardContent>
 132                         <DataTableFiltersTree
 133                             filters={this.state.filters}
 134                             onChange={filters => this.setState({ filters })} />
 135                         <CardActions>
 136                             <Button
 137                                 color="primary"
 138                                 variant='contained'
 139                                 size="small"
 140                                 onClick={this.submit}>
 141                                 Ok
 142                             </Button>
 143                             <Button
 144                                 color="primary"
 145                                 variant="outlined"
 146                                 size="small"
 147                                 onClick={this.cancel}>
 148                                 Cancel
 149                             </Button>
 150                         </CardActions >
 151                     </Card>
 152                 </Popover>
 153             </>;
 154         }
 155
 156         static getDerivedStateFromProps(props: DataTableFilterProps, state: DataTableFilterState): DataTableFilterState {
 157             return props.filters !== state.prevFilters
 158                 ? { ...state, filters: props.filters, prevFilters: props.filters }
 159                 : state;
 160         }
 161
 162         open = () => {
 163             this.setState({ anchorEl: this.icon.current || undefined });
 164         }
 165
 166         submit = () => {
 167             const { onChange } = this.props;
 168             if (onChange) {
 169                 onChange(this.state.filters);
 170             }
 171             this.setState({ anchorEl: undefined });
 172         }
 173
 174         cancel = () => {
 175             this.setState(prev => ({
 176                 ...prev,
 177                 filters: prev.prevFilters,
 178                 anchorEl: undefined
 179             }));
 180         }
 181
 182         setFilters = (filters: DataTableFilters) => {
 183             this.setState({ filters });
 184         }
 185
 186     }
 187 );