From b03dec63f13a173089b8635671afce553c619372 Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Mon, 7 Nov 2022 09:39:21 +0100
Subject: [PATCH 1/2] Add flag to hide "Insert new object" and add parameter to
 only show children up to a specified generation.

---
 package-lock.json |  2 +-
 src/Editor.js     | 16 +++++++++-------
 src/JsonView.js   | 15 +++++++++------
 src/index.js      |  4 ++--
 4 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 600c1ab..82803bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-jsondata-editor",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/Editor.js b/src/Editor.js
index a4be2ea..0d642ea 100644
--- a/src/Editor.js
+++ b/src/Editor.js
@@ -19,7 +19,7 @@ import ModalPrimitive from "./ModalPrimitive";
  * @returns {JSX.Element}
  *
  */
-export default function Editor({input, jsonBoxRef, onChange}) {
+export default function Editor({input, jsonBoxRef, onChange, hideInsertObjectButton, expandToGeneration}) {
 
     const emptyValues = {
             path : undefined,
@@ -236,12 +236,13 @@ export default function Editor({input, jsonBoxRef, onChange}) {
             }
 
             <div key={"jsonBody"} className={styles.JsonViewOutput}>
-
-                <div className={styles.insertBanner} style={{backgroundColor: focusOnBanner ? userStyle.banner.hoverColor : userStyle.themes.color}}
-                     onMouseOver={()=>{setFocusOnBanner(true)}} onMouseLeave={()=>{setFocusOnBanner(false)}} onClick={()=>{
-                         jsonData !== undefined ? createModal("") : setSelectType(true)}}>
-                    <span className={styles.bannerSpan} style={{color: userStyle.banner.fontColor, font: userStyle.banner.font}}> + Insert Object</span>
-                </div>
+                {!hideInsertObjectButton &&
+                  <div className={styles.insertBanner} style={{backgroundColor: focusOnBanner ? userStyle.banner.hoverColor : userStyle.themes.color}}
+                      onMouseOver={()=>{setFocusOnBanner(true)}} onMouseLeave={()=>{setFocusOnBanner(false)}} onClick={()=>{
+                          jsonData !== undefined ? createModal("") : setSelectType(true)}}>
+                      <span className={styles.bannerSpan} style={{color: userStyle.banner.fontColor, font: userStyle.banner.font}}> + Insert Object</span>
+                  </div>
+                }
                 <div className={styles.jsonListOutput} ref={jsonListOutput}>
                     <JsonView key={"DisplayJson"}
                               input={jsonData}
@@ -250,6 +251,7 @@ export default function Editor({input, jsonBoxRef, onChange}) {
                               deleteNode={deleteNode}
                               setPrimitive={setPrimitive}
                               createModal={createModal}
+                              expandToGeneration={expandToGeneration}
                               />
                 </div>
             </div>
diff --git a/src/JsonView.js b/src/JsonView.js
index 2a8526d..b805381 100644
--- a/src/JsonView.js
+++ b/src/JsonView.js
@@ -18,6 +18,7 @@ import UserContext from "./UserContext";
  * @param createModal creates edit modal component
  * @param indent indentation
  * @param needLeaf indicates "", [] or {}
+ * @param expandToGeneration Show content if the child's generation index is > expandToGeneration
 
  * @returns {JSX.Element|[]}
  */
@@ -31,6 +32,7 @@ export default function JsonView(
         createModal,
         indent = 1,
         needLeaf = true,
+        expandToGeneration = undefined
     }) {
 
     const typeOfInput = TypeOfValue(input)
@@ -59,7 +61,7 @@ export default function JsonView(
                 <div className={styles.dataNode} onClick={()=>{ changePrimitive(input)}}>
                     <div className={styles.needLeaf} style={{backgroundColor: focusOnLine ? userStyle.themes.hoverColor : ''}} onMouseOver={()=>{setFocusOnLine(true)}} onMouseLeave={()=>{setFocusOnLine(false)}}>
                         <div>
-                            <JsonView jsonPath={jsonPath} input={input} indent={indent} needLeaf={false}/>
+                            <JsonView jsonPath={jsonPath} input={input} indent={indent} needLeaf={false} expandToGeneration={expandToGeneration} />
                         </div>
                         {focusOnLine &&
                         <div className={styles.rightContainer}
@@ -158,7 +160,7 @@ export default function JsonView(
                 <ViewNode key={jsonPath + "/" +key} jsonPath={jsonPath} field={key} value={value}
                           indent={indent} isInArray={input instanceof Array}
                           deleteNode={deleteNode} setPrimitive={setPrimitive} createModal={createModal} createEditModal={createEditModal}
-                          jsonListOutput={jsonListOutput}/>
+                          jsonListOutput={jsonListOutput} expandToGeneration={expandToGeneration}/>
             )
         })
     )
@@ -178,12 +180,13 @@ export default function JsonView(
  * @param setPrimitive changes a primitive value
  * @param createModal creates edit modal component
  * @param createEditModal saves information with current position node of for modal editor when a user clicks add or edit button
+ * @param expandToGeneration Show content if the child's generation index is > expandToGeneration
  * @returns {JSX.Element}
  *
  */
-function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, deleteNode, setPrimitive, createModal, createEditModal}) {
+function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, deleteNode, setPrimitive, createModal, createEditModal, expandToGeneration}) {
 
-    const [showContent, setShowContent] = useState(true)
+    const [showContent, setShowContent] = useState(expandToGeneration === undefined ? true : (jsonPath.match(/\//g) || []).length <= expandToGeneration)
     const [focusOnLine, setFocusOnLine] = useState(false)
     const isList = value instanceof Object
     // current clickNode position
@@ -248,7 +251,7 @@ function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, d
                     }
 
                     {
-                        !isList && <JsonView input={value} needLeaf={false}/>
+                        !isList && <JsonView input={value} needLeaf={false} expandToGeneration={expandToGeneration} />
                     }
                 </div>
 
@@ -258,7 +261,7 @@ function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, d
                 isList && showContent &&
                 <JsonView jsonPath={jsonPath + '/' + field} input={value} indent={indent + 1}
                              deleteNode={deleteNode} setPrimitive={setPrimitive} needLeaf={false}
-                             jsonListOutput={jsonListOutput} createModal={createModal}/>
+                             jsonListOutput={jsonListOutput} createModal={createModal} expandToGeneration={expandToGeneration}/>
             }
 
         </div>
diff --git a/src/index.js b/src/index.js
index e66ed38..78b5a76 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,7 +13,7 @@ import UserContext from "./UserContext"
  * @returns {JSX.Element}
  *
  */
-function JsonEditor({jsonObject, onChange, theme, bannerStyle, keyStyle, valueStyle, buttonStyle}) {
+function JsonEditor({jsonObject, onChange, theme, hideInsertObjectButton, expandToGeneration, bannerStyle, keyStyle, valueStyle, buttonStyle}) {
 
     const jsonBoxRef = useRef()
     const defaultStyle = useContext(UserContext)
@@ -27,7 +27,7 @@ function JsonEditor({jsonObject, onChange, theme, bannerStyle, keyStyle, valueSt
             buttons: buttonStyle === undefined ? defaultStyle.buttons : buttonStyle
         }}>
             <div className={styles.container} ref={jsonBoxRef}>
-                <Editor input={jsonObject} jsonBoxRef={jsonBoxRef} onChange={onChange}/>
+                <Editor input={jsonObject} jsonBoxRef={jsonBoxRef} onChange={onChange} hideInsertObjectButton={hideInsertObjectButton} expandToGeneration={expandToGeneration} />
             </div>
         </UserContext.Provider>
     )

From 1c74138f9231b4ff6024717b63d5030ed2cfc60f Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Fri, 11 Nov 2022 16:26:34 +0100
Subject: [PATCH 2/2] Add readonly flag to turn off editing features.

---
 src/Editor.js   |  5 +++--
 src/JsonView.js | 27 +++++++++++++++++----------
 src/index.js    |  4 ++--
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/Editor.js b/src/Editor.js
index 0d642ea..004046f 100644
--- a/src/Editor.js
+++ b/src/Editor.js
@@ -19,7 +19,7 @@ import ModalPrimitive from "./ModalPrimitive";
  * @returns {JSX.Element}
  *
  */
-export default function Editor({input, jsonBoxRef, onChange, hideInsertObjectButton, expandToGeneration}) {
+export default function Editor({input, jsonBoxRef, onChange, hideInsertObjectButton, expandToGeneration, isReadOnly}) {
 
     const emptyValues = {
             path : undefined,
@@ -236,7 +236,7 @@ export default function Editor({input, jsonBoxRef, onChange, hideInsertObjectBut
             }
 
             <div key={"jsonBody"} className={styles.JsonViewOutput}>
-                {!hideInsertObjectButton &&
+                {!hideInsertObjectButton && !isReadOnly &&
                   <div className={styles.insertBanner} style={{backgroundColor: focusOnBanner ? userStyle.banner.hoverColor : userStyle.themes.color}}
                       onMouseOver={()=>{setFocusOnBanner(true)}} onMouseLeave={()=>{setFocusOnBanner(false)}} onClick={()=>{
                           jsonData !== undefined ? createModal("") : setSelectType(true)}}>
@@ -252,6 +252,7 @@ export default function Editor({input, jsonBoxRef, onChange, hideInsertObjectBut
                               setPrimitive={setPrimitive}
                               createModal={createModal}
                               expandToGeneration={expandToGeneration}
+                              isReadOnly={isReadOnly}
                               />
                 </div>
             </div>
diff --git a/src/JsonView.js b/src/JsonView.js
index b805381..1c47886 100644
--- a/src/JsonView.js
+++ b/src/JsonView.js
@@ -19,6 +19,7 @@ import UserContext from "./UserContext";
  * @param indent indentation
  * @param needLeaf indicates "", [] or {}
  * @param expandToGeneration Show content if the child's generation index is > expandToGeneration
+ * @param isReadOnly true: do not show overlay to edit and delete
 
  * @returns {JSX.Element|[]}
  */
@@ -32,7 +33,8 @@ export default function JsonView(
         createModal,
         indent = 1,
         needLeaf = true,
-        expandToGeneration = undefined
+        expandToGeneration = undefined,
+        isReadOnly = false
     }) {
 
     const typeOfInput = TypeOfValue(input)
@@ -61,9 +63,9 @@ export default function JsonView(
                 <div className={styles.dataNode} onClick={()=>{ changePrimitive(input)}}>
                     <div className={styles.needLeaf} style={{backgroundColor: focusOnLine ? userStyle.themes.hoverColor : ''}} onMouseOver={()=>{setFocusOnLine(true)}} onMouseLeave={()=>{setFocusOnLine(false)}}>
                         <div>
-                            <JsonView jsonPath={jsonPath} input={input} indent={indent} needLeaf={false} expandToGeneration={expandToGeneration} />
+                            <JsonView jsonPath={jsonPath} input={input} indent={indent} needLeaf={false} expandToGeneration={expandToGeneration} isReadOnly={isReadOnly} />
                         </div>
-                        {focusOnLine &&
+                        {!isReadOnly && focusOnLine &&
                         <div className={styles.rightContainer}
                              style={{backgroundImage: 'linear-gradient(to right, transparent 0, ' + userStyle.themes.hoverColor + ' 0.5em)'}}>
                             <div style={{
@@ -125,7 +127,7 @@ export default function JsonView(
                                 <span>{JSON.stringify(input)}</span>
                             </div>
                         </div>
-                        { focusOnLine &&
+                        {!isReadOnly && focusOnLine &&
                         <div className={styles.rightContainer}
                              style={{ backgroundImage: 'linear-gradient(to right, transparent 0, ' + userStyle.themes.hoverColor + ' 0.5em)'}}>
                             <div style={{
@@ -160,7 +162,7 @@ export default function JsonView(
                 <ViewNode key={jsonPath + "/" +key} jsonPath={jsonPath} field={key} value={value}
                           indent={indent} isInArray={input instanceof Array}
                           deleteNode={deleteNode} setPrimitive={setPrimitive} createModal={createModal} createEditModal={createEditModal}
-                          jsonListOutput={jsonListOutput} expandToGeneration={expandToGeneration}/>
+                          jsonListOutput={jsonListOutput} expandToGeneration={expandToGeneration} isReadOnly={isReadOnly}/>
             )
         })
     )
@@ -181,10 +183,11 @@ export default function JsonView(
  * @param createModal creates edit modal component
  * @param createEditModal saves information with current position node of for modal editor when a user clicks add or edit button
  * @param expandToGeneration Show content if the child's generation index is > expandToGeneration
+ * @param isReadOnly true: do not show edit && delete buttons
  * @returns {JSX.Element}
  *
  */
-function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, deleteNode, setPrimitive, createModal, createEditModal, expandToGeneration}) {
+function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, deleteNode, setPrimitive, createModal, createEditModal, expandToGeneration, isReadOnly}) {
 
     const [showContent, setShowContent] = useState(expandToGeneration === undefined ? true : (jsonPath.match(/\//g) || []).length <= expandToGeneration)
     const [focusOnLine, setFocusOnLine] = useState(false)
@@ -197,11 +200,15 @@ function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, d
         <div className={styles.dataContainer}>
             <div className={styles.dataNode} ref={inputRef}>
                 <div className={styles.clickNode}
-                     style={{backgroundColor: focusOnLine ? userStyle.themes.hoverColor : ''}} onMouseOver={()=>{setFocusOnLine(true)}} onMouseLeave={()=>{setFocusOnLine(false)}}
+                     style={{backgroundColor: focusOnLine ? userStyle.themes.hoverColor : '', cursor: isReadOnly ? 'default': 'pointer'}} onMouseOver={()=>{setFocusOnLine(!isReadOnly && true)}} onMouseLeave={()=>{setFocusOnLine(false)}}
                      onClick={(e)=>{
                     e.stopPropagation();
                     e.preventDefault();
 
+                    if (isReadOnly) {
+                      return;
+                    }
+
                     if(isList) {
                         setShowContent(!showContent)
                     }else{
@@ -227,7 +234,7 @@ function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, d
                         </div>
                     </div>
 
-                    { focusOnLine &&
+                    { !isReadOnly && focusOnLine &&
                     <div className={styles.rightContainer} style={{ backgroundImage: 'linear-gradient(to right, transparent 0, ' + userStyle.themes.hoverColor  + ' 0.5em)'}}>
                         <div style={{font: userStyle.values.font, fontStyle:"italic", color:userStyle.themes.color}}><TypeToString input={value}/></div>
                         <div className={styles.rightButton}>
@@ -251,7 +258,7 @@ function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, d
                     }
 
                     {
-                        !isList && <JsonView input={value} needLeaf={false} expandToGeneration={expandToGeneration} />
+                        !isList && <JsonView input={value} needLeaf={false} expandToGeneration={expandToGeneration} isReadOnly={isReadOnly} />
                     }
                 </div>
 
@@ -261,7 +268,7 @@ function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, d
                 isList && showContent &&
                 <JsonView jsonPath={jsonPath + '/' + field} input={value} indent={indent + 1}
                              deleteNode={deleteNode} setPrimitive={setPrimitive} needLeaf={false}
-                             jsonListOutput={jsonListOutput} createModal={createModal} expandToGeneration={expandToGeneration}/>
+                             jsonListOutput={jsonListOutput} createModal={createModal} expandToGeneration={expandToGeneration} isReadOnly={isReadOnly} />
             }
 
         </div>
diff --git a/src/index.js b/src/index.js
index 78b5a76..0827992 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,7 +13,7 @@ import UserContext from "./UserContext"
  * @returns {JSX.Element}
  *
  */
-function JsonEditor({jsonObject, onChange, theme, hideInsertObjectButton, expandToGeneration, bannerStyle, keyStyle, valueStyle, buttonStyle}) {
+function JsonEditor({jsonObject, onChange, theme, hideInsertObjectButton, expandToGeneration, isReadOnly, bannerStyle, keyStyle, valueStyle, buttonStyle}) {
 
     const jsonBoxRef = useRef()
     const defaultStyle = useContext(UserContext)
@@ -27,7 +27,7 @@ function JsonEditor({jsonObject, onChange, theme, hideInsertObjectButton, expand
             buttons: buttonStyle === undefined ? defaultStyle.buttons : buttonStyle
         }}>
             <div className={styles.container} ref={jsonBoxRef}>
-                <Editor input={jsonObject} jsonBoxRef={jsonBoxRef} onChange={onChange} hideInsertObjectButton={hideInsertObjectButton} expandToGeneration={expandToGeneration} />
+                <Editor input={jsonObject} jsonBoxRef={jsonBoxRef} onChange={onChange} hideInsertObjectButton={hideInsertObjectButton} expandToGeneration={expandToGeneration} isReadOnly={isReadOnly} />
             </div>
         </UserContext.Provider>
     )