src/components/file-tree/file-tree.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { Tree, TreeItem, TreeItemStatus } from "../tree/tree";
   7 import { FileTreeData } from "./file-tree-data";
   8 import { FileTreeItem } from "./file-tree-item";
   9
  10 export interface FileTreeProps {
  11     items: Array<TreeItem<FileTreeData>>;
  12     onMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
  13     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
  14     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
  15 }
  16
  17 export class FileTree extends React.Component<FileTreeProps> {
  18     render() {
  19         return <Tree
  20             showSelection={true}
  21             items={this.props.items}
  22             disableRipple={true}
  23             render={this.renderItem}
  24             onContextMenu={this.handleContextMenu}
  25             toggleItemActive={this.handleToggleActive}
  26             toggleItemOpen={this.handleToggle}
  27             toggleItemSelection={this.handleSelectionChange} />;
  28     }
  29
  30     handleContextMenu = (event: React.MouseEvent<any>, item: TreeItem<FileTreeData>) => {
  31         event.stopPropagation();
  32         this.props.onMenuOpen(event, item);
  33     }
  34
  35     handleToggle = (event: React.MouseEvent<{}>, { id, status }: TreeItem<{}>) => {
  36         this.props.onCollapseToggle(id, status);
  37     }
  38
  39     handleToggleActive = () => { return; };
  40
  41     handleSelectionChange = (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => {
  42         event.stopPropagation();
  43         this.props.onSelectionToggle(event, item);
  44     }
  45
  46     renderItem = (item: TreeItem<FileTreeData>) =>
  47         <FileTreeItem
  48             item={item}
  49             onMoreClick={this.handleContextMenu} />
  50
  51 }