1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import { connect } from "react-redux";
6 import { Tree, TreeProps, TreeItem, TreeItemStatus } from "components/tree/tree";
7 import { RootState } from "store/store";
8 import { getNodeChildrenIds, Tree as Ttree, createTree, getNode, TreeNodeStatus } from 'models/tree';
9 import { Dispatch } from "redux";
10 import { initTreeNode } from '../../models/tree';
11 import { ResourcesState } from "store/resources/resources";
13 type Callback<T> = (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>, pickerId: string) => void;
14 export interface TreePickerProps<T> {
16 onContextMenu: Callback<T>;
17 toggleItemOpen: Callback<T>;
18 toggleItemActive: Callback<T>;
19 toggleItemSelection: Callback<T>;
22 const flatTree = (itemsIdMap: Map<string, any>, depth: number, items?: any): [] => {
24 .map((item: any) => addToItemsIdMap(item, itemsIdMap))
25 .reduce((prev: Array<any>, next: any) => {
26 const { items } = next;
27 prev.push({ ...next, depth });
28 prev.push(...(next.open ? flatTree(itemsIdMap, depth + 1, items) : []));
33 const addToItemsIdMap = <T>(item: TreeItem<T>, itemsIdMap: Map<string, TreeItem<T>>) => {
34 itemsIdMap[item.id] = item;
38 const mapStateToProps =
39 <T>(state: RootState, props: TreePickerProps<T>): Pick<TreeProps<T>, 'items' | 'disableRipple' | 'itemsMap'> => {
40 const itemsIdMap: Map<string, TreeItem<T>> = new Map();
41 const tree = state.treePicker[props.pickerId] || createTree();
45 items: getNodeChildrenIds('')(tree)
46 .map(treePickerToTreeItems(tree, state.resources))
47 .map(item => addToItemsIdMap(item, itemsIdMap))
51 items: flatTree(itemsIdMap, 2, parentItem.items || []),
57 const mapDispatchToProps = (_: Dispatch, props: TreePickerProps<any>): Pick<TreeProps<any>, 'onContextMenu' | 'toggleItemOpen' | 'toggleItemActive' | 'toggleItemSelection'> => ({
58 onContextMenu: (event, item) => props.onContextMenu(event, item, props.pickerId),
59 toggleItemActive: (event, item) => props.toggleItemActive(event, item, props.pickerId),
60 toggleItemOpen: (event, item) => props.toggleItemOpen(event, item, props.pickerId),
61 toggleItemSelection: (event, item) => props.toggleItemSelection(event, item, props.pickerId),
64 export const TreePicker = connect(mapStateToProps, mapDispatchToProps)(Tree);
66 const treePickerToTreeItems = (tree: Ttree<any>, resources: ResourcesState) =>
67 (id: string): TreeItem<any> => {
68 const node = getNode(id)(tree) || initTreeNode({ id: '', value: 'InvalidNode' });
69 const items = getNodeChildrenIds(node.id)(tree)
70 .map(treePickerToTreeItems(tree, resources));
71 const resource = resources[node.id];
74 data: resource ? { ...resource, name: node.value.name || node.value } : undefined || node.value,
76 items: items.length > 0 ? items : undefined,
78 selected: node.selected,
79 status: treeNodeStatusToTreeItem(node.status),
83 export const treeNodeStatusToTreeItem = (status: TreeNodeStatus) => {
85 case TreeNodeStatus.INITIAL:
86 return TreeItemStatus.INITIAL;
87 case TreeNodeStatus.PENDING:
88 return TreeItemStatus.PENDING;
89 case TreeNodeStatus.LOADED:
90 return TreeItemStatus.LOADED;