refactor: tree

packages/react/src/components/tree/index.jsx

@@ -12,15 +12,16 @@ const Tree = (node) => (
 );
 
 Tree.defaultProps = {
-  active: () => false,
   activate: () => {},
+  classNames: '',
   indent: 0,
   nodes: null,
 };
 
 Tree.propTypes = {
-  active: PropTypes.func,
   activate: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
+  classNames: PropTypes.any,
   indent: PropTypes.number,
   label: PropTypes.string.isRequired,
   nodes: PropTypes.arrayOf(PropTypes.any),

packages/react/src/components/tree/index.scss

@@ -20,17 +20,26 @@
     &.active {
       background-color: rgba(0, 120, 255, 0.5);
     }
+    &.collapsed {
+      &.parent > .item .label:before {
+        content: "\25B8";
+      }
+      .node {
+        display: none;
+      }
+    }
     &.parent > .item .label:before {
-      // content: "\25B8";
       content: "\25BE";
     }
-    > .item .label {
-      white-space: nowrap;
-      &:before {
-        color: #999;
-        content: "o";
-        font-size: 0.7em;
-        padding-right: 0.5em;
+    > .item {
+      .label {
+        white-space: nowrap;
+        &:before {
+          color: #999;
+          content: "o";
+          font-size: 0.7em;
+          padding-right: 0.5em;
+        }
       }
     }
   }

packages/react/src/components/tree/node.jsx

@@ -1,25 +1,26 @@
 import {PropTypes, React} from '@latus/react';
 import classnames from 'classnames';
 
-const Node = (node) => {
+const Node = (props) => {
   const {
-    active,
     activate,
+    classNames,
     indent,
     label,
     nodes,
     value,
-  } = node;
+  } = props;
   const childrenNodes = nodes
     ? nodes.map(
       ({
+        classNames,
         label,
         nodes,
         value,
       }) => (
         <Node
-          active={active}
           activate={activate}
+          classNames={classNames}
           key={value}
           // eslint-disable-next-line react/no-children-prop
           nodes={nodes}
@@ -33,12 +34,6 @@ const Node = (node) => {
   let item = (
     <div
       className="label"
-      onMouseDown={() => {
-        activate(node);
-      }}
-      onKeyPress={() => {}}
-      role="button"
-      tabIndex={0}
     >
       {label}
     </div>
@@ -50,27 +45,38 @@ const Node = (node) => {
     <div
       className={classnames(
         'node',
-        {active: active(node)},
         {parent: !!nodes},
+        classNames,
       )}
       key={value}
     >
-      <div className="item">{item}</div>
+      <div
+        className="item"
+        onMouseDown={() => {
+          activate(props);
+        }}
+        onKeyPress={() => {}}
+        role="button"
+        tabIndex={0}
+      >
+        {item}
+      </div>
       {childrenNodes}
     </div>
   );
 };
 
 Node.defaultProps = {
-  active: () => false,
   activate: () => {},
+  classNames: '',
   indent: 0,
   nodes: null,
 };
 
 Node.propTypes = {
-  active: PropTypes.func,
   activate: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
+  classNames: PropTypes.any,
   indent: PropTypes.number,
   label: PropTypes.string.isRequired,
   nodes: PropTypes.arrayOf(PropTypes.any),