UNPKG

react-browser-form

Version:

<div align="center"> <a href="https://deniskabana.github.io/react-browser-form/introduction" title="React Browser Form - Form management in React made simple for browsers."> <img src="https://raw.githubusercontent.com/deniskabana/react-browser-form/

3 lines (2 loc) 13 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r=require("react");function n(){return(n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function o(e){return(o=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function a(e,t){return(a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}function i(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function s(e,t,r){return(s=i()?Reflect.construct.bind():function(e,t,r){var n=[null];n.push.apply(n,t);var o=new(Function.bind.apply(e,n));return r&&a(o,r.prototype),o}).apply(null,arguments)}function u(e){var t="function"==typeof Map?new Map:void 0;return(u=function(e){if(null===e||-1===Function.toString.call(e).indexOf("[native code]"))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return s(e,arguments,o(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),a(r,e)})(e)}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function l(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(r)return(r=r.call(e)).next.bind(r);if(Array.isArray(e)||(r=function(e,t){if(e){if("string"==typeof e)return c(e,void 0);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?c(e,void 0):void 0}}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(e=exports.EventSource||(exports.EventSource={})).User="User",e.Form="Form",(t=exports.EventType||(exports.EventType={})).Submit="Submit",t.Reset="Reset",t.Change="Change",t.Blur="Blur",t.FormInit="FormInit";var f,d={mode:"onSubmitUnlessError",revalidationStrategy:"onChange",liveFields:[],validateAfterInit:!1},v="[react-browser-form]:",p={NAME_INVALID:v+" Option 'name' required!",MISSING_DEFAULT_VALUES:v+" Option 'defaultValues' required!",VALIDATION_SCHEMA_REQUIRED:v+" Option 'validationSchema' is required if 'validateAfterInit' is true.",INCORRECT_VALIDATION_SCHEMA:v+" Incorrect 'validationSchema' structure. Check the documentation.",ONCHANGE_MODE_ONCHANGE_FN:"'onChange' function is required if using mode: 'onChange'.",LIVE_FIELDS_ONCHANGE_FN:"'onChange' function is required if using 'liveFields'.",ONCHANGE_AND_LIVEFIELDS:"When using 'onChange' mode, liveFields should be empty."};function m(e,t,r){var n=r.options.transformationSchema,o=t;if(null==n||!n.disableDefaultTransformation){var a,i,s=document.forms[r.options.name].elements[e];if(i=null!=(a=null==s?void 0:s.type)?a:"text",s||(i=null),null==t)o=null;else switch(i){case f.Number:case f.Range:o=""===t?null:Number(t);break;case f.Date:case f.Month:case f.DatetimeLocal:case f.Week:case f.Time:o=t instanceof Date?t:"string"==typeof t?new Date(t):null;break;case f.Checkbox:o="boolean"==typeof t?t:Boolean(t);break;case f.Text:case f.Email:case f.File:case f.Password:case f.Url:case f.Tel:case f.Radio:o="string"==typeof t?t:String(t);break;default:o=t}}if(n&&n.fields){var u=n.fields[e];switch(typeof u){case"string":"string"===u?o=String(o):"number"===u?o=Number(o):"boolean"===u&&(o=Boolean(o));break;case"function":o=u(o,r.formState)}}return o}function h(e){var t,r=null==(t=e.event.nativeEvent)?void 0:t.target;if(r&&r.name&&e.fieldsData.names[r.name])return m(r.name,"checkbox"===r.type?r.checked:r.value,e)}function y(e,t){var r=document.forms[e.options.name];Object.keys(e.options.defaultValues).forEach((function(n){if(!t||!t.length||t.includes(n)){var o=r.elements[n];o&&(e.formState[n]=m(n,"checkbox"===o.type?o.checked:o.value,e))}}))}!function(e){e.Number="number",e.Range="range",e.Date="date",e.Month="month",e.Week="week",e.Time="time",e.DatetimeLocal="datetime-local",e.Checkbox="checkbox",e.Text="text",e.Email="email",e.File="file",e.Password="password",e.Url="url",e.Tel="tel",e.Radio="radio"}(f||(f={}));var g=function(e){var t,r;function n(t){var r;return r=e.call(this,null!=t?t:"This field is incorrect.")||this,Object.setPrototypeOf(function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(r),n.prototype),r}return r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,a(t,r),n}(u(Error));function b(e){if(e.options.validationSchema){var t=e.changedData,r=e.formState,o=e.fieldsData,a=o.required,i=o.validated,s=null!=t?t:r,u=n({},e.errorData.errors),c={};for(var f in s){if(delete u[f],a.includes(f)){var d,v,p,m,h=s[f];null!=h&&!1!==h&&0!==String(h).length||(c[f]=null!=(d=null==(v=e.options)||null==(p=v.validationSchema)||null==(m=p.required)?void 0:m.message)?d:"This field is required.",e.hasErrors=!0)}if(i.includes(f)){var y,b,S,E,D=null!=(y=e.options)&&null!=(b=y.validationSchema)&&b.validators?null==(S=e.options)||null==(E=S.validationSchema)?void 0:E.validators[f]:null;if(!D)break;try{if("function"==typeof D)D(s[f],n({},r,s));else{if(!Array.isArray(D))throw new Error("react-browser-form: Invalid validators provided!");for(var x,_=l(D);!(x=_()).done;)(0,x.value)(s[f],n({},r,s))}}catch(t){var w;if(!(t instanceof g))throw t;c[f]=null!=(w=null==t?void 0:t.message)?w:"This field is incorrect.",e.hasErrors=!0}}}e.setErrors(n({},u,c))}}function S(e,t){var r=document.forms[e.name];for(var n in t){var o=r.elements[n];if(o)if("checkbox"===o.type)o.checked=Boolean(t[n]);else{if(null===t[n]){o.value="";break}o.value=String(t[n])}}}function E(e){if(e.event.value?(e.changedData=n({},e.event.value),e.changeReason="Reset form with provided values.\nSource: "+e.event.source):(e.changedData=n({},e.options.defaultValues),e.changeReason="Reset form to defaults.\nSource: "+e.event.source),e.event.type!==exports.EventType.FormInit)for(var t in e.resetDirtyState(),e.changedData)e.formState[t]=m(t,e.changedData[t],e);else e.changeReason="";S(e.options,e.formState),(e.event.type!==exports.EventType.FormInit||e.options.validateAfterInit)&&b(e),e.event.type!==exports.EventType.FormInit&&e.callbacks.onChange(e.formState)}function D(e,t,r){if(void 0===r&&(r=!1),t.debug&&"undefined"!=typeof window){var n=new CustomEvent("rdf_debug_change",{detail:t.name});for(var o in window.__rdf_debug||(window.__rdf_debug={}),window.__rdf_debug[t.name]||(window.__rdf_debug[t.name]={}),e)window.__rdf_debug[t.name][o]=e[o];r&&setTimeout((function(){return document.dispatchEvent(n)}))}}function x(e,t,r){return void 0===r&&(r="error"),v+" "+r+" during "+e+": "+t}function _(e,t,r){void 0===r&&(r="error"),"error"===r?console.error(x(e,t,r)):"warning"===r&&console.warn(x(e,t,r))}exports.DEBUG_CHANGE_EVENT="rdf_debug_change",exports.ValidationError=g,exports.useBrowserForm=function(e){!function(e){var t=e.name,r=e.defaultValues,n=e.validationSchema,o=e.validateAfterInit;if(!t||t.length<1)throw new Error(p.NAME_INVALID);if(!r)throw new Error(p.MISSING_DEFAULT_VALUES);if(o&&!n)throw new Error(p.VALIDATION_SCHEMA_REQUIRED);if(n){var a=Object.keys(n);if(0===a.length||a.length>2)throw new Error(p.INCORRECT_VALIDATION_SCHEMA)}}(e);var t,o,a=r.useRef(n({},d,e)).current,i=r.useRef(n({},a.defaultValues)).current,s=(t=r.useState({count:0,errors:{}}),o=t[1],{errorData:t[0],setErrors:function(e){o(function(e){return{count:Object.keys(e).length,errors:e}}(e))}}),u=s.errorData,c=s.setErrors,l=function(){var e=r.useState([]),t=e[0],n=e[1],o=r.useState(!1),a=o[1];return{dirtyFields:t,resetDirtyState:function(){n([]),a(!1)},setDirtyFields:function(e){n((function(r){return[].concat(r,e.filter((function(e){return!t.includes(e)})))})),a(!0)},isDirty:o[0],setIsDirty:a}}(),f=l.isDirty,v=l.setIsDirty,g=l.dirtyFields,x=l.setDirtyFields,w=l.resetDirtyState,I=r.useRef(Object.freeze(function(e){var t,r,o,a,i;return{names:Object.keys(e.defaultValues).reduce((function(e,t){var r;return n({},e,((r={})[t]=t,r))}),{}),required:null!=(t=null==(r=e.validationSchema)||null==(o=r.required)?void 0:o.fields)?t:[],validated:Object.keys(null!=(a=null==(i=e.validationSchema)?void 0:i.validators)?a:{})}}(a))).current,O=r.useRef({onChange:function(e){return(null==a?void 0:a.onChange)&&a.onChange(n({},e))},onSubmit:function(e){return(null==a?void 0:a.onSubmit)&&a.onSubmit(n({},e))}}).current,C=function(e,t,r,o,a,i,s,u,c,l){return function(f){var d={hasErrors:a.count>0,event:f,options:e,changedData:{},formState:t,fieldsData:r,callbacks:o,errorData:a,setErrors:i,isDirty:s,setIsDirty:u,setDirtyFields:c,resetDirtyState:l,changeReason:""};switch(f.type){case exports.EventType.Submit:!function(e){e.changeReason="Form submitted.\nSource: "+e.event.source,y(e),e.changedData=e.formState,b(e),e.hasErrors||(e.callbacks.onSubmit(e.formState),D({isSubmitted:!0},e.options))}(d);break;case exports.EventType.Reset:E(d);break;case exports.EventType.Change:!function(e){var t=e.options;if(e.event.source===exports.EventSource.User){e.event.type!==exports.EventType.FormInit&&(e.changeReason="Change form values programatically.\nSource: "+e.event.source);var r=e.event.value;if(!r)return;for(var o in e.isDirty||e.setIsDirty(!0),e.setDirtyFields(Object.keys(r)),e.changedData=r,b(e),e.changedData)e.formState[o]=m(o,e.changedData[o],e);S(t,e.formState),e.callbacks.onChange(n({},e.formState))}if(e.event.source===exports.EventSource.Form){var a,i=null==(a=e.event.nativeEvent)?void 0:a.target,s=null==i?void 0:i.name;if(!i||!s)return;!e.isDirty&&i&&s&&e.setIsDirty(!0),e.setDirtyFields([s]);var u="onChange"===t.mode,c=t.liveFields.includes(s),l=e.errorData.errors[s]&&"onChange"===t.revalidationStrategy&&("onBlurUnlessError"===t.mode||"onSubmitUnlessError"===t.mode);if(!(u||c||l))return;y(e,[s]);var f=h(e);if(e.changedData[s]=f,e.formState[s]=m(s,f,e),c)for(var d in e.errorData.errors)e.changedData[d]=e.formState[d];b(e),u&&(e.changeReason="Changed form state - onChange mode.\nSource: "+e.event.source),l&&(e.changeReason="Changed form state - error revalidation.\nSource: "+e.event.source),c&&(e.changeReason="Changed form state - live field.\nSource: "+e.event.source),(u||c)&&e.callbacks.onChange(e.formState)}}(d);break;case exports.EventType.Blur:!function(e){var t,r=e.options,n=null==(t=e.event.nativeEvent)?void 0:t.target;if(n&&n.name){var o="onBlur"===r.mode||"onBlurUnlessError"===r.mode,a=e.errorData.errors[n.name]&&"onBlur"===e.options.revalidationStrategy&&("onBlurUnlessError"===r.mode||"onSubmitUnlessError"===r.mode);if(o||a){y(e,[n.name]);var i=h(e);e.changedData[n.name]=i,b(e),o&&(e.changeReason="Blur form - "+r.mode+" mode.\nSource: "+e.event.source),a&&(e.changeReason="Blur form - error revalidation.\nSource: "+e.event.source),o&&e.callbacks.onChange(e.formState)}}}(d);break;case exports.EventType.FormInit:E(d);break;default:_("data-flow","An unsupported event type provided")}D({formState:d.formState,changeReason:d.changeReason,event:d.event},e,!0)}}(a,i,I,O,u,c,f,v,x,w),R=function(e){var t;return(t={})[exports.EventSource.User]={setValues:function(t){e({source:exports.EventSource.User,type:exports.EventType.Change,value:t})},submit:function(){e({source:exports.EventSource.User,type:exports.EventType.Submit})},reset:function(t){e({source:exports.EventSource.User,type:exports.EventType.Reset,value:t})}},t[exports.EventSource.Form]={onChange:function(t){e({source:exports.EventSource.Form,type:exports.EventType.Change,nativeEvent:t})},onSubmit:function(t){t.preventDefault(),e({source:exports.EventSource.Form,type:exports.EventType.Submit,nativeEvent:t})},onBlur:function(t){e({source:exports.EventSource.Form,type:exports.EventType.Blur,nativeEvent:t})},onReset:function(t){t.preventDefault(),e({source:exports.EventSource.Form,type:exports.EventType.Reset,nativeEvent:t})}},t}(C);r.useEffect((function(){!function(e){var t;(null==(t=document.querySelectorAll('form[name="'+e.name+'"]'))?void 0:t.length)>1&&_("init",'Form name "'+e.name+'" is not unique! This can lead to critical bugs!')}(a),C({source:exports.EventSource.User,type:exports.EventType.FormInit,value:a.defaultValues})}),[]);var F=n({},R[exports.EventSource.Form],{name:a.name}),T=n({errorData:u,isDirty:f,dirtyFields:g,names:I.names},R[exports.EventSource.User],{formProps:F});return D({returnData:T,formState:i},a,!0),T}; //# sourceMappingURL=react-browser-form.cjs.production.min.js.map