index.js

"use strict";function __extends(e,t){function a(){this.constructor=e}for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);e.prototype=null===t?Object.create(t):(a.prototype=t.prototype,new a)}function htmlEncode(e){return null!=e?e.toString().replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;"):""}function generateSpace(e){for(var t="",a=0;a<e;a++)t+=" ";return t}function objectSize(e){var t=0;for(var a in e)e.hasOwnProperty(a)&&t++;return t}Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),JsonObject=function(e){function t(){var t=this;e.apply(this,arguments),this.state={Collapsed:!1},this.onClick=function(e){t.toggleCollapse()}}return __extends(t,e),t.prototype.componentWillMount=function(){var e=this;null!=this.props.clickId&&formatter.RegisterClickCallback(this.props.clickId,function(){e.toggleCollapse()})},t.prototype.toggleCollapse=function(){this.setState(function(e){return e.Collapsed=!e.Collapsed,e})},t.prototype.renderItems=function(e){var t=new Array,a=objectSize(e),n=function(n){var l=htmlEncode(n),r=formatter.valueToHtml(e[n],s.props.spaces,s.props.level),c=r.collapsible?"collapsible":"";a--,t.push(React.createElement("div",{key:"object-item-"+n},generateSpace(s.props.level*s.props.spaces+s.props.spaces),React.createElement("span",{className:"key "+c,onClick:function(){r.collapsible&&null!=r.onClickHandler&&r.onClickHandler()}},'"'+l+'"'),":",r.content,0!==a?",":""))},s=this;for(var l in e)n(l);return t},t.prototype.render=function(){var e=this.renderItems(this.props.json),t=this.state.Collapsed?"collapsed":"";if(e.length>0){var a=this.props.level*this.props.spaces,n=React.createElement("div",{className:"items"},e);return this.state.Collapsed&&(n=React.createElement("span",{className:"count"},e.length),a=0),React.createElement("span",{className:"object "+t},React.createElement("span",{className:"brackets collapsible",onClick:this.onClick},"{"),n,React.createElement("span",{className:"brackets collapsible",onClick:this.onClick},generateSpace(a),"}"))}return React.createElement("span",{className:"object"},"{ }")},t}(React.Component),JsonArray=function(e){function t(){var t=this;e.apply(this,arguments),this.state={Collapsed:!1},this.onClick=function(e){t.toggleCollapse()}}return __extends(t,e),t.prototype.componentWillMount=function(){var e=this;null!=this.props.clickId&&formatter.RegisterClickCallback(this.props.clickId,function(){e.toggleCollapse()})},t.prototype.toggleCollapse=function(){this.setState(function(e){return e.Collapsed=!e.Collapsed,e})},t.prototype.renderItems=function(e){var t=new Array,a=e.length;for(var n in e){var s=formatter.valueToHtml(e[n],this.props.spaces,this.props.level);a--,t.push(React.createElement("div",{key:"array-item-"+n},generateSpace(this.props.level*this.props.spaces+this.props.spaces),s.content,0!==a?",":""))}return t},t.prototype.render=function(){var e=this.renderItems(this.props.json);if(e.length>0){var t=this.props.level*this.props.spaces,a=React.createElement("div",{className:"items"},e);return this.state.Collapsed&&(a=React.createElement("span",{className:"count"},e.length),t=0),React.createElement("span",{className:"array"},React.createElement("span",{className:"brackets collapsible",onClick:this.onClick},"["),a,React.createElement("span",{className:"brackets collapsible",onClick:this.onClick},generateSpace(t),"]"))}return React.createElement("span",{className:"array"},"[ ]")},t}(React.Component),Formatter=function(){function e(){this.uniqueId=0,this.callbacks=[]}return e.prototype.valueToHtml=function(t,a,n){var s=this;void 0===n&&(n=-1);var l,r=typeof t,c=this.uniqueId;if(n++,null==t)l=React.createElement("span",{className:"null"},"null");else{if(t&&t.constructor===Array)return this.uniqueId++,{content:React.createElement("span",{className:"array"},React.createElement(JsonArray,{json:t,spaces:a,level:n,clickId:c})),collapsible:!0,onClickHandler:function(){s.callbacks[c]()}};if("object"===r)return this.uniqueId++,{content:React.createElement("span",{className:"object"},React.createElement(JsonObject,{json:t,spaces:a,level:n,clickId:c})),collapsible:!0,onClickHandler:function(){s.callbacks[c]()}};"number"===r?l=React.createElement("span",{className:"number"},t):"string"===r?l=e.URL_PATTERN.test(t)?React.createElement("span",{className:"url"},'"',React.createElement("a",{href:t,target:"_blank"},t),'"'):React.createElement("span",{className:"string"},'"'+t+'"'):"boolean"===r&&(l=React.createElement("span",{className:"boolean"},t.toString()))}return{content:l,collapsible:!1}},e.prototype.RegisterClickCallback=function(e,t){this.callbacks[e]=t},e.URL_PATTERN=/^(http|https):\/\/[^\s]+$/,e}(),formatter=new Formatter,JsonView=function(e){function t(){e.apply(this,arguments)}return __extends(t,e),t.prototype.render=function(){return React.createElement("div",{className:"json-view"},formatter.valueToHtml(this.props.json,this.props.spaces).content)},t.defaultProps={json:void 0,spaces:4},t}(React.Component);exports.default=JsonView;