@uiw/doc 4.21.24 → 4.21.26

package/web/static/js/7343.2930b911.chunk.js

@@ -0,0 +1,2 @@
+(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7343],{4934:function(e){function t(e){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=function(){return[]},t.resolve=t,t.id=4934,e.exports=t},3173:function(e,t,n){"use strict";n.d(t,{Z:function(){return m}});var r=n(189),o=n(3782),u=n(1473),i=n(7963),l=n(5142),a=n(6150),s=n(6131),c={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"},f=n(9286);function p(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).path,t=/^http/.test(e||"")?e:"https://github.com/uiwjs/uiw/blob/master/".concat(e);return(0,f.jsxs)("div",{className:c.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",t&&(0,f.jsx)("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,f.jsx)("br",{}),(0,f.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,f.jsx)(s.Divider,{type:"vertical"}),(0,f.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,f.jsx)(s.Divider,{type:"vertical"}),(0,f.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,f.jsx)(s.Divider,{type:"vertical"}),(0,f.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,f.jsx)(s.Divider,{type:"vertical"}),(0,f.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,f.jsx)(s.Divider,{type:"vertical"}),(0,f.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}var b=["inline","node","components","data"],d=["data-meta"],_=function(e){var t,n=e.inline,a=e.node,s=e.components,c=e.data,p=(0,o.Z)(e,b),_=(0,u.useRef)(null),m=p,y=m["data-meta"],h=(0,o.Z)(m,d);if((0,u.useEffect)((function(){if(_.current){var e=_.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(_.current,e)}}),[_]),n||!(0,l.pN)(y))return(0,f.jsx)("code",(0,r.Z)({},p));var E=null===(t=a.position)||void 0===t?void 0:t.start.line,v=(0,l.Mx)(y)||String(E),C=s["".concat(v)];if(v&&"function"===typeof C){var g=c[v].value||"",P=(0,l.aE)(y);return(0,f.jsx)(i.Z,{ref:_,background:P.bg||P.background,disableCode:"true"===P.nocode,disableToolbar:"true"===P.toolbar,style:{marginBottom:10},toolbar:P.title||"Example",code:(0,f.jsx)("pre",(0,r.Z)({},h)),text:g,children:(0,f.jsx)(C,{})})}return(0,f.jsx)("code",(0,r.Z)({},h))};function m(e){return(0,f.jsxs)(u.Fragment,{children:[(0,f.jsx)(a.Z,{className:c.markdownWrap,source:e.source||"",disableCopy:!0,warpperElement:{"data-color-mode":"light"},components:{code:function(t){return(0,f.jsx)(_,(0,r.Z)((0,r.Z)({},t),e))}}}),(0,f.jsx)(p,{path:e.path})]})}},1553:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return l}});var r=n(189),o={components:{18:function(){function e(t){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(t)}var t,r=(t=n(1473))&&t.__esModule?t:{default:t},o=n(6131);function u(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,l(r.key),r)}}function l(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=c(t);if(n){var u=c(this).constructor;r=Reflect.construct(o,arguments,u)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}return function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&a(e,t)}(f,e);var t,n,l,c=s(f);function f(){var e;return u(this,f),(e=c.call(this)).state={visible:!1},e}return t=f,(n=[{key:"onClick",value:function(){this.setState({visible:!this.state.visible})}},{key:"onClosed",value:function(){this.setState({visible:!1})}},{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement(o.Modal,{title:"\u6a21\u6001\u5bf9\u8bdd\u6846",isOpen:this.state.visible,confirmText:"\u786e\u5b9a\u6309\u94ae",cancelText:"\u53d6\u6d88\u6309\u94ae",icon:"information",type:"primary",onConfirm:function(){return console.log("\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01")},onCancel:function(){return console.log("\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01")},onClosed:this.onClosed.bind(this)},"React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002",r.default.createElement("br",null),r.default.createElement("br",null),r.default.createElement("b",null,"\u7ec4\u4ef6"),r.default.createElement("br",null),r.default.createElement("br",null),"React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 ",r.default.createElement("a",{href:"https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA",target:"_blank"},"Babel REPL")," \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002"),r.default.createElement(o.ButtonGroup,null,r.default.createElement(o.Button,{onClick:this.onClick.bind(this)},"\u786e\u8ba4\u5bf9\u8bdd\u6846")))}}])&&i(t.prototype,n),l&&i(t,l),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component)}(),79:function(){function e(t){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(t)}var t,r=(t=n(1473))&&t.__esModule?t:{default:t},o=n(6131);function u(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,l(r.key),r)}}function l(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=c(t);if(n){var u=c(this).constructor;r=Reflect.construct(o,arguments,u)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}return function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&a(e,t)}(f,e);var t,n,l,c=s(f);function f(){var e;return u(this,f),(e=c.call(this)).state={visible:!1},e.time=null,e}return t=f,(n=[{key:"onClick",value:function(){this.setState({visible:!this.state.visible})}},{key:"onClosed",value:function(){this.setState({visible:!1})}},{key:"render",value:function(){var e=this;return r.default.createElement("div",null,r.default.createElement(o.Modal,{title:"\u6a21\u6001\u5bf9\u8bdd\u6846",isOpen:this.state.visible,confirmText:"\u786e\u5b9a\u6309\u94ae",cancelText:"\u53d6\u6d88\u6309\u94ae",type:"danger",onCancel:function(){clearTimeout(e.time),console.log("\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01")},onClosed:this.onClosed.bind(this),onConfirm:function(){return console.log("\u786e\u5b9a\u56de\u8c03\uff01, \u8fd9\u91cc\u662f\u5229\u7528Promise\u7b49\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3"),new Promise((function(t,n){var r=Math.random();console.log("\u6d4b\u8bd5\uff0c\u968f\u673a\u503c\u5927\u4e8e 0.5 \u6267\u884c resolve \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c reject \u89e6\u53d1 catch \u9519\u8bef",r,r>.5),e.time=setTimeout(r>.5?t:n,3e3)})).catch((function(){}))}},"\u8fd9\u662f\u4e00\u4e2a\u5355\u51fb \u201c",r.default.createElement("b",null,"\u786e\u5b9a\u6309\u94ae"),"\u201d \u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846\u7684\u5b9e\u4f8b\uff0c\u5173\u95ed\u5bf9\u8bdd\u6846\u89e6\u53d1 \u201c",r.default.createElement("b",null,"onConfirm"),"\u201d \u6216 \u201c",r.default.createElement("b",null,"onCancel"),"\u201d \u4e8b\u4ef6\u3002",r.default.createElement("br",null),r.default.createElement("br",null)," \u8fd9\u91cc\u662f\u5229\u7528 ",r.default.createElement("b",null,"Promise")," \u7684\u7279\u6027\uff0c\u7b49\u5b83\u6267\u884c\u5b8c\u6210\u540e\uff0c\u518d\u53bb\u5173\u95ed\u7a97\u53e3\uff0c\u8fbe\u5230\u5ef6\u8fdf\u5173\u95ed\u7684\u6548\u679c\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u8fd9\u4e2a\u6d4b\u8bd5\u4f8b\u5b50\uff0c\u751f\u6210\u968f\u673a\u503c\u5224\u65ad\u662f\u5426\u5927\u4e8e ",r.default.createElement("b",null,"0.5")," \u6267\u884c ",r.default.createElement("b",null,"resolve")," \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c ",r.default.createElement("b",null,"reject")," \u89e6\u53d1 ",r.default.createElement("b",null,"catch")," \u9519\u8bef\u3002"),r.default.createElement(o.ButtonGroup,null,r.default.createElement(o.Button,{onClick:this.onClick.bind(this)},"\u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846")))}}])&&i(t.prototype,n),l&&i(t,l),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component)}(),141:function(){function e(t){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(t)}var t,r=(t=n(1473))&&t.__esModule?t:{default:t},o=n(6131);function u(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e,t,n){return(t=s(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,s(r.key),r)}}function s(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function c(e,t){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},c(e,t)}function f(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=p(t);if(n){var u=p(this).constructor;r=Reflect.construct(o,arguments,u)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function p(e){return p=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},p(e)}var b=function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&c(e,t)}(b,e);var t,n,s,p=f(b);function b(){var e;return l(this,b),(e=p.call(this)).state={visible:!1,loading:!1},e}return t=b,n=[{key:"onClick",value:function(){this.setState({visible:!this.state.visible})}},{key:"onClosed",value:function(){this.setState({visible:!1})}},{key:"onSubmit",value:function(e){var t=this,n=(e.initial,e.current),r={};if(n.userName.startsWith("u")&&(r.userName="\u59d3\u540d ".concat(n.userName," \u4e0d\u80fd\u4ee5 \u2018u\u2019 \u5f00\u5934")),(!n.age||n.age<18||n.age>30)&&(r.age="\u5e74\u9f84\u5fc5\u987b\u572818 ~ 30\u5c81\u4e4b\u95f4\u3002"),n.textarea||(r.textarea="\u8bf7\u8f93\u5165\u63cf\u8ff0\u5185\u5bb9"),Object.keys(r).length>0){var u=new Error;throw u.filed=r,u}this.setState({loading:!0}),setTimeout((function(){t.setState({loading:!1,visible:!1}),o.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\u901a\u77e5\uff01",description:"\u63d0\u4ea4\u5185\u5bb9\uff0c\u3002"})}),2e3)}},{key:"render",value:function(){var e=this;return r.default.createElement("div",null,r.default.createElement(o.Modal,{title:"\u6a21\u6001\u5bf9\u8bdd\u6846",width:900,isOpen:this.state.visible,onClosed:this.onClosed.bind(this),type:"danger",useButton:!1},r.default.createElement(o.Form,{resetOnSubmit:!1,onSubmit:this.onSubmit.bind(this),onSubmitError:function(e){return e.filed?function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?u(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},e.filed):null},fields:{userName:{initialValue:"uiw",label:"\u59d3\u540d",help:"\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f",children:r.default.createElement(o.Input,{type:"text"})},age:{initialValue:9,label:"\u5e74\u9f84",children:r.default.createElement(o.Input,{type:"number"})},textarea:{initialValue:"",label:"\u63cf\u8ff0\u8bf4\u660e",children:r.default.createElement(o.Textarea,{placeholder:"\u8bf7\u8f93\u5165\u5185\u5bb9"})}}},(function(t){var n=t.fields,u=t.state,i=t.canSubmit;return console.log("fields:--\x3e",u),r.default.createElement("div",null,r.default.createElement(o.Row,{gutter:10},r.default.createElement(o.Col,null,n.userName),r.default.createElement(o.Col,null,n.age)),r.default.createElement(o.Row,{gutter:10},r.default.createElement(o.Col,null,n.textarea)),r.default.createElement(o.Row,{gutter:10,justify:"flex-end"},r.default.createElement(o.Col,{fixed:!0},r.default.createElement(o.Button,{loading:e.state.loading,disabled:!i(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4\u8868\u5355"))))}))),r.default.createElement(o.ButtonGroup,null,r.default.createElement(o.Button,{onClick:this.onClick.bind(this)},"\u8868\u5355\u4e2d\u5e94\u7528")))}}],n&&a(t.prototype,n),s&&a(t,s),Object.defineProperty(t,"prototype",{writable:!1}),b}(r.default.Component);return b}(),257:function(){function e(t){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(t)}var t,r=(t=n(1473))&&t.__esModule?t:{default:t},o=n(6131);function u(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,l(r.key),r)}}function l(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=c(t);if(n){var u=c(this).constructor;r=Reflect.construct(o,arguments,u)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}return function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&a(e,t)}(f,e);var t,n,l,c=s(f);function f(){var e;return u(this,f),(e=c.call(this)).state={visible:!1},e}return t=f,(n=[{key:"onClick",value:function(){this.setState({visible:!this.state.visible})}},{key:"onClosed",value:function(){this.setState({visible:!1})}},{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement(o.Modal,{title:"\u6a21\u6001\u5bf9\u8bdd\u6846",isOpen:this.state.visible,useButton:!1,confirmText:"\u786e\u5b9a\u6309\u94ae",cancelText:"\u53d6\u6d88\u6309\u94ae",icon:"information",type:"danger",onConfirm:function(){return console.log("\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01")},onCancel:function(){return console.log("\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01")},onClosed:this.onClosed.bind(this)},"React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002",r.default.createElement("br",null),r.default.createElement("br",null),r.default.createElement("b",null,"\u7ec4\u4ef6"),r.default.createElement("br",null),r.default.createElement("br",null),"React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 Babel REPL \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002",r.default.createElement("div",{className:"w-modal-footer"},r.default.createElement(o.Button,{type:"danger",onClick:this.onClosed.bind(this)},"\u786e\u5b9a\u6309\u94ae"),r.default.createElement(o.Button,{onClick:this.onClosed.bind(this)},"\u53d6\u6d88\u6309\u94ae"))),r.default.createElement(o.ButtonGroup,null,r.default.createElement(o.Button,{onClick:this.onClick.bind(this)},"\u786e\u8ba4\u5bf9\u8bdd\u6846")))}}])&&i(t.prototype,n),l&&i(t,l),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component)}(),323:function(){function e(t){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(t)}var t,r=(t=n(1473))&&t.__esModule?t:{default:t},o=n(6131);function u(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,l(r.key),r)}}function l(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=c(t);if(n){var u=c(this).constructor;r=Reflect.construct(o,arguments,u)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}var f=function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&a(e,t)}(f,e);var t,n,l,c=s(f);function f(){return u(this,f),c.apply(this,arguments)}return t=f,(n=[{key:"onClick",value:function(){o.Modal.show({confirmText:"\u77e5\u9053\u4e86",children:"\u5feb\u6377\u63d0\u793a",onConfirm:function(){return console.log("\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01")}})}},{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement(o.Button,{onClick:this.onClick.bind(this)},"\u786e\u8ba4\u5bf9\u8bdd\u6846"))}}])&&i(t.prototype,n),l&&i(t,l),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component);return f}()},data:{18:{name:18,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\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 _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n  var _super = _createSuper(Demo);\n  function Demo() {\n    var _this;\n    _classCallCheck(this, Demo);\n    _this = _super.call(this);\n    _this.state = {\n      visible: false\n    };\n    return _this;\n  }\n  _createClass(Demo, [{\n    key: "onClick",\n    value: function onClick() {\n      this.setState({\n        visible: !this.state.visible\n      });\n    }\n  }, {\n    key: "onClosed",\n    value: function onClosed() {\n      this.setState({\n        visible: false\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Modal, {\n        title: "\\u6A21\\u6001\\u5BF9\\u8BDD\\u6846",\n        isOpen: this.state.visible,\n        confirmText: "\\u786E\\u5B9A\\u6309\\u94AE",\n        cancelText: "\\u53D6\\u6D88\\u6309\\u94AE",\n        icon: "information",\n        type: "primary",\n        onConfirm: function onConfirm() {\n          return console.log(\'\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01\');\n        },\n        onCancel: function onCancel() {\n          return console.log(\'\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01\');\n        },\n        onClosed: this.onClosed.bind(this)\n      }, "React \\u53EF\\u4EE5\\u975E\\u5E38\\u8F7B\\u677E\\u5730\\u521B\\u5EFA\\u7528\\u6237\\u4EA4\\u4E92\\u754C\\u9762\\u3002\\u4E3A\\u4F60\\u5E94\\u7528\\u7684\\u6BCF\\u4E00\\u4E2A\\u72B6\\u6001\\u8BBE\\u8BA1\\u7B80\\u6D01\\u7684\\u89C6\\u56FE\\uFF0C\\u5728\\u6570\\u636E\\u6539\\u53D8\\u65F6 React \\u4E5F\\u53EF\\u4EE5\\u9AD8\\u6548\\u5730\\u66F4\\u65B0\\u6E32\\u67D3\\u754C\\u9762\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u4EE5\\u58F0\\u660E\\u5F0F\\u7F16\\u5199UI\\uFF0C\\u53EF\\u4EE5\\u8BA9\\u4F60\\u7684\\u4EE3\\u7801\\u66F4\\u52A0\\u53EF\\u9760\\uFF0C\\u4E14\\u65B9\\u4FBF\\u8C03\\u8BD5\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u521B\\u5EFA\\u597D\\u62E5\\u6709\\u5404\\u81EA\\u72B6\\u6001\\u7684\\u7EC4\\u4EF6\\uFF0C\\u518D\\u7531\\u7EC4\\u4EF6\\u6784\\u6210\\u66F4\\u52A0\\u590D\\u6742\\u7684\\u754C\\u9762\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u65E0\\u9700\\u518D\\u7528\\u6A21\\u7248\\u4EE3\\u7801\\uFF0C\\u901A\\u8FC7\\u4F7F\\u7528JavaScript\\u7F16\\u5199\\u7684\\u7EC4\\u4EF6\\u4F60\\u53EF\\u4EE5\\u66F4\\u597D\\u5730\\u4F20\\u9012\\u6570\\u636E\\uFF0C\\u5C06\\u5E94\\u7528\\u72B6\\u6001\\u548CDOM\\u62C6\\u5206\\u5F00\\u6765\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u65E0\\u8BBA\\u4F60\\u73B0\\u5728\\u6B63\\u5728\\u4F7F\\u7528\\u4EC0\\u4E48\\u6280\\u672F\\u6808\\uFF0C\\u4F60\\u90FD\\u53EF\\u4EE5\\u968F\\u65F6\\u5F15\\u5165 React \\u5F00\\u53D1\\u65B0\\u7279\\u6027\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("b", null, "\\u7EC4\\u4EF6"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "React \\u7EC4\\u4EF6\\u4F7F\\u7528\\u4E00\\u4E2A\\u540D\\u4E3A render() \\u7684\\u65B9\\u6CD5\\uFF0C \\u63A5\\u6536\\u6570\\u636E\\u4F5C\\u4E3A\\u8F93\\u5165\\uFF0C\\u8F93\\u51FA\\u9875\\u9762\\u4E2D\\u5BF9\\u5E94\\u5C55\\u793A\\u7684\\u5185\\u5BB9\\u3002 \\u4E0B\\u9762\\u8FD9\\u4E2A\\u793A\\u4F8B\\u4E2D\\u7C7B\\u4F3CXML\\u7684\\u5199\\u6CD5\\u88AB\\u79F0\\u4E3AJSX. \\u8F93\\u5165\\u7684\\u6570\\u636E\\u901A\\u8FC7 this.props \\u4F20\\u5165 render() \\u65B9\\u6CD5\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u4F7F\\u7528 React \\u7684\\u65F6\\u5019\\u4E5F\\u53EF\\u4EE5\\u4E0D\\u4F7F\\u7528 JSX \\u8BED\\u6CD5 \\u4F60\\u53EF\\u4EE5\\u5728 ", /*#__PURE__*/_react["default"].createElement("a", {\n        href: "https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA",\n        target: "_blank"\n      }, "Babel REPL"), " \\u67E5\\u770B JSX \\u662F\\u5982\\u4F55\\u88AB\\u6E32\\u67D3\\u6210\\u539F\\u751F JavaScript \\u4EE3\\u7801\\u7684\\u3002"), /*#__PURE__*/_react["default"].createElement(_uiw.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n        onClick: this.onClick.bind(this)\n      }, "\\u786E\\u8BA4\\u5BF9\\u8BDD\\u6846")));\n    }\n  }]);\n  return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Modal, ButtonGroup, Button } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n    }\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title="\u6a21\u6001\u5bf9\u8bdd\u6846"\n          isOpen={this.state.visible}\n          confirmText="\u786e\u5b9a\u6309\u94ae"\n          cancelText="\u53d6\u6d88\u6309\u94ae"\n          icon="information"\n          type="primary"\n          onConfirm={() => console.log(\'\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01\')}\n          onCancel={() => console.log(\'\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01\')}\n          onClosed={this.onClosed.bind(this)}\n        >\n          React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002\n          <br /><br />\n          \u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002\n          <br /><br />\n          \u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002\n          <br /><br />\n          \u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002\n          <br /><br />\n          \u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002\n          <br /><br />\n          <b>\u7ec4\u4ef6</b>\n          <br /><br />\n          React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002\n          <br /><br />\n          \u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 <a href="https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA" target="_blank">Babel REPL</a> \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u786e\u8ba4\u5bf9\u8bdd\u6846</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nexport default Demo;'},79:{name:79,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\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 _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n  var _super = _createSuper(Demo);\n  function Demo() {\n    var _this;\n    _classCallCheck(this, Demo);\n    _this = _super.call(this);\n    _this.state = {\n      visible: false\n    };\n    _this.time = null;\n    return _this;\n  }\n  _createClass(Demo, [{\n    key: "onClick",\n    value: function onClick() {\n      this.setState({\n        visible: !this.state.visible\n      });\n    }\n  }, {\n    key: "onClosed",\n    value: function onClosed() {\n      this.setState({\n        visible: false\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      var _this2 = this;\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Modal, {\n        title: "\\u6A21\\u6001\\u5BF9\\u8BDD\\u6846",\n        isOpen: this.state.visible,\n        confirmText: "\\u786E\\u5B9A\\u6309\\u94AE",\n        cancelText: "\\u53D6\\u6D88\\u6309\\u94AE",\n        type: "danger",\n        onCancel: function onCancel() {\n          clearTimeout(_this2.time);\n          console.log(\'\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01\');\n        },\n        onClosed: this.onClosed.bind(this),\n        onConfirm: function onConfirm() {\n          console.log(\'\u786e\u5b9a\u56de\u8c03\uff01, \u8fd9\u91cc\u662f\u5229\u7528Promise\u7b49\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3\');\n          return new Promise(function (resolve, reject) {\n            var random = Math.random();\n            console.log(\'\u6d4b\u8bd5\uff0c\u968f\u673a\u503c\u5927\u4e8e 0.5 \u6267\u884c resolve \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c reject \u89e6\u53d1 catch \u9519\u8bef\', random, random > 0.5);\n            _this2.time = setTimeout(random > 0.5 ? resolve : reject, 3000);\n          })["catch"](function () {\n            // \u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u65b9\u5f0f\uff0c\u963b\u6b62\u5f39\u6846\u6d88\u5931\n            // throw new Error();\n          });\n        }\n      }, "\\u8FD9\\u662F\\u4E00\\u4E2A\\u5355\\u51FB \\u201C", /*#__PURE__*/_react["default"].createElement("b", null, "\\u786E\\u5B9A\\u6309\\u94AE"), "\\u201D \\u5EF6\\u8FDF\\u5173\\u95ED\\u5BF9\\u8BDD\\u6846\\u7684\\u5B9E\\u4F8B\\uFF0C\\u5173\\u95ED\\u5BF9\\u8BDD\\u6846\\u89E6\\u53D1 \\u201C", /*#__PURE__*/_react["default"].createElement("b", null, "onConfirm"), "\\u201D \\u6216 \\u201C", /*#__PURE__*/_react["default"].createElement("b", null, "onCancel"), "\\u201D \\u4E8B\\u4EF6\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), " \\u8FD9\\u91CC\\u662F\\u5229\\u7528 ", /*#__PURE__*/_react["default"].createElement("b", null, "Promise"), " \\u7684\\u7279\\u6027\\uFF0C\\u7B49\\u5B83\\u6267\\u884C\\u5B8C\\u6210\\u540E\\uFF0C\\u518D\\u53BB\\u5173\\u95ED\\u7A97\\u53E3\\uFF0C\\u8FBE\\u5230\\u5EF6\\u8FDF\\u5173\\u95ED\\u7684\\u6548\\u679C\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u8FD9\\u4E2A\\u6D4B\\u8BD5\\u4F8B\\u5B50\\uFF0C\\u751F\\u6210\\u968F\\u673A\\u503C\\u5224\\u65AD\\u662F\\u5426\\u5927\\u4E8E ", /*#__PURE__*/_react["default"].createElement("b", null, "0.5"), " \\u6267\\u884C ", /*#__PURE__*/_react["default"].createElement("b", null, "resolve"), " \\u4E8B\\u4EF6\\uFF0C\\u5426\\u5219 \\u6267\\u884C ", /*#__PURE__*/_react["default"].createElement("b", null, "reject"), " \\u89E6\\u53D1 ", /*#__PURE__*/_react["default"].createElement("b", null, "catch"), " \\u9519\\u8BEF\\u3002"), /*#__PURE__*/_react["default"].createElement(_uiw.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n        onClick: this.onClick.bind(this)\n      }, "\\u5EF6\\u8FDF\\u5173\\u95ED\\u5BF9\\u8BDD\\u6846")));\n    }\n  }]);\n  return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n    }\n    this.time = null\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          isOpen={this.state.visible}\n          confirmText=\"\u786e\u5b9a\u6309\u94ae\"\n          cancelText=\"\u53d6\u6d88\u6309\u94ae\"\n          type=\"danger\"\n          onCancel={() => {\n            clearTimeout(this.time)\n            console.log('\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01')\n          }}\n          onClosed={this.onClosed.bind(this)}\n          onConfirm={() => {\n            console.log('\u786e\u5b9a\u56de\u8c03\uff01, \u8fd9\u91cc\u662f\u5229\u7528Promise\u7b49\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3');\n            return new Promise((resolve, reject) => {\n              const random = Math.random();\n              console.log('\u6d4b\u8bd5\uff0c\u968f\u673a\u503c\u5927\u4e8e 0.5 \u6267\u884c resolve \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c reject \u89e6\u53d1 catch \u9519\u8bef', random, random > 0.5)\n              this.time = setTimeout(random > 0.5 ? resolve : reject, 3000);\n            }).catch(() => {\n              // \u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u65b9\u5f0f\uff0c\u963b\u6b62\u5f39\u6846\u6d88\u5931\n              // throw new Error();\n            });\n          }}\n        >\n          \u8fd9\u662f\u4e00\u4e2a\u5355\u51fb \u201c<b>\u786e\u5b9a\u6309\u94ae</b>\u201d \u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846\u7684\u5b9e\u4f8b\uff0c\u5173\u95ed\u5bf9\u8bdd\u6846\u89e6\u53d1 \u201c<b>onConfirm</b>\u201d \u6216 \u201c<b>onCancel</b>\u201d \u4e8b\u4ef6\u3002<br /><br /> \u8fd9\u91cc\u662f\u5229\u7528 <b>Promise</b> \u7684\u7279\u6027\uff0c\u7b49\u5b83\u6267\u884c\u5b8c\u6210\u540e\uff0c\u518d\u53bb\u5173\u95ed\u7a97\u53e3\uff0c\u8fbe\u5230\u5ef6\u8fdf\u5173\u95ed\u7684\u6548\u679c\u3002<br /><br />\n          \u8fd9\u4e2a\u6d4b\u8bd5\u4f8b\u5b50\uff0c\u751f\u6210\u968f\u673a\u503c\u5224\u65ad\u662f\u5426\u5927\u4e8e <b>0.5</b> \u6267\u884c <b>resolve</b> \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c <b>reject</b> \u89e6\u53d1 <b>catch</b> \u9519\u8bef\u3002\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nexport default Demo;"},141:{name:141,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\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 _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n  var _super = _createSuper(Demo);\n  function Demo() {\n    var _this;\n    _classCallCheck(this, Demo);\n    _this = _super.call(this);\n    _this.state = {\n      visible: false,\n      loading: false\n    };\n    return _this;\n  }\n  _createClass(Demo, [{\n    key: "onClick",\n    value: function onClick() {\n      this.setState({\n        visible: !this.state.visible\n      });\n    }\n  }, {\n    key: "onClosed",\n    value: function onClosed() {\n      this.setState({\n        visible: false\n      });\n    }\n  }, {\n    key: "onSubmit",\n    value: function onSubmit(_ref) {\n      var _this2 = this;\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.age || current.age < 18 || current.age > 30) {\n        errorObj.age = \'\u5e74\u9f84\u5fc5\u987b\u572818 ~ 30\u5c81\u4e4b\u95f4\u3002\';\n      }\n      if (!current.textarea) {\n        errorObj.textarea = \'\u8bf7\u8f93\u5165\u63cf\u8ff0\u5185\u5bb9\';\n      }\n      if (Object.keys(errorObj).length > 0) {\n        var err = new Error();\n        err.filed = errorObj;\n        throw err;\n      }\n      this.setState({\n        loading: true\n      });\n      setTimeout(function () {\n        _this2.setState({\n          loading: false,\n          visible: false\n        });\n        _uiw.Notify.success({\n          title: \'\u63d0\u4ea4\u6210\u529f\u901a\u77e5\uff01\',\n          description: \'\u63d0\u4ea4\u5185\u5bb9\uff0c\u3002\'\n        });\n      }, 2000);\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      var _this3 = this;\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Modal, {\n        title: "\\u6A21\\u6001\\u5BF9\\u8BDD\\u6846",\n        width: 900,\n        isOpen: this.state.visible,\n        onClosed: this.onClosed.bind(this),\n        type: "danger",\n        useButton: false\n      }, /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n        resetOnSubmit: false,\n        onSubmit: this.onSubmit.bind(this),\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            help: \'\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f\',\n            children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n              type: "text"\n            })\n          },\n          age: {\n            initialValue: 9,\n            label: \'\u5e74\u9f84\',\n            children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n              type: "number"\n            })\n          },\n          textarea: {\n            initialValue: \'\',\n            label: \'\u63cf\u8ff0\u8bf4\u660e\',\n            children: /*#__PURE__*/_react["default"].createElement(_uiw.Textarea, {\n              placeholder: "\\u8BF7\\u8F93\\u5165\\u5185\\u5BB9"\n            })\n          }\n        }\n      }, function (_ref2) {\n        var fields = _ref2.fields,\n          state = _ref2.state,\n          canSubmit = _ref2.canSubmit;\n        console.log(\'fields:--\x3e\', 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, 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.textarea)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n          gutter: 10,\n          justify: "flex-end"\n        }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n          fixed: true\n        }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n          loading: _this3.state.loading,\n          disabled: !canSubmit(),\n          type: "primary",\n          htmlType: "submit"\n        }, "\\u63D0\\u4EA4\\u8868\\u5355"))));\n      })), /*#__PURE__*/_react["default"].createElement(_uiw.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n        onClick: this.onClick.bind(this)\n      }, "\\u8868\\u5355\\u4E2D\\u5E94\\u7528")));\n    }\n  }]);\n  return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Modal, ButtonGroup, Button, Form, Input, Textarea, Notify, Row, Col } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n      loading: false,\n    }\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\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.age || current.age < 18 || current.age > 30) {\n      errorObj.age = '\u5e74\u9f84\u5fc5\u987b\u572818 ~ 30\u5c81\u4e4b\u95f4\u3002';\n    }\n    if (!current.textarea) {\n      errorObj.textarea = '\u8bf7\u8f93\u5165\u63cf\u8ff0\u5185\u5bb9';\n    }\n    if(Object.keys(errorObj).length > 0) {\n      const err = new Error();\n      err.filed = errorObj;\n      throw err;\n    }\n\n    this.setState({ loading: true });\n    setTimeout(() => {\n      this.setState({ loading: false, visible: false });\n      Notify.success({ title: '\u63d0\u4ea4\u6210\u529f\u901a\u77e5\uff01', description: '\u63d0\u4ea4\u5185\u5bb9\uff0c\u3002' });\n    }, 2000);\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          width={900}\n          isOpen={this.state.visible}\n          onClosed={this.onClosed.bind(this)}\n          type=\"danger\"\n          useButton={false}\n        >\n          <Form\n            resetOnSubmit={false}\n            onSubmit={this.onSubmit.bind(this)}\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                help: '\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f',\n                children: <Input type=\"text\" />\n              },\n              age: {\n                initialValue: 9,\n                label: '\u5e74\u9f84',\n                children: <Input type=\"number\" />\n              },\n              textarea: {\n                initialValue: '',\n                label: '\u63cf\u8ff0\u8bf4\u660e',\n                children: <Textarea placeholder=\"\u8bf7\u8f93\u5165\u5185\u5bb9\" />\n              },\n            }}\n          >\n            {({ fields, state, canSubmit }) => {\n              console.log('fields:--\x3e', state);\n              return (\n                <div>\n                  <Row gutter={10}>\n                    <Col>{fields.userName}</Col>\n                    <Col>{fields.age}</Col>\n                  </Row>\n                  <Row gutter={10}>\n                    <Col>{fields.textarea}</Col>\n                  </Row>\n                  <Row gutter={10} justify=\"flex-end\">\n                    <Col fixed>\n                      <Button loading={this.state.loading} disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4\u8868\u5355</Button>\n                    </Col>\n                  </Row>\n                </div>\n              )\n            }}\n          </Form>\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u8868\u5355\u4e2d\u5e94\u7528</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\n\nexport default Demo;"},257:{name:257,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\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 _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n  var _super = _createSuper(Demo);\n  function Demo() {\n    var _this;\n    _classCallCheck(this, Demo);\n    _this = _super.call(this);\n    _this.state = {\n      visible: false\n    };\n    return _this;\n  }\n  _createClass(Demo, [{\n    key: "onClick",\n    value: function onClick() {\n      this.setState({\n        visible: !this.state.visible\n      });\n    }\n  }, {\n    key: "onClosed",\n    value: function onClosed() {\n      this.setState({\n        visible: false\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Modal, {\n        title: "\\u6A21\\u6001\\u5BF9\\u8BDD\\u6846",\n        isOpen: this.state.visible,\n        useButton: false,\n        confirmText: "\\u786E\\u5B9A\\u6309\\u94AE",\n        cancelText: "\\u53D6\\u6D88\\u6309\\u94AE",\n        icon: "information",\n        type: "danger",\n        onConfirm: function onConfirm() {\n          return console.log(\'\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01\');\n        },\n        onCancel: function onCancel() {\n          return console.log(\'\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01\');\n        },\n        onClosed: this.onClosed.bind(this)\n      }, "React \\u53EF\\u4EE5\\u975E\\u5E38\\u8F7B\\u677E\\u5730\\u521B\\u5EFA\\u7528\\u6237\\u4EA4\\u4E92\\u754C\\u9762\\u3002\\u4E3A\\u4F60\\u5E94\\u7528\\u7684\\u6BCF\\u4E00\\u4E2A\\u72B6\\u6001\\u8BBE\\u8BA1\\u7B80\\u6D01\\u7684\\u89C6\\u56FE\\uFF0C\\u5728\\u6570\\u636E\\u6539\\u53D8\\u65F6 React \\u4E5F\\u53EF\\u4EE5\\u9AD8\\u6548\\u5730\\u66F4\\u65B0\\u6E32\\u67D3\\u754C\\u9762\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u4EE5\\u58F0\\u660E\\u5F0F\\u7F16\\u5199UI\\uFF0C\\u53EF\\u4EE5\\u8BA9\\u4F60\\u7684\\u4EE3\\u7801\\u66F4\\u52A0\\u53EF\\u9760\\uFF0C\\u4E14\\u65B9\\u4FBF\\u8C03\\u8BD5\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u521B\\u5EFA\\u597D\\u62E5\\u6709\\u5404\\u81EA\\u72B6\\u6001\\u7684\\u7EC4\\u4EF6\\uFF0C\\u518D\\u7531\\u7EC4\\u4EF6\\u6784\\u6210\\u66F4\\u52A0\\u590D\\u6742\\u7684\\u754C\\u9762\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u65E0\\u9700\\u518D\\u7528\\u6A21\\u7248\\u4EE3\\u7801\\uFF0C\\u901A\\u8FC7\\u4F7F\\u7528JavaScript\\u7F16\\u5199\\u7684\\u7EC4\\u4EF6\\u4F60\\u53EF\\u4EE5\\u66F4\\u597D\\u5730\\u4F20\\u9012\\u6570\\u636E\\uFF0C\\u5C06\\u5E94\\u7528\\u72B6\\u6001\\u548CDOM\\u62C6\\u5206\\u5F00\\u6765\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u65E0\\u8BBA\\u4F60\\u73B0\\u5728\\u6B63\\u5728\\u4F7F\\u7528\\u4EC0\\u4E48\\u6280\\u672F\\u6808\\uFF0C\\u4F60\\u90FD\\u53EF\\u4EE5\\u968F\\u65F6\\u5F15\\u5165 React \\u5F00\\u53D1\\u65B0\\u7279\\u6027\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("b", null, "\\u7EC4\\u4EF6"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "React \\u7EC4\\u4EF6\\u4F7F\\u7528\\u4E00\\u4E2A\\u540D\\u4E3A render() \\u7684\\u65B9\\u6CD5\\uFF0C \\u63A5\\u6536\\u6570\\u636E\\u4F5C\\u4E3A\\u8F93\\u5165\\uFF0C\\u8F93\\u51FA\\u9875\\u9762\\u4E2D\\u5BF9\\u5E94\\u5C55\\u793A\\u7684\\u5185\\u5BB9\\u3002 \\u4E0B\\u9762\\u8FD9\\u4E2A\\u793A\\u4F8B\\u4E2D\\u7C7B\\u4F3CXML\\u7684\\u5199\\u6CD5\\u88AB\\u79F0\\u4E3AJSX. \\u8F93\\u5165\\u7684\\u6570\\u636E\\u901A\\u8FC7 this.props \\u4F20\\u5165 render() \\u65B9\\u6CD5\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u4F7F\\u7528 React \\u7684\\u65F6\\u5019\\u4E5F\\u53EF\\u4EE5\\u4E0D\\u4F7F\\u7528 JSX \\u8BED\\u6CD5 \\u4F60\\u53EF\\u4EE5\\u5728 Babel REPL \\u67E5\\u770B JSX \\u662F\\u5982\\u4F55\\u88AB\\u6E32\\u67D3\\u6210\\u539F\\u751F JavaScript \\u4EE3\\u7801\\u7684\\u3002", /*#__PURE__*/_react["default"].createElement("div", {\n        className: "w-modal-footer"\n      }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n        type: "danger",\n        onClick: this.onClosed.bind(this)\n      }, "\\u786E\\u5B9A\\u6309\\u94AE"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n        onClick: this.onClosed.bind(this)\n      }, "\\u53D6\\u6D88\\u6309\\u94AE"))), /*#__PURE__*/_react["default"].createElement(_uiw.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n        onClick: this.onClick.bind(this)\n      }, "\\u786E\\u8BA4\\u5BF9\\u8BDD\\u6846")));\n    }\n  }]);\n  return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Modal, ButtonGroup, Button } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n    }\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title="\u6a21\u6001\u5bf9\u8bdd\u6846"\n          isOpen={this.state.visible}\n          useButton={false}\n          confirmText="\u786e\u5b9a\u6309\u94ae"\n          cancelText="\u53d6\u6d88\u6309\u94ae"\n          icon="information"\n          type="danger"\n          onConfirm={() => console.log(\'\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01\')}\n          onCancel={() => console.log(\'\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01\')}\n          onClosed={this.onClosed.bind(this)}\n        >\n          React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002\n          <br /><br />\n          \u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002\n          <br /><br />\n          \u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002\n          <br /><br />\n          \u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002\n          <br /><br />\n          \u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002\n          <br /><br />\n          <b>\u7ec4\u4ef6</b>\n          <br /><br />\n          React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002\n          <br /><br />\n          \u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 Babel REPL \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002\n          <div className="w-modal-footer">\n            <Button type="danger" onClick={this.onClosed.bind(this)} >\u786e\u5b9a\u6309\u94ae</Button>\n            <Button onClick={this.onClosed.bind(this)} >\u53d6\u6d88\u6309\u94ae</Button>\n          </div>\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u786e\u8ba4\u5bf9\u8bdd\u6846</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nexport default Demo;'},323:{name:323,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\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 _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n  var _super = _createSuper(Demo);\n  function Demo() {\n    _classCallCheck(this, Demo);\n    return _super.apply(this, arguments);\n  }\n  _createClass(Demo, [{\n    key: "onClick",\n    value: function onClick() {\n      _uiw.Modal.show({\n        confirmText: "\u77e5\u9053\u4e86",\n        children: "\u5feb\u6377\u63d0\u793a",\n        onConfirm: function onConfirm() {\n          return console.log(\'\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01\');\n        }\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n        onClick: this.onClick.bind(this)\n      }, "\\u786E\\u8BA4\\u5BF9\\u8BDD\\u6846"));\n    }\n  }]);\n  return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  onClick() {\n    Modal.show({\n      confirmText: \"\u77e5\u9053\u4e86\",\n      children: \"\u5feb\u6377\u63d0\u793a\",\n      onConfirm: () => console.log('\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01'),\n    })\n  }\n  render() {\n    return (\n      <div>\n        <Button onClick={this.onClick.bind(this)}>\u786e\u8ba4\u5bf9\u8bdd\u6846</Button>\n      </div>\n    )\n  }\n}\nexport default Demo;"}},source:"Modal \u6a21\u6001\u5bf9\u8bdd\u6846\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-modal/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-modal.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-modal)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-modal.svg?label=@uiw/react-modal)](https://npmjs.com/@uiw/react-modal)\n\n\u6a21\u6001\u5bf9\u8bdd\u6846\u3002\n\n```jsx\nimport { Modal } from 'uiw';\n// or\nimport Modal from '@uiw/react-modal';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n    }\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          isOpen={this.state.visible}\n          confirmText=\"\u786e\u5b9a\u6309\u94ae\"\n          cancelText=\"\u53d6\u6d88\u6309\u94ae\"\n          icon=\"information\"\n          type=\"primary\"\n          onConfirm={() => console.log('\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01')}\n          onCancel={() => console.log('\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01')}\n          onClosed={this.onClosed.bind(this)}\n        >\n          React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002\n          <br /><br />\n          \u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002\n          <br /><br />\n          \u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002\n          <br /><br />\n          \u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002\n          <br /><br />\n          \u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002\n          <br /><br />\n          <b>\u7ec4\u4ef6</b>\n          <br /><br />\n          React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002\n          <br /><br />\n          \u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 <a href=\"https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA\" target=\"_blank\">Babel REPL</a> \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u786e\u8ba4\u5bf9\u8bdd\u6846</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nexport default Demo;\n```\n\n### \u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846\n\n\u8fd9\u91cc\u662f\u5229\u7528 `Promise` \u7b49\u5b83\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n    }\n    this.time = null\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          isOpen={this.state.visible}\n          confirmText=\"\u786e\u5b9a\u6309\u94ae\"\n          cancelText=\"\u53d6\u6d88\u6309\u94ae\"\n          type=\"danger\"\n          onCancel={() => {\n            clearTimeout(this.time)\n            console.log('\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01')\n          }}\n          onClosed={this.onClosed.bind(this)}\n          onConfirm={() => {\n            console.log('\u786e\u5b9a\u56de\u8c03\uff01, \u8fd9\u91cc\u662f\u5229\u7528Promise\u7b49\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3');\n            return new Promise((resolve, reject) => {\n              const random = Math.random();\n              console.log('\u6d4b\u8bd5\uff0c\u968f\u673a\u503c\u5927\u4e8e 0.5 \u6267\u884c resolve \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c reject \u89e6\u53d1 catch \u9519\u8bef', random, random > 0.5)\n              this.time = setTimeout(random > 0.5 ? resolve : reject, 3000);\n            }).catch(() => {\n              // \u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u65b9\u5f0f\uff0c\u963b\u6b62\u5f39\u6846\u6d88\u5931\n              // throw new Error();\n            });\n          }}\n        >\n          \u8fd9\u662f\u4e00\u4e2a\u5355\u51fb \u201c<b>\u786e\u5b9a\u6309\u94ae</b>\u201d \u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846\u7684\u5b9e\u4f8b\uff0c\u5173\u95ed\u5bf9\u8bdd\u6846\u89e6\u53d1 \u201c<b>onConfirm</b>\u201d \u6216 \u201c<b>onCancel</b>\u201d \u4e8b\u4ef6\u3002<br /><br /> \u8fd9\u91cc\u662f\u5229\u7528 <b>Promise</b> \u7684\u7279\u6027\uff0c\u7b49\u5b83\u6267\u884c\u5b8c\u6210\u540e\uff0c\u518d\u53bb\u5173\u95ed\u7a97\u53e3\uff0c\u8fbe\u5230\u5ef6\u8fdf\u5173\u95ed\u7684\u6548\u679c\u3002<br /><br />\n          \u8fd9\u4e2a\u6d4b\u8bd5\u4f8b\u5b50\uff0c\u751f\u6210\u968f\u673a\u503c\u5224\u65ad\u662f\u5426\u5927\u4e8e <b>0.5</b> \u6267\u884c <b>resolve</b> \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c <b>reject</b> \u89e6\u53d1 <b>catch</b> \u9519\u8bef\u3002\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nexport default Demo;\n```\n\n\n### \u8868\u5355\u5e94\u7528\n\n\u8fd9\u91cc\u662f\u5229\u7528 `Promise` \u7b49\u5b83\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Modal, ButtonGroup, Button, Form, Input, Textarea, Notify, Row, Col } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n      loading: false,\n    }\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\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.age || current.age < 18 || current.age > 30) {\n      errorObj.age = '\u5e74\u9f84\u5fc5\u987b\u572818 ~ 30\u5c81\u4e4b\u95f4\u3002';\n    }\n    if (!current.textarea) {\n      errorObj.textarea = '\u8bf7\u8f93\u5165\u63cf\u8ff0\u5185\u5bb9';\n    }\n    if(Object.keys(errorObj).length > 0) {\n      const err = new Error();\n      err.filed = errorObj;\n      throw err;\n    }\n\n    this.setState({ loading: true });\n    setTimeout(() => {\n      this.setState({ loading: false, visible: false });\n      Notify.success({ title: '\u63d0\u4ea4\u6210\u529f\u901a\u77e5\uff01', description: '\u63d0\u4ea4\u5185\u5bb9\uff0c\u3002' });\n    }, 2000);\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          width={900}\n          isOpen={this.state.visible}\n          onClosed={this.onClosed.bind(this)}\n          type=\"danger\"\n          useButton={false}\n        >\n          <Form\n            resetOnSubmit={false}\n            onSubmit={this.onSubmit.bind(this)}\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                help: '\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f',\n                children: <Input type=\"text\" />\n              },\n              age: {\n                initialValue: 9,\n                label: '\u5e74\u9f84',\n                children: <Input type=\"number\" />\n              },\n              textarea: {\n                initialValue: '',\n                label: '\u63cf\u8ff0\u8bf4\u660e',\n                children: <Textarea placeholder=\"\u8bf7\u8f93\u5165\u5185\u5bb9\" />\n              },\n            }}\n          >\n            {({ fields, state, canSubmit }) => {\n              console.log('fields:--\x3e', state);\n              return (\n                <div>\n                  <Row gutter={10}>\n                    <Col>{fields.userName}</Col>\n                    <Col>{fields.age}</Col>\n                  </Row>\n                  <Row gutter={10}>\n                    <Col>{fields.textarea}</Col>\n                  </Row>\n                  <Row gutter={10} justify=\"flex-end\">\n                    <Col fixed>\n                      <Button loading={this.state.loading} disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4\u8868\u5355</Button>\n                    </Col>\n                  </Row>\n                </div>\n              )\n            }}\n          </Form>\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u8868\u5355\u4e2d\u5e94\u7528</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\n\nexport default Demo;\n```\n\n### \u81ea\u5b9a\u4e49\u9875\u811a\n\n\u8bbe\u7f6e `useButton={false}` \u9690\u85cf\u9ed8\u8ba4\u7684\u6309\u94ae\uff0c\u518d\u6839\u636e\u81ea\u5df1\u9700\u6c42\u5b9a\u4e49\u6309\u94ae\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n    }\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          isOpen={this.state.visible}\n          useButton={false}\n          confirmText=\"\u786e\u5b9a\u6309\u94ae\"\n          cancelText=\"\u53d6\u6d88\u6309\u94ae\"\n          icon=\"information\"\n          type=\"danger\"\n          onConfirm={() => console.log('\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01')}\n          onCancel={() => console.log('\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01')}\n          onClosed={this.onClosed.bind(this)}\n        >\n          React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002\n          <br /><br />\n          \u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002\n          <br /><br />\n          \u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002\n          <br /><br />\n          \u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002\n          <br /><br />\n          \u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002\n          <br /><br />\n          <b>\u7ec4\u4ef6</b>\n          <br /><br />\n          React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002\n          <br /><br />\n          \u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 Babel REPL \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002\n          <div className=\"w-modal-footer\">\n            <Button type=\"danger\" onClick={this.onClosed.bind(this)} >\u786e\u5b9a\u6309\u94ae</Button>\n            <Button onClick={this.onClosed.bind(this)} >\u53d6\u6d88\u6309\u94ae</Button>\n          </div>\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u786e\u8ba4\u5bf9\u8bdd\u6846</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nexport default Demo;\n```\n\n### \u5feb\u6377\u5f39\u51fa\n\n\u4f7f\u7528 show() \u53ef\u4ee5\u5feb\u6377\u5730\u5f39\u51fa\u786e\u8ba4\u6846\u3002\u63a5\u53d7\u7684\u53c2\u6570\u4e0e ModalProps \u4e00\u6837, \u53ea\u662f\u5c11\u4e86 isOpen \u4e0e onClosed\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  onClick() {\n    Modal.show({\n      confirmText: \"\u77e5\u9053\u4e86\",\n      children: \"\u5feb\u6377\u63d0\u793a\",\n      onConfirm: () => console.log('\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01'),\n    })\n  }\n  render() {\n    return (\n      <div>\n        <Button onClick={this.onClick.bind(this)}>\u786e\u8ba4\u5bf9\u8bdd\u6846</Button>\n      </div>\n    )\n  }\n}\nexport default Demo;\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| title | \u8bbe\u7f6e\u6807\u9898 | Function(e) | - |\n| onCancel | \u53d6\u6d88\u6309\u94ae\u7684\u56de\u8c03\u51fd\u6570 | Function(e) | - |\n| onConfirm | \u70b9\u51fb\u786e\u5b9a\u6309\u94ae\u56de\u8c03 | Function(e) | - |\n| cancelText | \u53d6\u6d88\u6309\u94ae\u6587\u5b57\uff0c | String | - |\n| confirmText | \u786e\u8ba4\u6309\u94ae\u6587\u5b57 | String | `\u786e\u8ba4` |\n| icon | \u8bbe\u7f6e\u5bf9\u8bdd\u6846\u53f3\u4e0a\u89d2\u56fe\u6807\uff0c\u8bbe\u7f6e `type` \u5c06\u56fe\u6807\u8bbe\u7f6e\u4e0d\u540c\u7684\u989c\u8272\u3002\u5f53\u524d\u5c5e\u6027\u4e3a [`<Icon>`](#/components/icon) \u7ec4\u4ef6\u7684 `type` \u5c5e\u6027\uff0c\u6240\u4ee5\u53ef\u4ee5\u53c2\u8003\u8be5\u7ec4\u4ef6\u81ea\u5b9a\u4e49\u56fe\u6807\u3002 | String/ReactNode | - |\n| useButton | \u662f\u5426\u4f7f\u7528\u9ed8\u8ba4\u6309\u94ae\uff0c\u5982\u679c\u8bbe\u7f6e `false` \u9700\u8981\u81ea\u5b9a\u4e49\u6309\u94ae\u5173\u95ed | Boolean | `true` |\n| type | \u6309\u94ae\u7c7b\u578b\u8ddf `<Button>` \u7ec4\u4ef6\u7684 `type` \u53c2\u6570\u4e00\u81f4\uff0c\u540c\u65f6\u4f1a\u5f71\u54cd\u6309\u94ae\u989c\u8272\u3002 | String | `light` |\n| width | \u8bbe\u7f6e\u5f39\u51fa\u6846\u5bbd\u5ea6 | Number | - |\n| bodyStyle | Modal body \u6837\u5f0f | `CSSProperties` | - |\n| cancelButtonProps | cancel \u6309\u94ae props | `ButtonProps` | - |\n| confirmButtonProps | confirm \u6309\u94ae props | `ButtonProps` | - |\n| maxWidth | \u9ed8\u8ba4\u5f39\u51fa\u6846\u6700\u5927\u5bbd\u5ea6 `500` | Number | `500` |\n| minWidth | \u9ed8\u8ba4\u5f39\u51fa\u6846\u6700\u5c0f\u5bbd\u5ea6 `320` | Number | `320` |\n| isCloseButtonShown | \u662f\u5426\u5728\u5bf9\u8bdd\u6846\u7684\u6807\u9898\u4e2d\u663e\u793a\u5173\u95ed\u6309\u94ae\u3002 \u8bf7\u6ce8\u610f\uff0c\u53ea\u6709\u5728\u63d0\u4f9b\u6807\u9898\u65f6\u624d\u4f1a\u5448\u73b0\u6807\u9898\u3002 | Boolean | `true` |\n| isOpen[`<Overlay>`](#/components/overlay) | \u5bf9\u8bdd\u6846\u662f\u5426\u53ef\u89c1 | Boolean | `false` |\n| maskClosable[`<Overlay>`](#/components/overlay) | \u70b9\u51fb\u906e\u7f69\u5c42\u662f\u5426\u5141\u8bb8\u5173\u95ed | Boolean | `true` |\n\n## Modal.show(params)\n\nparams: Omit<ModalProps, \\'onClosed\\' \\| \\'isOpen\\'> & { children: React.ReactNode }\n\n\n\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [Overlay](#/components/overlay)\u3002\n"},u=n(3173),i=n(9286);function l(){return(0,i.jsx)(u.Z,(0,r.Z)((0,r.Z)({},o),{},{path:"https://github.com/uiwjs/uiw/tree/master/packages/react-modal/README.md"}))}}}]);
+//# sourceMappingURL=7343.2930b911.chunk.js.map