@uiw/doc 4.21.27 → 4.21.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/package.json +1 -1
  2. package/web/CONTRIBUTORS.svg +6 -4
  3. package/web/asset-manifest.json +11 -11
  4. package/web/index.html +1 -1
  5. package/web/static/css/{303.c3bdd8db.chunk.css → 303.e9bc1889.chunk.css} +2 -2
  6. package/web/static/css/{303.c3bdd8db.chunk.css.map → 303.e9bc1889.chunk.css.map} +1 -1
  7. package/web/static/js/1358.912c098f.chunk.js +3 -0
  8. package/web/static/js/1358.912c098f.chunk.js.map +1 -0
  9. package/web/static/js/5950.1cb6f878.chunk.js +2 -0
  10. package/web/static/js/5950.1cb6f878.chunk.js.map +1 -0
  11. package/web/static/js/main.083eb2cc.js +2 -0
  12. package/web/static/js/main.083eb2cc.js.map +1 -0
  13. package/web/static/js/vendors-standalone.83c1ff10.chunk.js +3 -0
  14. package/web/static/js/vendors-standalone.83c1ff10.chunk.js.map +1 -0
  15. package/web/static/js/1358.9b1489c2.chunk.js +0 -3
  16. package/web/static/js/1358.9b1489c2.chunk.js.map +0 -1
  17. package/web/static/js/5950.266da78e.chunk.js +0 -2
  18. package/web/static/js/5950.266da78e.chunk.js.map +0 -1
  19. package/web/static/js/main.6053bb3e.js +0 -2
  20. package/web/static/js/main.6053bb3e.js.map +0 -1
  21. package/web/static/js/vendors-standalone.c0ea37cc.chunk.js +0 -3
  22. package/web/static/js/vendors-standalone.c0ea37cc.chunk.js.map +0 -1
  23. /package/web/static/js/{1358.9b1489c2.chunk.js.LICENSE.txt → 1358.912c098f.chunk.js.LICENSE.txt} +0 -0
  24. /package/web/static/js/{vendors-standalone.c0ea37cc.chunk.js.LICENSE.txt → vendors-standalone.83c1ff10.chunk.js.LICENSE.txt} +0 -0
package/web/static/js/5950.266da78e.chunk.js DELETED
@@ -1,2 +0,0 @@
1
- (self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5950],{4934:function(e){function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=function(){return[]},n.resolve=n,n.id=4934,e.exports=n},3173:function(e,n,t){"use strict";t.d(n,{Z:function(){return p}});var r=t(189),l=t(3782),a=t(1473),o=t(7963),u=t(5142),i=t(6150),c=t(6131),s={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"},m=t(9286);function f(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).path,n=/^http/.test(e||"")?e:"https://github.com/uiwjs/uiw/blob/master/".concat(e);return(0,m.jsxs)("div",{className:s.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",n&&(0,m.jsx)("a",{href:n,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,m.jsx)("br",{}),(0,m.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,m.jsx)(c.Divider,{type:"vertical"}),(0,m.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,m.jsx)(c.Divider,{type:"vertical"}),(0,m.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,m.jsx)(c.Divider,{type:"vertical"}),(0,m.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,m.jsx)(c.Divider,{type:"vertical"}),(0,m.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,m.jsx)(c.Divider,{type:"vertical"}),(0,m.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}var d=["inline","node","components","data"],_=["data-meta"],b=function(e){var n,t=e.inline,i=e.node,c=e.components,s=e.data,f=(0,l.Z)(e,d),b=(0,a.useRef)(null),p=f,y=p["data-meta"],h=(0,l.Z)(p,_);if((0,a.useEffect)((function(){if(b.current){var e=b.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(b.current,e)}}),[b]),t||!(0,u.pN)(y))return(0,m.jsx)("code",(0,r.Z)({},f));var w=null===(n=i.position)||void 0===n?void 0:n.start.line,E=(0,u.Mx)(y)||String(w),v=c["".concat(E)];if(E&&"function"===typeof v){var g=s[E].value||"",C=(0,u.aE)(y);return(0,m.jsx)(o.Z,{ref:b,background:C.bg||C.background,disableCode:"true"===C.nocode,disableToolbar:"true"===C.toolbar,style:{marginBottom:10},toolbar:C.title||"Example",code:(0,m.jsx)("pre",(0,r.Z)({},h)),text:g,children:(0,m.jsx)(v,{})})}return(0,m.jsx)("code",(0,r.Z)({},h))};function p(e){return(0,m.jsxs)(a.Fragment,{children:[(0,m.jsx)(i.Z,{className:s.markdownWrap,source:e.source||"",disableCopy:!0,warpperElement:{"data-color-mode":"light"},components:{code:function(n){return(0,m.jsx)(b,(0,r.Z)((0,r.Z)({},n),e))}}}),(0,m.jsx)(f,{path:e.path})]})}},1354:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return u}});var r=t(189),l={components:{18:function(){function e(n){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(n)}var n=function(n,t){if(!t&&n&&n.__esModule)return n;if(null===n||"object"!==e(n)&&"function"!==typeof n)return{default:n};var r=l(t);if(r&&r.has(n))return r.get(n);var a={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in n)if("default"!==u&&Object.prototype.hasOwnProperty.call(n,u)){var i=o?Object.getOwnPropertyDescriptor(n,u):null;i&&(i.get||i.set)?Object.defineProperty(a,u,i):a[u]=n[u]}a.default=n,r&&r.set(n,a);return a}(t(1473)),r=t(6131);function l(e){if("function"!==typeof WeakMap)return null;var n=new WeakMap,t=new WeakMap;return(l=function(e){return e?t:n})(e)}return function(){var e=(0,n.useRef)();return n.default.createElement("div",null,n.default.createElement(r.Form,{ref:e,onChange:function(e){var n=e.initial,t=e.current;console.log("onChange",n,t)},onSubmit:function(e){var n=e.initial,t=e.current;t.name===n.name?r.Notify.error({title:"\u63d0\u4ea4\u5931\u8d25\uff01",description:"\u8868\u5355\u63d0\u4ea4\u5185\u5bb9\u4e3a\u7a7a\uff01"}):r.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\uff01",description:"\u59d3\u540d\u4e3a\uff1a".concat(t.name,"\uff0c\u63d0\u4ea4\u5b8c\u6210\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01")})},fields:{name:{label:"\u59d3\u540d",children:n.default.createElement(r.Input,{placeholder:"\u8bf7\u8f93\u5165\u59d3\u540d"})}}},(function(e){var t=e.fields,l=e.state,a=e.canSubmit;return n.default.createElement("div",null,n.default.createElement(r.Row,null,n.default.createElement(r.Col,{style:{maxWidth:300}},t.name)),n.default.createElement(r.Row,null,n.default.createElement(r.Col,null,n.default.createElement(r.Button,{disabled:!a(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"))),n.default.createElement(r.Row,null,n.default.createElement(r.Col,null,JSON.stringify(l.current))))})),n.default.createElement(r.Button,{type:"primary",onClick:function(){e.current.onSubmit()}},"submit"),n.default.createElement(r.Button,{type:"primary",onClick:function(){e.current.resetForm()}},"resetForm"),n.default.createElement(r.Button,{type:"primary",onClick:function(){console.log("getFieldValues",e.current.getFieldValues())}},"getValues"),n.default.createElement(r.Button,{type:"primary",onClick:function(){e.current.setFieldValue("name","UIW")}},"setFieldValue"))}}(),99:function(){var e,n=(e=t(1473))&&e.__esModule?e:{default:e},r=t(6131);function l(e){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l(e)}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e,n,t){return(n=function(e){var n=function(e,n){if("object"!==l(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==l(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"===l(n)?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}return function(){return n.default.createElement(r.Form,{onSubmit:function(e){e.initial;var n=e.current,t={};if(n.userName.startsWith("u")&&(t.userName="\u59d3\u540d ".concat(n.userName," \u4e0d\u80fd\u4ee5 \u2018u\u2019 \u5f00\u5934")),n.checkboxOne||(t.checkboxOne="\u4e00\u4e2a\u591a\u9009\u6761\u4ef6 \u4e3a\u5fc5\u586b"),n.terms||(t.terms="\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e"),Object.keys(t).length>0){var l=new Error;throw l.filed=t,l}r.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\uff01",description:"\u59d3\u540d\u4e3a\uff1a".concat(n.userName,"\uff0c\u63d0\u4ea4\u5b8c\u6210\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01")})},onSubmitError:function(e){return e.filed?function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}({},e.filed):null},fields:{userName:{initialValue:"uiw",label:"\u59d3\u540d",children:n.default.createElement(r.Input,{type:"text"}),help:"\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f"},age:{initialValue:"9",label:"\u5e74\u9f84",children:n.default.createElement(r.Input,{type:"number"})},checkbox:{initialValue:["\u56db\u5ddd\u83dc"],label:"\u9009\u62e9\u4f60\u60f3\u5403\u7684\u83dc",children:n.default.createElement(r.Checkbox.Group,null,n.default.createElement("div",null,"\u83dc\u7cfb"),n.default.createElement(r.Checkbox,{value:"\u56db\u5ddd\u83dc"},"\u56db\u5ddd\u83dc"),n.default.createElement(r.Checkbox,{value:"\u6e56\u5317\u83dc"},"\u6e56\u5317\u83dc"),n.default.createElement(r.Checkbox,{value:"\u897f\u5317\u83dc"},"\u897f\u5317\u83dc"),n.default.createElement(r.Checkbox,{value:"\u65b0\u7586\u83dc"},"\u65b0\u7586\u83dc"),n.default.createElement(r.Checkbox,{value:"\u4e1c\u5317\u83dc"},"\u4e1c\u5317\u83dc"),n.default.createElement("div",{style:{marginTop:10}},"\u5bb6\u5e38\u83dc"),n.default.createElement(r.Checkbox,{value:"\u7ea2\u70e7\u6b66\u660c\u9c7c"},"\u7ea2\u70e7\u6b66\u660c\u9c7c"),n.default.createElement(r.Checkbox,{value:"\u9ebb\u5a46\u8c46\u8150"},"\u9ebb\u5a46\u8c46\u8150"),n.default.createElement(r.Checkbox,{value:"\u5317\u4eac\u70e4\u9e2d"},"\u5317\u4eac\u70e4\u9e2d"))},checkboxOne:{inline:!0,label:"\u4e00\u4e2a\u591a\u9009\u6761\u4ef6",children:n.default.createElement(r.Checkbox,{value:"1"},"\u56db\u5ddd\u83dc")},switch:{inline:!0,initialValue:!0,label:"\u5f00\u542f",children:n.default.createElement(r.Switch,{size:"small"})},radioGroup:{inline:!0,initialValue:"\u7537",label:"\u5355\u9009",children:n.default.createElement(r.RadioGroup,{name:"other"},n.default.createElement(r.Radio,{value:"\u7537"},"\u7537"),n.default.createElement(r.Radio,{value:"\u5973"},"\u5973"),n.default.createElement(r.Radio,{value:"\u4eba\u5996",disabled:!0},"\u4eba\u5996"),n.default.createElement(r.Radio,{value:"\u672a\u77e5"},"\u672a\u77e5"))},textarea:{initialValue:"",label:"\u591a\u884c\u6587\u672c\u8f93\u5165\u6846",children:n.default.createElement(r.Textarea,{placeholder:"\u8bf7\u8f93\u5165\u5185\u5bb9"})},terms:{validator:function(e){return e?null:"\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e"},style:{marginBottom:0},children:n.default.createElement(r.Checkbox,{value:"1"},"\u5df2\u9605\u8bfb\u5e76\u540c\u610f",n.default.createElement("a",{href:"#"},"\u670d\u52a1\u6761\u6b3e"))}}},(function(e){var t=e.fields,l=e.state,a=e.canSubmit,o=e.resetForm;return console.log("fields:--\x3e",l),n.default.createElement("div",{style:{maxWidth:500}},n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,null,t.userName),n.default.createElement(r.Col,null,t.age)),n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,null,t.checkbox),n.default.createElement(r.Col,null,t.checkboxOne)),n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,null,t.radioGroup)),n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,null,t.switch)),n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,null,t.textarea)),n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,{style:{padding:"5px 0 10px 0"}},t.terms)),n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,{fixed:!0},n.default.createElement(r.Button,{disabled:!a(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"),n.default.createElement(r.Button,{type:"light",onClick:o},"\u91cd\u7f6e\u8868\u5355"))),n.default.createElement(r.Row,null,n.default.createElement(r.Col,null,n.default.createElement("pre",{style:{padding:"10px 0 0 10px"}},JSON.stringify(l.current,null,2)))))}))}}(),250:function(){var e,n=(e=t(1473))&&e.__esModule?e:{default:e},r=t(6131);function l(e){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l(e)}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e,n,t){return(n=function(e){var n=function(e,n){if("object"!==l(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==l(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"===l(n)?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}return function(){return n.default.createElement("div",null,n.default.createElement(r.Form,{onSubmit:function(e){var n=e.initial,t=e.current,l={};if(t.username||(l.username="\u7528\u6237\u540d\u4e0d\u80fd\u4e3a\u7a7a\uff01"),t.password||(l.password="\u5bc6\u7801\u4e0d\u80fd\u4e3a\u7a7a\uff01"),Object.keys(l).length>0){var a=new Error;throw a.filed=l,r.Notify.error({title:"\u63d0\u4ea4\u5931\u8d25\uff01",description:"\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01"}),a}console.log("--\x3e>",n,t),r.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\uff01",description:"\u606d\u559c\u4f60\u767b\u5f55\u6210\u529f\uff01"})},onSubmitError:function(e){return e.filed?function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}({},e.filed):null},fields:{username:{labelClassName:"fieldLabel",labelFor:"username-inline",children:n.default.createElement(r.Input,{preIcon:"user",id:"username-inline"})},password:{labelClassName:"fieldLabel",labelFor:"password-inline",children:n.default.createElement(r.Input,{preIcon:"lock",id:"password-inline",type:"password"})}}},(function(e){var t=e.fields,l=e.state,a=e.canSubmit,o=e.resetForm;return console.log("fields:",l),n.default.createElement("div",null,n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,{fixed:!0},t.username),n.default.createElement(r.Col,{fixed:!0},t.password)),n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,null,n.default.createElement(r.Button,{disabled:!a(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"),n.default.createElement(r.Button,{type:"danger",onClick:o},"\u91cd\u7f6e\u8868\u5355"))))})))}}(),319:function(){var e,n=(e=t(1473))&&e.__esModule?e:{default:e},r=t(6131);return function(){return n.default.createElement("div",null,n.default.createElement(r.Form,{onSubmit:function(e){var n=e.initial,t=e.current;console.log("--\x3e>",n,t)},fields:{username:{labelClassName:"fieldLabel",labelStyle:{width:60},labelFor:"username",children:n.default.createElement(r.Input,{preIcon:"user",id:"username"})},password:{labelClassName:"fieldLabel",labelStyle:{width:60},labelFor:"password",children:n.default.createElement(r.Input,{preIcon:"lock",id:"password",type:"password"})},terms:{validator:function(e){return e?null:"\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e"},children:n.default.createElement(r.Checkbox,{value:"1"},"\u5df2\u9605\u8bfb\u5e76\u540c\u610f")}}},(function(e){var t=e.fields,l=e.state,a=e.canSubmit;return console.log("fields:",l),n.default.createElement("div",null,n.default.createElement(r.Row,null,n.default.createElement(r.Col,{fixed:!0},t.username)),n.default.createElement(r.Row,null,n.default.createElement(r.Col,{fixed:!0},t.password)),n.default.createElement(r.Row,null,n.default.createElement(r.Col,{fixed:!0,align:"middle"},t.terms),n.default.createElement(r.Col,{fixed:!0,style:{marginTop:-4}},n.default.createElement("a",{href:"#"},"\u670d\u52a1\u6761\u6b3e"))),n.default.createElement(r.Row,null,n.default.createElement(r.Col,{fixed:!0},n.default.createElement(r.Button,{disabled:!a(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"))))})))}}(),379:function(){var e,n=(e=t(1473))&&e.__esModule?e:{default:e},r=t(6131);return function(){return n.default.createElement("div",null,n.default.createElement(r.Form,{onSubmit:function(e){var n=e.initial,t=e.current;console.log("--\x3e>",n,t)},fields:{firstName:{labelClassName:"fieldLabel",labelStyle:{width:60},inline:!0,label:"\u59d3\u6c0f",children:n.default.createElement(r.Input,null)},lastName:{labelClassName:"fieldLabel",labelStyle:{width:60},initialValue:"\u5148\u751f",inline:!0,label:"\u540d\u5b57",children:n.default.createElement(r.Input,null)},email:{labelClassName:"fieldLabel",labelStyle:{width:60},validator:function(e){return e&&e.length<2?"Password must be 8+ characters":null},inline:!0,label:"Email",children:n.default.createElement(r.Input,null)},select:{labelClassName:"fieldLabel",labelStyle:{width:60},inline:!0,label:"\u9009\u62e9\u5668",children:n.default.createElement(r.Select,null,n.default.createElement(r.Select.Option,null,"Choose an item..."),n.default.createElement(r.Select.Option,{value:"1"},"One"),n.default.createElement(r.Select.Option,{value:"2"},"Two"),n.default.createElement(r.Select.Option,{value:"3"},"Three"),n.default.createElement(r.Select.Option,{value:"4"},"Four"))}}},(function(e){var t=e.fields,l=e.state,a=e.canSubmit;return console.log("fields:",l),n.default.createElement("div",null,n.default.createElement(r.Row,{gutter:10,style:{marginBottom:10}},n.default.createElement(r.Col,null,t.firstName),n.default.createElement(r.Col,null,t.lastName)),n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,null,t.email),n.default.createElement(r.Col,null,t.select)),n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,null),n.default.createElement(r.Col,{fixed:!0,align:"bottom"},n.default.createElement(r.Button,{disabled:!a(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"))))})))}}(),468:function(){function e(n){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(n)}var n,r=(n=t(1473))&&n.__esModule?n:{default:n},l=t(6131);function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(n,t,r){return(t=function(n){var t=function(n,t){if("object"!==e(n)||null===n)return n;var r=n[Symbol.toPrimitive];if(void 0!==r){var l=r.call(n,t||"default");if("object"!==e(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(n)}(n,"string");return"symbol"===e(t)?t:String(t)}(t))in n?Object.defineProperty(n,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[t]=r,n}function u(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,l,a,o,u=[],i=!0,c=!1;try{if(a=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;i=!1}else for(;!(i=(r=a.call(t)).done)&&(u.push(r.value),u.length!==n);i=!0);}catch(s){c=!0,l=s}finally{try{if(!i&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(c)throw l}}return u}}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return i(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return i(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function c(e){var n=e.option,t=void 0===n?[]:n,a=e.onChange,o=u(r.default.useState(e.value),2),i=o[0],c=o[1],s=u(r.default.useState(!1),2),m=s[0],f=s[1];r.default.useEffect((function(){i!==e.value&&c(e.value)}),[e.value]);var d=t.find((function(e){return i===e.value}));return r.default.createElement(l.Dropdown,{trigger:"click",onVisibleChange:function(e){return f(e)},isOpen:m,menu:r.default.createElement(l.Menu,{bordered:!0,style:{minWidth:120}},t.map((function(e,n){return r.default.createElement(l.Menu.Item,{active:i===e.value,key:n,text:e.label,onClick:function(){c(e.value),f(!1),a&&a(e.value)}})})))},r.default.createElement(l.Button,{style:{boxShadow:"inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1)"},type:"link"},d.label,r.default.createElement(l.Icon,{type:m?"up":"down"})))}return function(){return r.default.createElement("div",null,r.default.createElement(l.Form,{onSubmitError:function(e){return e.filed?function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}({},e.filed):null},onSubmit:function(e){e.initial;var n=e.current;console.log("~~~",n);var t={};if(n.select||(t.select="\u5185\u5bb9\u4e3a\u7a7a\uff0c\u8bf7\u8f93\u5165\u5185\u5bb9"),Object.keys(t).length>0){var r=new Error;throw r.filed=t,l.Notify.error({title:"\u63d0\u4ea4\u5931\u8d25\uff01",description:"\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01"}),r}l.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\uff01",description:"\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u5185\u5bb9\u4e3a\uff1a".concat(n.select,"\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01")})},fields:{select:{initialValue:0,children:r.default.createElement(c,{option:[{label:"\u8bf7\u9009\u62e9",value:0},{label:"\u7ecf\u6d4e\u8231",value:1},{label:"\u8c6a\u534e\u7ecf\u6d4e\u8231",value:2},{label:"\u5546\u52a1\u8231",value:3},{label:"\u5934\u7b49\u8231",value:4}]})}}},(function(e){var n=e.fields,t=(e.state,e.canSubmit);return r.default.createElement("div",null,r.default.createElement(l.Row,null,r.default.createElement(l.Col,{style:{maxWidth:300}},n.select)),r.default.createElement(l.Row,null,r.default.createElement(l.Col,{fixed:!0},r.default.createElement(l.Button,{disabled:!t(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"))))})))}}(),585:function(){var e,n=(e=t(1473))&&e.__esModule?e:{default:e},r=t(6131);function l(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,l,a,o,u=[],i=!0,c=!1;try{if(a=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;i=!1}else for(;!(i=(r=a.call(t)).done)&&(u.push(r.value),u.length!==n);i=!0);}catch(s){c=!0,l=s}finally{try{if(!i&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(c)throw l}}return u}}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return a(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return a(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}return function(){var e=l(n.default.useState({}),2),t=e[0],a=e[1];return n.default.createElement(r.Form,{onSubmit:function(e,n){n&&n.preventDefault();var t=new FormData(n.target),r={};t.forEach((function(e,n){r[n]=e})),a(r)},onReset:function(){return a({})}},n.default.createElement(r.FormItem,{label:"\u53ef\u9009\u5b57\u6bb5",labelFor:"item-basic-input",help:n.default.createElement("span",null,"\u5728\u4e0a\u9762\u7684\u5b57\u6bb5\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c")},n.default.createElement(r.Input,{id:"item-basic-input",name:"basic",type:"text"})),n.default.createElement(r.FormItem,{label:"\u7528\u6237\u540d",labelFor:"item-username-input",help:!t.username||t.username.length<8?"\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002":"\u7528\u6237\u540d\u6b63\u786e \u221a ",hasError:!t.username||t.username.length<8},n.default.createElement(r.Input,{id:"item-username-input",name:"username",type:"text"})),n.default.createElement(r.FormItem,null,n.default.createElement(r.Button,{type:"success",htmlType:"submit"}," Submit "),n.default.createElement(r.Button,{type:"light",htmlType:"reset"}," Reset ")),n.default.createElement("pre",null,JSON.stringify(t,null,2)))}}(),634:function(){var e,n=(e=t(1473))&&e.__esModule?e:{default:e},r=t(6131);return function(){return n.default.createElement(r.Form,null,n.default.createElement(r.FormItem,{inline:!0,label:"\u53ef\u9009\u5b57\u6bb5",labelFor:"basic-input-inline",help:n.default.createElement("span",null,"\u5728\u4e0a\u9762\u7684\u5b57\u6bb5\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c"),onChange:function(){console.log("TEST::")}},n.default.createElement(r.Input,{id:"basic-input-inline",name:"basic",type:"text"})),n.default.createElement(r.FormItem,{inline:!0,label:"\u7528\u6237\u540d",labelFor:"username-input-inline",labelClassName:"username",help:"\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002",hasError:!0},n.default.createElement(r.Input,{id:"username-input-inline",name:"username",type:"text"})))}}()},data:{18:{name:18,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\nvar _react = _interopRequireWildcard(require("react"));\nvar _uiw = require("uiw");\nfunction _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }\nfunction _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\nreturn function Demo() {\n var form = (0, _react.useRef)();\n var onSubmit = function onSubmit() {\n form.current.onSubmit();\n };\n var resetForm = function resetForm() {\n form.current.resetForm();\n };\n var getFieldValues = function getFieldValues() {\n console.log(\'getFieldValues\', form.current.getFieldValues());\n };\n var setFieldValue = function setFieldValue() {\n form.current.setFieldValue(\'name\', \'UIW\');\n };\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n ref: form,\n onChange: function onChange(_ref) {\n var initial = _ref.initial,\n current = _ref.current;\n console.log(\'onChange\', initial, current);\n },\n onSubmit: function onSubmit(_ref2) {\n var initial = _ref2.initial,\n current = _ref2.current;\n if (current.name === initial.name) {\n _uiw.Notify.error({\n title: \'\u63d0\u4ea4\u5931\u8d25\uff01\',\n description: "\\u8868\\u5355\\u63D0\\u4EA4\\u5185\\u5BB9\\u4E3A\\u7A7A\\uFF01"\n });\n } else {\n _uiw.Notify.success({\n title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n description: "\\u59D3\\u540D\\u4E3A\\uFF1A".concat(current.name, "\\uFF0C\\u63D0\\u4EA4\\u5B8C\\u6210\\uFF0C\\u5C06\\u81EA\\u52A8\\u586B\\u5145\\u521D\\u59CB\\u5316\\u503C\\uFF01")\n });\n }\n },\n fields: {\n name: {\n label: \'\u59d3\u540d\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n placeholder: "\\u8BF7\\u8F93\\u5165\\u59D3\\u540D"\n })\n }\n }\n }, function (_ref3) {\n var fields = _ref3.fields,\n state = _ref3.state,\n canSubmit = _ref3.canSubmit;\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n style: {\n maxWidth: 300\n }\n }, fields.name)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n disabled: !canSubmit(),\n type: "primary",\n htmlType: "submit"\n }, "\\u63D0\\u4EA4"))), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, JSON.stringify(state.current))));\n }), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary",\n onClick: onSubmit\n }, "submit"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary",\n onClick: resetForm\n }, "resetForm"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary",\n onClick: getFieldValues\n }, "getValues"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary",\n onClick: setFieldValue\n }, "setFieldValue"));\n};',language:"jsx",value:"import React, { useState, useRef } from \"react\";\nimport { Form, Input, Row, Col, Slider, Button, Notify } from 'uiw';\n\nexport default function Demo() {\n const form = useRef()\n\n const onSubmit = () => {\n form.current.onSubmit()\n }\n const resetForm = () => {\n form.current.resetForm()\n }\n const getFieldValues = () => {\n console.log('getFieldValues', form.current.getFieldValues())\n }\n\n const setFieldValue=()=>{\n form.current.setFieldValue('name','UIW')\n }\n\n return (\n <div>\n <Form\n ref={form}\n onChange={({ initial, current }) => {\n console.log('onChange', initial, current);\n }}\n onSubmit={({ initial, current }) => {\n if (current.name === initial.name) {\n Notify.error({\n title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u5185\u5bb9\u4e3a\u7a7a\uff01`,\n });\n } else {\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u59d3\u540d\u4e3a\uff1a${current.name}\uff0c\u63d0\u4ea4\u5b8c\u6210\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }\n }}\n fields={{\n name: {\n label: '\u59d3\u540d',\n children: <Input placeholder=\"\u8bf7\u8f93\u5165\u59d3\u540d\" />\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row>\n <Col style={{ maxWidth: 300 }}>{fields.name}</Col>\n </Row>\n <Row>\n <Col>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n {JSON.stringify(state.current)}\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n <Button type=\"primary\" onClick={onSubmit} >submit</Button>\n <Button type=\"primary\" onClick={resetForm}>resetForm</Button>\n <Button type=\"primary\" onClick={getFieldValues}>getValues</Button>\n <Button type=\"primary\" onClick={setFieldValue}>setFieldValue</Button>\n </div>\n )\n}"},99:{name:99,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n onSubmit: function onSubmit(_ref) {\n var initial = _ref.initial,\n current = _ref.current;\n var errorObj = {};\n if (current.userName.startsWith(\'u\')) {\n errorObj.userName = "\\u59D3\\u540D ".concat(current.userName, " \\u4E0D\\u80FD\\u4EE5 \\u2018u\\u2019 \\u5F00\\u5934");\n }\n if (!current.checkboxOne) {\n errorObj.checkboxOne = \'\u4e00\u4e2a\u591a\u9009\u6761\u4ef6 \u4e3a\u5fc5\u586b\';\n }\n if (!current.terms) {\n errorObj.terms = \'\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e\';\n }\n if (Object.keys(errorObj).length > 0) {\n var err = new Error();\n err.filed = errorObj;\n throw err;\n }\n _uiw.Notify.success({\n title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n description: "\\u59D3\\u540D\\u4E3A\\uFF1A".concat(current.userName, "\\uFF0C\\u63D0\\u4EA4\\u5B8C\\u6210\\uFF0C\\u5C06\\u81EA\\u52A8\\u586B\\u5145\\u521D\\u59CB\\u5316\\u503C\\uFF01")\n });\n },\n onSubmitError: function onSubmitError(error) {\n if (error.filed) {\n return _objectSpread({}, error.filed);\n }\n return null;\n },\n fields: {\n userName: {\n initialValue: \'uiw\',\n label: \'\u59d3\u540d\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n type: "text"\n }),\n help: \'\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f\'\n },\n age: {\n initialValue: \'9\',\n label: \'\u5e74\u9f84\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n type: "number"\n })\n },\n checkbox: {\n initialValue: [\'\u56db\u5ddd\u83dc\'],\n label: \'\u9009\u62e9\u4f60\u60f3\u5403\u7684\u83dc\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox.Group, null, /*#__PURE__*/_react["default"].createElement("div", null, "\\u83DC\\u7CFB"), /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n value: "\\u56DB\\u5DDD\\u83DC"\n }, "\\u56DB\\u5DDD\\u83DC"), /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n value: "\\u6E56\\u5317\\u83DC"\n }, "\\u6E56\\u5317\\u83DC"), /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n value: "\\u897F\\u5317\\u83DC"\n }, "\\u897F\\u5317\\u83DC"), /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n value: "\\u65B0\\u7586\\u83DC"\n }, "\\u65B0\\u7586\\u83DC"), /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n value: "\\u4E1C\\u5317\\u83DC"\n }, "\\u4E1C\\u5317\\u83DC"), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n marginTop: 10\n }\n }, "\\u5BB6\\u5E38\\u83DC"), /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n value: "\\u7EA2\\u70E7\\u6B66\\u660C\\u9C7C"\n }, "\\u7EA2\\u70E7\\u6B66\\u660C\\u9C7C"), /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n value: "\\u9EBB\\u5A46\\u8C46\\u8150"\n }, "\\u9EBB\\u5A46\\u8C46\\u8150"), /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n value: "\\u5317\\u4EAC\\u70E4\\u9E2D"\n }, "\\u5317\\u4EAC\\u70E4\\u9E2D"))\n },\n checkboxOne: {\n inline: true,\n label: \'\u4e00\u4e2a\u591a\u9009\u6761\u4ef6\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n value: "1"\n }, "\\u56DB\\u5DDD\\u83DC")\n },\n "switch": {\n inline: true,\n initialValue: true,\n label: \'\u5f00\u542f\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Switch, {\n size: "small"\n })\n },\n radioGroup: {\n inline: true,\n initialValue: \'\u7537\',\n label: \'\u5355\u9009\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.RadioGroup, {\n name: "other"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n value: "\\u7537"\n }, "\\u7537"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n value: "\\u5973"\n }, "\\u5973"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n value: "\\u4EBA\\u5996",\n disabled: true\n }, "\\u4EBA\\u5996"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n value: "\\u672A\\u77E5"\n }, "\\u672A\\u77E5"))\n },\n textarea: {\n initialValue: \'\',\n label: \'\u591a\u884c\u6587\u672c\u8f93\u5165\u6846\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Textarea, {\n placeholder: "\\u8BF7\\u8F93\\u5165\\u5185\\u5BB9"\n })\n },\n terms: {\n validator: function validator(currentValue) {\n return !currentValue ? \'\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e\' : null;\n },\n style: {\n marginBottom: 0\n },\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n value: "1"\n }, "\\u5DF2\\u9605\\u8BFB\\u5E76\\u540C\\u610F", /*#__PURE__*/_react["default"].createElement("a", {\n href: "#"\n }, "\\u670D\\u52A1\\u6761\\u6B3E"))\n }\n }\n }, function (_ref2) {\n var fields = _ref2.fields,\n state = _ref2.state,\n canSubmit = _ref2.canSubmit,\n resetForm = _ref2.resetForm;\n console.log(\'fields:--\x3e\', state);\n return /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n maxWidth: 500\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.userName), /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.age)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.checkbox), /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.checkboxOne)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.radioGroup)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields["switch"])), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.textarea)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n style: {\n padding: \'5px 0 10px 0\'\n }\n }, fields.terms)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n disabled: !canSubmit(),\n type: "primary",\n htmlType: "submit"\n }, "\\u63D0\\u4EA4"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "light",\n onClick: resetForm\n }, "\\u91CD\\u7F6E\\u8868\\u5355"))), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, /*#__PURE__*/_react["default"].createElement("pre", {\n style: {\n padding: \'10px 0 0 10px\'\n }\n }, JSON.stringify(state.current, null, 2)))));\n });\n};',language:"jsx",value:"import React from 'react';\nimport { Form, Input, Notify, Checkbox, Switch, RadioGroup, Radio, Textarea, Row, Col, Button } from 'uiw';\n\nexport default function Demo() {\n return(\n <Form\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (current.userName.startsWith('u')) {\n errorObj.userName = `\u59d3\u540d ${current.userName} \u4e0d\u80fd\u4ee5 \u2018u\u2019 \u5f00\u5934`;\n }\n if (!current.checkboxOne) {\n errorObj.checkboxOne = '\u4e00\u4e2a\u591a\u9009\u6761\u4ef6 \u4e3a\u5fc5\u586b';\n }\n if (!current.terms) {\n errorObj.terms = '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n throw err;\n }\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u59d3\u540d\u4e3a\uff1a${current.userName}\uff0c\u63d0\u4ea4\u5b8c\u6210\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n fields={{\n userName: {\n initialValue: 'uiw',\n label: '\u59d3\u540d',\n children: <Input type=\"text\" />,\n help: '\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f'\n },\n age: {\n initialValue: '9',\n label: '\u5e74\u9f84',\n children: <Input type=\"number\" />\n },\n checkbox: {\n initialValue: ['\u56db\u5ddd\u83dc'],\n label: '\u9009\u62e9\u4f60\u60f3\u5403\u7684\u83dc',\n children: (\n <Checkbox.Group>\n <div>\u83dc\u7cfb</div>\n <Checkbox value=\"\u56db\u5ddd\u83dc\">\u56db\u5ddd\u83dc</Checkbox>\n <Checkbox value=\"\u6e56\u5317\u83dc\">\u6e56\u5317\u83dc</Checkbox>\n <Checkbox value=\"\u897f\u5317\u83dc\">\u897f\u5317\u83dc</Checkbox>\n <Checkbox value=\"\u65b0\u7586\u83dc\">\u65b0\u7586\u83dc</Checkbox>\n <Checkbox value=\"\u4e1c\u5317\u83dc\">\u4e1c\u5317\u83dc</Checkbox>\n <div style={{ marginTop: 10 }}>\u5bb6\u5e38\u83dc</div>\n <Checkbox value=\"\u7ea2\u70e7\u6b66\u660c\u9c7c\">\u7ea2\u70e7\u6b66\u660c\u9c7c</Checkbox>\n <Checkbox value=\"\u9ebb\u5a46\u8c46\u8150\">\u9ebb\u5a46\u8c46\u8150</Checkbox>\n <Checkbox value=\"\u5317\u4eac\u70e4\u9e2d\">\u5317\u4eac\u70e4\u9e2d</Checkbox>\n </Checkbox.Group>\n )\n },\n checkboxOne: {\n inline: true,\n label: '\u4e00\u4e2a\u591a\u9009\u6761\u4ef6',\n children: <Checkbox value=\"1\">\u56db\u5ddd\u83dc</Checkbox>\n },\n switch: {\n inline: true,\n initialValue: true,\n label: '\u5f00\u542f',\n children: <Switch size=\"small\" />\n },\n radioGroup: {\n inline: true,\n initialValue: '\u7537',\n label: '\u5355\u9009',\n children: (\n <RadioGroup name=\"other\">\n <Radio value=\"\u7537\">\u7537</Radio>\n <Radio value=\"\u5973\">\u5973</Radio>\n <Radio value=\"\u4eba\u5996\" disabled>\u4eba\u5996</Radio>\n <Radio value=\"\u672a\u77e5\">\u672a\u77e5</Radio>\n </RadioGroup>\n )\n },\n textarea: {\n initialValue: '',\n label: '\u591a\u884c\u6587\u672c\u8f93\u5165\u6846',\n children: <Textarea placeholder=\"\u8bf7\u8f93\u5165\u5185\u5bb9\" />\n },\n terms: {\n validator: (currentValue) => {\n return !currentValue ? '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e' : null;\n },\n style: { marginBottom: 0 },\n children: <Checkbox value=\"1\">\u5df2\u9605\u8bfb\u5e76\u540c\u610f<a href=\"#\">\u670d\u52a1\u6761\u6b3e</a></Checkbox>\n }\n }}\n >\n {({ fields, state, canSubmit, resetForm }) => {\n console.log('fields:--\x3e', state);\n return (\n <div style={{ maxWidth: 500 }}>\n <Row gutter={10}>\n <Col>{fields.userName}</Col>\n <Col>{fields.age}</Col>\n </Row>\n <Row gutter={10}>\n <Col>{fields.checkbox}</Col>\n <Col>{fields.checkboxOne}</Col>\n </Row>\n <Row gutter={10}>\n <Col>{fields.radioGroup}</Col>\n </Row>\n <Row gutter={10}>\n <Col>{fields.switch}</Col>\n </Row>\n <Row gutter={10}>\n <Col>{fields.textarea}</Col>\n </Row>\n <Row gutter={10}>\n <Col style={{ padding: '5px 0 10px 0' }}>\n {fields.terms}\n </Col>\n </Row>\n <Row gutter={10}>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n <Button type=\"light\" onClick={resetForm}>\u91cd\u7f6e\u8868\u5355</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: '10px 0 0 10px' }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n )\n}"},250:{name:250,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n onSubmit: function onSubmit(_ref) {\n var initial = _ref.initial,\n current = _ref.current;\n var errorObj = {};\n if (!current.username) {\n errorObj.username = \'\u7528\u6237\u540d\u4e0d\u80fd\u4e3a\u7a7a\uff01\';\n }\n if (!current.password) {\n errorObj.password = \'\u5bc6\u7801\u4e0d\u80fd\u4e3a\u7a7a\uff01\';\n }\n if (Object.keys(errorObj).length > 0) {\n var err = new Error();\n err.filed = errorObj;\n _uiw.Notify.error({\n title: \'\u63d0\u4ea4\u5931\u8d25\uff01\',\n description: \'\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01\'\n });\n throw err;\n }\n console.log(\'--\x3e>\', initial, current);\n _uiw.Notify.success({\n title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n description: \'\u606d\u559c\u4f60\u767b\u5f55\u6210\u529f\uff01\'\n });\n },\n onSubmitError: function onSubmitError(error) {\n if (error.filed) {\n return _objectSpread({}, error.filed);\n }\n return null;\n },\n fields: {\n username: {\n labelClassName: \'fieldLabel\',\n labelFor: \'username-inline\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n preIcon: "user",\n id: "username-inline"\n })\n },\n password: {\n labelClassName: \'fieldLabel\',\n labelFor: \'password-inline\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n preIcon: "lock",\n id: "password-inline",\n type: "password"\n })\n }\n }\n }, function (_ref2) {\n var fields = _ref2.fields,\n state = _ref2.state,\n canSubmit = _ref2.canSubmit,\n resetForm = _ref2.resetForm;\n console.log(\'fields:\', state);\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, fields.username), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, fields.password)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n disabled: !canSubmit(),\n type: "primary",\n htmlType: "submit"\n }, "\\u63D0\\u4EA4"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "danger",\n onClick: resetForm\n }, "\\u91CD\\u7F6E\\u8868\\u5355"))));\n }));\n};',language:"jsx",value:"import React from 'react';\nimport { Form, Input, Row, Col, Notify, Button } from 'uiw';\n\nexport default function Demo() {\n return (\n <div>\n <Form\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (!current.username) {\n errorObj.username = '\u7528\u6237\u540d\u4e0d\u80fd\u4e3a\u7a7a\uff01';\n }\n if (!current.password) {\n errorObj.password = '\u5bc6\u7801\u4e0d\u80fd\u4e3a\u7a7a\uff01';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n throw err;\n }\n console.log('--\x3e>', initial, current);\n Notify.success({ title: '\u63d0\u4ea4\u6210\u529f\uff01', description: '\u606d\u559c\u4f60\u767b\u5f55\u6210\u529f\uff01' });\n }}\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n fields={{\n username: {\n labelClassName: 'fieldLabel',\n labelFor: 'username-inline',\n children: <Input preIcon=\"user\" id=\"username-inline\" />\n },\n password: {\n labelClassName: 'fieldLabel',\n labelFor: 'password-inline',\n children: <Input preIcon=\"lock\" id=\"password-inline\" type=\"password\" />\n },\n }}\n >\n {({ fields, state, canSubmit, resetForm }) => {\n console.log('fields:', state);\n return (\n <div>\n <Row gutter={10}>\n <Col fixed>{fields.username}</Col>\n <Col fixed>{fields.password}</Col>\n </Row>\n <Row gutter={10}>\n <Col>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n <Button type=\"danger\" onClick={resetForm}>\u91cd\u7f6e\u8868\u5355</Button>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n );\n}"},319:{name:319,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n onSubmit: function onSubmit(_ref) {\n var initial = _ref.initial,\n current = _ref.current;\n console.log(\'--\x3e>\', initial, current);\n },\n fields: {\n username: {\n labelClassName: \'fieldLabel\',\n labelStyle: {\n width: 60\n },\n labelFor: \'username\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n preIcon: "user",\n id: "username"\n })\n },\n password: {\n labelClassName: \'fieldLabel\',\n labelStyle: {\n width: 60\n },\n labelFor: \'password\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n preIcon: "lock",\n id: "password",\n type: "password"\n })\n },\n terms: {\n validator: function validator(currentValue) {\n return !currentValue ? \'\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e\' : null;\n },\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n value: "1"\n }, "\\u5DF2\\u9605\\u8BFB\\u5E76\\u540C\\u610F")\n }\n }\n }, function (_ref2) {\n var fields = _ref2.fields,\n state = _ref2.state,\n canSubmit = _ref2.canSubmit;\n console.log(\'fields:\', state);\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, fields.username)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, fields.password)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true,\n align: "middle"\n }, fields.terms), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true,\n style: {\n marginTop: -4\n }\n }, /*#__PURE__*/_react["default"].createElement("a", {\n href: "#"\n }, "\\u670D\\u52A1\\u6761\\u6B3E"))), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n disabled: !canSubmit(),\n type: "primary",\n htmlType: "submit"\n }, "\\u63D0\\u4EA4"))));\n }));\n};',language:"jsx",value:'import React from \'react\';\nimport { Form, Input, Row, Col, Checkbox, Notify, Button } from \'uiw\';\n\nexport default function Demo() {\n return (\n <div>\n <Form\n onSubmit={({initial, current}) => {\n console.log(\'--\x3e>\', initial, current);\n }}\n fields={{\n username: {\n labelClassName: \'fieldLabel\',\n labelStyle: { width: 60 },\n labelFor: \'username\',\n children: <Input preIcon="user" id="username" />\n },\n password: {\n labelClassName: \'fieldLabel\',\n labelStyle: { width: 60 },\n labelFor: \'password\',\n children: <Input preIcon="lock" id="password" type="password" />\n },\n terms: {\n validator: (currentValue) => !currentValue ? \'\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e\' : null,\n children: <Checkbox value="1">\u5df2\u9605\u8bfb\u5e76\u540c\u610f</Checkbox>\n }\n }}\n >\n {({ fields, state, canSubmit }) => {\n console.log(\'fields:\', state);\n return (\n <div>\n <Row>\n <Col fixed>{fields.username}</Col>\n </Row>\n <Row>\n <Col fixed>{fields.password}</Col>\n </Row>\n <Row>\n <Col fixed align="middle">{fields.terms}</Col>\n <Col fixed style={{ marginTop: -4 }}><a href="#">\u670d\u52a1\u6761\u6b3e</a></Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type="primary" htmlType="submit">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n )\n}'},379:{name:379,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n onSubmit: function onSubmit(_ref) {\n var initial = _ref.initial,\n current = _ref.current;\n console.log(\'--\x3e>\', initial, current);\n },\n fields: {\n firstName: {\n labelClassName: \'fieldLabel\',\n labelStyle: {\n width: 60\n },\n inline: true,\n label: \'\u59d3\u6c0f\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, null)\n },\n lastName: {\n labelClassName: \'fieldLabel\',\n labelStyle: {\n width: 60\n },\n initialValue: \'\u5148\u751f\',\n inline: true,\n label: \'\u540d\u5b57\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, null)\n },\n email: {\n labelClassName: \'fieldLabel\',\n labelStyle: {\n width: 60\n },\n validator: function validator(currentValue) {\n return currentValue && currentValue.length < 2 ? \'Password must be 8+ characters\' : null;\n },\n inline: true,\n label: \'Email\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, null)\n },\n select: {\n labelClassName: \'fieldLabel\',\n labelStyle: {\n width: 60\n },\n inline: true,\n label: \'\u9009\u62e9\u5668\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Select, null, /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, null, "Choose an item..."), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "1"\n }, "One"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "2"\n }, "Two"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "3"\n }, "Three"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "4"\n }, "Four"))\n }\n }\n }, function (_ref2) {\n var fields = _ref2.fields,\n state = _ref2.state,\n canSubmit = _ref2.canSubmit;\n console.log(\'fields:\', state);\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10,\n style: {\n marginBottom: 10\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.firstName), /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.lastName)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.email), /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.select)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true,\n align: "bottom"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n disabled: !canSubmit(),\n type: "primary",\n htmlType: "submit"\n }, "\\u63D0\\u4EA4"))));\n }));\n};',language:"jsx",value:"import React from 'react';\nimport { Form, Input, Select, Row, Col, Button } from 'uiw';\n\nexport default function Demo() {\n return (\n <div>\n <Form\n onSubmit={({initial, current}) => {\n console.log('--\x3e>', initial, current);\n }}\n fields={{\n firstName: {\n labelClassName: 'fieldLabel',\n labelStyle: { width: 60 },\n inline: true,\n label: '\u59d3\u6c0f',\n children: <Input />\n },\n lastName: {\n labelClassName: 'fieldLabel',\n labelStyle: { width: 60 },\n initialValue: '\u5148\u751f',\n inline: true,\n label: '\u540d\u5b57',\n children: <Input />\n },\n email: {\n labelClassName: 'fieldLabel',\n labelStyle: { width: 60 },\n validator: (currentValue) => {\n return currentValue && currentValue.length < 2 ? 'Password must be 8+ characters' : null;\n },\n inline: true,\n label: 'Email',\n children: <Input />\n },\n select: {\n labelClassName: 'fieldLabel',\n labelStyle: { width: 60 },\n inline: true,\n label: '\u9009\u62e9\u5668',\n children: (\n <Select>\n <Select.Option>Choose an item...</Select.Option>\n <Select.Option value=\"1\">One</Select.Option>\n <Select.Option value=\"2\">Two</Select.Option>\n <Select.Option value=\"3\">Three</Select.Option>\n <Select.Option value=\"4\">Four</Select.Option>\n </Select>\n ),\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n console.log('fields:', state);\n return (\n <div>\n <Row gutter={10} style={{ marginBottom: 10 }}>\n <Col>{fields.firstName}</Col>\n <Col>{fields.lastName}</Col>\n </Row>\n <Row gutter={10}>\n <Col>{fields.email}</Col>\n <Col>{fields.select}</Col>\n </Row>\n <Row gutter={10}>\n <Col />\n <Col fixed align=\"bottom\"><Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button></Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n )\n}"},468:{name:468,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n// \u81ea\u5b9a\u4e49\u7ec4\u4ef6\nfunction CustomSelect(props) {\n var _props$option = props.option,\n option = _props$option === void 0 ? [] : _props$option,\n onChange = props.onChange;\n var _React$useState = _react["default"].useState(props.value),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n value = _React$useState2[0],\n setValue = _React$useState2[1];\n var _React$useState3 = _react["default"].useState(false),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n isOpen = _React$useState4[0],\n setIsOpen = _React$useState4[1];\n _react["default"].useEffect(function () {\n if (value !== props.value) {\n setValue(props.value);\n }\n }, [props.value]);\n var label = option.find(function (item) {\n return value === item.value;\n });\n return /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n trigger: "click",\n onVisibleChange: function onVisibleChange(open) {\n return setIsOpen(open);\n },\n isOpen: isOpen,\n menu: /*#__PURE__*/_react["default"].createElement(_uiw.Menu, {\n bordered: true,\n style: {\n minWidth: 120\n }\n }, option.map(function (item, idx) {\n return /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n active: value === item.value,\n key: idx,\n text: item.label,\n onClick: function onClick() {\n setValue(item.value);\n setIsOpen(false);\n onChange && onChange(item.value);\n }\n });\n }))\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n style: {\n boxShadow: \'inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1)\'\n },\n type: "link"\n }, label.label, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n type: isOpen ? \'up\' : \'down\'\n })));\n}\n\n// \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5e94\u7528\u5b9e\u4f8b\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n onSubmitError: function onSubmitError(error) {\n if (error.filed) {\n return _objectSpread({}, error.filed);\n }\n return null;\n },\n onSubmit: function onSubmit(_ref) {\n var initial = _ref.initial,\n current = _ref.current;\n console.log(\'~~~\', current);\n var errorObj = {};\n if (!current.select) {\n errorObj.select = \'\u5185\u5bb9\u4e3a\u7a7a\uff0c\u8bf7\u8f93\u5165\u5185\u5bb9\';\n }\n if (Object.keys(errorObj).length > 0) {\n var err = new Error();\n err.filed = errorObj;\n _uiw.Notify.error({\n title: \'\u63d0\u4ea4\u5931\u8d25\uff01\',\n description: \'\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01\'\n });\n throw err;\n }\n _uiw.Notify.success({\n title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n description: "\\u8868\\u5355\\u63D0\\u4EA4\\u6210\\u529F\\uFF0C\\u5185\\u5BB9\\u4E3A\\uFF1A".concat(current.select, "\\uFF0C\\u5C06\\u81EA\\u52A8\\u586B\\u5145\\u521D\\u59CB\\u5316\\u503C\\uFF01")\n });\n },\n fields: {\n select: {\n initialValue: 0,\n children: /*#__PURE__*/_react["default"].createElement(CustomSelect, {\n option: [{\n label: \'\u8bf7\u9009\u62e9\',\n value: 0\n }, {\n label: \'\u7ecf\u6d4e\u8231\',\n value: 1\n }, {\n label: \'\u8c6a\u534e\u7ecf\u6d4e\u8231\',\n value: 2\n }, {\n label: \'\u5546\u52a1\u8231\',\n value: 3\n }, {\n label: \'\u5934\u7b49\u8231\',\n value: 4\n }]\n })\n }\n }\n }, function (_ref2) {\n var fields = _ref2.fields,\n state = _ref2.state,\n canSubmit = _ref2.canSubmit;\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n style: {\n maxWidth: 300\n }\n }, fields.select)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n disabled: !canSubmit(),\n type: "primary",\n htmlType: "submit"\n }, "\\u63D0\\u4EA4"))));\n }));\n};',language:"jsx",value:"import React from 'react';\nimport { Form, Row, Col, Dropdown, Menu, Icon, Button, Notify } from 'uiw';\n\n// \u81ea\u5b9a\u4e49\u7ec4\u4ef6\nfunction CustomSelect(props) {\n const { option = [], onChange } = props;\n const [value, setValue] = React.useState(props.value);\n const [isOpen, setIsOpen] = React.useState(false);\n\n React.useEffect(() => {\n if (value !== props.value) {\n setValue(props.value);\n }\n }, [props.value]);\n const label = option.find(item => value === item.value);\n return (\n <Dropdown\n trigger=\"click\"\n onVisibleChange={(open) => setIsOpen(open)}\n isOpen={isOpen}\n menu={\n <Menu bordered style={{ minWidth: 120 }}>\n {option.map((item, idx) => (\n <Menu.Item active={value === item.value} key={idx} text={item.label}\n onClick={() => {\n setValue(item.value);\n setIsOpen(false)\n onChange && onChange(item.value);\n }}\n />\n ))}\n </Menu>\n }\n >\n <Button\n style={{\n boxShadow: 'inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1)'\n }}\n type=\"link\"\n >\n {label.label}<Icon type={isOpen ? 'up' : 'down'} />\n </Button>\n </Dropdown>\n );\n}\n\n// \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5e94\u7528\u5b9e\u4f8b\nexport default function Demo() {\n return (\n <div>\n <Form\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n onSubmit={({initial, current}) => {\n console.log('~~~', current);\n const errorObj = {};\n if (!current.select) {\n errorObj.select = '\u5185\u5bb9\u4e3a\u7a7a\uff0c\u8bf7\u8f93\u5165\u5185\u5bb9';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n throw err;\n }\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u5185\u5bb9\u4e3a\uff1a${current.select}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n select: {\n initialValue: 0,\n children: (\n <CustomSelect option={[\n { label: '\u8bf7\u9009\u62e9', value: 0 },\n { label: '\u7ecf\u6d4e\u8231', value: 1 },\n { label: '\u8c6a\u534e\u7ecf\u6d4e\u8231', value: 2 },\n { label: '\u5546\u52a1\u8231', value: 3 },\n { label: '\u5934\u7b49\u8231', value: 4 },\n ]} />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row>\n <Col style={{ maxWidth: 300 }}>{fields.select}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n )\n}"},585:{name:585,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nreturn function Demo() {\n var _React$useState = _react["default"].useState({}),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n formData = _React$useState2[0],\n setFormData = _React$useState2[1];\n var handleSubmit = function handleSubmit(_, e) {\n e && e.preventDefault();\n var fData = new FormData(e.target);\n var data = {};\n fData.forEach(function (value, key) {\n data[key] = value;\n });\n setFormData(data);\n };\n return /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n onSubmit: handleSubmit,\n onReset: function onReset() {\n return setFormData({});\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.FormItem, {\n label: "\\u53EF\\u9009\\u5B57\\u6BB5",\n labelFor: "item-basic-input",\n help: /*#__PURE__*/_react["default"].createElement("span", null, "\\u5728\\u4E0A\\u9762\\u7684\\u5B57\\u6BB5\\u4E2D\\u8F93\\u5165\\u4E00\\u4E2A\\u503C")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n id: "item-basic-input",\n name: "basic",\n type: "text"\n })), /*#__PURE__*/_react["default"].createElement(_uiw.FormItem, {\n label: "\\u7528\\u6237\\u540D",\n labelFor: "item-username-input",\n help: !formData.username || formData.username.length < 8 ? "\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002" : "\u7528\u6237\u540d\u6b63\u786e \u221a ",\n hasError: !formData.username || formData.username.length < 8\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n id: "item-username-input",\n name: "username",\n type: "text"\n })), /*#__PURE__*/_react["default"].createElement(_uiw.FormItem, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "success",\n htmlType: "submit"\n }, " Submit "), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "light",\n htmlType: "reset"\n }, " Reset ")), /*#__PURE__*/_react["default"].createElement("pre", null, JSON.stringify(formData, null, 2)));\n};',language:"jsx",value:'import React from \'react\';\nimport { Form, FormItem, Button, Input } from \'uiw\';\n\nexport default function Demo() {\n const [formData, setFormData] = React.useState({});\n const handleSubmit = (_, e) => {\n e && e.preventDefault();\n const fData = new FormData(e.target);\n const data = {};\n fData.forEach((value, key) => { data[key] = value; });\n setFormData(data);\n }\n return (\n <Form onSubmit={handleSubmit} onReset={() => setFormData({})}>\n <FormItem\n label="\u53ef\u9009\u5b57\u6bb5"\n labelFor="item-basic-input"\n help={<span>\u5728\u4e0a\u9762\u7684\u5b57\u6bb5\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c</span>}\n >\n <Input id="item-basic-input" name="basic" type="text"/>\n </FormItem>\n <FormItem\n label="\u7528\u6237\u540d"\n labelFor="item-username-input"\n help={(!formData.username || formData.username.length < 8) ? "\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002" : "\u7528\u6237\u540d\u6b63\u786e \u221a "}\n hasError={(!formData.username || formData.username.length < 8)}\n >\n <Input id="item-username-input" name="username" type="text"/>\n </FormItem>\n <FormItem>\n <Button type="success" htmlType="submit"> Submit </Button>\n <Button type="light" htmlType="reset"> Reset </Button>\n </FormItem>\n <pre>\n {JSON.stringify(formData, null, 2)}\n </pre>\n </Form>\n );\n}'},634:{name:634,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_uiw.Form, null, /*#__PURE__*/_react["default"].createElement(_uiw.FormItem, {\n inline: true,\n label: "\\u53EF\\u9009\\u5B57\\u6BB5",\n labelFor: "basic-input-inline",\n help: /*#__PURE__*/_react["default"].createElement("span", null, "\\u5728\\u4E0A\\u9762\\u7684\\u5B57\\u6BB5\\u4E2D\\u8F93\\u5165\\u4E00\\u4E2A\\u503C"),\n onChange: function onChange() {\n console.log(\'TEST::\');\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n id: "basic-input-inline",\n name: "basic",\n type: "text"\n })), /*#__PURE__*/_react["default"].createElement(_uiw.FormItem, {\n inline: true,\n label: "\\u7528\\u6237\\u540D",\n labelFor: "username-input-inline",\n labelClassName: "username",\n help: "\\u7528\\u6237\\u540D\\u957F\\u5EA6\\u81F3\\u5C11\\u4E3A8\\u4E2A\\u5B57\\u7B26\\u4E32\\u3002",\n hasError: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n id: "username-input-inline",\n name: "username",\n type: "text"\n })));\n};',language:"jsx",value:'import React from \'react\';\nimport { Form, FormItem, Input } from \'uiw\';\n\nexport default function Demo() {\n return (\n <Form>\n <FormItem\n inline={true}\n label="\u53ef\u9009\u5b57\u6bb5"\n labelFor="basic-input-inline"\n help={<span>\u5728\u4e0a\u9762\u7684\u5b57\u6bb5\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c</span>}\n onChange={() => {\n console.log(\'TEST::\');\n }}\n >\n <Input id="basic-input-inline" name="basic" type="text"/>\n </FormItem>\n <FormItem\n inline={true}\n label="\u7528\u6237\u540d"\n labelFor="username-input-inline"\n labelClassName="username"\n help="\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002"\n hasError={true}\n >\n <Input id="username-input-inline" name="username" type="text"/>\n </FormItem>\n </Form>\n )\n}'}},source:"Form \u8868\u5355\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-form/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-form.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-form)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-form.svg?label=@uiw/react-form)](https://npmjs.com/@uiw/react-form)\n\n\u7531\u8f93\u5165\u6846\u3001\u9009\u62e9\u5668\u3001\u5355\u9009\u6846\u3001\u591a\u9009\u6846\u7b49\u63a7\u4ef6\u7ec4\u6210\uff0c\u7528\u4ee5\u6536\u96c6\u3001\u6821\u9a8c\u3001\u63d0\u4ea4\u6570\u636e\u3002\n\n```jsx\nimport { Form, FormItem } from 'uiw';\n// or\nimport { Form, FormItem } from '@uiw/react-form';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n```jsx mdx:preview&bg=#fff\nimport React, { useState, useRef } from \"react\";\nimport { Form, Input, Row, Col, Slider, Button, Notify } from 'uiw';\n\nexport default function Demo() {\n const form = useRef()\n\n const onSubmit = () => {\n form.current.onSubmit()\n }\n const resetForm = () => {\n form.current.resetForm()\n }\n const getFieldValues = () => {\n console.log('getFieldValues', form.current.getFieldValues())\n }\n\n const setFieldValue=()=>{\n form.current.setFieldValue('name','UIW')\n }\n\n return (\n <div>\n <Form\n ref={form}\n onChange={({ initial, current }) => {\n console.log('onChange', initial, current);\n }}\n onSubmit={({ initial, current }) => {\n if (current.name === initial.name) {\n Notify.error({\n title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u5185\u5bb9\u4e3a\u7a7a\uff01`,\n });\n } else {\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u59d3\u540d\u4e3a\uff1a${current.name}\uff0c\u63d0\u4ea4\u5b8c\u6210\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }\n }}\n fields={{\n name: {\n label: '\u59d3\u540d',\n children: <Input placeholder=\"\u8bf7\u8f93\u5165\u59d3\u540d\" />\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row>\n <Col style={{ maxWidth: 300 }}>{fields.name}</Col>\n </Row>\n <Row>\n <Col>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n {JSON.stringify(state.current)}\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n <Button type=\"primary\" onClick={onSubmit} >submit</Button>\n <Button type=\"primary\" onClick={resetForm}>resetForm</Button>\n <Button type=\"primary\" onClick={getFieldValues}>getValues</Button>\n <Button type=\"primary\" onClick={setFieldValue}>setFieldValue</Button>\n </div>\n )\n}\n```\n\n### \u81ea\u5b9a\u4e49\u6821\u9a8c\n\n\u4e00\u822c\u6821\u9a8c\u53ef\u4e0d\u9700\u5f15\u5165\u5916\u90e8\u5305\u89e3\u51b3\uff0c\u5982\u679c\u9047\u5230\u5927\u578b\u5de5\u7a0b\u8868\u5355\u6bd4\u8f83\u591a\u7684\u5730\u65b9\u63a8\u8350\u4f7f\u7528 [jquense/yup](https://github.com/jquense/yup)\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Form, Input, Notify, Checkbox, Switch, RadioGroup, Radio, Textarea, Row, Col, Button } from 'uiw';\n\nexport default function Demo() {\n return(\n <Form\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (current.userName.startsWith('u')) {\n errorObj.userName = `\u59d3\u540d ${current.userName} \u4e0d\u80fd\u4ee5 \u2018u\u2019 \u5f00\u5934`;\n }\n if (!current.checkboxOne) {\n errorObj.checkboxOne = '\u4e00\u4e2a\u591a\u9009\u6761\u4ef6 \u4e3a\u5fc5\u586b';\n }\n if (!current.terms) {\n errorObj.terms = '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n throw err;\n }\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u59d3\u540d\u4e3a\uff1a${current.userName}\uff0c\u63d0\u4ea4\u5b8c\u6210\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n fields={{\n userName: {\n initialValue: 'uiw',\n label: '\u59d3\u540d',\n children: <Input type=\"text\" />,\n help: '\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f'\n },\n age: {\n initialValue: '9',\n label: '\u5e74\u9f84',\n children: <Input type=\"number\" />\n },\n checkbox: {\n initialValue: ['\u56db\u5ddd\u83dc'],\n label: '\u9009\u62e9\u4f60\u60f3\u5403\u7684\u83dc',\n children: (\n <Checkbox.Group>\n <div>\u83dc\u7cfb</div>\n <Checkbox value=\"\u56db\u5ddd\u83dc\">\u56db\u5ddd\u83dc</Checkbox>\n <Checkbox value=\"\u6e56\u5317\u83dc\">\u6e56\u5317\u83dc</Checkbox>\n <Checkbox value=\"\u897f\u5317\u83dc\">\u897f\u5317\u83dc</Checkbox>\n <Checkbox value=\"\u65b0\u7586\u83dc\">\u65b0\u7586\u83dc</Checkbox>\n <Checkbox value=\"\u4e1c\u5317\u83dc\">\u4e1c\u5317\u83dc</Checkbox>\n <div style={{ marginTop: 10 }}>\u5bb6\u5e38\u83dc</div>\n <Checkbox value=\"\u7ea2\u70e7\u6b66\u660c\u9c7c\">\u7ea2\u70e7\u6b66\u660c\u9c7c</Checkbox>\n <Checkbox value=\"\u9ebb\u5a46\u8c46\u8150\">\u9ebb\u5a46\u8c46\u8150</Checkbox>\n <Checkbox value=\"\u5317\u4eac\u70e4\u9e2d\">\u5317\u4eac\u70e4\u9e2d</Checkbox>\n </Checkbox.Group>\n )\n },\n checkboxOne: {\n inline: true,\n label: '\u4e00\u4e2a\u591a\u9009\u6761\u4ef6',\n children: <Checkbox value=\"1\">\u56db\u5ddd\u83dc</Checkbox>\n },\n switch: {\n inline: true,\n initialValue: true,\n label: '\u5f00\u542f',\n children: <Switch size=\"small\" />\n },\n radioGroup: {\n inline: true,\n initialValue: '\u7537',\n label: '\u5355\u9009',\n children: (\n <RadioGroup name=\"other\">\n <Radio value=\"\u7537\">\u7537</Radio>\n <Radio value=\"\u5973\">\u5973</Radio>\n <Radio value=\"\u4eba\u5996\" disabled>\u4eba\u5996</Radio>\n <Radio value=\"\u672a\u77e5\">\u672a\u77e5</Radio>\n </RadioGroup>\n )\n },\n textarea: {\n initialValue: '',\n label: '\u591a\u884c\u6587\u672c\u8f93\u5165\u6846',\n children: <Textarea placeholder=\"\u8bf7\u8f93\u5165\u5185\u5bb9\" />\n },\n terms: {\n validator: (currentValue) => {\n return !currentValue ? '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e' : null;\n },\n style: { marginBottom: 0 },\n children: <Checkbox value=\"1\">\u5df2\u9605\u8bfb\u5e76\u540c\u610f<a href=\"#\">\u670d\u52a1\u6761\u6b3e</a></Checkbox>\n }\n }}\n >\n {({ fields, state, canSubmit, resetForm }) => {\n console.log('fields:--\x3e', state);\n return (\n <div style={{ maxWidth: 500 }}>\n <Row gutter={10}>\n <Col>{fields.userName}</Col>\n <Col>{fields.age}</Col>\n </Row>\n <Row gutter={10}>\n <Col>{fields.checkbox}</Col>\n <Col>{fields.checkboxOne}</Col>\n </Row>\n <Row gutter={10}>\n <Col>{fields.radioGroup}</Col>\n </Row>\n <Row gutter={10}>\n <Col>{fields.switch}</Col>\n </Row>\n <Row gutter={10}>\n <Col>{fields.textarea}</Col>\n </Row>\n <Row gutter={10}>\n <Col style={{ padding: '5px 0 10px 0' }}>\n {fields.terms}\n </Col>\n </Row>\n <Row gutter={10}>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n <Button type=\"light\" onClick={resetForm}>\u91cd\u7f6e\u8868\u5355</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: '10px 0 0 10px' }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n )\n}\n```\n\n### \u6c34\u5e73\u767b\u5f55\u680f\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Form, Input, Row, Col, Notify, Button } from 'uiw';\n\nexport default function Demo() {\n return (\n <div>\n <Form\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (!current.username) {\n errorObj.username = '\u7528\u6237\u540d\u4e0d\u80fd\u4e3a\u7a7a\uff01';\n }\n if (!current.password) {\n errorObj.password = '\u5bc6\u7801\u4e0d\u80fd\u4e3a\u7a7a\uff01';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n throw err;\n }\n console.log('--\x3e>', initial, current);\n Notify.success({ title: '\u63d0\u4ea4\u6210\u529f\uff01', description: '\u606d\u559c\u4f60\u767b\u5f55\u6210\u529f\uff01' });\n }}\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n fields={{\n username: {\n labelClassName: 'fieldLabel',\n labelFor: 'username-inline',\n children: <Input preIcon=\"user\" id=\"username-inline\" />\n },\n password: {\n labelClassName: 'fieldLabel',\n labelFor: 'password-inline',\n children: <Input preIcon=\"lock\" id=\"password-inline\" type=\"password\" />\n },\n }}\n >\n {({ fields, state, canSubmit, resetForm }) => {\n console.log('fields:', state);\n return (\n <div>\n <Row gutter={10}>\n <Col fixed>{fields.username}</Col>\n <Col fixed>{fields.password}</Col>\n </Row>\n <Row gutter={10}>\n <Col>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n <Button type=\"danger\" onClick={resetForm}>\u91cd\u7f6e\u8868\u5355</Button>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n );\n}\n```\n\n## \u767b\u5f55\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Form, Input, Row, Col, Checkbox, Notify, Button } from 'uiw';\n\nexport default function Demo() {\n return (\n <div>\n <Form\n onSubmit={({initial, current}) => {\n console.log('--\x3e>', initial, current);\n }}\n fields={{\n username: {\n labelClassName: 'fieldLabel',\n labelStyle: { width: 60 },\n labelFor: 'username',\n children: <Input preIcon=\"user\" id=\"username\" />\n },\n password: {\n labelClassName: 'fieldLabel',\n labelStyle: { width: 60 },\n labelFor: 'password',\n children: <Input preIcon=\"lock\" id=\"password\" type=\"password\" />\n },\n terms: {\n validator: (currentValue) => !currentValue ? '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e' : null,\n children: <Checkbox value=\"1\">\u5df2\u9605\u8bfb\u5e76\u540c\u610f</Checkbox>\n }\n }}\n >\n {({ fields, state, canSubmit }) => {\n console.log('fields:', state);\n return (\n <div>\n <Row>\n <Col fixed>{fields.username}</Col>\n </Row>\n <Row>\n <Col fixed>{fields.password}</Col>\n </Row>\n <Row>\n <Col fixed align=\"middle\">{fields.terms}</Col>\n <Col fixed style={{ marginTop: -4 }}><a href=\"#\">\u670d\u52a1\u6761\u6b3e</a></Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n )\n}\n```\n\n### \u8868\u5355\u63d0\u4ea4\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Form, Input, Select, Row, Col, Button } from 'uiw';\n\nexport default function Demo() {\n return (\n <div>\n <Form\n onSubmit={({initial, current}) => {\n console.log('--\x3e>', initial, current);\n }}\n fields={{\n firstName: {\n labelClassName: 'fieldLabel',\n labelStyle: { width: 60 },\n inline: true,\n label: '\u59d3\u6c0f',\n children: <Input />\n },\n lastName: {\n labelClassName: 'fieldLabel',\n labelStyle: { width: 60 },\n initialValue: '\u5148\u751f',\n inline: true,\n label: '\u540d\u5b57',\n children: <Input />\n },\n email: {\n labelClassName: 'fieldLabel',\n labelStyle: { width: 60 },\n validator: (currentValue) => {\n return currentValue && currentValue.length < 2 ? 'Password must be 8+ characters' : null;\n },\n inline: true,\n label: 'Email',\n children: <Input />\n },\n select: {\n labelClassName: 'fieldLabel',\n labelStyle: { width: 60 },\n inline: true,\n label: '\u9009\u62e9\u5668',\n children: (\n <Select>\n <Select.Option>Choose an item...</Select.Option>\n <Select.Option value=\"1\">One</Select.Option>\n <Select.Option value=\"2\">Two</Select.Option>\n <Select.Option value=\"3\">Three</Select.Option>\n <Select.Option value=\"4\">Four</Select.Option>\n </Select>\n ),\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n console.log('fields:', state);\n return (\n <div>\n <Row gutter={10} style={{ marginBottom: 10 }}>\n <Col>{fields.firstName}</Col>\n <Col>{fields.lastName}</Col>\n </Row>\n <Row gutter={10}>\n <Col>{fields.email}</Col>\n <Col>{fields.select}</Col>\n </Row>\n <Row gutter={10}>\n <Col />\n <Col fixed align=\"bottom\"><Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button></Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n )\n}\n```\n\n### \u81ea\u5b9a\u4e49\u63a7\u4ef6\u5e94\u7528\n\n\u4e0b\u9762\u5b9e\u4f8b\u662f\u5728 [`<Form />`](#/components/form) \u8868\u5355\u7ec4\u4ef6\u4e2d\uff0c\u5e94\u7528\u81ea\u5b9a\u4e49 `<CustomSelect />` \u63a7\u4ef6\u7ec4\u4ef6\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff0c\u81ea\u5b9a\u4e49\u63a7\u4ef6\u9700\u8981\u4e24\u4e2a\u5fc5\u8981\u7684 `props` \u53c2\u6570\uff0c`value` \u548c `onChange`\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n- `value` \u7528\u4e8e\u503c\u4f20\u9012\uff0c\n- `onChange(value)` \u7528\u4e8e\u503c\u53d8\u66f4\u9700\u8981\u6267\u884c\u7684\u56de\u8c03\u51fd\u6570\uff0c\u56de\u8c03\u51fd\u6570\u7b2c\u4e00\u4e2a\u53c2\u6570\u5fc5\u987b\u662f `value`\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Form, Row, Col, Dropdown, Menu, Icon, Button, Notify } from 'uiw';\n\n// \u81ea\u5b9a\u4e49\u7ec4\u4ef6\nfunction CustomSelect(props) {\n const { option = [], onChange } = props;\n const [value, setValue] = React.useState(props.value);\n const [isOpen, setIsOpen] = React.useState(false);\n\n React.useEffect(() => {\n if (value !== props.value) {\n setValue(props.value);\n }\n }, [props.value]);\n const label = option.find(item => value === item.value);\n return (\n <Dropdown\n trigger=\"click\"\n onVisibleChange={(open) => setIsOpen(open)}\n isOpen={isOpen}\n menu={\n <Menu bordered style={{ minWidth: 120 }}>\n {option.map((item, idx) => (\n <Menu.Item active={value === item.value} key={idx} text={item.label}\n onClick={() => {\n setValue(item.value);\n setIsOpen(false)\n onChange && onChange(item.value);\n }}\n />\n ))}\n </Menu>\n }\n >\n <Button\n style={{\n boxShadow: 'inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1)'\n }}\n type=\"link\"\n >\n {label.label}<Icon type={isOpen ? 'up' : 'down'} />\n </Button>\n </Dropdown>\n );\n}\n\n// \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5e94\u7528\u5b9e\u4f8b\nexport default function Demo() {\n return (\n <div>\n <Form\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n onSubmit={({initial, current}) => {\n console.log('~~~', current);\n const errorObj = {};\n if (!current.select) {\n errorObj.select = '\u5185\u5bb9\u4e3a\u7a7a\uff0c\u8bf7\u8f93\u5165\u5185\u5bb9';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n throw err;\n }\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u5185\u5bb9\u4e3a\uff1a${current.select}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n select: {\n initialValue: 0,\n children: (\n <CustomSelect option={[\n { label: '\u8bf7\u9009\u62e9', value: 0 },\n { label: '\u7ecf\u6d4e\u8231', value: 1 },\n { label: '\u8c6a\u534e\u7ecf\u6d4e\u8231', value: 2 },\n { label: '\u5546\u52a1\u8231', value: 3 },\n { label: '\u5934\u7b49\u8231', value: 4 },\n ]} />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row>\n <Col style={{ maxWidth: 300 }}>{fields.select}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n )\n}\n```\n\n### FormItem \u7ad6\u6392\n\n\u5bf9\u7ec4\u4ef6 `FormItem` \u7ad6\u6392\u5c55\u793a\u793a\u4f8b\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff1a`FormItem` \u7ec4\u4ef6\u53ea\u5728 `Form` \u7ec4\u4ef6\u4e2d\u4f7f\u7528\uff0c\u5728 `@v4.10.4+` \u4ee5\u4e0a\u7248\u672c\u53ef\u4ee5\u5f53\u666e\u901a `form` \u4f7f\u7528\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Form, FormItem, Button, Input } from 'uiw';\n\nexport default function Demo() {\n const [formData, setFormData] = React.useState({});\n const handleSubmit = (_, e) => {\n e && e.preventDefault();\n const fData = new FormData(e.target);\n const data = {};\n fData.forEach((value, key) => { data[key] = value; });\n setFormData(data);\n }\n return (\n <Form onSubmit={handleSubmit} onReset={() => setFormData({})}>\n <FormItem\n label=\"\u53ef\u9009\u5b57\u6bb5\"\n labelFor=\"item-basic-input\"\n help={<span>\u5728\u4e0a\u9762\u7684\u5b57\u6bb5\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c</span>}\n >\n <Input id=\"item-basic-input\" name=\"basic\" type=\"text\"/>\n </FormItem>\n <FormItem\n label=\"\u7528\u6237\u540d\"\n labelFor=\"item-username-input\"\n help={(!formData.username || formData.username.length < 8) ? \"\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002\" : \"\u7528\u6237\u540d\u6b63\u786e \u221a \"}\n hasError={(!formData.username || formData.username.length < 8)}\n >\n <Input id=\"item-username-input\" name=\"username\" type=\"text\"/>\n </FormItem>\n <FormItem>\n <Button type=\"success\" htmlType=\"submit\"> Submit </Button>\n <Button type=\"light\" htmlType=\"reset\"> Reset </Button>\n </FormItem>\n <pre>\n {JSON.stringify(formData, null, 2)}\n </pre>\n </Form>\n );\n}\n```\n\n### FormItem \u6a2a\u6392\n\n\u5bf9\u7ec4\u4ef6 `FormItem` \u6a2a\u6392\u5c55\u793a\u793a\u4f8b\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff1a`FormItem` \u7ec4\u4ef6\u53ea\u5728 `Form` \u7ec4\u4ef6\u4e2d\u4f7f\u7528\uff0c\u5728 `@v4.10.4+` \u4ee5\u4e0a\u7248\u672c\u53ef\u4ee5\u5f53\u666e\u901a `form` \u4f7f\u7528\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Form, FormItem, Input } from 'uiw';\n\nexport default function Demo() {\n return (\n <Form>\n <FormItem\n inline={true}\n label=\"\u53ef\u9009\u5b57\u6bb5\"\n labelFor=\"basic-input-inline\"\n help={<span>\u5728\u4e0a\u9762\u7684\u5b57\u6bb5\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c</span>}\n onChange={() => {\n console.log('TEST::');\n }}\n >\n <Input id=\"basic-input-inline\" name=\"basic\" type=\"text\"/>\n </FormItem>\n <FormItem\n inline={true}\n label=\"\u7528\u6237\u540d\"\n labelFor=\"username-input-inline\"\n labelClassName=\"username\"\n help=\"\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002\"\n hasError={true}\n >\n <Input id=\"username-input-inline\" name=\"username\" type=\"text\"/>\n </FormItem>\n </Form>\n )\n}\n```\n\n## Form\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| fields | \u8bbe\u7f6e\u5b57\u6bb5 | object | - |\n| children | \u56de\u8c03 {`fields`, `state`, `canSubmit`, `resetForm`} | function | - |\n| onSubmit | \u63d0\u4ea4\u8868\u5355\u65f6\u8c03\u7528 | `(state: FormSubmitProps, event: React.FormEvent) => any` | - |\n| afterSubmit `@3.0.0+` | \u63d0\u4ea4\u56de\u8c03 {`initial`, `current`} | function({ initial, current }) | - |\n| onChange | \u8868\u5355\u53d1\u751f\u6539\u53d8\u56de\u8c03\u51fd\u6570 {`initial`, `current`} | function({ initial, current }) | - |\n| onSubmitError | \u8c03\u7528 `onSubmit` \u629b\u51fa\u7684\u4efb\u4f55\u9519\u8bef\u3002\u4ece\u5b57\u6bb5\u540d\u79f0\u8fd4\u56de\u5bf9\u8c61\u6620\u5c04\u3002 | function | - |\n| resetOnSubmit | \u5728 `onSubmit` \u6210\u529f\u540e\u5c06\u8868\u5355\u91cd\u7f6e\u4e3a\u5176\u521d\u59cb\u72b6\u6001\u3002| bool | `true` |\n| ref | \u8fd4\u56deform\u5404\u79cd\u5185\u90e8\u51fd\u6570,\u53ef\u7528\u4e8e\u4e3b\u52a8\u89e6\u53d1\u4e8b\u4ef6 | Ref | - |\n\n\n#### fields\n\n```js\n{\n firstName: {\n initialValue: '\u738b',\n inline: true,\n label: '\u59d3',\n labelClassName: 'fieldLabel',\n labelStyle: { width: 60 },\n // \u9a8c\u8bc1\uff0c\u901a\u8fc7 `canSubmit()` \u65b9\u6cd5\u83b7\u5f97\uff0c\u63d0\u4ea4\u6309\u94ae\u662f\u5426\u88ab\u7981\u7528\n validator: (currentValue) => {},\n help: '\u5e2e\u52a9\u63d0\u793a\u4fe1\u606f\uff01',\n children: <Input type=\"number\" />\n },\n}\n```\n\n#### ref\n\n```jsx\nconst form = useRef()\nrender(<Form ref={form}/>)\n```\n\n```js\nform.current.onSubmit() // \u63d0\u4ea4\u8868\u5355\nform.current.resetForm() // \u91cd\u7f6eform\nconst fieldValues = form.current.getFieldValues() // \u83b7\u53d6\u6240\u6709 field\u7684 value\u5bf9\u8c61\nconst error = form.current.getError() // \u83b7\u53d6\u6240\u6709\u63d0\u4ea4\u65f6\u9a8c\u8bc1\u9519\u8bef\nform.current.setFields({ /** [fieldName]: value **/ }) // \u8bbe\u7f6e\u8868\u5355\u7684\u503c,\u8986\u76d6 form\u6240\u6709 field\u7684\u503c\nform.current.setFieldValue(fieldName, value) // \u5bf9\u5355\u4e2a field\u8bbe\u7f6e value,\u5982\u679c value\u4e3a\u6570\u7ec4\u8bf7\u81ea\u884c\u6df1\u5ea6\u62f7\u8d1d\u540e\u4f20\u503c,\u4ee5\u514d\u7834\u574f\u539f\u6570\u7ec4\n```\n\n## FormItem\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| label | \u8868\u5355\u6807\u9898\u5c55\u793a | string | - |\n| required | \u8868\u5355\u662f\u5426\u5fc5\u586b\u6807\u8bc6 | boolean | - |\n| labelClassName | \u8868\u5355\u6807\u9898\u6837\u5f0f\u540d\u79f0 | string | - |\n| labelStyle | \u8868\u5355\u6807\u9898\u6837\u5f0f | object | - |\n| labelFor | \u5217\u7684\u5bbd\u5ea6\u76f8\u5bf9\u4e8e\u540c\u4e00\u7f51\u683c\u4e2d\u5176\u4ed6\u5217\u7684\u6bd4\u7387 | number | - |\n| help | \u63d0\u793a\u4fe1\u606f | ReactNode | - |\n| hasError | \u5982\u679c\u4e3atrue\uff0c\u5219\u5e94\u7528\u9519\u8befCSS\u3002\u8f6c\u52a8\u8fb9\u6846\u5e76\u5e2e\u52a9\u6587\u5b57\u53d8\u7ea2\u3002 | number | - |\n"},a=t(3173),o=t(9286);function u(){return(0,o.jsx)(a.Z,(0,r.Z)((0,r.Z)({},l),{},{path:"https://github.com/uiwjs/uiw/tree/master/packages/react-form/README.md"}))}}}]);
2
- //# sourceMappingURL=5950.266da78e.chunk.js.map