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 819388870b17a1f28543d896b334d50acddee401..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,47 +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',
+        paddingBottom: "5px",
     },
     iconButton: {
         color: theme.palette.text.primary,
@@ -50,18 +36,21 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         padding: 1,
         paddingBottom: 5,
     },
+    disabled: {
+        color: grey[500],
+    },
     optionsContainer: {
-        padding: '1rem 0',
+        padding: "1rem 0",
         flex: 1,
     },
     option: {
-        cursor: 'pointer',
-        display: 'flex',
-        padding: '3px 2rem',
-        fontSize: '0.9rem',
-        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)",
         },
     },
 });
@@ -73,8 +62,9 @@ export type DataTableMultiselectOption = {
 
 export interface DataTableMultiselectProps {
     name: string;
+    disabled: boolean;
     options: DataTableMultiselectOption[];
-    checkedList: Record<string, boolean>;
+    checkedList: TCheckedList;
 }
 
 interface DataTableFMultiselectPopState {
@@ -89,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 Options'>
-                        <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>
@@ -125,7 +131,6 @@ export const DataTableMultiselectPopover = withStyles(styles)(
                             </div>
                         </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,
             }));