houseform
Version:
Simple to use React forms, where your validation and UI code live together in harmony.
2 lines (1 loc) • 15.3 kB
JavaScript
(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C.HouseForm={},C.React,C.jsxRuntime))})(this,function(C,e,be){"use strict";const _e={formFieldsRef:{current:[]},recomputeErrors:()=>{},recomputeIsDirty:()=>{},recomputeIsTouched:()=>{},recomputeIsValidating:()=>{},errors:[],errorsMap:{},submit:async()=>!0,getFieldValue:()=>{},deleteField:()=>{},setIsSubmitted:()=>{},reset:()=>{},onChangeListenerRefs:{current:{}},onBlurListenerRefs:{current:{}},onMountListenerRefs:{current:{}},setIsTouched:()=>{},setIsDirty:()=>{},isValid:!1,isDirty:!1,isTouched:!1,isValidating:!1,isSubmitted:!1,value:{},recomputeFormValue:()=>{}},Ce=e.createContext(_e),ee=()=>e.useContext(Ce);function te(t,s,i){return(a=>a instanceof Object&&a.parseAsync)(i)?i.parseAsync(t):i(t,s)}function ne(t){return(i=>i instanceof Object&&i.errors)(t)?t.errors.map(i=>i.message):[t]}const He=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,Ae=/\\(\\)?/g,$=t=>{const s=[];return t.replace(He,(i,c,a,o)=>{const r=a?o.replace(Ae,"$1"):c||i;r&&s.push(r)}),s},se=(t,s,i)=>{const c=$(s);let a=t;for(let o=0;o<c.length;o++){const r=c[o];o===c.length-1?a[r]=i:(a[r]||(a[r]={}),a=a[r])}return t},ve=(t,s)=>{const i=$(s);let c=t;for(let a=0;a<i.length;a++){const o=i[a];if(a===i.length-1)return c[o];c=c[o]}};function Le(t,s){const{onSubmit:i,children:c,memoChild:a,submitWhenInvalid:o=!1}=t,r=e.useRef([]),[R,d]=e.useState(!1),u=e.useCallback(n=>{const f=r.current,g=$(n).join(".");return f.find(q=>q._normalizedDotName===g)},[r]),_=e.useCallback(n=>{const f=r.current,g=$(n).join("."),q=f.find(K=>K._normalizedDotName===g);q&&f.splice(f.indexOf(q),1)},[r]),v=e.useRef({}),S=e.useRef({}),j=e.useRef({}),B=e.useCallback(n=>{r.current.forEach(f=>{f.setIsTouched(n)})},[]),E=e.useCallback(n=>{r.current.forEach(f=>{f.setIsDirty(n)})},[]),[O,k]=e.useState(null),[H,M]=e.useState(null),[Z,L]=e.useState(null),[I,F]=e.useState(null),[P,w]=e.useState(null),[z,D]=e.useState(null),[m,x]=e.useState(null),h=e.useRef(!1),T=e.useRef(!1),X=e.useRef(!1),y=e.useRef(!1),l=e.useRef(!1),b=e.useRef(!1),V=e.useCallback(()=>r.current.reduce((n,f)=>n.concat(f.errors),[]),[r]),W=e.useCallback(()=>{const n={};return r.current.forEach(f=>{const g=f.props.name;n[g]=f.errors}),n},[r]),Y=e.useCallback(()=>r.current.length===0?!0:r.current.every(n=>n.errors.length===0),[r]),A=e.useCallback(n=>r.current.some(f=>!!f[n]),[r]),J=e.useCallback(()=>r.current.reduce((n,f)=>(se(n,f.props.name,f.value),n),{}),[r]),ae=e.useCallback(()=>{if(h.current){const n=V(),f=W();k(n),M(f)}if(T.current){const n=Y();L(n)}},[V,W,Y]),Te=e.useCallback(()=>{if(X.current){const n=A("isDirty");F(n)}},[A]),Me=e.useCallback(()=>{if(y.current){const n=A("isTouched");w(n)}},[A]),we=e.useCallback(()=>{if(l.current){const n=J();D(n)}},[J]),De=e.useCallback(()=>{if(b.current){const n=A("isValidating");x(n)}},[A]),le=e.useCallback(()=>{if(h.current=!0,O===null){const n=V();return k(n),n}return O},[O,V]),ce=e.useCallback(()=>{if(h.current=!0,H===null){const n=W();return M(n),n}return H},[H,W]),de=e.useCallback(()=>{if(T.current=!0,Z===null){const n=Y();return L(n),n}return Z},[Z,Y]),me=e.useCallback(()=>{if(I===null){X.current=!0;const n=A("isDirty");return F(n),n}return I},[I,A]),fe=e.useCallback(()=>{if(P===null){y.current=!0;const n=A("isTouched");return w(n),n}return P},[P,A]),he=e.useCallback(()=>{if(z===null){l.current=!0;const n=J();return D(n),n}return z},[z,J]),Ve=e.useCallback(()=>{r.current.sort((n,f)=>$(f.props.name).length-$(n.props.name).length).forEach(n=>{const f=n.props.resetWithValue??n.props.initialValue,g=K=>!!K.setValues,q=K=>!K.setValues;n.setErrors([]),n.setIsTouched(!1),n.setIsDirty(!1),g(n)?n.setValues({__value:f||[],__isResetting:!0}):q(n)&&n.setValue({__value:f||"",__isResetting:!0})}),k([]),L(!1),F(!1),w(!1)},[w,F,k]),ge=e.useCallback(()=>{if(m===null){b.current=!0;const n=A("isValidating");return x(n),n}return m},[m,A]),N=e.useMemo(()=>({getFieldValue:u,deleteField:_,onChangeListenerRefs:v,onBlurListenerRefs:S,onMountListenerRefs:j,isSubmitted:R,setIsSubmitted:d,formFieldsRef:r,setIsTouched:B,setIsDirty:E,recomputeErrors:ae,recomputeIsDirty:Te,recomputeIsTouched:Me,recomputeFormValue:we,recomputeIsValidating:De,reset:Ve,get errors(){return le()},get errorsMap(){return ce()},get isValid(){return de()},get isDirty(){return me()},get isTouched(){return fe()},get value(){return he()},get isValidating(){return ge()},submit:()=>Promise.resolve(!0)}),[u,_,R,B,E,ae,Te,Me,we,De,le,ce,de,me,fe,he,ge,Ve]),Ee=e.useCallback(async()=>{d(!0);const n={},f=await Promise.all(r.current.map(async g=>{const q=async Q=>{const p=g.props[Q];if(!p)return!0;try{return Q==="onSubmitValidate"&&g._setIsValidating(!0),await te(g.value,N,p),!0}catch(Re){return g.setErrors(ne(Re)),!1}finally{Q==="onSubmitValidate"&&g._setIsValidating(!1)}},K=async Q=>{const p=g.props[Q];if(!p)return!0;try{return await te(g.value,N,p),!0}catch(Re){return g.setHints(ne(Re)),!1}};if(g.setHints([]),await K("onMountHint"),await K("onChangeHint"),await K("onBlurHint"),await K("onSubmitHint"),g.setErrors([]),!await q("onMountValidate")||!await q("onChangeValidate")||!await q("onBlurValidate")||!await q("onSubmitValidate"))return!1;const Ge=await(async()=>{const Q=g.props.onSubmitTransform;if(!Q)return g.value;try{return await te(g.value,N,Q)}catch(p){g.setErrors(ne(p))}})();return g.errors.length>0?!1:(se(n,g.props.name,Ge),!0)}));return!o&&!f.every(g=>!!g)?!1:(i==null||i(n,N),!0)},[N,i,o]),re=e.useMemo(()=>{const n=["errors","errorsMap","isValid","isDirty","isTouched","isValidating","submit","value","reset"],f={reset:Ve,submit:Ee,get errors(){return le()},get errorsMap(){return ce()},get isValid(){return de()},get isDirty(){return me()},get isTouched(){return fe()},get value(){return he()},get isValidating(){return ge()}};for(const g of Object.keys(N)){if(n.includes(g))continue;const q=g;f[q]=N[q]}return f},[Ve,N,le,ce,me,fe,de,he,ge,Ee]);e.useImperativeHandle(s,()=>re,[re]);const xe=e.useMemo(()=>c(re),a?a.concat(re):[c,re]);return be.jsx(Ce.Provider,{value:re,children:xe})}const Se=e.memo(e.forwardRef(Le)),G=typeof window<"u"?e.useLayoutEffect:e.useEffect,U=t=>!Array.isArray(t)&&t!==null&&typeof t=="object"&&"__isResetting"in t;function ue({listenTo:t,runFieldValidation:s,valueRef:i}){const c=ee();G(()=>{if(!t||t.length===0)return;function a(){s("onChangeValidate",i.current)}function o(){s("onBlurValidate",i.current)}function r(){s("onMountValidate",i.current)}function R(u,_,v){return c[u].current[_]=c[u].current[_]??[],c[u].current[_].push(v),()=>{c[u].current[_].splice(c[u].current[_].indexOf(v),1)}}const d=t.flatMap(u=>{const _=R("onChangeListenerRefs",u,a),v=R("onBlurListenerRefs",u,o),S=R("onMountListenerRefs",u,r);return[_,v,S]});return()=>d.forEach(u=>u())},[c,t,s,i])}const oe=({initialValue:t,props:s})=>{const{name:i}=s,c=e.useMemo(()=>$(i).join("."),[i]),a=ee(),o=a.formFieldsRef.current.find(m=>m._normalizedDotName===c),[r,R]=e.useState((o==null?void 0:o.errors)??[]),[d,u]=e.useState((o==null?void 0:o.hints)??[]),[_,v]=e.useState((o==null?void 0:o.isTouched)??!1),[S,j]=e.useState((o==null?void 0:o.isDirty)??!1),[B,E]=e.useState((o==null?void 0:o.isValidating)??!1),O=a.isSubmitted,k=e.useCallback((m,x)=>{let h=s.onChangeValidate;m==="onBlurValidate"&&(h=s==null?void 0:s.onBlurValidate),m==="onMountValidate"&&(h=s==null?void 0:s.onMountValidate),h&&(E(!0),te(x,a,h).then(()=>{R([])}).catch(T=>{R(ne(T))}).finally(()=>{E(!1)}))},[a,s]),H=e.useCallback((m,x)=>{let h=s.onChangeHint;m==="onBlurHint"&&(h=s==null?void 0:s.onBlurHint),m==="onMountHint"&&(h=s==null?void 0:s.onMountHint),h&&(E(!0),te(x,a,h).then(()=>{u([])}).catch(T=>{u(ne(T))}).finally(()=>{E(!1)}))},[a,s]),M=s.initialValue??t,Z=e.useRef(!1),[L,I]=e.useState((o==null?void 0:o.value)??M);G(()=>{Z.current||(Z.current=!0,H("onMountHint",M),k("onMountValidate",M))});const F=e.useRef(L);F.current=L;const P=e.useCallback(m=>{I(x=>{const h=U(m)&&m.__isResetting,T=U(m)?m.__value:m,y=(l=>typeof l=="function")(T)?T(x):T;return h||(j(y!==M),setTimeout(()=>{var l;(l=a.onChangeListenerRefs.current[s.name])==null||l.forEach(b=>b())},0),H("onChangeHint",y),k("onChangeValidate",y)),y})},[M,k,H,a.onChangeListenerRefs,s.name]),w=e.useMemo(()=>r.length===0,[r]),z=e.useCallback(m=>{k(m,F.current)},[k,F]),D=e.useCallback(m=>{H(m,F.current)},[H,F]);return{value:L,setErrors:R,errors:r,hints:d,setHints:u,setIsDirty:j,setIsTouched:v,setValue:P,isTouched:_,isDirty:S,isValid:w,isValidating:B,isSubmitted:O,runFieldValidation:k,runFieldHintCheck:H,valueRef:F,validate:z,checkHint:D,_normalizedDotName:c,_setIsValidating:E}},ie=({fieldInstanceRef:t,props:s,value:i,errors:c,isDirty:a,isValid:o,isTouched:r,isValidating:R,preserveValue:d})=>{const u=ee();G(()=>{t.current.props=s;const _=t.current,v=u.formFieldsRef.current;if(u.deleteField(s.name),v.push(_),!d)return()=>{u.deleteField(s.name)}},[u.deleteField,u.formFieldsRef,t,s,d]),G(()=>{t.current.value=i},[t,i]),G(()=>{t.current.errors=c},[c,t]),G(()=>{t.current.isDirty=a},[a,t]),G(()=>{t.current.isValid=o},[o,t]),G(()=>{t.current.isTouched=r},[r,t]),G(()=>{t.current.isValidating=R},[R,t]),G(()=>(u.recomputeErrors(),()=>{u.recomputeErrors()}),[c,u.recomputeErrors]),G(()=>(u.recomputeIsTouched(),()=>{u.recomputeIsTouched()}),[r,u.recomputeIsTouched]),G(()=>(u.recomputeIsDirty(),()=>{u.recomputeIsDirty()}),[a,u.recomputeIsDirty]),G(()=>(u.recomputeIsValidating(),()=>{u.recomputeIsValidating()}),[R,u.recomputeIsValidating]),G(()=>(u.recomputeFormValue(),()=>{u.recomputeFormValue()}),[i,u.recomputeFormValue])};function Be(t,s){const i=ee(),{children:c,memoChild:a,preserveValue:o}=t,{value:r,setErrors:R,errors:d,hints:u,setHints:_,setIsDirty:v,setIsTouched:S,setValue:j,isTouched:B,isDirty:E,isValid:O,isValidating:k,isSubmitted:H,runFieldValidation:M,runFieldHintCheck:Z,valueRef:L,_normalizedDotName:I,_setIsValidating:F,validate:P,checkHint:w}=oe({props:t,initialValue:""});ue({listenTo:t.listenTo,runFieldValidation:M,valueRef:L});const z=e.useCallback(()=>{S(!0),setTimeout(()=>{var h;(h=i.onBlurListenerRefs.current[t.name])==null||h.forEach(T=>T())},0),Z("onBlurHint",L.current),M("onBlurValidate",L.current)},[i.onBlurListenerRefs,t.name,M,S,L]),D=e.useMemo(()=>({value:r,props:t,setErrors:R,errors:d,setIsDirty:v,setIsTouched:S,setValue:j,isTouched:B,isDirty:E,isValid:O,isValidating:k,isSubmitted:H,onBlur:z,_normalizedDotName:I,_setIsValidating:F,validate:P,hints:u,setHints:_,checkHint:w}),[t,r,R,d,v,S,j,B,E,O,k,H,z,I,F,P,u,_,w]),m=e.useRef(D);return ie({fieldInstanceRef:m,props:t,value:r,errors:d,isValid:O,isDirty:E,isTouched:B,isValidating:k,preserveValue:o}),e.useImperativeHandle(s,()=>D,[D]),e.useMemo(()=>c(D),a?a.concat(D):[c,D])}const Pe=e.memo(e.forwardRef(Be)),ke={value:[],setValue:()=>{},setValues:()=>{},props:{name:""},errors:[],setErrors:()=>{},setIsDirty:()=>{},isValid:!1,isValidating:!1,setIsTouched:()=>{},isDirty:!1,isTouched:!1,_normalizedDotName:"",add:()=>{},remove:()=>{},insert:()=>{},move:()=>{},swap:()=>{},replace:()=>{},validate:()=>{},_setIsValidating:()=>{},hints:[],setHints:()=>{},checkHint:()=>{}},ye=e.createContext(ke),Fe=()=>e.useContext(ye);function ze(t,s){const{children:i,memoChild:c,preserveValue:a}=t,{value:o,errors:r,setErrors:R,setValue:d,hints:u,setHints:_,isTouched:v,isDirty:S,isValid:j,isValidating:B,_normalizedDotName:E,_setIsValidating:O,runFieldValidation:k,valueRef:H,setIsDirty:M,setIsTouched:Z,validate:L,checkHint:I}=oe({props:t,initialValue:[]});ue({listenTo:t.listenTo,runFieldValidation:k,valueRef:H});const F=e.useCallback((y,l)=>{const b=U(l)&&l.__isResetting,V=U(l)?l.__value:l,W=Y=>{const A=[...Y];return A[y]=V,A};if(b){d({__value:W,__isResetting:!0});return}d(W)},[d]),P=e.useCallback(y=>{d(l=>[...l,y])},[d]),w=e.useCallback(y=>{d(l=>{const b=[...l];return b.splice(y,1),b})},[d]),z=e.useCallback((y,l)=>{d(b=>{const V=[...b];return V.splice(y,0,l),V})},[d]),D=e.useCallback((y,l)=>{d(b=>{const V=[...b],W=V[y];return V.splice(y,1),V.splice(l,0,W),V})},[d]),m=e.useCallback((y,l)=>{d(b=>{const V=[...b];return V[y]=l,V})},[d]),x=e.useCallback((y,l)=>{d(b=>{const V=[...b],W=V[y];return V[y]=V[l],V[l]=W,V})},[d]),h=e.useMemo(()=>({value:o,add:P,move:D,insert:z,remove:w,swap:x,replace:m,setValue:F,props:t,_normalizedDotName:E,_setIsValidating:O,errors:r,setErrors:R,hints:u,setHints:_,isValid:j,isValidating:B,setIsDirty:M,isDirty:S,setIsTouched:Z,isTouched:v,setValues:d,validate:L,checkHint:I}),[o,P,D,z,w,x,m,F,t,E,O,r,R,u,_,j,B,M,S,Z,v,d,L,I]),T=e.useRef(h);ie({value:o,fieldInstanceRef:T,isValid:j,isValidating:B,isDirty:S,isTouched:v,props:t,errors:r,preserveValue:a}),e.useImperativeHandle(s,()=>h,[h]);const X=e.useMemo(()=>i(h),c?c.concat(h):[i,h]);return be.jsx(ye.Provider,{value:h,children:X})}const je=e.memo(e.forwardRef(ze));function Ie(t,s){const{children:i,memoChild:c,preserveValue:a}=t,{_normalizedDotName:o,_setIsValidating:r,errors:R,setErrors:d,hints:u,setHints:_,runFieldValidation:v,runFieldHintCheck:S,isValid:j,isValidating:B,isTouched:E,isSubmitted:O,setIsTouched:k,isDirty:H,setIsDirty:M,validate:Z,checkHint:L}=oe({props:t,initialValue:""}),I=Fe(),F=ee(),P=e.useMemo(()=>{const l=$(I.props.name),b=$(t.name);for(const V of l)if(V!==b.shift())throw new Error("You must prepend the FieldArrayItem name with the name of the parent FieldArray");return b},[I.props.name,t.name]),w=e.useMemo(()=>parseInt(P[0]),[P]),z=e.useMemo(()=>P.slice(1),[P]),D=e.useMemo(()=>ve(I.value[w],z.join(".")),[z,I.value,w]),m=e.useRef(D);m.current=D,ue({listenTo:t.listenTo,runFieldValidation:v,valueRef:m});const x=e.useCallback(l=>{const b=U(l)&&l.__isResetting,V=U(l)?l.__value:l,Y=(J=>typeof J=="function")(V)?V(I.value[w]):V,A={...I.value[w]};if(se(A,z.join("."),Y),b){I.setValue(w,{__value:A,__isResetting:!0});return}I.setValue(w,A),M(!0),setTimeout(()=>{var J;(J=F.onChangeListenerRefs.current[t.name])==null||J.forEach(ae=>ae())},0),v("onChangeValidate",Y)},[z,I,F.onChangeListenerRefs,w,t.name,v,M]),h=e.useCallback(()=>{k(!0),setTimeout(()=>{var l;(l=F.onBlurListenerRefs.current[t.name])==null||l.forEach(b=>b())},0),S("onBlurHint",m.current),v("onBlurValidate",m.current)},[F.onBlurListenerRefs,t.name,S,v,k]),T=e.useMemo(()=>({setValue:x,errors:R,value:D,_normalizedDotName:o,_setIsValidating:r,onBlur:h,props:t,isTouched:E,isValid:j,isDirty:H,isValidating:B,setIsDirty:M,setErrors:d,setIsTouched:k,validate:Z,isSubmitted:O,hints:u,setHints:_,checkHint:L}),[x,R,D,o,r,h,t,E,j,H,B,M,d,k,Z,O,u,_,L]),X=e.useRef(T);return ie({fieldInstanceRef:X,props:t,value:D,errors:R,isValid:j,isDirty:H,isTouched:E,isValidating:B,preserveValue:a}),e.useImperativeHandle(s,()=>T,[T]),e.useMemo(()=>i(T),c?c.concat(T):[i,T])}const Oe=e.memo(e.forwardRef(Ie));C.Field=Pe,C.FieldArray=je,C.FieldArrayContext=ye,C.FieldArrayItem=Oe,C.FieldArrayItemComp=Ie,C.Form=Se,C.FormContext=Ce,C.fillPath=se,C.getPath=ve,C.getValidationError=ne,C.initialFieldArrayContext=ke,C.initialFormContext=_e,C.isInternal=U,C.stringToPath=$,C.useFieldArrayContext=Fe,C.useFieldLike=oe,C.useFieldLikeSync=ie,C.useFormContext=ee,C.useListenToListenToArray=ue,C.validate=te,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})});