1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
12 import Tree, { TreeItem } from '../tree/tree';
13 import { Project } from '../../models/project';
15 type CssRules = 'active' | 'listItemText' | 'row' | 'treeContainer';
17 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
38 export interface WorkbenchProps {
39 projects: Array<TreeItem<Project>>;
40 toggleProjectTreeItem: (id: string) => any;
43 class ProjectTree<T> extends React.Component<WorkbenchProps & WithStyles<CssRules>> {
44 render(): ReactElement<any> {
45 const {classes, projects} = this.props;
46 const {active, listItemText, row, treeContainer} = classes;
48 <div className={treeContainer}>
49 <Tree items={projects}
50 toggleItem={this.props.toggleProjectTreeItem}
51 render={(project: TreeItem<Project>) => <span className={row}>
52 <ListItemIcon className={project.active ? active : ''}>{project.data.icon}</ListItemIcon>
53 <ListItemText className={listItemText} primary={<Typography className={project.active ? active : ''}>{project.data.name}</Typography>} />
60 export default withStyles(styles)(ProjectTree)