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, 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 type CssRules = 'root';
  15
  16 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  17     root: {
  18         marginLeft: `${theme.spacing.unit * 1.5}px`,
  19     }
  20 });
  21
  22 export interface ProjectTreeProps {
  23     projects: Array<TreeItem<ProjectResource>>;
  24     toggleOpen: (id: string, status: TreeItemStatus) => void;
  25     toggleActive: (id: string, status: TreeItemStatus) => void;
  26     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectResource>) => void;
  27 }
  28
  29 export const ProjectTree = withStyles(styles)(
  30     class ProjectTreeGeneric<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
  31         render(): ReactElement<any> {
  32             const { classes, projects, toggleOpen, toggleActive, onContextMenu } = this.props;
  33             return (
  34                 <div className={classes.root}>
  35                     <Tree items={projects}
  36                         onContextMenu={onContextMenu}
  37                         toggleItemOpen={toggleOpen}
  38                         toggleItemActive={toggleActive}
  39                         render={
  40                             (project: TreeItem<ProjectResource>) =>
  41                                 <ListItemTextIcon
  42                                     icon={ProjectIcon}
  43                                     name={project.data.name}
  44                                     isActive={project.active}
  45                                     hasMargin={true}/>
  46                         }/>
  47                 </div>
  48             );
  49         }
  50     }
  51 );