Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-form-validator-component
Advanced tools
react-form-validator-component - npm Package Compare versions
Comparing version 1.5.8 to 1.5.9
@@ -1,1 +0,1 @@ | ||
| !function(e,r){for(var t in r)e[t]=r[t]}(exports,function(e){var r={};function t(a){if(r[a])return r[a].exports;var n=r[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,t),n.l=!0,n.exports}return t.m=e,t.c=r,t.d=function(e,r,a){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:a})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(t.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)t.d(a,n,function(r){return e[r]}.bind(null,n));return a},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=6)}([function(e,r,t){"use strict";Object.defineProperty(r,"__esModule",{value:!0});var a=/^(([^<>()[\]\\.,;:\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,}))$/,n=/^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5}){1,25}(,[ ]{0,1}([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5}){1,25})*$/,o=/^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/,i=/^[+]?(\d{1,3})\s?(\d{10})$/,u=/^(([A-Za-z0-9]{2,4})\s?([A-Za-z0-9]{1,5})?)?$/,l=/^(\d{2}(\s|[-])\d{2}(\s|[-])\d{2}$)|\d{6}|^$/,s=/^((([A-Za-z]{6}[0-9A-Za-z]{2})|([A-Za-z]{4}(\s|-)?[A-Za-z]{2}(\s|-)?[0-9A-Za-z]{2}))[0-9A-Za-z]{3}?$)|^$/,d=/^([0-9A-Za-z]{4}\s?){4,6}([0-9A-Za-z]{1,4}|[0-9A-Za-z]{4}\s?[0-9A-Za-z]{1|4})?$/,c=/^\d{8,15}$/,f=/^[A-Z0-9a-z\-/\s]+$/i,p=/^-?\d*[.]?\d+$/,v=/^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/g,h={validator:function(e){return!!e.match(o)},error:"Please provide a full name"},m={validator:function(e){return!!e.match(a)},error:"Please provide a valid email address"},y={validator:function(e){return!!e.match(n)},error:"Please provide a valid email address, or several emails comma delimited"},b={validator:function(e){return!!e.match(i)},error:"Please provide a valid UK phone number"},g={validator:function(e){return!!e.match(u)},error:"Please provide a valid UK postcode"},O={validator:function(e){return!!e.match(l)},error:"Please provide a UK Sort Code"},j={validator:function(e){return!!e.match(s)},error:"Please provide a valid Swift Code"},A={validator:function(e){return!!e.match(d)},error:"Please provide a valid Swift Code"},P={validator:function(e){return!!e.match(c)},error:"Please provide a valid UK VAT Number"},_={validator:function(e){return!!e.match(f)},error:"Please provide an alphanumeric input"},S={validator:function(e){return"number"==typeof e||!!e.match(p)},error:"Please provide an numeric input"},w={validator:function(e){return!!e.match(v)},error:"Please provide a valid URL"},z={validator:function(e,r){return e.length===r},error:"Please provide an input of exactly "+length+" characters"},E={validator:function(e,r){return e.length<=r},error:"The maximum length of this input is "+length+" characters"},V={validator:function(e,r){return e.length>=r},error:"The minimum length of this input is "+length+" characters"};r.isRequired={validator:function(e){return!!e},error:"Please provide a value"},r.isEmail=m,r.isEmailArray=y,r.isFullName=h,r.isPhoneNumber=b,r.isPostCode=g,r.isSortCode=O,r.isSwiftCode=j,r.isIban=A,r.isVatNumber=P,r.isAlphaNumeric=_,r.isNumeric=S,r.isUrl=w,r.isLength=z,r.maxLength=E,r.minLength=V},function(e,r,t){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,r,t){"use strict";var a=t(1);function n(){}e.exports=function(){function e(e,r,t,n,o,i){if(i!==a){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function r(){return e}e.isRequired=e;var t={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:r,element:e,instanceOf:r,node:e,objectOf:r,oneOf:r,oneOfType:r,shape:r,exact:r};return t.checkPropTypes=n,t.PropTypes=t,t}},function(e,r,t){e.exports=t(2)()},function(e,r){e.exports=require("react")},function(e,r,t){"use strict";Object.defineProperty(r,"__esModule",{value:!0});var a=function(){return function(e,r){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,r){var t=[],a=!0,n=!1,o=void 0;try{for(var i,u=e[Symbol.iterator]();!(a=(i=u.next()).done)&&(t.push(i.value),!r||t.length!==r);a=!0);}catch(e){n=!0,o=e}finally{try{!a&&u.return&&u.return()}finally{if(n)throw o}}return t}(e,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),n=function(){function e(e,r){for(var t=0;t<r.length;t++){var a=r[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(r,t,a){return t&&e(r.prototype,t),a&&e(r,a),r}}(),o=l(t(4)),i=l(t(3)),u=function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r.default=e,r}(t(0));function l(e){return e&&e.__esModule?e:{default:e}}function s(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}var c=function(e){function r(e){!function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}(this,r);var t=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r}(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return t.onValidate=function(e,r){t.props.parent.setState(d({},e,r))},t.toArray=function(e){return console.log("object, ",e),Object.entries(e).reduce(function(e,r){var t=a(r,2),n=t[0],o=t[1];return e.concat({key:n,value:o})},[])},t.addToStateProperty=function(e,r){t.setState(d({},e,Object.assign(t.state[e],r)))},t.removeError=function(e,r){var a=t.state.errors[e],n=a.indexOf(r);n>-1&&a.splice(n,1),t.addToStateProperty("errors",d({},e,a))},t.removeAllErrors=function(e){t.setState({errors:Object.assign(t.state.errors,d({},e,[]))})},t.updateErrorsForField=function(e,r,a){e?t.removeError(r,a):t.addToStateProperty("errors",d({},r,[].concat(s(new Set([].concat(s(t.state.errors[r]||[]),[a]))))))},t.validateRules=function(e,r,a){return a.reduce(function(a,n){var o=u[n]||n,i=o.validator(r);return t.updateErrorsForField(i,e,o.error),a&&i},!0)},t.validateGroup=function(e,r,a){if(t.state.groupValidation[a]&&Object.entries(t.state.groupValidation[a]).filter(function(r){return!r.includes(e)}).some(function(e){return e.includes(!0)})){var n=t.props.fields[e].rules,o=t.validateRules(e,r,n);return t.setState({groupValidation:Object.assign({},t.state.groupValidation[a],d({},e,o))}),!0}var i=t.props.fields[e].rules,u=t.validateRules(e,r,i),l=t.state.groupValidation;return l[a]=Object.assign({},l[a],d({},e,u)),t.setState({groupValidation:Object.assign({},t.state.groupValidation,l)},function(){return t.setState({validation:Object.assign(t.state.validation,d({},a,Object.values(t.state.groupValidation[a]).some(function(e){return!0===e})))})}),u},t.validateField=function(e,r){var a=t.props.fields[e].required&&"string"==typeof t.props.fields[e].required?t.props.fields[e].required:void 0;if(!a&&!t.props.fields[e].required&&0===r.length)return t.setState({validation:Object.assign(t.state.validation,d({},e,!0))},function(){return t.removeAllErrors(e)}),!0;if(a)return t.validateGroup(e,r,a);var n=t.props.fields[e].rules,o=t.validateRules(e,r,n);return t.setState({validation:Object.assign(t.state.validation,d({},e,o))}),o},t.validateFormAndUpdateState=function(){Object.values(t.props.fields).map(function(e){return e.name}).filter(function(e){return e}).forEach(function(e){var r=document.getElementsByName(e)[0]&&document.getElementsByName(e)[0].value?document.getElementsByName(e)[0].value:"";t.validateFieldAndUpdateState(e,r)})},t.onChange=function(e,r){var a=r||e.target;t.validateFieldAndUpdateState(a.name,a.value)},t.validateFieldsInput=function(){Object.values(t.props.fields).forEach(function(e){if(!e.name)throw new Error("Please provide a name value for all of your fields");if(!e.rules)throw new Error("Please provide a rules array for each field (or an empty array for non-validated fields)")})},console.log("props: ",e),t.state={errors:Object.keys(e.fields).reduce(function(e,r){return e[r]=[],e},{}),groupValidation:Object.keys(e.fields).reduce(function(r,t){var a=e.fields[t];return a.required&&"string"==typeof a.required?(r[a.required]=Object.assign({},r[a.required],d({},t,!(a.rules&&a.rules.length>0||a.required))),r):r},{}),validation:Object.keys(e.fields).reduce(function(r,t){var a=e.fields[t];return a.required&&"string"==typeof a.required?(r[a.required]=!1,r):(r[t]=!(a.rules&&a.rules.length>0||a.required),r)},{}),isFormValid:!1},t}return function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)}(r,o.default.Component),n(r,[{key:"validateFieldAndUpdateState",value:function(e,r){var t=this.props.fields[e].onValidate||this.props.onValidate||this.onValidate;this.validateField(e,r)?t(e,r):t(e,null),this.setState({isFormValid:Object.values(this.state.validation).every(function(e){return e})})}},{key:"componentDidMount",value:function(){var e=this;this.validateFieldsInput(),Object.values(this.props.fields).forEach(function(r){if(!0===r.required){var t=e.props.fields;t[r.name].rules.push("isRequired"),e.setState({fields:t})}}),this.validateFormAndUpdateState(),this.props.validateOnLoad&&Object.values(this.props.fields).map(function(r){return e.removeAllErrors(r.name)})}},{key:"render",value:function(){var e=this.state,r=e.errors,t=e.isFormValid,a=e.validation;return this.props.children({isFormValid:t,isFieldValid:a,fields:this.toArray(this.props.fields),onChange:this.onChange,errors:r})}}]),r}();r.default=c,c.propTypes={parent:i.default.object,children:i.default.func,onValidate:i.default.func,fields:i.default.object,validateOnLoad:i.default.bool},c.defaultProps={validateOnLoad:!0}},function(e,r,t){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.Validator=void 0;var a=function(e){return e&&e.__esModule?e:{default:e}}(t(5));r.Validator=a.default}])); | ||
| !function(e,r){for(var t in r)e[t]=r[t]}(exports,function(e){var r={};function t(a){if(r[a])return r[a].exports;var n=r[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,t),n.l=!0,n.exports}return t.m=e,t.c=r,t.d=function(e,r,a){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:a})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(t.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)t.d(a,n,function(r){return e[r]}.bind(null,n));return a},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=6)}([function(e,r,t){"use strict";Object.defineProperty(r,"__esModule",{value:!0});var a=/^(([^<>()[\]\\.,;:\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,}))$/,n=/^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5}){1,25}(,[ ]{0,1}([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5}){1,25})*$/,i=/^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/,o=/^[+]?(\d{1,3})\s?(\d{10})$/,u=/^(([A-Za-z0-9]{2,4})\s?([A-Za-z0-9]{1,5})?)?$/,s=/^(\d{2}(\s|[-])\d{2}(\s|[-])\d{2}$)|\d{6}|^$/,l=/^((([A-Za-z]{6}[0-9A-Za-z]{2})|([A-Za-z]{4}(\s|-)?[A-Za-z]{2}(\s|-)?[0-9A-Za-z]{2}))[0-9A-Za-z]{3}?$)|^$/,d=/^([0-9A-Za-z]{4}\s?){4,6}([0-9A-Za-z]{1,4}|[0-9A-Za-z]{4}\s?[0-9A-Za-z]{1|4})?$/,c=/^\d{8,15}$/,f=/^[A-Z0-9a-z\-/\s]+$/i,p=/^-?\d*[.]?\d+$/,v=/^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/g,h={validator:function(e){return!!e.match(i)},error:"Please provide a full name"},m={validator:function(e){return!!e.match(a)},error:"Please provide a valid email address"},y={validator:function(e){return!!e.match(n)},error:"Please provide a valid email address, or several emails comma delimited"},b={validator:function(e){return!!e.match(o)},error:"Please provide a valid UK phone number"},g={validator:function(e){return!!e.match(u)},error:"Please provide a valid UK postcode"},O={validator:function(e){return!!e.match(s)},error:"Please provide a UK Sort Code"},j={validator:function(e){return!!e.match(l)},error:"Please provide a valid Swift Code"},A={validator:function(e){return!!e.match(d)},error:"Please provide a valid Swift Code"},P={validator:function(e){return!!e.match(c)},error:"Please provide a valid UK VAT Number"},_={validator:function(e){return!!e.match(f)},error:"Please provide an alphanumeric input"},S={validator:function(e){return"number"==typeof e||!!e.match(p)},error:"Please provide an numeric input"},w={validator:function(e){return!!e.match(v)},error:"Please provide a valid URL"},z={validator:function(e,r){return e.length===r},error:"Please provide an input of exactly "+length+" characters"},E={validator:function(e,r){return e.length<=r},error:"The maximum length of this input is "+length+" characters"},V={validator:function(e,r){return e.length>=r},error:"The minimum length of this input is "+length+" characters"};r.isRequired={validator:function(e){return!!e},error:"Please provide a value"},r.isEmail=m,r.isEmailArray=y,r.isFullName=h,r.isPhoneNumber=b,r.isPostCode=g,r.isSortCode=O,r.isSwiftCode=j,r.isIban=A,r.isVatNumber=P,r.isAlphaNumeric=_,r.isNumeric=S,r.isUrl=w,r.isLength=z,r.maxLength=E,r.minLength=V},function(e,r,t){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,r,t){"use strict";var a=t(1);function n(){}e.exports=function(){function e(e,r,t,n,i,o){if(o!==a){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function r(){return e}e.isRequired=e;var t={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:r,element:e,instanceOf:r,node:e,objectOf:r,oneOf:r,oneOfType:r,shape:r,exact:r};return t.checkPropTypes=n,t.PropTypes=t,t}},function(e,r,t){e.exports=t(2)()},function(e,r){e.exports=require("react")},function(e,r,t){"use strict";Object.defineProperty(r,"__esModule",{value:!0});var a=function(){return function(e,r){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,r){var t=[],a=!0,n=!1,i=void 0;try{for(var o,u=e[Symbol.iterator]();!(a=(o=u.next()).done)&&(t.push(o.value),!r||t.length!==r);a=!0);}catch(e){n=!0,i=e}finally{try{!a&&u.return&&u.return()}finally{if(n)throw i}}return t}(e,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),n=function(){function e(e,r){for(var t=0;t<r.length;t++){var a=r[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(r,t,a){return t&&e(r.prototype,t),a&&e(r,a),r}}(),i=s(t(4)),o=s(t(3)),u=function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r.default=e,r}(t(0));function s(e){return e&&e.__esModule?e:{default:e}}function l(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}var c=function(e){function r(e){!function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}(this,r);var t=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r}(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return t.onValidate=function(e,r){t.props.parent.setState(d({},e,r))},t.toArray=function(e){return console.log("object is: ",e),Object.entries(e).reduce(function(e,r){var t=a(r,2),n=t[0],i=t[1];return e.concat({key:n,value:i})},[])},t.addToStateProperty=function(e,r){t.setState(d({},e,Object.assign(t.state[e],r)))},t.removeError=function(e,r){var a=t.state.errors[e],n=a.indexOf(r);n>-1&&a.splice(n,1),t.addToStateProperty("errors",d({},e,a))},t.removeAllErrors=function(e){t.setState({errors:Object.assign(t.state.errors,d({},e,[]))})},t.updateErrorsForField=function(e,r,a){e?t.removeError(r,a):t.addToStateProperty("errors",d({},r,[].concat(l(new Set([].concat(l(t.state.errors[r]||[]),[a]))))))},t.validateRules=function(e,r,a){return a.reduce(function(a,n){var i=u[n]||n,o=i.validator(r);return t.updateErrorsForField(o,e,i.error),a&&o},!0)},t.validateGroup=function(e,r,a){if(t.state.groupValidation[a]&&Object.entries(t.state.groupValidation[a]).filter(function(r){return!r.includes(e)}).some(function(e){return e.includes(!0)})){var n=t.props.fields[e].rules,i=t.validateRules(e,r,n);return t.setState({groupValidation:Object.assign({},t.state.groupValidation[a],d({},e,i))}),!0}var o=t.props.fields[e].rules,u=t.validateRules(e,r,o),s=t.state.groupValidation;return s[a]=Object.assign({},s[a],d({},e,u)),t.setState({groupValidation:Object.assign({},t.state.groupValidation,s)},function(){return t.setState({validation:Object.assign(t.state.validation,d({},a,Object.values(t.state.groupValidation[a]).some(function(e){return!0===e})))})}),u},t.validateField=function(e,r){var a=t.props.fields[e].required&&"string"==typeof t.props.fields[e].required?t.props.fields[e].required:void 0;if(!a&&!t.props.fields[e].required&&0===r.length)return t.setState({validation:Object.assign(t.state.validation,d({},e,!0))},function(){return t.removeAllErrors(e)}),!0;if(a)return t.validateGroup(e,r,a);var n=t.props.fields[e].rules,i=t.validateRules(e,r,n);return t.setState({validation:Object.assign(t.state.validation,d({},e,i))}),i},t.validateFormAndUpdateState=function(){Object.values(t.props.fields).map(function(e){return e.name}).filter(function(e){return e}).forEach(function(e){var r=document.getElementsByName(e)[0]&&document.getElementsByName(e)[0].value?document.getElementsByName(e)[0].value:"";t.validateFieldAndUpdateState(e,r)})},t.onChange=function(e,r){var a=r||e.target;t.validateFieldAndUpdateState(a.name,a.value)},t.validateFieldsInput=function(){Object.values(t.props.fields).forEach(function(e){if(!e.name)throw new Error("Please provide a name value for all of your fields");if(!e.rules)throw new Error("Please provide a rules array for each field (or an empty array for non-validated fields)")})},t.state={errors:Object.keys(e.fields).reduce(function(e,r){return e[r]=[],e},{}),groupValidation:Object.keys(e.fields).reduce(function(r,t){var a=e.fields[t];return a.required&&"string"==typeof a.required?(r[a.required]=Object.assign({},r[a.required],d({},t,!(a.rules&&a.rules.length>0||a.required))),r):r},{}),validation:Object.keys(e.fields).reduce(function(r,t){var a=e.fields[t];return a.required&&"string"==typeof a.required?(r[a.required]=!1,r):(r[t]=!(a.rules&&a.rules.length>0||a.required),r)},{}),isFormValid:!1},t}return function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)}(r,i.default.Component),n(r,[{key:"validateFieldAndUpdateState",value:function(e,r){var t=this.props.fields[e].onValidate||this.props.onValidate||this.onValidate;this.validateField(e,r)?t(e,r):t(e,null),this.setState({isFormValid:Object.values(this.state.validation).every(function(e){return e})})}},{key:"componentDidMount",value:function(){var e=this;this.validateFieldsInput(),Object.values(this.props.fields).forEach(function(r){if(!0===r.required){var t=e.props.fields;t[r.name].rules.push("isRequired"),e.setState({fields:t})}}),this.validateFormAndUpdateState(),this.props.validateOnLoad&&Object.values(this.props.fields).map(function(r){return e.removeAllErrors(r.name)})}},{key:"render",value:function(){console.log("this.props here is :",this.props);var e=this.state,r=e.errors,t=e.isFormValid,a=e.validation;return this.props.children({isFormValid:t,isFieldValid:a,fields:this.toArray(this.props.fields||{}),onChange:this.onChange,errors:r})}}]),r}();r.default=c,c.propTypes={parent:o.default.object,children:o.default.func,onValidate:o.default.func,fields:o.default.object,validateOnLoad:o.default.bool},c.defaultProps={validateOnLoad:!0}},function(e,r,t){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.Validator=void 0;var a=function(e){return e&&e.__esModule?e:{default:e}}(t(5));r.Validator=a.default}])); |
| { | ||
| "name": "react-form-validator-component", | ||
| "version": "1.5.8", | ||
| "version": "1.5.9", | ||
| "main": "build/lib/index.js", | ||
@@ -5,0 +5,0 @@ "repository": "git@github.com:JDLT-Ltd/react-form-validator-component.git", |
| import React from 'react' | ||
| import reactDOM from 'react-dom' | ||
| import { Form, Header, Label, Input, Container, Button, Dropdown } from 'semantic-ui-react' | ||
| import { Form, Header, Label, Input, Container, Button, Dropdown, Modal } from 'semantic-ui-react' | ||
@@ -8,10 +8,115 @@ import { Validator } from '../lib/index' | ||
| //this is a custom rule | ||
| const isRequired = { | ||
| validator: data => { | ||
| if (data) return true | ||
| return false | ||
| const providerOptions = [ | ||
| { | ||
| text: 'AWS', | ||
| value: 'amazon' | ||
| }, | ||
| error: 'Please provide a value' | ||
| { | ||
| text: 'Azure', | ||
| value: 'azure' | ||
| } | ||
| ] | ||
| const fields = { | ||
| none: { | ||
| cloudProvider: { | ||
| name: 'cloudProvider', | ||
| rules: [], | ||
| required: true | ||
| } | ||
| }, | ||
| amazon: { | ||
| cloudProvider: { | ||
| name: 'cloudProvider', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| accessKey: { | ||
| name: 'accessKey', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| secretKey: { | ||
| name: 'secretKey', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| endpoint: { | ||
| name: 'endpoint', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| friendlyName: { | ||
| name: 'friendlyName', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| zoneType: { | ||
| name: 'zoneType', | ||
| rules: [], | ||
| required: true | ||
| } | ||
| }, | ||
| azure: { | ||
| cloudProvider: { | ||
| name: 'cloudProvider', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| clientId: { | ||
| name: 'clientId', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| clientSecret: { | ||
| name: 'clientSecret', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| accessKey: { | ||
| name: 'accessKey', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| regionCode: { | ||
| name: 'regionCode', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| subscriberId: { | ||
| name: 'subscriberId', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| tenantId: { | ||
| name: 'tenantId', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| importExisting: { | ||
| name: 'importExisting', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| friendlyName: { | ||
| name: 'friendlyName', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| zoneType: { | ||
| name: 'zoneType', | ||
| rules: [], | ||
| required: true | ||
| } | ||
| } | ||
| } | ||
| // const BIND_CLOUD = gql` | ||
| // mutation bindCloud($zoneType: String!, $friendlyName: String!, $config: MorpheusCloudConfig) { | ||
| // bindCloud(zoneType: $zoneType, friendlyName: $friendlyName, config: $config) { | ||
| // id | ||
| // } | ||
| // } | ||
| // ` | ||
| class App extends React.Component { | ||
@@ -21,21 +126,15 @@ constructor(props) { | ||
| this.state = { one: 1 } | ||
| this.state = { | ||
| cloudProvider: 'amazon' | ||
| } | ||
| this.onDropdownChange = this.onDropdownChange.bind(this) | ||
| } | ||
| fields = { | ||
| emailAddresses: { | ||
| name: 'emailAddresses', | ||
| rules: ['isEmail'], | ||
| required: true, | ||
| label: 'Email addresses' | ||
| }, | ||
| dropdown: { | ||
| name: 'dropdown', | ||
| rules: [], | ||
| required: true, | ||
| label: 'dropdown' | ||
| } | ||
| onDropdownChange(event, data) { | ||
| this.setState({ cloudProvider: data.value }) | ||
| } | ||
| renderErrors(errors) { | ||
| renderErrors = errors => { | ||
| if (!errors) return | ||
| return errors.map((error, i) => { | ||
@@ -53,141 +152,135 @@ return ( | ||
| <Container> | ||
| <Header as="h1">Examples for using RFVC</Header> | ||
| <Header as="h2">Basic Validation</Header> | ||
| <button onClick={() => this.setState({ one: this.state.one + 1 })}>clicky click</button> | ||
| <Validator test={this.state.one} fields={this.fields} parent={this}> | ||
| {({ isFormValid, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field> | ||
| <label>Your Emails</label> | ||
| <Input name="emailAddresses" onChange={onChange} /> | ||
| {this.renderErrors(errors.emailAddresses)} | ||
| </Form.Field> | ||
| <Form.Field> | ||
| <label>dropdown</label> | ||
| <Form.Dropdown | ||
| selection | ||
| name="dropdown" | ||
| onChange={onChange} | ||
| options={[{ text: 'Option A', value: 'A' }, { text: 'Option B', value: 'B' }]} | ||
| /> | ||
| {this.renderErrors(errors.dropdown)} | ||
| </Form.Field> | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <Button disabled={!isFormValid}>Test</Button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| {/* <Header as={'h2'}>Basic Validation using fields to map (and no semantic-ui)</Header> | ||
| <Validator fields={this.fields} parent={this}> | ||
| {({ isFormValid, fields, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| {fields && | ||
| fields.map((input, i) => { | ||
| return ( | ||
| <div key={i}> | ||
| <label>{input.value.label}</label> | ||
| <input name={input.value.name} onChange={onChange} /> | ||
| {this.renderErrors(errors[input.value.name])} | ||
| </div> | ||
| ) | ||
| })} | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <button disabled={!isFormValid}>Test</button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| <Header as="h2">Validation using isFieldValid</Header> | ||
| <Validator fields={this.fields} parent={this}> | ||
| {({ isFormValid, isFieldValid, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field> | ||
| <label>Your Emails</label> | ||
| <Input name="emailAddresses" onChange={onChange} /> | ||
| {this.renderErrors(errors.emailAddresses)} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('sure is')} disabled={!isFieldValid.emailAddresses}> | ||
| Thats an Email! | ||
| </Button> | ||
| <Form.Field> | ||
| <label>Something</label> | ||
| <Input name="something" onChange={onChange} /> | ||
| {this.renderErrors(errors.something)} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('is it?')} disabled={!isFieldValid.something}> | ||
| Its not nothing | ||
| </Button> | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <button disabled={!isFormValid}>Test</button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| <Header as="h2">Validation using validateOnLoad and isFieldValid</Header> | ||
| <Validator fields={this.fields} parent={this} validateOnLoad> | ||
| {({ isFormValid, isFieldValid, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field> | ||
| <label>Your Emails</label> | ||
| <Input name="emailAddresses" onChange={onChange} value={'I_DONT_WORK'} /> | ||
| {this.renderErrors(errors.emailAddresses)} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('sure is')} disabled={!isFieldValid.emailAddresses}> | ||
| Thats an Email! | ||
| </Button> | ||
| <Form.Field> | ||
| <label>Something</label> | ||
| <Input name="something" onChange={onChange} defaultValue={''} /> | ||
| {this.renderErrors(errors.something)} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('is it?')} disabled={!isFieldValid.something}> | ||
| Its not nothing | ||
| </Button> | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <button disabled={!isFormValid}>Test</button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| <Header as="h2">Validation using a custom onValidate handler</Header> | ||
| <Validator | ||
| fields={this.fields} | ||
| onValidate={(fieldName, fieldValue) => this.setState({ hidden: fieldValue })} | ||
| validateOnLoad | ||
| > | ||
| {({ isFormValid, isFieldValid, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field> | ||
| <label>Your Emails</label> | ||
| <Input name="emailAddresses" onChange={onChange} /> | ||
| {this.renderErrors(errors.emailAddresses)} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('sure is')} disabled={!isFieldValid.emailAddresses}> | ||
| Thats an Email! | ||
| </Button> | ||
| <Form.Field> | ||
| <label>Something</label> | ||
| <Input name="something" onChange={onChange} /> | ||
| {this.renderErrors(errors.something)} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('is it?')} disabled={!isFieldValid.something}> | ||
| Its not nothing | ||
| </Button> | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <button disabled={!isFormValid}>Test</button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> */} | ||
| <Modal trigger={<Button color="blue">Bind cloud</Button>}> | ||
| <Modal.Content> | ||
| <Header as="h2">Bind cloud</Header> | ||
| <Validator parent={this} fields={fields[this.state.cloudProvider] || fields.none} validateOnLoad={false}> | ||
| {({ isFormValid, isFieldValid, errors, onChange }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field width="5"> | ||
| <Form.Dropdown | ||
| name="cloudProvider" | ||
| label="Cloud provider" | ||
| selection | ||
| placeholder={'Select a provider'} | ||
| options={providerOptions} | ||
| onChange={onChange} | ||
| /> | ||
| </Form.Field> | ||
| {/* {this.renderErrors(errors.cloudProvider)} */} | ||
| <Form.Field width="5"> | ||
| <Form.Input name="friendlyName" label="Friendly name" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.friendlyName)} */} | ||
| </Form.Field> | ||
| {this.state.cloudProvider === 'amazon' && ( | ||
| <React.Fragment> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="accessKey" label="Access key" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.accessKey)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="secretKey" label="Secret key" onChange={onChange} type="password" /> | ||
| {/* {this.renderErrors(errors.secretKey)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Select | ||
| name="endpoint" | ||
| label="Endpoint" | ||
| selection | ||
| placeholder={'Select an endpoint'} | ||
| options={[{ text: 'Option A', value: 'A' }, { text: 'Option B', value: 'B' }]} | ||
| onChange={onChange} | ||
| /> | ||
| {/* {this.renderErrors(errors.endpoint)} */} | ||
| </Form.Field> | ||
| </React.Fragment> | ||
| )} | ||
| {this.state.cloudProvider === 'azure' && ( | ||
| <React.Fragment> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="accessKey" label="Access key" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.accessKey)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="clientId" label="Client ID" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.clientId)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="clientSecret" label="Client secret" type="password" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.clientSecret)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input type="text" label="Location" name="regionCode" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.regionCode)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="subscriberId" label="Subscriber Id" type="text" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.subscriberId)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="tenantId" label="Tenant ID" type="text" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.tenantId)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input | ||
| name="importExisting" | ||
| label="Import existing instances" | ||
| type="checkbox" | ||
| onChange={onChange} | ||
| /> | ||
| {/* {this.renderErrors(errors.importExisting)} */} | ||
| </Form.Field> | ||
| </React.Fragment> | ||
| )} | ||
| {/* <Mutation | ||
| mutation={BIND_CLOUD} | ||
| onCompleted={data => toastie.success(data)} | ||
| onError={error => { | ||
| toastie.error(`There was an error: ${error}`) | ||
| }} | ||
| > | ||
| {(bind, { called, loading }) => ( | ||
| <Form.Field> | ||
| <Button | ||
| color="green" | ||
| disabled={!isFormValid || this.state.cloudProvider === 'none' || loading} | ||
| onClick={e => { | ||
| e.preventDefault() | ||
| const config = | ||
| this.state.cloudProvider === 'amazon' | ||
| ? { | ||
| accessKey: this.state.accessKey, | ||
| secretKey: this.state.secretKey, | ||
| endpoint: this.state.endpoint | ||
| } | ||
| : { | ||
| accessKey: this.state.accessKey, | ||
| clientId: this.state.clientId, | ||
| clientSecret: this.state.clientSecret, | ||
| tenantId: this.state.tenantId, | ||
| subscriberId: this.state.subscriberId, | ||
| regionCode: this.state.regionCode, | ||
| importExisting: this.state.importExisting | ||
| } | ||
| bind({ | ||
| variables: { | ||
| zoneType: this.state.cloudProvider, | ||
| friendlyName: this.state.friendlyName, | ||
| config | ||
| } | ||
| }) | ||
| }} | ||
| > | ||
| Bind | ||
| </Button> | ||
| </Form.Field> | ||
| )} | ||
| </Mutation> */} | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| </Modal.Content> | ||
| </Modal> | ||
| </Container> | ||
@@ -194,0 +287,0 @@ ) |
@@ -8,3 +8,2 @@ import React from 'react' | ||
| super(props) | ||
| console.log('props: ', props) | ||
| this.state = { | ||
@@ -47,3 +46,3 @@ errors: Object.keys(props.fields).reduce((accumulator, currentValue) => { | ||
| toArray = object => { | ||
| console.log('object, ', object) | ||
| console.log('object is: ', object) | ||
| return Object.entries(object).reduce((accumulator, [key, value]) => { | ||
@@ -214,2 +213,3 @@ return accumulator.concat({ | ||
| render() { | ||
| console.log('this.props here is :', this.props) | ||
| const { errors, isFormValid, validation } = this.state | ||
@@ -219,3 +219,3 @@ return this.props.children({ | ||
| isFieldValid: validation, | ||
| fields: this.toArray(this.props.fields), | ||
| fields: this.toArray(this.props.fields || {}), | ||
| onChange: this.onChange, | ||
@@ -222,0 +222,0 @@ errors |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.84%
333060
- Lines of code
- increased by13.57%
745
No dependency changes