UNPKG

@mobx-sentinel/react

Version:

A TypeScript library for non-intrusive model enhancement in MobX applications. Provides model change detection, validation, and form integration capabilities while maintaining the purity of domain models.

2 lines 5.04 kB
var v=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var r=(i,e,t,l)=>{for(var o=l>1?void 0:l?y(e,t):e,g=i.length-1,c;g>=0;g--)(c=i[g])&&(o=(l?c(e,t,o):c(o))||o);return l&&o&&v(e,t,o),o};import{makeObservable as C,computed as p,action as b}from"mobx";var s=class{constructor(e,t){this.field=e;this.config=t;C(this)}get checked(){return this.config.getter()}onChange=e=>{this.config.setter(e.currentTarget.checked),this.field.markAsChanged(),this.config.onChange?.(e)};onFocus=e=>{this.field.markAsTouched(),this.config.onFocus?.(e)};get errorMessages(){return this.field.isErrorReported&&Array.from(this.field.errors).join(", ")||null}get props(){return{type:"checkbox",id:this.config.id??this.field.id,checked:this.checked,onChange:this.onChange,onFocus:this.onFocus,"aria-invalid":this.field.isErrorReported,"aria-errormessage":this.errorMessages??void 0}}};r([p],s.prototype,"checked",1),r([b],s.prototype,"onChange",2),r([p],s.prototype,"errorMessages",1);import{makeObservable as R,computed as m,action as B}from"mobx";var n=class{constructor(e,t){this.field=e;this.config=t;R(this)}get value(){return this.config.getter()??""}get type(){if(this.config.type)return this.config.type;switch(this.config.valueAs){case"number":return"number";case"date":return"date";default:return"text"}}onChange=e=>{switch(this.config.valueAs){case"number":{let t=e.currentTarget.valueAsNumber;this.config.setter(isNaN(t)?null:t);break}case"date":this.config.setter(e.currentTarget.valueAsDate);break;default:this.config.setter(e.currentTarget.value);break}this.field.markAsChanged("intermediate"),this.config.onChange?.(e)};onBlur=e=>{this.field.finalizeChangeIfNeeded(),this.config.onBlur?.(e)};onFocus=e=>{this.field.markAsTouched(),this.config.onFocus?.(e)};get errorMessages(){return this.field.isErrorReported&&Array.from(this.field.errors).join(", ")||null}get props(){return{type:this.type,value:this.value,id:this.config.id??this.field.id,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,"aria-invalid":this.field.isErrorReported,"aria-errormessage":this.errorMessages??void 0}}};r([m],n.prototype,"value",1),r([B],n.prototype,"onChange",2),r([m],n.prototype,"errorMessages",1);import{makeObservable as x,computed as f,action as k}from"mobx";var a=class{constructor(e,t){this.field=e;this.config=t;x(this)}get value(){return this.config.getter()??""}onChange=e=>{e.currentTarget.checked&&(this.config.setter(e.currentTarget.value),this.field.markAsChanged(),this.config.onChange?.(e))};onFocus=e=>{this.field.markAsTouched(),this.config.onFocus?.(e)};get errorMessages(){return this.field.isErrorReported&&Array.from(this.field.errors).join(", ")||null}props=(e,t)=>({type:"radio",id:t?.id===!0?this.field.id:t?.id?t?.id:void 0,value:e??"",name:t?.name??this.field.id,checked:this.value===e,onChange:this.onChange,onFocus:this.onFocus,"aria-invalid":this.field.isErrorReported,"aria-errormessage":this.errorMessages??void 0})};r([f],a.prototype,"value",1),r([k],a.prototype,"onChange",2),r([f],a.prototype,"errorMessages",1);import{makeObservable as T,computed as A,action as M}from"mobx";var u=class{constructor(e,t){this.field=e;this.config=t;T(this)}get value(){return this.config.getter()??""}onChange=e=>{this.config.multiple?this.config.setter(Array.from(e.currentTarget.selectedOptions,t=>t.value)):this.config.setter(e.currentTarget.value),this.field.markAsChanged(),this.config.onChange?.(e)};onFocus=e=>{this.field.markAsTouched(),this.config.onFocus?.(e)};get errorMessages(){return this.field.isErrorReported&&Array.from(this.field.errors).join(", ")||null}get props(){return{id:this.config.id??this.field.id,multiple:this.config.multiple,value:this.value,onChange:this.onChange,onFocus:this.onFocus,"aria-invalid":this.field.isErrorReported,"aria-errormessage":this.errorMessages??void 0}}};r([A],u.prototype,"value",1),r([M],u.prototype,"onChange",2),r([A],u.prototype,"errorMessages",1);import{makeObservable as q,computed as E}from"mobx";var h=class{constructor(e,t){this.form=e;this.config=t;q(this)}get busy(){return this.form.isSubmitting||this.form.isValidating}onClick=e=>{this.form.submit().catch(t=>{}),this.config.onClick?.(e)};onMouseOver=e=>{this.form.reportError(),this.config.onMouseOver?.(e)};get props(){return{onClick:this.onClick,onMouseOver:this.onMouseOver,disabled:!this.form.canSubmit,"aria-busy":this.busy,"aria-invalid":!this.form.isValid}}};r([E],h.prototype,"busy",1);import{makeObservable as L,computed as F}from"mobx";var d=class{constructor(e,t){this.fields=e;this.config=t;L(this)}get firstFieldId(){return this.fields.at(0)?.id}get firstErrorMessage(){for(let e of this.fields)if(e.isErrorReported)for(let t of e.errors)return t;return null}get props(){return{htmlFor:this.config.htmlFor??this.firstFieldId,"aria-invalid":!!this.firstErrorMessage,"aria-errormessage":this.firstErrorMessage??void 0}}};r([F],d.prototype,"firstFieldId",1),r([F],d.prototype,"firstErrorMessage",1);export{s as a,n as b,a as c,u as d,h as e,d as f}; //# sourceMappingURL=chunk-VSTVCIJO.mjs.map