// 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 { WithStyles, withStyles, ButtonBase, StyleRulesCallback, Theme, Popover, Button, Card, CardActions, Tooltip, IconButton } from '@material-ui/core';
import classnames from 'classnames';
import { DefaultTransformOrigin } from 'components/popover/helpers';
-import { createTree } from 'models/tree';
-import { DataTableFilters, DataTableFiltersTree } from './data-table-multiselect-tree';
-import { getNodeDescendants } from 'models/tree';
import debounce from 'lodash/debounce';
-import { green, grey } from '@material-ui/core/colors';
+import { grey } from '@material-ui/core/colors';
-export type CssRules = 'root' | 'icon' | 'iconButton' | 'active' | 'checkbox';
+export type CssRules = 'root' | 'icon' | 'iconButton' | 'optionsContainer' | 'option';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
- // border: '1px dashed green',
- margin: 0,
borderRadius: '7px',
'&:hover': {
backgroundColor: grey[200],
color: theme.palette.text.primary,
},
},
- active: {
- color: theme.palette.text.primary,
- '& $iconButton': {
- opacity: 1,
- },
- },
icon: {
- // border: '1px solid red',
cursor: 'pointer',
fontSize: 20,
userSelect: 'none',
'&:hover': {
color: theme.palette.text.primary,
},
+ paddingBottom: '5px',
},
iconButton: {
color: theme.palette.text.primary,
padding: 1,
paddingBottom: 5,
},
- checkbox: {
- width: 24,
- height: 24,
+ optionsContainer: {
+ paddingTop: '1rem',
+ flex: 1,
+ },
+ option: {
+ cursor: 'pointer',
+ display: 'flex',
+ padding: '3px 2rem',
+ fontSize: '0.9rem',
+ alignItems: 'center',
+ '&:hover': {
+ backgroundColor: 'rgba(0, 0, 0, 0.08)',
+ },
},
});
-enum SelectionMode {
- ALL = 'all',
- NONE = 'none',
-}
-
-export interface DataTableFilterProps {
+export type DataTableMultiselectOption = {
name: string;
- filters: DataTableFilters;
- onChange?: (filters: DataTableFilters) => void;
-
- /**
- * When set to true, only one filter can be selected at a time.
- */
- mutuallyExclusive?: boolean;
+ fn: (checkedList) => void;
+};
- /**
- * By default `all` filters selection means that label should be grayed out.
- * Use `none` when label is supposed to be grayed out when no filter is selected.
- */
- defaultSelection?: SelectionMode;
+export interface DataTableMultiselectProps {
+ name: string;
+ options: DataTableMultiselectOption[];
+ checkedList: Record<string, boolean>;
}
-interface DataTableFilterState {
+interface DataTableFMultiselectPopState {
anchorEl?: HTMLElement;
- filters: DataTableFilters;
- prevFilters: DataTableFilters;
}
export const DataTableMultiselectPopover = withStyles(styles)(
- class extends React.Component<DataTableFilterProps & WithStyles<CssRules>, DataTableFilterState> {
- state: DataTableFilterState = {
+ class extends React.Component<DataTableMultiselectProps & WithStyles<CssRules>, DataTableFMultiselectPopState> {
+ state: DataTableFMultiselectPopState = {
anchorEl: undefined,
- filters: createTree(),
- prevFilters: createTree(),
};
icon = React.createRef<HTMLElement>();
render() {
- const { name, classes, defaultSelection = SelectionMode.ALL, children } = this.props;
- const isActive = getNodeDescendants('')(this.state.filters).some((f) => (defaultSelection === SelectionMode.ALL ? !f.selected : f.selected));
+ const { classes, children, options, checkedList } = this.props;
return (
<>
- <Tooltip disableFocusListener title='Multiselect Actions'>
- <ButtonBase className={classnames([classes.root, { [classes.active]: isActive }])} component='span' onClick={this.open} disableRipple>
+ <Tooltip disableFocusListener title='Select Options'>
+ <ButtonBase className={classnames(classes.root)} component='span' onClick={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} />
onClose={this.close}
>
<Card>
- <CardContent>
- <Typography variant='caption'>{'foo'}</Typography>
- </CardContent>
- <DataTableFiltersTree filters={this.state.filters} mutuallyExclusive={this.props.mutuallyExclusive} onChange={this.onChange} />
- {this.props.mutuallyExclusive || (
- <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>
+ <CardActions>
+ <Button color='primary' variant='outlined' size='small' onClick={this.close}>
+ Close
+ </Button>
+ </CardActions>
</Card>
</Popover>
<this.MountHandler />
);
}
- static getDerivedStateFromProps(props: DataTableFilterProps, state: DataTableFilterState): DataTableFilterState {
- return props.filters !== state.prevFilters ? { ...state, filters: props.filters, prevFilters: props.filters } : state;
- }
-
open = () => {
this.setState({ anchorEl: this.icon.current || undefined });
};
- onChange = (filters) => {
- this.setState({ filters });
- if (this.props.mutuallyExclusive) {
- // Mutually exclusive filters apply immediately
- const { onChange } = this.props;
- if (onChange) {
- onChange(filters);
- }
- this.close();
- } else {
- // Non-mutually exclusive filters are debounced
- this.submit();
- }
- };
-
submit = debounce(() => {
- const { onChange } = this.props;
- if (onChange) {
- onChange(this.state.filters);
- }
+ // const { onChange } = this.props;
+ // if (onChange) {
+ // onChange(this.state.filters);
+ // }
}, 1000);
MountHandler = () => {
projects / arvados-workbench2.git / blobdiff