react-jsondata-editor/lib/index.js

A JSON editor library that displays and manipulates JSON objects

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react");function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React);function _arrayWithHoles(e){if(Array.isArray(e))return e}function _iterableToArrayLimit(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var l,n,r=[],o=!0,s=!1;try{for(a=a.call(e);!(o=(l=a.next()).done)&&(r.push(l.value),!t||r.length!==t);o=!0);}catch(e){s=!0,n=e}finally{try{o||null==a.return||a.return()}finally{if(s)throw n}}return r}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,l=new Array(t);a<t;a++)l[a]=e[a];return l}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);return"Map"===(a="Object"===a&&e.constructor?e.constructor.name:a)||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?_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 a,l=(t=void 0===t?{}:t).insertAt;e&&"undefined"!=typeof document&&(a=document.head||document.getElementsByTagName("head")[0],(t=document.createElement("style")).type="text/css","top"===l&&a.firstChild?a.insertBefore(t,a.firstChild):a.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,a){if("[object Function]"!==toString.call(t))throw new TypeError("iterator must be a function");var l=e.length;if(l===+l)for(var n=0;n<l;n++)t.call(a,e[n],n,e);else for(var r in e)hasOwn.call(e,r)&&t.call(a,e[r],r,e)},each=foreach,jsonPointer=api;function api(e,t,a){if(3===arguments.length)return api.set(e,t,a);if(2===arguments.length)return api.get(e,t);var l,n=api.bind(api,e);for(l in api)api.hasOwnProperty(l)&&(n[l]=api[l].bind(n,e));return n}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 a=Array.isArray(t)?t:api.parse(t),l=0;l<a.length;++l){var n=a[l];if(!("object"==typeof e&&n in e))throw new Error("Invalid reference token: "+n);e=e[n]}return e},api.set=function(e,t,a){var l=Array.isArray(t)?t:api.parse(t),n=l[0];if(0===l.length)throw Error("Can not set the root object");for(var r=0;r<l.length-1;++r){var o=l[r];"__proto__"!==o&&"constructor"!==o&&"prototype"!==o&&("-"===o&&Array.isArray(e)&&(o=e.length),n=l[r+1],o in e||(n.match(/^(\d+|-)$/)?e[o]=[]:e[o]={}),e=e[o])}return e[n="-"===n&&Array.isArray(e)?e.length:n]=a,this},api.remove=function(e,t){var a=Array.isArray(t)?t:api.parse(t),l=a[a.length-1];if(void 0===l)throw new Error('Invalid JSON pointer for remove: "'+t+'"');e=api.get(e,a.slice(0,-1));if(Array.isArray(e)){a=+l;if(""===l&&isNaN(a))throw new Error('Invalid array index: "'+l+'"');Array.prototype.splice.call(e,a,1)}else delete e[l]},api.dict=function(e,t){var a={};return api.walk(e,function(e,t){a[t]=e},t),a},api.walk=function(e,l,n){var r=[];n=n||function(e){e=Object.prototype.toString.call(e);return"[object Object]"===e||"[object Array]"===e},function a(e){each(e,function(e,t){r.push(String(t)),n(e)?a(e):l(e,api.compile(r)),r.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=React.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,a=e.changeNode,l=e.deleteNode,e=t||{},n=e.path,r=e.field,o=e.value,t=e.isInArray,s={},d=TypeOfValue(o),e=React.useContext(UserContext);return void 0===r?jsonPointer.set(s,"/undefined/",""):"array"===d?jsonPointer.set(s,"/"+r+"/"+o.length,""):"object"===d?jsonPointer.set(s,"/"+r,{}):jsonPointer.set(s,"/"+r,o),React__default.default.createElement("div",{key:"ModalEditor",className:styles.modalContainer},React__default.default.createElement("form",{onSubmit:function(e){var t;e.preventDefault(),"array"===d?a("/"===n?"/"+r:n+"/"+r+"/"+o.length,DeepCopy(jsonPointer.get(s,"/"+r+"/"+o.length))):"object"===d?Object.keys(jsonPointer.get(s,"/"+r)).forEach(function(e){a(n+"/"+r+"/"+e,DeepCopy(jsonPointer.get(s,"/"+r+"/"+e)))}):(e=TypeOfValue(t=jsonPointer.get(s,"/"+r)),void 0===r?a("/",t):a(n+"/"+r,"array"===e||"object"===e?DeepCopy(t):t))}},"array"===d?React__default.default.createElement(ModalObjectContainer,{modalObj:s,path:"/"+r,field:o.length,valueType:"string",isInArray:!0,isRoot:!0}):"object"===d||void 0===r?React__default.default.createElement(ObjectNodeEditor,{modalObj:s,ObjKey:r,path:""}):React__default.default.createElement(ModalObjectContainer,{modalObj:s,path:"",field:r,valueType:d,isInArray:t,isRoot:!0}),React__default.default.createElement("div",{className:styles.modalBtnContainer},"object"===d?React__default.default.createElement("div",null):React__default.default.createElement("button",{type:"button",className:styles.modalButton,style:{backgroundColor:e.buttons.delete},onClick:function(){l(n+"/"+r)}},React__default.default.createElement("span",{style:{font:e.values.font,lineHeight:"normal"}},"Delete")," "),React__default.default.createElement("div",{className:styles.modalModifyBtnContainer},React__default.default.createElement("button",{type:"button",className:styles.modalButton,style:{backgroundColor:e.buttons.cancel},onClick:function(){l(void 0)}},React__default.default.createElement("span",{style:{font:e.values.font,lineHeight:"normal"}},"Cancel")),React__default.default.createElement("button",{type:"submit",className:styles.modalButton,style:{backgroundColor:e.buttons.update}},React__default.default.createElement("span",{style:{font:e.values.font,lineHeight:"normal"}},"Update"))))))}function removeNode(e,t,a,l){l?(jsonPointer.get(e,t).splice(parseInt(a),1),jsonPointer.set(e,t,DeepCopy(jsonPointer.get(e,t)))):jsonPointer.remove(e,t+"/"+a)}function setDefaultValue(e){return"null"===e?null:"boolean"===e||("number"===e?0:"string"===e?"":"array"===e?[""]:{})}function ModalObjectContainer(e){var t=e.modalObj,a=e.path,l=e.field,n=e.valueType,r=e.isInArray,o=e.isRoot,s=e.saveField,d=e.rerender,u=_slicedToArray(React.useState(n),2),e=u[0],i=u[1];return React.useEffect(function(){i(n)},[n]),"undefined"===e?React__default.default.createElement("div",null,"undefined"):"null"===e?React__default.default.createElement(NullEditor,{modalObj:t,path:a,field:l,isInArray:r,isRoot:o,saveType:function(e){i(e)},saveField:s,rerender:d}):"boolean"===e?React__default.default.createElement(BooleanEditor,{modalObj:t,path:a,field:l,isInArray:r,isRoot:o,saveType:function(e){i(e)},saveField:s,rerender:d}):"number"===e?React__default.default.createElement(NumberEditor,{modalObj:t,path:a,field:l,isInArray:r,isRoot:o,saveType:function(e){i(e)},saveField:s,rerender:d}):"string"===e?React__default.default.createElement(StringEditor,{modalObj:t,path:a,field:l,isInArray:r,isRoot:o,saveType:function(e){i(e)},saveField:s,rerender:d}):"array"===e?React__default.default.createElement(ArrayEditor,{modalObj:t,path:a,field:l,isInArray:r,isRoot:o,saveType:function(e){i(e)},saveField:s,rerender:d}):React__default.default.createElement(ObjectEditor,{modalObj:t,path:a,field:l,isInArray:r,isRoot:o,saveType:function(e){i(e)},saveField:s,rerender:d})}function NullEditor(e){var t=e.modalObj,a=e.path,l=e.field,n=e.isInArray,r=e.isRoot,o=e.saveType,s=e.saveField,d=e.rerender,e=_slicedToArray(React.useState(l),2),u=e[0],i=e[1];return React.useEffect(function(){jsonPointer.set(t,a+"/"+u,null)},[]),React__default.default.createElement("div",{className:styles.modalContentContainer},React__default.default.createElement("div",null,n?React__default.default.createElement("div",{className:styles.arrayIndex},React__default.default.createElement("div",{className:styles.arrayIndexInput},u)):React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Key"),React__default.default.createElement("input",{value:u,className:styles.modalInput,disabled:r,onChange:function(e){i(e.target.value)},onBlur:function(e){e=e.target.value,s(e,null,l)&&i(l)}}))),React__default.default.createElement("div",{className:styles.modalNoLabel},React__default.default.createElement("span",null," : ")),React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Type"),React__default.default.createElement("select",{className:styles.modalInput,name:"type",defaultValue:"null",onChange:function(e){e=e.target.value,jsonPointer.set(t,a+"/"+l,setDefaultValue(e)),o(e)}},typeOptions.map(function(e){return React__default.default.createElement("option",{key:e,value:e},e)}))),React__default.default.createElement("div",{className:styles.modalNoLabel},!r&&void 0!==d&&React__default.default.createElement("div",{className:styles.delButton},React__default.default.createElement("i",{className:styles.removeIcon,onClick:function(){removeNode(t,a,u,n),d()}}))))}function BooleanEditor(e){var t=e.modalObj,a=e.path,l=e.field,n=e.isInArray,r=e.isRoot,o=e.saveType,s=e.saveField,d=e.rerender,e=_slicedToArray(React.useState(l),2),u=e[0],i=e[1],e=_slicedToArray(React.useState(!1!==jsonPointer.get(t,a+"/"+l)),2),c=e[0],f=e[1];return React__default.default.createElement("div",{className:styles.modalContentContainer},React__default.default.createElement("div",null,n?React__default.default.createElement("div",{className:styles.arrayIndex},React__default.default.createElement("div",{className:styles.arrayIndexInput},u)):React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Key"),React__default.default.createElement("input",{value:u,className:styles.modalInput,disabled:r,onChange:function(e){i(e.target.value)},onBlur:function(e){e=e.target.value,s(e,c,l)&&i(l)}}))),React__default.default.createElement("div",{className:styles.modalNoLabel},React__default.default.createElement("span",null," : ")),React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Type"),React__default.default.createElement("select",{className:styles.modalInput,name:"type",defaultValue:"boolean",onChange:function(e){e=e.target.value,jsonPointer.set(t,a+"/"+l,setDefaultValue(e)),o(e)}},typeOptions.map(function(e){return React__default.default.createElement("option",{key:e,value:e},e)}))),React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Value"),React__default.default.createElement("select",{className:styles.modalBooleanInput,value:c,onChange:function(e){e="true"===e.target.value,f(e),jsonPointer.set(t,a+"/"+u,e)}},React__default.default.createElement("option",{value:!0},"true"),React__default.default.createElement("option",{value:!1},"false"))),React__default.default.createElement("div",{className:styles.modalNoLabel},!r&&void 0!==d&&React__default.default.createElement("div",{className:styles.delButton},React__default.default.createElement("i",{className:styles.removeIcon,onClick:function(){removeNode(t,a,u,n),d()}}))))}function NumberEditor(e){var a=e.modalObj,l=e.path,t=e.field,n=e.isInArray,r=e.isRoot,o=e.saveType,s=e.saveField,d=e.rerender,u=_slicedToArray(React.useState(t),2),i=u[0],c=u[1],e=_slicedToArray(React.useState(jsonPointer.get(a,l+"/"+t)),2),f=e[0],_=e[1],u=_slicedToArray(React.useState(!0),2),e=u[0],m=u[1];return React__default.default.createElement("div",null,React__default.default.createElement("div",{className:styles.modalContentContainer},React__default.default.createElement("div",null,n?React__default.default.createElement("div",{className:styles.arrayIndex},React__default.default.createElement("div",{className:styles.arrayIndexInput},i)):React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Key"),React__default.default.createElement("input",{value:i,className:styles.modalInput,disabled:r,onChange:function(e){c(e.target.value)},onBlur:function(e){e=e.target.value,s(e,f,t)&&c(t)}}))),React__default.default.createElement("div",{className:styles.modalNoLabel},React__default.default.createElement("span",null," : ")),React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Type"),React__default.default.createElement("select",{className:styles.modalInput,name:"type",defaultValue:"number",onChange:function(e){e=e.target.value,jsonPointer.set(a,l+"/"+t,setDefaultValue(e)),o(e)}},typeOptions.map(function(e){return React__default.default.createElement("option",{key:e,value:e},e)}))),React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Value"),React__default.default.createElement("input",{value:f,className:styles.modalInput,onChange:function(e){var t;t=e.target.value,e=Number(t),""===t||Number.isNaN(e)?(jsonPointer.set(a,l+"/"+i,0),m(!1)):(jsonPointer.set(a,l+"/"+i,e),m(!0)),_(t)},onBlur:function(e){var t;t=e.target.value,e=Number(t),""!==t&&!Number.isNaN(e)||_(0)}})),React__default.default.createElement("div",{className:styles.modalNoLabel},!r&&void 0!==d&&React__default.default.createElement("div",{className:styles.delButton},React__default.default.createElement("i",{className:styles.removeIcon,onClick:function(){removeNode(a,l,i,n),d()}})))),!e&&React__default.default.createElement("div",null,"Not a num, will change/save to 0"))}function StringEditor(e){var t=e.modalObj,a=e.path,l=e.field,n=e.isInArray,r=e.isRoot,o=e.saveType,s=e.saveField,d=e.rerender,e=_slicedToArray(React.useState(l),2),u=e[0],i=e[1],e=_slicedToArray(React.useState(jsonPointer.get(t,a+"/"+l)),2),c=e[0],f=e[1];return React__default.default.createElement("div",{className:styles.modalContentContainer},React__default.default.createElement("div",null,n?React__default.default.createElement("div",{className:styles.arrayIndex},React__default.default.createElement("div",{className:styles.arrayIndexInput},u)):React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Key"),React__default.default.createElement("input",{value:u,className:styles.modalInput,disabled:r,onChange:function(e){i(e.target.value)},onBlur:function(e){e=e.target.value,s(e,c,l)&&i(l)}}))),React__default.default.createElement("div",{className:styles.modalNoLabel},React__default.default.createElement("span",null," : ")),React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Type"),React__default.default.createElement("select",{className:styles.modalInput,name:"type",defaultValue:"string",onChange:function(e){e=e.target.value,jsonPointer.set(t,a+"/"+u,setDefaultValue(e)),o(e)}},typeOptions.map(function(e){return React__default.default.createElement("option",{key:e,value:e},e)}))),React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Value"),React__default.default.createElement("input",{value:c,className:styles.modalInput,onChange:function(e){e=e.target.value,f(e),jsonPointer.set(t,a+"/"+u,e)}})),React__default.default.createElement("div",{className:styles.modalNoLabel},!r&&void 0!==d&&React__default.default.createElement("div",{className:styles.delButton},React__default.default.createElement("i",{className:styles.removeIcon,onClick:function(){removeNode(t,a,u,n),d()}}))))}function ArrayEditor(e){var a=e.modalObj,l=e.path,n=e.field,t=e.isInArray,r=e.isRoot,o=e.saveType,s=e.saveField,d=e.rerender,e=_slicedToArray(React.useState(!1),2),u=e[0],i=e[1],e=_slicedToArray(React.useState(n),2),c=e[0],f=e[1];return React__default.default.createElement("div",null,React__default.default.createElement("div",{className:styles.modalContentContainer},React__default.default.createElement("div",null,t?React__default.default.createElement("div",{className:styles.arrayIndex},React__default.default.createElement("div",{className:styles.arrayIndexInput},c)):React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Key"),React__default.default.createElement("input",{value:c,className:styles.modalInput,disabled:r,onChange:function(e){f(e.target.value)},onBlur:function(e){s(e.target.value,jsonPointer.get(a,l+"/"+n),n)&&f(n)}}))),React__default.default.createElement("div",{className:styles.modalNoLabel},React__default.default.createElement("span",null," : ")),React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Type"),React__default.default.createElement("select",{className:styles.modalInput,name:"type",defaultValue:"array",onChange:function(e){e=e.target.value,jsonPointer.set(a,l+"/"+n,setDefaultValue(e)),o(e)}},typeOptions.map(function(e){return React__default.default.createElement("option",{key:e,value:e},e)}))),React__default.default.createElement("div",{className:styles.modalNoLabel},!(""===l||r||void 0===d)&&React__default.default.createElement("div",{className:styles.delButton},React__default.default.createElement("i",{className:styles.removeIcon,onClick:function(){removeNode(a,l,c,t),d()}})))),React__default.default.createElement("div",{className:styles.addLine},React__default.default.createElement("div",{className:styles.nodeLine},React__default.default.createElement("p",null)),React__default.default.createElement("div",null,Object.entries(jsonPointer.get(a,l+"/"+n)).map(function(e){var t=_slicedToArray(e,2),e=t[0],t=t[1];return React__default.default.createElement("div",{className:styles.listContainer,key:l+"/"+n+"/"+e+"/"+u},React__default.default.createElement("div",{className:styles.listLine}),React__default.default.createElement(ModalObjectContainer,{modalObj:a,path:l+"/"+n,field:e,valueType:TypeOfValue(t),isInArray:!0,render:u,rerender:function(){i(!u)}}))}),React__default.default.createElement("div",{className:styles.nodePlusLineContainer},React__default.default.createElement("div",{className:styles.nodePlusLine}),React__default.default.createElement("div",{className:styles.addButton},React__default.default.createElement("i",{className:styles.addIcon,onClick:function(){jsonPointer.set(a,l+"/"+c+"/"+jsonPointer.get(a,l+"/"+c).length,""),i(!u)}}))))))}function ObjectNodeEditor(e){var l=e.modalObj,n=e.ObjKey,r=e.path,t=_slicedToArray(React.useState(""),2),e=t[0],o=t[1];return jsonPointer.has(l,r+"/"+n+"/"+e)||jsonPointer.set(l,r+"/"+n+"/"+e,""),React__default.default.createElement(ModalObjectContainer,{modalObj:l,path:r+"/"+n,field:e,valueType:"string",isInArray:!1,isRoot:!1,saveField:function(e,t,a){if(jsonPointer.has(l,r+"/"+n+"/"+e))return!0;t instanceof Object?jsonPointer.set(l,r+"/"+n+"/"+e,DeepCopy(t)):jsonPointer.set(l,r+"/"+n+"/"+e,t),jsonPointer.remove(l,r+"/"+n+"/"+a),o(e)}})}function ObjectEditor(e){var l=e.modalObj,n=e.path,a=e.field,t=e.isInArray,r=e.isRoot,o=e.saveType,s=e.rerender,d=_slicedToArray(React.useState(!1),2),u=d[0],i=d[1],e=_slicedToArray(React.useState(a),2),c=e[0],f=e[1],d=_slicedToArray(React.useState(!1),2),e=d[0],_=d[1];function m(e,t,a){if(jsonPointer.has(l,n+"/"+c+"/"+e))return!0;t instanceof Object?jsonPointer.set(l,n+"/"+c+"/"+e,DeepCopy(t)):jsonPointer.set(l,n+"/"+c+"/"+e,t),jsonPointer.remove(l,n+"/"+c+"/"+a),i(!u)}return React.useEffect(function(){jsonPointer.set(l,n+"/"+c+"/",""),i(!u)},[]),React.useEffect(function(){_(!1)},[u]),React__default.default.createElement("div",null,React__default.default.createElement("div",{className:styles.modalContentContainer},React__default.default.createElement("div",null,t?React__default.default.createElement("div",{className:styles.arrayIndex},React__default.default.createElement("div",{className:styles.arrayIndexInput},c)):React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Key"),React__default.default.createElement("input",{value:c,className:styles.modalInput,disabled:r,onChange:function(e){e=e.target.value,jsonPointer.has(l,n+"/"+e)||(jsonPointer.set(l,n+"/"+e,DeepCopy(jsonPointer.get(l,n+"/"+c))),jsonPointer.remove(l,n+"/"+c),f(e))},onBlur:function(e){e=e.target.value,c!==e&&f(c)}}))),React__default.default.createElement("div",{className:styles.modalNoLabel},React__default.default.createElement("span",null," : ")),React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel},"Type"),React__default.default.createElement("select",{className:styles.modalInput,name:"type",defaultValue:"object",onChange:function(e){e=e.target.value,jsonPointer.set(l,n+"/"+c,setDefaultValue(e)),o(e)}},typeOptions.map(function(e){return React__default.default.createElement("option",{key:e,value:e},e)}))),React__default.default.createElement("div",{className:styles.modalNoLabel},!(""===n||r||void 0===s)&&React__default.default.createElement("div",{className:styles.delButton},React__default.default.createElement("i",{className:styles.removeIcon,onClick:function(){removeNode(l,n,c,t),s()}})))),React__default.default.createElement("div",{className:styles.addLine},React__default.default.createElement("div",{className:styles.nodeLine},React__default.default.createElement("p",null)),React__default.default.createElement("div",null,React__default.default.createElement("div",null,Object.entries(jsonPointer.get(l,n+"/"+c)).map(function(e){var t=_slicedToArray(e,2),e=t[0],t=t[1];return React__default.default.createElement("div",{className:styles.listContainer,key:n+"/"+a+"/"+e+"/"+u},React__default.default.createElement("div",{className:styles.listLine}),React__default.default.createElement(ModalObjectContainer,{modalObj:l,field:e,value:t,valueType:TypeOfValue(t),isInArray:!1,path:n+"/"+c,saveField:m,rerender:function(){i(!u)}}))})),React__default.default.createElement("div",{className:styles.nodePlusLineContainer},React__default.default.createElement("div",{className:styles.nodePlusLine}),React__default.default.createElement("div",{className:styles.addButton},React__default.default.createElement("i",{className:styles.addIcon,onClick:function(){_(!1),jsonPointer.has(l,n+"/"+c+"/")?_(!0):(jsonPointer.set(l,n+"/"+c+"/",""),i(!u))}})),e&&React__default.default.createElement("div",{className:styles.warning},React__default.default.createElement("span",null,"please insert a key value"))))))}function TypeToString(e){e=e.input;return React__default.default.createElement("span",null,TypeOfValue(e))}function ValueToString(e){e=e.input,e=null==e?"null":"boolean"==typeof e?e?"true":"false":e;return React__default.default.createElement("span",null,e)}function JsonView(e){var a=e.input,l=e.jsonPath,r=e.jsonListOutput,n=e.deleteNode,o=e.setPrimitive,s=e.createModal,t=e.indent,d=void 0===t?1:t,u=e.needLeaf,i=void 0===u||u,c=TypeOfValue(a),t=React.useContext(UserContext),e=_slicedToArray(React.useState(!1),2),u=e[0],f=e[1];function _(e,t,a,l,n){s(e,t,a,l,n.current.offsetTop+n.current.clientHeight-r.current.scrollTop)}return void 0===a?React__default.default.createElement("div",{className:styles.nodeEmpty,style:{color:t.values.string,font:t.values.font}},"It doesn't have any data"):i&&"object"!==c&&"array"!==c?React__default.default.createElement("div",{key:d,className:styles.dataContainer},React__default.default.createElement("div",{className:styles.dataNode,onClick:function(){o(a,r.current.offsetTop+32)}},React__default.default.createElement("div",{className:styles.needLeaf,style:{backgroundColor:u?t.themes.hoverColor:""},onMouseOver:function(){f(!0)},onMouseLeave:function(){f(!1)}},React__default.default.createElement("div",null,React__default.default.createElement(JsonView,{jsonPath:l,input:a,indent:d,needLeaf:!1})),u&&React__default.default.createElement("div",{className:styles.rightContainer,style:{backgroundImage:"linear-gradient(to right, transparent 0, "+t.themes.hoverColor+" 0.5em)"}},React__default.default.createElement("div",{style:{font:t.values.font,fontStyle:"italic",color:t.themes.color}},React__default.default.createElement(TypeToString,{input:a})),React__default.default.createElement("div",{className:styles.rightButton},React__default.default.createElement("button",{style:{backgroundColor:t.buttons.delete},type:"button",onClick:function(e){e.stopPropagation(),e.preventDefault(),n(l)}},React__default.default.createElement("span",{style:{font:t.values.font,lineHeight:"normal"}},"Delete"))))))):"null"===c?React__default.default.createElement("div",{className:styles.valueData,style:{color:t.values.null,font:t.values.font}},React__default.default.createElement(ValueToString,{input:a})):"boolean"===c?React__default.default.createElement("div",{className:styles.valueData,style:{color:t.values.boolean,font:t.values.font}},React__default.default.createElement(ValueToString,{input:a})):"number"===c?React__default.default.createElement("div",{className:styles.valueData,style:{color:t.values.number,font:t.values.font}},React__default.default.createElement(ValueToString,{input:""===a?'""':a})):"string"===c?React__default.default.createElement("div",{className:styles.valueData,style:{color:t.values.string,font:t.values.font}},React__default.default.createElement(ValueToString,{input:""===a?'""':a})):0===Object.keys(a).length?React__default.default.createElement("div",{className:styles.dataContainer},React__default.default.createElement("div",{className:styles.dataNode},React__default.default.createElement("div",{className:styles.emptyObject,style:{backgroundColor:u?t.themes.hoverColor:""},onMouseOver:function(){f(!0)},onMouseLeave:function(){f(!1)}},React__default.default.createElement("div",{style:{paddingLeft:d+"em"}},React__default.default.createElement("div",{className:styles.valueData,style:{color:t.values.string,font:t.values.font}},React__default.default.createElement("span",null,JSON.stringify(a)))),u&&React__default.default.createElement("div",{className:styles.rightContainer,style:{backgroundImage:"linear-gradient(to right, transparent 0, "+t.themes.hoverColor+" 0.5em)"}},React__default.default.createElement("div",{style:{font:t.values.font,fontStyle:"italic",color:t.themes.color}},React__default.default.createElement(TypeToString,{input:a})),React__default.default.createElement("div",{className:styles.rightButton},React__default.default.createElement("button",{style:{backgroundColor:t.buttons.delete},type:"button",onClick:function(e){e.stopPropagation(),e.preventDefault(),n(l)}},React__default.default.createElement("span",{style:{font:t.values.font,lineHeight:"normal"}},"Delete"))))))):Object.entries(a).map(function(e){var t=_slicedToArray(e,2),e=t[0],t=t[1];return React__default.default.createElement(ViewNode,{key:l+"/"+e,jsonPath:l,field:e,value:t,indent:d,isInArray:a instanceof Array,deleteNode:n,setPrimitive:o,createModal:s,createEditModal:_,jsonListOutput:r})})}function ViewNode(e){var t=e.jsonPath,a=e.field,l=e.value,n=e.jsonListOutput,r=e.indent,o=e.isInArray,s=e.deleteNode,d=e.setPrimitive,u=e.createModal,i=e.createEditModal,c=_slicedToArray(React.useState(!0),2),f=c[0],_=c[1],e=_slicedToArray(React.useState(!1),2),c=e[0],m=e[1],y=l instanceof Object,p=React.useRef(),e=React.useContext(UserContext);return React__default.default.createElement("div",{className:styles.dataContainer},React__default.default.createElement("div",{className:styles.dataNode,ref:p},React__default.default.createElement("div",{className:styles.clickNode,style:{backgroundColor:c?e.themes.hoverColor:""},onMouseOver:function(){m(!0)},onMouseLeave:function(){m(!1)},onClick:function(e){e.stopPropagation(),e.preventDefault(),y?_(!f):i(t,a,l,o,p)}},React__default.default.createElement("div",{className:styles.keyData,style:{paddingLeft:r+"em"}},React__default.default.createElement("div",{className:styles.arrow,style:y?{}:{visibility:"hidden"}},React__default.default.createElement("i",{className:f?styles.arrowDown:styles.arrowRight})),React__default.default.createElement("div",{style:{display:"flex",color:e.key.color,font:e.key.font}},React__default.default.createElement("div",null,o&&React__default.default.createElement("div",{className:styles.arrayType}),React__default.default.createElement("span",null,""===a?'""':a)),React__default.default.createElement("div",{className:styles.keySpace},React__default.default.createElement("span",null,":")))),c&&React__default.default.createElement("div",{className:styles.rightContainer,style:{backgroundImage:"linear-gradient(to right, transparent 0, "+e.themes.hoverColor+" 0.5em)"}},React__default.default.createElement("div",{style:{font:e.values.font,fontStyle:"italic",color:e.themes.color}},React__default.default.createElement(TypeToString,{input:l})),React__default.default.createElement("div",{className:styles.rightButton},React__default.default.createElement("button",{style:{backgroundColor:e.buttons.add},type:"button",onClick:function(e){e.stopPropagation(),e.preventDefault(),i(t,a,l,o,p)}},React__default.default.createElement("span",{style:{font:e.values.font,lineHeight:"normal"}},y?"Add":"Edit"))),React__default.default.createElement("div",{className:styles.rightButton},React__default.default.createElement("button",{style:{backgroundColor:e.buttons.delete},type:"button",onClick:function(e){e.stopPropagation(),e.preventDefault(),s(t+"/"+a)}},React__default.default.createElement("span",{style:{font:e.values.font,lineHeight:"normal"}},"Delete")))),!y&&React__default.default.createElement(JsonView,{input:l,needLeaf:!1}))),y&&f&&React__default.default.createElement(JsonView,{jsonPath:t+"/"+a,input:l,indent:r+1,deleteNode:s,setPrimitive:d,needLeaf:!1,jsonListOutput:n,createModal:u}))}function ModalPrimitive(e){var t=e.primitiveValue,a=e.savePrimitive,t=_slicedToArray(React.useState(t),2),l=t[0],n=t[1],t=React.useContext(UserContext);return React__default.default.createElement("div",{key:"ModalEditor",className:styles.modalContainer},React__default.default.createElement("form",{onSubmit:function(e){e.preventDefault(),a(null===l?"null":l)}},React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalLabel,style:{font:t.key.font}},"Value"),React__default.default.createElement("input",{value:null===l?"null":l,className:styles.primitiveInput,onChange:function(e){n(e.target.value)}})),React__default.default.createElement("div",{style:{float:"right"}},React__default.default.createElement("div",{className:styles.modalBtnContainer},React__default.default.createElement("div",{className:styles.modalModifyBtnContainer},React__default.default.createElement("button",{type:"button",className:styles.modalButton,style:{backgroundColor:t.buttons.cancel},onClick:function(){a()}}," ",React__default.default.createElement("span",{style:{font:t.values.font,lineHeight:"normal"}},"Cancel")),React__default.default.createElement("button",{type:"submit",className:styles.modalButton,style:{backgroundColor:t.buttons.update}},React__default.default.createElement("span",{style:{font:t.values.font,lineHeight:"normal"}},"Update")))))))}function Editor(e){var t=e.input,a=e.jsonBoxRef,l=e.onChange,n={path:void 0,field:void 0,value:void 0,isInArray:void 0},r=React.useRef(),o=_slicedToArray(React.useState(),2),s=o[0],d=o[1],u=_slicedToArray(React.useState(!1),2),i=u[0],c=u[1],f=_slicedToArray(React.useState(n),2),_=f[0],m=f[1],y=_slicedToArray(React.useState(0),2),e=y[0],p=y[1],o=_slicedToArray(React.useState(),2),u=o[0],v=o[1],n=_slicedToArray(React.useState(!1),2),f=n[0],b=n[1],y=React.useContext(UserContext),o=_slicedToArray(React.useState(!1),2),n=o[0],R=o[1],g=DeepCopy(s);function E(e,t){d(t?DeepCopy(e):e),l(JSON.stringify(e,null," "))}function h(e){""===e?E(g=void 0):void 0!==e&&(jsonPointer.remove(g,e),E(g,g instanceof Object)),i&&c(!1)}function N(e,t){p(t),v(e)}function x(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:void 0,a=2<arguments.length&&void 0!==arguments[2]?arguments[2]:void 0,l=3<arguments.length&&void 0!==arguments[3]?arguments[3]:void 0,n=4<arguments.length?arguments[4]:void 0;void 0===t&&s instanceof Array?m({path:"/",field:Array.from(s).length,value:s,isInArray:l}):m({path:e,field:t,value:a,isInArray:l}),p(n),c(!0)}return React.useEffect(function(){d(function(e){try{return JSON.parse(e)}catch(e){return}}(t)),c(!1),v(void 0)},[t]),React__default.default.createElement("div",{className:styles.editorContainer},i&&React__default.default.createElement("div",null,React__default.default.createElement("div",{className:styles.overlay,style:{width:a.current.offsetWidth,height:a.current.offsetHeight}}),React__default.default.createElement("div",{style:{top:e,position:"absolute"}},React__default.default.createElement(ModalEditor,{editObject:_,changeNode:function(e,t){var a;void 0===s||""===e?E(g=t,g instanceof Object):("/"===e?s instanceof Array?(a=jsonPointer.get(s,"").length,Object.entries(t).map(function(e){var t=_slicedToArray(e,2),e=t[0],t=t[1];jsonPointer.set(g,"/"+a+"/"+e,t)})):(s instanceof Object||(g={}),Object.entries(t).map(function(e){var t=_slicedToArray(e,2),e=t[0],t=t[1];jsonPointer.set(g,"/"+e,t)})):jsonPointer.set(g,e,t),E(g,!0)),c(!1)},deleteNode:h}))),void 0!==u&&React__default.default.createElement("div",null,React__default.default.createElement("div",{className:styles.overlay,style:{width:a.current.offsetWidth,height:a.current.offsetHeight}}),React__default.default.createElement("div",{style:{top:e,position:"absolute"}},React__default.default.createElement(ModalPrimitive,{primitiveValue:u,savePrimitive:function(e){void 0!==e&&E('"'===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)),v(void 0)}}))),void 0===s&&f&&React__default.default.createElement("div",{className:styles.modalContainer,style:{minWidth:"300px"}},React__default.default.createElement("div",null,React__default.default.createElement("label",{className:styles.modalSelectLabel,style:{font:y.key.font}},"Please select type of new data")),React__default.default.createElement("div",{className:styles.modalSelectBtnContainer},React__default.default.createElement("button",{type:"button",className:styles.modalSelectBtn,style:{backgroundColor:y.themes.color},onClick:function(){N(""),b(!1)}},React__default.default.createElement("span",{style:{font:y.values.font,lineHeight:"normal"}},"Text")),React__default.default.createElement("button",{type:"button",className:styles.modalSelectBtn,style:{backgroundColor:y.themes.color},onClick:function(){x(""),b(!1)}},React__default.default.createElement("span",{style:{font:y.values.font,lineHeight:"normal"}},"Object")))),React__default.default.createElement("div",{key:"jsonBody",className:styles.JsonViewOutput},React__default.default.createElement("div",{className:styles.insertBanner,style:{backgroundColor:n?y.banner.hoverColor:y.themes.color},onMouseOver:function(){R(!0)},onMouseLeave:function(){R(!1)},onClick:function(){void 0!==s?x(""):b(!0)}},React__default.default.createElement("span",{className:styles.bannerSpan,style:{color:y.banner.fontColor,font:y.banner.font}}," + Insert Object")),React__default.default.createElement("div",{className:styles.jsonListOutput,ref:r},React__default.default.createElement(JsonView,{key:"DisplayJson",input:s,jsonPath:"",jsonListOutput:r,deleteNode:h,setPrimitive:N,createModal:x}))))}function JsonEditor(e){var t=e.jsonObject,a=e.onChange,l=e.theme,n=e.bannerStyle,r=e.keyStyle,o=e.valueStyle,s=e.buttonStyle,d=React.useRef(),e=React.useContext(UserContext);return React__default.default.createElement(UserContext.Provider,{value:{themes:void 0===l?e.themes:l,banner:void 0===n?e.banner:n,key:void 0===r?e.key:r,values:void 0===o?e.values:o,buttons:void 0===s?e.buttons:s}},React__default.default.createElement("div",{className:styles.container,ref:d},React__default.default.createElement(Editor,{input:t,jsonBoxRef:d,onChange:a})))}exports.JsonEditor=JsonEditor;