From 80181bb0bc52fbebb8343d1ceec16c0bb6ee5149 Mon Sep 17 00:00:00 2001 From: supnate Date: Thu, 14 Mar 2024 02:59:18 +0000 Subject: [PATCH] deploy: 1966467b069af5fc6d1fa8135b3dce2070efad84 --- .../{index-b4c172e5.js => index-3d6d501d.js} | 2 +- antd/index.html | 4 ++-- .../{index-36c1b24c.js => index-054b5df3.js} | 2 +- formik/index.html | 4 ++-- index.html | 15 ++++++++++++--- 5 files changed, 18 insertions(+), 9 deletions(-) rename antd/assets/{index-b4c172e5.js => index-3d6d501d.js} (99%) rename formik/assets/{index-36c1b24c.js => index-054b5df3.js} (99%) diff --git a/antd/assets/index-b4c172e5.js b/antd/assets/index-3d6d501d.js similarity index 99% rename from antd/assets/index-b4c172e5.js rename to antd/assets/index-3d6d501d.js index 14e5ecd..af0de86 100644 --- a/antd/assets/index-b4c172e5.js +++ b/antd/assets/index-3d6d501d.js @@ -1695,4 +1695,4 @@ export default () => { ); }; -`,u5={basic:UB,"view-edit":r5,"dynamic-fields":qB,"field-condition":GB,"async-data-source":YB,"multiple-columns":KB,"complex-layout":XB,"multiple-sections":QB,"single-field":ZB,validation:JB,coordinated:e5,"form-in-modal":t5,"custom-component":n5,mixed:o5,wizard:a5,simple:i5,"view-mode":l5,"form-list":s5,"form-list-manual":c5},d5=({code:e})=>(s.useEffect(()=>{WB.highlightAll()},[e]),oe("pre",{style:{fontSize:14},children:oe("code",{className:"language-js line-numbers",children:u5[e]||`// Error: code of "${e}" not found`})})),f5=()=>{const[e]=Ue.useForm(),t=gt.useUpdateOnChange(["checkbox"]),n=["Apple","Orange","Banana"],r={columns:1,initialValues:{obj:{input:12}},layout:"horizontal",wrapperProps:{labelCol:{span:8}},fields:[{key:"obj.input",name:["obj","input"],label:"Input",required:!0,tooltip:"Name",help:"Name"},{key:"checkbox",label:"Checkbox",widget:"checkbox",initialValue:!0},{key:"rating",label:"Rating",widget:tB,initialValue:2,condition:()=>gt.getFieldValue("checkbox",r,e)},{key:"switch",label:"Switch",widget:"switch",initialValue:!0},{key:"select",label:"Select",widget:"select",required:!0,options:n},{key:"checkbox-group",label:"Checkbox Group",widget:"checkbox-group",options:n},{key:"radio-group",label:"Radio Group",widget:"radio-group",options:n},{key:"radio-button-group",label:"Radio Button Group",widget:"radio-group",widgetProps:{optionType:"button",buttonStyle:"solid"},options:n},{key:"password",label:"Password",widget:"password",required:!0,rules:[{required:!0,message:"password is required"}]},{key:"textarea",label:"Textarea",widget:"textarea"},{key:"number",label:"Number",widget:"number",fullWidth:!0},{key:"date-picker",label:"Date Picker",widget:"date-picker",fullWidth:!0}]};return it(Ue,{form:e,onValuesChange:t,onFinish:a=>{e.validateFields().then(()=>{console.log("on finish: ",a)})},children:[oe(gt,{meta:r}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},className:"form-footer",children:oe(Rt,{htmlType:"submit",type:"primary",children:"Submit"})})]})},m5=()=>{const e={layout:"horizontal",columns:1,fields:[{key:"username",label:"User Name"},{key:"password",label:"Password",widget:"password"}]},t=s.useCallback(n=>{console.log("Submit: ",n)},[]);return it(Ue,{onFinish:t,layout:"horizontal",children:[oe(gt,{meta:e}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Log in"})})]})},g5={name:{first:"Nate",last:"Wang"},email:"myemail@gmail.com",gender:"Male",dateOfBirth:kn("2100-01-01"),phone:"15988888888",city:"Shanghai",address:"No.1000 Some Road, Zhangjiang Park, Pudong New District"},v5=({value:e})=>e.format("MMM Do YYYY"),p5=()=>{const[e]=Ue.useForm(),[t,n]=s.useState(!0),[r,o]=s.useState(!1),[a,i]=s.useState(g5),l=s.useCallback(u=>{o(!0),setTimeout(()=>{o(!1),i(u),n(!0),e6.success("Infomation updated.")},1500)},[]);return oe("div",{children:it(Ue,{layout:"horizontal",form:e,onFinish:l,style:{width:"800px"},children:[it("h1",{style:{height:"40px",fontSize:"16px",marginTop:"50px",color:"#888"},children:["Personal Infomation",t&&oe(Rt,{type:"link",onClick:()=>n(!1),style:{float:"right"},children:"Edit"})]}),oe(gt,{meta:(()=>({columns:2,disabled:r,viewMode:t,initialValues:a,fields:[{key:"name.first",name:["name","first"],label:"First Name",required:!0,tooltip:"hahahah"},{key:"name.last",label:"Last Name",required:!0},{key:"gender",label:"Gender",widget:"radio-group",options:["Male","Female"]},{key:"dateOfBirth",label:"Date of Birth",widget:"date-picker",viewWidget:v5},{key:"email",label:"Email"},{key:"phone",label:"Phone"},{key:"address",label:"Address",colSpan:2,clear:"left"},{key:"city",label:"City"},{key:"zipCode",label:"Zip Code"}]}))()}),!t&&it(Ue.Item,{className:"form-footer",wrapperCol:{span:16,offset:4},children:[oe(Rt,{htmlType:"submit",type:"primary",disabled:r,loading:r,children:r?"Updating...":"Update"}),oe(Rt,{onClick:()=>{e.resetFields(),n(!0)},style:{marginLeft:"15px"},children:"Cancel"})]})]})})},h5=()=>{const[e]=Ue.useForm(),t=s.useCallback(r=>{console.log("Submit: ",r)},[]);return it(Ue,{form:e,layout:"vertical",onFinish:t,children:[oe(gt,{meta:{columns:4,layout:"vertical",columnGap:12,fields:[{key:"label1",colSpan:4,render(){return oe("fieldset",{children:oe("legend",{children:"Contact Infomation"})})}},{key:"address",label:"Address",colSpan:4},{key:"address2",label:"Address2",colSpan:4},{key:"city",label:"City",colSpan:2},{key:"state",label:"State"},{key:"zip",label:"Zip Code"},{key:"label11",colSpan:4,render(){return oe("fieldset",{children:oe("legend",{children:"Bed & Bath"})})}},{key:"homeType",label:"Home Type",colSpan:2,widget:"select",initialValue:"House",options:["House","Apartment"]},{key:"roomType",label:"Room Type",colSpan:2,widget:"select",initialValue:"Entire home/apt",options:["Entire home/apt","Shared"]},{key:"bedrooms",label:"Bedrooms",colSpan:2,widget:"select",options:["1 Bedroom","2 Bedrooms"]},{key:"bathrooms",label:"Bathrooms",colSpan:2,widget:"select",options:["1 Bathroom","2 Bathrooms"]},{key:"king",label:"King",widget:"number",widgetProps:{style:{width:"100%"}},initialValue:0},{key:"queen",label:"Queen",widget:"number",widgetProps:{style:{width:"100%"}},initialValue:0},{key:"full",label:"Full",widget:"number",widgetProps:{style:{width:"100%"}},initialValue:0},{key:"twin",label:"Twin",widget:"number",widgetProps:{style:{width:"100%"}},initialValue:0}]}}),oe(Ue.Item,{children:oe(Rt,{htmlType:"submit",type:"primary",style:{width:"100%"},children:"Submit"})})]})},y5=()=>{const[e]=Ue.useForm();Ue.useWatch("favoriteFruit",e);const t=r=>{console.log("Submit: ",r)},n={fields:[{key:"favoriteFruit",label:"Favorite Fruit",widget:"radio-group",options:["Apple","Orange","Other"],initialValue:"Apple"}]};return gt.getFieldValue("favoriteFruit",n,e)==="Other"&&n.fields.push({key:"otherFruit",label:"Other"}),it(Ue,{form:e,onFinish:t,children:[oe(gt,{meta:n}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Submit"})})]})},b5=()=>{const[e]=Ue.useForm(),t=Ue.useWatch("favoriteFruit",e);return it(Ue,{form:e,onFinish:o=>{console.log("Submit: ",o)},children:[oe(gt,{meta:{fields:[{key:"favoriteFruit",label:"Favorite Fruit",widget:"radio-group",options:["Apple","Orange","Other"],initialValue:"Apple"},{key:"otherFruit",label:"Other",condition:()=>t==="Other"}]}}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Submit"})})]})},C5=({value:e})=>e.format("MMM Do YYYY"),S5=()=>{const t={columns:2,viewMode:!0,initialValues:{name:{first:"Nate",last:"Wang"},email:"myemail@gmail.com",gender:"Male",dateOfBirth:kn("2100-01-01"),phone:"15988888888",city:"Shanghai",address:"No.1000 Some Road, Zhangjiang Park, Pudong New District"},fields:[{key:"name.first",label:"First Name",tooltip:"First name"},{key:"name.last",label:"Last Name"},{key:"gender",label:"Gender"},{key:"dateOfBirth",label:"Date of Birth",viewWidget:C5},{key:"email",label:"Email"},{key:"phone",label:"Phone"},{key:"address",label:"Address",colSpan:2},{key:"city",label:"City"},{key:"zipCode",label:"Zip Code"}]};return oe("div",{children:it("div",{style:{width:"800px"},children:[oe("h1",{children:"Personal Infomation"}),oe(gt,{meta:t})]})})},Yb={China:["Beijing","Shanghai","Nanjing"],USA:["New York","San Jose","Washton"],France:["Paris","Marseille","Cannes"]},w5=e=>new Promise((t,n)=>{setTimeout(()=>{Yb[e]?t(Yb[e]):n(new Error("Not found"))},1500)}),x5=()=>{const[e]=Ue.useForm(),[t,n]=s.useState({}),r=gt.useUpdateOnChange(["country"]),o=e.getFieldValue("country"),a=o&&!t[o],i={fields:[{key:"country",label:"Country",widget:"select",options:["China","USA","France"],placeholder:"Select country...",initialValue:"China",widgetProps:{onChange:()=>{e.setFieldsValue({city:void 0})}}},{key:"city",label:"City",widget:"select",options:o?t[o]||[]:[],placeholder:a?"Loading...":"Select city...",widgetProps:{loading:a},disabled:a||!o}]},l=s.useCallback(c=>{console.log("Submit: ",c)},[]);return s.useEffect(()=>{o&&!t[o]&&w5(o).then(c=>{n(u=>({...u,[o]:c}))})},[o,n,t]),it(Ue,{form:e,onFinish:l,onValuesChange:r,children:[oe(gt,{meta:i}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Submit"})})]})},$5=()=>{const[e]=Ue.useForm(),[t,n]=s.useState(2),r=s.useCallback(a=>{console.log("Submit: ",a)},[]);return it(Ue,{form:e,layout:"horizontal",onFinish:r,style:{width:"1000px"},children:[oe(gt,{meta:{columns:t,fields:[{key:"columns",label:"Columns",widget:"radio-group",widgetProps:{optionType:"button",buttonStyle:"solid",onChange:a=>n(a.target.value)},options:[1,2,3,4],initialValue:2,help:"Change columns to show layout change"},{key:"input",label:"Input",required:!0,tooltip:"This is the name."},{key:"checkbox",label:"Checkbox",widget:"checkbox",initialValue:!0},{key:"select",label:"Select",widget:"select",options:["Apple","Orange","Banana"]},{key:"password",label:"Password",widget:"password"},{key:"textarea",label:"Textarea",widget:"textarea"},{key:"number",label:"Number",widget:"number"},{key:"date-picker",label:"Date Picker",widget:"date-picker"}]}}),oe(Ue.Item,{className:"form-footer",children:oe(Rt,{htmlType:"submit",type:"primary",children:"Submit"})})]})},E5=()=>{const[e]=Ue.useForm(),t=s.useCallback(i=>{console.log("Submit: ",i)},[]),n={columns:1,fields:[{key:"name.first",label:"First Name",required:!0},{key:"name.last",label:"Last Name",required:!0},{key:"dob",label:"Date of Birth",widget:"date-picker",fullWidth:!0},{key:"email",label:"Email",rules:[{type:"email",message:"Invalid email"}]},{key:"security",label:"Security Question",widget:"select",placeholder:"Select a question...",options:["What's your pet's name?","Your nick name?"]},{key:"answer",label:"Security Answer"},{key:"address",label:"Address"},{key:"city",label:"City"},{key:"phone",label:"phone"}]},r={...n,fields:n.fields.slice(0,3)},o={...n,fields:n.fields.slice(3,6)},a={...n,fields:n.fields.slice(6)};return it(Ue,{layout:"horizontal",form:e,onFinish:t,style:{width:"500px"},children:[it("fieldset",{children:[oe("legend",{children:"Personal Information"}),oe(gt,{meta:r})]}),it("fieldset",{children:[oe("legend",{children:"Account Information"}),oe(gt,{meta:o})]}),it("fieldset",{children:[oe("legend",{children:"Contact Infomation"}),oe(gt,{meta:a})]}),oe(Ue.Item,{className:"form-footer",wrapperCol:{span:16,offset:8},children:oe(Rt,{htmlType:"submit",type:"primary",children:"Submit"})})]})},I5=()=>{const e=s.useCallback(t=>{console.log("Submit: ",t)},[]);return it(Ue,{layout:"inline",onFinish:e,children:[oe(gt,{meta:{fields:[{key:"username",widgetProps:{placeholder:"Username"}}]}}),oe(gt,{meta:{fields:[{key:"password",widget:"password",widgetProps:{placeholder:"Password"}}]}}),oe(Ue.Item,{children:oe(Rt,{htmlType:"submit",type:"primary",children:"Login"})})]})},O5={nate:!0,bood:!0,kevin:!0},P5=()=>{const[e]=Ue.useForm(),t=s.useCallback(r=>{console.log("Submit: ",r)},[]);return it(Ue,{form:e,onFinish:t,children:[oe(gt,{meta:{fields:[{key:"username",label:"Username",extra:"Note: username nate, bood or kevin already exist",hasFeedback:!0,required:!0,rules:[{validator:(r,o,a)=>new Promise((i,l)=>{setTimeout(()=>{O5[o]?l(new Error(`Username "${o}" already exists.`)):i(o)},1e3)})}]},{key:"password",label:"Password",widget:"password",onChange:()=>{e.isFieldTouched("confirmPassword")&&e.validateFields(["confirmPassword"])},rules:[{required:!0,message:"Password is required"}]},{key:"confirmPassword",label:"Confirm Passowrd",widget:"password",required:!0,rules:[{validator:(r,o,a)=>new Promise((i,l)=>{o!==e.getFieldValue("password")?l(new Error("Two passwords are inconsistent.")):i(o)})}]}]}}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Register"})})]})},M5=()=>{const[e]=Ue.useForm(),[t,n]=s.useState(!1),r=s.useCallback(()=>n(!0),[n]),o=s.useCallback(()=>n(!1),[n]),[a,i]=s.useState(!1),l=s.useCallback(u=>{i(!0),console.log("submit: ",u),setTimeout(()=>{i(!1),zb.success({title:"Success",content:"Submit success.",onOk:o})},2e3)},[i,o]);return it("div",{children:[oe(Rt,{type:"primary",onClick:r,children:"New Item"}),oe(zb,{title:"New Item",closable:!a,maskClosable:!a,open:t,destroyOnClose:!0,onOk:()=>e.submit(),onCancel:o,okText:a?"Loading...":"Ok",okButtonProps:{loading:a,disabled:a},cancelButtonProps:{disabled:a},children:oe(Ue,{form:e,onFinish:l,children:oe(gt,{meta:{disabled:a,fields:[{key:"name",label:"Name",required:!0},{key:"desc",label:"Description"}]}})})})]})},R5=()=>{const[e]=Ue.useForm(),t=s.useCallback(r=>{console.log("Submit: ",r)},[]);return it(Ue,{onFinish:t,form:e,children:[oe(gt,{meta:{fields:[{key:"gender",label:"Gender",widget:"radio-group",options:["Male","Female"],onChange:r=>{r.target.value==="Male"?e.setFieldsValue({note:"Hi, man!"}):e.setFieldsValue({note:"Hi, lady!"})}},{key:"note",label:"Note"}]}}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Submit"})})]})},Kb=ju.Option,N5=({value:e,onChange:t})=>e?it(qd,{gutter:10,children:[oe(Co,{span:16,children:oe(vE,{style:{width:"100%"},value:e.price,onChange:n=>t({price:n,currency:e.currency})})}),oe(Co,{span:8,children:it(ju,{value:e.currency,onChange:n=>t({price:e.price,currency:n}),children:[oe(Kb,{value:"RMB",children:"RMB"}),oe(Kb,{value:"USD",children:"USD"})]})})]}):null,F5=e=>it(qd,{gutter:10,children:[it(Co,{span:16,children:[oe($i,{...e})," "]}),it(Co,{span:8,children:[oe(Rt,{children:"Get Captcha"})," "]})]}),T5=()=>{const[e]=Ue.useForm(),t=s.useCallback(r=>{console.log("Submit: ",r)},[]);return it(Ue,{form:e,onFinish:t,style:{width:"500px"},children:[oe(gt,{meta:{fields:[{key:"product",label:"Product"},{key:"_temp_price_currency",label:"Price",widget:N5,initialValue:{price:8,currency:"USD"}},{key:"captcha",label:"Captcha",required:!0,extra:"We must make sure that your are a human.",widget:F5},{key:"shipDate",label:"Ship Date",readOnly:!0,viewWidget:()=>it(qd,{children:[oe(Co,{span:11,children:oe(gt,{meta:{fields:[{key:"startDate",widget:"date-picker",widgetProps:{style:{width:"100%"}},noStyle:!0}]}})}),oe(Co,{span:2,style:{textAlign:"center"},children:"-"}),oe(Co,{span:11,children:oe(gt,{meta:{fields:[{key:"endDate",widget:"date-picker",widgetProps:{style:{width:"100%"}},noStyle:!0}]}})})]})},{key:"note",label:"Note"}]}}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Submit"})})]})},k5=()=>{const[e]=Ue.useForm(),t=s.useCallback(i=>console.log("Submit: ",i),[]),n={fields:[{key:"name.first",label:"First Name",required:!0},{key:"name.last",label:"Last Name",required:!0},{key:"dob",label:"Date of Birth",widget:"date-picker"}]},r={fields:[{key:"email",label:"Email",rules:[{type:"email",message:"Invalid email"}]}]},a=oe(gt,{meta:{fields:[{key:"prefix",options:["+86","+87"],widget:"select",noStyle:!0,widgetProps:{style:{width:70},noStyle:!0}}]}});return it(Ue,{layout:"horizontal",form:e,onFinish:t,style:{width:"500px"},children:[oe(gt,{meta:n}),oe(Ue.Item,{label:"Phone Number",name:"phone",labelCol:{span:8},wrapperCol:{span:16},rules:[{required:!0,message:"Please input your phone number!"}],children:oe($i,{addonBefore:a,style:{width:"100%"}})}),oe(gt,{meta:r}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},className:"form-footer",children:oe(Rt,{htmlType:"submit",type:"primary",children:"Submit"})})]})},_5=({value:e})=>e?e.format("MMM Do YYYY"):"N/A";gt.defineWidget("date-view",_5);const D5={steps:[{title:"Personal Information",formMeta:{columns:2,fields:[{key:"name.first",label:"First Name",initialValue:"Nate",required:!0},{key:"name.last",label:"Last Name",initialValue:"Wang",required:!0},{key:"dob",label:"Date of Birth",widget:"date-picker",viewWidget:"date-view"},{key:"noAccountInfo",label:"No Account Info",widget:"switch",tooltip:"Switch on to remove account step"}]}},{title:"Account Information",formMeta:{columns:2,fields:[{key:"email",label:"Email",clear:"right",rules:[{type:"email",message:"Invalid email"}]},{key:"security",label:"Security Question",widget:"select",placeholder:"Select a question...",options:["What's your pet's name?","Your nick name?"]},{key:"answer",label:"Security Answer"}]}},{title:"Contact Information",formMeta:{columns:2,fields:[{key:"address",label:"Address",colSpan:2},{key:"city",label:"City"},{key:"phone",label:"phone"}]}}]},A5=()=>{const[e]=Ue.useForm(),t=gt.useUpdateOnChange("*"),[n,r]=s.useState(0),o=s.useCallback(()=>{console.log("Submit: ",e.getFieldsValue(!0))},[e]),a=JSON.parse(JSON.stringify(D5));e.getFieldValue("noAccountInfo")&&a.steps.splice(1,1);const i=[];a.steps.forEach((f,g)=>{i.push({key:"review"+g,colSpan:2,render(){return oe("fieldset",{children:oe("legend",{children:f.title})})}},...f.formMeta.fields)}),a.steps.push({key:"review",title:"Review",formMeta:{columns:2,fields:i}});const l=a.steps.length,c=()=>{e.validateFields().then(()=>{r(n+1)})},u=()=>{e.validateFields().then(()=>{r(n-1)})},d=n===l-1;return it(Ue,{layout:"horizontal",form:e,style:{width:"880px"},onFinish:o,onValuesChange:t,children:[oe(RB,{current:n,items:a.steps.map(f=>({key:f.title,title:f.title}))}),oe("div",{style:{background:"#f7f7f7",padding:"20px",margin:"30px 0"},children:oe(gt,{meta:{...a.steps[n].formMeta,viewMode:n===l-1,initialValues:e.getFieldsValue(!0)}})}),it(Ue.Item,{className:"form-footer",style:{textAlign:"right"},children:[n>0&&oe(Rt,{onClick:u,style:{float:"left",marginTop:"5px"},children:"Back"}),oe(Rt,{children:"Cancel"}),"   ",oe(Rt,{type:"primary",onClick:d?()=>e.submit():c,children:d?"Submit":"Next"})]})]})},L5=()=>{const e={layout:"horizontal",columns:1,initialValues:{username:"username",items:[""]},fields:[{key:"username",label:"User Name"},{key:"items",label:"Items",widget:"form-list"},{key:"cities",label:"Cities",widget:"form-list",listItemMeta:{widget:"select",options:["Beijing","Shanghai","Nanjing"]}},{key:"items",label:"Items",widget:"form-list"}]},t=s.useCallback(n=>{console.log("Submit: ",n)},[]);return it(Ue,{onFinish:t,layout:"horizontal",children:[oe(gt,{meta:e}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Log in"})})]})};var z5={icon:{tag:"svg",attrs:{viewBox:"64 64 896 896",focusable:"false"},children:[{tag:"path",attrs:{d:"M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"}},{tag:"path",attrs:{d:"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"}}]},name:"minus-circle",theme:"outlined"};const j5=z5;var B5=function(t,n){return s.createElement(wn,ve({},t,{ref:n,icon:j5}))};const V5=s.forwardRef(B5),H5=()=>{const e={layout:"horizontal",columns:1,initialValues:{username:"username",items:["ddd","xxx"]},fields:[{key:"username",label:"User Name"},{key:"password",label:"Password",widget:"password"},{key:"items",label:"Items",widget:Ue.List,widgetProps:{name:"items"},children:(n,{add:r,remove:o})=>it(eu,{children:[oe(gt,{meta:{fields:n.map((a,i)=>({...a,name:[a.name],style:{marginBottom:"10px"},extraNode:oe(eu,{children:n.length>1?oe(V5,{style:{position:"absolute",right:"-24px",top:"9px",color:"red"},className:"dynamic-delete-button",onClick:()=>o(a.name)}):null})}))}}),oe(Rt,{type:"link",onClick:()=>r(""),children:"+ Add Item"})]})}]},t=s.useCallback(n=>{console.log("Submit: ",n)},[]);return it(Ue,{onFinish:t,layout:"horizontal",children:[oe(gt,{meta:e}),oe(Ue.Item,{wrapperCol:{offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Log in"})})]})},mm={simple:{name:"Simple",component:m5,description:"The most simple usage."},basic:{name:"Basic",component:f5,description:"Basic usage."},"view-mode":{name:"View Mode",component:S5,description:"FormBuilder could also be used as view mode just for displaying information in form layout. It could be used even without Form."},"view-edit":{name:"View / Edit",component:p5,description:"FormBuilder makes it super easy to toggle view/edit mode of a form."},"dynamic-fields":{name:"Dynamic Fields",component:y5,description:"You can dynamically add or remove fields according to the user's input. In this example, if choose other, then a new input appears."},"form-list":{name:"Form List",component:L5,description:"Antd form list support."},"form-list-manual":{name:"Manual Form List",component:H5,description:"Antd form list support."},"field-condition":{name:"Field Condition",component:b5,description:"By condition property, you can control whether to render a field or not. In this example, if choose other, then a new input appears."},"async-data-source":{name:"Async Data Source",component:x5,description:"Some form field widgets may need to load data source if necessary, the sample shows how to do it"},"multiple-columns":{name:"Multiple Columns",component:$5,description:"It's easy to set multiple columns layout for the form. Note it should be able to divide 24"},"complex-layout":{name:"Complex Layout",component:h5,description:"The example shows a complex layout. Similar approach with multiple columns."},"multiple-sections":{name:"Multiple Sections",component:E5,description:"Some times you need to group fields into different fieldset, or need more complex layout. You can use multiple form metas in one form."},"single-field":{name:"Single Field",component:I5,description:"You can use FormBuilder for even a single form field. This example also shows inline layout of the form."},validation:{name:"Validation",component:P5,description:it("span",{children:["You can use rules property to specify how to validate fields. For more information please go to:"," ",oe("a",{href:"https://ant.design/components/form/#Validation-Rules",target:"_blank",rel:"noopener noreferrer",children:"https://ant.design/components/form/#Validation-Rules"})]})},"form-in-modal":{name:"Form in Modal",component:M5,description:"The example shows how to use form in a dialog to call api and show status in dialog buttons."},coordinated:{name:"Coordinated Controls",component:R5,description:"You can set field value according to input of another control by use form.setFieldsValue api."},"custom-component":{name:"Custom Component",component:T5,description:"It's easy to create your own form field component, ether to get new capabilities or even just for layout."},mixed:{name:"Mixed",component:k5,description:"Form builder is designed to not limit original antd form api, so you can use them together."},wizard:{name:"Wizard",component:A5,description:"Wizard is an advanced usage of form builder, you can design your own meta structure to support dynamic wizard."}};function W5(){const e=VB()||"basic",t=()=>{const n=mm[e];if(!n||!n.component)return it("span",{style:{color:"red"},children:['Error: example "',e,'" not found.']});const r=n.component;return it(re.Fragment,{children:[it("h1",{children:[n.name,oe("p",{className:"example-description",children:n.description})]}),oe(r,{})]})};return it("div",{className:"app",children:[it("div",{className:"sider",children:[it("h1",{children:[oe("span",{className:"header-name",children:"@ebay/nice-form-react examples"}),oe("span",{className:"example-title",children:"Ant.Design"})]}),oe("ul",{children:Object.keys(mm).map(n=>oe("li",{children:oe("a",{href:`#${n}`,className:e===n?"active":"",children:mm[n].name})},n))}),it("div",{className:"social",children:[oe("a",{href:"https://github.com/ebay/nice-form-react",children:oe("img",{src:"https://img.shields.io/github/stars/rekit/nice-form-react?style=social",alt:"Github Repo"})}),oe("br",{}),oe("a",{href:"https://github.com/rekit/nice-form-react",children:oe("img",{src:"https://img.shields.io/badge/API-Reference-green",alt:"api reference"})}),oe("br",{}),oe("a",{href:"https://codesandbox.io/s/github/rekit/nice-form-react/tree/master/examples-v4",children:oe("img",{width:"150px",src:"https://codesandbox.io/static/img/play-codesandbox.svg",alt:"codesandbox"})})]})]}),it("div",{className:"example-container",children:[oe("div",{children:t()}),oe("div",{className:"code-container",children:oe(d5,{code:e})})]})]})}bn.addAdapter(Ba);gm.createRoot(document.getElementById("root")).render(oe(re.StrictMode,{children:oe(W5,{})})); +`,u5={basic:UB,"view-edit":r5,"dynamic-fields":qB,"field-condition":GB,"async-data-source":YB,"multiple-columns":KB,"complex-layout":XB,"multiple-sections":QB,"single-field":ZB,validation:JB,coordinated:e5,"form-in-modal":t5,"custom-component":n5,mixed:o5,wizard:a5,simple:i5,"view-mode":l5,"form-list":s5,"form-list-manual":c5},d5=({code:e})=>(s.useEffect(()=>{WB.highlightAll()},[e]),oe("pre",{style:{fontSize:14},children:oe("code",{className:"language-js line-numbers",children:u5[e]||`// Error: code of "${e}" not found`})})),f5=()=>{const[e]=Ue.useForm(),t=gt.useUpdateOnChange(["checkbox"]),n=["Apple","Orange","Banana"],r={columns:1,initialValues:{obj:{input:12}},layout:"horizontal",wrapperProps:{labelCol:{span:8}},fields:[{key:"obj.input",name:["obj","input"],label:"Input",required:!0,tooltip:"Name",help:"Name"},{key:"checkbox",label:"Checkbox",widget:"checkbox",initialValue:!0},{key:"rating",label:"Rating",widget:tB,initialValue:2,condition:()=>gt.getFieldValue("checkbox",r,e)},{key:"switch",label:"Switch",widget:"switch",initialValue:!0},{key:"select",label:"Select",widget:"select",required:!0,options:n},{key:"checkbox-group",label:"Checkbox Group",widget:"checkbox-group",options:n},{key:"radio-group",label:"Radio Group",widget:"radio-group",options:n},{key:"radio-button-group",label:"Radio Button Group",widget:"radio-group",widgetProps:{optionType:"button",buttonStyle:"solid"},options:n},{key:"password",label:"Password",widget:"password",required:!0,rules:[{required:!0,message:"password is required"}]},{key:"textarea",label:"Textarea",widget:"textarea"},{key:"number",label:"Number",widget:"number",fullWidth:!0},{key:"date-picker",label:"Date Picker",widget:"date-picker",fullWidth:!0}]};return it(Ue,{form:e,onValuesChange:t,onFinish:a=>{e.validateFields().then(()=>{console.log("on finish: ",a)})},children:[oe(gt,{meta:r}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},className:"form-footer",children:oe(Rt,{htmlType:"submit",type:"primary",children:"Submit"})})]})},m5=()=>{const e={layout:"horizontal",columns:1,fields:[{key:"username",label:"User Name"},{key:"password",label:"Password",widget:"password"}]},t=s.useCallback(n=>{console.log("Submit: ",n)},[]);return it(Ue,{onFinish:t,layout:"horizontal",children:[oe(gt,{meta:e}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Log in"})})]})},g5={name:{first:"Nate",last:"Wang"},email:"myemail@gmail.com",gender:"Male",dateOfBirth:kn("2100-01-01"),phone:"15988888888",city:"Shanghai",address:"No.1000 Some Road, Zhangjiang Park, Pudong New District"},v5=({value:e})=>e.format("MMM Do YYYY"),p5=()=>{const[e]=Ue.useForm(),[t,n]=s.useState(!0),[r,o]=s.useState(!1),[a,i]=s.useState(g5),l=s.useCallback(u=>{o(!0),setTimeout(()=>{o(!1),i(u),n(!0),e6.success("Infomation updated.")},1500)},[]);return oe("div",{children:it(Ue,{layout:"horizontal",form:e,onFinish:l,style:{width:"800px"},children:[it("h1",{style:{height:"40px",fontSize:"16px",marginTop:"50px",color:"#888"},children:["Personal Infomation",t&&oe(Rt,{type:"link",onClick:()=>n(!1),style:{float:"right"},children:"Edit"})]}),oe(gt,{meta:(()=>({columns:2,disabled:r,viewMode:t,initialValues:a,fields:[{key:"name.first",name:["name","first"],label:"First Name",required:!0,tooltip:"hahahah"},{key:"name.last",label:"Last Name",required:!0},{key:"gender",label:"Gender",widget:"radio-group",options:["Male","Female"]},{key:"dateOfBirth",label:"Date of Birth",widget:"date-picker",viewWidget:v5},{key:"email",label:"Email"},{key:"phone",label:"Phone"},{key:"address",label:"Address",colSpan:2,clear:"left"},{key:"city",label:"City"},{key:"zipCode",label:"Zip Code"}]}))()}),!t&&it(Ue.Item,{className:"form-footer",wrapperCol:{span:16,offset:4},children:[oe(Rt,{htmlType:"submit",type:"primary",disabled:r,loading:r,children:r?"Updating...":"Update"}),oe(Rt,{onClick:()=>{e.resetFields(),n(!0)},style:{marginLeft:"15px"},children:"Cancel"})]})]})})},h5=()=>{const[e]=Ue.useForm(),t=s.useCallback(r=>{console.log("Submit: ",r)},[]);return it(Ue,{form:e,layout:"vertical",onFinish:t,children:[oe(gt,{meta:{columns:4,layout:"vertical",columnGap:12,fields:[{key:"label1",colSpan:4,render(){return oe("fieldset",{children:oe("legend",{children:"Contact Infomation"})})}},{key:"address",label:"Address",colSpan:4},{key:"address2",label:"Address2",colSpan:4},{key:"city",label:"City",colSpan:2},{key:"state",label:"State"},{key:"zip",label:"Zip Code"},{key:"label11",colSpan:4,render(){return oe("fieldset",{children:oe("legend",{children:"Bed & Bath"})})}},{key:"homeType",label:"Home Type",colSpan:2,widget:"select",initialValue:"House",options:["House","Apartment"]},{key:"roomType",label:"Room Type",colSpan:2,widget:"select",initialValue:"Entire home/apt",options:["Entire home/apt","Shared"]},{key:"bedrooms",label:"Bedrooms",colSpan:2,widget:"select",options:["1 Bedroom","2 Bedrooms"]},{key:"bathrooms",label:"Bathrooms",colSpan:2,widget:"select",options:["1 Bathroom","2 Bathrooms"]},{key:"king",label:"King",widget:"number",widgetProps:{style:{width:"100%"}},initialValue:0},{key:"queen",label:"Queen",widget:"number",widgetProps:{style:{width:"100%"}},initialValue:0},{key:"full",label:"Full",widget:"number",widgetProps:{style:{width:"100%"}},initialValue:0},{key:"twin",label:"Twin",widget:"number",widgetProps:{style:{width:"100%"}},initialValue:0}]}}),oe(Ue.Item,{children:oe(Rt,{htmlType:"submit",type:"primary",style:{width:"100%"},children:"Submit"})})]})},y5=()=>{const[e]=Ue.useForm();Ue.useWatch("favoriteFruit",e);const t=r=>{console.log("Submit: ",r)},n={fields:[{key:"favoriteFruit",label:"Favorite Fruit",widget:"radio-group",options:["Apple","Orange","Other"],initialValue:"Apple"}]};return gt.getFieldValue("favoriteFruit",n,e)==="Other"&&n.fields.push({key:"otherFruit",label:"Other"}),it(Ue,{form:e,onFinish:t,children:[oe(gt,{meta:n}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Submit"})})]})},b5=()=>{const[e]=Ue.useForm(),t=Ue.useWatch("favoriteFruit",e);return it(Ue,{form:e,onFinish:o=>{console.log("Submit: ",o)},children:[oe(gt,{meta:{fields:[{key:"favoriteFruit",label:"Favorite Fruit",widget:"radio-group",options:["Apple","Orange","Other"],initialValue:"Apple"},{key:"otherFruit",label:"Other",condition:()=>t==="Other"}]}}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Submit"})})]})},C5=({value:e})=>e.format("MMM Do YYYY"),S5=()=>{const t={columns:2,viewMode:!0,initialValues:{name:{first:"Nate",last:"Wang"},email:"myemail@gmail.com",gender:"Male",dateOfBirth:kn("2100-01-01"),phone:"15988888888",city:"Shanghai",address:"No.1000 Some Road, Zhangjiang Park, Pudong New District"},fields:[{key:"name.first",label:"First Name",tooltip:"First name"},{key:"name.last",label:"Last Name"},{key:"gender",label:"Gender"},{key:"dateOfBirth",label:"Date of Birth",viewWidget:C5},{key:"email",label:"Email"},{key:"phone",label:"Phone"},{key:"address",label:"Address",colSpan:2},{key:"city",label:"City"},{key:"zipCode",label:"Zip Code"}]};return oe("div",{children:it("div",{style:{width:"800px"},children:[oe("h1",{children:"Personal Infomation"}),oe(gt,{meta:t})]})})},Yb={China:["Beijing","Shanghai","Nanjing"],USA:["New York","San Jose","Washton"],France:["Paris","Marseille","Cannes"]},w5=e=>new Promise((t,n)=>{setTimeout(()=>{Yb[e]?t(Yb[e]):n(new Error("Not found"))},1500)}),x5=()=>{const[e]=Ue.useForm(),[t,n]=s.useState({}),r=gt.useUpdateOnChange(["country"]),o=e.getFieldValue("country"),a=o&&!t[o],i={fields:[{key:"country",label:"Country",widget:"select",options:["China","USA","France"],placeholder:"Select country...",initialValue:"China",widgetProps:{onChange:()=>{e.setFieldsValue({city:void 0})}}},{key:"city",label:"City",widget:"select",options:o?t[o]||[]:[],placeholder:a?"Loading...":"Select city...",widgetProps:{loading:a},disabled:a||!o}]},l=s.useCallback(c=>{console.log("Submit: ",c)},[]);return s.useEffect(()=>{o&&!t[o]&&w5(o).then(c=>{n(u=>({...u,[o]:c}))})},[o,n,t]),it(Ue,{form:e,onFinish:l,onValuesChange:r,children:[oe(gt,{meta:i}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Submit"})})]})},$5=()=>{const[e]=Ue.useForm(),[t,n]=s.useState(2),r=s.useCallback(a=>{console.log("Submit: ",a)},[]);return it(Ue,{form:e,layout:"horizontal",onFinish:r,style:{width:"1000px"},children:[oe(gt,{meta:{columns:t,fields:[{key:"columns",label:"Columns",widget:"radio-group",widgetProps:{optionType:"button",buttonStyle:"solid",onChange:a=>n(a.target.value)},options:[1,2,3,4],initialValue:2,help:"Change columns to show layout change"},{key:"input",label:"Input",required:!0,tooltip:"This is the name."},{key:"checkbox",label:"Checkbox",widget:"checkbox",initialValue:!0},{key:"select",label:"Select",widget:"select",options:["Apple","Orange","Banana"]},{key:"password",label:"Password",widget:"password"},{key:"textarea",label:"Textarea",widget:"textarea"},{key:"number",label:"Number",widget:"number"},{key:"date-picker",label:"Date Picker",widget:"date-picker"}]}}),oe(Ue.Item,{className:"form-footer",children:oe(Rt,{htmlType:"submit",type:"primary",children:"Submit"})})]})},E5=()=>{const[e]=Ue.useForm(),t=s.useCallback(i=>{console.log("Submit: ",i)},[]),n={columns:1,fields:[{key:"name.first",label:"First Name",required:!0},{key:"name.last",label:"Last Name",required:!0},{key:"dob",label:"Date of Birth",widget:"date-picker",fullWidth:!0},{key:"email",label:"Email",rules:[{type:"email",message:"Invalid email"}]},{key:"security",label:"Security Question",widget:"select",placeholder:"Select a question...",options:["What's your pet's name?","Your nick name?"]},{key:"answer",label:"Security Answer"},{key:"address",label:"Address"},{key:"city",label:"City"},{key:"phone",label:"phone"}]},r={...n,fields:n.fields.slice(0,3)},o={...n,fields:n.fields.slice(3,6)},a={...n,fields:n.fields.slice(6)};return it(Ue,{layout:"horizontal",form:e,onFinish:t,style:{width:"500px"},children:[it("fieldset",{children:[oe("legend",{children:"Personal Information"}),oe(gt,{meta:r})]}),it("fieldset",{children:[oe("legend",{children:"Account Information"}),oe(gt,{meta:o})]}),it("fieldset",{children:[oe("legend",{children:"Contact Infomation"}),oe(gt,{meta:a})]}),oe(Ue.Item,{className:"form-footer",wrapperCol:{span:16,offset:8},children:oe(Rt,{htmlType:"submit",type:"primary",children:"Submit"})})]})},I5=()=>{const e=s.useCallback(t=>{console.log("Submit: ",t)},[]);return it(Ue,{layout:"inline",onFinish:e,children:[oe(gt,{meta:{fields:[{key:"username",widgetProps:{placeholder:"Username"}}]}}),oe(gt,{meta:{fields:[{key:"password",widget:"password",widgetProps:{placeholder:"Password"}}]}}),oe(Ue.Item,{children:oe(Rt,{htmlType:"submit",type:"primary",children:"Login"})})]})},O5={nate:!0,bood:!0,kevin:!0},P5=()=>{const[e]=Ue.useForm(),t=s.useCallback(r=>{console.log("Submit: ",r)},[]);return it(Ue,{form:e,onFinish:t,children:[oe(gt,{meta:{fields:[{key:"username",label:"Username",extra:"Note: username nate, bood or kevin already exist",hasFeedback:!0,required:!0,rules:[{validator:(r,o,a)=>new Promise((i,l)=>{setTimeout(()=>{O5[o]?l(new Error(`Username "${o}" already exists.`)):i(o)},1e3)})}]},{key:"password",label:"Password",widget:"password",onChange:()=>{e.isFieldTouched("confirmPassword")&&e.validateFields(["confirmPassword"])},rules:[{required:!0,message:"Password is required"}]},{key:"confirmPassword",label:"Confirm Passowrd",widget:"password",required:!0,rules:[{validator:(r,o,a)=>new Promise((i,l)=>{o!==e.getFieldValue("password")?l(new Error("Two passwords are inconsistent.")):i(o)})}]}]}}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Register"})})]})},M5=()=>{const[e]=Ue.useForm(),[t,n]=s.useState(!1),r=s.useCallback(()=>n(!0),[n]),o=s.useCallback(()=>n(!1),[n]),[a,i]=s.useState(!1),l=s.useCallback(u=>{i(!0),console.log("submit: ",u),setTimeout(()=>{i(!1),zb.success({title:"Success",content:"Submit success.",onOk:o})},2e3)},[i,o]);return it("div",{children:[oe(Rt,{type:"primary",onClick:r,children:"New Item"}),oe(zb,{title:"New Item",closable:!a,maskClosable:!a,open:t,destroyOnClose:!0,onOk:()=>e.submit(),onCancel:o,okText:a?"Loading...":"Ok",okButtonProps:{loading:a,disabled:a},cancelButtonProps:{disabled:a},children:oe(Ue,{form:e,onFinish:l,children:oe(gt,{meta:{disabled:a,fields:[{key:"name",label:"Name",required:!0},{key:"desc",label:"Description"}]}})})})]})},R5=()=>{const[e]=Ue.useForm(),t=s.useCallback(r=>{console.log("Submit: ",r)},[]);return it(Ue,{onFinish:t,form:e,children:[oe(gt,{meta:{fields:[{key:"gender",label:"Gender",widget:"radio-group",options:["Male","Female"],onChange:r=>{r.target.value==="Male"?e.setFieldsValue({note:"Hi, man!"}):e.setFieldsValue({note:"Hi, lady!"})}},{key:"note",label:"Note"}]}}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Submit"})})]})},Kb=ju.Option,N5=({value:e,onChange:t})=>e?it(qd,{gutter:10,children:[oe(Co,{span:16,children:oe(vE,{style:{width:"100%"},value:e.price,onChange:n=>t({price:n,currency:e.currency})})}),oe(Co,{span:8,children:it(ju,{value:e.currency,onChange:n=>t({price:e.price,currency:n}),children:[oe(Kb,{value:"RMB",children:"RMB"}),oe(Kb,{value:"USD",children:"USD"})]})})]}):null,F5=e=>it(qd,{gutter:10,children:[it(Co,{span:16,children:[oe($i,{...e})," "]}),it(Co,{span:8,children:[oe(Rt,{children:"Get Captcha"})," "]})]}),T5=()=>{const[e]=Ue.useForm(),t=s.useCallback(r=>{console.log("Submit: ",r)},[]);return it(Ue,{form:e,onFinish:t,style:{width:"500px"},children:[oe(gt,{meta:{fields:[{key:"product",label:"Product"},{key:"_temp_price_currency",label:"Price",widget:N5,initialValue:{price:8,currency:"USD"}},{key:"captcha",label:"Captcha",required:!0,extra:"We must make sure that your are a human.",widget:F5},{key:"shipDate",label:"Ship Date",readOnly:!0,viewWidget:()=>it(qd,{children:[oe(Co,{span:11,children:oe(gt,{meta:{fields:[{key:"startDate",widget:"date-picker",widgetProps:{style:{width:"100%"}},noStyle:!0}]}})}),oe(Co,{span:2,style:{textAlign:"center"},children:"-"}),oe(Co,{span:11,children:oe(gt,{meta:{fields:[{key:"endDate",widget:"date-picker",widgetProps:{style:{width:"100%"}},noStyle:!0}]}})})]})},{key:"note",label:"Note"}]}}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Submit"})})]})},k5=()=>{const[e]=Ue.useForm(),t=s.useCallback(i=>console.log("Submit: ",i),[]),n={fields:[{key:"name.first",label:"First Name",required:!0},{key:"name.last",label:"Last Name",required:!0},{key:"dob",label:"Date of Birth",widget:"date-picker"}]},r={fields:[{key:"email",label:"Email",rules:[{type:"email",message:"Invalid email"}]}]},a=oe(gt,{meta:{fields:[{key:"prefix",options:["+86","+87"],widget:"select",noStyle:!0,widgetProps:{style:{width:70},noStyle:!0}}]}});return it(Ue,{layout:"horizontal",form:e,onFinish:t,style:{width:"500px"},children:[oe(gt,{meta:n}),oe(Ue.Item,{label:"Phone Number",name:"phone",labelCol:{span:8},wrapperCol:{span:16},rules:[{required:!0,message:"Please input your phone number!"}],children:oe($i,{addonBefore:a,style:{width:"100%"}})}),oe(gt,{meta:r}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},className:"form-footer",children:oe(Rt,{htmlType:"submit",type:"primary",children:"Submit"})})]})},_5=({value:e})=>e?e.format("MMM Do YYYY"):"N/A";gt.defineWidget("date-view",_5);const D5={steps:[{title:"Personal Information",formMeta:{columns:2,fields:[{key:"name.first",label:"First Name",initialValue:"Nate",required:!0},{key:"name.last",label:"Last Name",initialValue:"Wang",required:!0},{key:"dob",label:"Date of Birth",widget:"date-picker",viewWidget:"date-view"},{key:"noAccountInfo",label:"No Account Info",widget:"switch",tooltip:"Switch on to remove account step"}]}},{title:"Account Information",formMeta:{columns:2,fields:[{key:"email",label:"Email",clear:"right",rules:[{type:"email",message:"Invalid email"}]},{key:"security",label:"Security Question",widget:"select",placeholder:"Select a question...",options:["What's your pet's name?","Your nick name?"]},{key:"answer",label:"Security Answer"}]}},{title:"Contact Information",formMeta:{columns:2,fields:[{key:"address",label:"Address",colSpan:2},{key:"city",label:"City"},{key:"phone",label:"phone"}]}}]},A5=()=>{const[e]=Ue.useForm(),t=gt.useUpdateOnChange("*"),[n,r]=s.useState(0),o=s.useCallback(()=>{console.log("Submit: ",e.getFieldsValue(!0))},[e]),a=JSON.parse(JSON.stringify(D5));e.getFieldValue("noAccountInfo")&&a.steps.splice(1,1);const i=[];a.steps.forEach((f,g)=>{i.push({key:"review"+g,colSpan:2,render(){return oe("fieldset",{children:oe("legend",{children:f.title})})}},...f.formMeta.fields)}),a.steps.push({key:"review",title:"Review",formMeta:{columns:2,fields:i}});const l=a.steps.length,c=()=>{e.validateFields().then(()=>{r(n+1)})},u=()=>{e.validateFields().then(()=>{r(n-1)})},d=n===l-1;return it(Ue,{layout:"horizontal",form:e,style:{width:"880px"},onFinish:o,onValuesChange:t,children:[oe(RB,{current:n,items:a.steps.map(f=>({key:f.title,title:f.title}))}),oe("div",{style:{background:"#f7f7f7",padding:"20px",margin:"30px 0"},children:oe(gt,{meta:{...a.steps[n].formMeta,viewMode:n===l-1,initialValues:e.getFieldsValue(!0)}})}),it(Ue.Item,{className:"form-footer",style:{textAlign:"right"},children:[n>0&&oe(Rt,{onClick:u,style:{float:"left",marginTop:"5px"},children:"Back"}),oe(Rt,{children:"Cancel"}),"   ",oe(Rt,{type:"primary",onClick:d?()=>e.submit():c,children:d?"Submit":"Next"})]})]})},L5=()=>{const e={layout:"horizontal",columns:1,initialValues:{username:"username",items:[""]},fields:[{key:"username",label:"User Name"},{key:"items",label:"Items",widget:"form-list"},{key:"cities",label:"Cities",widget:"form-list",listItemMeta:{widget:"select",options:["Beijing","Shanghai","Nanjing"]}},{key:"items",label:"Items",widget:"form-list"}]},t=s.useCallback(n=>{console.log("Submit: ",n)},[]);return it(Ue,{onFinish:t,layout:"horizontal",children:[oe(gt,{meta:e}),oe(Ue.Item,{wrapperCol:{span:16,offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Log in"})})]})};var z5={icon:{tag:"svg",attrs:{viewBox:"64 64 896 896",focusable:"false"},children:[{tag:"path",attrs:{d:"M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"}},{tag:"path",attrs:{d:"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"}}]},name:"minus-circle",theme:"outlined"};const j5=z5;var B5=function(t,n){return s.createElement(wn,ve({},t,{ref:n,icon:j5}))};const V5=s.forwardRef(B5),H5=()=>{const e={layout:"horizontal",columns:1,initialValues:{username:"username",items:["ddd","xxx"]},fields:[{key:"username",label:"User Name"},{key:"password",label:"Password",widget:"password"},{key:"items",label:"Items",widget:Ue.List,widgetProps:{name:"items"},children:(n,{add:r,remove:o})=>it(eu,{children:[oe(gt,{meta:{fields:n.map((a,i)=>({...a,name:[a.name],style:{marginBottom:"10px"},extraNode:oe(eu,{children:n.length>1?oe(V5,{style:{position:"absolute",right:"-24px",top:"9px",color:"red"},className:"dynamic-delete-button",onClick:()=>o(a.name)}):null})}))}}),oe(Rt,{type:"link",onClick:()=>r(""),children:"+ Add Item"})]})}]},t=s.useCallback(n=>{console.log("Submit: ",n)},[]);return it(Ue,{onFinish:t,layout:"horizontal",children:[oe(gt,{meta:e}),oe(Ue.Item,{wrapperCol:{offset:8},children:oe(Rt,{type:"primary",htmlType:"submit",children:"Log in"})})]})},mm={simple:{name:"Simple",component:m5,description:"The most simple usage."},basic:{name:"Basic",component:f5,description:"Basic usage."},"view-mode":{name:"View Mode",component:S5,description:"FormBuilder could also be used as view mode just for displaying information in form layout. It could be used even without Form."},"view-edit":{name:"View / Edit",component:p5,description:"FormBuilder makes it super easy to toggle view/edit mode of a form."},"dynamic-fields":{name:"Dynamic Fields",component:y5,description:"You can dynamically add or remove fields according to the user's input. In this example, if choose other, then a new input appears."},"form-list":{name:"Form List",component:L5,description:"Antd form list support."},"form-list-manual":{name:"Manual Form List",component:H5,description:"Antd form list support."},"field-condition":{name:"Field Condition",component:b5,description:"By condition property, you can control whether to render a field or not. In this example, if choose other, then a new input appears."},"async-data-source":{name:"Async Data Source",component:x5,description:"Some form field widgets may need to load data source if necessary, the sample shows how to do it"},"multiple-columns":{name:"Multiple Columns",component:$5,description:"It's easy to set multiple columns layout for the form. Note it should be able to divide 24"},"complex-layout":{name:"Complex Layout",component:h5,description:"The example shows a complex layout. Similar approach with multiple columns."},"multiple-sections":{name:"Multiple Sections",component:E5,description:"Some times you need to group fields into different fieldset, or need more complex layout. You can use multiple form metas in one form."},"single-field":{name:"Single Field",component:I5,description:"You can use FormBuilder for even a single form field. This example also shows inline layout of the form."},validation:{name:"Validation",component:P5,description:it("span",{children:["You can use rules property to specify how to validate fields. For more information please go to:"," ",oe("a",{href:"https://ant.design/components/form/#Validation-Rules",target:"_blank",rel:"noopener noreferrer",children:"https://ant.design/components/form/#Validation-Rules"})]})},"form-in-modal":{name:"Form in Modal",component:M5,description:"The example shows how to use form in a dialog to call api and show status in dialog buttons."},coordinated:{name:"Coordinated Controls",component:R5,description:"You can set field value according to input of another control by use form.setFieldsValue api."},"custom-component":{name:"Custom Component",component:T5,description:"It's easy to create your own form field component, ether to get new capabilities or even just for layout."},mixed:{name:"Mixed",component:k5,description:"Form builder is designed to not limit original antd form api, so you can use them together."},wizard:{name:"Wizard",component:A5,description:"Wizard is an advanced usage of form builder, you can design your own meta structure to support dynamic wizard."}};function W5(){const e=VB()||"basic",t=()=>{const n=mm[e];if(!n||!n.component)return it("span",{style:{color:"red"},children:['Error: example "',e,'" not found.']});const r=n.component;return it(re.Fragment,{children:[it("h1",{children:[n.name,oe("p",{className:"example-description",children:n.description})]}),oe(r,{})]})};return it("div",{className:"app",children:[it("div",{className:"sider",children:[it("h1",{children:[oe("span",{className:"header-name",children:"Ant.Design"}),oe("span",{className:"example-title",children:"Examples"})]}),oe("ul",{children:Object.keys(mm).map(n=>oe("li",{children:oe("a",{href:`#${n}`,className:e===n?"active":"",children:mm[n].name})},n))}),it("div",{className:"social",children:[oe("a",{href:"https://github.com/ebay/nice-form-react",children:oe("img",{src:"https://img.shields.io/github/stars/rekit/nice-form-react?style=social",alt:"Github Repo"})}),oe("br",{}),oe("a",{href:"https://github.com/ebay/nice-form-react",children:oe("img",{src:"https://img.shields.io/badge/API-Reference-green",alt:"api reference"})}),oe("br",{}),oe("a",{href:"https://codesandbox.io/s/github/ebay/nice-form-react/tree/master/examples-v4",children:oe("img",{width:"150px",src:"https://codesandbox.io/static/img/play-codesandbox.svg",alt:"codesandbox"})})]})]}),it("div",{className:"example-container",children:[oe("div",{children:t()}),oe("div",{className:"code-container",children:oe(d5,{code:e})})]})]})}bn.addAdapter(Ba);gm.createRoot(document.getElementById("root")).render(oe(re.StrictMode,{children:oe(W5,{})})); diff --git a/antd/index.html b/antd/index.html index 911a70f..a45a717 100644 --- a/antd/index.html +++ b/antd/index.html @@ -4,8 +4,8 @@ - Ant.Design - + Nice Form Exmaples - Ant.Design + diff --git a/formik/assets/index-36c1b24c.js b/formik/assets/index-054b5df3.js similarity index 99% rename from formik/assets/index-36c1b24c.js rename to formik/assets/index-054b5df3.js index 7c7276a..f570919 100644 --- a/formik/assets/index-36c1b24c.js +++ b/formik/assets/index-054b5df3.js @@ -1926,4 +1926,4 @@ PERFORMANCE OF THIS SOFTWARE. 10.59L10 14.17L17.59 6.58L19 8L10 17Z`}))},I7=function(){return Ne.createElement(tf,null,Ne.createElement("path",{d:"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"}))},O7=function(){return Ne.createElement(tf,null,Ne.createElement("path",{d:`M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2, 6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12, 13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z`}))},F7=function(){return Ne.createElement(tf,null,Ne.createElement("path",{d:`M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, - 0 22,12A10,10 0 0,0 12,2Z`}))},A7={default:void 0,success:Ne.createElement(R7,null),warning:Ne.createElement(I7,null),error:Ne.createElement(O7,null),info:Ne.createElement(F7,null)},fi={maxSnack:3,persist:!1,hideIconVariant:!1,disableWindowBlurListener:!1,variant:"default",autoHideDuration:5e3,iconVariant:A7,anchorOrigin:{vertical:"bottom",horizontal:"left"},TransitionComponent:Hk,transitionDuration:{enter:225,exit:195}},N7=function(t,n){var r=function(i){return typeof i=="number"||i===null};return r(t)?t:r(n)?n:fi.autoHideDuration},L7=function(t,n){var r=function(i,a){return a.some(function(s){return typeof i===s})};return r(t,["string","number"])?t:r(t,["object"])?st({},fi.transitionDuration,{},r(n,["object"])&&n,{},t):r(n,["string","number"])?n:r(n,["object"])?st({},fi.transitionDuration,{},n):fi.transitionDuration},_7=function(t,n){return function(r,o){return o===void 0&&(o=!1),o?st({},fi[r],{},n[r],{},t[r]):r==="autoHideDuration"?N7(t.autoHideDuration,n.autoHideDuration):r==="transitionDuration"?L7(t.transitionDuration,n.transitionDuration):t[r]||n[r]||fi[r]}};function Ul(e){return Object.entries(e).reduce(function(t,n){var r,o=n[0],i=n[1];return st({},t,(r={},r[o]=Ng(i),r))},{})}var _a={SnackbarContainer:"notistack-SnackbarContainer",Snackbar:"notistack-Snackbar",CollapseWrapper:"notistack-CollapseWrapper",MuiContent:"notistack-MuiContent",MuiContentVariant:function(t){return"notistack-MuiContent-"+t}},T0=Ul({root:{height:0},entered:{height:"auto"}}),tp="0px",np=175,Uk=g.forwardRef(function(e,t){var n=e.children,r=e.in,o=e.onExited,i=g.useRef(null),a=g.useRef(null),s=Dm(t,a),l=function(){return i.current?i.current.clientHeight:0},u=function(h){h.style.height=tp},c=function(h){var k=l(),v=Oc({timeout:np,mode:"enter"}),p=v.duration,m=v.easing;h.style.transitionDuration=typeof p=="string"?p:p+"ms",h.style.height=k+"px",h.style.transitionTimingFunction=m||""},d=function(h){h.style.height="auto"},f=function(h){h.style.height=l()+"px"},y=function(h){zk(h);var k=Oc({timeout:np,mode:"exit"}),v=k.duration,p=k.easing;h.style.transitionDuration=typeof v=="string"?v:v+"ms",h.style.height=tp,h.style.transitionTimingFunction=p||""};return g.createElement(_g,{in:r,unmountOnExit:!0,onEnter:u,onEntered:d,onEntering:c,onExit:f,onExited:o,onExiting:y,nodeRef:a,timeout:np},function(x,h){return g.createElement("div",Object.assign({ref:s,className:Ii(T0.root,x==="entered"&&T0.entered),style:st({pointerEvents:"all",overflow:"hidden",minHeight:tp,transition:ua("height")},x==="entered"&&{overflow:"visible"},{},x==="exited"&&!r&&{visibility:"hidden"})},h),g.createElement("div",{ref:i,className:_a.CollapseWrapper,style:{display:"flex",width:"100%"}},n))})});Uk.displayName="Collapse";var M0={right:"left",left:"right",bottom:"up",top:"down"},j7=function(t){return t.horizontal!=="center"?M0[t.horizontal]:M0[t.vertical]},V7=function(t){return"anchorOrigin"+Lg(t)},B7=function(t){t===void 0&&(t={});var n={containerRoot:!0,containerAnchorOriginTopCenter:!0,containerAnchorOriginBottomCenter:!0,containerAnchorOriginTopRight:!0,containerAnchorOriginBottomRight:!0,containerAnchorOriginTopLeft:!0,containerAnchorOriginBottomLeft:!0};return Object.keys(t).filter(function(r){return!n[r]}).reduce(function(r,o){var i;return st({},r,(i={},i[o]=t[o],i))},{})},z7=function(){};function Hs(e,t){return e.reduce(function(n,r){return r==null?n:function(){for(var i=arguments.length,a=new Array(i),s=0;s-1,m=k.snacks.findIndex(v)>-1;if(p||m)return k}return o.handleDisplaySnack(st({},k,{queue:[].concat(k.queue,[h])}))}),y},o.handleDisplaySnack=function(i){var a=i.snacks;return a.length>=o.maxSnack?o.handleDismissOldest(i):o.processQueue(i)},o.processQueue=function(i){var a=i.queue,s=i.snacks;return a.length>0?st({},i,{snacks:[].concat(s,[a[0]]),queue:a.slice(1,a.length)}):i},o.handleDismissOldest=function(i){if(i.snacks.some(function(c){return!c.open||c.requestClose}))return i;var a=!1,s=!1,l=i.snacks.reduce(function(c,d){return c+(d.open&&d.persist?1:0)},0);l===o.maxSnack&&(s=!0);var u=i.snacks.map(function(c){return!a&&(!c.persist||s)?(a=!0,c.entered?(c.onClose&&c.onClose(null,"maxsnack",c.id),o.props.onClose&&o.props.onClose(null,"maxsnack",c.id),st({},c,{open:!1})):st({},c,{requestClose:!0})):st({},c)});return st({},i,{snacks:u})},o.handleEnteredSnack=function(i,a,s){if(!ku(s))throw new Error("handleEnteredSnack Cannot be called with undefined key");o.setState(function(l){var u=l.snacks;return{snacks:u.map(function(c){return c.id===s?st({},c,{entered:!0}):st({},c)})}})},o.handleCloseSnack=function(i,a,s){o.props.onClose&&o.props.onClose(i,a,s);var l=s===void 0;o.setState(function(u){var c=u.snacks,d=u.queue;return{snacks:c.map(function(f){return!l&&f.id!==s?st({},f):f.entered?st({},f,{open:!1}):st({},f,{requestClose:!0})}),queue:d.filter(function(f){return f.id!==s})}})},o.closeSnackbar=function(i){var a=o.state.snacks.find(function(s){return s.id===i});ku(i)&&a&&a.onClose&&a.onClose(null,"instructed",i),o.handleCloseSnack(null,"instructed",i)},o.handleExitedSnack=function(i,a){if(!ku(a))throw new Error("handleExitedSnack Cannot be called with undefined key");o.setState(function(s){var l=o.processQueue(st({},s,{snacks:s.snacks.filter(function(u){return u.id!==a})}));return l.queue.length===0?l:o.handleDismissOldest(l)})},qk=o.enqueueSnackbar,o.closeSnackbar,o.state={snacks:[],queue:[],contextValue:{enqueueSnackbar:o.enqueueSnackbar.bind(x0(o)),closeSnackbar:o.closeSnackbar.bind(x0(o))}},o}var n=t.prototype;return n.render=function(){var o=this,i=this.state.contextValue,a=this.props,s=a.domRoot,l=a.children,u=a.dense,c=u===void 0?!1:u,d=a.Components,f=d===void 0?{}:d,y=a.classes,x=this.state.snacks.reduce(function(k,v){var p,m=Lg(v.anchorOrigin),S=k[m]||[];return st({},k,(p={},p[m]=[].concat(S,[v]),p))},{}),h=Object.keys(x).map(function(k){var v=x[k],p=v[0];return Ne.createElement(q7,{key:k,dense:c,anchorOrigin:p.anchorOrigin,classes:y},v.map(function(m){return Ne.createElement(G7,{key:m.id,snack:m,classes:y,Component:f[m.variant],onClose:o.handleCloseSnack,onEnter:o.props.onEnter,onExit:o.props.onExit,onExited:Hs([o.handleExitedSnack,o.props.onExited],m.id),onEntered:Hs([o.handleEnteredSnack,o.props.onEntered],m.id)})}))});return Ne.createElement(M7.Provider,{value:i},l,s?Qc.createPortal(h,s):h)},Vk(t,[{key:"maxSnack",get:function(){return this.props.maxSnack||fi.maxSnack}}]),t}(g.Component);function X7(){const[e,t]=g.useState(!1),n=()=>t(!0),r=()=>t(!1),[o,i]=g.useState(!1),a=g.useCallback(()=>{i(!0),setTimeout(()=>{i(!1),qk("Submit success!",{variant:"success",anchorOrigin:{vertical:"top",horizontal:"center"}}),r()},2e3)},[i]),s={rowGap:18,disabled:o,fields:[{key:"name",label:"Name",required:!0},{key:"desc",label:"Description"}]};return b.jsxs(Q7,{children:[b.jsx(rt,{onClick:n,variant:"contained",children:"New Item"}),b.jsxs(KC,{open:e,onClose:r,children:[b.jsx(o9,{children:"New Item"}),b.jsx(YC,{style:{width:500,paddingTop:10},children:b.jsx(sn,{onSubmit:a,initialValues:{},children:b.jsxs(Qt,{children:[b.jsx(et,{meta:s}),b.jsxs(rk,{style:{marginTop:15},children:[b.jsx(rt,{onClick:r,variant:"outlined",children:"Cancel"}),b.jsx(rt,{variant:"contained",type:"submit",children:"Ok"})]})]})})})]})]})}const Z7=()=>{const e=t=>({rowGap:18,fields:[{key:"gender",label:"Gender",widget:"radio-group",options:["Male","Female"],widgetProps:{onChange:(n,r)=>{console.log("evt: ",n),r==="Male"?t.setFieldValue("note","Hi, man!",!0):t.setFieldValue("note","Hi, lady!",!0)}}},{key:"note",widgetProps:{placeholder:"Note"}}]});return b.jsx(sn,{onSubmit:async()=>{},initialValues:{},children:t=>b.jsxs(Qt,{children:[b.jsx(et,{meta:e(t)}),b.jsx(rt,{type:"submit",variant:"contained",style:{marginTop:18},children:"Submit"})]})})},J7=({form:e,field:t,meta:n,...r})=>{var o,i,a;return t.value?b.jsxs(Ro,{container:!0,spacing:1,children:[b.jsx(Ro,{item:!0,xs:8,children:b.jsx(_r,{...r,fullWidth:!0,defaultValue:(o=n.initialValue)==null?void 0:o.price,name:"price",type:"number",error:e.touched.product&&!!e.errors.product,helperText:(i=e.errors.product)==null?void 0:i.toString(),onChange:s=>{e.setFieldValue("_temp_price_currency",{...t.value,price:s.target.value})}})}),b.jsx(Ro,{item:!0,xs:4,children:b.jsxs(_r,{...r,select:!0,fullWidth:!0,defaultValue:(a=n.initialValue)==null?void 0:a.currency,label:"Currency",name:"currency",onChange:s=>{e.setFieldValue("_temp_price_currency",{...t.value,currency:s.target.value})},children:[b.jsx(gl,{value:"RMB",children:"RMB"}),b.jsx(gl,{value:"USD",children:"USD"})]})})]}):null},eY=({field:e,meta:t,form:n,...r})=>b.jsxs(Ro,{container:!0,spacing:1,children:[b.jsx(Ro,{item:!0,xs:8,children:b.jsx(_r,{...e,...r})}),b.jsx(Ro,{item:!0,xs:4,children:b.jsx(rt,{variant:"outlined",style:{marginTop:10},children:"Get Captcha"})})]}),tY=()=>{const e={rowGap:18,fields:[{key:"product",label:"Product"},{key:"_temp_price_currency",label:"Price",widget:J7},{key:"captcha",label:"Captcha",required:!0,widget:eY,widgetProps:{fullWidth:!0,helperText:"We must make sure that your are a human."}},{key:"shipDate",label:"Ship Date",widget:()=>b.jsxs(Ro,{container:!0,alignItems:"center",children:[b.jsx(et,{meta:{fields:[{key:"startDate",widget:"date-picker",label:"Ship Start Date",widgetProps:{style:{width:"100%"}}}]}}),b.jsx(Ro,{item:!0,xs:1,style:{textAlign:"center"},children:" — "}),b.jsx(et,{meta:{fields:[{key:"endDate",widget:"date-picker",label:"Ship End Date",widgetProps:{style:{width:"100%"}}}]}})]})},{key:"note",label:"Note"}]};return b.jsx(sn,{style:{width:"500px"},initialValues:{product:"",_temp_price_currency:{price:"8",currency:"USD"}},onSubmit:async t=>{await new Promise(n=>setTimeout(n,500)),alert(JSON.stringify(t,null,2))},children:()=>b.jsx(Wo,{dateAdapter:Qa,children:b.jsxs(Qt,{children:[b.jsx(et,{meta:e}),b.jsx(rt,{type:"submit",variant:"contained",style:{marginTop:18},children:"Submit"})]})})})},nY=()=>{const e={layout:"horizontal",columns:1,rowGap:18,fields:[{key:"username",label:"User Name"},{key:"password",label:"Password",widgetProps:{type:"password"}},{key:"friends",label:"Friends",widget:"form-list",fullWidth:!0,listItemProps:{widget:"select",options:["Tom","Jerry"],required:!0,fullWidth:!0}}]};return b.jsx(sn,{initialValues:{username:"Nate",friends:["Tom"]},onSubmit:async t=>{await new Promise(n=>setTimeout(n,500)),alert(JSON.stringify(t,null,2))},children:b.jsxs(Qt,{style:{width:600},children:[b.jsx(et,{meta:e}),b.jsx(rt,{color:"primary",type:"submit",variant:"contained",style:{marginTop:18},children:"Log in"})]})})},rY=({...e})=>(e.onChange=t=>{e.form.setFieldTouched(e.field.name,!0,!1),e.form.setFieldValue(e.field.name,t,!0),e.field.onChange(t)},e.onBlur=()=>{e.form.setFieldTouched(e.field.name,!0,!0),e.field.onBlur()},b.jsx(AU,{...NU({field:e.field,form:e.form,meta:e.meta}),children:e.children}));et.defineWidget("date-picker",rY,({field:e})=>e);const oY=()=>{const e=()=>({rowGap:18,fields:[{key:"name.first",label:"First Name",required:!0,widgetProps:{onChange:o=>{console.log("e: ",o)}}},{key:"name.last",label:"Last Name",required:!0},{key:"dob",label:"Date of Birth",widget:"date-picker"}]}),t={rowGap:18,fields:[{key:"email",label:"Email"}]},n={fields:[{key:"prefix",options:["+86","+87"],widget:"select",widgetProps:{style:{width:100,border:"none"},variant:"standard"}}]},r=b.jsx(et,{meta:n});return b.jsx(sn,{layout:"horizontal",initialValues:{prefix:"+86",phone:""},onSubmit:async o=>{await new Promise(i=>setTimeout(i,500)),alert(JSON.stringify(o,null,2))},style:{width:"500px"},children:o=>b.jsx(Wo,{dateAdapter:Qa,children:b.jsxs(Qt,{children:[b.jsx(et,{meta:e()}),b.jsx(_r,{fullWidth:!0,id:"phone",name:"phone",label:"Phone Number",InputProps:{startAdornment:r},value:o.values.phone,onChange:o.handleChange,onBlur:o.handleBlur,error:o.touched.phone&&!!o.errors.phone,helperText:o.touched.phone&&o.errors.phone,style:{marginBottom:18,marginTop:18}}),b.jsx(et,{meta:t}),b.jsx(rt,{type:"submit",variant:"contained",style:{marginTop:18},children:"Submit"})]})})})},iY=({value:e})=>e?e.format("MMM Do YYYY"):"N/A";et.defineWidget("date-view",iY,({field:e})=>e);const aY={steps:[{title:"Personal Information",formMeta:{columns:2,rowGap:18,columnGap:18,fields:[{key:"name.first",label:"First Name",initialValue:"Nate",required:!0},{key:"name.last",label:"Last Name",initialValue:"Wang",required:!0},{key:"dob",label:"Date of Birth",widget:"date-picker",viewWidget:"date-view"},{key:"noAccountInfo",label:"No Account Info",widget:"switch",tooltip:"Switch on to remove account step"}]}},{title:"Account Information",formMeta:{columns:2,rowGap:18,columnGap:18,fields:[{key:"email",label:"Email",clear:"right",rules:[{type:"email",message:"Invalid email"}]},{key:"security",label:"Security Question",widget:"select",fullWidth:!0,placeholder:"Select a question...",options:["What's your pet's name?","Your nick name?"]},{key:"answer",label:"Security Answer"}]}},{title:"Contact Information",formMeta:{columns:2,rowGap:18,columnGap:18,fields:[{key:"address",label:"Address",colSpan:2},{key:"city",label:"City"},{key:"phone",label:"phone"}]}}]},sY=()=>{const[e,t]=g.useState(0),n=JSON.parse(JSON.stringify(aY)),r=[];n.steps.forEach((l,u)=>{r.push({key:"review"+u,colSpan:2,render(){return b.jsxs("header",{children:[b.jsx("span",{style:{lineHeight:"32px",color:"rgba(0,0,0,0.45)"},children:l.title}),b.jsx(Eo,{})]})}},...l.formMeta.fields)}),n.steps.push({key:"review",title:"Review",formMeta:{columns:2,rowGap:18,fields:r}});const o=n.steps.length,i=l=>{var u,c,d,f;l((f=(d=(c=(u=n.steps)==null?void 0:u[e])==null?void 0:c.formMeta)==null?void 0:d.fields)==null?void 0:f.map(y=>y.key)).then(()=>{t(e+1)})},a=l=>{var u,c,d,f;l((f=(d=(c=(u=n.steps)==null?void 0:u[e])==null?void 0:c.formMeta)==null?void 0:d.fields)==null?void 0:f.map(y=>y.key)).then(()=>{t(e-1)})},s=e===o-1;return b.jsx(sn,{initialValues:{name:{first:"Nate",last:"Wang"}},onSubmit:async l=>{await new Promise(u=>setTimeout(u,500)),alert(JSON.stringify(l,null,2))},children:l=>b.jsx(Wo,{dateAdapter:Qa,children:b.jsxs(Qt,{style:{width:"880px"},children:[b.jsx(a7,{activeStep:e,children:n.steps.map((u,c)=>{const d={},f={};return b.jsx($9,{...d,children:b.jsx(Y9,{...f,children:u.title})},c)})}),b.jsx("div",{style:{background:"#f7f7f7",padding:"20px",margin:"30px 0"},children:b.jsx(et,{meta:{...n.steps[e].formMeta,viewMode:e===o-1,initialValues:l.values}})}),e>0&&b.jsx(rt,{onClick:()=>a(l.validateForm),style:{float:"left",marginTop:"5px"},variant:"outlined",children:"Back"}),b.jsx(rt,{style:{float:"right",marginLeft:"15px"},variant:"contained",onClick:s?()=>l.submitForm():()=>{i(l.validateForm)},children:s?"Submit":"Next"}),"   ",b.jsx(rt,{onClick:l.handleReset,style:{float:"right"},variant:"outlined",children:"Reset"})]})})})},sp={simple:{name:"Simple",component:JU,description:"The most simple usage."},basic:{name:"Basic",component:ZU,description:"Basic usage."},"view-mode":{name:"View Mode",component:p7,description:"FormBuilder could also be used as view mode just for displaying information in form layout. It could be used even without Form."},"view-edit":{name:"View / Edit",component:l7,description:"FormBuilder makes it super easy to toggle view/edit mode of a form."},"dynamic-fields":{name:"Dynamic Fields",component:c7,description:"You can dynamically add or remove fields according to the user's input. In this example, if choose other, then a new input appears."},"form-list":{name:"Form List",component:nY,description:"Form list is a common usage of form builder, it allows you to add/remove form fields dynamically."},"field-condition":{name:"Field Condition",component:d7,description:"By condition property, you can control whether to render a field or not. In this example, if choose other, then a new input appears."},"async-data-source":{name:"Async Data Source",component:g7,description:"Some form field widgets may need to load data source if necessary, the sample shows how to do it"},"multiple-columns":{name:"Multiple Columns",component:v7,description:"It's easy to set multiple columns layout for the form. Note it should be able to divide 24"},"complex-layout":{name:"Complex Layout",component:u7,description:"The example shows a complex layout. Similar approach with multiple columns."},"multiple-sections":{name:"Multiple Sections",component:y7,description:"Some times you need to group fields into different fieldset, or need more complex layout. You can use multiple form builders in one form."},validation:{name:"Validation",component:x7,description:b.jsxs("span",{children:["You can use rules property to specify how to validate fields. For more information please go to:"," ",b.jsx("a",{href:"https://ant.design/components/form/#Validation-Rules",target:"_blank",rel:"noopener noreferrer",children:"https://ant.design/components/form/#Validation-Rules"})]})},"form-in-modal":{name:"Form in Modal",component:X7,description:"The example shows how to use form in a dialog to call api and show status in dialog buttons."},coordinated:{name:"Coordinated Controls",component:Z7,description:"You can set field value according to input of another control by use form.setFieldsValue api."},"custom-component":{name:"Custom Component",component:tY,description:"It's easy to create your own form field component, ether to get new capabilities or even just for layout."},mixed:{name:"Mixed",component:oY,description:"Form builder is designed to not limit original antd form api, so you can use them together."},wizard:{name:"Wizard",component:sY,description:"Wizard is an advanced usage of form builder, you can design your own meta structure to support dynamic wizard."}};function lY(){const e=Q5()||"basic",t=()=>{const n=sp[e];if(!n||!n.component)return b.jsxs("span",{style:{color:"red"},children:['Error: example "',e,'" not found.']});const r=n.component;return b.jsxs(Ne.Fragment,{children:[b.jsxs("h1",{children:[n.name,b.jsx("p",{className:"example-description",children:n.description})]}),b.jsx(r,{})]})};return b.jsxs("div",{className:"app",children:[b.jsxs("div",{className:"sider",children:[b.jsxs("h1",{children:[b.jsx("span",{className:"header-name",children:"@ebay/nice-form-react examples"}),b.jsx("span",{className:"example-title",children:"Formik + MUI"})]}),b.jsx("ul",{children:Object.keys(sp).map(n=>b.jsx("li",{children:b.jsx("a",{href:`#${n}`,className:e===n?"active":"",children:sp[n].name})},n))}),b.jsxs("div",{className:"social",children:[b.jsx("a",{href:"https://github.com/ebay/nice-form-react",children:b.jsx("img",{src:"https://img.shields.io/github/stars/rekit/nice-form-react?style=social",alt:"Github Repo"})}),b.jsx("br",{}),b.jsx("a",{href:"https://github.com/rekit/nice-form-react",children:b.jsx("img",{src:"https://img.shields.io/badge/API-Reference-green",alt:"api reference"})}),b.jsx("br",{}),b.jsx("a",{href:"https://codesandbox.io/s/github/rekit/nice-form-react/tree/master/examples-v4",children:b.jsx("img",{width:"150px",src:"https://codesandbox.io/static/img/play-codesandbox.svg",alt:"codesandbox"})})]})]}),b.jsxs("div",{className:"example-container",children:[b.jsx("div",{children:t()}),b.jsx("div",{className:"code-container",children:b.jsx(v4,{code:e})})]})]})}At.addAdapter(jI);At.addAdapter(Pm);lp.createRoot(document.getElementById("root")).render(b.jsx(Ne.StrictMode,{children:b.jsx(lY,{})}))});export default uY(); + 0 22,12A10,10 0 0,0 12,2Z`}))},A7={default:void 0,success:Ne.createElement(R7,null),warning:Ne.createElement(I7,null),error:Ne.createElement(O7,null),info:Ne.createElement(F7,null)},fi={maxSnack:3,persist:!1,hideIconVariant:!1,disableWindowBlurListener:!1,variant:"default",autoHideDuration:5e3,iconVariant:A7,anchorOrigin:{vertical:"bottom",horizontal:"left"},TransitionComponent:Hk,transitionDuration:{enter:225,exit:195}},N7=function(t,n){var r=function(i){return typeof i=="number"||i===null};return r(t)?t:r(n)?n:fi.autoHideDuration},L7=function(t,n){var r=function(i,a){return a.some(function(s){return typeof i===s})};return r(t,["string","number"])?t:r(t,["object"])?st({},fi.transitionDuration,{},r(n,["object"])&&n,{},t):r(n,["string","number"])?n:r(n,["object"])?st({},fi.transitionDuration,{},n):fi.transitionDuration},_7=function(t,n){return function(r,o){return o===void 0&&(o=!1),o?st({},fi[r],{},n[r],{},t[r]):r==="autoHideDuration"?N7(t.autoHideDuration,n.autoHideDuration):r==="transitionDuration"?L7(t.transitionDuration,n.transitionDuration):t[r]||n[r]||fi[r]}};function Ul(e){return Object.entries(e).reduce(function(t,n){var r,o=n[0],i=n[1];return st({},t,(r={},r[o]=Ng(i),r))},{})}var _a={SnackbarContainer:"notistack-SnackbarContainer",Snackbar:"notistack-Snackbar",CollapseWrapper:"notistack-CollapseWrapper",MuiContent:"notistack-MuiContent",MuiContentVariant:function(t){return"notistack-MuiContent-"+t}},T0=Ul({root:{height:0},entered:{height:"auto"}}),tp="0px",np=175,Uk=g.forwardRef(function(e,t){var n=e.children,r=e.in,o=e.onExited,i=g.useRef(null),a=g.useRef(null),s=Dm(t,a),l=function(){return i.current?i.current.clientHeight:0},u=function(h){h.style.height=tp},c=function(h){var k=l(),v=Oc({timeout:np,mode:"enter"}),p=v.duration,m=v.easing;h.style.transitionDuration=typeof p=="string"?p:p+"ms",h.style.height=k+"px",h.style.transitionTimingFunction=m||""},d=function(h){h.style.height="auto"},f=function(h){h.style.height=l()+"px"},y=function(h){zk(h);var k=Oc({timeout:np,mode:"exit"}),v=k.duration,p=k.easing;h.style.transitionDuration=typeof v=="string"?v:v+"ms",h.style.height=tp,h.style.transitionTimingFunction=p||""};return g.createElement(_g,{in:r,unmountOnExit:!0,onEnter:u,onEntered:d,onEntering:c,onExit:f,onExited:o,onExiting:y,nodeRef:a,timeout:np},function(x,h){return g.createElement("div",Object.assign({ref:s,className:Ii(T0.root,x==="entered"&&T0.entered),style:st({pointerEvents:"all",overflow:"hidden",minHeight:tp,transition:ua("height")},x==="entered"&&{overflow:"visible"},{},x==="exited"&&!r&&{visibility:"hidden"})},h),g.createElement("div",{ref:i,className:_a.CollapseWrapper,style:{display:"flex",width:"100%"}},n))})});Uk.displayName="Collapse";var M0={right:"left",left:"right",bottom:"up",top:"down"},j7=function(t){return t.horizontal!=="center"?M0[t.horizontal]:M0[t.vertical]},V7=function(t){return"anchorOrigin"+Lg(t)},B7=function(t){t===void 0&&(t={});var n={containerRoot:!0,containerAnchorOriginTopCenter:!0,containerAnchorOriginBottomCenter:!0,containerAnchorOriginTopRight:!0,containerAnchorOriginBottomRight:!0,containerAnchorOriginTopLeft:!0,containerAnchorOriginBottomLeft:!0};return Object.keys(t).filter(function(r){return!n[r]}).reduce(function(r,o){var i;return st({},r,(i={},i[o]=t[o],i))},{})},z7=function(){};function Hs(e,t){return e.reduce(function(n,r){return r==null?n:function(){for(var i=arguments.length,a=new Array(i),s=0;s-1,m=k.snacks.findIndex(v)>-1;if(p||m)return k}return o.handleDisplaySnack(st({},k,{queue:[].concat(k.queue,[h])}))}),y},o.handleDisplaySnack=function(i){var a=i.snacks;return a.length>=o.maxSnack?o.handleDismissOldest(i):o.processQueue(i)},o.processQueue=function(i){var a=i.queue,s=i.snacks;return a.length>0?st({},i,{snacks:[].concat(s,[a[0]]),queue:a.slice(1,a.length)}):i},o.handleDismissOldest=function(i){if(i.snacks.some(function(c){return!c.open||c.requestClose}))return i;var a=!1,s=!1,l=i.snacks.reduce(function(c,d){return c+(d.open&&d.persist?1:0)},0);l===o.maxSnack&&(s=!0);var u=i.snacks.map(function(c){return!a&&(!c.persist||s)?(a=!0,c.entered?(c.onClose&&c.onClose(null,"maxsnack",c.id),o.props.onClose&&o.props.onClose(null,"maxsnack",c.id),st({},c,{open:!1})):st({},c,{requestClose:!0})):st({},c)});return st({},i,{snacks:u})},o.handleEnteredSnack=function(i,a,s){if(!ku(s))throw new Error("handleEnteredSnack Cannot be called with undefined key");o.setState(function(l){var u=l.snacks;return{snacks:u.map(function(c){return c.id===s?st({},c,{entered:!0}):st({},c)})}})},o.handleCloseSnack=function(i,a,s){o.props.onClose&&o.props.onClose(i,a,s);var l=s===void 0;o.setState(function(u){var c=u.snacks,d=u.queue;return{snacks:c.map(function(f){return!l&&f.id!==s?st({},f):f.entered?st({},f,{open:!1}):st({},f,{requestClose:!0})}),queue:d.filter(function(f){return f.id!==s})}})},o.closeSnackbar=function(i){var a=o.state.snacks.find(function(s){return s.id===i});ku(i)&&a&&a.onClose&&a.onClose(null,"instructed",i),o.handleCloseSnack(null,"instructed",i)},o.handleExitedSnack=function(i,a){if(!ku(a))throw new Error("handleExitedSnack Cannot be called with undefined key");o.setState(function(s){var l=o.processQueue(st({},s,{snacks:s.snacks.filter(function(u){return u.id!==a})}));return l.queue.length===0?l:o.handleDismissOldest(l)})},qk=o.enqueueSnackbar,o.closeSnackbar,o.state={snacks:[],queue:[],contextValue:{enqueueSnackbar:o.enqueueSnackbar.bind(x0(o)),closeSnackbar:o.closeSnackbar.bind(x0(o))}},o}var n=t.prototype;return n.render=function(){var o=this,i=this.state.contextValue,a=this.props,s=a.domRoot,l=a.children,u=a.dense,c=u===void 0?!1:u,d=a.Components,f=d===void 0?{}:d,y=a.classes,x=this.state.snacks.reduce(function(k,v){var p,m=Lg(v.anchorOrigin),S=k[m]||[];return st({},k,(p={},p[m]=[].concat(S,[v]),p))},{}),h=Object.keys(x).map(function(k){var v=x[k],p=v[0];return Ne.createElement(q7,{key:k,dense:c,anchorOrigin:p.anchorOrigin,classes:y},v.map(function(m){return Ne.createElement(G7,{key:m.id,snack:m,classes:y,Component:f[m.variant],onClose:o.handleCloseSnack,onEnter:o.props.onEnter,onExit:o.props.onExit,onExited:Hs([o.handleExitedSnack,o.props.onExited],m.id),onEntered:Hs([o.handleEnteredSnack,o.props.onEntered],m.id)})}))});return Ne.createElement(M7.Provider,{value:i},l,s?Qc.createPortal(h,s):h)},Vk(t,[{key:"maxSnack",get:function(){return this.props.maxSnack||fi.maxSnack}}]),t}(g.Component);function X7(){const[e,t]=g.useState(!1),n=()=>t(!0),r=()=>t(!1),[o,i]=g.useState(!1),a=g.useCallback(()=>{i(!0),setTimeout(()=>{i(!1),qk("Submit success!",{variant:"success",anchorOrigin:{vertical:"top",horizontal:"center"}}),r()},2e3)},[i]),s={rowGap:18,disabled:o,fields:[{key:"name",label:"Name",required:!0},{key:"desc",label:"Description"}]};return b.jsxs(Q7,{children:[b.jsx(rt,{onClick:n,variant:"contained",children:"New Item"}),b.jsxs(KC,{open:e,onClose:r,children:[b.jsx(o9,{children:"New Item"}),b.jsx(YC,{style:{width:500,paddingTop:10},children:b.jsx(sn,{onSubmit:a,initialValues:{},children:b.jsxs(Qt,{children:[b.jsx(et,{meta:s}),b.jsxs(rk,{style:{marginTop:15},children:[b.jsx(rt,{onClick:r,variant:"outlined",children:"Cancel"}),b.jsx(rt,{variant:"contained",type:"submit",children:"Ok"})]})]})})})]})]})}const Z7=()=>{const e=t=>({rowGap:18,fields:[{key:"gender",label:"Gender",widget:"radio-group",options:["Male","Female"],widgetProps:{onChange:(n,r)=>{console.log("evt: ",n),r==="Male"?t.setFieldValue("note","Hi, man!",!0):t.setFieldValue("note","Hi, lady!",!0)}}},{key:"note",widgetProps:{placeholder:"Note"}}]});return b.jsx(sn,{onSubmit:async()=>{},initialValues:{},children:t=>b.jsxs(Qt,{children:[b.jsx(et,{meta:e(t)}),b.jsx(rt,{type:"submit",variant:"contained",style:{marginTop:18},children:"Submit"})]})})},J7=({form:e,field:t,meta:n,...r})=>{var o,i,a;return t.value?b.jsxs(Ro,{container:!0,spacing:1,children:[b.jsx(Ro,{item:!0,xs:8,children:b.jsx(_r,{...r,fullWidth:!0,defaultValue:(o=n.initialValue)==null?void 0:o.price,name:"price",type:"number",error:e.touched.product&&!!e.errors.product,helperText:(i=e.errors.product)==null?void 0:i.toString(),onChange:s=>{e.setFieldValue("_temp_price_currency",{...t.value,price:s.target.value})}})}),b.jsx(Ro,{item:!0,xs:4,children:b.jsxs(_r,{...r,select:!0,fullWidth:!0,defaultValue:(a=n.initialValue)==null?void 0:a.currency,label:"Currency",name:"currency",onChange:s=>{e.setFieldValue("_temp_price_currency",{...t.value,currency:s.target.value})},children:[b.jsx(gl,{value:"RMB",children:"RMB"}),b.jsx(gl,{value:"USD",children:"USD"})]})})]}):null},eY=({field:e,meta:t,form:n,...r})=>b.jsxs(Ro,{container:!0,spacing:1,children:[b.jsx(Ro,{item:!0,xs:8,children:b.jsx(_r,{...e,...r})}),b.jsx(Ro,{item:!0,xs:4,children:b.jsx(rt,{variant:"outlined",style:{marginTop:10},children:"Get Captcha"})})]}),tY=()=>{const e={rowGap:18,fields:[{key:"product",label:"Product"},{key:"_temp_price_currency",label:"Price",widget:J7},{key:"captcha",label:"Captcha",required:!0,widget:eY,widgetProps:{fullWidth:!0,helperText:"We must make sure that your are a human."}},{key:"shipDate",label:"Ship Date",widget:()=>b.jsxs(Ro,{container:!0,alignItems:"center",children:[b.jsx(et,{meta:{fields:[{key:"startDate",widget:"date-picker",label:"Ship Start Date",widgetProps:{style:{width:"100%"}}}]}}),b.jsx(Ro,{item:!0,xs:1,style:{textAlign:"center"},children:" — "}),b.jsx(et,{meta:{fields:[{key:"endDate",widget:"date-picker",label:"Ship End Date",widgetProps:{style:{width:"100%"}}}]}})]})},{key:"note",label:"Note"}]};return b.jsx(sn,{style:{width:"500px"},initialValues:{product:"",_temp_price_currency:{price:"8",currency:"USD"}},onSubmit:async t=>{await new Promise(n=>setTimeout(n,500)),alert(JSON.stringify(t,null,2))},children:()=>b.jsx(Wo,{dateAdapter:Qa,children:b.jsxs(Qt,{children:[b.jsx(et,{meta:e}),b.jsx(rt,{type:"submit",variant:"contained",style:{marginTop:18},children:"Submit"})]})})})},nY=()=>{const e={layout:"horizontal",columns:1,rowGap:18,fields:[{key:"username",label:"User Name"},{key:"password",label:"Password",widgetProps:{type:"password"}},{key:"friends",label:"Friends",widget:"form-list",fullWidth:!0,listItemProps:{widget:"select",options:["Tom","Jerry"],required:!0,fullWidth:!0}}]};return b.jsx(sn,{initialValues:{username:"Nate",friends:["Tom"]},onSubmit:async t=>{await new Promise(n=>setTimeout(n,500)),alert(JSON.stringify(t,null,2))},children:b.jsxs(Qt,{style:{width:600},children:[b.jsx(et,{meta:e}),b.jsx(rt,{color:"primary",type:"submit",variant:"contained",style:{marginTop:18},children:"Log in"})]})})},rY=({...e})=>(e.onChange=t=>{e.form.setFieldTouched(e.field.name,!0,!1),e.form.setFieldValue(e.field.name,t,!0),e.field.onChange(t)},e.onBlur=()=>{e.form.setFieldTouched(e.field.name,!0,!0),e.field.onBlur()},b.jsx(AU,{...NU({field:e.field,form:e.form,meta:e.meta}),children:e.children}));et.defineWidget("date-picker",rY,({field:e})=>e);const oY=()=>{const e=()=>({rowGap:18,fields:[{key:"name.first",label:"First Name",required:!0,widgetProps:{onChange:o=>{console.log("e: ",o)}}},{key:"name.last",label:"Last Name",required:!0},{key:"dob",label:"Date of Birth",widget:"date-picker"}]}),t={rowGap:18,fields:[{key:"email",label:"Email"}]},n={fields:[{key:"prefix",options:["+86","+87"],widget:"select",widgetProps:{style:{width:100,border:"none"},variant:"standard"}}]},r=b.jsx(et,{meta:n});return b.jsx(sn,{layout:"horizontal",initialValues:{prefix:"+86",phone:""},onSubmit:async o=>{await new Promise(i=>setTimeout(i,500)),alert(JSON.stringify(o,null,2))},style:{width:"500px"},children:o=>b.jsx(Wo,{dateAdapter:Qa,children:b.jsxs(Qt,{children:[b.jsx(et,{meta:e()}),b.jsx(_r,{fullWidth:!0,id:"phone",name:"phone",label:"Phone Number",InputProps:{startAdornment:r},value:o.values.phone,onChange:o.handleChange,onBlur:o.handleBlur,error:o.touched.phone&&!!o.errors.phone,helperText:o.touched.phone&&o.errors.phone,style:{marginBottom:18,marginTop:18}}),b.jsx(et,{meta:t}),b.jsx(rt,{type:"submit",variant:"contained",style:{marginTop:18},children:"Submit"})]})})})},iY=({value:e})=>e?e.format("MMM Do YYYY"):"N/A";et.defineWidget("date-view",iY,({field:e})=>e);const aY={steps:[{title:"Personal Information",formMeta:{columns:2,rowGap:18,columnGap:18,fields:[{key:"name.first",label:"First Name",initialValue:"Nate",required:!0},{key:"name.last",label:"Last Name",initialValue:"Wang",required:!0},{key:"dob",label:"Date of Birth",widget:"date-picker",viewWidget:"date-view"},{key:"noAccountInfo",label:"No Account Info",widget:"switch",tooltip:"Switch on to remove account step"}]}},{title:"Account Information",formMeta:{columns:2,rowGap:18,columnGap:18,fields:[{key:"email",label:"Email",clear:"right",rules:[{type:"email",message:"Invalid email"}]},{key:"security",label:"Security Question",widget:"select",fullWidth:!0,placeholder:"Select a question...",options:["What's your pet's name?","Your nick name?"]},{key:"answer",label:"Security Answer"}]}},{title:"Contact Information",formMeta:{columns:2,rowGap:18,columnGap:18,fields:[{key:"address",label:"Address",colSpan:2},{key:"city",label:"City"},{key:"phone",label:"phone"}]}}]},sY=()=>{const[e,t]=g.useState(0),n=JSON.parse(JSON.stringify(aY)),r=[];n.steps.forEach((l,u)=>{r.push({key:"review"+u,colSpan:2,render(){return b.jsxs("header",{children:[b.jsx("span",{style:{lineHeight:"32px",color:"rgba(0,0,0,0.45)"},children:l.title}),b.jsx(Eo,{})]})}},...l.formMeta.fields)}),n.steps.push({key:"review",title:"Review",formMeta:{columns:2,rowGap:18,fields:r}});const o=n.steps.length,i=l=>{var u,c,d,f;l((f=(d=(c=(u=n.steps)==null?void 0:u[e])==null?void 0:c.formMeta)==null?void 0:d.fields)==null?void 0:f.map(y=>y.key)).then(()=>{t(e+1)})},a=l=>{var u,c,d,f;l((f=(d=(c=(u=n.steps)==null?void 0:u[e])==null?void 0:c.formMeta)==null?void 0:d.fields)==null?void 0:f.map(y=>y.key)).then(()=>{t(e-1)})},s=e===o-1;return b.jsx(sn,{initialValues:{name:{first:"Nate",last:"Wang"}},onSubmit:async l=>{await new Promise(u=>setTimeout(u,500)),alert(JSON.stringify(l,null,2))},children:l=>b.jsx(Wo,{dateAdapter:Qa,children:b.jsxs(Qt,{style:{width:"880px"},children:[b.jsx(a7,{activeStep:e,children:n.steps.map((u,c)=>{const d={},f={};return b.jsx($9,{...d,children:b.jsx(Y9,{...f,children:u.title})},c)})}),b.jsx("div",{style:{background:"#f7f7f7",padding:"20px",margin:"30px 0"},children:b.jsx(et,{meta:{...n.steps[e].formMeta,viewMode:e===o-1,initialValues:l.values}})}),e>0&&b.jsx(rt,{onClick:()=>a(l.validateForm),style:{float:"left",marginTop:"5px"},variant:"outlined",children:"Back"}),b.jsx(rt,{style:{float:"right",marginLeft:"15px"},variant:"contained",onClick:s?()=>l.submitForm():()=>{i(l.validateForm)},children:s?"Submit":"Next"}),"   ",b.jsx(rt,{onClick:l.handleReset,style:{float:"right"},variant:"outlined",children:"Reset"})]})})})},sp={simple:{name:"Simple",component:JU,description:"The most simple usage."},basic:{name:"Basic",component:ZU,description:"Basic usage."},"view-mode":{name:"View Mode",component:p7,description:"FormBuilder could also be used as view mode just for displaying information in form layout. It could be used even without Form."},"view-edit":{name:"View / Edit",component:l7,description:"FormBuilder makes it super easy to toggle view/edit mode of a form."},"dynamic-fields":{name:"Dynamic Fields",component:c7,description:"You can dynamically add or remove fields according to the user's input. In this example, if choose other, then a new input appears."},"form-list":{name:"Form List",component:nY,description:"Form list is a common usage of form builder, it allows you to add/remove form fields dynamically."},"field-condition":{name:"Field Condition",component:d7,description:"By condition property, you can control whether to render a field or not. In this example, if choose other, then a new input appears."},"async-data-source":{name:"Async Data Source",component:g7,description:"Some form field widgets may need to load data source if necessary, the sample shows how to do it"},"multiple-columns":{name:"Multiple Columns",component:v7,description:"It's easy to set multiple columns layout for the form. Note it should be able to divide 24"},"complex-layout":{name:"Complex Layout",component:u7,description:"The example shows a complex layout. Similar approach with multiple columns."},"multiple-sections":{name:"Multiple Sections",component:y7,description:"Some times you need to group fields into different fieldset, or need more complex layout. You can use multiple form builders in one form."},validation:{name:"Validation",component:x7,description:b.jsxs("span",{children:["You can use rules property to specify how to validate fields. For more information please go to:"," ",b.jsx("a",{href:"https://ant.design/components/form/#Validation-Rules",target:"_blank",rel:"noopener noreferrer",children:"https://ant.design/components/form/#Validation-Rules"})]})},"form-in-modal":{name:"Form in Modal",component:X7,description:"The example shows how to use form in a dialog to call api and show status in dialog buttons."},coordinated:{name:"Coordinated Controls",component:Z7,description:"You can set field value according to input of another control by use form.setFieldsValue api."},"custom-component":{name:"Custom Component",component:tY,description:"It's easy to create your own form field component, ether to get new capabilities or even just for layout."},mixed:{name:"Mixed",component:oY,description:"Form builder is designed to not limit original antd form api, so you can use them together."},wizard:{name:"Wizard",component:sY,description:"Wizard is an advanced usage of form builder, you can design your own meta structure to support dynamic wizard."}};function lY(){const e=Q5()||"basic",t=()=>{const n=sp[e];if(!n||!n.component)return b.jsxs("span",{style:{color:"red"},children:['Error: example "',e,'" not found.']});const r=n.component;return b.jsxs(Ne.Fragment,{children:[b.jsxs("h1",{children:[n.name,b.jsx("p",{className:"example-description",children:n.description})]}),b.jsx(r,{})]})};return b.jsxs("div",{className:"app",children:[b.jsxs("div",{className:"sider",children:[b.jsxs("h1",{children:[b.jsx("span",{className:"header-name",children:"Formik + MUI"}),b.jsx("span",{className:"example-title",children:"Examples"})]}),b.jsx("ul",{children:Object.keys(sp).map(n=>b.jsx("li",{children:b.jsx("a",{href:`#${n}`,className:e===n?"active":"",children:sp[n].name})},n))}),b.jsxs("div",{className:"social",children:[b.jsx("a",{href:"https://github.com/ebay/nice-form-react",children:b.jsx("img",{src:"https://img.shields.io/github/stars/rekit/nice-form-react?style=social",alt:"Github Repo"})}),b.jsx("br",{}),b.jsx("a",{href:"https://github.com/rekit/nice-form-react",children:b.jsx("img",{src:"https://img.shields.io/badge/API-Reference-green",alt:"api reference"})}),b.jsx("br",{}),b.jsx("a",{href:"https://codesandbox.io/s/github/rekit/nice-form-react/tree/master/examples-v4",children:b.jsx("img",{width:"150px",src:"https://codesandbox.io/static/img/play-codesandbox.svg",alt:"codesandbox"})})]})]}),b.jsxs("div",{className:"example-container",children:[b.jsx("div",{children:t()}),b.jsx("div",{className:"code-container",children:b.jsx(v4,{code:e})})]})]})}At.addAdapter(jI);At.addAdapter(Pm);lp.createRoot(document.getElementById("root")).render(b.jsx(Ne.StrictMode,{children:b.jsx(lY,{})}))});export default uY(); diff --git a/formik/index.html b/formik/index.html index 0433a41..6242308 100644 --- a/formik/index.html +++ b/formik/index.html @@ -4,8 +4,8 @@ - Mui + Formik - + Nice Form Examples - Mui & Formik + diff --git a/index.html b/index.html index 52d6cd0..cdbd275 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,12 @@ -Antd Examples -
-Formik + Material UI Examples + + + + + + + Nice Form - meta based form rendering helper + + +
+ +