reactjs-json-editor/index.js

A react component which is basically JavaScript Object editor which lets to edit any JSON compatible JavaScript object passed to it.

!function(e,t){for(var n in t)e[n]=t[n]}(exports,function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=12)}([function(e,t){e.exports=require("react/jsx-runtime")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@babel/runtime/helpers/esm/getPrototypeOf")},function(e,t){e.exports=require("@babel/runtime/helpers/esm/setPrototypeOf")},function(e,t){e.exports=require("@babel/runtime/helpers/esm/isNativeReflectConstruct")},function(e,t){e.exports=require("@babel/runtime/helpers/esm/possibleConstructorReturn")},function(e,t){e.exports=require("@babel/runtime/helpers/esm/arrayWithoutHoles")},function(e,t){e.exports=require("@babel/runtime/helpers/esm/iterableToArray")},function(e,t){e.exports=require("@babel/runtime/helpers/esm/unsupportedIterableToArray")},function(e,t){e.exports=require("@babel/runtime/helpers/esm/nonIterableSpread")},function(e,t){e.exports=require("@babel/runtime/helpers/esm/defineProperty")},function(e,t,n){},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function i(e,t,n){return t&&a(e.prototype,t),n&&a(e,n),e}n.r(t),n.d(t,"JSONEditor",(function(){return M}));var o=n(3),s=n.n(o);function l(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&s()(e,t)}var u=n(2),c=n.n(u),d=n(4),p=n.n(d),h=n(5),m=n.n(h);function v(e){var t=p()();return function(){var n,r=c()(e);if(t){var a=c()(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return m()(this,n)}}var j=n(1),f=n(6),b=n.n(f),g=n(7),y=n.n(g),C=n(8),w=n.n(C),x=n(9),O=n.n(x);function k(e){return b()(e)||y()(e)||w()(e)||O()()}var N=n(0),E=function(e){l(n,e);var t=v(n);function n(){var e;r(this,n);for(var a=arguments.length,i=new Array(a),o=0;o<a;o++)i[o]=arguments[o];return(e=t.call.apply(t,[this].concat(i))).state={editing:!1},e.beginEdit=function(){return e.setState({editing:!0,editText:e.props.name})},e.textChanged=function(t){var n=t.currentTarget.value;return e.setState({editText:n})},e.keyPressed=function(t){13===t.keyCode?e.endEdit():27===t.keyCode&&e.setState({editing:!1,editText:null})},e.endEdit=function(){e.props.onChange(e.state.editText,e.props.field),e.setState({editing:!1,editText:null})},e.onAddClicked=function(){return e.props.onAddClicked(e.props.name)},e.onRemoveClicked=function(){return e.props.onRemoveClicked(e.props.name)},e}return i(n,[{key:"render",value:function(){var e=this.props,t=e.name,n=e.display,r=void 0===n?t:n,a=e.expanded,i=e.onToggle,o=e.onAddClicked,s=e.onRemoveClicked,l=e.allowEdit,u=this.state,c=u.editing,d=u.editText,p=i&&Object(N.jsx)("span",{className:"je-expander"+(a?" open":""),onClick:i});return r?c?Object(N.jsxs)("span",{className:"je-name-input-container",children:[Object(N.jsx)("input",{type:"text",className:"je-name-editor-input",autoFocus:!0,value:d,onChange:this.textChanged,onBlur:this.endEdit,onKeyUp:this.keyPressed})," : "]}):Object(N.jsxs)("span",{className:"je-item-name",children:[p,!!o&&Object(N.jsx)("span",{className:"je-icon je-add-new-item",onClick:this.onAddClicked,title:"Add new item"}),!!s&&Object(N.jsx)("span",{className:"je-icon je-remove-item",onClick:this.onRemoveClicked,title:"Remove this item"}),Object(N.jsxs)("span",{onDoubleClick:l&&this.beginEdit,children:[r,":"]})]}):p||null}}]),n}(j.PureComponent),P=["{","[",'"',"'"],A=function(e){l(n,e);var t=v(n);function n(){var e;r(this,n);for(var a=arguments.length,i=new Array(a),o=0;o<a;o++)i[o]=arguments[o];return(e=t.call.apply(t,[this].concat(i))).state={editing:!1},e.beginEdit=function(){return e.setState({editing:!0,editText:e.props.value})},e.textChanged=function(t){var n=t.currentTarget.value;return e.setState({editText:n})},e.keyPressed=function(t){13===t.keyCode&&(t.altKey||t.ctrlKey)?(t.preventDefault(),e.endEdit()):27===t.keyCode&&e.setState({editing:!1,editText:null})},e.endEdit=function(){var t=e.getFormattedValue();e.props.onChange(t,e.props.field),e.setState({editing:!1,editText:null})},e}return i(n,[{key:"getFormattedValue",value:function(){var e=this.state.editText;switch(this.props.type){case"number":var t=Number(e);if(e&&!isNaN(t))return t;break;case"date":var n=new Date(e);if(e&&!isNaN(n))return n;break;default:return this.autoFormatValue(e)}return this.autoFormatValue(e)}},{key:"autoFormatValue",value:function(e){var t=e.trim();if("null"===t)return null;if("undefined"!==t){if("true"===t)return!0;if("false"===t)return!1;var n=t[0];if(P.includes(n))try{return JSON.parse(t)}catch(i){}var r=Number(t);if(t&&!isNaN(r))return r;var a=new Date(t);return t&&!isNaN(a)?a:e}}},{key:"render",value:function(){var e=this.props,t=e.value,n=e.displayValue,r=void 0===n?t:n,a=e.type,i=e.allowEdit,o=this.state,s=o.editing,l=o.editText;return s?Object(N.jsx)("span",{className:"je-value-input-container",children:Object(N.jsx)("textarea",{className:"je-value-editor-input",value:l,onChange:this.textChanged,onBlur:this.endEdit,onKeyUp:this.keyPressed,autoFocus:!0})}):Object(N.jsx)("span",{className:"je-item-value "+a,onDoubleClick:i&&this.beginEdit,children:r})}}]),n}(j.PureComponent),S=/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/;var R=function(e){l(n,e);var t=v(n);function n(){var e;r(this,n);for(var a=arguments.length,i=new Array(a),o=0;o<a;o++)i[o]=arguments[o];return(e=t.call.apply(t,[this].concat(i))).valueChanged=function(t){return e.props.onChange(t,e.props.name)},e.nameChanged=function(t){return e.props.onNameChange(t,e.props.name)},e}return i(n,[{key:"render",value:function(){var e=this.props,t=e.name,n=e.value,r=e.displayName,a=e.displayValue,i=e.onAddClicked,o=e.onRemoveClicked,s=typeof n;null===n?(s="null",a=n="null"):void 0===n?a=n="undefined":"string"!==s&&(a=n.toString()),"string"!==s||a||(a=function(e){return!!S.test(null===e||void 0===e?void 0:e.trim())}(n)?Object(N.jsxs)(N.Fragment,{children:['"',Object(N.jsx)("span",{className:"je-url-display",children:n}),'"',Object(N.jsx)("a",{href:n.trim(),target:"_blank",rel:"noreferrer",className:"url-value",children:Object(N.jsx)("span",{className:"je-icon je-launch-url",title:"Click to launch the url"})})]}):Object(N.jsxs)(N.Fragment,{children:['"',Object(N.jsx)("span",{className:"string-value",children:n}),'"']}));var l=this.props,u=l.allowEditValue,c=l.allowEditKey;return Object(N.jsx)("div",{className:"je-item-block je-simple-"+s,children:Object(N.jsxs)("span",{children:[Object(N.jsx)(E,{name:t,display:r,allowEdit:c,onChange:this.nameChanged,onAddClicked:i,onRemoveClicked:o}),Object(N.jsx)(A,{allowEdit:u,type:s,displayValue:a,value:n,onChange:this.valueChanged})]})})}}]),n}(j.PureComponent),T=function(e){l(n,e);var t=v(n);function n(){var e;r(this,n);for(var a=arguments.length,i=new Array(a),o=0;o<a;o++)i[o]=arguments[o];return(e=t.call.apply(t,[this].concat(i))).state={show:!1},e.nameChanged=function(t){return e.props.onNameChange(t,e.props.name)},e.toggleItems=function(){return e.setState({show:!e.state.show})},e.itemChanged=function(t,n){var r=e.props,a=r.name,i=r.value;(i=k(i))[n]=t,e.props.onChange(i,a)},e.addClicked=function(t){var n=e.props,r=n.name,a=n.value;(a=k(a)).splice(t,0,null),e.props.onChange(a,r)},e.removeClicked=function(t){var n=e.props,r=n.name,a=n.value;(a=k(a)).splice(t,1),e.props.onChange(a,r)},e}return i(n,[{key:"getSubItems",value:function(){var e=this,t=this.state.show;if(!t&&!this.keys)return null;var n=this.props,r=n.value,a=n.allowEditValue,i=n.allowEditKey,o=n.allowRemove,s=n.allowInsert;if(this.value!==r&&(this.value=r,this.keys=r.map((function(t,n){var r=_(t);return Object(N.jsx)(r,{name:n,displayName:n.toString(),value:t,onAddClicked:s&&e.addClicked,onRemoveClicked:o&&e.removeClicked,onChange:e.itemChanged,allowEditValue:a,allowEditKey:i,allowRemove:o,allowInsert:s},n)})),s)){var l=Object(N.jsx)("span",{className:"je-icon je-add-new-item"}),u=Object(N.jsx)("span",{className:"je-add-item-text",title:"Double click to add new item",children:"<<add new item>>"});this.keys.push(Object(N.jsx)(R,{name:r.length,displayName:l,value:"",displayValue:u,onChange:this.itemChanged,allowEditKey:!1,allowEditValue:!0},"newItem"))}return Object(N.jsx)("div",{className:"je-sub-items "+(t?"":" closed"),children:this.keys})}},{key:"render",value:function(){var e=this.props,t=e.name,n=e.value,r=e.displayName,a=e.onAddClicked,i=e.onRemoveClicked;return Object(N.jsxs)("div",{className:"je-item-block je-array",children:[Object(N.jsxs)("span",{children:[Object(N.jsx)(E,{name:t,display:r,expanded:this.state.show,onChange:this.nameChanged,onToggle:this.toggleItems,onAddClicked:a,onRemoveClicked:i}),Object(N.jsxs)("span",{className:"je-item-value array",children:["Array ",Object(N.jsxs)("span",{className:"array-count",onClick:this.toggleItems,children:["[",n.length.toString(),"]"]})]})]}),this.getSubItems()]})}}]),n}(j.PureComponent),I=function(e){l(n,e);var t=v(n);function n(){var e;r(this,n);for(var a=arguments.length,i=new Array(a),o=0;o<a;o++)i[o]=arguments[o];return(e=t.call.apply(t,[this].concat(i))).valueChanged=function(t){return e.props.onChange(t,e.props.name)},e.nameChanged=function(t){return e.props.onNameChange(t,e.props.name)},e}return i(n,[{key:"render",value:function(){var e=this.props,t=e.name,n=e.value,r=e.displayName,a=e.onAddClicked,i=e.onRemoveClicked,o=this.props,s=o.allowEditValue,l=o.allowEditKey;return Object(N.jsx)("div",{className:"je-item-block je-date",children:Object(N.jsxs)("span",{children:[Object(N.jsx)(E,{name:t,display:r,allowEdit:l,onChange:this.nameChanged,onAddClicked:a,onRemoveClicked:i}),Object(N.jsx)(A,{allowEdit:s,type:"date",value:n.toJSON(),onChange:this.valueChanged})]})})}}]),n}(j.PureComponent),V=n(10),K=n.n(V);function D(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function q(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?D(Object(n),!0).forEach((function(t){K()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):D(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var F={array:T,date:I,object:function(e){l(n,e);var t=v(n);function n(){var e;r(this,n);for(var a=arguments.length,i=new Array(a),o=0;o<a;o++)i[o]=arguments[o];return(e=t.call.apply(t,[this].concat(i))).state={show:!1},e.nameChanged=function(t){return e.props.onNameChange(t,e.props.name)},e.toggleItems=function(){return e.setState({show:!e.state.show})},e.propChanged=function(t,n){var r=e.props,a=r.name,i=r.value;(i=q({},i))[n]=t,e.props.onChange(i,a)},e.nameChanged=function(t,n){var r;if(t=null===(r=t)||void 0===r?void 0:r.trim(),(null===n||void 0===n?void 0:n.trim())===t)return!1;var a=e.props,i=a.name,o=a.value;o.hasOwnProperty(t)||(o=q({},o),n?(o[t]=o[n],delete o[n]):o[t]=null,e.props.onChange(o,i))},e.removeClicked=function(t){var n=e.props,r=n.name,a=n.value;delete(a=q({},a))[t],e.props.onChange(a,r)},e}return i(n,[{key:"getSubItems",value:function(){var e=this,t=this.state.show;if(!t&&!this.keys)return null;var n=this.props,r=n.value,a=n.allowEditValue,i=n.allowEditKey,o=n.allowRemove,s=n.allowInsert;if(this.value!==r&&(this.value=r,this.keys=Object.keys(r).map((function(t){var n=r[t],l=_(n);return Object(N.jsx)(l,{name:t,value:n,onChange:e.propChanged,onNameChange:e.nameChanged,onRemoveClicked:o&&e.removeClicked,allowEditValue:a,allowEditKey:i,allowRemove:o,allowInsert:s},t)})),s)){var l=Object(N.jsx)("span",{className:"je-icon je-add-new-item"}),u=Object(N.jsxs)("span",{className:"je-add-item-text",title:"Double click to add new property",children:[l," <<add new prop>>"]});this.keys.push(Object(N.jsx)("div",{className:"je-item-block je-object",children:Object(N.jsxs)("span",{children:[Object(N.jsx)(E,{display:u,onChange:this.nameChanged,allowEdit:!0}),Object(N.jsx)("span",{className:"je-item-value null",children:"null"})]})},"je-newProp001"))}return Object(N.jsx)("div",{className:"je-sub-items "+(t?"":" closed"),children:this.keys})}},{key:"render",value:function(){var e=this.props,t=e.name,n=e.displayName,r=e.onAddClicked,a=e.onRemoveClicked,i=e.allowEditKey,o=e.allowRemove,s=e.allowInsert;return Object(N.jsxs)("div",{className:"je-item-block je-object",children:[Object(N.jsxs)("span",{children:[Object(N.jsx)(E,{name:t,display:n,expanded:this.state.show,allowEdit:i,onChange:this.nameChanged,onToggle:this.toggleItems,onAddClicked:s&&r,onRemoveClicked:o&&a}),Object(N.jsxs)("span",{className:"je-item-value object",children:["Object ",Object(N.jsxs)("span",{className:"object-curly",onClick:this.toggleItems,children:["{","\u2026","}"]})]})]}),this.getSubItems()]})}}]),n}(j.PureComponent)};function _(e){if(!e)return R;var t=typeof e;return"object"===t&&(t=Array.isArray(e)?"array":e instanceof Date?"date":t),F[t]||R}n(11);var M=function(e){l(n,e);var t=v(n);function n(){var e;r(this,n);for(var a=arguments.length,i=new Array(a),o=0;o<a;o++)i[o]=arguments[o];return(e=t.call.apply(t,[this].concat(i))).valueChanged=function(t){var n=e.props,r=n.onChange,a=n.args;r&&r(t,a)},e}return i(n,[{key:"render",value:function(){var e=this.props,t=e.value,n=e.onChange,r=e.allowEditValue,a=void 0===r||r,i=e.allowEditKey,o=void 0===i||i,s=e.allowRemove,l=void 0===s||s,u=e.allowInsert,c=void 0===u||u,d=_(t);return Object(N.jsx)("div",{className:"je-object-editor",children:Object(N.jsx)(d,{value:t,onChange:this.valueChanged,allowEditKey:n&&o,allowEditValue:n&&a,allowRemove:n&&l,allowInsert:n&&c})})}}]),n}(j.PureComponent)}]));