From 85b4b0fb04b1d6d95054d5073fa17fa61efc0df3 Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Tue, 22 Dec 2020 16:15:29 +0000
Subject: [PATCH] feat(react-json-tree): Add keyPath to getItemString (#694)

---
 packages/react-json-tree/README.md              | 4 ++--
 packages/react-json-tree/src/JSONNestedNode.tsx | 3 ++-
 packages/react-json-tree/src/types.ts           | 3 ++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/react-json-tree/README.md b/packages/react-json-tree/README.md
index 28adfac8..efab891b 100644
--- a/packages/react-json-tree/README.md
+++ b/packages/react-json-tree/README.md
@@ -102,14 +102,14 @@ You can pass `getItemString` to customize the way arrays, objects, and iterable
 By default, it'll be:
 
 ```jsx
-<JSONTree getItemString={(type, data, itemType, itemString)
+<JSONTree getItemString={(type, data, itemType, itemString, keyPath)
   => <span>{itemType} {itemString}</span>}
 ```
 
 But if you pass the following:
 
 ```jsx
-const getItemString = (type, data, itemType, itemString)
+const getItemString = (type, data, itemType, itemString, keyPath)
   => (<span> // {type}</span>);
 ```
 
diff --git a/packages/react-json-tree/src/JSONNestedNode.tsx b/packages/react-json-tree/src/JSONNestedNode.tsx
index e8dbb261..9df427e8 100644
--- a/packages/react-json-tree/src/JSONNestedNode.tsx
+++ b/packages/react-json-tree/src/JSONNestedNode.tsx
@@ -193,7 +193,8 @@ export default class JSONNestedNode extends React.Component<Props, State> {
       nodeType,
       data,
       itemType,
-      createItemString(data, collectionLimit)
+      createItemString(data, collectionLimit),
+      keyPath
     );
     const stylingArgs = [keyPath, nodeType, expanded, expandable] as const;
 
diff --git a/packages/react-json-tree/src/types.ts b/packages/react-json-tree/src/types.ts
index 79cc7d88..5e84624c 100644
--- a/packages/react-json-tree/src/types.ts
+++ b/packages/react-json-tree/src/types.ts
@@ -35,7 +35,8 @@ interface JSONNestedNodeCircularPropsPassedThroughJSONTree {
     nodeType: string,
     data: any,
     itemType: React.ReactNode,
-    itemString: string
+    itemString: string,
+    keyPath: (string | number)[]
   ) => React.ReactNode;
   postprocessValue: (value: any) => any;
   isCustomNode: (value: any) => boolean;