react-form-with-constraints - npm Package Compare versions

Comparing version 0.6.0-beta.2 to 0.6.0-beta.3

dist/react-form-with-constraints.production.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],t):t(e.ReactFormWithConstraints={},e.React,e.PropTypes)}(this,function(e,t,n){"use strict";function r(e,t){function n(){this.constructor=e}l(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}function o(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&(n[r[o]]=e[r[o]]);return n}function i(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,i=n.call(e),s=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)s.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return s}function s(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(i(arguments[t]));return e}function a(e){return function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.validateEventEmitter=new c,t}return r(t,e),t.prototype.emitValidateEvent=function(e){this.validateEventEmitter.emit(f,e)},t.prototype.addValidateEventListener=function(e){this.validateEventEmitter.addListener(f,e)},t.prototype.removeValidateEventListener=function(e){this.validateEventEmitter.removeListener(f,e)},t}(e)}var l=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},d=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},c=function(){function e(){this.listeners=new Map}return e.prototype.emit=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];var r=this.listeners.get(e);void 0!==r&&(console.assert(r.length>0,"No listener for event '"+e+"'"),r.forEach(function(e){return e.apply(void 0,s(t))}))},e.prototype.addListener=function(e,t){this.listeners.has(e)||this.listeners.set(e,[]);var n=this.listeners.get(e);console.assert(-1===n.indexOf(t),"Listener already added for event '"+e+"'"),n.push(t)},e.prototype.removeListener=function(e,t){var n=this.listeners.get(e);console.assert(void 0!==n,"Unknown event '"+e+"'");var r=n.lastIndexOf(t);console.assert(r>-1,"Listener not found for event '"+e+"'"),n.splice(r,1),0===n.length&&this.listeners.delete(e)},e}(),f="VALIDATE_EVENT";!function(e){e.Added="FIELD_ADDED",e.Removed="FIELD_REMOVED",e.Updated="FIELD_UPDATED"}(e.FieldEvent||(e.FieldEvent={}));var p=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.fields=Object.create(null),e}return r(n,t),n.prototype.addField=function(t){if(void 0===this.fields[t]){var n={dirty:!1,errors:new Set,warnings:new Set,infos:new Set,validationMessage:""};this.fields[t]=n,this.emit(e.FieldEvent.Added,t,n)}},n.prototype.removeField=function(t){console.assert(void 0!==this.fields[t],"Unknown field '"+t+"'"),delete this.fields[t],this.emit(e.FieldEvent.Removed,t)},n.prototype.cloneField=function(e){var t=this.fields[e];return console.assert(void 0!==t,"Unknown field '"+e+"'"),{dirty:t.dirty,errors:t.errors,warnings:t.warnings,infos:t.infos,validationMessage:t.validationMessage}},n.prototype.updateField=function(t,n){console.assert(void 0!==this.fields[t],"Unknown field '"+t+"'"),this.fields[t]=n,this.emit(e.FieldEvent.Updated,t)},n.prototype.removeFieldFor=function(t,n){var r=this.fields[t];console.assert(void 0!==r,"Unknown field '"+t+"'");var o=function(e){return n!==Math.floor(e)};r.errors=new Set(s(r.errors).filter(o)),r.warnings=new Set(s(r.warnings).filter(o)),r.infos=new Set(s(r.infos).filter(o)),this.emit(e.FieldEvent.Updated,t)},n.prototype.getFieldFor=function(e,t){var n=this.fields[e];console.assert(void 0!==n,"Unknown field '"+e+"'");var r=function(e){return t===Math.floor(e)};return{dirty:n.dirty,errors:new Set(s(n.errors).filter(r)),warnings:new Set(s(n.warnings).filter(r)),infos:new Set(s(n.infos).filter(r)),validationMessage:n.validationMessage}},n.prototype.containErrors=function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return t.some(function(t){var n=e.fields[t];return void 0!==n&&n.errors.size>0})},n.prototype.containWarnings=function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return t.some(function(t){var n=e.fields[t];return void 0!==n&&n.warnings.size>0})},n.prototype.containInfos=function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return t.some(function(t){var n=e.fields[t];return void 0!==n&&n.infos.size>0})},n.prototype.areValidDirtyWithoutWarnings=function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return t.some(function(t){var n=e.fields[t];return void 0!==n&&!0===n.dirty&&0===n.errors.size&&0===n.warnings.size})},n}(c),u=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return r(t,e),t}(t.Component),h=function(e){function i(){var t=null!==e&&e.apply(this,arguments)||this;return t.fieldsStore=new p,t.fieldFeedbacksKey=0,t}return r(i,e),i.prototype.getChildContext=function(){return{form:this}},i.prototype.computeFieldFeedbacksKey=function(){return this.fieldFeedbacksKey++},i.prototype.validateFields=function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];var r=t.filter(function(e){return"string"!=typeof e}),o=t.filter(function(e){return"string"==typeof e}),i=[];if(0===t.length&&(i=this.form.querySelectorAll("[name]")),o.length>0){var a=o.map(function(e){return"[name="+e+"]"});i=this.form.querySelectorAll(a.join(", "))}s(r,i).forEach(function(t){return e.emitValidateEvent(t)})},i.prototype.isValid=function(){var e=Object.keys(this.fieldsStore.fields);return!(t=this.fieldsStore).containErrors.apply(t,s(e));var t},i.prototype.render=function(){var e=this,n=this.props,r=n.children,i=o(n,["children"]);return t.createElement("form",d({ref:function(t){return e.form=t}},i),r)},i.childContextTypes={form:n.object.isRequired},i}(a(u)),v=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return r(t,e),t}(t.Component),m=function(i){function s(e,t){var n=i.call(this,e)||this;return n.fieldFeedbackKey=0,n.validate=n.validate.bind(n),n.reRender=n.reRender.bind(n),n.key=t.form.computeFieldFeedbacksKey(),n}return r(s,i),s.prototype.getChildContext=function(){return{fieldFeedbacks:this}},s.prototype.computeFieldFeedbackKey=function(){return this.key+this.fieldFeedbackKey++/10},s.prototype.componentWillMount=function(){var t=this.props.for;this.context.form.fieldsStore.addField(t),this.context.form.addValidateEventListener(this.validate),this.context.form.fieldsStore.addListener(e.FieldEvent.Updated,this.reRender)},s.prototype.componentWillUnmount=function(){var t=this.props.for;this.context.form.fieldsStore.removeField(t),this.context.form.removeValidateEventListener(this.validate),this.context.form.fieldsStore.removeListener(e.FieldEvent.Updated,this.reRender)},s.prototype.validate=function(e){var t=this.props.for;e.name===t&&(this.context.form.fieldsStore.removeFieldFor(t,this.key),this.emitValidateEvent(e))},s.prototype.reRender=function(e){this.props.for===e&&this.forceUpdate()},s.prototype.render=function(){var e=this.props,n=(e.for,e.show,e.children),r=o(e,["for","show","children"]);return t.createElement("div",d({},r),n)},s.defaultProps={show:"first"},s.contextTypes={form:n.object.isRequired},s.childContextTypes={fieldFeedbacks:n.object.isRequired},s}(a(v)),y=function(e){function i(t,n){var r=e.call(this,t)||this;return r.validate=r.validate.bind(r),r.key=n.fieldFeedbacks.computeFieldFeedbackKey(),r}return r(i,e),i.prototype.componentWillMount=function(){this.context.fieldFeedbacks.addValidateEventListener(this.validate)},i.prototype.componentWillUnmount=function(){this.context.fieldFeedbacks.removeValidateEventListener(this.validate)},i.prototype.validate=function(e){var t=this.props,n=t.when,r=t.warning,o=t.info,i=this.context.fieldFeedbacks.props.for,s=!1;if("function"==typeof n)n(e.value)&&(s=!0);else if("string"==typeof n){var a=e.validity;a.valid||("*"===n?s=!0:(a.badInput&&"badInput"===n||a.patternMismatch&&"patternMismatch"===n||a.rangeOverflow&&"rangeOverflow"===n||a.rangeUnderflow&&"rangeUnderflow"===n||a.stepMismatch&&"stepMismatch"===n||a.tooLong&&"tooLong"===n||a.tooShort&&"tooShort"===n||a.typeMismatch&&"typeMismatch"===n||a.valueMissing&&"valueMissing"===n)&&(s=!0))}else console.assert(!1,"Invalid FieldFeedback 'when': "+n);var l=this.context.form.fieldsStore.cloneField(i);l.dirty=!0,l.validationMessage=e.validationMessage,s&&(r?l.warnings.add(this.key):o?l.infos.add(this.key):l.errors.add(this.key)),this.context.form.fieldsStore.updateField(i,l)},i.prototype.render=function(){var e,n=this.props,r=(n.when,n.error,n.warning,n.info,n.className),i=n.children,s=o(n,["when","error","warning","info","className","children"]),a=this.context.fieldFeedbacks.props,l=a.for,c=a.show,f=this.context.form.fieldsStore.getFieldFor(l,this.context.fieldFeedbacks.key),p=f.errors,u=f.warnings,h=f.infos,v=f.validationMessage,m=p.values().next().value,y=u.values().next().value;p.has(this.key)&&("all"===c||"first"===c&&m===this.key)?e="error":u.has(this.key)&&0===p.size&&("all"===c||"first"===c&&y===this.key)?e="warning":h.has(this.key)&&(e="info");var g=null;return void 0!==e&&(e=void 0!==r?r+" "+e:e,g=void 0!==i?i:v),null!==g?t.createElement("div",d({},s,{className:e}),g):null},i.contextTypes={form:n.object.isRequired,fieldFeedbacks:n.object.isRequired},i}(t.Component),g=function(e){function i(t){var n=e.call(this,t)||this;return n.reRender=n.reRender.bind(n),n}return r(i,e),i.prototype.componentWillMount=function(){this.context.form.addValidateEventListener(this.reRender)},i.prototype.componentWillUnmount=function(){this.context.form.removeValidateEventListener(this.reRender)},i.prototype.reRender=function(e){var t=this.props.for;e.name===t&&this.forceUpdate()},i.prototype.className=function(e){var t="form-group";if(void 0!==e){var n=this.context.form;n.fieldsStore.containErrors(e)?t+=" has-danger":n.fieldsStore.containWarnings(e)?t+=" has-warning":n.fieldsStore.areValidDirtyWithoutWarnings(e)&&(t+=" has-success")}return t},i.prototype.render=function(){var e=this.props,n=e.for,r=e.className,i=e.children,s=o(e,["for","className","children"]),a=void 0!==r?r+" "+this.className(n):this.className(n);return t.createElement("div",d({},s,{className:a}),i)},i.contextTypes={form:n.object.isRequired},i}(t.Component),F=function(e){function i(t){var n=e.call(this,t)||this;return n.reRender=n.reRender.bind(n),n}return r(i,e),i.prototype.componentWillMount=function(){this.context.form.addValidateEventListener(this.reRender)},i.prototype.componentWillUnmount=function(){this.context.form.removeValidateEventListener(this.reRender)},i.prototype.reRender=function(e){var t=this.props.name;e.name===t&&this.forceUpdate()},i.prototype.className=function(e){var t="form-control";if(void 0!==e){var n=this.context.form;n.fieldsStore.containErrors(e)?t+=" form-control-danger":n.fieldsStore.containWarnings(e)?t+=" form-control-warning":n.fieldsStore.areValidDirtyWithoutWarnings(e)&&(t+=" form-control-success")}return t},i.prototype.render=function(){var e=this.props,n=e.innerRef,r=e.className,i=(e.children,o(e,["innerRef","className","children"])),s=void 0!==r?r+" "+this.className(i.name):this.className(i.name);return t.createElement("input",d({ref:n},i,{className:s}))},i.contextTypes={form:n.object.isRequired},i}(t.Component),b=function(e){function i(t){var n=e.call(this,t)||this;return n.reRender=n.reRender.bind(n),n}return r(i,e),i.prototype.componentWillMount=function(){this.context.form.addValidateEventListener(this.reRender)},i.prototype.componentWillUnmount=function(){this.context.form.removeValidateEventListener(this.reRender)},i.prototype.reRender=function(e){this.props.for.includes(e.name)&&this.forceUpdate()},i.prototype.render=function(){var e,n=this.props,r=n.for,i=n.style,a=n.children,l=o(n,["for","style","children"]),c=this.context.form;(p=c.fieldsStore).containErrors.apply(p,s(r))?e="#d9534f":(u=c.fieldsStore).containWarnings.apply(u,s(r))?e="#f0ad4e":(h=c.fieldsStore).areValidDirtyWithoutWarnings.apply(h,s(r))&&(e="#5cb85c");var f=void 0!==i?d({color:e},i):{color:e};return t.createElement("label",d({},l,{style:{styles:f}}),a);var p,u,h},i.contextTypes={form:n.object.isRequired},i}(t.Component),E=Object.freeze({FormGroup:g,FormControlLabel:function(e){var n=e.className,r=e.children,i=o(e,["className","children"]),s=void 0!==n?n+" form-control-label":"form-control-label";return t.createElement("label",d({},i,{className:s}),r)},FormControlInput:F,FieldFeedbacks:function(e){var n=e.className,r=e.children,i=o(e,["className","children"]),s=void 0!==n?n+" form-control-feedback":"form-control-feedback";return t.createElement(m,d({},i,{className:s}),r)},LabelWithFormControlStyle:b});e.Bootstrap4=E,e.FormWithConstraintsComponent=u,e.FormWithConstraints=h,e.FieldsStore=p,e.FieldFeedbacksComponent=v,e.FieldFeedbacks=m,e.FieldFeedback=y,e.EventEmitter=c,e.ValidateEvent=f,e.withValidateEventEmitter=a,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],t):t(e.ReactFormWithConstraints={},e.React,e.PropTypes)}(this,function(e,t,n){"use strict";function r(e,t){function n(){this.constructor=e}l(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}function i(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var i=0,r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&(n[r[i]]=e[r[i]]);return n}function o(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,i,o=n.call(e),s=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)s.push(r.value)}catch(e){i={error:e}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(i)throw i.error}}return s}function s(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(o(arguments[t]));return e}function a(e){return function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.validateEventEmitter=new f,t}return r(t,e),t.prototype.emitValidateEvent=function(e){this.validateEventEmitter.emit(c,e)},t.prototype.addValidateEventListener=function(e){this.validateEventEmitter.addListener(c,e)},t.prototype.removeValidateEventListener=function(e){this.validateEventEmitter.removeListener(c,e)},t}(e)}var l=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},d=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},f=function(){function e(){this.listeners=new Map}return e.prototype.emit=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];var r=this.listeners.get(e);void 0!==r&&(console.assert(r.length>0,"No listener for event '"+e+"'"),r.forEach(function(e){return e.apply(void 0,s(t))}))},e.prototype.addListener=function(e,t){this.listeners.has(e)||this.listeners.set(e,[]);var n=this.listeners.get(e);console.assert(-1===n.indexOf(t),"Listener already added for event '"+e+"'"),n.push(t)},e.prototype.removeListener=function(e,t){var n=this.listeners.get(e);console.assert(void 0!==n,"Unknown event '"+e+"'");var r=n.lastIndexOf(t);console.assert(r>-1,"Listener not found for event '"+e+"'"),n.splice(r,1),0===n.length&&this.listeners.delete(e)},e}(),c="VALIDATE_EVENT";!function(e){e.Added="FIELD_ADDED",e.Removed="FIELD_REMOVED",e.Updated="FIELD_UPDATED"}(e.FieldEvent||(e.FieldEvent={}));var p=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.fields=Object.create(null),e}return r(n,t),n.prototype.addField=function(t){if(void 0===this.fields[t]){var n={dirty:!1,errors:new Set,warnings:new Set,infos:new Set,validationMessage:""};this.fields[t]=n,this.emit(e.FieldEvent.Added,t,n)}},n.prototype.removeField=function(t){console.assert(void 0!==this.fields[t],"Unknown field '"+t+"'"),delete this.fields[t],this.emit(e.FieldEvent.Removed,t)},n.prototype.cloneField=function(e){var t=this.fields[e];return console.assert(void 0!==t,"Unknown field '"+e+"'"),{dirty:t.dirty,errors:t.errors,warnings:t.warnings,infos:t.infos,validationMessage:t.validationMessage}},n.prototype.updateField=function(t,n){console.assert(void 0!==this.fields[t],"Unknown field '"+t+"'"),this.fields[t]=n,this.emit(e.FieldEvent.Updated,t)},n.prototype.removeFieldFor=function(t,n){var r=this.fields[t];console.assert(void 0!==r,"Unknown field '"+t+"'");var i=function(e){return n!==Math.floor(e)};r.errors=new Set(s(r.errors).filter(i)),r.warnings=new Set(s(r.warnings).filter(i)),r.infos=new Set(s(r.infos).filter(i)),this.emit(e.FieldEvent.Updated,t)},n.prototype.getFieldFor=function(e,t){var n=this.fields[e];console.assert(void 0!==n,"Unknown field '"+e+"'");var r=function(e){return t===Math.floor(e)};return{dirty:n.dirty,errors:new Set(s(n.errors).filter(r)),warnings:new Set(s(n.warnings).filter(r)),infos:new Set(s(n.infos).filter(r)),validationMessage:n.validationMessage}},n.prototype.containErrors=function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return t.some(function(t){var n=e.fields[t];return void 0!==n&&n.errors.size>0})},n.prototype.containWarnings=function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return t.some(function(t){var n=e.fields[t];return void 0!==n&&n.warnings.size>0})},n.prototype.containInfos=function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return t.some(function(t){var n=e.fields[t];return void 0!==n&&n.infos.size>0})},n.prototype.areValidDirtyWithoutWarnings=function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return t.some(function(t){var n=e.fields[t];return void 0!==n&&!0===n.dirty&&0===n.errors.size&&0===n.warnings.size})},n}(f),u=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return r(t,e),t}(t.Component),h=function(e){function o(){var t=null!==e&&e.apply(this,arguments)||this;return t.fieldsStore=new p,t.fieldFeedbacksKey=0,t}return r(o,e),o.prototype.getChildContext=function(){return{form:this}},o.prototype.computeFieldFeedbacksKey=function(){return this.fieldFeedbacksKey++},o.prototype.validateFields=function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];var r=t.filter(function(e){return"string"!=typeof e}),i=t.filter(function(e){return"string"==typeof e}),o=[];if(0===t.length&&(o=this.form.querySelectorAll("[name]")),i.length>0){var a=i.map(function(e){return"[name="+e+"]"});o=this.form.querySelectorAll(a.join(", "))}s(r,o).forEach(function(t){return e.emitValidateEvent(t)})},o.prototype.isValid=function(){var e=Object.keys(this.fieldsStore.fields);return!(t=this.fieldsStore).containErrors.apply(t,s(e));var t},o.prototype.render=function(){var e=this,n=this.props,r=n.children,o=i(n,["children"]);return t.createElement("form",d({ref:function(t){return e.form=t}},o),r)},o.childContextTypes={form:n.object.isRequired},o}(a(u)),v=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return r(t,e),t}(t.Component),y=function(o){function s(e,t){var n=o.call(this,e)||this;return n.fieldFeedbackKey=0,n.validate=n.validate.bind(n),n.reRender=n.reRender.bind(n),n.key=t.form.computeFieldFeedbacksKey(),n}return r(s,o),s.prototype.getChildContext=function(){return{fieldFeedbacks:this}},s.prototype.computeFieldFeedbackKey=function(){return this.key+this.fieldFeedbackKey++/10},s.prototype.componentWillMount=function(){var t=this.props.for;this.context.form.fieldsStore.addField(t),this.context.form.addValidateEventListener(this.validate),this.context.form.fieldsStore.addListener(e.FieldEvent.Updated,this.reRender)},s.prototype.componentWillUnmount=function(){var t=this.props.for;this.context.form.fieldsStore.removeField(t),this.context.form.removeValidateEventListener(this.validate),this.context.form.fieldsStore.removeListener(e.FieldEvent.Updated,this.reRender)},s.prototype.validate=function(e){var t=this.props.for;e.name===t&&(this.context.form.fieldsStore.removeFieldFor(t,this.key),this.emitValidateEvent(e))},s.prototype.reRender=function(e){this.props.for===e&&this.forceUpdate()},s.prototype.render=function(){var e=this.props,n=(e.for,e.show,e.children),r=i(e,["for","show","children"]);return t.createElement("div",d({},r),n)},s.defaultProps={show:"first"},s.contextTypes={form:n.object.isRequired},s.childContextTypes={fieldFeedbacks:n.object.isRequired},s}(a(v)),m=function(e){function o(t,n){var r=e.call(this,t)||this;return r.validate=r.validate.bind(r),r.key=n.fieldFeedbacks.computeFieldFeedbackKey(),r}return r(o,e),o.prototype.componentWillMount=function(){this.context.fieldFeedbacks.addValidateEventListener(this.validate)},o.prototype.componentWillUnmount=function(){this.context.fieldFeedbacks.removeValidateEventListener(this.validate)},o.prototype.validate=function(e){var t=this.props,n=t.when,r=t.warning,i=t.info,o=this.context.fieldFeedbacks.props.for,s=!1;if("function"==typeof n)n(e.value)&&(s=!0);else if("string"==typeof n){var a=e.validity;a.valid||("*"===n?s=!0:(a.badInput&&"badInput"===n||a.patternMismatch&&"patternMismatch"===n||a.rangeOverflow&&"rangeOverflow"===n||a.rangeUnderflow&&"rangeUnderflow"===n||a.stepMismatch&&"stepMismatch"===n||a.tooLong&&"tooLong"===n||a.tooShort&&"tooShort"===n||a.typeMismatch&&"typeMismatch"===n||a.valueMissing&&"valueMissing"===n)&&(s=!0))}else console.assert(!1,"Invalid FieldFeedback 'when': "+n);var l=this.context.form.fieldsStore.cloneField(o);l.dirty=!0,l.validationMessage=e.validationMessage,s&&(r?l.warnings.add(this.key):i?l.infos.add(this.key):l.errors.add(this.key)),this.context.form.fieldsStore.updateField(o,l)},o.prototype.render=function(){var e,n=this.props,r=(n.when,n.error,n.warning,n.info,n.className),o=n.children,s=i(n,["when","error","warning","info","className","children"]),a=this.context.fieldFeedbacks.props,l=a.for,f=a.show,c=this.context.form.fieldsStore.getFieldFor(l,this.context.fieldFeedbacks.key),p=c.errors,u=c.warnings,h=c.infos,v=c.validationMessage,y=p.values().next().value,m=u.values().next().value;p.has(this.key)&&("all"===f||"first"===f&&y===this.key)?e="error":u.has(this.key)&&0===p.size&&("all"===f||"first"===f&&m===this.key)?e="warning":h.has(this.key)&&(e="info");var F=null;return void 0!==e&&(e=void 0!==r?r+" "+e:e,F=void 0!==o?o:v),null!==F?t.createElement("div",d({},s,{className:e}),F):null},o.contextTypes={form:n.object.isRequired,fieldFeedbacks:n.object.isRequired},o}(t.Component);e.FormWithConstraintsComponent=u,e.FormWithConstraints=h,e.FieldFeedbacksComponent=v,e.FieldFeedbacks=y,e.FieldFeedback=m,e.FieldsStore=p,e.EventEmitter=f,e.ValidateEvent=c,e.withValidateEventEmitter=a,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=react-form-with-constraints.production.min.js.map

examples/Bootstrap4/App.jsx

@@ -10,4 +10,4 @@ // @ts-check
 
-import { FormWithConstraints, FieldFeedback, Bootstrap4 } from '../../src/index';
-const { FieldFeedbacks, FormGroup, FormControlLabel, FormControlInput } = Bootstrap4;
+import { FormWithConstraints, FieldFeedback } from '../../src/index';
+import { FieldFeedbacks, FormGroup, FormControlLabel, FormControlInput } from '../../src/Bootstrap4';
 
@@ -113,2 +113,3 @@ import './index.html';
       Original code: <a href="https://codepen.io/jmalfatto/pen/YGjmaJ">https://codepen.io/jmalfatto/pen/YGjmaJ</a>
+      <br />
       Fixed version: <a href="https://codepen.io/tkrotoff/pen/MEeNvO">https://codepen.io/tkrotoff/pen/MEeNvO</a>
@@ -115,0 +116,0 @@ </p>

lib/Enzyme.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var index_1 = require("./index");
+var Bootstrap4 = require("./Bootstrap4");
 // Return the list of FieldFeedback associated with an input name
@@ -9,3 +10,3 @@ // Algorithm: find the FieldFeedbacks that matches the input name (for prop) and then return its children
         var found = false;
-        if (node.type() === index_1.FieldFeedbacks || node.type() === index_1.Bootstrap4.FieldFeedbacks) {
+        if (node.type() === index_1.FieldFeedbacks || node.type() === Bootstrap4.FieldFeedbacks) {
             if (node.prop('for') === inputName) {
@@ -12,0 +13,0 @@ found = true;

lib/Enzyme.test.js

@@ -17,3 +17,3 @@ "use strict";
 var Enzyme_1 = require("./Enzyme");
-var FormGroup = index_1.Bootstrap4.FormGroup, FormControlInput = index_1.Bootstrap4.FormControlInput;
+var Bootstrap4 = require("./Bootstrap4");
 test('with Bootstrap4', function () {
@@ -26,5 +26,5 @@ var FormBootstrap4 = /** @class */ (function (_super) {
         FormBootstrap4.prototype.render = function () {
-            return (React.createElement(FormGroup, { for: "username" },
-                React.createElement(FormControlInput, { type: "email", name: "username", value: "", required: true }),
-                React.createElement(index_1.Bootstrap4.FieldFeedbacks, { for: "username" },
+            return (React.createElement(Bootstrap4.FormGroup, { for: "username" },
+                React.createElement(Bootstrap4.FormControlInput, { type: "email", name: "username", value: "", required: true }),
+                React.createElement(Bootstrap4.FieldFeedbacks, { for: "username" },
                     React.createElement(index_1.FieldFeedback, { when: "*" }))));
@@ -35,3 +35,3 @@ };
     var component = enzyme_1.shallow(React.createElement(FormBootstrap4, null));
-    var inputs = component.find(FormControlInput);
+    var inputs = component.find(Bootstrap4.FormControlInput);
     expect(inputs).toHaveLength(1);
@@ -38,0 +38,0 @@ expect(inputs.props().value).toEqual('');

lib/index.d.ts

 export * from './FormWithConstraints';
-export * from './FieldsStore';
 export * from './FieldFeedbacks';
 export * from './FieldFeedback';
 export * from './Fields';
+export * from './FieldsStore';
 export * from './EventEmitter';
@@ -10,3 +10,1 @@ export * from './withValidateEventEmitter';
 export { Input };
-import * as Bootstrap4 from './Bootstrap4';
-export { Bootstrap4 };

lib/index.js

@@ -7,9 +7,7 @@ "use strict";
 __export(require("./FormWithConstraints"));
-__export(require("./FieldsStore"));
 __export(require("./FieldFeedbacks"));
 __export(require("./FieldFeedback"));
+__export(require("./FieldsStore"));
 __export(require("./EventEmitter"));
 __export(require("./withValidateEventEmitter"));
-var Bootstrap4 = require("./Bootstrap4");
-exports.Bootstrap4 = Bootstrap4;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-form-with-constraints",
-  "version": "0.6.0-beta.2",
+  "version": "0.6.0-beta.3",
   "repository": {
@@ -81,3 +81,3 @@ "type": "git",
     "rollup-pluginutils": "latest",
-    "rollup-plugin-typescript2": "latest",
+    "rollup-plugin-typescript2": "ezolenko/rollup-plugin-typescript2",
     "rollup-plugin-uglify": "latest",
@@ -84,0 +84,0 @@ "rollup-plugin-gzip": "latest",

README.md

@@ -11,3 +11,3 @@ # react-form-with-constraints
 - Installation: `npm install react-form-with-constraints`
-- CDN: https://unpkg.com/react-form-with-constraints/dist/react-form-with-constraints.js
+- CDN: https://unpkg.com/react-form-with-constraints/dist/react-form-with-constraints.production.min.js
 
@@ -36,17 +36,9 @@ ## Introduction: what is HTML5 form validation?
 
+- Minimal API and footprint, zero magic
 - Control HTML5 error messages: `<FieldFeedback when="valueMissing">My custom error message</FieldFeedback>`
 - Custom constraints: `<FieldFeedback when={value => ...}>`
-- Warnings: `<FieldFeedback ... warning>`
-- Infos: `<FieldFeedback ... info>`
-- Multiple feedbacks: `<FieldFeedbacks ... show="all">`
-- Feedbacks groups
-- Fields inter-dependence
-- Multi-step forms
+- Warnings and infos: `<FieldFeedback ... warning>`, `<FieldFeedback ... info>`
+- No dependency beside React (no Redux, MobX...)
+- No special component like `<TextField>`, just plain old `<input>` or whatever you like
 - Re-render only what's necessary
-- Multiple feedback outputs for the same field
-- No special component like `<TextField>`, just plain old `<input>` or whatever you like
-- No dependency (no Redux, no MobX... just React)
-- Minimal footprint
-- Minimal API
-- Zero magic
 - ...
@@ -91,13 +83,12 @@
 
-As React Router v4, react-form-with-constraints uses [React context](https://facebook.github.io/react/docs/context.html#parent-child-coupling) to share the fields state.
-If you had to implement validation yourself, you would end up with [a state that keeps track of the errors and warnings for each field](examples/NoFramework/App.tsx). react-form-with-constraints works [the](src/Fields.ts) [same]().
+If you had to implement validation yourself, you would end up with [a global state that tracks errors and warnings for each field](examples/NoFramework/App.tsx). react-form-with-constraints works [the](src/Fields.ts) [same](src/FieldsStore.ts). It uses [React context](https://facebook.github.io/react/docs/context.html#parent-child-coupling) to share the global state across `FieldFeedbacks` and `FieldFeedback`.
 
-## react-form-with-constraints examples
+## Examples
 
 - CodePen basic example: https://codepen.io/tkrotoff/pen/BRGdqL
-- CodePen Bootstrap example: https://codepen.io/tkrotoff/pen/oWQeQR
+- CodeSandbox Bootstrap 4 example: https://codesandbox.io/s/qk0zro1qm4
 
-![demo-password](doc/demo-password.png)
+![example-password](doc/example-password.png)
 
-Check all examples inside [the examples directory](examples).
+Other examples inside [the examples directory](examples).
 
@@ -121,3 +112,2 @@ ## API
   - `show?: 'first' | 'all'` => display the first error/warning encountered (default) or all of them
-  - `children: FieldFeedback[]`
 
@@ -141,5 +131,5 @@ - `FieldFeedback`
 <form onSubmit={this.handleSubmit} noValidate>
-  <label>Username</label>
+  <label htmlFor="username">Username</label>
 
-  <input type="email" name="username"
+  <input type="email" name="username" id="username"
          value={this.state.username} onChange={this.handleChange}
@@ -159,5 +149,5 @@ required />
 <form onSubmit={this.handleSubmit} noValidate>
-  <label>Username</label>
+  <label htmlFor="username">Username</label>
 
-  <input name="username"
+  <input name="username" id="username"
          value={this.state.username} onChange={this.handleChange} />
@@ -175,3 +165,3 @@ <FieldFeedbacks for="username">
 
-react-form-with-constraints itself, like React 16, depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set).
+react-form-with-constraints, like React 16, depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set).
 If you support older browsers (<IE11) you will need a global polyfill such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
@@ -178,0 +168,0 @@

rollup.config.js

@@ -24,3 +24,4 @@ import typescript from 'rollup-plugin-typescript2';
       abortOnError: false,
-      clean: true
+      clean: true,
+      tsconfigOverride: {compilerOptions: {module: 'esnext', declaration: false}}
     }),
@@ -27,0 +28,0 @@ uglify(),

src/Enzyme.ts

 import * as React from 'react';
 import { ShallowWrapper } from 'enzyme';
 
-import { FieldFeedback, FieldFeedbackProps, FieldFeedbacks, Bootstrap4 } from './index';
+import { FieldFeedback, FieldFeedbackProps, FieldFeedbacks } from './index';
+import * as Bootstrap4 from './Bootstrap4';
 
@@ -6,0 +7,0 @@ // Return the list of FieldFeedback associated with an input name

src/index.ts

 export * from './FormWithConstraints';
-export * from './FieldsStore';
 export * from './FieldFeedbacks';
 export * from './FieldFeedback';
 export * from './Fields';
+export * from './FieldsStore';
 export * from './EventEmitter';
@@ -10,4 +10,1 @@ export * from './withValidateEventEmitter';
 export { Input };
-
-import * as Bootstrap4 from './Bootstrap4';
-export { Bootstrap4 };

tsconfig.json

@@ -22,2 +22,3 @@ {
     "src/index.ts",
+    "src/Bootstrap4.tsx",
     "src/Enzyme.ts"
@@ -24,0 +25,0 @@ ],

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

706249

decreased by-6.21%

Number of package files

166

decreased by-9.78%

Lines of code

7822

decreased by-3.17%

Number of lines in readme file

165

decreased by-5.71%

No dependency changes