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 ListItemTextIcon from '../../components/list-item-text-icon/list-item-text-icon';
  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         return (
  25             <div className={classes.root}>
  26                 <Tree items={projects}
  27                     onContextMenu={onContextMenu}
  28                     toggleItemOpen={toggleOpen}
  29                     toggleItemActive={toggleActive}
  30                     render={
  31                         (project: TreeItem<ProjectResource>) =>
  32                             <ListItemTextIcon icon={ProjectIcon} name={project.data.name} isActive={project.active} hasMargin={true} />
  33                     }/>
  34             </div>
  35         );
  36     }
  37 }
  38
  39 type CssRules = 'root';
  40
  41 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  42     root: {
  43         marginLeft: `${theme.spacing.unit * 1.5}px`,
  44     }
  45 });
  46
  47 export default withStyles(styles)(ProjectTree);