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