formularity
Version:
The last React form library you will ever need!
3 lines (2 loc) • 12.1 kB
JavaScript
import e,{useRef as t,useLayoutEffect as n,useCallback as r,createContext as i,useContext as o,useEffect as l,memo as s,useSyncExternalStore as a}from"react";import{jsxs as u,Fragment as d,jsx as c}from"react/jsx-runtime";function v(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}function f(e,t,n,r){return new(n||(n=Promise))((function(i,o){function l(e){try{a(r.next(e))}catch(e){o(e)}}function s(e){try{a(r.throw(e))}catch(e){o(e)}}function a(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,s)}a((r=r.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const b=e=>{const i=t((()=>{}));return n((()=>{i.current=e})),r(((...e)=>{var t;return null===(t=i.current)||void 0===t?void 0:t.apply(void 0,e)}),[])},h=e=>Object.keys(e),m=e=>!!e&&"object"==typeof e&&!Array.isArray(e),p=e=>Object.entries(e),y=e=>{const t=[],n=(e,r)=>{if("object"==typeof e&&null!==e)for(const i in e)if(Object.prototype.hasOwnProperty.call(e,i)){const o=r?`${r}.${i}`:i;t.push(o),Array.isArray(e[i])?e[i].forEach(((e,r)=>{const i=`${o}[${r}]`;t.push(i),n(e,i)})):"object"==typeof e[i]&&n(e[i],o)}};return n(e,""),t},g=(e,t)=>{const n=t.split(/\.|\[|\]/).filter(Boolean);let r=e;for(const e of n)if(Array.isArray(r)){const t=parseInt(e,10);if(isNaN(t))return;r=r[t]}else{if("object"!=typeof r||null===r||!(e in r))return;r=r[e]}return r},F=(e,t,n)=>{const r=t.split(/\.\[|\]|\./).filter(Boolean),i=O(e);let o=i;for(let e=0;e<r.length-1;e++){const t=r[e];"object"==typeof o[t]&&null!==o[t]||(o[t]=isNaN(Number(r[e+1]))?{}:[]),o=o[t]}return o[r[r.length-1]]=n,i},j=(e,t)=>{const n=(e,t)=>{if(e===t)return!0;if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;const r=h(e),i=h(t);if(r.length!==i.length)return!1;for(const o of r)if(!i.includes(o)||!n(e[o],t[o]))return!1;return!0};return n(e,t)},O=(e,t=new WeakMap)=>{if(null===e||"object"!=typeof e)return e;if(t.has(e))return t.get(e);const n=Array.isArray(e)?[]:{};if(t.set(e,n),Array.isArray(e))for(let r=0;r<e.length;r++)n[r]=O(e[r],t);else for(const r in e)r in e&&(n[r]=O(e[r],t));return n},S=(e,t)=>{if(!m(e)||!m(t))return t;const n=O(e);for(const r in t)Object.prototype.hasOwnProperty.call(t,r)&&(m(t[r])&&r in e?n[r]=S(e[r],t[r]):n[r]=t[r]);return n},E=e=>{"production"!==process.env.NODE_ENV&&console.warn(e)},V=e=>y(e).reduce(((e,t)=>F(e,t,!0)),{}),w=e=>{let t=Object.assign(Object.assign({},A(e.initialValues)),{manualValidationHandler:e.manualValidationHandler,validationSchema:e.validationSchema,onSubmit:e.onSubmit});const n=new Set;return{get:()=>t,set:e=>{t=Object.assign(Object.assign({},t),e),n.forEach((e=>e()))},subscribe:e=>(n.add(e),()=>{n.delete(e)})}},A=e=>({values:O(e),initialValues:e,errors:{},touched:{},isSubmitting:!1,isValidating:!1,submitCount:0,isEditing:!1}),k=i(null),C=()=>{const e=o(k);if(!e)throw new Error("Must use any Formularity custom component within \n a <Formularity /> component in order for it to work!");return e},B=t=>{var{name:n,value:r,type:i,checked:o,component:s,label:a,labelProps:f,showErrors:b,errorProps:h,validator:m,shouldValidate:p,validationEvent:y}=t,F=v(t,["name","value","type","checked","component","label","labelProps","showErrors","errorProps","validator","shouldValidate","validationEvent"]);const{values:j,errors:O,touched:S,handleChange:E,handleBlur:V,registerField:w,unregisterField:A}=C(),k="id"in F?F.id:void 0;l((()=>(w({name:n,type:i,validationHandler:m||null,fieldId:k}),()=>{A(n)})),[n]);const B=s||"input",P=g(j,n),N=null==i&&!!s&&null!=o,T={shouldValidate:p,validationEvent:y},x=Object.assign({name:n,value:r||P,checked:"checkbox"===i||N?null==r?P:r:void 0,onChange:e=>E(e,T),onBlur:e=>V(e,T),type:N?"checkbox":i},F),H=g(O,n),I=g(S,n);return u(d,{children:[a&&c("label",{htmlFor:n||k,style:null==f?void 0:f.labelStyles,className:null==f?void 0:f.labelClasses,children:a}),e.createElement(B,x,F.children),b&&H&&I&&c("div",{style:null==h?void 0:h.errorStyles,className:null==h?void 0:h.errorClasses,children:H})]})},P=({name:e,render:t})=>{const{values:n,setFieldValue:r}=C(),i=g(n,e);if(!Array.isArray(i))throw new Error(`Value "${e}" is not an array. \n The <FieldList /> component can only be used with \n values that are arrays.`);const o=(e,t)=>{r(e,t)},l={addField:t=>{o(e,[...i,t])},removeField:t=>{o(e,[...i.slice(0,t),...i.slice(t+1)])},moveField:(t,n)=>{const r=[...i],l=r[t];r.splice(t,1),r.splice(n,0,l),o(e,r)},replaceField:(t,n)=>{const r=[...i];r[t]=n,o(e,r)},insertField:(t,n)=>{const r=[...i];r.splice(t,0,n),o(e,r)},swapFields:(t,n)=>{const r=[...i],l=r[t],s=r[n];r[t]=s,r[n]=l,o(e,r)},removeLastField:()=>{o(e,[...i.slice(0,-1)])},addFieldToBeginning:t=>{o(e,[t,...i])}};return t(i,l)},N=t=>{var{component:n,disableInvalid:r,disabledMode:i,disableWhileSubmitting:o,children:l}=t,s=v(t,["component","disableInvalid","disabledMode","disableWhileSubmitting","children"]);const a=C(),u=n||"button",d=Object.assign({type:"submit",disabled:(()=>{const e=!!a.isValid;if("disabled"in s&&s.disabled)return s.disabled;if(null==r)return!e;if(o&&a.isSubmitting)return!0;if(r)switch(i){case"after-first-submission":return(({submitCount:e,isValid:t})=>e>0&&!t)(a);case"after-first-submission-editing":return(({submitCount:e,isValid:t,isDirty:n,isEditing:r})=>e>0?!t:!!r&&!n)(a);case"not-dirty":return(({isValid:e,isDirty:t})=>!(e&&t))(a);default:return!e}return!1})()},s);return e.createElement(u,d,l)},T=s((t=>{var{component:n,children:r}=t,i=v(t,["component","children"]);const o=n||"button",l=Object.assign({type:"reset"},i);return e.createElement(o,l,r)}));T.displayName="ResetButton";const x=({formStore:e,isEditing:n=!1,valuesInitializer:i,onSubmit:o,onReset:s,validateOnBlur:u=!0,validateOnChange:d=!0,validateOnSubmit:c=!0})=>{const m=a(e.subscribe,e.get),w=m.validationSchema,k=m.manualValidationHandler,C=m.onSubmit||o,x=t(m.initialValues),H=t(O(m.initialValues)),I=m.values,D=m.errors,M=m.touched,R=t(!1),$=t({});l((()=>(R.current=!0,()=>{R.current=!1})),[]),l((()=>{i&&R.current&&!j(H.current,i)&&(ne(i),H.current=O(i))}),[i]);const L=r((e=>{const{name:t}=e,n=v(e,["name"]);$.current[t]||($.current[t]=Object.assign({},n))}),[]),W=r((e=>{delete $.current[e]}),[]),z=b(((e,t)=>f(void 0,void 0,void 0,(function*(){var n;const r=null===(n=null==t?void 0:t.updateStore)||void 0===n||n;let i={};const o=p($.current).filter((([e,t])=>!!(null==t?void 0:t.validationHandler))).map((([e])=>e)),l=t=>f(void 0,void 0,void 0,(function*(){const n=yield t(e);if(n&&(i=n),o.length){for(const e in i)o.includes(e)&&delete i[e];i=yield q(i)}j(i,D)||r&&U(i)}));switch(!0){case!!w:yield l(w);break;case!!k:yield l(k);break;default:h(i).length&&(i=yield q(i),r&&U(i))}return i})))),Y=b(((t,n)=>f(void 0,void 0,void 0,(function*(){var r,i,o;const l=null==n?void 0:n.validator,s=null===(r=null==n?void 0:n.shouldTouchField)||void 0===r||r,a=l||(null===(o=null===(i=$.current)||void 0===i?void 0:i[t])||void 0===o?void 0:o.validationHandler);if(!a)return E(`Field: ${t} must have a validator prop set or ' +\n 'an inline validator must be passed as a second argument in order to use validateField.`),null;const u=yield _(a,t),d=s?F(M,t,!0):M,c=u?F(D,t,u):D;return e.set({touched:d,errors:c}),u})))),_=b(((e,t)=>f(void 0,void 0,void 0,(function*(){const n=g(I,t),r=yield e(n);return r||null})))),q=b((e=>f(void 0,void 0,void 0,(function*(){for(const[t,n]of p($.current)){const r=(null==n?void 0:n.validationHandler)?yield _(null==n?void 0:n.validationHandler,t):null;r&&(e=F(e,t,r))}return e})))),G=b((t=>f(void 0,void 0,void 0,(function*(){var n;const r=null===(n=null==t?void 0:t.shouldTouchAllFields)||void 0===n||n,i=yield z(I,{updateStore:!1});return e.set({touched:r?V(I):M,errors:i}),i})))),J=b(((t,n,r)=>{var i;const o=null!=(null==r?void 0:r.shouldValidate)?r.shouldValidate:d,l=null!==(i=null==r?void 0:r.validationEvent)&&void 0!==i?i:"all",s=F(I,t,n);if(o)switch(l){case"all":case"onChange":e.set({values:s}),z(s);break;case"onBlur":e.set({values:s})}else e.set({values:s})})),K=r((t=>{const n=S(I,t);e.set({values:n}),d&&z(n)}),[]),Q=r(((t,n)=>{const r=F(D,t,n);e.set({errors:r})}),[]),U=r((t=>{e.set({errors:S(D,t)})}),[]),X=b(((t,n,r)=>f(void 0,void 0,void 0,(function*(){const i=F(M,t,n),o=(null==r?void 0:r.validationEvent)||"all",l="onBlur"===o||"all"===o||u?yield z(I,{updateStore:!1}):D;e.set({touched:i,errors:l})})))),Z=r((t=>{j(M,t)||u&&e.set({touched:t})}),[]),ee=b(((e,t)=>{let n;const r=e.target.name,{value:i,type:o}=e.target,{options:l,multiple:s}=e.target,{checked:a}=e.target;switch(!0){case/number|range/.test(o):{const e=parseFloat(i);n=isNaN(e)?"":e}break;case/checkbox/.test(o)||a:n=((e,t,n)=>{if("boolean"==typeof e)return Boolean(t);let r=[],i=!1,o=-1;if(Array.isArray(e))r=e,o=e.indexOf(n),i=o>=0;else if(!n||"true"==n||"false"==n)return Boolean(t);return t&&n&&!i?[...r,n]:i?[...r.slice(0,o),r.slice(o+1)]:r})(g(I,r),a,i);break;case l&&s:n=(e=>Array.from(e).filter((e=>e.selected)).map((e=>e.value)))(l);break;default:n=i}J(r,n,t)})),te=b(((e,t)=>{const n=e.target.name;X(n,!0,t)})),ne=b((t=>{e.set(Object.assign(Object.assign({},A(x.current)),t&&{values:S(I,t)}))})),re={setFieldValue:J,setValues:K,setFieldError:Q,setErrors:U,setFieldTouched:X,setTouched:Z,resetForm:ne},ie=()=>f(void 0,void 0,void 0,(function*(){if(e.set({isSubmitting:!0,isValidating:!!c}),c){const t=yield z(I,{updateStore:!1});if(h(t).length>0){const n=V(t);return e.set({submitCount:m.submitCount+1,isSubmitting:!1,isValidating:!1,touched:n,errors:Object.assign(Object.assign({},D),t)})}e.set({isValidating:!1})}yield null==C?void 0:C(I,re),e.set({submitCount:m.submitCount+1,isSubmitting:!1})})),oe=b((e=>f(void 0,void 0,void 0,(function*(){if(e.persist(),e.preventDefault(),"undefined"!=typeof document){const e=(e=>{if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}})();null!==e&&e instanceof HTMLButtonElement&&!e.type&&E("You submitted a Formularity form using a button without a 'type' attribute. Most browsers default button elements to 'type=\"submit\"'. If this is not a submit button, please add 'type=\"button\".")}ie()})))),le=b((e=>f(void 0,void 0,void 0,(function*(){e.preventDefault(),e.stopPropagation(),s&&(yield s(I,re)),ne()})))),se=null==(ae=i)||("object"==typeof ae||"string"==typeof ae||Array.isArray(ae))&&0===h(ae).length?x.current:H.current;var ae;const ue=!j(I,se),de=!ue,ce=(fe=se,y(ve=I).filter((e=>{const t=g(ve,e),n=g(fe,e);return!j(t,n)})));var ve,fe;const be=0===y(D).length,he=y(M).length>0,me=((e,t)=>{const n=e=>{let t=0;for(const r in e)if(Array.isArray(e[r]))for(const i of e[r])"object"==typeof i?t+=n(i):t++;else"object"==typeof e[r]?t+=1+n(e[r]):t++;return t};return n(e)===n(t)})(I,M),pe={Field:B,FieldList:P,SubmitButton:N,ResetButton:T};return Object.assign(Object.assign(Object.assign({},m),{values:I,errors:D,touched:M,initialValues:x.current,registerField:L,unregisterField:W,setFieldValue:J,setValues:K,setFieldError:Q,setErrors:U,setFieldTouched:X,setTouched:Z,handleChange:ee,handleBlur:te,submitForm:ie,handleSubmit:oe,resetForm:ne,handleReset:le,validateForm:G,validateField:Y,isDirty:ue,isPristine:de,isValid:be,isEditing:n,dirtyFields:ce,isFormTouched:he,areAllFieldsTouched:me}),pe)},H=e=>{var{children:t}=e,n=v(e,["children"]);const r=C();return c("form",Object.assign({onSubmit:null==r?void 0:r.handleSubmit,onReset:null==r?void 0:r.handleReset},n,{children:t}))},I=e=>{var{children:t,useFormComponent:n=!0}=e,r=v(e,["children","useFormComponent"]);const i=x(Object.assign({},r)),o=t(i);return c(k.Provider,{value:i,children:n?c(H,{children:o}):o})};export{H as Form,I as Formularity,T as ResetButton,N as SubmitButton,w as createFormStore,g as getViaPath,F as setViaPath,x as useFormularity};
//# sourceMappingURL=index.js.map