formik
Version:
Forms in React, without tears
3 lines (2 loc) • 16 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-fast-compare"),require("deepmerge"),require("lodash-es/clone"),require("lodash-es/toPath"),require("tiny-warning"),require("hoist-non-react-statics"),require("lodash-es/cloneDeep")):"function"==typeof define&&define.amd?define(["exports","react","react-fast-compare","deepmerge","lodash-es/clone","lodash-es/toPath","tiny-warning","hoist-non-react-statics","lodash-es/cloneDeep"],t):(e=e||self,t(e.formik={},e.React,e.isEqual,e.deepmerge,e.clone,e.toPath,e.invariant,e.hoistNonReactStatics,e.cloneDeep))}(this,function(e,t,r,n,a,s,i,l,o){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r,n=n&&n.hasOwnProperty("default")?n.default:n,a=a&&a.hasOwnProperty("default")?a.default:a,s=s&&s.hasOwnProperty("default")?s.default:s,i=i&&i.hasOwnProperty("default")?i.default:i,l=l&&l.hasOwnProperty("default")?l.default:l,o=o&&o.hasOwnProperty("default")?o.default:o;const u=e=>"function"==typeof e,c=e=>null!==e&&"object"==typeof e,d=e=>String(Math.floor(Number(e)))===e,h=e=>"[object String]"===Object.prototype.toString.call(e),p=e=>0===t.Children.count(e),m=e=>c(e)&&u(e.then);function f(e){let t=!1;const r=new Promise((r,n)=>{e.then(e=>t?n({isCanceled:!0}):r(e),e=>n(t?{isCanceled:!0}:e))});return[r,function(){t=!0}]}function v(e,t,r,n=0){const a=s(t);for(;e&&n<a.length;)e=e[a[n++]];return void 0===e?r:e}function y(e,t,r){let n=a(e),i=n,l=0,o=s(t);for(;l<o.length-1;l++){const t=o[l];let r=v(e,o.slice(0,l+1));if(r)i=i[t]=a(r);else{const e=o[l+1];i=i[t]=d(e)&&Number(e)>=0?[]:{}}}return(0===l?e:i)[o[l]]===r?e:(void 0===r?delete i[o[l]]:i[o[l]]=r,0===l&&void 0===r&&delete n[o[l]],n)}function E(e,t,r=new WeakMap,n={}){for(let a of Object.keys(e)){const s=e[a];c(s)?r.get(s)||(r.set(s,!0),n[a]=Array.isArray(s)?[]:{},E(s,t,r,n[a])):n[a]=t}return n}const S=t.createContext({}),T=S.Provider,b=S.Consumer;function g(){return t.useContext(S)}function F(e,t){switch(t.type){case"SET_VALUES":return{...e,values:t.payload};case"SET_TOUCHED":return{...e,touched:t.payload};case"SET_ERRORS":return{...e,errors:t.payload};case"SET_STATUS":return{...e,status:t.payload};case"SET_ISSUBMITTING":return{...e,isSubmitting:t.payload};case"SET_ISVALIDATING":return{...e,isValidating:t.payload};case"SET_FIELD_VALUE":return{...e,values:y(e.values,t.payload.field,t.payload.value)};case"SET_FIELD_TOUCHED":return{...e,touched:y(e.touched,t.payload.field,t.payload.value)};case"SET_FIELD_ERROR":return{...e,errors:y(e.errors,t.payload.field,t.payload.value)};case"RESET_FORM":case"SET_FORMIK_STATE":return{...e,...t.payload};case"SUBMIT_ATTEMPT":return{...e,touched:E(e.values,!0),isSubmitting:!0,submitCount:e.submitCount+1};case"SUBMIT_FAILURE":case"SUBMIT_SUCCESS":return{...e,isSubmitting:!1};default:return e}}function C({validateOnChange:e=!0,validateOnBlur:a=!0,isInitialValid:s,enableReinitialize:i=!1,onSubmit:l,...o}){const c={validateOnChange:e,validateOnBlur:a,onSubmit:l,...o},d=t.useRef(c.initialValues),p=t.useRef(c.initialErrors||{}),E=t.useRef(c.initialTouched||{}),S=t.useRef(c.initialStatus),T=t.useRef(!1),b=t.useRef({});t.useEffect(()=>{},[s]),t.useEffect(()=>(T.current=!0,()=>{T.current=!1}),[]);const[g,C]=t.useReducer(F,{values:c.initialValues,errors:c.initialErrors||{},touched:c.initialTouched||{},status:c.initialStatus,isSubmitting:!1,isValidating:!1,submitCount:0}),_=function(e){const r=t.useRef(e);return t.useEffect(()=>{r.current=e},[e]),r.current}(g),I=t.useCallback((e,t)=>new Promise(r=>{const n=c.validate(e,t);void 0===n?r({}):m(n)?n.then(()=>{r({})},e=>{r(e)}):r(n)}),[c.validate]),P=t.useCallback((e,t)=>new Promise(r=>{const n=c.validationSchema,a=u(n)?n(t):n;let s=t&&a.validateAt?a.validateAt(t,e):O(e,a);s.then(()=>{r({})},e=>{r(k(e))})}),[c.validationSchema]),A=t.useCallback((e,t)=>new Promise(r=>r(b.current[e].validate(t))).then(e=>e,e=>e),[b]),D=t.useCallback(e=>{if(null===b.current)return Promise.resolve({});const t=Object.keys(b.current).filter(e=>null!==b.current&&b.current[e]&&b.current[e].validate&&u(b.current[e].validate)),r=t.length>0?t.map(t=>A(t,v(e,t))):[Promise.resolve("DO_NOT_DELETE_YOU_WILL_BE_FIRED")];return Promise.all(r).then(e=>e.reduce((e,r,n)=>"DO_NOT_DELETE_YOU_WILL_BE_FIRED"===r?e:(r&&(e=y(e,t[n],r)),e),{}))},[A,b]),U=t.useCallback((e=g.values)=>c.validationSchema||c.validate||b.current&&Object.keys(b.current).filter(e=>!!b.current[e].validate).length>0?(C({type:"SET_ISVALIDATING",payload:!0}),Promise.all([D(e),c.validationSchema?P(e):{},c.validate?I(e):{}]).then(([e,t,a])=>{const s=n.all([e,t,a],{arrayMerge:R});return r(g.errors,s)||C({type:"SET_ERRORS",payload:s}),C({type:"SET_ISVALIDATING",payload:!1}),s})):Promise.resolve({}),[c.validate,c.validationSchema,D,I,P,g.errors,g.values,b]);t.useEffect(()=>{if(_.values!==g.values&&e&&!g.isSubmitting&&null!=T.current){const[e,t]=f(U());return e.then(e=>e).catch(e=>e),t}},[_.values,g.isSubmitting,g.values,U,e,T]),t.useEffect(()=>{if(_.touched!==g.touched&&a&&!g.isSubmitting&&null!=T.current){const[e,t]=f(U());return e.then(e=>e).catch(e=>e),t}},[_.touched,g.isSubmitting,g.touched,U,a,T]);const L=t.useCallback(e=>{const t=e&&e.values?e.values:d.current?d.current:c.initialValues,r=e&&e.errors?e.values:p.current?p.current:c.initialErrors||{},n=e&&e.touched?e.values:E.current?E.current:c.initialTouched||{},a=e&&e.status?e.status:S.current?S.current:c.initialStatus;d.current=t,p.current=r,E.current=n,S.current=a,C({type:"RESET_FORM",payload:{isSubmitting:!!e&&!!e.isSubmitting,errors:r,touched:n,status:a,values:t,isValidating:!!e&&!!e.isValidating,submitCount:e&&e.submitCount&&"number"==typeof e.submitCount?e.submitCount:0}})},[c.initialErrors,c.initialStatus,c.initialTouched,c.initialValues]);t.useEffect(()=>{i&&T.current&&!r(d.current,c.initialValues)&&L()},[i,c.initialValues,L]);const V=t.useCallback(e=>{if(null!==b.current&&b.current[e]&&b.current[e].validate&&u(b.current[e].validate)){const t=v(g.values,e),r=b.current[e].validate(t);return m(r)?(C({type:"SET_ISVALIDATING",payload:!0}),r.then(e=>e,e=>e).then(t=>{C({type:"SET_FIELD_ERROR",payload:{field:e,value:t}}),C({type:"SET_ISVALIDATING",payload:!1})})):(C({type:"SET_FIELD_ERROR",payload:{field:e,value:r}}),Promise.resolve(r))}return Promise.resolve()},[g.values,b]),M=t.useCallback((e,{validate:t})=>{null!==b.current&&(b.current[e]={validate:t})},[b]),w=t.useCallback(e=>{null!==b.current&&delete b.current[e]},[b]),N=t.useCallback(e=>{if(h(e))return r=>t(r,e);function t(e,t){e.persist&&e.persist();const{name:r,id:n,outerHTML:a}=e.target,s=t||(r||n);C({type:"SET_FIELD_TOUCHED",payload:{field:s,value:!0}})}t(e)},[]),j=t.useCallback(e=>{if(h(e))return r=>t(r,e);function t(e,t){let r,n=t,a=e;if(!h(e)){e.persist&&e.persist();const{type:s,name:i,id:l,value:o,checked:u,outerHTML:c}=e.target;n=t||(i||l),a=/number|range/.test(s)?(r=parseFloat(o),isNaN(r)?"":r):/checkbox/.test(s)?u:o}n&&C({type:"SET_FIELD_VALUE",payload:{field:n,value:a}})}t(e)},[]),B=t.useCallback(e=>{C({type:"SET_TOUCHED",payload:e})},[]),x=t.useCallback(e=>{C({type:"SET_ERRORS",payload:e})},[]),q=t.useCallback(e=>{C({type:"SET_VALUES",payload:e})},[]),G=t.useCallback((e,t)=>{C({type:"SET_FIELD_ERROR",payload:{field:e,value:t}})},[]),H=t.useCallback((e,t)=>{C({type:"SET_FIELD_VALUE",payload:{field:e,value:t}})},[]),W=t.useCallback((e,t=!0)=>{C({type:"SET_FIELD_TOUCHED",payload:{field:e,value:t}})},[]);function K(e){u(e)?C({type:"SET_FORMIK_STATE",payload:e(g)}):C({type:"SET_FORMIK_STATE",payload:e})}const Y=t.useCallback(e=>{C({type:"SET_STATUS",payload:e})},[]),$=t.useCallback(e=>{C({type:"SET_ISSUBMITTING",payload:e})},[]),z={resetForm:L,validateForm:U,validateField:V,setErrors:x,setFieldError:G,setFieldTouched:W,setFieldValue:H,setStatus:Y,setSubmitting:$,setTouched:B,setValues:q,setFormikState:K},J=t.useCallback(()=>l(g.values,z),[z,l,g.values]),Q=t.useCallback(()=>(C({type:"SUBMIT_ATTEMPT"}),U().then(e=>{const t=0===Object.keys(e).length;t?Promise.resolve(J()).then(()=>{T.current&&C({type:"SUBMIT_SUCCESS"})}).catch(e=>{T.current&&C({type:"SUBMIT_FAILURE"})}):T.current&&C({type:"SUBMIT_FAILURE"})})),[J,U]),X=t.useCallback(e=>{e&&e.preventDefault&&u(e.preventDefault)&&e.preventDefault(),e&&e.stopPropagation&&u(e.stopPropagation)&&e.stopPropagation(),Q()},[Q]),Z=t.useCallback(()=>{if(c.onReset){const e=c.onReset(g.values,z);m(e)?e.then(L):L()}else L()},[z,c.onReset,L,g.values]),ee=t.useCallback(e=>({value:v(g.values,e),error:v(g.errors,e),touched:!!v(g.touched,e),initialValue:v(d.current,e),initialTouched:!!v(E.current,e),initialError:v(p.current,e)}),[g.errors,g.touched,g.values]),te=t.useCallback((e,t)=>{const r={name:e,value:!t||"radio"!==t&&"checkbox"!==t?v(g.values,e):void 0,onChange:j,onBlur:N};return[r,ee(e)]},[ee,N,j,g.values]),re=t.useMemo(()=>!r(d.current,g.values),[g.values]),ne=t.useMemo(()=>void 0!==s?re?g.errors&&0===Object.keys(g.errors).length:!1!==s&&u(s)?s(c):s:g.errors&&0===Object.keys(g.errors).length,[s,re,g.errors,c]),ae={...g,initialValues:d.current,initialErrors:p.current,initialTouched:E.current,initialStatus:S.current,handleBlur:N,handleChange:j,handleReset:Z,handleSubmit:X,resetForm:L,setErrors:x,setFormikState:K,setFieldTouched:W,setFieldValue:H,setFieldError:G,setStatus:Y,setSubmitting:$,setTouched:B,setValues:q,submitForm:Q,validateForm:U,validateField:V,isValid:ne,dirty:re,unregisterField:w,registerField:M,getFieldProps:te,validateOnBlur:a,validateOnChange:e};return ae}function _(e){const r=C(e),{component:n,children:a,render:s}=e;return t.createElement(T,{value:r},n?t.createElement(n,r):s?s(r):a?u(a)?a(r):p(a)?null:t.Children.only(a):null)}function k(e){let t={};if(0===e.inner.length)return y(t,e.path,e.message);for(let r of e.inner)t[r.path]||(t=y(t,r.path,r.message));return t}function O(e,t,r=!1,n={}){let a={};for(let t in e)if(e.hasOwnProperty(t)){const r=String(t);a[r]=""!==e[r]?e[r]:void 0}return t[r?"validateSync":"validate"](a,{abortEarly:!1,context:n})}function R(e,t,r){const a=e.slice();return t.forEach(function(t,s){if(void 0===a[s]){const e=!1!==r.clone,i=e&&r.isMergeableObject(t);a[s]=i?n(Array.isArray(t)?[]:{},t,r):t}else r.isMergeableObject(t)?a[s]=n(e[s],t,r):-1===e.indexOf(t)&&a.push(t)}),a}function I({validate:e,name:r,render:n,children:a,as:s="input",component:i,...l}){const{...o}=g();t.useEffect(()=>{},[]),t.useEffect(()=>(o.registerField(r,{validate:e}),()=>{o.unregisterField(r)}),[o,r,e]);const[c,d]=o.getFieldProps(r,l.type),h={field:c,form:o};if(n)return n(h);if(u(a))return a({...h,meta:d});if(i){if("string"==typeof i){const{innerRef:e,...r}=l;return t.createElement(i,{ref:e,...c,...r},a)}return t.createElement(i,{field:c,form:o,...l},a)}if("string"==typeof s){const{innerRef:e,...r}=l;return t.createElement(s,{ref:e,...c,...r},a)}return t.createElement(s,{...c,...l},a)}const P=I;function A(e){const{handleReset:r,handleSubmit:n}=g();return t.createElement("form",Object.assign({onSubmit:n,onReset:r},e))}function D(e){const r=r=>t.createElement(b,null,n=>t.createElement(e,Object.assign({},r,{formik:n}))),n=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r.WrappedComponent=e,r.displayName=`FormikConnect(${n})`,l(r,e)}A.displayName="Form";const U=(e,t,r)=>{const n=[...e||[]],a=n[t];return n.splice(t,1),n.splice(r,0,a),n},L=(e,t,r)=>{const n=[...e||[]],a=n[t];return n[t]=n[r],n[r]=a,n},V=(e,t,r)=>{const n=[...e||[]];return n.splice(t,0,r),n},M=(e,t,r)=>{const n=[...e||[]];return n[t]=r,n};class w extends t.Component{constructor(e){super(e),this.updateArrayField=((e,t,r)=>{const{name:n,validateOnChange:a,formik:{setFormikState:s,validateForm:i}}=this.props;s(a=>{let s="function"==typeof r?r:e,i="function"==typeof t?t:e;return{...a,values:y(a.values,n,e(v(a.values,n))),errors:r?y(a.errors,n,s(v(a.errors,n))):a.errors,touched:t?y(a.touched,n,i(v(a.touched,n))):a.touched}},()=>{a&&i()})}),this.push=(e=>this.updateArrayField(t=>[...t||[],o(e)],!1,!1)),this.handlePush=(e=>()=>this.push(e)),this.swap=((e,t)=>this.updateArrayField(r=>L(r,e,t),!0,!0)),this.handleSwap=((e,t)=>()=>this.swap(e,t)),this.move=((e,t)=>this.updateArrayField(r=>U(r,e,t),!0,!0)),this.handleMove=((e,t)=>()=>this.move(e,t)),this.insert=((e,t)=>this.updateArrayField(r=>V(r,e,t),t=>V(t,e,null),t=>V(t,e,null))),this.handleInsert=((e,t)=>()=>this.insert(e,t)),this.replace=((e,t)=>this.updateArrayField(r=>M(r,e,t),!1,!1)),this.handleReplace=((e,t)=>()=>this.replace(e,t)),this.unshift=(e=>{let t=-1;return this.updateArrayField(r=>{const n=r?[e,...r]:[e];return t<0&&(t=n.length),n},e=>{const r=e?[null,...e]:[null];return t<0&&(t=r.length),r},e=>{const r=e?[null,...e]:[null];return t<0&&(t=r.length),r}),t}),this.handleUnshift=(e=>()=>this.unshift(e)),this.handleRemove=(e=>()=>this.remove(e)),this.handlePop=(()=>()=>this.pop()),this.remove=this.remove.bind(this),this.pop=this.pop.bind(this)}remove(e){let t;return this.updateArrayField(r=>{const n=r?[...r]:[];return t||(t=n[e]),u(n.splice)&&n.splice(e,1),n},!0,!0),t}pop(){let e;return this.updateArrayField(t=>{const r=t;return e||(e=r&&r.pop&&r.pop()),r},!0,!0),e}render(){const e={push:this.push,pop:this.pop,swap:this.swap,move:this.move,insert:this.insert,replace:this.replace,unshift:this.unshift,remove:this.remove,handlePush:this.handlePush,handlePop:this.handlePop,handleSwap:this.handleSwap,handleMove:this.handleMove,handleInsert:this.handleInsert,handleReplace:this.handleReplace,handleUnshift:this.handleUnshift,handleRemove:this.handleRemove},{component:r,render:n,children:a,name:s,formik:{...i}}=this.props,l={...e,form:i,name:s};return r?t.createElement(r,l):n?n(l):a?"function"==typeof a?a(l):p(a)?null:t.Children.only(a):null}}w.defaultProps={validateOnChange:!0};const N=D(w);class j extends t.Component{shouldComponentUpdate(e){return v(this.props.formik.errors,this.props.name)!==v(e.formik.errors,this.props.name)||v(this.props.formik.touched,this.props.name)!==v(e.formik.touched,this.props.name)||Object.keys(this.props).length!==Object.keys(e).length}render(){let{component:e,formik:r,render:n,children:a,name:s,...i}=this.props;const l=v(r.touched,s),o=v(r.errors,s);return l&&o?n?u(n)?n(o):null:a?u(a)?a(o):null:e?t.createElement(e,i,o):o:null}}const B=D(j);e.ErrorMessage=B,e.FastField=P,e.Field=I,e.FieldArray=N,e.Form=A,e.Formik=_,e.FormikConsumer=b,e.FormikProvider=T,e.connect=D,e.getActiveElement=function(e){if(e=e||("undefined"!=typeof document?document:void 0),void 0===e)return null;try{return e.activeElement||e.body}catch(t){return e.body}},e.getIn=v,e.insert=V,e.isEmptyChildren=p,e.isFunction=u,e.isInputEvent=(e=>e&&c(e)&&c(e.target)),e.isInteger=d,e.isNaN=(e=>e!=e),e.isObject=c,e.isPromise=m,e.isString=h,e.makeCancelable=f,e.move=U,e.replace=M,e.setIn=y,e.setNestedObjectValues=E,e.swap=L,e.useField=function(e,t){const r=g();return r.getFieldProps(e,t)},e.useFormik=C,e.useFormikContext=g,e.validateYupSchema=O,e.withFormik=function({mapPropsToValues:e=(e=>{let t={};for(let r in e)e.hasOwnProperty(r)&&"function"!=typeof e[r]&&(t[r]=e[r]);return t}),...r}){return function(n){const a=n.displayName||n.name||n.constructor&&n.constructor.name||"Component";class s extends t.Component{constructor(){super(...arguments),this.validate=(e=>r.validate(e,this.props)),this.validationSchema=(()=>u(r.validationSchema)?r.validationSchema(this.props):r.validationSchema),this.handleSubmit=((e,t)=>r.handleSubmit(e,{...t,props:this.props})),this.renderFormComponent=(e=>t.createElement(n,Object.assign({},this.props,e)))}render(){const{...n}=this.props;return t.createElement(_,Object.assign({},n,r,{validate:r.validate&&this.validate,validationSchema:r.validationSchema&&this.validationSchema,initialValues:e(this.props),initialStatus:r.mapPropsToStatus&&r.mapPropsToStatus(this.props),initialErrors:r.mapPropsToErrors&&r.mapPropsToErrors(this.props),initialTouched:r.mapPropsToTouched&&r.mapPropsToTouched(this.props),onSubmit:this.handleSubmit,render:this.renderFormComponent}))}}return s.displayName=`WithFormik(${a})`,l(s,n)}},e.yupToFormErrors=k});
//# sourceMappingURL=formik.umd.production.js.map