src/views-components/project-tree/project-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 { ReactElement } from 'react';
   7 import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
   8 import Tree, { TreeItem, TreeItemStatus } from '../../components/tree/tree';
   9 import { ProjectResource } from '../../models/project';
  10 import { ProjectIcon } from '../../components/icon/icon';
  11 import { ArvadosTheme } from '../../common/custom-theme';
  12 import SingleListItem from '../../components/single-list-item/single-list-item';
  13
  14 export interface ProjectTreeProps {
  15     projects: Array<TreeItem<ProjectResource>>;
  16     toggleOpen: (id: string, status: TreeItemStatus) => void;
  17     toggleActive: (id: string, status: TreeItemStatus) => void;
  18     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectResource>) => void;
  19 }
  20
  21 class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
  22     render(): ReactElement<any> {
  23         const { classes, projects, toggleOpen, toggleActive, onContextMenu } = this.props;
  24         const { root } = classes;
  25         return (
  26             <div className={root}>
  27                 <Tree items={projects}
  28                     onContextMenu={onContextMenu}
  29                     toggleItemOpen={toggleOpen}
  30                     toggleItemActive={toggleActive}
  31                     render={
  32                         (project: TreeItem<ProjectResource>) =>
  33                             <SingleListItem icon={ProjectIcon} name={project.data.name} isActive={project.active} hasMargin={true} />
  34                     }/>
  35             </div>
  36         );
  37     }
  38 }
  39
  40 type CssRules = 'root';
  41
  42 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  43     root: {
  44         marginLeft: `${theme.spacing.unit * 1.5}px`,
  45     }
  46 });
  47
  48 export default withStyles(styles)(ProjectTree);