Merge branch 'main' into 19302-left-side-panel-changes

[arvados-workbench2.git] / src / components / data-table-multiselect-popover / data-table-multiselect-popover.tsx

diff --git a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
index 97b50a58faa337b44aeb9533fdd52e154ce18f47..0248c8267d9201455d7c558d3815ac5a4b2eaf81 100644 (file)
--- a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
+++ b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
@@ -2,46 +2,33 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React, { useEffect } from 'react';
-import {
-    WithStyles,
-    withStyles,
-    ButtonBase,
-    StyleRulesCallback,
-    Theme,
-    Popover,
-    Button,
-    Card,
-    CardActions,
-    Typography,
-    CardContent,
-    Tooltip,
-    IconButton,
-} from '@material-ui/core';
-import classnames from 'classnames';
-import { DefaultTransformOrigin } from 'components/popover/helpers';
-import debounce from 'lodash/debounce';
-import { grey } from '@material-ui/core/colors';
+import React from "react";
+import { WithStyles, withStyles, ButtonBase, StyleRulesCallback, Theme, Popover, Card, Tooltip, IconButton } from "@material-ui/core";
+import classnames from "classnames";
+import { DefaultTransformOrigin } from "components/popover/helpers";
+import { grey } from "@material-ui/core/colors";
+import { TCheckedList } from "components/data-table/data-table";
 
-export type CssRules = 'root' | 'icon' | 'iconButton' | 'optionsContainer' | 'option';
+export type CssRules = "root" | "icon" | "iconButton" | "disabled" | "optionsContainer" | "option";
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
-        borderRadius: '7px',
-        '&:hover': {
+        borderRadius: "7px",
+        "&:hover": {
             backgroundColor: grey[200],
         },
-        '&:focus': {
+        "&:focus": {
             color: theme.palette.text.primary,
         },
     },
     icon: {
-        cursor: 'pointer',
+        cursor: "pointer",
         fontSize: 20,
-        userSelect: 'none',
-        '&:hover': {
+        userSelect: "none",
+        "&:hover": {
             color: theme.palette.text.primary,
         },
+        paddingBottom: "5px",
     },
     iconButton: {
         color: theme.palette.text.primary,
@@ -49,18 +36,21 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         padding: 1,
         paddingBottom: 5,
     },
+    disabled: {
+        color: grey[500],
+    },
     optionsContainer: {
-        padding: '3px 15px',
+        padding: "1rem 0",
         flex: 1,
     },
     option: {
-        cursor: 'pointer',
-        display: 'flex',
-        padding: '3px',
-        fontSize: '1rem',
-        alignItems: 'center',
-        '&:hover': {
-            backgroundColor: 'rgba(0, 0, 0, 0.08)',
+        cursor: "pointer",
+        display: "flex",
+        padding: "3px 2rem",
+        fontSize: "0.9rem",
+        alignItems: "center",
+        "&:hover": {
+            backgroundColor: "rgba(0, 0, 0, 0.08)",
         },
     },
 });
@@ -72,8 +62,9 @@ export type DataTableMultiselectOption = {
 
 export interface DataTableMultiselectProps {
     name: string;
+    disabled: boolean;
     options: DataTableMultiselectOption[];
-    checkedList: Record<string, boolean>;
+    checkedList: TCheckedList;
 }
 
 interface DataTableFMultiselectPopState {
@@ -88,14 +79,30 @@ export const DataTableMultiselectPopover = withStyles(styles)(
         icon = React.createRef<HTMLElement>();
 
         render() {
-            const { name, classes, children, options, checkedList } = this.props;
+            const { classes, children, options, checkedList, disabled } = this.props;
             return (
                 <>
-                    <Tooltip disableFocusListener title='Multiselect Actions'>
-                        <ButtonBase className={classnames(classes.root)} component='span' onClick={this.open} disableRipple>
+                    <Tooltip
+                        disableFocusListener
+                        title="Select Options"
+                    >
+                        <ButtonBase
+                            className={classnames(classes.root)}
+                            component="span"
+                            onClick={disabled ? () => {} : this.open}
+                            disableRipple
+                        >
                             {children}
-                            <IconButton component='span' classes={{ root: classes.iconButton }} tabIndex={-1}>
-                                <i className={classnames(['fas fa-sort-down', classes.icon])} data-fa-transform='shrink-3' ref={this.icon} />
+                            <IconButton
+                                component="span"
+                                classes={{ root: classes.iconButton }}
+                                tabIndex={-1}
+                            >
+                                <i
+                                    className={`${classnames(["fas fa-sort-down", classes.icon])}${disabled ? ` ${classes.disabled}` : ""}`}
+                                    data-fa-transform="shrink-3"
+                                    ref={this.icon}
+                                />
                             </IconButton>
                         </ButtonBase>
                     </Tooltip>
@@ -107,25 +114,23 @@ export const DataTableMultiselectPopover = withStyles(styles)(
                         onClose={this.close}
                     >
                         <Card>
-                            <CardContent>
-                                <Typography variant='caption'>{name}</Typography>
-                            </CardContent>
                             <div className={classes.optionsContainer}>
                                 {options.length &&
                                     options.map((option, i) => (
-                                        <div key={i} className={classes.option} onClick={() => option.fn(checkedList)}>
+                                        <div
+                                            key={i}
+                                            className={classes.option}
+                                            onClick={() => {
+                                                option.fn(checkedList);
+                                                this.close();
+                                            }}
+                                        >
                                             {option.name}
                                         </div>
                                     ))}
                             </div>
-                            <CardActions>
-                                <Button color='primary' variant='outlined' size='small' onClick={this.close}>
-                                    Close
-                                </Button>
-                            </CardActions>
                         </Card>
                     </Popover>
-                    <this.MountHandler />
                 </>
             );
         }
@@ -134,24 +139,8 @@ export const DataTableMultiselectPopover = withStyles(styles)(
             this.setState({ anchorEl: this.icon.current || undefined });
         };
 
-        submit = debounce(() => {
-            // const { onChange } = this.props;
-            // if (onChange) {
-            //     onChange(this.state.filters);
-            // }
-        }, 1000);
-
-        MountHandler = () => {
-            useEffect(() => {
-                return () => {
-                    this.submit.cancel();
-                };
-            }, []);
-            return null;
-        };
-
         close = () => {
-            this.setState((prev) => ({
+            this.setState(prev => ({
                 ...prev,
                 anchorEl: undefined,
             }));