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