import Tree, { TreeItem } from '../tree/tree';
import { Project } from '../../models/project';
-type CssRules = 'active' | 'row' | 'treeContainer';
+type CssRules = 'active' | 'listItemText' | 'row' | 'treeContainer';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
active: {
color: '#4285F6',
},
+ listItemText: {
+ padding: '0px',
+ },
row: {
display: 'flex',
alignItems: 'center',
}
});
-export interface WorkbenchProps {
+export interface ProjectTreeProps {
projects: Array<TreeItem<Project>>;
- toggleProjectTreeItem: (id: string) => any;
+ toggleProjectTreeItem: (id: string) => void;
}
-class ProjectTree<T> extends React.Component<WorkbenchProps & WithStyles<CssRules>> {
+class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
render(): ReactElement<any> {
const {classes, projects} = this.props;
+ const {active, listItemText, row, treeContainer} = classes;
return (
- <div className={classes.treeContainer}>
+ <div className={treeContainer}>
<Tree items={projects}
toggleItem={this.props.toggleProjectTreeItem}
- render={(project: TreeItem<Project>) => <span className={classes.row}>
- <div><ListItemIcon className={project.active ? classes.active : ''}>{project.data.icon}</ListItemIcon></div>
- <div><ListItemText primary={<Typography className={project.active ? classes.active : ''}>{project.data.name}</Typography>} /></div>
- </span>} />
+ render={(project: TreeItem<Project>, level: number) =>
+ <span className={row}>
+ <ListItemIcon className={project.active ? active : ''}>
+ {level === 0 ? <i className="fas fa-th"/> : <i className="fas fa-folder"/>}
+ </ListItemIcon>
+ <ListItemText className={listItemText} primary={
+ <Typography className={project.active ? active : ''}>
+ {project.data.name}
+ </Typography>
+ }/>
+ </span>
+ }/>
</div>
);
}
}
-export default withStyles(styles)(ProjectTree)
\ No newline at end of file
+export default withStyles(styles)(ProjectTree);