import Typography from '@material-ui/core/Typography';
import Tree, { TreeItem, TreeItemStatus } from '../../components/tree/tree';
-import { Project } from '../../models/project';
+import { ProjectResource } from '../../models/project';
+
+export interface ProjectTreeProps {
+ projects: Array<TreeItem<ProjectResource>>;
+ toggleOpen: (id: string, status: TreeItemStatus) => void;
+ toggleActive: (id: string, status: TreeItemStatus) => void;
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectResource>) => void;
+}
+
+class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
+ render(): ReactElement<any> {
+ const { classes, projects, toggleOpen, toggleActive, onContextMenu } = this.props;
+ const { active, listItemText, row, treeContainer } = classes;
+ return (
+ <div className={treeContainer}>
+ <Tree items={projects}
+ onContextMenu={onContextMenu}
+ toggleItemOpen={toggleOpen}
+ toggleItemActive={toggleActive}
+ render={(project: TreeItem<ProjectResource>) =>
+ <span className={row}>
+ <ListItemIcon className={project.active ? active : ''}>
+ <i className="fas fa-folder" />
+ </ListItemIcon>
+ <ListItemText className={listItemText} primary={
+ <Typography className={project.active ? active : ''}>{project.data.name}</Typography>
+ } />
+ </span>
+ } />
+ </div>
+ );
+ }
+}
type CssRules = 'active' | 'listItemText' | 'row' | 'treeContainer';
marginLeft: '20px',
},
treeContainer: {
- marginTop: '37px',
- overflowX: 'visible',
- overflowY: 'auto',
minWidth: '240px',
whiteSpace: 'nowrap',
+ marginLeft: '13px',
}
});
-export interface ProjectTreeProps {
- projects: Array<TreeItem<Project>>;
- toggleProjectTreeItem: (id: string, status: TreeItemStatus) => void;
-}
-
-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={treeContainer}>
- <Tree items={projects}
- toggleItem={this.props.toggleProjectTreeItem}
- 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);