Provide full JSON key path in labelRenderer (in reverse order)

Author: alexkuz

src/JSONArrayNode.js

@@ -25,7 +25,8 @@ function getChildNodes({
   styles,
   theme,
   valueRenderer,
-  allExpanded
+  allExpanded,
+  keyPath
 }) {
   const childNodes = [];
   data.forEach((value, key) => {
@@ -36,7 +37,7 @@ function getChildNodes({
 
     const node = grabNode({
       getItemString,
-      key,
+      keyPath: [key, ...keyPath],
       labelRenderer,
       previousData: previousDataValue,
       renderItemString,

src/JSONIterableNode.js

@@ -33,7 +33,8 @@ function getChildNodes({
   styles,
   theme,
   valueRenderer,
-  allExpanded
+  allExpanded,
+  keyPath
 }) {
   const childNodes = [];
   for (const entry of data) {
@@ -53,7 +54,7 @@ function getChildNodes({
 
     const node = grabNode({
       getItemString,
-      key,
+      keyPath: [key, ...keyPath],
       labelRenderer,
       previousData: previousDataValue,
       styles,

src/JSONNestedNode.js

@@ -98,7 +98,7 @@ export default class JSONNestedNode extends React.Component {
           color: this.props.theme.base0D,
           ...this.props.styles.getLabelStyle(this.props.nodeType, this.state.expanded)
         }} onClick={::this.handleClick}>
-          {this.props.labelRenderer(this.props.keyName)}:
+          {this.props.labelRenderer(...this.props.keyPath)}:
         </label>
         <span style={{
           ...spanStyle,

src/JSONObjectNode.js

@@ -26,7 +26,8 @@ export function getChildNodes({
   styles,
   theme,
   valueRenderer,
-  allExpanded
+  allExpanded,
+  keyPath
 }) {
   const childNodes = [];
   for (let key in data) {
@@ -38,7 +39,7 @@ export function getChildNodes({
 
       const node = grabNode({
         getItemString,
-        key,
+        keyPath: [key, ...keyPath],
         labelRenderer,
         previousData: previousDataValue,
         renderItemString,

src/JSONValueNode.js

@@ -42,7 +42,7 @@ export default class JSONValueNode extends React.Component {
           color: this.props.theme.base0D,
           ...this.props.styles.getLabelStyle(this.props.nodeType, true)
         }}>
-          {this.props.labelRenderer(this.props.keyName)}:
+          {this.props.labelRenderer(...this.props.keyPath)}:
         </label>
         <span style={{
           color: this.props.valueColor,

src/grab-node.js

@@ -9,7 +9,7 @@ export default function({
   getItemString,
   initialExpanded = false,
   allExpanded,
-  key,
+  keyPath,
   labelRenderer,
   previousData,
   styles,
@@ -22,8 +22,8 @@ export default function({
   const simpleNodeProps = {
     getItemString,
     initialExpanded,
-    key,
-    keyName: key,
+    key: keyPath[0],
+    keyPath,
     labelRenderer,
     nodeType,
     previousData,
@@ -38,7 +38,7 @@ export default function({
     data: value,
     initialExpanded,
     allExpanded,
-    keyName: key
+    keyPath
   };
 
   switch (nodeType) {

src/index.js

@@ -39,7 +39,7 @@ export default class JSONTree extends React.Component {
     expandRoot: true,
     expandAll: false,
     hideRoot: false,
-    keyName: 'root',
+    keyPath: ['root'],
     theme: solarized,
     getArrowStyle: getEmptyStyle,
     getListStyle: getEmptyStyle,
@@ -71,19 +71,19 @@ export default class JSONTree extends React.Component {
       getItemString,
       labelRenderer,
       valueRenderer,
-      keyName: key,
+      keyPath,
       previousData,
       theme
     } = this.props;
 
-    var nodeToRender;
+    let nodeToRender;
 
-    if (!this.props.hideRoot) {       
+    if (!this.props.hideRoot) {
       nodeToRender = grabNode({
         getItemString,
         initialExpanded,
         allExpanded,
-        key,
+        keyPath,
         previousData,
         styles: getStyles,
         theme,
@@ -97,10 +97,11 @@ export default class JSONTree extends React.Component {
         getItemString,
         labelRenderer,
         previousData,
-        styles:getStyles,
+        styles: getStyles,
         theme,
         valueRenderer,
-        allExpanded
+        allExpanded,
+        keyPath: []
       });
     }