refatoring project tree component, create component for list item

[arvados-workbench2.git] / src / components / side-panel / side-panel.tsx

diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index eedc499f55143bc640e5d799aef30d83ef792989..8105ba7507fca31d0305d0cd54e7259a0ebe6b81 100644 (file)
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -9,6 +9,7 @@ import { ArvadosTheme } from '../../common/custom-theme';
 import { List, ListItem, ListItemText, ListItemIcon, Collapse, Typography } from "@material-ui/core";
 import { SidePanelRightArrowIcon, IconType } from '../icon/icon';
 import * as classnames from "classnames";
+import SingleListItem from '../single-list-item/single-list-item';
 
 export interface SidePanelItem {
     id: string;
@@ -30,24 +31,22 @@ interface SidePanelProps {
 class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
     render(): ReactElement<any> {
         const { classes, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
-        const { listItemText, leftSidePanelContainer, row, list, icon, projectIconMargin, active, iconArrowContainer } = classes;
+        const { root, row, list, toggableIconContainer } = classes;
         return (
-            <div className={leftSidePanelContainer}>
+            <div className={root}>
                 <List>
                     {sidePanelItems.map(it => (
                         <span key={it.name}>
                             <ListItem button className={list} onClick={() => toggleActive(it.id)} onContextMenu={this.handleRowContextMenu(it)}>
                                 <span className={row}>
                                     {it.openAble ? (
-                                        <i onClick={() => toggleOpen(it.id)} className={iconArrowContainer}>
-                                            <SidePanelRightArrowIcon className={this.getIconClassNames(it.open, it.active)} />
+                                        <i onClick={() => toggleOpen(it.id)} className={toggableIconContainer}>
+                                            <ListItemIcon className={this.getToggableIconClassNames(it.open, it.active)}>
+                                                < SidePanelRightArrowIcon />
+                                            </ListItemIcon>
                                         </i>
                                     ) : null}
-                                    <ListItemIcon className={it.active ? active : ''}>
-                                        {<it.icon className={`${icon} ${it.margin ? projectIconMargin : ''}`} />}
-                                    </ListItemIcon>
-                                    <ListItemText className={listItemText} 
-                                        primary={renderListItemText(it.name, active, it.active)} />
+                                    <SingleListItem icon={it.icon} name={it.name} isActive={it.active} hasMargin={it.margin} />
                                 </span>
                             </ListItem>
                             {it.openAble ? (
@@ -62,12 +61,12 @@ class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
         );
     }
 
-    getIconClassNames = (itemOpen ?: boolean, itemActive ?: boolean) => {
+    getToggableIconClassNames = (isOpen?: boolean, isActive ?: boolean) => {
         const { classes } = this.props;
-        return classnames(classes.iconArrow, {
-            [classes.iconOpen]: itemOpen,
-            [classes.iconClose]: !itemOpen,
-            [classes.active]: itemActive
+        return classnames(classes.toggableIcon, {
+            [classes.iconOpen]: isOpen,
+            [classes.iconClose]: !isOpen,
+            [classes.active]: isActive
         });
     }
 
@@ -77,55 +76,42 @@ class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
 
 }
 
-const renderListItemText = (itemName: string, active: string, itemActive?: boolean) =>
-    <Typography className={itemActive ? active : ''}>{itemName}</Typography>;
-
-type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' | 
-    'projectIconMargin' | 'iconClose' | 'iconOpen' | 'iconArrowContainer' | 'iconArrow';
+type CssRules = 'active' | 'row' | 'root' | 'list' | 'iconClose' | 'iconOpen' | 'toggableIconContainer' | 'toggableIcon';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    active: {
-        color: theme.palette.primary.main,
+    root: {
+        overflowY: 'auto',
+        minWidth: '240px',
+        whiteSpace: 'nowrap',
+        marginTop: '52px',
+        display: 'flex',
+        flexGrow: 1,
     },
-    listItemText: {
-        padding: '0px',
+    list: {
+        padding: '5px 0px 5px 14px',
+        minWidth: '240px',
     },
     row: {
         display: 'flex',
         alignItems: 'center',
     },
-    iconArrowContainer: {
+    toggableIconContainer: {
         color: theme.palette.grey["700"],
         height: '14px',
         position: 'absolute'
     },
-    iconArrow: {
+    toggableIcon: {
         fontSize: '14px'
     },
+    active: {
+        color: theme.palette.primary.main,
+    },
     iconClose: {
         transition: 'all 0.1s ease',
     },
     iconOpen: {
         transition: 'all 0.1s ease',
         transform: 'rotate(90deg)',
-    },
-    leftSidePanelContainer: {
-        overflowY: 'auto',
-        minWidth: '240px',
-        whiteSpace: 'nowrap',
-        marginTop: '52px',
-        display: 'flex',
-        flexGrow: 1,
-    },
-    list: {
-        padding: '5px 0px 5px 14px',
-        minWidth: '240px',
-    },
-    icon: {
-        fontSize: '20px'
-    },
-    projectIconMargin: {
-        marginLeft: '17px',
     }
 });