Hover stylings

src/JSONNestedNode.js

@@ -92,9 +92,11 @@ export default class JSONNestedNode extends React.Component {
     // calculate individual node expansion if necessary
     const expanded = props.shouldExpandNode && !props.isCircular ?
         props.shouldExpandNode(props.keyPath, props.data, props.level) : false;
+
     this.state = {
       expanded,
-      createdChildNodes: false
+      createdChildNodes: false,
+      hover: false
     };
   }
 
@@ -114,7 +116,7 @@ export default class JSONNestedNode extends React.Component {
       labelRenderer,
       expandable
     } = this.props;
-    const expanded = this.state.expanded;
+    const { expanded, hover } = this.state;
     const renderedChildren = expanded || (hideRoot && this.props.level === 0) ?
       renderChildNodes({ ...this.props, level: this.props.level + 1 }) : null;
 
@@ -129,7 +131,7 @@ export default class JSONNestedNode extends React.Component {
       itemType,
       createItemString(data, collectionLimit)
     );
-    const stylingArgs = [keyPath, nodeType, expanded, expandable];
+    const stylingArgs = [keyPath, nodeType, expanded, expandable, hover];
 
     return hideRoot ? (
       <li {...styling('rootNode', ...stylingArgs)}>
@@ -138,7 +140,11 @@ export default class JSONNestedNode extends React.Component {
         </ul>
       </li>
     ) : (
-      <li {...styling('nestedNode', ...stylingArgs)}>
+      <li
+        {...styling('nestedNode', ...stylingArgs)}
+        onMouseOver={this.handleMouseOver}
+        onMouseOut={this.handleMouseOut}
+      >
         {expandable &&
           <JSONArrow
             styling={styling}
@@ -167,4 +173,11 @@ export default class JSONNestedNode extends React.Component {
   }
 
   handleClick = () => this.setState({ expanded: !this.state.expanded });
+
+  handleMouseOver = (e) => {
+    e.stopPropagation();
+    this.setState({ hover: true });
+  };
+
+  handleMouseOut = () => this.setState({ hover: false });
 }

src/JSONValueNode.js

@@ -4,41 +4,50 @@ import React, { PropTypes } from 'react';
  * Renders simple values (eg. strings, numbers, booleans, etc)
  */
 
-const JSONValueNode = ({
-  nodeType,
-  styling,
-  labelRenderer,
-  keyPath,
-  valueRenderer,
-  value,
-  valueGetter
-}) => (
-  <li
-    {...styling('value', nodeType, keyPath)}
-  >
-    <label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
-      {labelRenderer(keyPath, nodeType, false, false)}
-    </label>
-    <span {...styling('valueText', nodeType, keyPath)}>
-      {valueRenderer(valueGetter(value), value, ...keyPath)}
-    </span>
-  </li>
-);
+export default class JSONValueNode extends React.Component {
+  static propTypes = {
+    nodeType: PropTypes.string.isRequired,
+    styling: PropTypes.func.isRequired,
+    labelRenderer: PropTypes.func.isRequired,
+    keyPath: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    ).isRequired,
+    valueRenderer: PropTypes.func.isRequired,
+    value: PropTypes.any,
+    valueGetter: PropTypes.func
+  };
 
-JSONValueNode.propTypes = {
-  nodeType: PropTypes.string.isRequired,
-  styling: PropTypes.func.isRequired,
-  labelRenderer: PropTypes.func.isRequired,
-  keyPath: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  ).isRequired,
-  valueRenderer: PropTypes.func.isRequired,
-  value: PropTypes.any,
-  valueGetter: PropTypes.func
-};
+  static defaultProps = {
+    valueGetter: value => value
+  };
 
-JSONValueNode.defaultProps = {
-  valueGetter: value => value
-};
+  state = { hover: false };
 
-export default JSONValueNode;
+  render() {
+    const { hover } = this.state;
+    const {
+      nodeType, styling, labelRenderer, keyPath, valueRenderer, value, valueGetter
+    } = this.props;
+    return (
+      <li
+        {...styling('value', nodeType, keyPath, hover)}
+        onMouseOver={this.handleMouseOver}
+        onMouseOut={this.handleMouseOut}
+      >
+        <label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
+          {labelRenderer(keyPath, nodeType, false, false)}
+        </label>
+        <span {...styling('valueText', nodeType, keyPath)}>
+          {valueRenderer(valueGetter(value), value, ...keyPath)}
+        </span>
+      </li>
+    );
+  }
+
+  handleMouseOver = (e) => {
+    e.stopPropagation();
+    this.setState({ hover: true });
+  };
+
+  handleMouseOut = () => this.setState({ hover: false });
+}