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 { TreeItem, TreeItemStatus } from "../tree/tree";
   7 import { VirtualTree } from "../tree/virtual-tree";
   8 import { FileTreeData } from "./file-tree-data";
   9 import { FileTreeItem } from "./file-tree-item";
  10
  11 export interface FileTreeProps {
  12     items: Array<TreeItem<FileTreeData>>;
  13     onMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
  14     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
  15     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
  16     onFileClick: (id: string) => void;
  17     currentItemUuid?: string;
  18 }
  19
  20 const Tree = VirtualTree(20);
  21 export class FileTree extends React.Component<FileTreeProps> {
  22     render() {
  23         return <Tree
  24             showSelection={true}
  25             items={this.props.items}
  26             disableRipple={true}
  27             render={this.renderItem}
  28             onContextMenu={this.handleContextMenu}
  29             toggleItemActive={this.handleToggleActive}
  30             toggleItemOpen={this.handleToggle}
  31             toggleItemSelection={this.handleSelectionChange}
  32             currentItemUuid={this.props.currentItemUuid} />;
  33     }
  34
  35     handleContextMenu = (event: React.MouseEvent<any>, item: TreeItem<FileTreeData>) => {
  36         event.stopPropagation();
  37         this.props.onMenuOpen(event, item);
  38     }
  39
  40     handleToggle = (event: React.MouseEvent<{}>, { id, status }: TreeItem<{}>) => {
  41         this.props.onCollapseToggle(id, status);
  42     }
  43
  44     handleToggleActive = (_: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => {
  45         this.props.onFileClick(item.id);
  46     }
  47
  48     handleSelectionChange = (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => {
  49         event.stopPropagation();
  50         this.props.onSelectionToggle(event, item);
  51     }
  52
  53     renderItem = (item: TreeItem<FileTreeData>) =>
  54         <FileTreeItem
  55             item={item}
  56             onMoreClick={this.handleContextMenu} />
  57
  58 }