feat: active

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

@@ -4,31 +4,22 @@ import {PropTypes, React} from '@latus/react';
 
 import Node from './node';
 
-const Tree = ({
-  activate,
-  indent,
-  label,
-  nodes,
-  value,
-}) => (
+const Tree = (node) => (
   <div className="tree">
-    <Node
-      activate={activate}
-      indent={indent}
-      label={label}
-      nodes={nodes}
-      value={value}
-    />
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <Node {...node} />
   </div>
 );
 
 Tree.defaultProps = {
+  active: () => false,
   activate: () => {},
   indent: 0,
   nodes: null,
 };
 
 Tree.propTypes = {
+  active: PropTypes.func,
   activate: PropTypes.func,
   indent: PropTypes.number,
   label: PropTypes.string.isRequired,

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

@@ -17,6 +17,13 @@
     min-height: auto;
   }
   .node {
+    &.active {
+      background-color: rgba(0, 120, 255, 0.5);
+    }
+    &.parent > .item .label:before {
+      // content: "\25B8";
+      content: "\25BE";
+    }
     > .item .label {
       white-space: nowrap;
       &:before {
@@ -26,9 +33,5 @@
         padding-right: 0.5em;
       }
     }
-    &.parent > .item .label:before {
-      // content: "\25B8";
-      content: "\25BE";
-    }
   }
 }

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

@@ -1,13 +1,15 @@
 import {PropTypes, React} from '@latus/react';
 import classnames from 'classnames';
 
-const Node = ({
-  activate,
-  indent,
-  label,
-  nodes,
-  value,
-}) => {
+const Node = (node) => {
+  const {
+    active,
+    activate,
+    indent,
+    label,
+    nodes,
+    value,
+  } = node;
   const childrenNodes = nodes
     ? nodes.map(
       ({
@@ -16,6 +18,7 @@ const Node = ({
         value,
       }) => (
         <Node
+          active={active}
           activate={activate}
           key={value}
           // eslint-disable-next-line react/no-children-prop
@@ -30,8 +33,8 @@ const Node = ({
   let item = (
     <div
       className="label"
-      onClick={() => {
-        activate(value, nodes);
+      onMouseDown={() => {
+        activate(node);
       }}
       onKeyPress={() => {}}
       role="button"
@@ -47,6 +50,7 @@ const Node = ({
     <div
       className={classnames(
         'node',
+        {active: active(node)},
         {parent: !!nodes},
       )}
       key={value}
@@ -58,12 +62,14 @@ const Node = ({
 };
 
 Node.defaultProps = {
+  active: () => false,
   activate: () => {},
   indent: 0,
   nodes: null,
 };
 
 Node.propTypes = {
+  active: PropTypes.func,
   activate: PropTypes.func,
   indent: PropTypes.number,
   label: PropTypes.string.isRequired,