X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/7be9038d988e4dd566536be646769f720b1ae04c..58800bbe6e474679dcfbc03735541a578280dd85:/src/components/data-table-filters/data-table-filters-tree.tsx diff --git a/src/components/data-table-filters/data-table-filters-tree.tsx b/src/components/data-table-filters/data-table-filters-tree.tsx index d964012d..fab9086e 100644 --- a/src/components/data-table-filters/data-table-filters-tree.tsx +++ b/src/components/data-table-filters/data-table-filters-tree.tsx @@ -2,12 +2,12 @@ // // SPDX-License-Identifier: AGPL-3.0 -import * as 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 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'; +import { toggleNodeCollapse } from 'models/tree'; +import { countNodes, countChildren } from 'models/tree'; export interface DataTableFilterItem { name: string; @@ -37,12 +37,14 @@ export class DataTableFiltersTree extends React.Component render={renderItem} showSelection useRadioButtons={this.props.mutuallyExclusive} - toggleItemRadioButton={this.toggleRadioButtonFilter} disableRipple onContextMenu={noop} - toggleItemActive={noop} + toggleItemActive={ + this.props.mutuallyExclusive + ? this.toggleRadioButtonFilter + : this.toggleFilter + } toggleItemOpen={this.toggleOpen} - toggleItemSelection={this.toggleFilter} />; } @@ -50,7 +52,7 @@ export class DataTableFiltersTree extends React.Component * Handler for when a tree item is toggled via a radio button. * Ensures mutual exclusivity among filter tree items. */ - toggleRadioButtonFilter = (item: TreeItem) => { + toggleRadioButtonFilter = (_: any, item: TreeItem) => { const { onChange = noop } = this.props; // If the filter is already selected, do nothing. @@ -74,13 +76,19 @@ export class DataTableFiltersTree extends React.Component } const renderItem = (item: TreeItem) => - {item.data.name}; + + {item.data.name} + {item.initialState !== item.selected ? <> + * + : null} + ; const filterToTreeItem = (filters: DataTableFilters) => (id: string): TreeItem => { 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, @@ -89,6 +97,8 @@ const filterToTreeItem = (filters: DataTableFilters) => items: items.length > 0 ? items : undefined, open: node.expanded, selected: node.selected, + initialState: node.initialState, + indeterminate: isIndeterminate, status: TreeItemStatus.LOADED, }; };