reactjs-use-form/dist/index.cjs

Reactive form management and input field validation hook

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),m={hasError:!1,message:""},L={hasError:!0,message:"This field is required"};function C(e,t){const s=Object.keys(e),a=Object.keys(t);if(s.length!==a.length)return!1;for(const u of s)if(e[u]!==t[u])return!1;return!0}function P(e,t){const s=Object.keys(e),a=Object.keys(t);if(s.length!==a.length)return!1;for(const u of s){const l=e[u],r=t[u];if(l.hasError!==r.hasError||l.message!==r.message)return!1}return!0}function Q(e){const t={};for(const s in e)t[s]=e[s].value;return t}function U(e){const t={};for(const s in e)t[s]=m;return t}function x(e){const t={};for(const s in e)t[s]=!1;return t}function z(e){const t={};for(const s in e)t[s]=e[s].required;return t}function B(e,t,s,a){if(s.required&&!t)return L;if(s.validator&&t){const u=s.validator(t,a);if(u)return{hasError:!0,message:u}}return m}function G(e,t,s,a){let u=!1,l=a;for(const r in e)if(e[r]){const E=t[r],f=s[r],h=B(r,E,f,t);(h.message!==a[r].message||h.hasError!==a[r].hasError)&&(u||(l={...a},u=!0),l[r]=h)}return l}function H(e){for(const t in e)if(e[t].hasError)return!0;return!1}function J(e,t){for(const s in t)if(t[s]&&!e[s])return!0;return!1}function K(e,t){const s=n.useMemo(()=>Q(e),[e]),a=n.useMemo(()=>U(e),[e]),u=n.useMemo(()=>x(e),[e]),l=n.useMemo(()=>z(e),[e]),[r,E]=n.useState(s),[f,h]=n.useState(a),[o,g]=n.useState(u),[I,D]=n.useState(!1),[p,b]=n.useState(!1),[S,O]=n.useState(!1),d=n.useRef(r),v=n.useRef(o),w=n.useMemo(()=>{for(const i in o)if(o[i])return!0;return!1},[o]),R=n.useMemo(()=>H(f)||J(r,l),[f,r,l]),V=n.useMemo(()=>!S||R,[S,R]);n.useEffect(()=>{if(!S)return;const i=!C(d.current,r),c=!C(v.current,o);if(i||c){const y=G(o,r,e,f);P(f,y)||h(y),d.current=r,v.current=o}},[r,o,e,f,S]);const j=n.useCallback(i=>{const c=i.target.name,y=i.target.value;if(!e[c])return;const k=r[c],q=o[c];k===y&&q||(O(!0),E(F=>({...F,[c]:y})),q||g(F=>({...F,[c]:!0})))},[e,r,o]),T=n.useCallback(async i=>{if(i.preventDefault(),!R){b(!0);try{await t(r),D(!0),g(u)}catch(c){throw console.error("Form submission error:",c),c}finally{b(!1)}}},[R,t,r,u]),_=n.useCallback(()=>{E(s),h(a),g(u),D(!1),b(!1),O(!1),d.current=s,v.current=u},[s,a,u]),A=n.useCallback(i=>{var y;const c=(y=e[i])==null?void 0:y.value;E(k=>({...k,[i]:c})),h(k=>({...k,[i]:m})),g(k=>({...k,[i]:!1}))},[e]);return{handleOnChange:j,handleOnSubmit:T,values:r,errors:f,isSubmitted:I,isSubmitting:p,isDisabled:V,isDirty:w,resetForm:_,resetField:A}}exports.useForm=K;