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..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}) { +export default function Editor({input, jsonBoxRef, onChange, hideInsertObjectButton, expandToGeneration, isReadOnly}) { const emptyValues = { path : undefined, @@ -236,12 +236,13 @@ export default function Editor({input, jsonBoxRef, onChange}) { }
- -
{setFocusOnBanner(true)}} onMouseLeave={()=>{setFocusOnBanner(false)}} onClick={()=>{ - jsonData !== undefined ? createModal("") : setSelectType(true)}}> - + Insert Object -
+ {!hideInsertObjectButton && !isReadOnly && +
{setFocusOnBanner(true)}} onMouseLeave={()=>{setFocusOnBanner(false)}} onClick={()=>{ + jsonData !== undefined ? createModal("") : setSelectType(true)}}> + + Insert Object +
+ }
diff --git a/src/JsonView.js b/src/JsonView.js index 2a8526d..1c47886 100644 --- a/src/JsonView.js +++ b/src/JsonView.js @@ -18,6 +18,8 @@ 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 + * @param isReadOnly true: do not show overlay to edit and delete * @returns {JSX.Element|[]} */ @@ -31,6 +33,8 @@ export default function JsonView( createModal, indent = 1, needLeaf = true, + expandToGeneration = undefined, + isReadOnly = false }) { const typeOfInput = TypeOfValue(input) @@ -59,9 +63,9 @@ export default function JsonView(
{ changePrimitive(input)}}>
{setFocusOnLine(true)}} onMouseLeave={()=>{setFocusOnLine(false)}}>
- +
- {focusOnLine && + {!isReadOnly && focusOnLine &&
{JSON.stringify(input)}
- { focusOnLine && + {!isReadOnly && focusOnLine &&
+ jsonListOutput={jsonListOutput} expandToGeneration={expandToGeneration} isReadOnly={isReadOnly}/> ) }) ) @@ -178,12 +182,14 @@ 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 + * @param isReadOnly true: do not show edit && delete buttons * @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, isReadOnly}) { - 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 @@ -194,11 +200,15 @@ function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, d
{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{ @@ -224,7 +234,7 @@ function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, d
- { focusOnLine && + { !isReadOnly && focusOnLine &&
@@ -248,7 +258,7 @@ function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, d } { - !isList && + !isList && }
@@ -258,7 +268,7 @@ function ViewNode({ jsonPath, field, value, jsonListOutput, indent, isInArray, d isList && showContent && + jsonListOutput={jsonListOutput} createModal={createModal} expandToGeneration={expandToGeneration} isReadOnly={isReadOnly} /> }
diff --git a/src/index.js b/src/index.js index e66ed38..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, 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, bannerStyle, keyStyle, valueSt buttons: buttonStyle === undefined ? defaultStyle.buttons : buttonStyle }}>
- +
)