X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/0a80eaa377a404c55660ecae52b495a9ed2e9167..c1787278642d2ef02234ea27f94aaae9cdd52d40:/src/components/side-panel/side-panel.tsx?ds=sidebyside

diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index 2d384ef7..206cb632 100644
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -5,105 +5,17 @@
 import * as React from 'react';
 import { ReactElement } from 'react';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
-import { ArvadosTheme } from '../../common/custom-theme';
-import { List, ListItem, ListItemText, ListItemIcon, Collapse, Typography } from "@material-ui/core";
+import { ArvadosTheme } from '~/common/custom-theme';
+import { List, ListItem, ListItemIcon, Collapse } from "@material-ui/core";
 import { SidePanelRightArrowIcon, IconType } from '../icon/icon';
 import * as classnames from "classnames";
+import { ListItemTextIcon } from '../list-item-text-icon/list-item-text-icon';
+import { Dispatch } from "redux";
 
-export interface SidePanelItem {
-    id: string;
-    name: string;
-    icon: IconType;
-    active?: boolean;
-    open?: boolean;
-    margin?: boolean;
-    openAble?: boolean;
-}
-
-interface SidePanelProps {
-    toggleOpen: (id: string) => void;
-    toggleActive: (id: string) => void;
-    sidePanelItems: SidePanelItem[];
-    onContextMenu: (event: React.MouseEvent<HTMLElement>, item: SidePanelItem) => void;
-}
-
-class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
-    render(): ReactElement<any> {
-        const { classes, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
-        const { leftSidePanelContainer, row, list, toggableIconContainer } = classes;
-        return (
-            <div className={leftSidePanelContainer}>
-                <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={toggableIconContainer}>
-                                            <ListItemIcon className={this.getToggableIconClassNames(it.open, it.active)}>
-                                                {< SidePanelRightArrowIcon />}
-                                            </ListItemIcon>
-                                        </i>
-                                    ) : null}
-                                    <ListItemIcon className={this.getListItemIconClassNames(it.margin, it.active)}>
-                                        {<it.icon />}
-                                    </ListItemIcon>
-                                    <ListItemText primary={this.renderListItemText(it.name, it.active)} />
-                                </span>
-                            </ListItem>
-                            {it.openAble ? (
-                                <Collapse in={it.open} timeout="auto" unmountOnExit>
-                                    {children}
-                                </Collapse>
-                            ) : null}
-                        </span>
-                    ))}
-                </List>
-            </div>
-        );
-    }
-
-    getToggableIconClassNames = (isOpen?: boolean, isActive ?: boolean) => {
-        const { classes } = this.props;
-        return classnames(classes.toggableIcon, {
-            [classes.iconOpen]: isOpen,
-            [classes.iconClose]: !isOpen,
-            [classes.active]: isActive
-        });
-    }
-
-    getListItemIconClassNames = (hasMargin?: boolean, isActive?: boolean) => {
-        const { classes } = this.props;
-        return classnames({
-            [classes.hasMargin]: hasMargin,
-            [classes.active]: isActive
-        });
-    }
-
-    renderListItemText = (name: string, isActive?: boolean) => {
-        return <Typography variant='body1' className={this.getListItemTextClassNames(isActive)}>
-                {name}
-            </Typography>;
-    }
-
-    getListItemTextClassNames = (isActive?: boolean) => {
-        const { classes } = this.props;
-        return classnames(classes.listItemText, {
-            [classes.active]: isActive
-        });
-    }
-
-    handleRowContextMenu = (item: SidePanelItem) =>
-        (event: React.MouseEvent<HTMLElement>) =>
-            item.openAble ? this.props.onContextMenu(event, item) : null
-
-}
-
-type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 
-    'hasMargin' | 'iconClose' | 'iconOpen' | 'toggableIconContainer' | 'toggableIcon';
+type CssRules = 'active' | 'row' | 'root' | 'list' | 'iconClose' | 'iconOpen' | 'toggableIconContainer' | 'toggableIcon';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    leftSidePanelContainer: {
+    root: {
         overflowY: 'auto',
         minWidth: '240px',
         whiteSpace: 'nowrap',
@@ -122,20 +34,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     toggableIconContainer: {
         color: theme.palette.grey["700"],
         height: '14px',
-        position: 'absolute'
+        width: '14px'
     },
     toggableIcon: {
         fontSize: '14px'
     },
-    listItemText: {
-        fontWeight: 700
-    },
     active: {
         color: theme.palette.primary.main,
     },
-    hasMargin: {
-        marginLeft: '18px',
-    },
     iconClose: {
         transition: 'all 0.1s ease',
     },
@@ -145,4 +51,74 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     }
 });
 
-export default withStyles(styles)(SidePanel);
\ No newline at end of file
+export interface SidePanelItem {
+    id: string;
+    name: string;
+    icon: IconType;
+    active?: boolean;
+    open?: boolean;
+    margin?: boolean;
+    openAble?: boolean;
+    activeAction?: (dispatch: Dispatch, uuid?: string) => void;
+}
+
+interface SidePanelDataProps {
+    toggleOpen: (id: string) => void;
+    toggleActive: (id: string) => void;
+    sidePanelItems: SidePanelItem[];
+    onContextMenu: (event: React.MouseEvent<HTMLElement>, item: SidePanelItem) => void;
+}
+
+type SidePanelProps = SidePanelDataProps & WithStyles<CssRules>;
+
+export const SidePanel = withStyles(styles)(
+    class extends React.Component<SidePanelProps> {
+        render(): ReactElement<any> {
+            const { classes, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
+            const { root, row, list, toggableIconContainer } = classes;
+            return (
+                <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={toggableIconContainer}>
+                                                <ListItemIcon
+                                                    className={this.getToggableIconClassNames(it.open, it.active)}>
+                                                    < SidePanelRightArrowIcon/>
+                                                </ListItemIcon>
+                                            </i>
+                                        ) : null}
+                                        <ListItemTextIcon icon={it.icon} name={it.name} isActive={it.active}
+                                                          hasMargin={it.margin}/>
+                                    </span>
+                                </ListItem>
+                                {it.openAble ? (
+                                    <Collapse in={it.open} timeout="auto" unmountOnExit>
+                                        {children}
+                                    </Collapse>
+                                ) : null}
+                            </span>
+                        ))}
+                    </List>
+                </div>
+            );
+        }
+
+        getToggableIconClassNames = (isOpen?: boolean, isActive ?: boolean) => {
+            const { iconOpen, iconClose, active, toggableIcon } = this.props.classes;
+            return classnames(toggableIcon, {
+                [iconOpen]: isOpen,
+                [iconClose]: !isOpen,
+                [active]: isActive
+            });
+        }
+
+        handleRowContextMenu = (item: SidePanelItem) =>
+            (event: React.MouseEvent<HTMLElement>) =>
+                item.openAble ? this.props.onContextMenu(event, item) : null
+    }
+);
