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