react-json-verbling/build/Json-no-freezer.min.js

A JSON editor packed as a React.js component and the simplest way of creating web forms.

/*
react-json v0.0.1
https://github.com/arqex/react-json
MIT: https://github.com/arqex/react-json/raw/master/LICENSE
*/
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require(void 0),require(void 0)):"function"==typeof define&&define.amd?define([,],t):"object"==typeof exports?exports.Json=t(require(void 0),require(void 0)):e.Json=t(e.React,e.Freezer)}(this,function(e,t){return function(e){function t(n){if(s[n])return s[n].exports;var i=s[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){var n=s(1),i=s(2),r=s(13),a=s(3),o=s(4),u=s(5),p=s(6),l=s(7),d=s(8),c=s(9),h=s(10),f=s(11),g=s(12),v=n.createClass({getDefaultProps:function(){return{value:{},errors:!1,updating:!1}},childContextTypes:{typeDefaults:n.PropTypes.object},getChildContext:function(){return{typeDefaults:this.state.defaults}},getInitialState:function(){var e=this,t=this.props.value;return t.getListener||(t=new i(t).get()),t.getListener().on("update",function(t){return e.state.updating?e.setState({updating:!1}):(e.setState({value:t}),e.state.errors&&e.getValidationErrors(),void(e.props.onChange&&e.props.onChange(t.toJS())))}),{value:t,defaults:this.createDefaults(),id:this.getId()}},componentWillReceiveProps:function(e){e.value.getListener||this.setState({updating:!0,value:this.state.value.reset(e.value)}),this.setState({defaults:this.createDefaults()})},render:function(){var e=this.props.settings||{},t=n.createElement(a,{type:"object",value:this.state.value,settings:r({},this.state.defaults.object,{fields:e.fields,editing:this.getFormSetting(e,"editing","always"),fixedFields:this.getFormSetting(e,"fixedFields",!0),adder:this.getFormSetting(e,"adder",!1),header:!1,order:e.order}),ref:"value",defaults:this.state.defaults,id:this.state.id});return n.DOM.div({className:"jsonEditor"},t)},getValue:function(){return this.state.value.toJS()},getValidationErrors:function(){var e=this.getValue(),t=this.refs.value.getValidationErrors(e);return this.setState({errors:t.length}),t.length?t:!1},getDeepSettings:function(){var e={};for(var t in g)e[t]=g[t](this,e[t]);return e},createDefaults:function(){var e=this.props.settings||{},t=a.prototype.components,s=e.defaults||{},n={};for(var i in t)n[i]=r({},t[i].prototype.defaults||{},s[i]||{});return n},getId:function(){return btoa(parseInt(1e4*Math.random())).replace(/=/g,"")},getFormSetting:function(e,t,s){return"undefined"!=typeof e[t]?e[t]:e.form?s:void 0}});v.registerType=a.registerType.bind(a),v.registerType("object",o),v.registerType("array",u,!0),v.registerType("string",p,!0),v.registerType("text",c,!0),v.registerType("number",d,!0),v.registerType("boolean",l,!0),v.registerType("password",h),v.registerType("select",f),e.exports=v},function(t,s,n){t.exports=e},function(e,s,n){e.exports=t},function(e,t,s){"use strict";var n=s(1),i=s(12),r=s(13),a=n.createClass({components:{},typeCheckOrder:[],contextTypes:{typeDefaults:n.PropTypes.object},render:function(){var e=this.getComponent(),t=r({},this.context.typeDefaults[this.props.type],this.props.settings);return this.addDeepSettings(t),n.createElement(e,{value:this.props.value,settings:t,onUpdated:this.props.onUpdated,id:this.props.id,ref:"field"})},getComponent:function(){var e=this.props.type;return e||(e=this.guessType(this.props.value)),this.fieldType=e,this.components[e]},guessType:function(e){for(var t,s=!1,n=0,i=this.typeCheckOrder;!s&&n<i.length;)t=this.components[i[n]].prototype,t.isType&&t.isType(e)?s=i[n++]:n++;return s||"object"},getValidationErrors:function(e){return this.refs.field.getValidationErrors(e)},addDeepSettings:function(e){var t,s=this.props.parentSettings||{};for(var n in i)t=i[n](s[n],e[n]),"undefined"!=typeof t&&(e[n]=t)}});a.registerType=function(e,t,s){var n=a.prototype;n.components[e]=t,s&&n.typeCheckOrder.unshift(e)},e.exports=a},function(e,t,s){"use strict";var n=s(1),i=s(14),r=s(13),a=s(15),o=n.createClass({mixins:[a],getInitialState:function(){return this.getStateFromProps(this.props)},getStateFromProps:function(e){return{editing:e.settings.editing||!1,fields:r({},e.settings&&e.settings.fields||{})}},defaultValue:{},render:function(){var e=this,t=this.props.settings,s=this.state.editing||t.header===!1?"open jsonObject jsonCompound":"jsonObject jsonCompound",i="",a=(this.state.fields,[]),o=(r({},this.props.value),this.getFixedFields()),u=0;this.getFieldOrder().forEach(function(t){a.push(t.constructor===Array?e.renderGroup(t,o,++u):e.renderField(t,o))});var p=[a];return t.adder!==!1&&p.push(this.renderAdder()),i=n.DOM.div({key:"o",className:"jsonChildren"},p),n.DOM.span({className:s},[this.renderHeader(),i])},renderField:function(e,t){var s=this.props.value[e],r=this.state.fields[e]||{},a=t===!0||"object"==typeof t&&t[e];return r.settings||(r.settings={}),n.createElement(i,{value:s,key:e,name:e,ref:e,fixed:a,id:this.props.id,definition:r,onUpdated:this.updateField,onDeleted:this.deleteField,parentSettings:this.props.settings})},renderGroup:function(e,t,s){var i=this,r=[];return e.forEach(function(e){r.push(i.renderField(e,t))}),n.DOM.div({className:"jsonGroup jsonGroup_"+s},r)},getDefaultHeader:function(){return"Map ["+Object.keys(this.props.value).length+"]"},getDefaultAdder:function(){return"+ Add field"},updateField:function(e,t){this.checkEditingSetting(e),this.props.value.set(e,t)},deleteField:function(e){this.props.value.remove(e)},getValidationErrors:function(e){var t=this,s=[],n=Object.keys(this.refs);return n.forEach(function(e){var n=t.refs[e].getValidationErrors();n&&(s=s.concat(n))}),s},getFieldOrder:function(){var e,t=this,s=this.props.settings.order,n=typeof s,i=this.props.settings.fields||{};if(!s||"function"!=n&&s.constructor!==Array)return Object.keys(this.props.value);var a=r({},this.props.value),o=[];if("function"==n)return s(a);s.constructor===Array&&s.forEach(function(s){s.constructor==Array?(e=[],s.forEach(function(s){t.addFieldToOrder(s,a,i)&&(e.push(s),delete a[s])}),e.length&&o.push(e)):t.addFieldToOrder(s,a,i)&&(o.push(s),delete a[s])});for(var u in a)-1==o.indexOf(u)&&o.push(u);return o},addFieldToOrder:function(e,t,s){return"undefined"!=typeof t[e]||s[e]&&"react"==s[e].type}});e.exports=o},function(e,t,s){"use strict";var n=s(1),i=s(14),r=(s(13),s(15)),a=n.createClass({mixins:[r],getInitialState:function(){return this.getStateFromProps(this.props)},getStateFromProps:function(e){return{editing:e.settings.editing||!1,fields:this.state&&this.state.fields||{}}},defaultValue:[],render:function(){for(var e,t,s=this.props.settings,r=this.state.editing?"open jsonArray jsonCompound":"jsonArray jsonCompound",a="",o=this.getFixedFields(),u=this.state.fields,p=[],l=0;l<this.props.value.length;l++)e=u[l]||{},e.settings||(e.settings={}),t=o===!0||"object"==typeof o&&o[l],p.push(n.createElement(i,{value:this.props.value[l],key:l,name:l,id:this.props.id,definition:e,fixed:t,onUpdated:this.updateField,onDeleted:this.deleteField,parentSettings:this.props.settings}));var d=[p];return s.adder!==!1&&d.push(this.renderAdder(this.props.value.length)),a=n.DOM.div({key:"o",className:"jsonChildren"},d),n.DOM.span({className:r},[this.renderHeader(),a])},getDefaultHeader:function(){return"List ["+this.props.value.length+"]"},getDefaultAdder:function(){return"+ Add element"},updateField:function(e,t){this.checkEditingSetting(e),this.props.value.set(e,t)},deleteField:function(e){var t={};for(var s in this.state.fields)s>e?t[s-1]=this.state.fields[s]:e>s&&(t[s]=this.state.fields[s]);this.props.value.splice(e,1),this.setState({fields:t})},isType:function(e){return e&&e.constructor==Array}});e.exports=a},function(e,t,s){var n=s(1),i=s(16),r=n.createClass({mixins:[i],typeClass:"jsonString",inputType:"text",defaultValue:"",getInitialState:function(){return this.getStateFromProps(this.props)},render:function(){return this.renderInput()},updateValue:function(e){this.setState({value:e.target.value})},isType:function(e){return"object"!=typeof e}});e.exports=r},function(e,t,s){var n=s(1),i=n.createClass({defaultValue:!1,render:function(){var e="jsonBoolean";return n.DOM.input({type:"checkbox",className:e,id:this.props.id,checked:this.props.value,onChange:this.updateValue})},updateValue:function(e){this.props.onUpdated(e.target.checked)},isType:function(e){return"boolean"==typeof e},componentWillReceiveProps:function(e){this.props.value!=e.value&&this.setState({value:e.value})}});e.exports=i},function(e,t,s){var n=s(1),i=s(16),r=n.createClass({mixins:[i],typeClass:"jsonNumber",inputType:"number",defaultValue:"",getInitialState:function(){return this.getStateFromProps(this.props)},render:function(){return this.renderInput()},updateValue:function(e){this.setState({value:parseFloat(e.target.value)})},isType:function(e){return"number"==typeof e}});e.exports=r},function(e,t,s){var n=s(1),i=s(16),r=n.createClass({mixins:[i],defaultValue:"",getInitialState:function(){return this.getStateFromProps(this.props)},render:function(){var e="jsonText";return this.state.editing?n.DOM.textarea({value:this.state.value,id:this.props.id,onChange:this.updateValue,placeholder:this.props.settings.placeholder||"",onBlur:this.setValue,ref:"input"}):n.DOM.span({onClick:this.setEditMode,className:e},this.props.value)},updateValue:function(e){this.setState({value:e.target.value})},isType:function(e){return"string"==typeof e&&e.length>100}});e.exports=r},function(e,t,s){var n=s(1),i=s(16),r=n.createClass({mixins:[i],typeClass:"jsonPassword",inputType:"password",defaultValue:"",getInitialState:function(){return this.getStateFromProps(this.props)},render:function(){return this.renderInput()},getDisplayModeString:function(){return this.getWildcards()},getWildcards:function(){for(var e="",t=this.state.value.length-1;t>=0;t--)e+="*";return e},isType:function(){return!1},updateValue:function(e){this.setState({value:e.target.value})}});e.exports=r},function(e,t,s){var n=s(1),i=n.createClass({defaultValue:"",getInitialState:function(){return{value:this.props.value}},render:function(){var e="jsonSelect";return n.DOM.select({className:e,id:this.props.id,value:this.props.value,onChange:this.updateValue},this.renderOptions())},renderOptions:function(){var e=this.props.settings.options,t=[];return e&&e.length?(e.forEach(function(e){var s=e;"object"!=typeof e&&(s={value:e,label:e}),t.push(n.DOM.option({value:s.value},s.label))}),t):t},updateValue:function(e){this.props.onUpdated(e.target.value)},componentWillReceiveProps:function(e){this.props.value!=e.value&&this.setState({value:e.value})}});e.exports=i},function(e,t,s){e.exports={editing:function(e,t){return"undefined"!=typeof t?t:"always"==e?"always":void 0},adder:function(e,t){return"undefined"!=typeof t?t:"undefined"!=typeof e?e:!0},fixedFields:function(e,t){return"undefined"!=typeof t?t:"boolean"==typeof e?e:void 0}}},function(e,t,s){"use strict";function n(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=Object.assign||function(e,t){for(var s,i,r=n(e),a=1;a<arguments.length;a++){s=arguments[a],i=Object.keys(Object(s));for(var o=0;o<i.length;o++)r[i[o]]=s[i[o]]}return r}},function(e,t,s){"use strict";var n=s(1),i=s(13),r=s(17),a=s(3),o=n.createClass({getInitialState:function(){return{error:!1}},getDefaultProps:function(){return{definition:{}}},render:function(){var e,t=this.props.definition||{},s="jsonField",i=t.type||a.prototype.guessType(this.props.value),r=this.props.id+"_"+this.props.name,o="";if("react"==i)return this.renderReactField(t);e=this.renderTypeField(i,r),s+=" "+i+"Field",this.state.error&&(s+=" jsonError",this.state.error!==!0&&(o=n.DOM.span({key:"e",className:"jsonErrorMsg"},this.state.error)));var u=[n.DOM.label({key:"s1",htmlFor:r},(t.title||this.props.name)+":")];return u.unshift(this.props.fixed?n.DOM.span({key:"f",className:"jsonFixed"}):n.DOM.a({key:"a",href:"#",className:"jsonRemove",onClick:this.handleRemove},"x")),n.DOM.div({className:s},[n.DOM.span({className:"jsonName",key:"n"},u),n.DOM.span({className:"jsonValue",key:"v"},e),o])},renderTypeField:function(e,t){var s,r=this.props.definition,o=i({},r.settings||{});return r.fields&&(o.fields=r.fields),s=n.createElement(a,{type:e,value:this.props.value,settings:o,onUpdated:this.onUpdated,ref:"typeField",id:t,parentSettings:this.props.parentSettings})},renderReactField:function(e){return n.DOM.div({className:"jsonField reactField"},e.output)},handleRemove:function(e){this.props.onDeleted(this.props.name)},shouldComponentUpdate:function(e,t){return e.value!=this.props.value||t.error!=this.state.error},onUpdated:function(e){var t=this.props.definition;this.props.value!==e&&(this.props.onUpdated(this.props.name,e),t.onChange&&t.onChange(e,this.props.value))},getValidationErrors:function(e){var t=[],s=this.props.definition.validates,n=this.props.name,i=this.refs.typeField;if(!i)return[];if("object"==i.fieldType&&(t=i.getValidationErrors(e),t.forEach(function(e){e.path=e.path?n+"."+e.path:n}),t.length&&this.setState({error:!0})),!s)return t;var a,o=r.getValidationError(this.props.value,e,s);return o?(a=this.props.definition.errorMessage,a||(a=(this.props.definition.label||this.props.name)+" value is not valid."),o.path=n,o.message=a,this.setState({error:a}),t=t.concat([o])):this.state.error&&this.setState({error:!1}),t}});e.exports=o},function(e,t,s){"use strict";var n=s(1),i=s(18),r=s(13);e.exports={renderHeader:function(){var e=this.props.settings.header;if(e===!1)return"";var t,s=typeof e;return t="function"==s?e(this.props.value.toJS()):"undefined"==s?this.getDefaultHeader():e,n.DOM.span({key:"s",onClick:this.toggleEditing,className:"compoundToggle"},t)},toggleEditing:function(){"always"!=this.state.editing&&this.props.settings.header!==!1&&this.setState({editing:!this.state.editing})},componentWillReceiveProps:function(e){this.props.settings.editing!=e.settings.editing&&this.setState({editing:e.editing})},renderAdder:function(e){var t,s=this.props.settings.adder,r=typeof s;return t="function"==r?s(this.props.value.toJS()):s===!0||"undefined"==r?this.getDefaultAdder():s,n.createElement(i,{onCreate:this.createField,name:e,key:"add",text:t})},createField:function(e,t,s){if(this.props.value[e])return console.log("Field "+e+" already exists.");s.settings={editing:"always"==this.state.editing?"always":!0,focus:!0};var n=r({},this.state.fields);n[e]=s,this.setState({fields:n}),this.props.value.set(e,t)},checkEditingSetting:function(e){var t=this.state.fields;t[e]&&t[e].settings.focus===!0&&(t=r({},t),t[e].settings.focus=!1,this.setState({fields:t}))},getFixedFields:function(){var e=this.props.settings.fixedFields,t={};return e&&e.constructor==Array?(e.forEach(function(e){t[e]=1}),t):e}}},function(e,t,s){"use strict";var n=s(1);e.exports={getStateFromProps:function(e){return{editing:e.settings.editing||!1,value:e.value}},renderInput:function(){var e=this.typeClass;return this.state.editing?n.DOM.input({type:this.inputType,value:this.state.value,id:this.props.id,placeholder:this.props.settings.placeholder||"",onChange:this.updateValue,onBlur:this.setValue,ref:"input",onKeyDown:this.handleKeyDown}):n.DOM.span({onClick:this.setEditMode,className:e},this.getDisplayString())},getDisplayString:function(){return this.getDisplayModeString?this.getDisplayModeString():""===this.props.value?n.DOM.span({className:"jsonNovalue"},"No value"):this.props.value},componentWillReceiveProps:function(e){var t={},s=!1;this.props.value!=e.value&&(s=!0,t.value=e.value),this.props.settings.editing!=e.settings.editing&&(s=!0,t.editing=e.editing),s&&this.setState(t)},componentDidUpdate:function(e,t){(this.state.editing&&!t.editing||this.props.settings.focus)&&this.focus()},componentDidMount:function(){(this.state.editing===!0||this.props.settings.focus)&&this.focus()},setEditMode:function(){this.setState({editing:!0})},setValue:function(){"always"!=this.state.editing&&this.setState({editing:!1}),this.props.onUpdated(this.state.value)},toggleEditing:function(){this.setState({editing:!this.state.editing})},handleKeyDown:function(e){13==e.which&&this.setValue()},focus:function(){var e=this.refs.input.getDOMNode();e.focus(),e.value=e.value}}},function(e,t,s){"use strict";function n(e,t){return e.length?n(e.slice(1),t[e[0]]):t}var i={required:function(e){return e&&("string"!=typeof e||e.trim())?!0:!1},email:function(e){if(!e)return!0;var t=/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;return t.test(e)},length:function(e,t,s,n){return s||(s=0),n||(n=1/0),e.length>=s&&e.length<=n},integer:function(e,t,s,n){if(s||0===s||(s=-(1/0)),n||(n=1/0),!e&&0!=e)return!0;var i=parseInt(e);return e!=i?!1:n>=i&&i>=s},checked:function(e){return e},matches:function(e,t,s){return e==n(s.split("."),t)}};e.exports={getValidationError:function(e,t,s){var n=[],o=!1,u=0;"string"==typeof s?n=r(s):"function"==typeof s?n=[s]:s&&s.constructor===Array&&(n=s);for(var p,l,d;!o&&u<n.length;)d=n[u++],"string"==typeof d?(p=a(d),l=i[p.name],l?l.apply(null,[e,t].concat(p.args))||(o={value:e,method:d}):console.log("Unkown validation method "+p.name)):"function"==typeof d&&(d(e,t)||(o={value:e,method:"custom"}));return o}};var r=function(e){return e.match(/[^\s\[]+(\[[^\]]+?\])?/gi)},a=function(e){var t,s=e.split("["),n={name:s[0],args:[]};return s.length>1&&(t=s[1],"]"==t[t.length-1]&&(t=t.slice(0,t.length-1)),n.args=t.split(/\s*,\s*/)),n}},function(e,t,s){var n=s(1),i=s(3),r=n.createClass({getInitialState:function(){return{creating:this.props.creating||!1,name:this.props.name,type:"string"}},render:function(){if(!this.state.creating)return n.DOM.a({className:"jsonAdd",href:"#",onClick:this.handleCreate},this.props.text);var e,t=this.getTypes().map(function(e){return n.DOM.option({value:e,key:e},e[0].toUpperCase()+e.slice(1))});return e="undefined"!=typeof this.props.name?[n.DOM.span({className:"jsonName"},this.props.name),n.DOM.span(null,":")]:[n.DOM.input({ref:"keyInput",type:"text",value:this.state.value,onChange:this.changeKey}),n.DOM.span(null,":")],n.DOM.div({className:"jsonField jsonFieldAdder"},[e,n.DOM.select({key:"s",value:this.state.type,onChange:this.changeType,ref:"typeSelector"},t),n.DOM.button({key:"b",onClick:this.createField},"OK"),n.DOM.a({key:"a",href:"#",className:"cancelField",onClick:this.handleCancel},"Cancel")])},componentDidUpdate:function(e,t){!t.creating&&this.state.creating&&(this.refs.keyInput?this.refs.keyInput.getDOMNode().focus():this.refs.typeSelector.getDOMNode().focus())},componentWillReceiveProps:function(e){this.setState({name:e.name})},handleCreate:function(e){e.preventDefault(),this.setState({creating:!0})},handleCancel:function(e){e.preventDefault(),this.setState({creating:!1})},changeType:function(e){this.setState({type:e.target.value})},changeKey:function(e){this.setState({name:e.target.value})},createField:function(){this.setState({creating:!1});var e=i.prototype.components[this.state.type].prototype.defaultValue;this.props.onCreate(this.state.name,e,{type:this.state.type})},getTypes:function(){return Object.keys(i.prototype.components)}});e.exports=r}])});