formsy-react - npm Package Compare versions

Comparing version 2.2.2 to 2.2.3

dist/formsy-react.cjs.development.js

@@ -1015,3 +1015,5 @@ 'use strict';
         children = _this$props4.children,
-        nonFormsyProps = _objectWithoutPropertiesLoose(_this$props4, ["children", "mapping", "onChange", "onInvalid", "onInvalidSubmit", "onReset", "onSubmit", "onValid", "onValidSubmit", "preventDefaultSubmit", "preventExternalInvalidation", "validationErrors"]);
+        disabled = _this$props4.disabled,
+        formElement = _this$props4.formElement,
+        nonFormsyProps = _objectWithoutPropertiesLoose(_this$props4, ["children", "mapping", "onChange", "onInvalid", "onInvalidSubmit", "onReset", "onSubmit", "onValid", "onValidSubmit", "preventDefaultSubmit", "preventExternalInvalidation", "validationErrors", "disabled", "formElement"]);
 
@@ -1021,7 +1023,7 @@ var contextValue = this.state.contextValue;
       value: contextValue
-    }, React.createElement('form', _extends({
+    }, React.createElement(formElement, _extends({
       onReset: this.resetInternal,
       onSubmit: this.submit
     }, nonFormsyProps, {
-      disabled: false
+      disabled: disabled
     }), children));
@@ -1036,2 +1038,3 @@ };
   mapping: PropTypes.func,
+  formElement: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
   onChange: PropTypes.func,
@@ -1060,3 +1063,4 @@ onInvalid: PropTypes.func,
   preventExternalInvalidation: false,
-  validationErrors: {}
+  validationErrors: {},
+  formElement: 'form'
 };
@@ -1063,0 +1067,0 @@

dist/formsy-react.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("lodash.isplainobject")),n=t(require("prop-types")),r=t(require("react")),i=t(require("lodash.get")),a=t(require("lodash.has")),o=t(require("lodash.set"));function u(){return(u=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}function s(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}function l(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function d(t){return Array.isArray(t)}function c(t){return e(t)}function p(t){return t instanceof Date}function f(t){return null!==t&&"function"==typeof t}function v(t){return"string"==typeof t}function h(t){return t instanceof RegExp}function m(t){return""===t}function V(t){return null==t}function g(t){return void 0===t}function b(){}function y(t){return c(t)?u({},t):d(t)?[].concat(t):t}function E(t,e){return typeof t==typeof e&&(d(t)&&d(e)?t.length===e.length&&t.every((function(t,n){return E(t,e[n])})):f(t)&&f(e)||p(t)&&p(e)?t.toString()===e.toString():c(t)&&c(e)?Object.keys(t).length===Object.keys(e).length&&Object.keys(t).every((function(n){return E(t[n],e[n])})):h(t)&&h(e)?t.toString()===e.toString():t===e)}function F(t,e,n,r){var i={errors:[],failed:[],success:[]};return Object.keys(n).forEach((function(a){var o=n[a],u=r[a],s=function(t){v(t)?(i.errors.push(t),i.failed.push(a)):t?i.success.push(a):i.failed.push(a)};if(u&&f(o))throw new Error("Formsy does not allow you to override default validations: "+a);if(!u&&!f(o))throw new Error("Formsy does not have the validation rule: "+a);return f(o)?s(o(e,t)):s(u(e,t,o))})),i}function S(t){return!V(t)}function q(t){return v(t)?m(t):!function(t){return void 0===t}(t)&&g(t)}function w(t){return v(t)?m(t):V(t)}function I(t,e,n){return!S(e)||q(e)||n.test(""+e)}var x=/^[A-Z]+$/i,R=/^[0-9A-Z]+$/i,C=/^(([^<>()[\]\\.,;:\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,}))$/i,O=/^(?:[-+]?(?:\d+))?(?:\.\d*)?(?:[eE][+-]?(?:\d+))?$/,D=/^(?:[-+]?(?:0|[1-9]\d*))$/,j=/^[-+]?(?:\d*[.])?\d+$/,M=/^[\sA-ZÀ-ÖØ-öø-ÿ]+$/i,P=/^(?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[:?\d]*)\S*$/i,A=/^[A-Z\s]+$/i,T={equals:function(t,e,n){return!S(e)||q(e)||e===n},equalsField:function(t,e,n){return e===t[n]},isAlpha:function(t,e){return I(0,e,x)},isAlphanumeric:function(t,e){return I(0,e,R)},isDefaultRequiredValue:function(t,e){return w(e)},isEmail:function(t,e){return I(0,e,C)},isEmptyString:function(t,e){return q(e)},isExisty:function(t,e){return S(e)},isFalse:function(t,e){return!1===e},isFloat:function(t,e){return I(0,e,O)},isInt:function(t,e){return I(0,e,D)},isLength:function(t,e,n){return!S(e)||q(e)||e.length===n},isNumeric:function(t,e){return function(t){return"number"==typeof t}(e)||I(0,e,j)},isSpecialWords:function(t,e){return I(0,e,M)},isTrue:function(t,e){return!0===e},isUndefined:function(t,e){return g(e)},isUrl:function(t,e){return I(0,e,P)},isWords:function(t,e){return I(0,e,A)},matchRegexp:I,maxLength:function(t,e,n){return!S(e)||e.length<=n},minLength:function(t,e,n){return!S(e)||q(e)||e.length>=n}},N=function(){throw new Error("Could not find Formsy Context Provider. Did you use withFormsy outside <Formsy />?")},k=r.createContext({attachToForm:N,detachFromForm:N,isFormDisabled:!0,isValidValue:N,validate:N,runValidation:N}),$=function(t){return v(t)?t.split(/,(?![^{[]*[}\]])/g).reduce((function(t,e){var n=e.split(":"),r=n.shift();if((n=n.map((function(t){try{return JSON.parse(t)}catch(e){return t}}))).length>1)throw new Error("Formsy does not support multiple args on string validations. Use object format of validations instead.");var i=u({},t);return i[r]=!n.length||n[0],i}),{}):t||{}},W={innerRef:n.func,name:n.string.isRequired,required:n.oneOfType([n.bool,n.object,n.string]),validations:n.oneOfType([n.object,n.string]),value:n.any},U=function(t){function e(e){var n,r,s;return(n=t.call(this,e)||this).prevInputNames=null,n.componentDidMount=function(){n.prevInputNames=n.inputs.map((function(t){return t.props.name})),n.validateForm()},n.componentDidUpdate=function(t){var e=n.props,r=e.validationErrors,i=e.disabled;r&&c(r)&&Object.keys(r).length>0&&n.setInputValidationErrors(r);var a=n.inputs.map((function(t){return t.props.name}));n.prevInputNames&&!E(n.prevInputNames,a)&&(n.prevInputNames=a,n.validateForm()),i!==t.disabled&&n.setState((function(t){return u({},t,{contextValue:u({},t.contextValue,{isFormDisabled:i})})}))},n.getCurrentValues=function(){return n.inputs.reduce((function(t,e){return t[e.props.name]=y(e.state.value),t}),{})},n.getModel=function(){var t=n.getCurrentValues();return n.mapModel(t)},n.getPristineValues=function(){return n.inputs.reduce((function(t,e){var n=e.props;return t[n.name]=y(n.value),t}),{})},n.setFormPristine=function(t){n.setState({formSubmitted:!t}),n.inputs.forEach((function(e){e.setState({formSubmitted:!t,isPristine:t})}))},n.setInputValidationErrors=function(t){var e=n.props.preventExternalInvalidation,r=n.state.isValid;n.inputs.forEach((function(e){var n=e.props.name;e.setState({isValid:!(n in t),validationError:v(t[n])?[t[n]]:t[n]})})),!e&&r&&n.setFormValidState(!1)},n.setFormValidState=function(t){var e=n.props,r=e.onValid,i=e.onInvalid;n.setState({isValid:t}),t?r():i()},n.isValidValue=function(t,e){return n.runValidation(t,e).isValid},n.isFormDisabled=function(){return n.props.disabled},n.mapModel=function(t){var e=n.props.mapping;if(e)return e(t);var r={};return Object.keys(t).forEach((function(e){o(r,e,t[e])})),r},n.reset=function(t){n.setFormPristine(!0),n.resetModel(t)},n.resetInternal=function(t){var e=n.props.onReset;t.preventDefault(),n.reset(),e&&e()},n.resetModel=function(t){n.inputs.forEach((function(e){var n=e.props.name;t&&a(t,n)?e.setValue(i(t,n)):e.resetValue()})),n.validateForm()},n.runValidation=function(t,e){void 0===e&&(e=t.state.value);var r=n.props.validationErrors,i=t.props,a=i.validationError,o=i.validationErrors,u=i.name,s=n.getCurrentValues(),l=F(e,s,t.validations,T),d=F(e,s,t.requiredValidations,T),c=!!Object.keys(t.requiredValidations).length&&!!d.success.length,p=!(l.failed.length||r&&r[t.props.name]);return{isRequired:c,isValid:!c&&p,validationError:function(){if(p&&!c)return n.emptyArray;if(l.errors.length)return l.errors;if(r&&r[u])return v(r[u])?[r[u]]:r[u];if(c){var t=o[d.success[0]]||a;return t?[t]:null}return l.failed.length?l.failed.map((function(t){return o[t]?o[t]:a})).filter((function(t,e,n){return n.indexOf(t)===e})):void 0}()}},n.attachToForm=function(t){-1===n.inputs.indexOf(t)&&n.inputs.push(t),n.state.canChange&&(0,n.props.onChange)(n.getModel(),n.isChanged()),n.throttledValidateForm()},n.detachFromForm=function(t){var e=n.inputs.indexOf(t);-1!==e&&(n.inputs=n.inputs.slice(0,e).concat(n.inputs.slice(e+1))),n.validateForm()},n.isChanged=function(){return!E(n.getPristineValues(),n.getCurrentValues())},n.submit=function(t){var e=n.props,r=e.onSubmit,i=e.onValidSubmit,a=e.onInvalidSubmit,o=n.state.isValid;e.preventDefaultSubmit&&t&&t.preventDefault&&t.preventDefault(),n.setFormPristine(!1);var u=n.getModel();r(u,n.resetModel,n.updateInputsWithError,t),o?i(u,n.resetModel,n.updateInputsWithError,t):a(u,n.resetModel,n.updateInputsWithError,t)},n.updateInputsWithError=function(t,e){var r=n.props.preventExternalInvalidation,i=n.state.isValid;Object.entries(t).forEach((function(e){var i=e[0],a=e[1],o=n.inputs.find((function(t){return t.props.name===i}));if(!o)throw new Error("You are trying to update an input that does not exist. Verify errors object with input names. "+JSON.stringify(t));o.setState({isValid:r,validationError:v(a)?[a]:a})})),e&&i&&n.setFormValidState(!1)},n.updateInputsWithValue=function(t,e){Object.entries(t).forEach((function(t){var r=t[0],i=t[1],a=n.inputs.find((function(t){return t.props.name===r}));a&&a.setValue(i,e)}))},n.validate=function(t){n.state.canChange&&(0,n.props.onChange)(n.getModel(),n.isChanged());var e=n.runValidation(t);t.setState(e,n.validateForm)},n.validateForm=function(){var t=function(){var t=n.inputs.every((function(t){return t.state.isValid}));n.setFormValidState(t),n.setState({canChange:!0})};n.inputs.forEach((function(e,r){var i=n.runValidation(e);e.setState(i,r===n.inputs.length-1?t:null)})),n.inputs.length||n.setState({canChange:!0},t)},n.state={canChange:!1,isSubmitting:!1,isValid:!0,contextValue:{attachToForm:n.attachToForm,detachFromForm:n.detachFromForm,isFormDisabled:e.disabled,isValidValue:n.isValidValue,validate:n.validate,runValidation:n.runValidation}},n.inputs=[],n.emptyArray=[],n.throttledValidateForm=(r=n.validateForm,s=!0,function(){if(s){s=!1;for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];r.apply(this,e),setTimeout((function(){return s=!0}),66)}}),n}return s(e,t),e.prototype.render=function(){var t=this.props,e=t.children,n=function(t,e){if(null==t)return{};var n,r,i={},a=Object.keys(t);for(r=0;r<a.length;r++)e.indexOf(n=a[r])>=0||(i[n]=t[n]);return i}(t,["children","mapping","onChange","onInvalid","onInvalidSubmit","onReset","onSubmit","onValid","onValidSubmit","preventDefaultSubmit","preventExternalInvalidation","validationErrors"]);return r.createElement(k.Provider,{value:this.state.contextValue},r.createElement("form",u({onReset:this.resetInternal,onSubmit:this.submit},n,{disabled:!1}),e))},e}(r.Component);U.displayName="Formsy",U.propTypes={disabled:n.bool,mapping:n.func,onChange:n.func,onInvalid:n.func,onInvalidSubmit:n.func,onReset:n.func,onSubmit:n.func,onValid:n.func,onValidSubmit:n.func,preventDefaultSubmit:n.bool,preventExternalInvalidation:n.bool,validationErrors:n.object},U.defaultProps={disabled:!1,mapping:null,onChange:b,onInvalid:b,onInvalidSubmit:b,onReset:b,onSubmit:b,onValid:b,onValidSubmit:b,preventDefaultSubmit:!0,preventExternalInvalidation:!1,validationErrors:{}},exports.addValidationRule=function(t,e){T[t]=e},exports.default=U,exports.propTypes=W,exports.validationRules=T,exports.withFormsy=function(t){var e,n=function(e){function n(t){var n;(n=e.call(this,t)||this).getErrorMessage=function(){var t=n.getErrorMessages();return t.length?t[0]:null},n.getErrorMessages=function(){var t=n.state.validationError;return(!n.isValid()||n.showRequired())&&t||[]},n.getValue=function(){return n.state.value},n.setValidations=function(t,e){n.validations=$(t)||{},n.requiredValidations=!0===e?{isDefaultRequiredValue:e}:$(e)},n.setValue=function(t,e){void 0===e&&(e=!0);var r=n.props.validate;e?n.setState({value:t,isPristine:!1},(function(){r(l(n))})):n.setState({value:t})},n.hasValue=function(){return w(n.state.value)},n.isFormDisabled=function(){return n.props.isFormDisabled},n.isFormSubmitted=function(){return n.state.formSubmitted},n.isPristine=function(){return n.state.isPristine},n.isRequired=function(){return!!n.props.required},n.isValid=function(){return n.state.isValid},n.isValidValue=function(t){return n.props.isValidValue(l(n),t)},n.resetValue=function(){var t=n.props.validate;n.setState({value:n.state.pristineValue,isPristine:!0},(function(){t(l(n))}))},n.showError=function(){return!n.showRequired()&&!n.isValid()},n.showRequired=function(){return n.state.isRequired};var r=t.runValidation,i=t.validations,a=t.required;return n.state={value:t.value},n.setValidations(i,a),n.state=u({formSubmitted:!1,isPristine:!0,pristineValue:t.value,value:t.value},r(l(n),t.value)),n}s(n,e);var i=n.prototype;return i.componentDidMount=function(){var t=this.props,e=t.attachToForm;if(!t.name)throw new Error("Form Input requires a name property when used");e(this)},i.shouldComponentUpdate=function(t,e){var n=this.state,r=function(t,e){return Object.keys(t).some((function(n){return t[n]!==e[n]}))},i=r(this.props,t),a=r(n,e);return i||a},i.componentDidUpdate=function(t){var e=this.props,n=e.value,r=e.validations,i=e.required,a=e.validate;E(n,t.value)||this.setValue(n),E(r,t.validations)&&E(i,t.required)||(this.setValidations(r,i),a(this))},i.componentWillUnmount=function(){(0,this.props.detachFromForm)(this)},i.render=function(){var e=this.props.innerRef,n=u({},this.props,{errorMessage:this.getErrorMessage(),errorMessages:this.getErrorMessages(),hasValue:this.hasValue(),isFormDisabled:this.isFormDisabled(),isFormSubmitted:this.isFormSubmitted(),isPristine:this.isPristine(),isRequired:this.isRequired(),isValid:this.isValid(),isValidValue:this.isValidValue,resetValue:this.resetValue,setValidations:this.setValidations,setValue:this.setValue,showError:this.showError(),showRequired:this.showRequired(),value:this.getValue()});return e&&(n.ref=e),r.createElement(t,n)},n}(r.Component);return n.displayName="Formsy("+((e=t).displayName||e.name||(v(e)?e:"Component"))+")",n.propTypes=W,n.defaultProps={innerRef:null,required:!1,validationError:"",validationErrors:{},validations:null,value:t.defaultValue},function(t){return r.createElement(k.Consumer,null,(function(e){return r.createElement(n,u({},t,e))}))}};
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("lodash.isplainobject")),n=t(require("prop-types")),r=t(require("react")),i=t(require("lodash.get")),o=t(require("lodash.has")),a=t(require("lodash.set"));function u(){return(u=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}function s(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}function l(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function d(t){return Array.isArray(t)}function c(t){return e(t)}function f(t){return t instanceof Date}function p(t){return null!==t&&"function"==typeof t}function m(t){return"string"==typeof t}function v(t){return t instanceof RegExp}function h(t){return""===t}function V(t){return null==t}function g(t){return void 0===t}function b(){}function y(t){return c(t)?u({},t):d(t)?[].concat(t):t}function E(t,e){return typeof t==typeof e&&(d(t)&&d(e)?t.length===e.length&&t.every((function(t,n){return E(t,e[n])})):p(t)&&p(e)||f(t)&&f(e)?t.toString()===e.toString():c(t)&&c(e)?Object.keys(t).length===Object.keys(e).length&&Object.keys(t).every((function(n){return E(t[n],e[n])})):v(t)&&v(e)?t.toString()===e.toString():t===e)}function F(t,e,n,r){var i={errors:[],failed:[],success:[]};return Object.keys(n).forEach((function(o){var a=n[o],u=r[o],s=function(t){m(t)?(i.errors.push(t),i.failed.push(o)):t?i.success.push(o):i.failed.push(o)};if(u&&p(a))throw new Error("Formsy does not allow you to override default validations: "+o);if(!u&&!p(a))throw new Error("Formsy does not have the validation rule: "+o);return p(a)?s(a(e,t)):s(u(e,t,a))})),i}function S(t){return!V(t)}function q(t){return m(t)?h(t):!function(t){return void 0===t}(t)&&g(t)}function w(t){return m(t)?h(t):V(t)}function I(t,e,n){return!S(e)||q(e)||n.test(""+e)}var x=/^[A-Z]+$/i,R=/^[0-9A-Z]+$/i,C=/^(([^<>()[\]\\.,;:\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,}))$/i,O=/^(?:[-+]?(?:\d+))?(?:\.\d*)?(?:[eE][+-]?(?:\d+))?$/,j=/^(?:[-+]?(?:0|[1-9]\d*))$/,D=/^[-+]?(?:\d*[.])?\d+$/,M=/^[\sA-ZÀ-ÖØ-öø-ÿ]+$/i,P=/^(?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[:?\d]*)\S*$/i,A=/^[A-Z\s]+$/i,T={equals:function(t,e,n){return!S(e)||q(e)||e===n},equalsField:function(t,e,n){return e===t[n]},isAlpha:function(t,e){return I(0,e,x)},isAlphanumeric:function(t,e){return I(0,e,R)},isDefaultRequiredValue:function(t,e){return w(e)},isEmail:function(t,e){return I(0,e,C)},isEmptyString:function(t,e){return q(e)},isExisty:function(t,e){return S(e)},isFalse:function(t,e){return!1===e},isFloat:function(t,e){return I(0,e,O)},isInt:function(t,e){return I(0,e,j)},isLength:function(t,e,n){return!S(e)||q(e)||e.length===n},isNumeric:function(t,e){return function(t){return"number"==typeof t}(e)||I(0,e,D)},isSpecialWords:function(t,e){return I(0,e,M)},isTrue:function(t,e){return!0===e},isUndefined:function(t,e){return g(e)},isUrl:function(t,e){return I(0,e,P)},isWords:function(t,e){return I(0,e,A)},matchRegexp:I,maxLength:function(t,e,n){return!S(e)||e.length<=n},minLength:function(t,e,n){return!S(e)||q(e)||e.length>=n}},N=function(){throw new Error("Could not find Formsy Context Provider. Did you use withFormsy outside <Formsy />?")},k=r.createContext({attachToForm:N,detachFromForm:N,isFormDisabled:!0,isValidValue:N,validate:N,runValidation:N}),$=function(t){return m(t)?t.split(/,(?![^{[]*[}\]])/g).reduce((function(t,e){var n=e.split(":"),r=n.shift();if((n=n.map((function(t){try{return JSON.parse(t)}catch(e){return t}}))).length>1)throw new Error("Formsy does not support multiple args on string validations. Use object format of validations instead.");var i=u({},t);return i[r]=!n.length||n[0],i}),{}):t||{}},W={innerRef:n.func,name:n.string.isRequired,required:n.oneOfType([n.bool,n.object,n.string]),validations:n.oneOfType([n.object,n.string]),value:n.any},U=function(t){function e(e){var n,r,s;return(n=t.call(this,e)||this).prevInputNames=null,n.componentDidMount=function(){n.prevInputNames=n.inputs.map((function(t){return t.props.name})),n.validateForm()},n.componentDidUpdate=function(t){var e=n.props,r=e.validationErrors,i=e.disabled;r&&c(r)&&Object.keys(r).length>0&&n.setInputValidationErrors(r);var o=n.inputs.map((function(t){return t.props.name}));n.prevInputNames&&!E(n.prevInputNames,o)&&(n.prevInputNames=o,n.validateForm()),i!==t.disabled&&n.setState((function(t){return u({},t,{contextValue:u({},t.contextValue,{isFormDisabled:i})})}))},n.getCurrentValues=function(){return n.inputs.reduce((function(t,e){return t[e.props.name]=y(e.state.value),t}),{})},n.getModel=function(){var t=n.getCurrentValues();return n.mapModel(t)},n.getPristineValues=function(){return n.inputs.reduce((function(t,e){var n=e.props;return t[n.name]=y(n.value),t}),{})},n.setFormPristine=function(t){n.setState({formSubmitted:!t}),n.inputs.forEach((function(e){e.setState({formSubmitted:!t,isPristine:t})}))},n.setInputValidationErrors=function(t){var e=n.props.preventExternalInvalidation,r=n.state.isValid;n.inputs.forEach((function(e){var n=e.props.name;e.setState({isValid:!(n in t),validationError:m(t[n])?[t[n]]:t[n]})})),!e&&r&&n.setFormValidState(!1)},n.setFormValidState=function(t){var e=n.props,r=e.onValid,i=e.onInvalid;n.setState({isValid:t}),t?r():i()},n.isValidValue=function(t,e){return n.runValidation(t,e).isValid},n.isFormDisabled=function(){return n.props.disabled},n.mapModel=function(t){var e=n.props.mapping;if(e)return e(t);var r={};return Object.keys(t).forEach((function(e){a(r,e,t[e])})),r},n.reset=function(t){n.setFormPristine(!0),n.resetModel(t)},n.resetInternal=function(t){var e=n.props.onReset;t.preventDefault(),n.reset(),e&&e()},n.resetModel=function(t){n.inputs.forEach((function(e){var n=e.props.name;t&&o(t,n)?e.setValue(i(t,n)):e.resetValue()})),n.validateForm()},n.runValidation=function(t,e){void 0===e&&(e=t.state.value);var r=n.props.validationErrors,i=t.props,o=i.validationError,a=i.validationErrors,u=i.name,s=n.getCurrentValues(),l=F(e,s,t.validations,T),d=F(e,s,t.requiredValidations,T),c=!!Object.keys(t.requiredValidations).length&&!!d.success.length,f=!(l.failed.length||r&&r[t.props.name]);return{isRequired:c,isValid:!c&&f,validationError:function(){if(f&&!c)return n.emptyArray;if(l.errors.length)return l.errors;if(r&&r[u])return m(r[u])?[r[u]]:r[u];if(c){var t=a[d.success[0]]||o;return t?[t]:null}return l.failed.length?l.failed.map((function(t){return a[t]?a[t]:o})).filter((function(t,e,n){return n.indexOf(t)===e})):void 0}()}},n.attachToForm=function(t){-1===n.inputs.indexOf(t)&&n.inputs.push(t),n.state.canChange&&(0,n.props.onChange)(n.getModel(),n.isChanged()),n.throttledValidateForm()},n.detachFromForm=function(t){var e=n.inputs.indexOf(t);-1!==e&&(n.inputs=n.inputs.slice(0,e).concat(n.inputs.slice(e+1))),n.validateForm()},n.isChanged=function(){return!E(n.getPristineValues(),n.getCurrentValues())},n.submit=function(t){var e=n.props,r=e.onSubmit,i=e.onValidSubmit,o=e.onInvalidSubmit,a=n.state.isValid;e.preventDefaultSubmit&&t&&t.preventDefault&&t.preventDefault(),n.setFormPristine(!1);var u=n.getModel();r(u,n.resetModel,n.updateInputsWithError,t),a?i(u,n.resetModel,n.updateInputsWithError,t):o(u,n.resetModel,n.updateInputsWithError,t)},n.updateInputsWithError=function(t,e){var r=n.props.preventExternalInvalidation,i=n.state.isValid;Object.entries(t).forEach((function(e){var i=e[0],o=e[1],a=n.inputs.find((function(t){return t.props.name===i}));if(!a)throw new Error("You are trying to update an input that does not exist. Verify errors object with input names. "+JSON.stringify(t));a.setState({isValid:r,validationError:m(o)?[o]:o})})),e&&i&&n.setFormValidState(!1)},n.updateInputsWithValue=function(t,e){Object.entries(t).forEach((function(t){var r=t[0],i=t[1],o=n.inputs.find((function(t){return t.props.name===r}));o&&o.setValue(i,e)}))},n.validate=function(t){n.state.canChange&&(0,n.props.onChange)(n.getModel(),n.isChanged());var e=n.runValidation(t);t.setState(e,n.validateForm)},n.validateForm=function(){var t=function(){var t=n.inputs.every((function(t){return t.state.isValid}));n.setFormValidState(t),n.setState({canChange:!0})};n.inputs.forEach((function(e,r){var i=n.runValidation(e);e.setState(i,r===n.inputs.length-1?t:null)})),n.inputs.length||n.setState({canChange:!0},t)},n.state={canChange:!1,isSubmitting:!1,isValid:!0,contextValue:{attachToForm:n.attachToForm,detachFromForm:n.detachFromForm,isFormDisabled:e.disabled,isValidValue:n.isValidValue,validate:n.validate,runValidation:n.runValidation}},n.inputs=[],n.emptyArray=[],n.throttledValidateForm=(r=n.validateForm,s=!0,function(){if(s){s=!1;for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];r.apply(this,e),setTimeout((function(){return s=!0}),66)}}),n}return s(e,t),e.prototype.render=function(){var t=this.props,e=t.children,n=t.disabled,i=t.formElement,o=function(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r<o.length;r++)e.indexOf(n=o[r])>=0||(i[n]=t[n]);return i}(t,["children","mapping","onChange","onInvalid","onInvalidSubmit","onReset","onSubmit","onValid","onValidSubmit","preventDefaultSubmit","preventExternalInvalidation","validationErrors","disabled","formElement"]);return r.createElement(k.Provider,{value:this.state.contextValue},r.createElement(i,u({onReset:this.resetInternal,onSubmit:this.submit},o,{disabled:n}),e))},e}(r.Component);U.displayName="Formsy",U.propTypes={disabled:n.bool,mapping:n.func,formElement:n.oneOfType([n.string,n.object,n.func]),onChange:n.func,onInvalid:n.func,onInvalidSubmit:n.func,onReset:n.func,onSubmit:n.func,onValid:n.func,onValidSubmit:n.func,preventDefaultSubmit:n.bool,preventExternalInvalidation:n.bool,validationErrors:n.object},U.defaultProps={disabled:!1,mapping:null,onChange:b,onInvalid:b,onInvalidSubmit:b,onReset:b,onSubmit:b,onValid:b,onValidSubmit:b,preventDefaultSubmit:!0,preventExternalInvalidation:!1,validationErrors:{},formElement:"form"},exports.addValidationRule=function(t,e){T[t]=e},exports.default=U,exports.propTypes=W,exports.validationRules=T,exports.withFormsy=function(t){var e,n=function(e){function n(t){var n;(n=e.call(this,t)||this).getErrorMessage=function(){var t=n.getErrorMessages();return t.length?t[0]:null},n.getErrorMessages=function(){var t=n.state.validationError;return(!n.isValid()||n.showRequired())&&t||[]},n.getValue=function(){return n.state.value},n.setValidations=function(t,e){n.validations=$(t)||{},n.requiredValidations=!0===e?{isDefaultRequiredValue:e}:$(e)},n.setValue=function(t,e){void 0===e&&(e=!0);var r=n.props.validate;e?n.setState({value:t,isPristine:!1},(function(){r(l(n))})):n.setState({value:t})},n.hasValue=function(){return w(n.state.value)},n.isFormDisabled=function(){return n.props.isFormDisabled},n.isFormSubmitted=function(){return n.state.formSubmitted},n.isPristine=function(){return n.state.isPristine},n.isRequired=function(){return!!n.props.required},n.isValid=function(){return n.state.isValid},n.isValidValue=function(t){return n.props.isValidValue(l(n),t)},n.resetValue=function(){var t=n.props.validate;n.setState({value:n.state.pristineValue,isPristine:!0},(function(){t(l(n))}))},n.showError=function(){return!n.showRequired()&&!n.isValid()},n.showRequired=function(){return n.state.isRequired};var r=t.runValidation,i=t.validations,o=t.required;return n.state={value:t.value},n.setValidations(i,o),n.state=u({formSubmitted:!1,isPristine:!0,pristineValue:t.value,value:t.value},r(l(n),t.value)),n}s(n,e);var i=n.prototype;return i.componentDidMount=function(){var t=this.props,e=t.attachToForm;if(!t.name)throw new Error("Form Input requires a name property when used");e(this)},i.shouldComponentUpdate=function(t,e){var n=this.state,r=function(t,e){return Object.keys(t).some((function(n){return t[n]!==e[n]}))},i=r(this.props,t),o=r(n,e);return i||o},i.componentDidUpdate=function(t){var e=this.props,n=e.value,r=e.validations,i=e.required,o=e.validate;E(n,t.value)||this.setValue(n),E(r,t.validations)&&E(i,t.required)||(this.setValidations(r,i),o(this))},i.componentWillUnmount=function(){(0,this.props.detachFromForm)(this)},i.render=function(){var e=this.props.innerRef,n=u({},this.props,{errorMessage:this.getErrorMessage(),errorMessages:this.getErrorMessages(),hasValue:this.hasValue(),isFormDisabled:this.isFormDisabled(),isFormSubmitted:this.isFormSubmitted(),isPristine:this.isPristine(),isRequired:this.isRequired(),isValid:this.isValid(),isValidValue:this.isValidValue,resetValue:this.resetValue,setValidations:this.setValidations,setValue:this.setValue,showError:this.showError(),showRequired:this.showRequired(),value:this.getValue()});return e&&(n.ref=e),r.createElement(t,n)},n}(r.Component);return n.displayName="Formsy("+((e=t).displayName||e.name||(m(e)?e:"Component"))+")",n.propTypes=W,n.defaultProps={innerRef:null,required:!1,validationError:"",validationErrors:{},validations:null,value:t.defaultValue},function(t){return r.createElement(k.Consumer,null,(function(e){return r.createElement(n,u({},t,e))}))}};
 //# sourceMappingURL=formsy-react.cjs.production.min.js.map

dist/formsy-react.esm.js

@@ -1009,3 +1009,5 @@ import isPlainObject from 'lodash.isplainobject';
         children = _this$props4.children,
-        nonFormsyProps = _objectWithoutPropertiesLoose(_this$props4, ["children", "mapping", "onChange", "onInvalid", "onInvalidSubmit", "onReset", "onSubmit", "onValid", "onValidSubmit", "preventDefaultSubmit", "preventExternalInvalidation", "validationErrors"]);
+        disabled = _this$props4.disabled,
+        formElement = _this$props4.formElement,
+        nonFormsyProps = _objectWithoutPropertiesLoose(_this$props4, ["children", "mapping", "onChange", "onInvalid", "onInvalidSubmit", "onReset", "onSubmit", "onValid", "onValidSubmit", "preventDefaultSubmit", "preventExternalInvalidation", "validationErrors", "disabled", "formElement"]);
 
@@ -1015,7 +1017,7 @@ var contextValue = this.state.contextValue;
       value: contextValue
-    }, React.createElement('form', _extends({
+    }, React.createElement(formElement, _extends({
       onReset: this.resetInternal,
       onSubmit: this.submit
     }, nonFormsyProps, {
-      disabled: false
+      disabled: disabled
     }), children));
@@ -1030,2 +1032,3 @@ };
   mapping: PropTypes.func,
+  formElement: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
   onChange: PropTypes.func,
@@ -1054,3 +1057,4 @@ onInvalid: PropTypes.func,
   preventExternalInvalidation: false,
-  validationErrors: {}
+  validationErrors: {},
+  formElement: 'form'
 };
@@ -1057,0 +1061,0 @@

dist/Formsy.d.ts

@@ -7,2 +7,8 @@ import PropTypes from 'prop-types';
 declare type OnSubmitCallback = (model: IModel, resetModel: IResetModel, updateInputsWithError: IUpdateInputsWithError, event: React.SyntheticEvent<React.FormHTMLAttributes<any>>) => void;
+declare type FormElementType = string | React.ComponentType<{
+    onReset?: (e: React.SyntheticEvent) => void;
+    onSubmit?: (e: React.SyntheticEvent) => void;
+    disabled?: boolean;
+    children?: React.ReactChildren;
+}>;
 export interface FormsyProps extends FormHTMLAttributesCleaned {
@@ -21,2 +27,3 @@ disabled: boolean;
     validationErrors?: null | object;
+    formElement?: FormElementType;
 }
@@ -39,2 +46,3 @@ export interface FormsyState {
         mapping: PropTypes.Requireable<(...args: any[]) => any>;
+        formElement: PropTypes.Requireable<string | object>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -41,0 +49,0 @@ onInvalid: PropTypes.Requireable<(...args: any[]) => any>;

package.json

 {
   "name": "formsy-react",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "A form input builder and validator for React",
@@ -5,0 +5,0 @@ "keywords": [

src/Formsy.ts

@@ -31,2 +31,11 @@ /* eslint-disable react/no-unused-state, react/default-props-match-prop-types */
 
+type FormElementType =
+  | string
+  | React.ComponentType<{
+      onReset?: (e: React.SyntheticEvent) => void;
+      onSubmit?: (e: React.SyntheticEvent) => void;
+      disabled?: boolean;
+      children?: React.ReactChildren;
+    }>;
+
 export interface FormsyProps extends FormHTMLAttributesCleaned {
@@ -45,2 +54,3 @@ disabled: boolean;
   validationErrors?: null | object;
+  formElement?: FormElementType;
 }
@@ -71,2 +81,3 @@
     mapping: PropTypes.func,
+    formElement: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
     onChange: PropTypes.func,
@@ -97,2 +108,3 @@ onInvalid: PropTypes.func,
     validationErrors: {},
+    formElement: 'form',
   };
@@ -483,3 +495,4 @@
       validationErrors,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
+      disabled,
+      formElement,
       ...nonFormsyProps
@@ -495,3 +508,3 @@ } = this.props;
       React.createElement(
-        'form',
+        formElement,
         {
@@ -501,3 +514,3 @@ onReset: this.resetInternal,
           ...nonFormsyProps,
-          disabled: false,
+          disabled,
         },
@@ -504,0 +517,0 @@ children,

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

Improved metrics

Total package byte prevSize

354126

increased by0.84%

Lines of code

2963

increased by1.02%

No dependency changes