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 Tree, { TreeItem, TreeItemStatus } from '../../components/tree/tree';
9 import { ProjectResource } from '../../models/project';
10 import { ProjectIcon } from '../../components/icon/icon';
11 import { ArvadosTheme } from '../../common/custom-theme';
12 import SingleListItem from '../../components/single-list-item/single-list-item';
14 export interface ProjectTreeProps {
15 projects: Array<TreeItem<ProjectResource>>;
16 toggleOpen: (id: string, status: TreeItemStatus) => void;
17 toggleActive: (id: string, status: TreeItemStatus) => void;
18 onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectResource>) => void;
21 class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
22 render(): ReactElement<any> {
23 const { classes, projects, toggleOpen, toggleActive, onContextMenu } = this.props;
25 <div className={classes.root}>
26 <Tree items={projects}
27 onContextMenu={onContextMenu}
28 toggleItemOpen={toggleOpen}
29 toggleItemActive={toggleActive}
31 (project: TreeItem<ProjectResource>) =>
32 <SingleListItem icon={ProjectIcon} name={project.data.name} isActive={project.active} hasMargin={true} />
39 type CssRules = 'root';
41 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
43 marginLeft: `${theme.spacing.unit * 1.5}px`,
47 export default withStyles(styles)(ProjectTree);