@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.93 kB
JavaScript
"use strict";var v=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var T=(r,e)=>{for(var t in e)v(r,t,{get:e[t],enumerable:!0})},M=(r,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of R(e))!k.call(r,o)&&o!==t&&v(r,o,{get:()=>e[o],enumerable:!(n=C(e,o))||n.enumerable});return r};var q=r=>M(v({},"__esModule",{value:!0}),r),i=(r,e,t,n)=>{for(var o=n>1?void 0:n?C(e,t):e,f=r.length-1,b;f>=0;f--)(b=r[f])&&(o=(n?b(e,t,o):b(o))||o);return n&&o&&v(e,t,o),o};var E={};T(E,{CheckBoxBinding:()=>s,InputBinding:()=>a,LabelBinding:()=>m,RadioButtonBinding:()=>l,SelectBoxBinding:()=>g,SubmitButtonBinding:()=>h,useFormAutoReset:()=>B,useFormHandler:()=>x});module.exports=q(E);var u=require("mobx");var s=class{constructor(e,t){this.field=e;this.config=t;(0,u.makeObservable)(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}}};i([u.computed],s.prototype,"checked",1),i([u.action],s.prototype,"onChange",2),i([u.computed],s.prototype,"errorMessages",1);var d=require("mobx");var a=class{constructor(e,t){this.field=e;this.config=t;(0,d.makeObservable)(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}}};i([d.computed],a.prototype,"value",1),i([d.action],a.prototype,"onChange",2),i([d.computed],a.prototype,"errorMessages",1);var c=require("mobx");var l=class{constructor(e,t){this.field=e;this.config=t;(0,c.makeObservable)(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})};i([c.computed],l.prototype,"value",1),i([c.action],l.prototype,"onChange",2),i([c.computed],l.prototype,"errorMessages",1);var p=require("mobx");var g=class{constructor(e,t){this.field=e;this.config=t;(0,p.makeObservable)(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}}};i([p.computed],g.prototype,"value",1),i([p.action],g.prototype,"onChange",2),i([p.computed],g.prototype,"errorMessages",1);var y=require("mobx");var h=class{constructor(e,t){this.form=e;this.config=t;(0,y.makeObservable)(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}}};i([y.computed],h.prototype,"busy",1);var A=require("mobx");var m=class{constructor(e,t){this.fields=e;this.config=t;(0,A.makeObservable)(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}}};i([A.computed],m.prototype,"firstFieldId",1),i([A.computed],m.prototype,"firstErrorMessage",1);var F=require("react");function B(r){(0,F.useEffect)(()=>(r.reset(),()=>r.reset()),[r])}function x(r,e,t){let n=(0,F.useRef)(t);n.current=t,(0,F.useEffect)(()=>r.addHandler(e,(...f)=>n.current.apply(void 0,f)),[r,e])}0&&(module.exports={CheckBoxBinding,InputBinding,LabelBinding,RadioButtonBinding,SelectBoxBinding,SubmitButtonBinding,useFormAutoReset,useFormHandler});
//# sourceMappingURL=index.js.map