UNPKG

mobx-hooks-form

Version:

React form package using mobX, React hooks and context

3 lines (2 loc) 8.54 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),o=require("react"),r=(e=o)&&"object"==typeof e&&"default"in e?e.default:e,n=require("mobx"),i=require("mobx-utils"),u=require("mobx-react-lite"),a=require("lodash"),l=require("yup");function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e}).apply(this,arguments)}var c=function(e){return"object"==typeof e&&null!==e},d=function(e){var t=[];return e.split(".").forEach((function(e){e.split(/\[([^}]+)\]/g).forEach((function(e){e.length>0&&t.push(e)}))})),t},v=function(e){return function(t){var o,r,n,i,u,a,l,s,c,v,h=d(e);if(h[5])throw Error("mobx form path is too deep");return h[4]?null===(o=t[h[0]])||void 0===o?void 0:null===(r=o[h[1]])||void 0===r?void 0:null===(n=r[h[2]])||void 0===n?void 0:null===(i=n[h[3]])||void 0===i?void 0:i[h[4]]:h[3]?null===(u=t[h[0]])||void 0===u?void 0:null===(a=u[h[1]])||void 0===a?void 0:null===(l=a[h[2]])||void 0===l?void 0:l[h[3]]:h[2]?null===(s=t[h[0]])||void 0===s?void 0:null===(c=s[h[1]])||void 0===c?void 0:c[h[2]]:h[1]?null===(v=t[h[0]])||void 0===v?void 0:v[h[1]]:t[h[0]]}},h=function(e){return function(t){return function(o){var r=d(e);if(r[5])throw Error("mobx form path is too deep");if(r[4]){var n,i,u,a=null===(n=o[r[0]])||void 0===n?void 0:null===(i=n[r[1]])||void 0===i?void 0:null===(u=i[r[2]])||void 0===u?void 0:u[r[3]];c(a)&&(a[r[4]]=t)}else if(r[3]){var l,s,v=null===(l=o[r[0]])||void 0===l?void 0:null===(s=l[r[1]])||void 0===s?void 0:s[r[2]];c(v)&&(v[r[3]]=t)}else if(r[2]){var h,f=null===(h=o[r[0]])||void 0===h?void 0:h[r[1]];c(f)&&(f[r[2]]=t)}else if(r[1]){var p=o[r[0]];c(p)&&(p[r[1]]=t)}else o[r[0]]=t}}},f=function(){function e(e){var t=this;this.debug=!1,this.DEBOUNCE_MS=0,this.isTouchedAll=!1,this.touched={},this.submitting=!1,this.error=void 0,this.setError=function(e){t.error=e},this.setSubmitting=function(e){t.submitting=e},this.values={},this.debouncedValues={},this.getValue=i.computedFn((function(e){var t;return null!==(t=v(e)(this.values))&&void 0!==t?t:""})),this.getDebouncedValue=i.computedFn((function(e){var t;return null!==(t=v(e)(this.debouncedValues))&&void 0!==t?t:""})),this.getValueLength=i.computedFn((function(e){var t,o;return null!==(t=null===(o=this.getValue(e))||void 0===o?void 0:o.length)&&void 0!==t?t:0})),this.setDebouncedValue=a.debounce((function(e,o){h(e)(o)(t.debouncedValues)}),this.DEBOUNCE_MS),this.pushDebouncedValue=a.debounce((function(e,o){v(e)(t.debouncedValues).push(o)}),this.DEBOUNCE_MS),this.removeDebouncedValue=a.debounce((function(e,o){v(e)(t.debouncedValues).splice(o,1)}),this.DEBOUNCE_MS),this.pushValue=function(e,o){v(e)(t.values).push(o),t.pushDebouncedValue(e,o)},this.removeValue=function(e,o){v(e)(t.values).splice(o,1),t.removeDebouncedValue(e,o)},this.setValue=function(e){return function(o){h(e)(o)(t.values),t.setDebouncedValue(e,o)}},this.setValues=function(e){t.values=e,t.debouncedValues=e},this.isRequired=i.computedFn((function(e){try{var t,o=l.reach(this.schema,e,this.debouncedValues,this.debouncedValues).describe().tests;return null!==(t=!!(null==o?void 0:o.find((function(e){return"required"===e.name}))))&&void 0!==t&&t}catch(e){return!1}})),this.reset=function(){t.setValues(t.defaultValues),t.touched={},t.isTouchedAll=!1},this.handleSubmit=function(e){return n.action("handleSubmit",(function(o){try{o.preventDefault(),t.touchAll();var r=function(){var o;if(t.isValid)return t.setSubmitting(!0),Promise.resolve(null===(o=e(t.values))||void 0===o?void 0:o.catch((function(e){return t.setError(e)}))).then((function(){t.setSubmitting(!1)}))}();return Promise.resolve(r&&r.then?r.then((function(){})):void 0)}catch(o){return Promise.reject(o)}}))},this.touch=function(e){t.touched[e]=!0},this.touchAll=function(){t.isTouchedAll=!0},this.getError=i.computedFn((function(e){return this.errors[e]})),this.getId=function(e){return t.formName+"_"+e},this.getField=i.computedFn((function(e){var t=this;return{path:e,submitting:t.submitting,get value(){return t.getValue(e)},get error(){return t.getError(e)},id:t.getId(e),setValue:t.setValue(e),onBlur:n.action("onBlur",(function(){t.touch(e)})),onChange:n.action("onChange",(function(o){t.setValue(e)(o.target.value)})),onCheckedChange:n.action("onCheckedChange",(function(o){t.setValue(e)(o.target.checked)})),isRequired:t.isRequired(e)}})),this.getFieldArray=i.computedFn((function(e){var t=this;return{path:e,get error(){return t.getError(e)},get indexes(){return Array.from(Array(t.getValueLength(e)).keys())},id:t.getId(e),isRequired:t.isRequired(e),add:n.action("add",(function(o){var r=t.getValue(e);if(Array.isArray(r)||t.setValue(e)([]),void 0===o){var n=v(e)(t.defaultValues);o=Array.isArray(n)?n.length?n[n.length-1]:"":void 0!==n?n:r.length?r[r.length-1]:""}t.pushValue(e,o)})),remove:n.action("remove",(function(o){var r=t.getValue(e);if(!Array.isArray(r)||o>=r.length)console.error("trying to remove item from non array or at wrong index");else if(t.removeValue(e,o),0===r.length){var n=v(e)(t.defaultValues);Array.isArray(n)||t.setValue(e)(n)}}))}}));var o=e.schema,r=e.defaultValues,u=e.formName,s=void 0===u?"":u,c=e.debug,d=void 0!==c&&c,f=e.debugMobx,p=void 0!==f&&f,b=e.DEBOUNCE_MS,g=void 0===b?0:b;this.defaultValues=r||{},this.schema=o,this.debug=d,this.formName=s,this.DEBOUNCE_MS=g,this.setValues(r||{}),n.observe(this.values,(function(){t.error=void 0})),d&&(n.autorun((function(){console.log("values",n.toJS(t.values)),console.log("validations",n.toJS(t.validations)),console.log("error",n.toJS(t.error))})),p&&n.spy((function(e){"action"===e.type?console.log("%c"+e.name+" %c[ "+e.arguments+" ]","color: #bad","color: #bada55"):(e.type||e.name)&&console.log("%c "+e.type+" | "+e.name,"color: #f9d299")})))}var t;return(t=[{key:"validations",get:function(){return function(e,t){try{return e.validateSync(t,{abortEarly:!1,recursive:!0}),{}}catch(e){return e.inner.reduce((function(e,t){var o;return s({},e,((o={})[t.path]=t.errors[0],o))}),{})}}(this.schema,this.debouncedValues)}},{key:"isValid",get:function(){return a.isEmpty(this.validations)}},{key:"errors",get:function(){var e=this;return this.isTouchedAll?this.validations:Object.fromEntries(Object.entries(this.validations).filter((function(t){return e.touched[t[0]]})))}}])&&function(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}(e.prototype,t),e}();t.__decorate([n.observable],f.prototype,"isTouchedAll",void 0),t.__decorate([n.observable],f.prototype,"touched",void 0),t.__decorate([n.observable],f.prototype,"submitting",void 0),t.__decorate([n.observable],f.prototype,"error",void 0),t.__decorate([n.action],f.prototype,"setError",void 0),t.__decorate([n.action],f.prototype,"setSubmitting",void 0),t.__decorate([n.observable],f.prototype,"values",void 0),t.__decorate([n.observable],f.prototype,"debouncedValues",void 0),t.__decorate([n.action],f.prototype,"setDebouncedValue",void 0),t.__decorate([n.action],f.prototype,"pushDebouncedValue",void 0),t.__decorate([n.action],f.prototype,"removeDebouncedValue",void 0),t.__decorate([n.action],f.prototype,"pushValue",void 0),t.__decorate([n.action],f.prototype,"removeValue",void 0),t.__decorate([n.action],f.prototype,"setValue",void 0),t.__decorate([n.action],f.prototype,"setValues",void 0),t.__decorate([n.computed],f.prototype,"validations",null),t.__decorate([n.computed],f.prototype,"isValid",null),t.__decorate([n.action],f.prototype,"reset",void 0),t.__decorate([n.action],f.prototype,"touch",void 0),t.__decorate([n.action],f.prototype,"touchAll",void 0),t.__decorate([n.computed],f.prototype,"errors",null);var p=r.createContext({},(function(){return 0})),b=r.createContext({});exports.FieldContextProvider=u.observer((function(e){var t=e.children,n=e.path,i=o.useContext(p).getField(n);return r.createElement(b.Provider,{value:i},"function"==typeof t?t(i):t)})),exports.FormContextProvider=function(e){return r.createElement(p.Provider,{value:e.formStore},e.children)},exports.useField=function(e){return o.useContext(p).getField(e)},exports.useFieldArray=function(e){return o.useContext(p).getFieldArray(e)},exports.useFieldContext=function(){return o.useContext(b)},exports.useForm=function(e){return u.useLocalStore((function(e){return new f(e)}),e)},exports.useFormContext=function(){return o.useContext(p)}; //# sourceMappingURL=mobx-hooks-form.cjs.production.min.js.map