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 ListItemText from "@material-ui/core/ListItemText/ListItemText";
   9 import ListItemIcon from '@material-ui/core/ListItemIcon';
  10 import Typography from '@material-ui/core/Typography';
  11
  12 import Tree, { TreeItem, TreeItemStatus } from '../../components/tree/tree';
  13 import { ProjectResource } from '../../models/project';
  14
  15 export interface ProjectTreeProps {
  16     projects: Array<TreeItem<ProjectResource>>;
  17     toggleOpen: (id: string, status: TreeItemStatus) => void;
  18     toggleActive: (id: string, status: TreeItemStatus) => void;
  19     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectResource>) => void;
  20 }
  21
  22 class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
  23     render(): ReactElement<any> {
  24         const { classes, projects, toggleOpen, toggleActive, onContextMenu } = this.props;
  25         const { active, listItemText, row, treeContainer } = classes;
  26         return (
  27             <div className={treeContainer}>
  28                 <Tree items={projects}
  29                     onContextMenu={onContextMenu}
  30                     toggleItemOpen={toggleOpen}
  31                     toggleItemActive={toggleActive}
  32                     render={(project: TreeItem<ProjectResource>) =>
  33                         <span className={row}>
  34                             <ListItemIcon className={project.active ? active : ''}>
  35                                 <i className="fas fa-folder" />
  36                             </ListItemIcon>
  37                             <ListItemText className={listItemText} primary={
  38                                 <Typography className={project.active ? active : ''}>{project.data.name}</Typography>
  39                             } />
  40                         </span>
  41                     } />
  42             </div>
  43         );
  44     }
  45 }
  46
  47 type CssRules = 'active' | 'listItemText' | 'row' | 'treeContainer';
  48
  49 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  50     active: {
  51         color: '#4285F6',
  52     },
  53     listItemText: {
  54         padding: '0px',
  55     },
  56     row: {
  57         display: 'flex',
  58         alignItems: 'center',
  59         marginLeft: '20px',
  60     },
  61     treeContainer: {
  62         minWidth: '240px',
  63         whiteSpace: 'nowrap',
  64         marginLeft: '13px',
  65     }
  66 });
  67
  68 export default withStyles(styles)(ProjectTree);