src/views-components/tree-picker/tree-picker.ts

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import { connect } from "react-redux";
   6 import { Tree, TreeProps, TreeItem, TreeItemStatus } from "~/components/tree/tree";
   7 import { RootState } from "~/store/store";
   8 import { createTreePickerNode, TreePickerNode } from "~/store/tree-picker/tree-picker";
   9 import { getNodeValue, getNodeChildrenIds, Tree as Ttree, createTree } from "~/models/tree";
  10 import { Dispatch } from "redux";
  11
  12 export interface TreePickerProps {
  13     pickerId: string;
  14     toggleItemOpen: (nodeId: string, status: TreeItemStatus, pickerId: string) => void;
  15     toggleItemActive: (nodeId: string, status: TreeItemStatus, pickerId: string) => void;
  16 }
  17
  18 const mapStateToProps = (state: RootState, props: TreePickerProps): Pick<TreeProps<any>, 'items'> => {
  19     const tree = state.treePicker[props.pickerId] || createTree();
  20     return {
  21         items: getNodeChildrenIds('')(tree)
  22             .map(treePickerToTreeItems(tree))
  23     };
  24 };
  25
  26 const mapDispatchToProps = (dispatch: Dispatch, props: TreePickerProps): Pick<TreeProps<any>, 'onContextMenu' | 'toggleItemOpen' | 'toggleItemActive'> => ({
  27     onContextMenu: () => { return; },
  28     toggleItemActive: (id, status) => props.toggleItemActive(id, status, props.pickerId),
  29     toggleItemOpen: (id, status) => props.toggleItemOpen(id, status, props.pickerId)
  30 });
  31
  32 export const TreePicker = connect(mapStateToProps, mapDispatchToProps)(Tree);
  33
  34 const treePickerToTreeItems = (tree: Ttree<TreePickerNode>) =>
  35     (id: string): TreeItem<any> => {
  36         const node: TreePickerNode = getNodeValue(id)(tree) || createTreePickerNode({ nodeId: '', value: 'InvalidNode' });
  37         const items = getNodeChildrenIds(node.nodeId)(tree)
  38             .map(treePickerToTreeItems(tree));
  39         return {
  40             active: node.selected,
  41             data: node.value,
  42             id: node.nodeId,
  43             items: items.length > 0 ? items : undefined,
  44             open: !node.collapsed,
  45             status: node.status
  46         };
  47     };
  48