import * as React from 'react';
import { ReactElement } from 'react';
-import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
-import Tree, { TreeItem, TreeItemStatus } from '../../components/tree/tree';
-import { ProjectResource } from '../../models/project';
-import { ProjectIcon } from '../../components/icon/icon';
-import { ArvadosTheme } from '../../common/custom-theme';
-import SingleListItem from '../../components/single-list-item/single-list-item';
-
-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;
- return (
- <div className={classes.root}>
- <Tree items={projects}
- onContextMenu={onContextMenu}
- toggleItemOpen={toggleOpen}
- toggleItemActive={toggleActive}
- render={
- (project: TreeItem<ProjectResource>) =>
- <SingleListItem icon={ProjectIcon} name={project.data.name} isActive={project.active} hasMargin={true} />
- }/>
- </div>
- );
- }
-}
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { Tree, TreeItem, TreeItemStatus } from '~/components/tree/tree';
+import { ProjectResource } from '~/models/project';
+import { ProjectIcon } from '~/components/icon/icon';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { ListItemTextIcon } from '~/components/list-item-text-icon/list-item-text-icon';
type CssRules = 'root';
}
});
-export default withStyles(styles)(ProjectTree);
+export interface ProjectTreeProps<T> {
+ projects: Array<TreeItem<ProjectResource>>;
+ toggleOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
+ toggleActive: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectResource>) => void;
+}
+
+export const ProjectTree = withStyles(styles)(
+ class ProjectTreeGeneric<T> extends React.Component<ProjectTreeProps<T> & WithStyles<CssRules>> {
+ render(): ReactElement<any> {
+ const { classes, projects, toggleOpen, toggleActive, onContextMenu } = this.props;
+ return (
+ <div className={classes.root}>
+ <Tree items={projects}
+ onContextMenu={onContextMenu}
+ toggleItemOpen={toggleOpen}
+ toggleItemActive={toggleActive}
+ render={
+ (project: TreeItem<ProjectResource>) =>
+ <ListItemTextIcon
+ icon={ProjectIcon}
+ name={project.data.name}
+ isActive={project.active}
+ hasMargin={true} />
+ } />
+ </div>
+ );
+ }
+ }
+);