Merge branch '15027-object-update-fix'

[arvados-workbench2.git] / src / views-components / project-tree / project-tree.tsx

diff --git a/src/views-components/project-tree/project-tree.tsx b/src/views-components/project-tree/project-tree.tsx
index fd32ff040d82dc5dce7f8bbc94583c88357695dd..b615f5b5cb05ebcc3d87a23bce7d772afb47599e 100644 (file)
--- a/src/views-components/project-tree/project-tree.tsx
+++ b/src/views-components/project-tree/project-tree.tsx
@@ -4,65 +4,48 @@
 
 import * as React from 'react';
 import { ReactElement } from 'react';
-import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
-import ListItemText from "@material-ui/core/ListItemText/ListItemText";
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import Typography from '@material-ui/core/Typography';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { Tree, TreeItem } 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';
 
-import Tree, { TreeItem, TreeItemStatus } from '../../components/tree/tree';
-import { Project } from '../../models/project';
+type CssRules = 'root';
 
-type CssRules = 'active' | 'listItemText' | 'row' | 'treeContainer';
-
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
-    active: {
-        color: '#4285F6',
-    },
-    listItemText: {
-        padding: '0px',
-    },
-    row: {
-        display: 'flex',
-        alignItems: 'center',
-        marginLeft: '20px',
-    },
-    treeContainer: {
-        marginTop: '37px',
-        overflowX: 'visible',
-        overflowY: 'auto',
-        minWidth: '240px',
-        whiteSpace: 'nowrap',
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        marginLeft: `${theme.spacing.unit * 1.5}px`,
     }
 });
 
-export interface ProjectTreeProps {
-    projects: Array<TreeItem<Project>>;
-    toggleProjectTreeItem: (id: string, status: TreeItemStatus) => void;
+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;
 }
 
-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 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>
+            );
+        }
     }
-}
-
-export default withStyles(styles)(ProjectTree);
+);