[arvados-workbench2] updated: 2.6.0-13-gee0307d0
git repository hosting
git at public.arvados.org
Tue May 2 15:05:17 UTC 2023
Summary of changes:
.../data-table-multiselect-popover.tsx | 75 ++++-----------
.../data-table-multiselect-tree.tsx | 106 ---------------------
src/components/data-table/data-table.tsx | 6 +-
3 files changed, 20 insertions(+), 167 deletions(-)
delete mode 100644 src/components/data-table-multiselect-popover/data-table-multiselect-tree.tsx
via ee0307d05caf3eeed3d1acb8398937fadd2c7c25 (commit)
from 750b2c391b5418bfd3db88e59429abad9fde6c1e (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit ee0307d05caf3eeed3d1acb8398937fadd2c7c25
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Tue May 2 11:05:11 2023 -0400
15768: cleanup Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
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 74b083a9..6f41b6da 100644
--- a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
+++ b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
@@ -21,7 +21,6 @@ import {
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';
@@ -72,45 +71,28 @@ enum SelectionMode {
NONE = 'none',
}
-export interface DataTableFilterProps {
+export interface DataTableMultiselectProps {
name: string;
- filters: DataTableFilters;
- onChange?: (filters: DataTableFilters) => void;
-
- /**
- * When set to true, only one filter can be selected at a time.
- */
- mutuallyExclusive?: boolean;
-
- /**
- * 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;
+ options: string[];
}
-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 { name, classes, children, options } = this.props;
return (
<>
<Tooltip disableFocusListener title='Multiselect Actions'>
- <ButtonBase className={classnames([classes.root, { [classes.active]: isActive }])} component='span' onClick={this.open} disableRipple>
+ <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} />
@@ -126,16 +108,14 @@ export const DataTableMultiselectPopover = withStyles(styles)(
>
<Card>
<CardContent>
- <Typography variant='caption'>{'foo'}</Typography>
+ <Typography variant='caption'>{'OPTIONS'}</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>
- )}
+ {options.length && options.map((option, i) => <div key={i}>{option}</div>)}
+ <CardActions>
+ <Button color='primary' variant='outlined' size='small' onClick={this.close}>
+ Close
+ </Button>
+ </CardActions>
</Card>
</Popover>
<this.MountHandler />
@@ -143,34 +123,15 @@ export const DataTableMultiselectPopover = withStyles(styles)(
);
}
- 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 = () => {
diff --git a/src/components/data-table-multiselect-popover/data-table-multiselect-tree.tsx b/src/components/data-table-multiselect-popover/data-table-multiselect-tree.tsx
deleted file mode 100644
index 326d0399..00000000
--- a/src/components/data-table-multiselect-popover/data-table-multiselect-tree.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import React from 'react';
-import { Tree, toggleNodeSelection, getNode, initTreeNode, getNodeChildrenIds, selectNode, deselectNodes } from 'models/tree';
-import { Tree as TreeComponent, TreeItem, TreeItemStatus } from 'components/tree/tree';
-import { noop, map } from 'lodash/fp';
-import { toggleNodeCollapse } from 'models/tree';
-import { countNodes, countChildren } from 'models/tree';
-
-export interface DataTableFilterItem {
- name: string;
-}
-
-export type DataTableFilters = Tree<DataTableFilterItem>;
-
-export interface DataTableFilterProps {
- filters: DataTableFilters;
- onChange?: (filters: DataTableFilters) => void;
-
- /**
- * When set to true, only one filter can be selected at a time.
- */
- mutuallyExclusive?: boolean;
-}
-
-export class DataTableFiltersTree extends React.Component<DataTableFilterProps> {
- render() {
- const { filters } = this.props;
- const hasSubfilters = countNodes(filters) !== countChildren('')(filters);
- return (
- <TreeComponent
- levelIndentation={hasSubfilters ? 20 : 0}
- itemRightPadding={20}
- items={filtersToTree(filters)}
- render={this.props.mutuallyExclusive ? renderRadioItem : renderItem}
- showSelection
- useRadioButtons={this.props.mutuallyExclusive}
- disableRipple
- onContextMenu={noop}
- toggleItemActive={this.props.mutuallyExclusive ? this.toggleRadioButtonFilter : this.toggleFilter}
- toggleItemOpen={this.toggleOpen}
- />
- );
- }
-
- /**
- * Handler for when a tree item is toggled via a radio button.
- * Ensures mutual exclusivity among filter tree items.
- */
- toggleRadioButtonFilter = (_: any, item: TreeItem<DataTableFilterItem>) => {
- const { onChange = noop } = this.props;
-
- // If the filter is already selected, do nothing.
- if (item.selected) {
- return;
- }
-
- // Otherwise select this node and deselect the others
- const filters = selectNode(item.id)(this.props.filters);
- const toDeselect = Object.keys(this.props.filters).filter((id) => id !== item.id);
- onChange(deselectNodes(toDeselect)(filters));
- };
-
- toggleFilter = (_: React.MouseEvent, item: TreeItem<DataTableFilterItem>) => {
- const { onChange = noop } = this.props;
- onChange(toggleNodeSelection(item.id)(this.props.filters));
- };
-
- toggleOpen = (_: React.MouseEvent, item: TreeItem<DataTableFilterItem>) => {
- const { onChange = noop } = this.props;
- onChange(toggleNodeCollapse(item.id)(this.props.filters));
- };
-}
-
-const renderItem = (item: TreeItem<DataTableFilterItem>) => (
- <span>
- {item.data.name}
- {item.initialState !== item.selected ? <>*</> : null}
- </span>
-);
-
-const renderRadioItem = (item: TreeItem<DataTableFilterItem>) => <span>{item.data.name}</span>;
-
-const filterToTreeItem =
- (filters: DataTableFilters) =>
- (id: string): TreeItem<any> => {
- const node = getNode(id)(filters) || initTreeNode({ id: '', value: 'InvalidNode' });
- const items = getNodeChildrenIds(node.id)(filters).map(filterToTreeItem(filters));
- const isIndeterminate = !node.selected && items.some((i) => i.selected || i.indeterminate);
-
- return {
- active: node.active,
- data: node.value,
- id: node.id,
- items: items.length > 0 ? items : undefined,
- open: node.expanded,
- selected: node.selected,
- initialState: node.initialState,
- indeterminate: isIndeterminate,
- status: TreeItemStatus.LOADED,
- };
- };
-
-const filtersToTree = (filters: DataTableFilters): TreeItem<DataTableFilterItem>[] => map(filterToTreeItem(filters), getNodeChildrenIds('')(filters));
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 9627681f..4be9d547 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -141,7 +141,6 @@ export const DataTable = withStyles(styles)(
}
componentDidUpdate(prevProps: Readonly<DataTableProps<T>>) {
- // console.log(this.state.checkedList);
if (!arraysAreCongruent(prevProps.items, this.props.items)) {
this.initializeCheckedList(this.props.items);
}
@@ -240,9 +239,8 @@ export const DataTable = withStyles(styles)(
</Tooltip>
<DataTableMultiselectPopover
name={`${name} filters`}
- mutuallyExclusive={column.mutuallyExclusiveFilters}
- onChange={(filters) => onFiltersChange && onFiltersChange(filters, column)}
- filters={filters}
+ // mutuallyExclusive={column.mutuallyExclusiveFilters}
+ options={['one', 'two', 'three']}
></DataTableMultiselectPopover>
</div>
</TableCell>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list