Adds notification handler for node expansion

README.md

@@ -134,6 +134,9 @@ For `labelRenderer`, you can provide a full path - [see this PR](https://github.
 - `shouldExpandNode: function(keyName, data, level)` - determines if node should be expanded (root is expanded by default)
 - `hideRoot: Boolean` - if `true`, the root node is hidden.
 - `sortObjectKeys: Boolean | function(a, b)` - sorts object keys with compare function (optional). Isn't applied to iterable maps like `Immutable.Map`.
+- `onNodeExpansionChanging: function(keyName, data, level, expanded)` - invoked when a node is expanding or collapsing.
+- `onNodeExpansionChanged: function(keyName, data, level, expanded)` - invoked when a node is expanded or collapsed.
+- `isNodeExpansionDynamic: Boolean` - if `true`, `shouldExpandNode` will be called each render to determine the expansion state of a node, rather than just once during mount
 
 ### Credits
 

examples/src/App.js

@@ -158,6 +158,24 @@ const App = () => (
  shouldExpandNode={() => false}
  />
  </div>
+ <p>Expansion Notifications</p>
+ <div>
+ <JSONTree
+ data={data}
+ theme={theme}
+ shouldExpandNode={() => false}
+ onNodeExpansionChanging={
+ (keyPath, data, level, expanded) => {
+ console.log(`Node ${expanded ? 'expanding' : 'collapsing'}: ${keyPath}`);
+ }
+ }
+ onNodeExpansionChanged={
+ (keyPath, data, level, expanded) => {
+ console.log(`Node ${expanded ? 'expanded' : 'collapsed'}: ${keyPath}`);
+ }
+ }
+ />
+ </div>
  </div>
 );
 

package.json

@@ -24,7 +24,8 @@
  "author": "Shu Uesugi <shu@chibicode.com> (http://github.com/chibicode)",
  "contributors": [
  "Dave Vedder <veddermatic@gmail.com> (http://www.eskimospy.com/)",
- "Daniele Zannotti <dzannotti@me.com> (http://www.github.com/dzannotti)"
+ "Daniele Zannotti <dzannotti@me.com> (http://www.github.com/dzannotti)",
+ "Phillip Hoff <phillip@orst.edu> (http://www.github.com/philliphoff)"
  ],
  "license": "MIT",
  "bugs": {

src/JSONNestedNode.js

@@ -76,7 +76,10 @@ export default class JSONNestedNode extends React.Component {
  level: PropTypes.number.isRequired,
  sortObjectKeys: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
  isCircular: PropTypes.bool,
- expandable: PropTypes.bool
+ expandable: PropTypes.bool,
+ onNodeExpansionChanging: PropTypes.func,
+ onNodeExpansionChanged: PropTypes.func,
+ isNodeExpansionDynamic: PropTypes.bool
  };
 
  static defaultProps = {
@@ -98,7 +101,7 @@ export default class JSONNestedNode extends React.Component {
  };
  }
 
- shouldComponentUpdate = shouldPureComponentUpdate;
+ shouldComponentUpdate = this.props.isNodeExpansionDynamic ? undefined : shouldPureComponentUpdate;
 
  render() {
  const {
@@ -114,7 +117,13 @@ export default class JSONNestedNode extends React.Component {
  labelRenderer,
  expandable
  } = this.props;
- const expanded = this.state.expanded;
+ const expanded =
+ this.props.isNodeExpansionDynamic
+ && this.props.shouldExpandNode
+ && !this.props.isCircular
+ ? this.props.shouldExpandNode(this.props.keyPath, this.props.data, this.props.level)
+ : this.state.expanded;
+
  const renderedChildren = expanded || (hideRoot && this.props.level === 0) ?
  renderChildNodes({ ...this.props, level: this.props.level + 1 }) : null;
 
@@ -131,6 +140,30 @@ export default class JSONNestedNode extends React.Component {
  );
  const stylingArgs = [keyPath, nodeType, expanded, expandable];
 
+ const handleClick = () => {
+ const newState = !expanded;
+
+ if (this.props.onNodeExpansionChanging) {
+ this.props.onNodeExpansionChanging(
+ this.props.keyPath,
+ this.props.data,
+ this.props.level,
+ newState);
+ }
+
+ this.setState(
+ { expanded: newState },
+ () => {
+ if (this.props.onNodeExpansionChanged) {
+ this.props.onNodeExpansionChanged(
+ this.props.keyPath,
+ this.props.data,
+ this.props.level,
+ this.state.expanded);
+ }
+ });
+ };
+
  return hideRoot ? (
  <li {...styling('rootNode', ...stylingArgs)}>
  <ul {...styling('rootNodeChildren', ...stylingArgs)}>
@@ -144,18 +177,18 @@ export default class JSONNestedNode extends React.Component {
  styling={styling}
  nodeType={nodeType}
  expanded={expanded}
- onClick={this.handleClick}
+ onClick={handleClick}
  />
  }
  <label
  {...styling(['label', 'nestedNodeLabel'], ...stylingArgs)}
- onClick={expandable && this.handleClick}
+ onClick={expandable && handleClick}
  >
  {labelRenderer(...stylingArgs)}
  </label>
  <span
  {...styling('nestedNodeItemString', ...stylingArgs)}
- onClick={expandable && this.handleClick}
+ onClick={expandable && handleClick}
  >
  {renderedItemString}
  </span>
@@ -165,6 +198,4 @@ export default class JSONNestedNode extends React.Component {
  </li>
  );
  }
-
- handleClick = () => this.setState({ expanded: !this.state.expanded });
 }