(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4266],{93102:function(e,l,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/poc/form-experiments/FormikField",function(){return i(82252)}])},95813:function(e,l,i){"use strict";i.d(l,{S:function(){return n}});let n={input:"default text",radio:"2",checkbox:!0,switch:!0,select:"2",multiselect:["2"],tags:["1"],date:"",number:12}},82252:function(e,l,i){"use strict";i.r(l),i.d(l,{FormikFieldPOC:function(){return h}});var n=i(24246),s=i(13577),r=i(3124),t=i.n(r),o=i(34090),d=i(95813);let{Text:a,Title:c}=s.AntTypography,h=()=>(0,n.jsx)(o.J9,{initialValues:{...d.S},onSubmit:console.log,children:e=>{let{values:l}=e;return(0,n.jsxs)(s.bue,{children:[(0,n.jsxs)(s.JGx,{span:12,children:[(0,n.jsx)(c,{level:2,children:"<Formik> + <Field>"}),(0,n.jsxs)("div",{className:"mb-4",children:[(0,n.jsx)(s.j8w,{color:"red",children:"non functional"}),(0,n.jsx)(s.j8w,{color:"red",children:"high effort"})]}),(0,n.jsx)(o.l0,{children:(0,n.jsxs)(s.jqI,{vertical:!0,gap:16,children:[(0,n.jsxs)("div",{children:[(0,n.jsx)("label",{htmlFor:"input",children:"Input"}),(0,n.jsx)("div",{children:(0,n.jsx)(o.gN,{as:s.uFc,id:"input",name:"input",type:"text"})})]}),(0,n.jsx)("div",{children:(0,n.jsxs)(o.gN,{as:s.y02.Group,name:"radio",children:[(0,n.jsx)(s.y02,{value:"1",children:"Radio 1"}),(0,n.jsx)(s.y02,{value:"2",children:"Radio 2"})]})}),(0,n.jsxs)("div",{children:[(0,n.jsx)(o.gN,{as:s.E_O,defaultChecked:l.checkbox,name:"checkbox",children:"Checkbox"}),(0,n.jsx)(a,{type:"warning",children:"Requires additional logic to handle default state"})]}),(0,n.jsxs)("div",{children:[(0,n.jsx)("label",{htmlFor:"switch",children:"Switch"}),(0,n.jsx)("div",{children:(0,n.jsx)(o.gN,{as:s.rAg,id:"switch",name:"switch"})}),(0,n.jsxs)(a,{type:"danger",children:["Ant Switch's onChange is too different from Formik, requires to be fully controlled. This will not work with"," ","<Field>"," alone"]})]}),(0,n.jsxs)("div",{children:[(0,n.jsx)("label",{htmlFor:"select",children:"Select"}),(0,n.jsx)("div",{children:(0,n.jsx)(o.gN,{as:s.WPr,allowClear:!0,id:"select",name:"select",className:"w-full",status:"error",options:[{value:"1",label:"Option 1"},{value:"2",label:"Option 2"}]})}),(0,n.jsxs)(a,{type:"danger",children:["Ant Select's onChange is too different from Formik, requires to be fully controlled. This will not work with"," ","<Field>"," alone"]})]}),(0,n.jsxs)("div",{children:[(0,n.jsx)("label",{htmlFor:"multiselect",children:"Multiselect"}),(0,n.jsx)("div",{children:(0,n.jsx)(o.gN,{as:s.WPr,mode:"multiple",allowClear:!0,id:"multiselect",name:"multiselect",className:"w-full",status:"error",options:[{value:"1",label:"Option 1"},{value:"2",label:"Option 2"}]})}),(0,n.jsxs)(a,{type:"danger",children:["Ant Select's onChange is too different from Formik, requires to be fully controlled. This will not work with"," ","<Field>"," alone"]})]}),(0,n.jsxs)("div",{children:[(0,n.jsx)("label",{htmlFor:"multiselect",children:"Tags"}),(0,n.jsx)("div",{children:(0,n.jsx)(o.gN,{as:s.WPr,mode:"tags",allowClear:!0,id:"tags",name:"tags",className:"w-full",status:"error",options:[{value:"1",label:"Option 1"},{value:"2",label:"Option 2"}]})}),(0,n.jsxs)(a,{type:"danger",children:["Ant Select's onChange is too different from Formik, requires to be fully controlled. This will not work with"," ","<Field>"," alone"]})]}),(0,n.jsxs)("div",{children:[(0,n.jsx)("label",{htmlFor:"date",children:"Date"}),(0,n.jsx)("div",{children:(0,n.jsx)(o.gN,{as:s.cv2,id:"date",name:"date",status:"error"})}),(0,n.jsxs)(a,{type:"danger",children:["Ant DatePicker's onChange is different from Formik, requires to be fully controlled. This will not work with"," ","<Field>"," alone"]})]}),(0,n.jsxs)("div",{children:[(0,n.jsx)("label",{htmlFor:"number",children:"Number"}),(0,n.jsx)("div",{children:(0,n.jsx)(o.gN,{as:s.W7D,id:"number",name:"number",status:"error"})}),(0,n.jsxs)(a,{type:"danger",children:["Ant InputNumber's onChange is different from Formik, requires to be fully controlled. This will not work with"," ","<Field>"," alone"]})]})]})})]}),(0,n.jsxs)(s.JGx,{span:8,offset:4,children:[(0,n.jsx)(c,{level:4,children:"Controlled Values"}),(0,n.jsx)(s.V4A,{style:{backgroundColor:t().FIDESUI_MINOS,color:t().FIDESUI_CORINTH},children:(0,n.jsx)("pre",{children:(0,n.jsxs)("code",{children:["{\n",Object.keys(l).map(e=>"  ".concat(e,": ").concat(l[e],"\n")),"}"]})})})]})]})}});l.default=h}},function(e){e.O(0,[2888,9774,179],function(){return e(e.s=93102)}),_N_E=e.O()}]);