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