From 6a37b4526a7f9d63c2eaf5d2e17363ffdd2c75de Mon Sep 17 00:00:00 2001 From: Mike Lin Date: Thu, 28 Jul 2016 22:31:00 -0700 Subject: [PATCH 1/5] Allow overriding of root styling via prop --- src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index d1152cf..dbcd0e4 100644 --- a/src/index.js +++ b/src/index.js @@ -88,7 +88,8 @@ export default class JSONTree extends React.Component { ...rest } = this.props; - const styling = createStylingFromTheme(checkLegacyTheming(theme, rest), invertTheme); + const styling = rest.styling || + createStylingFromTheme(checkLegacyTheming(theme, rest), invertTheme); return ( ) : ( -
  • +
  • {expandable && this.setState({ expanded: !this.state.expanded }); + + handleMouseOver(e) { + e.stopPropagation(); + this.setState({ hover: true }); + } + + handleMouseOut() { + this.setState({ hover: false }); + } } diff --git a/src/JSONValueNode.js b/src/JSONValueNode.js index b51055b..a0d2175 100644 --- a/src/JSONValueNode.js +++ b/src/JSONValueNode.js @@ -4,41 +4,57 @@ import React, { PropTypes } from 'react'; * Renders simple values (eg. strings, numbers, booleans, etc) */ -const JSONValueNode = ({ - nodeType, - styling, - labelRenderer, - keyPath, - valueRenderer, - value, - valueGetter -}) => ( -
  • - - - {valueRenderer(valueGetter(value), value, ...keyPath)} - -
    • -); +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 -}; + constructor() { + super(); + this.state = { hover: false }; + this.handleMouseOver = this.handleMouseOver.bind(this); + this.handleMouseOut = this.handleMouseOut.bind(this); + } -export default JSONValueNode; + render() { + const { hover } = this.state; + const { + nodeType, styling, labelRenderer, keyPath, valueRenderer, value, valueGetter + } = this.props; + return ( +
  • + + + {valueRenderer(valueGetter(value), value, ...keyPath)} + +
    • + ); + } + + handleMouseOver(e) { + e.stopPropagation(); + this.setState({ hover: true }); + } + + handleMouseOut() { + this.setState({ hover: false }); + } +} From 7e1af6c7ba5853340b37f67678f30b7b11f68888 Mon Sep 17 00:00:00 2001 From: Mike Lin Date: Fri, 29 Jul 2016 13:58:57 -0700 Subject: [PATCH 4/5] remove react-dom peer-dep, remove getting styling from props, make mouse handlers class attributes --- package.json | 3 +-- src/JSONNestedNode.js | 11 +++-------- src/JSONValueNode.js | 10 +++------- src/index.js | 3 +-- 4 files changed, 8 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 5f2b5b7..b53cd2c 100644 --- a/package.json +++ b/package.json @@ -58,8 +58,7 @@ "rimraf": "^2.5.2" }, "peerDependencies": { - "react": "^0.14.0 || ^15.0.0-0", - "react-dom": "^0.14.0 || ^15.0.0-0" + "react": "^0.14.0 || ^15.0.0-0" }, "dependencies": { "babel-plugin-transform-runtime": "^6.7.5", diff --git a/src/JSONNestedNode.js b/src/JSONNestedNode.js index 434153f..3e9b556 100644 --- a/src/JSONNestedNode.js +++ b/src/JSONNestedNode.js @@ -93,9 +93,6 @@ export default class JSONNestedNode extends React.Component { const expanded = props.shouldExpandNode && !props.isCircular ? props.shouldExpandNode(props.keyPath, props.data, props.level) : false; - this.handleMouseOver = this.handleMouseOver.bind(this); - this.handleMouseOut = this.handleMouseOut.bind(this); - this.state = { expanded, createdChildNodes: false, @@ -177,12 +174,10 @@ export default class JSONNestedNode extends React.Component { handleClick = () => this.setState({ expanded: !this.state.expanded }); - handleMouseOver(e) { + handleMouseOver = (e) => { e.stopPropagation(); this.setState({ hover: true }); - } + }; - handleMouseOut() { - this.setState({ hover: false }); - } + handleMouseOut = () => this.setState({ hover: false }); } diff --git a/src/JSONValueNode.js b/src/JSONValueNode.js index a0d2175..9a8cc35 100644 --- a/src/JSONValueNode.js +++ b/src/JSONValueNode.js @@ -24,8 +24,6 @@ export default class JSONValueNode extends React.Component { constructor() { super(); this.state = { hover: false }; - this.handleMouseOver = this.handleMouseOver.bind(this); - this.handleMouseOut = this.handleMouseOut.bind(this); } render() { @@ -49,12 +47,10 @@ export default class JSONValueNode extends React.Component { ); } - handleMouseOver(e) { + handleMouseOver = (e) => { e.stopPropagation(); this.setState({ hover: true }); - } + }; - handleMouseOut() { - this.setState({ hover: false }); - } + handleMouseOut = () => this.setState({ hover: false }); } diff --git a/src/index.js b/src/index.js index dbcd0e4..d1152cf 100644 --- a/src/index.js +++ b/src/index.js @@ -88,8 +88,7 @@ export default class JSONTree extends React.Component { ...rest } = this.props; - const styling = rest.styling || - createStylingFromTheme(checkLegacyTheming(theme, rest), invertTheme); + const styling = createStylingFromTheme(checkLegacyTheming(theme, rest), invertTheme); return (