(this["webpackJsonpmaterial-app"]=this["webpackJsonpmaterial-app"]||[]).push([[17],{3819:function(e,a,t){"use strict";t.r(a);var r=t(5),s=t(1),i=t.n(s),n=t(52),l=t(11),o=t(146),c=t(15),m=t(2636),d=t(3689),u=t(3710),j=t(2530),b=t(180),h=t(128),p=t(3711),x=t(179),O=t(2536),f=t(2535),w=t(3691),y=t(3715),v=t(48),N=t(0);const g=Object(r.e)(m.a)(v.c),B=Object(r.e)(d.a)(v.c),P=Object(r.e)(u.a)(v.c),F=Object(r.e)(j.a)(v.c),q=Object(r.e)(b.a)(v.c),C=Object(r.e)(h.a)(v.c),S={firstName:"Lucy",lastName:"Lavender",email:"lucylavender@gmail.com",password:"mypassword123",confirmPassword:"mypassword123"},k=n.a().shape({firstName:n.c().required("Required"),lastName:n.c().required("Required"),email:n.c().email().required("Required"),password:n.c().min(12,"Must be at least 12 characters").max(255).required("Required"),confirmPassword:n.c().when("password",{is:e=>!!(e&&e.length>0),then:n.c().oneOf([n.b("password")],"Both password need to be the same")})});function T(){return Object(N.jsx)(o.a,{initialValues:S,validationSchema:k,onSubmit:async(e,a)=>{let{resetForm:t,setErrors:r,setStatus:s,setSubmitting:i}=a;try{await(n=1500,new Promise((e=>setTimeout(e,n)))),t(),s({sent:!0}),i(!1)}catch(l){s({sent:!1}),r({submit:l.message}),i(!1)}var n},children:e=>{let{errors:a,handleBlur:t,handleChange:r,handleSubmit:s,isSubmitting:i,touched:n,values:l,status:o}=e;return Object(N.jsx)(P,{mb:6,children:Object(N.jsxs)(p.a,{children:[Object(N.jsx)(x.a,{variant:"h6",gutterBottom:!0,children:"Formik"}),Object(N.jsx)(x.a,{variant:"body2",gutterBottom:!0,children:"Formik example with Yup validation"}),o&&o.sent&&Object(N.jsx)(F,{severity:"success",my:3,children:"[DEMO] Your data has been submitted successfully!"}),i?Object(N.jsx)(O.a,{display:"flex",justifyContent:"center",my:6,children:Object(N.jsx)(f.a,{})}):Object(N.jsxs)("form",{onSubmit:s,children:[Object(N.jsxs)(w.a,{container:!0,spacing:6,children:[Object(N.jsx)(w.a,{item:!0,md:6,children:Object(N.jsx)(q,{name:"firstName",label:"First Name",value:l.firstName,error:Boolean(n.firstName&&a.firstName),fullWidth:!0,helperText:n.firstName&&a.firstName,onBlur:t,onChange:r,variant:"outlined",my:2})}),Object(N.jsx)(w.a,{item:!0,md:6,children:Object(N.jsx)(q,{name:"lastName",label:"Last Name",value:l.lastName,error:Boolean(n.lastName&&a.lastName),fullWidth:!0,helperText:n.lastName&&a.lastName,onBlur:t,onChange:r,variant:"outlined",my:2})})]}),Object(N.jsx)(q,{name:"email",label:"Email",value:l.email,error:Boolean(n.email&&a.email),fullWidth:!0,helperText:n.email&&a.email,onBlur:t,onChange:r,type:"email",variant:"outlined",my:2}),Object(N.jsx)(q,{name:"password",label:"Password",value:l.password,error:Boolean(n.password&&a.password),fullWidth:!0,helperText:n.password&&a.password,onBlur:t,onChange:r,type:"password",variant:"outlined",my:2}),Object(N.jsx)(q,{name:"confirmPassword",label:"Confirm password",value:l.confirmPassword,error:Boolean(n.confirmPassword&&a.confirmPassword),fullWidth:!0,helperText:n.confirmPassword&&a.confirmPassword,onBlur:t,onChange:r,type:"password",variant:"outlined",my:2}),Object(N.jsx)(C,{type:"submit",variant:"contained",color:"primary",mt:3,children:"Save changes"})]})]})})}})}a.default=function(){return Object(N.jsxs)(i.a.Fragment,{children:[Object(N.jsx)(c.a,{title:"Formik"}),Object(N.jsx)(x.a,{variant:"h3",gutterBottom:!0,display:"inline",children:"Formik"}),Object(N.jsxs)(B,{"aria-label":"Breadcrumb",mt:2,children:[Object(N.jsx)(y.a,{component:l.c,to:"/",children:"Dashboard"}),Object(N.jsx)(y.a,{component:l.c,to:"/",children:"Forms"}),Object(N.jsx)(x.a,{children:"Formik"})]}),Object(N.jsx)(g,{my:6}),Object(N.jsx)(T,{})]})}}}]);
//# sourceMappingURL=17.3fb42c8a.chunk.js.map