refatoring project tree component, create component for list item

[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 17592a7f36d9374e8c6bef603e132d9690567944..68c4c85772e72c452433250fc8ba22ffd93e2e86 100644 (file)
--- a/src/views-components/project-tree/project-tree.tsx
+++ b/src/views-components/project-tree/project-tree.tsx
@@ -5,12 +5,11 @@
 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 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>>;
@@ -22,46 +21,27 @@ export interface ProjectTreeProps {
 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;
+        const { root } = classes;
         return (
-            <div className={treeContainer}>
+            <div className={root}>
                 <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>
-                    } />
+                    render={
+                        (project: TreeItem<ProjectResource>) =>
+                            <SingleListItem icon={ProjectIcon} name={project.data.name} isActive={project.active} hasMargin={true} />
+                    }/>
             </div>
         );
     }
 }
 
-type CssRules = 'active' | 'listItemText' | 'row' | 'treeContainer';
+type CssRules = 'root';
 
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
-    active: {
-        color: '#4285F6',
-    },
-    listItemText: {
-        padding: '0px',
-    },
-    row: {
-        display: 'flex',
-        alignItems: 'center',
-        marginLeft: '20px',
-    },
-    treeContainer: {
-        minWidth: '240px',
-        whiteSpace: 'nowrap',
-        marginLeft: '13px',
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        marginLeft: `${theme.spacing.unit * 1.5}px`,
     }
 });