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 } from '../tree/tree';
  13 import { Project } from '../../models/project';
  14
  15 type CssRules = 'active' | 'row' | 'treeContainer';
  16
  17 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  18     active: {
  19         color: '#4285F6',
  20     },
  21     row: {
  22         display: 'flex',
  23         alignItems: 'center',
  24         marginLeft: '20px',
  25     },
  26     treeContainer: {
  27         position: 'absolute',
  28         overflowX: 'visible',
  29         marginTop: '80px',
  30         minWidth: '240px',
  31         whiteSpace: 'nowrap',
  32     }
  33 });
  34
  35 interface WorkbenchProps {
  36     projects: Array<TreeItem<Project>>;
  37     toggleProjectTreeItem: (id: string) => any;
  38 }
  39
  40 class ProjectTree<T> extends React.Component<WorkbenchProps & WithStyles<CssRules>> {
  41     render(): ReactElement<any> {
  42         const {classes, projects} = this.props;
  43         return (
  44             <div className={classes.treeContainer}>
  45                 <Tree items={projects}
  46                     toggleItem={this.props.toggleProjectTreeItem}
  47                     render={(project: TreeItem<Project>) => <span className={classes.row}>
  48                         <div><ListItemIcon className={project.active ? classes.active : ''}>{project.data.icon}</ListItemIcon></div>
  49                         <div><ListItemText primary={<Typography className={project.active ? classes.active : ''}>{project.data.name}</Typography>} /></div>
  50                     </span>} />
  51             </div>
  52         );
  53     }
  54 }
  55
  56 export default withStyles(styles)(ProjectTree)