From 974d94f8b53d90b9d68534f2fe9caf075ae1ddc6 Mon Sep 17 00:00:00 2001
From: Michael Xu <mx2323@gmail.com>
Date: Mon, 30 Sep 2019 20:55:32 +0000
Subject: [PATCH 1/2] put in a line renderer that gives an opportunity to
 customize key/value key /nestedvalue behavior

---
 .../react-json-tree/src/JSONNestedNode.js     | 47 +++++++++++--------
 packages/react-json-tree/src/JSONNode.js      |  3 ++
 packages/react-json-tree/src/JSONValueNode.js | 20 ++++----
 packages/react-json-tree/src/index.js         |  2 +
 4 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/packages/react-json-tree/src/JSONNestedNode.js b/packages/react-json-tree/src/JSONNestedNode.js
index e19aa253..3a0c9073 100644
--- a/packages/react-json-tree/src/JSONNestedNode.js
+++ b/packages/react-json-tree/src/JSONNestedNode.js
@@ -90,6 +90,7 @@ export default class JSONNestedNode extends React.Component {
       PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     ).isRequired,
     labelRenderer: PropTypes.func.isRequired,
+    lineRenderer: PropTypes.func.isRequired,
     shouldExpandNode: PropTypes.func,
     level: PropTypes.number.isRequired,
     sortObjectKeys: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
@@ -140,6 +141,7 @@ export default class JSONNestedNode extends React.Component {
       collectionLimit,
       keyPath,
       labelRenderer,
+      lineRenderer,
       expandable
     } = this.props;
     const { expanded } = this.state;
@@ -161,23 +163,16 @@ export default class JSONNestedNode extends React.Component {
     );
     const stylingArgs = [keyPath, nodeType, expanded, expandable];
 
-    return hideRoot ? (
-      <li {...styling('rootNode', ...stylingArgs)}>
-        <ul {...styling('rootNodeChildren', ...stylingArgs)}>
-          {renderedChildren}
-        </ul>
-      </li>
-    ) : (
-      <li {...styling('nestedNode', ...stylingArgs)}>
-        {expandable && (
-          <JSONArrow
-            styling={styling}
-            nodeType={nodeType}
-            expanded={expanded}
-            onClick={this.handleClick}
-          />
-        )}
-        <label
+    const labelItem = <>
+      {expandable && (
+        <JSONArrow
+          styling={styling}
+          nodeType={nodeType}
+          expanded={expanded}
+          onClick={this.handleClick}
+        />
+      )}
+      <label
           {...styling(['label', 'nestedNodeLabel'], ...stylingArgs)}
           onClick={this.handleClick}
         >
@@ -189,11 +184,25 @@ export default class JSONNestedNode extends React.Component {
         >
           {renderedItemString}
         </span>
-        <ul {...styling('nestedNodeChildren', ...stylingArgs)}>
+        </>
+
+     const valueItem = 
+            <ul {...styling('nestedNodeChildren', ...stylingArgs)}>
+          {renderedChildren}
+        </ul>
+        
+    
+    return hideRoot ? (
+      <li {...styling('rootNode', ...stylingArgs)}>
+        <ul {...styling('rootNodeChildren', ...stylingArgs)}>
           {renderedChildren}
         </ul>
       </li>
-    );
+    ) : 
+      <li  {...styling('nestedNode', ...stylingArgs)}>
+      {lineRenderer(labelItem, valueItem, ...stylingArgs)}
+      </li>
+    ;
   }
 
   handleClick = () => {
diff --git a/packages/react-json-tree/src/JSONNode.js b/packages/react-json-tree/src/JSONNode.js
index bc7a3f1a..26e55a76 100644
--- a/packages/react-json-tree/src/JSONNode.js
+++ b/packages/react-json-tree/src/JSONNode.js
@@ -10,6 +10,7 @@ const JSONNode = ({
   getItemString,
   keyPath,
   labelRenderer,
+  lineRenderer,
   styling,
   value,
   valueRenderer,
@@ -23,6 +24,7 @@ const JSONNode = ({
     key: keyPath[0],
     keyPath,
     labelRenderer,
+    lineRenderer,
     nodeType,
     styling,
     value,
@@ -100,6 +102,7 @@ JSONNode.propTypes = {
     PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   ).isRequired,
   labelRenderer: PropTypes.func.isRequired,
+  lineRenderer: PropTypes.func.isRequired,
   styling: PropTypes.func.isRequired,
   value: PropTypes.any,
   valueRenderer: PropTypes.func.isRequired,
diff --git a/packages/react-json-tree/src/JSONValueNode.js b/packages/react-json-tree/src/JSONValueNode.js
index 1dd7e93b..e2558fe9 100644
--- a/packages/react-json-tree/src/JSONValueNode.js
+++ b/packages/react-json-tree/src/JSONValueNode.js
@@ -9,25 +9,29 @@ const JSONValueNode = ({
   nodeType,
   styling,
   labelRenderer,
+  lineRenderer, 
   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)}>
+}) =>  {
+    const labelItem = (<label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
+     {labelRenderer(keyPath, nodeType, false, false)}
+    </label>)
+    const valueItem = (<span {...styling('valueText', nodeType, keyPath)}>
       {valueRenderer(valueGetter(value), value, ...keyPath)}
-    </span>
+    </span>)
+  return <li {...styling('value', nodeType, keyPath)}>
+  {lineRenderer(labelItem, valueItem, keyPath,nodeType, false, false)}
   </li>
-);
+};
+
 
 JSONValueNode.propTypes = {
   nodeType: PropTypes.string.isRequired,
   styling: PropTypes.func.isRequired,
   labelRenderer: PropTypes.func.isRequired,
+  lineRenderer: PropTypes.func.isRequired,
   keyPath: PropTypes.arrayOf(
     PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   ).isRequired,
diff --git a/packages/react-json-tree/src/index.js b/packages/react-json-tree/src/index.js
index 0fe936bd..99eda439 100644
--- a/packages/react-json-tree/src/index.js
+++ b/packages/react-json-tree/src/index.js
@@ -17,6 +17,7 @@ const defaultItemString = (type, data, itemType, itemString) => (
   </span>
 );
 const defaultLabelRenderer = ([label]) => <span>{label}:</span>;
+const defaultLineRenderer = (labelItem, valueItem, [other]) => <>{labelItem}{valueItem}</>;
 const noCustomNode = () => false;
 
 function checkLegacyTheming(theme, props) {
@@ -98,6 +99,7 @@ export default class JSONTree extends React.Component {
     keyPath: ['root'],
     getItemString: defaultItemString,
     labelRenderer: defaultLabelRenderer,
+    lineRenderer: defaultLineRenderer, 
     valueRenderer: identity,
     postprocessValue: identity,
     isCustomNode: noCustomNode,

From 7d5f885f8a705dfacb80a6a3109d1a301167600a Mon Sep 17 00:00:00 2001
From: Michael Xu <mx2323@gmail.com>
Date: Mon, 30 Sep 2019 21:13:13 +0000
Subject: [PATCH 2/2] add key path to item string

---
 packages/react-json-tree/src/JSONNestedNode.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-json-tree/src/JSONNestedNode.js b/packages/react-json-tree/src/JSONNestedNode.js
index 3a0c9073..ba20242f 100644
--- a/packages/react-json-tree/src/JSONNestedNode.js
+++ b/packages/react-json-tree/src/JSONNestedNode.js
@@ -159,7 +159,8 @@ export default class JSONNestedNode extends React.Component {
       nodeType,
       data,
       itemType,
-      createItemString(data, collectionLimit)
+      createItemString(data, collectionLimit),
+      ...keyPath
     );
     const stylingArgs = [keyPath, nodeType, expanded, expandable];