//
// 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 { createTree } from 'models/tree';
-import { getNodeDescendants } from 'models/tree';
-import debounce from 'lodash/debounce';
-import { green, 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' | '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,
padding: 1,
paddingBottom: 5,
},
+ disabled: {
+ color: grey[500],
+ },
+ optionsContainer: {
+ padding: "1rem 0",
+ flex: 1,
+ },
option: {
- // border: '1px dashed green',
- cursor: 'pointer',
- display: 'flex',
- padding: '3px 20px',
- fontSize: '0.875rem',
- 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)",
},
},
});
export interface DataTableMultiselectProps {
name: string;
+ disabled: boolean;
options: DataTableMultiselectOption[];
- checkedList: Record<string, boolean>;
+ checkedList: TCheckedList;
}
interface DataTableFMultiselectPopState {
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>
onClose={this.close}
>
<Card>
- <CardContent>
- <Typography variant='caption'>{'Options'}</Typography>
- </CardContent>
- {options.length &&
- options.map((option, i) => (
- <div key={i} className={classes.option} onClick={() => option.fn(checkedList)}>
- {option.name}
- </div>
- ))}
- <CardActions>
- <Button color='primary' variant='outlined' size='small' onClick={this.close}>
- Close
- </Button>
- </CardActions>
+ <div className={classes.optionsContainer}>
+ {options.length &&
+ options.map((option, i) => (
+ <div
+ key={i}
+ className={classes.option}
+ onClick={() => {
+ option.fn(checkedList);
+ this.close();
+ }}
+ >
+ {option.name}
+ </div>
+ ))}
+ </div>
</Card>
</Popover>
- <this.MountHandler />
</>
);
}
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,
}));