Merge workflows view

[arvados.git] / src / components / tree / tree.tsx

diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 7f45e2d7f4a66aa0fc6016cce4deb73d8bb79fe5..c892d7d2c8fb12b86da3e4904b9dc9c8198148e1 100644 (file)
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -9,7 +9,7 @@ import { ReactElement } from "react";
 import CircularProgress from '@material-ui/core/CircularProgress';
 import * as classnames from "classnames";
 
-import { ArvadosTheme } from '../../common/custom-theme';
+import { ArvadosTheme } from '~/common/custom-theme';
 import { SidePanelRightArrowIcon } from '../icon/icon';
 
 type CssRules = 'list'
@@ -107,12 +107,10 @@ export const Tree = withStyles(styles)(
                             onContextMenu={this.handleRowContextMenu(it)}>
                             {it.status === TreeItemStatus.PENDING ?
                                 <CircularProgress size={10} className={loader} /> : null}
-                            <i onClick={() => this.props.toggleItemOpen(it.id, it.status)}
+                            <i onClick={this.handleToggleItemOpen(it.id, it.status)}
                                 className={toggableIconContainer}>
                                 <ListItemIcon className={this.getToggableIconClassNames(it.open, it.active)}>
-                                    {it.status === TreeItemStatus.PENDING 
-                                    || (it.status === TreeItemStatus.LOADED && !it.items)
-                                    || (it.status === TreeItemStatus.LOADED && it.items && it.items.length === 0) ? <span /> : <SidePanelRightArrowIcon />}
+                                    {this.getProperArrowAnimation(it.status, it.items!)}
                                 </ListItemIcon>
                             </i>
                             {this.props.showSelection &&
@@ -142,6 +140,16 @@ export const Tree = withStyles(styles)(
             </List>;
         }
 
+        getProperArrowAnimation = (status: string, items: Array<TreeItem<T>>) => {
+            return this.isSidePanelIconNotNeeded(status, items) ? <span /> : <SidePanelRightArrowIcon />;
+        }
+
+        isSidePanelIconNotNeeded = (status: string, items: Array<TreeItem<T>>) => {
+            return status === TreeItemStatus.PENDING ||
+                (status === TreeItemStatus.LOADED && !items) ||
+                (status === TreeItemStatus.LOADED && items && items.length === 0);
+        }
+
         getToggableIconClassNames = (isOpen?: boolean, isActive?: boolean) => {
             const { iconOpen, iconClose, active, toggableIcon } = this.props.classes;
             return classnames(toggableIcon, {
@@ -163,5 +171,10 @@ export const Tree = withStyles(styles)(
                 }
                 : undefined;
         }
+
+        handleToggleItemOpen = (id: string, status: TreeItemStatus) => (event: React.MouseEvent<HTMLElement>) => {
+            event.stopPropagation();
+            this.props.toggleItemOpen(id, status);
+        }
     }
 );