form-test-victor
Version:
# Performant forms and wizard library for React
3 lines (2 loc) • 11.3 kB
JavaScript
import e,{useContext as t,createContext as r,useState as n,useRef as o,useCallback as s,useEffect as a,useMemo as u}from"react";const l={formInternal:{registerField:()=>{},unregisterField:()=>{},addValueSubscriber:()=>{},removeValueSubscriber:()=>{},addValidationStatusSubscriber:()=>{},removeValidationStatusSubscriber:()=>{},handleOnChange:()=>{},handleOnBlur:()=>{},getFormValuesForNames:()=>({}),getFormErrorsForNames:()=>({}),updateValidationStatus:()=>{}},getFormValues:()=>({}),resetForm:()=>{},setFormValues:()=>{}},i=/*#__PURE__*/r(l);function c(){return t(i)}var d;function f(e){let t=!1,r=!1;return Object.values(e).forEach(e=>{e.status===d.UNDETERMINED?r=!0:e.status===d.INVALID&&(t=!0)}),t?d.INVALID:r?d.UNDETERMINED:d.VALID}!function(e){e.VALID="VALID",e.INVALID="INVALID",e.UNDETERMINED="UNDETERMINED"}(d||(d={}));const g={status:d.VALID,message:void 0},h={status:d.UNDETERMINED,message:void 0},p=/*#__PURE__*/r({registerRule:()=>{},unregisterRule:()=>{}});function m({name:t,children:r,render:l,data:i}){const{formInternal:{registerField:f,unregisterField:m,handleOnChange:v,handleOnBlur:S,updateValidationStatus:E}}=c(),{ruleContext:N,rules:V,debouncedRules:O}=function(){const[e,t]=n([]),[r,o]=n([]),a=s((e,r,n)=>{n?o(t=>[...t,{validatorFn:e,errorMessage:r}]):t(t=>[...t,{validatorFn:e,errorMessage:r}])},[]),l=s((e,r)=>{r?o(t=>t.filter(t=>t.validatorFn!==e)):t(t=>t.filter(t=>t.validatorFn!==e))},[]),i=u(()=>({registerRule:a,unregisterRule:l}),[a,l]);return u(()=>({ruleContext:i,rules:e,debouncedRules:r}),[r,i,e])}(),[b,R]=n(void 0),[F,I]=n(!0),w=function(e,t,r){const u=e.length+t.length,[l,i]=n(u?h:g),c=o({countRulesResolved:0,phaseId:0,hasError:!1}),f=s((e,t,r)=>{e.forEach(({validatorFn:e,errorMessage:n})=>{c.current.hasError||Promise.resolve(e(t)).then(e=>{if(r===c.current.phaseId){if(c.current.countRulesResolved+=1,!e&&!c.current.hasError)throw new Error(n);e&&c.current.countRulesResolved===u&&i(g)}}).catch(({message:e})=>{const t={status:d.INVALID,message:e};c.current.hasError=!0,i(t)})})},[u]);return a(()=>{if(!u)return i(g),()=>{};i(h);const{current:n}=c;n.phaseId+=1,n.countRulesResolved=0,n.hasError=!1;const o=n.phaseId;f(e,r,o);const s=setTimeout(()=>{f(t,r,o)},500);return()=>clearTimeout(s)},[t,u,e,f,r]),l}(V,O,b),C=o(!1);a(()=>(f(t,R),()=>m(t)),[t,f,m]),a(()=>{F&&C.current&&I(!1)},[F,b]),a(()=>{E(t,w)},[t,E,w]);const D=s(e=>{v(t,e,C.current)},[v,t]),A=s(()=>{C.current=!1,S(t,i)},[S,t,i]),P=s(()=>{C.current=!0},[]);/*#__PURE__*/return e.createElement(p.Provider,{value:N},l({name:t,value:b,onFocus:P,onBlur:A,onChange:D},{isPristine:F,validationStatus:w}),r)}function v(e,t){return(...r)=>{e&&e(...r),t(...r)}}function S(){return S=Object.assign||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},S.apply(this,arguments)}function E(t){/*#__PURE__*/return e.createElement(m,S({},t,{render:()=>null}))}function N({message:e,children:r,validationFn:n,isDebounced:o=!1}){const{registerRule:s,unregisterRule:u}=t(p);return a(()=>(s(n,e,o),()=>u(n,o)),[o,e,s,u,n]),r}var V;function O({onUpdateAfterBlur:e}={}){const{current:t}=o({errors:{},values:{}}),{current:r}=o({}),n=o(),a=s(e=>{Object.keys(r).forEach(t=>{e(r[t])})},[r]),{current:l}=o({[V.ON_CHANGE]:{global:new Set,scoped:{}},[V.ON_BLUR]:{global:new Set,scoped:{}}}),{current:i}=o({[V.ON_CHANGE]:{global:new Set,scoped:{}},[V.ON_BLUR]:{global:new Set,scoped:{}}}),c=s(e=>{const t=e||Object.keys(r),n={};return t.forEach(e=>{var t;null!=(t=r[e])&&t.isRegistered&&(n[e]=r[e].value)}),n},[r]),f=s(e=>{const t=e||Object.keys(r),n={};return t.forEach(e=>{var t;null!=(t=r[e])&&t.isRegistered&&(n[e]=r[e].validation)}),n},[r]),g=s(()=>c(),[c]),p=s((e,n)=>{l[n].scoped[e]&&l[n].scoped[e].forEach(t=>{t(t=>S({},t,{[e]:r[e].isRegistered?r[e].value:void 0}))}),l[n].global.size&&(clearTimeout(t.values[n]),t.values[n]=setTimeout(()=>{const e=g();l[n].global.forEach(t=>{t(e)})},0))},[l,r,g,t]),m=s((e,n)=>{i[n].scoped[e]&&i[n].scoped[e].forEach(t=>{t(t=>{const n=t;return r[e].isRegistered?n[e]=r[e].validation:delete n[e],n})}),i[n].global.size&&(clearTimeout(t.errors[n]),t.errors[n]=setTimeout(()=>{const e=f();i[n].global.forEach(t=>{t(e)})},0))},[i,r,f,t]),v=s(e=>{p(e,V.ON_CHANGE),p(e,V.ON_BLUR)},[p]),E=s(e=>{m(e,V.ON_CHANGE),m(e,V.ON_BLUR)},[m]),N=s(e=>{r[e].isRegistered=!1,v(e),E(e)},[r,v,E]),O=s((e,t,r,n)=>{const o=r;n?n.forEach(r=>{o[t].scoped[r]||(o[t].scoped[r]=new Set),o[t].scoped[r].add(e)}):o[t].global.add(e)},[]),b=s((e,t,r)=>{O(e,t,l,r),e(c(r))},[O,l,c]),R=s((e,t)=>{O(e,V.ON_CHANGE,i,t),e(f(t))},[O,i,f]),F=s((e,t)=>{var n,o;const s=null==(n=r[e])?void 0:n.value;if(null!=(o=r[e])&&o.isRegistered)throw new Error(`Attempting to register field "${e}" a second time`);r[e]={name:e,isRegistered:!0,value:s,validation:h},b(r=>{const n="function"==typeof r?r({}):r;t(null==n?void 0:n[e])},V.ON_CHANGE,[e]),v(e)},[r,b,v]),I=s((e,t,r,n)=>{n?n.forEach(n=>{r[t].scoped[n].delete(e)}):r[t].global.delete(e)},[]),w=s((e,t,r)=>{I(e,t,l,r)},[l,I]),C=s((e,t)=>{I(e,V.ON_CHANGE,i,t)},[i,I]),D=s((e,t=!1)=>{t&&a(({name:e})=>{r[e].value=void 0,v(e)}),Object.keys(e).forEach(t=>{r[t]?r[t].value=e[t]:r[t]={name:t,isRegistered:!1,value:e[t],validation:h},v(t)})},[a,r,v]),A=s((e,t,o)=>{r[e].value!==t&&(o&&(n.current=e),r[e].value=t,p(e,V.ON_CHANGE))},[r,p]),P=s(async(t,o={})=>{p(t,V.ON_BLUR),e&&n.current===t&&r[t].validation.status===d.VALID&&await e(t,r[t].value,o,{getFormValues:g,setFormValues:D}),n.current=void 0},[p,e,r,g,D]),L=s((e,t)=>{r[e].validation=t,m(e,V.ON_CHANGE)},[r,m]),_=s(()=>D({},!0),[D]);return u(()=>({formInternal:{registerField:F,unregisterField:N,addValueSubscriber:b,removeValueSubscriber:w,addValidationStatusSubscriber:R,removeValidationStatusSubscriber:C,handleOnChange:A,handleOnBlur:P,getFormValuesForNames:c,getFormErrorsForNames:f,updateValidationStatus:L},getFormValues:g,resetForm:_,setFormValues:D}),[F,N,b,w,R,C,A,P,c,f,L,g,_,D])}function b(e,t,r){const o=c(),{formInternal:{addValueSubscriber:s,removeValueSubscriber:u}}=r||o,[i,d]=n({});if(!r&&o===l)throw new Error('No form context could be found while calling "useValues".');return a(()=>(s(d,e,t),()=>u(d,e,t)),[s,u,e,null==t?void 0:t.join()]),i}function R(e,t){return b(V.ON_CHANGE,e,t)}function F(e,t){return b(V.ON_BLUR,e,t)}function I(e,t){const r=c(),{formInternal:{addValidationStatusSubscriber:o,removeValidationStatusSubscriber:s}}=t||r,[u,i]=n({});if(!t&&r===l)throw new Error('No form context could be found while calling "useValidations".');return a(()=>(o(i,e),()=>s(i,e)),[o,null==e?void 0:e.join(),s]),u}function w(e){const t=I(void 0,e),[r,o]=n(d.UNDETERMINED);return a(()=>{o(f(t))},[t]),u(()=>({formStatus:r,isFormValid:r===d.VALID}),[r])}function C(e,t){const{setFormValues:r}=c(),{[e]:n}=R([e],t);return u(()=>({name:e,value:n,setValue:n=>t?t.setFormValues({[e]:n}):r({[e]:n})}),[e,n,t,r])}function D({children:t,form:r}){/*#__PURE__*/return e.createElement(i.Provider,{value:r},t)}m.defaultProps={children:null},E.defaultProps={children:null},N.defaultProps={children:null,isDebounced:!1},function(e){e.ON_CHANGE="ON_CHANGE",e.ON_BLUR="ON_BLUR"}(V||(V={}));const A={steps:[],currentStep:void 0,registerStep:()=>{},unregisterStep:()=>{},handleOnNext:async()=>{},handleOnPrevious:()=>{},updatePlaceholderContent:()=>{},resetPlaceholderContent:()=>{},registerPlaceholder:()=>{},unregisterPlaceholder:()=>{},isLastStep:!1,isFirstStep:!1,hasNoFooter:!0,stepStatusSetter:()=>{},isStepReady:!1,stepsTitles:[],setIsStepReady:()=>{},setValuesGetterForCurrentStep:()=>{},getValuesOfCurrentStep:()=>{},getValuesOfStep:()=>{},getValuesOfSteps:()=>({})},P=/*#__PURE__*/r(A);function L(){return t(P)}function _(e,t){const r=o({}),a=o(()=>{}),[l,i]=n(),[c,d]=n([]),f=o({}),g=o(new Set),[h,p]=n(!1),m=o(new Set),v=o(new Set),E=o([]),N=e=>e-1>=0,V=(e,t)=>e+1<=t.length-1,O=s(()=>{if(l){const e=a.current();e&&(r.current[l]=e)}},[l]),b=s(e=>r.current[e],[]),R=s(()=>l?b(l):void 0,[l,b]),F=s(()=>r.current,[]),I=s((e,t,r,n)=>{d(t=>{if(-1!==t.indexOf(e))throw new Error(`Attempting to register step "${e}" a second time`);return 0===t.length&&i(e),[...t,e]}),t&&(f.current[e]=t),r&&g.current.add(e),E.current=[...E.current,{name:e,title:n}]},[i]),w=s(e=>{d(t=>{const r=t.indexOf(e);if(-1===r)throw new Error(`No step ${e} to be unregistered was found.`);let n;return N(r)?n=t[r-1]:V(r,t)&&(n=t[r+1]),i(n),[...t.slice(0,r),...t.slice(r+1)]}),delete f.current[e],g.current.delete(e),E.current=E.current.filter(({name:t})=>t!==e)},[i]),C=s(async()=>{if(!l)return;if(f.current[l]&&!await f.current[l](R()))return;O();const t=c.indexOf(l);if(V(t,c))return p(!1),void setTimeout(()=>i(c[t+1]),0);await e(r.current)},[l,R,e,O,c]),D=s(()=>{if(l&&l){const e=c.indexOf(l);if(N(e))return p(!1),O(),void setTimeout(()=>i(c[e-1]),0);t()}},[l,t,O,c]),A=s((e,t)=>{m.current.add(e),v.current.add(t)},[m,v]),P=s((e,t)=>{m.current.delete(e),v.current.delete(t)},[m,v]),L=s((e,t)=>{m.current.forEach(r=>{r(r=>S({},r,{[e]:t}))})},[m]),_=s(e=>{e?L(e,void 0):m.current.forEach(e=>{e({})})},[L,m]),T=s(e=>{a.current=e},[]),y=s(e=>{v.current.forEach(t=>{t(e)})},[]);return u(()=>Object.defineProperties({steps:c,currentStep:l,registerStep:I,unregisterStep:w,handleOnNext:C,handleOnPrevious:D,updatePlaceholderContent:L,resetPlaceholderContent:_,registerPlaceholder:A,unregisterPlaceholder:P,stepStatusSetter:y,isStepReady:h,setIsStepReady:p,setValuesGetterForCurrentStep:T,getValuesOfCurrentStep:R,getValuesOfStep:b,getValuesOfSteps:F},{isLastStep:{get:()=>!c.length||l===c[c.length-1]},isFirstStep:{get:()=>!c.length||l===c[0]},hasNoFooter:{get:()=>l&&g.current.has(l)},stepsTitles:{get:()=>E.current}}),[c,l,I,w,C,D,L,_,A,P,y,h,T,R,b,F])}function T(e){const t=O(e),{stepStatusSetter:r,setValuesGetterForCurrentStep:n,getValuesOfCurrentStep:u}=L(),l=o(!1),{formInternal:{addValidationStatusSubscriber:i},getFormValues:c,setFormValues:g}=t;return a(()=>{r(d.UNDETERMINED);const e=e=>{r(f(e))};return setTimeout(()=>i(e),0),()=>{n(()=>{}),r(d.VALID)}},[r,n,i]),a(()=>{n(c)},[c,n]),a(()=>{const e=u();e&&(l.current=!0,g(e))},[u,g]),{initFormValues:s(e=>{l.current||g(e)},[g]),form:t}}function y(){const{handleOnNext:e,handleOnPrevious:t,registerPlaceholder:r,unregisterPlaceholder:o}=L(),[u,l]=n({}),[i,c]=n(!1),[f,g]=n(d.VALID);return a(()=>(r(l,g),()=>o(l,g)),[r,o,l,g]),{handleOnNext:s(async()=>{c(!0),await e(),c(!1)},[e]),handleOnPrevious:t,placeholderContent:u,isLoading:i,stepStatus:f}}function U({placement:e,children:t}){const{updatePlaceholderContent:r,resetPlaceholderContent:n}=L();return a(()=>(r(e,t),()=>n(e)),[r,e,t,n]),null}function G({children:e,name:t,onNext:r,noFooter:n,title:o}){const s=L(),{registerStep:u,unregisterStep:l,currentStep:i,setIsStepReady:c}=s;if(s===A)throw new Error("Step not in wizard");return a(()=>(u(t,r,n,o),()=>l(t)),[u,l,t,r,n,o]),a(()=>{i===t&&c(!0)},[i,t,c]),i!==t?null:e}export{m as Field,D as Form,E as HiddenField,U as Placeholder,N as Rule,G as Step,d as VALIDATION_OUTCOME,P as WizardContext,v as composeEventHandlers,O as useForm,c as useFormContext,w as useFormStatus,C as useHiddenField,F as useOnBlurValues,R as useOnChangeValues,y as usePlaceholder,T as useStepForm,I as useValidations,_ as useWizard,L as useWizardContext};
//# sourceMappingURL=index.modern.js.map