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 as Tree } 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 export class FileTree extends React.Component<FileTreeProps> {
  21     render() {
  22         return <Tree
  23             showSelection={true}
  24             items={this.props.items}
  25             disableRipple={true}
  26             render={this.renderItem}
  27             onContextMenu={this.handleContextMenu}
  28             toggleItemActive={this.handleToggleActive}
  29             toggleItemOpen={this.handleToggle}
  30             toggleItemSelection={this.handleSelectionChange}
  31             currentItemUuid={this.props.currentItemUuid} />;
  32     }
  33
  34     handleContextMenu = (event: React.MouseEvent<any>, item: TreeItem<FileTreeData>) => {
  35         event.stopPropagation();
  36         this.props.onMenuOpen(event, item);
  37     }
  38
  39     handleToggle = (event: React.MouseEvent<{}>, { id, status }: TreeItem<{}>) => {
  40         this.props.onCollapseToggle(id, status);
  41     }
  42
  43     handleToggleActive = (_: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => {
  44         this.props.onFileClick(item.id);
  45     }
  46
  47     handleSelectionChange = (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => {
  48         event.stopPropagation();
  49         this.props.onSelectionToggle(event, item);
  50     }
  51
  52     renderItem = (item: TreeItem<FileTreeData>) =>
  53         <FileTreeItem
  54             item={item}
  55             onMoreClick={this.handleContextMenu} />
  56
  57 }