Alow animations (with warnings) + Styling

lib/ui/src/modules/ui/components/left_panel/stories.js

@@ -1,11 +1,121 @@
-import { Treebeard, theme } from 'react-treebeard';
+import { Treebeard, decorators } from 'react-treebeard';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { isSelectedHierarchy } from '../../libs/hierarchy';
+import { baseFonts } from '../theme';
 
 const hierarchySeparatorColor = '#CCC';
 const hierarchySeparatorOffset = '15px';
 
+const treeStyle = {
+  tree: {
+    base: {
+      listStyle: 'none',
+      margin: 0,
+      padding: 0,
+      fontFamily: baseFonts.fontFamily,
+      fontSize: '15px',
+    },
+    node: {
+      base: {
+        position: 'relative',
+      },
+      link: {
+        cursor: 'pointer',
+        position: 'relative',
+        padding: '0px 5px',
+        display: 'block',
+      },
+      activeLink: {
+        fontWeight: 'bold',
+        backgroundColor: '#EEE',
+      },
+      toggle: {
+        base: {
+          position: 'relative',
+          display: 'inline-block',
+          verticalAlign: 'top',
+          marginLeft: '-5px',
+          height: '24px',
+          width: '24px',
+        },
+        wrapper: {
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          margin: '-7px 0 0 -7px',
+          height: '14px',
+        },
+        height: 14,
+        width: 14,
+        arrow: {
+          fill: '#9DA5AB',
+          strokeWidth: 0,
+        },
+      },
+      header: {
+        base: {
+          display: 'inline-block',
+          verticalAlign: 'top',
+          // color: '#9DA5AB'
+        },
+        connector: {
+          width: '2px',
+          height: '12px',
+          borderLeft: 'solid 2px black',
+          borderBottom: 'solid 2px black',
+          position: 'absolute',
+          top: '0px',
+          left: '-21px',
+        },
+        title: {
+          lineHeight: '24px',
+          verticalAlign: 'middle',
+        },
+      },
+      subtree: {
+        listStyle: 'none',
+        paddingLeft: '19px',
+      },
+    },
+  },
+};
+
+function HeaderDecorator(props) {
+  const { style, node } = props;
+
+  const newStyleTitle = {
+    ...style.title,
+  };
+
+  if (!node.children || !node.children.length) {
+    newStyleTitle.fontSize = '13px';
+  }
+
+  return (
+    <div style={style.base}>
+      <div style={newStyleTitle}>
+        {node.name}
+      </div>
+    </div>
+  );
+}
+
+HeaderDecorator.propTypes = {
+  style: PropTypes.shape({
+    title: PropTypes.object,
+    base: PropTypes.object,
+  }).isRequired,
+  node: PropTypes.shape({
+    name: PropTypes.string,
+  }).isRequired,
+};
+
+const treeDecorators = {
+  ...decorators,
+  Header: HeaderDecorator,
+};
+
 const baseListItemStyle = {
   display: 'block',
   cursor: 'pointer',
@@ -74,12 +184,21 @@ class Stories extends React.Component {
       this.fireOnKind(node.kind);
     }
 
-    if (!node.namespaces) return;
+    if (!node.namespaces) {
+      return;
+    }
+
+    const { selectedHierarchy } = this.props;
+    let theRealToggle = toggled;
+
+    if (!toggled && isSelectedHierarchy(node.namespaces, selectedHierarchy)) {
+      theRealToggle = true;
+    }
 
     this.setState(prevState => ({
       nodes: {
         ...prevState.nodes,
-        [node.namespaces.join('@')]: toggled,
+        [node.namespaces.join('@')]: theRealToggle,
       },
     }));
   }
@@ -244,15 +363,14 @@ class Stories extends React.Component {
     //   </div>
     // );
 
-    const style = {
-      ...theme,
-    };
-
-    style.tree.base.backgroundColor = 'transparent';
-    style.tree.base.color = 'inherit';
-    style.tree.node.header.color = 'inherit';
-
-    return <Treebeard style={style} data={data} onToggle={this.onToggle} animations={false} />;
+    return (
+      <Treebeard
+        style={treeStyle}
+        data={data}
+        onToggle={this.onToggle}
+        decorators={treeDecorators}
+      />
+    );
   }
 }