react-jsondata-editor/lib/index.esm.js

A JSON editor library that displays and manipulates JSON objects

import React,{createContext,useContext,useState,useEffect,useRef}from"react";function _arrayWithHoles(e){if(Array.isArray(e))return e}function _iterableToArrayLimit(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,l=[],o=!0,s=!1;try{for(n=n.call(e);!(o=(a=n.next()).done)&&(l.push(a.value),!t||l.length!==t);o=!0);}catch(e){s=!0,r=e}finally{try{o||null==n.return||n.return()}finally{if(s)throw r}}return l}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Map"===(n="Object"===n&&e.constructor?e.constructor.name:n)||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(e,t):void 0}}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function styleInject(e,t){var n,a=(t=void 0===t?{}:t).insertAt;e&&"undefined"!=typeof document&&(n=document.head||document.getElementsByTagName("head")[0],(t=document.createElement("style")).type="text/css","top"===a&&n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)))}var css_248z='button{\r\n    cursor: pointer;\r\n}\r\n.styles-module_container__1oeWd{\r\n    height: 100%;\r\n    width: 100%;\r\n}\r\n\r\n.styles-module_editorContainer__3rgkN{\r\n    height: 100%;\r\n    width: 100%;\r\n}\r\n\r\n.styles-module_overlay__3xf0A{\r\n    display: inline-block;\r\n    position: fixed;\r\n    z-index: 2;\r\n    background-color: rgba(255,255,255,.2);\r\n}\r\n\r\n.styles-module_JsonViewOutput__dQNvr{\r\n    height: 100%;\r\n}\r\n\r\n.styles-module_insertBanner__3grHO{\r\n    padding: 5px 10px;\r\n    line-height: 30px;\r\n    font-size: 20px;\r\n}\r\n\r\n.styles-module_bannerSpan__iZqd_{\r\n    padding: 2px 5px;\r\n    display: inline-block;\r\n}\r\n\r\n.styles-module_insertBanner__3grHO:hover{\r\n    cursor: pointer;\r\n}\r\n\r\n.styles-module_jsonListOutput__14Vp_{\r\n    overflow-y: auto;\r\n    height: calc(100% - 44px);\r\n}\r\n\r\n.styles-module_nodeEmpty__okGWw{\r\n    display: flex;\r\n    height: 100%;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n.styles-module_indent__3K2Y7{\r\n    padding-left: 0.5em;\r\n}\r\n\r\n.styles-module_dataContainer__3Hb85{\r\n    width: 100%;\r\n}\r\n\r\n.styles-module_dataNode__3NW26{\r\n    position: relative;\r\n    min-height: 24px;\r\n}\r\n\r\n.styles-module_clickNode__D3mL4{\r\n    display: flex;\r\n    padding: 0 0.5em;\r\n    cursor : pointer;\r\n}\r\n\r\n.styles-module_needLeaf__3Pd0A{\r\n    display: flex;\r\n    padding-left: 0.5em;\r\n}\r\n\r\n.styles-module_dataNode__3NW26 .styles-module_needLeaf__3Pd0A:hover{\r\n    cursor: pointer;\r\n}\r\n\r\n.styles-module_rightContainer__2_EGZ{\r\n    display: flex;\r\n    position: absolute;\r\n    right: 0;\r\n    padding: 0 1em;\r\n    margin: 0 auto;\r\n}\r\n\r\n.styles-module_rightButton__2WBAU{\r\n    padding-left: 5px;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.styles-module_emptyObject__1ivRB{\r\n    display: flex;\r\n    padding: 0 0.5em;\r\n}\r\n\r\n.styles-module_keyData__xvrky{\r\n    display: flex;\r\n    white-space: pre-wrap;\r\n    word-break: break-word;\r\n    max-width: 50%;\r\n}\r\n\r\n.styles-module_keySpace__V048A{\r\n    padding: 0 3px;\r\n}\r\n.styles-module_arrayType__2cPVO + span{\r\n\r\n    background-color: #eeeeef;\r\n    border-radius: 2px;\r\n    padding: 0 5px;\r\n    text-align: center;\r\n\r\n}\r\n\r\n.styles-module_valueData__2LUzt{\r\n    display: inline-block;\r\n    margin: auto 0;\r\n    word-break: break-word;\r\n}\r\n\r\n.styles-module_arrow__2qoOo{\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n.styles-module_arrowDown__1CJlj{\r\n    margin-right: 8px;\r\n    border: solid #787878;\r\n    border-width: 0 3px 3px 0;\r\n    display: inline-block;\r\n    padding: 3px;\r\n    transform: rotate(45deg);\r\n    -webkit-transform: rotate(45deg);\r\n    cursor: pointer;\r\n}\r\n\r\n.styles-module_arrowRight__20txf{\r\n    margin-right: 8px;\r\n    border: solid #787878;\r\n    border-width: 0 3px 3px 0;\r\n    display: inline-block;\r\n    padding: 3px;\r\n    transform: rotate(-45deg);\r\n    -webkit-transform: rotate(-45deg);\r\n    cursor: pointer;\r\n}\r\n\r\n.styles-module_modalContainer__3p6-8 {\r\n    margin-left: 1.5em;\r\n    box-sizing: border-box;\r\n    border: 1px solid lightgray;\r\n    border-radius: 6px;\r\n    background-color: white;\r\n    padding: 15px 5px 10px 15px;\r\n    position : absolute;\r\n    z-index: 3;\r\n    min-width: 425px;\r\n\r\n}\r\n\r\n.styles-module_modalContentContainer__1l9jX {\r\n    display: flex;\r\n    margin-bottom: 0.5em;\r\n    min-width: 250px;\r\n}\r\n\r\n\r\n.styles-module_modalLabel__2kqOh{\r\n    display: block;\r\n    font-size: 14px;\r\n    min-height: 20px;\r\n    line-height: 20px;\r\n    color: #797980;\r\n}\r\n\r\n.styles-module_modalSelectLabel__2L-as{\r\n    display: flex;\r\n    justify-content: center;\r\n    font-size: 16px;\r\n    min-height: 20px;\r\n    line-height: 20px;\r\n    margin-top: 10px;\r\n    color: #797980;\r\n}\r\n\r\n.styles-module_modalSelectBtnContainer__GFYsQ{\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 20px 20px 10px 10px ;\r\n}\r\n\r\n.styles-module_modalSelectBtn__1GzsM{\r\n    margin: 0 10px;\r\n    padding: 3px 30px;\r\n}\r\n.styles-module_modalInput__2Ql0f{\r\n    min-height: 30px;\r\n    font-size: 16px;\r\n    max-width: 140px;\r\n}\r\n\r\n.styles-module_primitiveInput__3DL4B{\r\n    min-height: 30px;\r\n    font-size: 16px;\r\n    width: 385px;\r\n}\r\n\r\nselect.styles-module_modalInput__2Ql0f{\r\n    height: 30px;\r\n}\r\n.styles-module_modalBooleanInput__3ON3x{\r\n    min-height: 30px;\r\n    font-size: 16px;\r\n    min-width: 140px;\r\n}\r\n\r\n.styles-module_modalNoLabel__39M1c{\r\n    display: flex;\r\n    padding: 20px 5px 0;\r\n    min-height: 20px;\r\n    font-weight: bolder;\r\n    align-items: center;\r\n}\r\n\r\n.styles-module_modalBtnContainer__1t2Ba{\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    display: flex;\r\n    padding: 20px 20px 10px 10px ;\r\n}\r\n\r\n.styles-module_modalModifyBtnContainer__OMIy7{\r\n    display: block;\r\n\r\n}\r\n.styles-module_modalButton__QEgLU{\r\n    margin-left: 5px;\r\n}\r\n\r\n.styles-module_delButton__2GkYR{\r\n    margin-left: 5px;\r\n    cursor: pointer;\r\n}\r\n\r\n.styles-module_addButton__3yeXA{\r\n    display: flex;\r\n    align-items: center;\r\n    cursor: pointer;\r\n}\r\n\r\n.styles-module_removeIcon__YQbZ7 {\r\n    color: #787878;\r\n    box-sizing: border-box;\r\n    position: relative;\r\n    display: block;\r\n    transform: scale(1);\r\n    width: 22px;\r\n    height: 22px;\r\n    border: 2px solid;\r\n    border-radius: 22px\r\n}\r\n\r\n.styles-module_removeIcon__YQbZ7::before {\r\n    content: "";\r\n    display: block;\r\n    box-sizing: border-box;\r\n    position: absolute;\r\n    width: 10px;\r\n    height: 2px;\r\n    background: currentColor;\r\n    border-radius: 5px;\r\n    top: 8px;\r\n    left: 4px\r\n}\r\n\r\n.styles-module_addIcon__1Hx75 {\r\n    color: #787878;\r\n    box-sizing: border-box;\r\n    position: relative;\r\n    display: block;\r\n    width: 22px;\r\n    height: 22px;\r\n    border: 2px solid;\r\n    transform: scale(1);\r\n    border-radius: 22px\r\n}\r\n\r\n.styles-module_addIcon__1Hx75::after,\r\n.styles-module_addIcon__1Hx75::before {\r\n    content: "";\r\n    display: block;\r\n    box-sizing: border-box;\r\n    position: absolute;\r\n    width: 10px;\r\n    height: 2px;\r\n    background: currentColor;\r\n    border-radius: 5px;\r\n    top: 8px;\r\n    left: 4px\r\n}\r\n\r\n.styles-module_addIcon__1Hx75::after {\r\n    width: 2px;\r\n    height: 10px;\r\n    top: 4px;\r\n    left: 8px\r\n}\r\n\r\n.styles-module_arrayIndex__PSRJg{\r\n    margin: 20px 5px 0;\r\n    font-size: 16px;\r\n}\r\n.styles-module_arrayIndexInput__2avy9{\r\n    display: flex;\r\n    min-height: 30px;\r\n    border-radius: 2px;\r\n    padding: 0 6px;\r\n    font-size: 16px;\r\n    background-color: #eeeeef;\r\n    text-align: center;\r\n    align-items: center;\r\n}\r\n\r\n.styles-module_addLine__1qO0a{\r\n    display: flex;\r\n    margin-left: 10px;\r\n}\r\n\r\n.styles-module_nodeLine__30DII{\r\n    width: 2px;\r\n    margin: -0.5em 0 18px;\r\n    border-right-style:solid ;\r\n    border-width: 0.15em;\r\n    border-color: #f0f0f0;\r\n}\r\n\r\n.styles-module_nodePlusLineContainer__3cpeO{\r\n    display: flex;\r\n    flex-direction: row;\r\n}\r\n.styles-module_nodePlusLine__r_i9a{\r\n    border-bottom-style: solid;\r\n    border-width: 0.15em;\r\n    border-color: #f0f0f0;\r\n    margin: 0 0 18px;\r\n    height: 20px;\r\n    width: 16px;\r\n}\r\n\r\n.styles-module_listContainer__1uShT{\r\n    display: flex;\r\n}\r\n\r\n.styles-module_listLine__2haq5{\r\n    height: 20px;\r\n    width: 16px;\r\n    margin-top: 14px;\r\n    border-bottom-style: solid;\r\n    border-width: 0.15em;\r\n    border-color: #f0f0f0;\r\n}\r\n\r\n.styles-module_warning__2D74f{\r\n    display: flex;\r\n    padding-left: 5px;\r\n}\r\n.styles-module_warning__2D74f span{\r\n    display: flex;\r\n    align-items: center;\r\n    color: rgba(255,0,0, 0.8);\r\n    font-style: italic;\r\n}',styles={container:"styles-module_container__1oeWd",editorContainer:"styles-module_editorContainer__3rgkN",overlay:"styles-module_overlay__3xf0A",JsonViewOutput:"styles-module_JsonViewOutput__dQNvr",insertBanner:"styles-module_insertBanner__3grHO",bannerSpan:"styles-module_bannerSpan__iZqd_",jsonListOutput:"styles-module_jsonListOutput__14Vp_",nodeEmpty:"styles-module_nodeEmpty__okGWw",indent:"styles-module_indent__3K2Y7",dataContainer:"styles-module_dataContainer__3Hb85",dataNode:"styles-module_dataNode__3NW26",clickNode:"styles-module_clickNode__D3mL4",needLeaf:"styles-module_needLeaf__3Pd0A",rightContainer:"styles-module_rightContainer__2_EGZ",rightButton:"styles-module_rightButton__2WBAU",emptyObject:"styles-module_emptyObject__1ivRB",keyData:"styles-module_keyData__xvrky",keySpace:"styles-module_keySpace__V048A",arrayType:"styles-module_arrayType__2cPVO",valueData:"styles-module_valueData__2LUzt",arrow:"styles-module_arrow__2qoOo",arrowDown:"styles-module_arrowDown__1CJlj",arrowRight:"styles-module_arrowRight__20txf",modalContainer:"styles-module_modalContainer__3p6-8",modalContentContainer:"styles-module_modalContentContainer__1l9jX",modalLabel:"styles-module_modalLabel__2kqOh",modalSelectLabel:"styles-module_modalSelectLabel__2L-as",modalSelectBtnContainer:"styles-module_modalSelectBtnContainer__GFYsQ",modalSelectBtn:"styles-module_modalSelectBtn__1GzsM",modalInput:"styles-module_modalInput__2Ql0f",primitiveInput:"styles-module_primitiveInput__3DL4B",modalBooleanInput:"styles-module_modalBooleanInput__3ON3x",modalNoLabel:"styles-module_modalNoLabel__39M1c",modalBtnContainer:"styles-module_modalBtnContainer__1t2Ba",modalModifyBtnContainer:"styles-module_modalModifyBtnContainer__OMIy7",modalButton:"styles-module_modalButton__QEgLU",delButton:"styles-module_delButton__2GkYR",addButton:"styles-module_addButton__3yeXA",removeIcon:"styles-module_removeIcon__YQbZ7",addIcon:"styles-module_addIcon__1Hx75",arrayIndex:"styles-module_arrayIndex__PSRJg",arrayIndexInput:"styles-module_arrayIndexInput__2avy9",addLine:"styles-module_addLine__1qO0a",nodeLine:"styles-module_nodeLine__30DII",nodePlusLineContainer:"styles-module_nodePlusLineContainer__3cpeO",nodePlusLine:"styles-module_nodePlusLine__r_i9a",listContainer:"styles-module_listContainer__1uShT",listLine:"styles-module_listLine__2haq5",warning:"styles-module_warning__2D74f"};function DeepCopy(e){if(void 0!==e)return null===e?null:JSON.parse(JSON.stringify(e))}styleInject(css_248z);var hasOwn=Object.prototype.hasOwnProperty,toString=Object.prototype.toString,foreach=function(e,t,n){if("[object Function]"!==toString.call(t))throw new TypeError("iterator must be a function");var a=e.length;if(a===+a)for(var r=0;r<a;r++)t.call(n,e[r],r,e);else for(var l in e)hasOwn.call(e,l)&&t.call(n,e[l],l,e)},each=foreach,jsonPointer=api;function api(e,t,n){if(3===arguments.length)return api.set(e,t,n);if(2===arguments.length)return api.get(e,t);var a,r=api.bind(api,e);for(a in api)api.hasOwnProperty(a)&&(r[a]=api[a].bind(r,e));return r}function TypeOfValue(e){return void 0===e?"undefined":null===e?"null":"boolean"==typeof e?"boolean":"number"==typeof e?"number":"string"==typeof e?"string":e instanceof Array?"array":"object"}api.get=function(e,t){for(var n=Array.isArray(t)?t:api.parse(t),a=0;a<n.length;++a){var r=n[a];if(!("object"==typeof e&&r in e))throw new Error("Invalid reference token: "+r);e=e[r]}return e},api.set=function(e,t,n){var a=Array.isArray(t)?t:api.parse(t),r=a[0];if(0===a.length)throw Error("Can not set the root object");for(var l=0;l<a.length-1;++l){var o=a[l];"__proto__"!==o&&"constructor"!==o&&"prototype"!==o&&("-"===o&&Array.isArray(e)&&(o=e.length),r=a[l+1],o in e||(r.match(/^(\d+|-)$/)?e[o]=[]:e[o]={}),e=e[o])}return e[r="-"===r&&Array.isArray(e)?e.length:r]=n,this},api.remove=function(e,t){var n=Array.isArray(t)?t:api.parse(t),a=n[n.length-1];if(void 0===a)throw new Error('Invalid JSON pointer for remove: "'+t+'"');e=api.get(e,n.slice(0,-1));if(Array.isArray(e)){n=+a;if(""===a&&isNaN(n))throw new Error('Invalid array index: "'+a+'"');Array.prototype.splice.call(e,n,1)}else delete e[a]},api.dict=function(e,t){var n={};return api.walk(e,function(e,t){n[t]=e},t),n},api.walk=function(e,a,r){var l=[];r=r||function(e){e=Object.prototype.toString.call(e);return"[object Object]"===e||"[object Array]"===e},function n(e){each(e,function(e,t){l.push(String(t)),r(e)?n(e):a(e,api.compile(l)),l.pop()})}(e)},api.has=function(e,t){try{api.get(e,t)}catch(e){return!1}return!0},api.escape=function(e){return e.toString().replace(/~/g,"~0").replace(/\//g,"~1")},api.unescape=function(e){return e.replace(/~1/g,"/").replace(/~0/g,"~")},api.parse=function(e){if(""===e)return[];if("/"!==e.charAt(0))throw new Error("Invalid JSON pointer: "+e);return e.substring(1).split(/\//).map(api.unescape)},api.compile=function(e){return 0===e.length?"":"/"+e.map(api.escape).join("/")};var UserContext=createContext({themes:{color:"#9bb7d4",hoverColor:"#f4f7fa"},banner:{hoverColor:"#6690bd",fontColor:"white",font:"20px/30px Arial, Helvetica, sans-serif"},key:{color:"black",font:"16px/26px Arial, Helvetica, sans-serif"},values:{font:"14px/26px Arial, Helvetica, sans-serif",null:"#E9897E",boolean:"#8e4cad",number:"#25539a",string:"#797980"},buttons:{add:"#9bb7d4",delete:"#a0a2a4",update:"#9BB7D4",cancel:"#d49bb7"}}),typeOptions=["string","number","boolean","null","object","array"];function ModalEditor(e){var t=e.editObject,n=e.changeNode,a=e.deleteNode,e=t||{},r=e.path,l=e.field,o=e.value,t=e.isInArray,s={},i=TypeOfValue(o),e=useContext(UserContext);return void 0===l?jsonPointer.set(s,"/undefined/",""):"array"===i?jsonPointer.set(s,"/"+l+"/"+o.length,""):"object"===i?jsonPointer.set(s,"/"+l,{}):jsonPointer.set(s,"/"+l,o),React.createElement("div",{key:"ModalEditor",className:styles.modalContainer},React.createElement("form",{onSubmit:function(e){var t;e.preventDefault(),"array"===i?n("/"===r?"/"+l:r+"/"+l+"/"+o.length,DeepCopy(jsonPointer.get(s,"/"+l+"/"+o.length))):"object"===i?Object.keys(jsonPointer.get(s,"/"+l)).forEach(function(e){n(r+"/"+l+"/"+e,DeepCopy(jsonPointer.get(s,"/"+l+"/"+e)))}):(e=TypeOfValue(t=jsonPointer.get(s,"/"+l)),void 0===l?n("/",t):n(r+"/"+l,"array"===e||"object"===e?DeepCopy(t):t))}},"array"===i?React.createElement(ModalObjectContainer,{modalObj:s,path:"/"+l,field:o.length,valueType:"string",isInArray:!0,isRoot:!0}):"object"===i||void 0===l?React.createElement(ObjectNodeEditor,{modalObj:s,ObjKey:l,path:""}):React.createElement(ModalObjectContainer,{modalObj:s,path:"",field:l,valueType:i,isInArray:t,isRoot:!0}),React.createElement("div",{className:styles.modalBtnContainer},"object"===i?React.createElement("div",null):React.createElement("button",{type:"button",className:styles.modalButton,style:{backgroundColor:e.buttons.delete},onClick:function(){a(r+"/"+l)}},React.createElement("span",{style:{font:e.values.font,lineHeight:"normal"}},"Delete")," "),React.createElement("div",{className:styles.modalModifyBtnContainer},React.createElement("button",{type:"button",className:styles.modalButton,style:{backgroundColor:e.buttons.cancel},onClick:function(){a(void 0)}},React.createElement("span",{style:{font:e.values.font,lineHeight:"normal"}},"Cancel")),React.createElement("button",{type:"submit",className:styles.modalButton,style:{backgroundColor:e.buttons.update}},React.createElement("span",{style:{font:e.values.font,lineHeight:"normal"}},"Update"))))))}function removeNode(e,t,n,a){a?(jsonPointer.get(e,t).splice(parseInt(n),1),jsonPointer.set(e,t,DeepCopy(jsonPointer.get(e,t)))):jsonPointer.remove(e,t+"/"+n)}function setDefaultValue(e){return"null"===e?null:"boolean"===e||("number"===e?0:"string"===e?"":"array"===e?[""]:{})}function ModalObjectContainer(e){var t=e.modalObj,n=e.path,a=e.field,r=e.valueType,l=e.isInArray,o=e.isRoot,s=e.saveField,i=e.rerender,c=_slicedToArray(useState(r),2),e=c[0],d=c[1];return useEffect(function(){d(r)},[r]),"undefined"===e?React.createElement("div",null,"undefined"):"null"===e?React.createElement(NullEditor,{modalObj:t,path:n,field:a,isInArray:l,isRoot:o,saveType:function(e){d(e)},saveField:s,rerender:i}):"boolean"===e?React.createElement(BooleanEditor,{modalObj:t,path:n,field:a,isInArray:l,isRoot:o,saveType:function(e){d(e)},saveField:s,rerender:i}):"number"===e?React.createElement(NumberEditor,{modalObj:t,path:n,field:a,isInArray:l,isRoot:o,saveType:function(e){d(e)},saveField:s,rerender:i}):"string"===e?React.createElement(StringEditor,{modalObj:t,path:n,field:a,isInArray:l,isRoot:o,saveType:function(e){d(e)},saveField:s,rerender:i}):"array"===e?React.createElement(ArrayEditor,{modalObj:t,path:n,field:a,isInArray:l,isRoot:o,saveType:function(e){d(e)},saveField:s,rerender:i}):React.createElement(ObjectEditor,{modalObj:t,path:n,field:a,isInArray:l,isRoot:o,saveType:function(e){d(e)},saveField:s,rerender:i})}function NullEditor(e){var t=e.modalObj,n=e.path,a=e.field,r=e.isInArray,l=e.isRoot,o=e.saveType,s=e.saveField,i=e.rerender,e=_slicedToArray(useState(a),2),c=e[0],d=e[1];return useEffect(function(){jsonPointer.set(t,n+"/"+c,null)},[]),React.createElement("div",{className:styles.modalContentContainer},React.createElement("div",null,r?React.createElement("div",{className:styles.arrayIndex},React.createElement("div",{className:styles.arrayIndexInput},c)):React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Key"),React.createElement("input",{value:c,className:styles.modalInput,disabled:l,onChange:function(e){d(e.target.value)},onBlur:function(e){e=e.target.value,s(e,null,a)&&d(a)}}))),React.createElement("div",{className:styles.modalNoLabel},React.createElement("span",null," : ")),React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Type"),React.createElement("select",{className:styles.modalInput,name:"type",defaultValue:"null",onChange:function(e){e=e.target.value,jsonPointer.set(t,n+"/"+a,setDefaultValue(e)),o(e)}},typeOptions.map(function(e){return React.createElement("option",{key:e,value:e},e)}))),React.createElement("div",{className:styles.modalNoLabel},!l&&void 0!==i&&React.createElement("div",{className:styles.delButton},React.createElement("i",{className:styles.removeIcon,onClick:function(){removeNode(t,n,c,r),i()}}))))}function BooleanEditor(e){var t=e.modalObj,n=e.path,a=e.field,r=e.isInArray,l=e.isRoot,o=e.saveType,s=e.saveField,i=e.rerender,e=_slicedToArray(useState(a),2),c=e[0],d=e[1],e=_slicedToArray(useState(!1!==jsonPointer.get(t,n+"/"+a)),2),u=e[0],m=e[1];return React.createElement("div",{className:styles.modalContentContainer},React.createElement("div",null,r?React.createElement("div",{className:styles.arrayIndex},React.createElement("div",{className:styles.arrayIndexInput},c)):React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Key"),React.createElement("input",{value:c,className:styles.modalInput,disabled:l,onChange:function(e){d(e.target.value)},onBlur:function(e){e=e.target.value,s(e,u,a)&&d(a)}}))),React.createElement("div",{className:styles.modalNoLabel},React.createElement("span",null," : ")),React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Type"),React.createElement("select",{className:styles.modalInput,name:"type",defaultValue:"boolean",onChange:function(e){e=e.target.value,jsonPointer.set(t,n+"/"+a,setDefaultValue(e)),o(e)}},typeOptions.map(function(e){return React.createElement("option",{key:e,value:e},e)}))),React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Value"),React.createElement("select",{className:styles.modalBooleanInput,value:u,onChange:function(e){e="true"===e.target.value,m(e),jsonPointer.set(t,n+"/"+c,e)}},React.createElement("option",{value:!0},"true"),React.createElement("option",{value:!1},"false"))),React.createElement("div",{className:styles.modalNoLabel},!l&&void 0!==i&&React.createElement("div",{className:styles.delButton},React.createElement("i",{className:styles.removeIcon,onClick:function(){removeNode(t,n,c,r),i()}}))))}function NumberEditor(e){var n=e.modalObj,a=e.path,t=e.field,r=e.isInArray,l=e.isRoot,o=e.saveType,s=e.saveField,i=e.rerender,c=_slicedToArray(useState(t),2),d=c[0],u=c[1],e=_slicedToArray(useState(jsonPointer.get(n,a+"/"+t)),2),m=e[0],y=e[1],c=_slicedToArray(useState(!0),2),e=c[0],p=c[1];return React.createElement("div",null,React.createElement("div",{className:styles.modalContentContainer},React.createElement("div",null,r?React.createElement("div",{className:styles.arrayIndex},React.createElement("div",{className:styles.arrayIndexInput},d)):React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Key"),React.createElement("input",{value:d,className:styles.modalInput,disabled:l,onChange:function(e){u(e.target.value)},onBlur:function(e){e=e.target.value,s(e,m,t)&&u(t)}}))),React.createElement("div",{className:styles.modalNoLabel},React.createElement("span",null," : ")),React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Type"),React.createElement("select",{className:styles.modalInput,name:"type",defaultValue:"number",onChange:function(e){e=e.target.value,jsonPointer.set(n,a+"/"+t,setDefaultValue(e)),o(e)}},typeOptions.map(function(e){return React.createElement("option",{key:e,value:e},e)}))),React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Value"),React.createElement("input",{value:m,className:styles.modalInput,onChange:function(e){var t;t=e.target.value,e=Number(t),""===t||Number.isNaN(e)?(jsonPointer.set(n,a+"/"+d,0),p(!1)):(jsonPointer.set(n,a+"/"+d,e),p(!0)),y(t)},onBlur:function(e){var t;t=e.target.value,e=Number(t),""!==t&&!Number.isNaN(e)||y(0)}})),React.createElement("div",{className:styles.modalNoLabel},!l&&void 0!==i&&React.createElement("div",{className:styles.delButton},React.createElement("i",{className:styles.removeIcon,onClick:function(){removeNode(n,a,d,r),i()}})))),!e&&React.createElement("div",null,"Not a num, will change/save to 0"))}function StringEditor(e){var t=e.modalObj,n=e.path,a=e.field,r=e.isInArray,l=e.isRoot,o=e.saveType,s=e.saveField,i=e.rerender,e=_slicedToArray(useState(a),2),c=e[0],d=e[1],e=_slicedToArray(useState(jsonPointer.get(t,n+"/"+a)),2),u=e[0],m=e[1];return React.createElement("div",{className:styles.modalContentContainer},React.createElement("div",null,r?React.createElement("div",{className:styles.arrayIndex},React.createElement("div",{className:styles.arrayIndexInput},c)):React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Key"),React.createElement("input",{value:c,className:styles.modalInput,disabled:l,onChange:function(e){d(e.target.value)},onBlur:function(e){e=e.target.value,s(e,u,a)&&d(a)}}))),React.createElement("div",{className:styles.modalNoLabel},React.createElement("span",null," : ")),React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Type"),React.createElement("select",{className:styles.modalInput,name:"type",defaultValue:"string",onChange:function(e){e=e.target.value,jsonPointer.set(t,n+"/"+c,setDefaultValue(e)),o(e)}},typeOptions.map(function(e){return React.createElement("option",{key:e,value:e},e)}))),React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Value"),React.createElement("input",{value:u,className:styles.modalInput,onChange:function(e){e=e.target.value,m(e),jsonPointer.set(t,n+"/"+c,e)}})),React.createElement("div",{className:styles.modalNoLabel},!l&&void 0!==i&&React.createElement("div",{className:styles.delButton},React.createElement("i",{className:styles.removeIcon,onClick:function(){removeNode(t,n,c,r),i()}}))))}function ArrayEditor(e){var n=e.modalObj,a=e.path,r=e.field,t=e.isInArray,l=e.isRoot,o=e.saveType,s=e.saveField,i=e.rerender,e=_slicedToArray(useState(!1),2),c=e[0],d=e[1],e=_slicedToArray(useState(r),2),u=e[0],m=e[1];return React.createElement("div",null,React.createElement("div",{className:styles.modalContentContainer},React.createElement("div",null,t?React.createElement("div",{className:styles.arrayIndex},React.createElement("div",{className:styles.arrayIndexInput},u)):React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Key"),React.createElement("input",{value:u,className:styles.modalInput,disabled:l,onChange:function(e){m(e.target.value)},onBlur:function(e){s(e.target.value,jsonPointer.get(n,a+"/"+r),r)&&m(r)}}))),React.createElement("div",{className:styles.modalNoLabel},React.createElement("span",null," : ")),React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Type"),React.createElement("select",{className:styles.modalInput,name:"type",defaultValue:"array",onChange:function(e){e=e.target.value,jsonPointer.set(n,a+"/"+r,setDefaultValue(e)),o(e)}},typeOptions.map(function(e){return React.createElement("option",{key:e,value:e},e)}))),React.createElement("div",{className:styles.modalNoLabel},!(""===a||l||void 0===i)&&React.createElement("div",{className:styles.delButton},React.createElement("i",{className:styles.removeIcon,onClick:function(){removeNode(n,a,u,t),i()}})))),React.createElement("div",{className:styles.addLine},React.createElement("div",{className:styles.nodeLine},React.createElement("p",null)),React.createElement("div",null,Object.entries(jsonPointer.get(n,a+"/"+r)).map(function(e){var t=_slicedToArray(e,2),e=t[0],t=t[1];return React.createElement("div",{className:styles.listContainer,key:a+"/"+r+"/"+e+"/"+c},React.createElement("div",{className:styles.listLine}),React.createElement(ModalObjectContainer,{modalObj:n,path:a+"/"+r,field:e,valueType:TypeOfValue(t),isInArray:!0,render:c,rerender:function(){d(!c)}}))}),React.createElement("div",{className:styles.nodePlusLineContainer},React.createElement("div",{className:styles.nodePlusLine}),React.createElement("div",{className:styles.addButton},React.createElement("i",{className:styles.addIcon,onClick:function(){jsonPointer.set(n,a+"/"+u+"/"+jsonPointer.get(n,a+"/"+u).length,""),d(!c)}}))))))}function ObjectNodeEditor(e){var a=e.modalObj,r=e.ObjKey,l=e.path,t=_slicedToArray(useState(""),2),e=t[0],o=t[1];return jsonPointer.has(a,l+"/"+r+"/"+e)||jsonPointer.set(a,l+"/"+r+"/"+e,""),React.createElement(ModalObjectContainer,{modalObj:a,path:l+"/"+r,field:e,valueType:"string",isInArray:!1,isRoot:!1,saveField:function(e,t,n){if(jsonPointer.has(a,l+"/"+r+"/"+e))return!0;t instanceof Object?jsonPointer.set(a,l+"/"+r+"/"+e,DeepCopy(t)):jsonPointer.set(a,l+"/"+r+"/"+e,t),jsonPointer.remove(a,l+"/"+r+"/"+n),o(e)}})}function ObjectEditor(e){var a=e.modalObj,r=e.path,n=e.field,t=e.isInArray,l=e.isRoot,o=e.saveType,s=e.rerender,i=_slicedToArray(useState(!1),2),c=i[0],d=i[1],e=_slicedToArray(useState(n),2),u=e[0],m=e[1],i=_slicedToArray(useState(!1),2),e=i[0],y=i[1];function p(e,t,n){if(jsonPointer.has(a,r+"/"+u+"/"+e))return!0;t instanceof Object?jsonPointer.set(a,r+"/"+u+"/"+e,DeepCopy(t)):jsonPointer.set(a,r+"/"+u+"/"+e,t),jsonPointer.remove(a,r+"/"+u+"/"+n),d(!c)}return useEffect(function(){jsonPointer.set(a,r+"/"+u+"/",""),d(!c)},[]),useEffect(function(){y(!1)},[c]),React.createElement("div",null,React.createElement("div",{className:styles.modalContentContainer},React.createElement("div",null,t?React.createElement("div",{className:styles.arrayIndex},React.createElement("div",{className:styles.arrayIndexInput},u)):React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Key"),React.createElement("input",{value:u,className:styles.modalInput,disabled:l,onChange:function(e){e=e.target.value,jsonPointer.has(a,r+"/"+e)||(jsonPointer.set(a,r+"/"+e,DeepCopy(jsonPointer.get(a,r+"/"+u))),jsonPointer.remove(a,r+"/"+u),m(e))},onBlur:function(e){e=e.target.value,u!==e&&m(u)}}))),React.createElement("div",{className:styles.modalNoLabel},React.createElement("span",null," : ")),React.createElement("div",null,React.createElement("label",{className:styles.modalLabel},"Type"),React.createElement("select",{className:styles.modalInput,name:"type",defaultValue:"object",onChange:function(e){e=e.target.value,jsonPointer.set(a,r+"/"+u,setDefaultValue(e)),o(e)}},typeOptions.map(function(e){return React.createElement("option",{key:e,value:e},e)}))),React.createElement("div",{className:styles.modalNoLabel},!(""===r||l||void 0===s)&&React.createElement("div",{className:styles.delButton},React.createElement("i",{className:styles.removeIcon,onClick:function(){removeNode(a,r,u,t),s()}})))),React.createElement("div",{className:styles.addLine},React.createElement("div",{className:styles.nodeLine},React.createElement("p",null)),React.createElement("div",null,React.createElement("div",null,Object.entries(jsonPointer.get(a,r+"/"+u)).map(function(e){var t=_slicedToArray(e,2),e=t[0],t=t[1];return React.createElement("div",{className:styles.listContainer,key:r+"/"+n+"/"+e+"/"+c},React.createElement("div",{className:styles.listLine}),React.createElement(ModalObjectContainer,{modalObj:a,field:e,value:t,valueType:TypeOfValue(t),isInArray:!1,path:r+"/"+u,saveField:p,rerender:function(){d(!c)}}))})),React.createElement("div",{className:styles.nodePlusLineContainer},React.createElement("div",{className:styles.nodePlusLine}),React.createElement("div",{className:styles.addButton},React.createElement("i",{className:styles.addIcon,onClick:function(){y(!1),jsonPointer.has(a,r+"/"+u+"/")?y(!0):(jsonPointer.set(a,r+"/"+u+"/",""),d(!c))}})),e&&React.createElement("div",{className:styles.warning},React.createElement("span",null,"please insert a key value"))))))}function TypeToString(e){e=e.input;return React.createElement("span",null,TypeOfValue(e))}function ValueToString(e){e=e.input,e=null==e?"null":"boolean"==typeof e?e?"true":"false":e;return React.createElement("span",null,e)}function JsonView(e){var n=e.input,a=e.jsonPath,l=e.jsonListOutput,r=e.deleteNode,o=e.setPrimitive,s=e.createModal,t=e.indent,i=void 0===t?1:t,c=e.needLeaf,d=void 0===c||c,u=TypeOfValue(n),t=useContext(UserContext),e=_slicedToArray(useState(!1),2),c=e[0],m=e[1];function y(e,t,n,a,r){s(e,t,n,a,r.current.offsetTop+r.current.clientHeight-l.current.scrollTop)}return void 0===n?React.createElement("div",{className:styles.nodeEmpty,style:{color:t.values.string,font:t.values.font}},"It doesn't have any data"):d&&"object"!==u&&"array"!==u?React.createElement("div",{key:i,className:styles.dataContainer},React.createElement("div",{className:styles.dataNode,onClick:function(){o(n,l.current.offsetTop+32)}},React.createElement("div",{className:styles.needLeaf,style:{backgroundColor:c?t.themes.hoverColor:""},onMouseOver:function(){m(!0)},onMouseLeave:function(){m(!1)}},React.createElement("div",null,React.createElement(JsonView,{jsonPath:a,input:n,indent:i,needLeaf:!1})),c&&React.createElement("div",{className:styles.rightContainer,style:{backgroundImage:"linear-gradient(to right, transparent 0, "+t.themes.hoverColor+" 0.5em)"}},React.createElement("div",{style:{font:t.values.font,fontStyle:"italic",color:t.themes.color}},React.createElement(TypeToString,{input:n})),React.createElement("div",{className:styles.rightButton},React.createElement("button",{style:{backgroundColor:t.buttons.delete},type:"button",onClick:function(e){e.stopPropagation(),e.preventDefault(),r(a)}},React.createElement("span",{style:{font:t.values.font,lineHeight:"normal"}},"Delete"))))))):"null"===u?React.createElement("div",{className:styles.valueData,style:{color:t.values.null,font:t.values.font}},React.createElement(ValueToString,{input:n})):"boolean"===u?React.createElement("div",{className:styles.valueData,style:{color:t.values.boolean,font:t.values.font}},React.createElement(ValueToString,{input:n})):"number"===u?React.createElement("div",{className:styles.valueData,style:{color:t.values.number,font:t.values.font}},React.createElement(ValueToString,{input:""===n?'""':n})):"string"===u?React.createElement("div",{className:styles.valueData,style:{color:t.values.string,font:t.values.font}},React.createElement(ValueToString,{input:""===n?'""':n})):0===Object.keys(n).length?React.createElement("div",{className:styles.dataContainer},React.createElement("div",{className:styles.dataNode},React.createElement("div",{className:styles.emptyObject,style:{backgroundColor:c?t.themes.hoverColor:""},onMouseOver:function(){m(!0)},onMouseLeave:function(){m(!1)}},React.createElement("div",{style:{paddingLeft:i+"em"}},React.createElement("div",{className:styles.valueData,style:{color:t.values.string,font:t.values.font}},React.createElement("span",null,JSON.stringify(n)))),c&&React.createElement("div",{className:styles.rightContainer,style:{backgroundImage:"linear-gradient(to right, transparent 0, "+t.themes.hoverColor+" 0.5em)"}},React.createElement("div",{style:{font:t.values.font,fontStyle:"italic",color:t.themes.color}},React.createElement(TypeToString,{input:n})),React.createElement("div",{className:styles.rightButton},React.createElement("button",{style:{backgroundColor:t.buttons.delete},type:"button",onClick:function(e){e.stopPropagation(),e.preventDefault(),r(a)}},React.createElement("span",{style:{font:t.values.font,lineHeight:"normal"}},"Delete"))))))):Object.entries(n).map(function(e){var t=_slicedToArray(e,2),e=t[0],t=t[1];return React.createElement(ViewNode,{key:a+"/"+e,jsonPath:a,field:e,value:t,indent:i,isInArray:n instanceof Array,deleteNode:r,setPrimitive:o,createModal:s,createEditModal:y,jsonListOutput:l})})}function ViewNode(e){var t=e.jsonPath,n=e.field,a=e.value,r=e.jsonListOutput,l=e.indent,o=e.isInArray,s=e.deleteNode,i=e.setPrimitive,c=e.createModal,d=e.createEditModal,u=_slicedToArray(useState(!0),2),m=u[0],y=u[1],e=_slicedToArray(useState(!1),2),u=e[0],p=e[1],f=a instanceof Object,v=useRef(),e=useContext(UserContext);return React.createElement("div",{className:styles.dataContainer},React.createElement("div",{className:styles.dataNode,ref:v},React.createElement("div",{className:styles.clickNode,style:{backgroundColor:u?e.themes.hoverColor:""},onMouseOver:function(){p(!0)},onMouseLeave:function(){p(!1)},onClick:function(e){e.stopPropagation(),e.preventDefault(),f?y(!m):d(t,n,a,o,v)}},React.createElement("div",{className:styles.keyData,style:{paddingLeft:l+"em"}},React.createElement("div",{className:styles.arrow,style:f?{}:{visibility:"hidden"}},React.createElement("i",{className:m?styles.arrowDown:styles.arrowRight})),React.createElement("div",{style:{display:"flex",color:e.key.color,font:e.key.font}},React.createElement("div",null,o&&React.createElement("div",{className:styles.arrayType}),React.createElement("span",null,""===n?'""':n)),React.createElement("div",{className:styles.keySpace},React.createElement("span",null,":")))),u&&React.createElement("div",{className:styles.rightContainer,style:{backgroundImage:"linear-gradient(to right, transparent 0, "+e.themes.hoverColor+" 0.5em)"}},React.createElement("div",{style:{font:e.values.font,fontStyle:"italic",color:e.themes.color}},React.createElement(TypeToString,{input:a})),React.createElement("div",{className:styles.rightButton},React.createElement("button",{style:{backgroundColor:e.buttons.add},type:"button",onClick:function(e){e.stopPropagation(),e.preventDefault(),d(t,n,a,o,v)}},React.createElement("span",{style:{font:e.values.font,lineHeight:"normal"}},f?"Add":"Edit"))),React.createElement("div",{className:styles.rightButton},React.createElement("button",{style:{backgroundColor:e.buttons.delete},type:"button",onClick:function(e){e.stopPropagation(),e.preventDefault(),s(t+"/"+n)}},React.createElement("span",{style:{font:e.values.font,lineHeight:"normal"}},"Delete")))),!f&&React.createElement(JsonView,{input:a,needLeaf:!1}))),f&&m&&React.createElement(JsonView,{jsonPath:t+"/"+n,input:a,indent:l+1,deleteNode:s,setPrimitive:i,needLeaf:!1,jsonListOutput:r,createModal:c}))}function ModalPrimitive(e){var t=e.primitiveValue,n=e.savePrimitive,t=_slicedToArray(useState(t),2),a=t[0],r=t[1],t=useContext(UserContext);return React.createElement("div",{key:"ModalEditor",className:styles.modalContainer},React.createElement("form",{onSubmit:function(e){e.preventDefault(),n(null===a?"null":a)}},React.createElement("div",null,React.createElement("label",{className:styles.modalLabel,style:{font:t.key.font}},"Value"),React.createElement("input",{value:null===a?"null":a,className:styles.primitiveInput,onChange:function(e){r(e.target.value)}})),React.createElement("div",{style:{float:"right"}},React.createElement("div",{className:styles.modalBtnContainer},React.createElement("div",{className:styles.modalModifyBtnContainer},React.createElement("button",{type:"button",className:styles.modalButton,style:{backgroundColor:t.buttons.cancel},onClick:function(){n()}}," ",React.createElement("span",{style:{font:t.values.font,lineHeight:"normal"}},"Cancel")),React.createElement("button",{type:"submit",className:styles.modalButton,style:{backgroundColor:t.buttons.update}},React.createElement("span",{style:{font:t.values.font,lineHeight:"normal"}},"Update")))))))}function Editor(e){var t=e.input,n=e.jsonBoxRef,a=e.onChange,r={path:void 0,field:void 0,value:void 0,isInArray:void 0},l=useRef(),o=_slicedToArray(useState(),2),s=o[0],i=o[1],c=_slicedToArray(useState(!1),2),d=c[0],u=c[1],m=_slicedToArray(useState(r),2),y=m[0],p=m[1],f=_slicedToArray(useState(0),2),e=f[0],v=f[1],o=_slicedToArray(useState(),2),c=o[0],_=o[1],r=_slicedToArray(useState(!1),2),m=r[0],b=r[1],f=useContext(UserContext),o=_slicedToArray(useState(!1),2),r=o[0],g=o[1],E=DeepCopy(s);function R(e,t){i(t?DeepCopy(e):e),a(JSON.stringify(e,null," "))}function h(e){""===e?R(E=void 0):void 0!==e&&(jsonPointer.remove(E,e),R(E,E instanceof Object)),d&&u(!1)}function N(e,t){v(t),_(e)}function x(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:void 0,n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:void 0,a=3<arguments.length&&void 0!==arguments[3]?arguments[3]:void 0,r=4<arguments.length?arguments[4]:void 0;void 0===t&&s instanceof Array?p({path:"/",field:Array.from(s).length,value:s,isInArray:a}):p({path:e,field:t,value:n,isInArray:a}),v(r),u(!0)}return useEffect(function(){i(function(e){try{return JSON.parse(e)}catch(e){return}}(t)),u(!1),_(void 0)},[t]),React.createElement("div",{className:styles.editorContainer},d&&React.createElement("div",null,React.createElement("div",{className:styles.overlay,style:{width:n.current.offsetWidth,height:n.current.offsetHeight}}),React.createElement("div",{style:{top:e,position:"absolute"}},React.createElement(ModalEditor,{editObject:y,changeNode:function(e,t){var n;void 0===s||""===e?R(E=t,E instanceof Object):("/"===e?s instanceof Array?(n=jsonPointer.get(s,"").length,Object.entries(t).map(function(e){var t=_slicedToArray(e,2),e=t[0],t=t[1];jsonPointer.set(E,"/"+n+"/"+e,t)})):(s instanceof Object||(E={}),Object.entries(t).map(function(e){var t=_slicedToArray(e,2),e=t[0],t=t[1];jsonPointer.set(E,"/"+e,t)})):jsonPointer.set(E,e,t),R(E,!0)),u(!1)},deleteNode:h}))),void 0!==c&&React.createElement("div",null,React.createElement("div",{className:styles.overlay,style:{width:n.current.offsetWidth,height:n.current.offsetHeight}}),React.createElement("div",{style:{top:e,position:"absolute"}},React.createElement(ModalPrimitive,{primitiveValue:c,savePrimitive:function(e){void 0!==e&&R('"'===e.charAt(0)&&e.endsWith('"')?e.slice(1,-1):"null"===e?null:"true"===e||"false"===e?"true"===e:Number.isNaN(Number(e))?e:Number(e)),_(void 0)}}))),void 0===s&&m&&React.createElement("div",{className:styles.modalContainer,style:{minWidth:"300px"}},React.createElement("div",null,React.createElement("label",{className:styles.modalSelectLabel,style:{font:f.key.font}},"Please select type of new data")),React.createElement("div",{className:styles.modalSelectBtnContainer},React.createElement("button",{type:"button",className:styles.modalSelectBtn,style:{backgroundColor:f.themes.color},onClick:function(){N(""),b(!1)}},React.createElement("span",{style:{font:f.values.font,lineHeight:"normal"}},"Text")),React.createElement("button",{type:"button",className:styles.modalSelectBtn,style:{backgroundColor:f.themes.color},onClick:function(){x(""),b(!1)}},React.createElement("span",{style:{font:f.values.font,lineHeight:"normal"}},"Object")))),React.createElement("div",{key:"jsonBody",className:styles.JsonViewOutput},React.createElement("div",{className:styles.insertBanner,style:{backgroundColor:r?f.banner.hoverColor:f.themes.color},onMouseOver:function(){g(!0)},onMouseLeave:function(){g(!1)},onClick:function(){void 0!==s?x(""):b(!0)}},React.createElement("span",{className:styles.bannerSpan,style:{color:f.banner.fontColor,font:f.banner.font}}," + Insert Object")),React.createElement("div",{className:styles.jsonListOutput,ref:l},React.createElement(JsonView,{key:"DisplayJson",input:s,jsonPath:"",jsonListOutput:l,deleteNode:h,setPrimitive:N,createModal:x}))))}function JsonEditor(e){var t=e.jsonObject,n=e.onChange,a=e.theme,r=e.bannerStyle,l=e.keyStyle,o=e.valueStyle,s=e.buttonStyle,i=useRef(),e=useContext(UserContext);return React.createElement(UserContext.Provider,{value:{themes:void 0===a?e.themes:a,banner:void 0===r?e.banner:r,key:void 0===l?e.key:l,values:void 0===o?e.values:o,buttons:void 0===s?e.buttons:s}},React.createElement("div",{className:styles.container,ref:i},React.createElement(Editor,{input:t,jsonBoxRef:i,onChange:n})))}export{JsonEditor};