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