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 });
+}