@uiw/doc 5.0.0-bate-1 → 5.0.0-bate-2

package/web/static/js/981.03f01463.chunk.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[981],{981:function(e,t,n){n.r(t),t.default={components:{20:function(){var e,t=(e=n(8133))&&e.__esModule?e:{default:e},r=n(2814);var o=t.default.createElement("div",{style:{backgroundColor:"#fff",border:"1px solid #333",padding:10,borderRadius:3}},t.default.createElement("strong",null,"Hellow uiw!")," Check this info.",t.default.createElement("br",null),"\u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e");return function(){return t.default.createElement(r.OverlayTrigger,{placement:"top",trigger:"click",overlay:o},t.default.createElement("span",null,"\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u70b9\u51fb\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6"))}}(),42:function(){var e,t=(e=n(8133))&&e.__esModule?e:{default:e},r=n(2814);var o=t.default.createElement(r.Card,{active:!0},t.default.createElement("strong",null,"Hellow uiw!")," Check this info.",t.default.createElement("br",null),"\u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e");return function(){return t.default.createElement(r.OverlayTrigger,{placement:"top",overlay:o},t.default.createElement("span",null,"\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6"))}}(),64:function(){var e,t=(e=n(8133))&&e.__esModule?e:{default:e},r=n(2814);function o(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 a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var i={position:"relative",width:70,height:50},u=t.default.createElement(r.Card,{active:!0},t.default.createElement("strong",null,"Hellow uiw!")," Check this info.",t.default.createElement("br",null),"\u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e");return function(){return t.default.createElement("div",null,t.default.createElement("div",{style:{position:"relative"}},t.default.createElement(r.OverlayTrigger,{disabled:!0,placement:"topLeft",overlay:u},t.default.createElement(r.Button,{style:a(a({},i),{},{left:70})},"TL")),t.default.createElement(r.OverlayTrigger,{placement:"top",overlay:u},t.default.createElement(r.Button,{style:a(a({},i),{},{left:70})},"Top")),t.default.createElement(r.OverlayTrigger,{placement:"topRight",overlay:u},t.default.createElement(r.Button,{style:a(a({},i),{},{left:70})},"TR"))),t.default.createElement("div",{style:{position:"relative",paddingTop:10}},t.default.createElement(r.OverlayTrigger,{placement:"leftTop",overlay:u},t.default.createElement(r.Button,{style:a({},i)},"LT")),t.default.createElement(r.OverlayTrigger,{placement:"rightTop",overlay:u},t.default.createElement(r.Button,{style:a(a({},i),{},{left:216})},"RT"))),t.default.createElement("div",{style:{position:"relative",paddingTop:10}},t.default.createElement(r.OverlayTrigger,{placement:"left",overlay:u},t.default.createElement(r.Button,{style:a({},i)},"Left")),t.default.createElement(r.OverlayTrigger,{placement:"right",overlay:u},t.default.createElement(r.Button,{style:a(a({},i),{},{left:216})},"Right"))),t.default.createElement("div",{style:{position:"relative",paddingTop:10}},t.default.createElement(r.OverlayTrigger,{placement:"leftBottom",overlay:u},t.default.createElement(r.Button,{style:a({},i)},"LB")),t.default.createElement(r.OverlayTrigger,{placement:"rightBottom",overlay:u},t.default.createElement(r.Button,{style:a(a({},i),{},{left:216})},"RB"))),t.default.createElement("div",{style:{position:"relative",paddingTop:10}},t.default.createElement(r.OverlayTrigger,{placement:"bottomLeft",overlay:u},t.default.createElement(r.Button,{style:a(a({},i),{},{left:70})},"BL")),t.default.createElement(r.OverlayTrigger,{placement:"bottom",overlay:u},t.default.createElement(r.Button,{style:a(a({},i),{},{left:70})},"Bottom")),t.default.createElement(r.OverlayTrigger,{placement:"bottomRight",overlay:u},t.default.createElement(r.Button,{style:a(a({},i),{},{left:70})},"BR"))))}}(),132: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(8133))&&t.__esModule?t:{default:t},o=n(2814);function a(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 l(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,r.key,r)}}function i(e,t){return i=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},i(e,t)}function u(e){var t=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 n,r=s(e);if(t){var o=s(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return c(this,n)}}function c(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)}function s(e){return s=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},s(e)}var f=r.default.createElement(o.Card,{active:!0},r.default.createElement("strong",null,"Hellow uiw!")," Check this info.",r.default.createElement("br",null),"\u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e");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&&i(e,t)}(p,e);var t,n,c,s=u(p);function p(){var e;return a(this,p),(e=s.call(this)).state={isVisbale:!1},e}return t=p,(n=[{key:"onVisibleChange",value:function(e){this.setState({isVisbale:e})}},{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement(o.OverlayTrigger,{placement:"top",isOutside:!0,onVisibleChange:this.onVisibleChange.bind(this),overlay:f},r.default.createElement("span",null,"\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6")),r.default.createElement(o.Divider,null),r.default.createElement("div",null,"\u72b6\u6001\uff1a",this.state.isVisbale?"":"\u4e0d","\u53ef\u89c1"))}}])&&l(t.prototype,n),c&&l(t,c),Object.defineProperty(t,"prototype",{writable:!1}),p}(r.default.Component)}(),178:function(){var e,t=(e=n(8133))&&e.__esModule?e:{default:e},r=n(2814);var o=t.default.createElement(r.Card,{active:!0},t.default.createElement("strong",null,"Hellow uiw!")," Check this info.",t.default.createElement("br",null),"\u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e");return function(){return t.default.createElement(r.OverlayTrigger,{delay:{show:0,hide:4e3},placement:"top",overlay:o},t.default.createElement("span",null,"\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6\uff0c\u5ef6\u8fdf `4s` \u6d88\u5931"))}}(),200: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(8133))&&t.__esModule?t:{default:t},o=n(2814);function a(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 l(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,r.key,r)}}function i(e,t){return i=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},i(e,t)}function u(e){var t=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 n,r=s(e);if(t){var o=s(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return c(this,n)}}function c(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)}function s(e){return s=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},s(e)}var f=r.default.createElement(o.Card,{active:!0},r.default.createElement("strong",null,"Hellow uiw!")," Check this info.",r.default.createElement("br",null),"\u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e");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&&i(e,t)}(p,e);var t,n,c,s=u(p);function p(){var e;return a(this,p),(e=s.call(this)).state={isOpen:!1},e}return t=p,(n=[{key:"onChange",value:function(e){this.clickChecked=!1,this.setState({isOpen:e.target.checked})}},{key:"onVisibleChange",value:function(e){console.log("onVisibleChange: ",e),this.setState({isOpen:e})}},{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement(o.OverlayTrigger,{onVisibleChange:this.onVisibleChange.bind(this),isOpen:this.state.isOpen,placement:"right",onEnter:function(e,t){console.log("~~",e,t)},overlay:f},r.default.createElement("span",null,"\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6")),r.default.createElement(o.Divider,null),r.default.createElement(o.Switch,{checked:this.state.isOpen,onChange:this.onChange.bind(this)}))}}])&&l(t.prototype,n),c&&l(t,c),Object.defineProperty(t,"prototype",{writable:!1}),p}(r.default.Component)}(),253: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(8133))&&t.__esModule?t:{default:t},o=n(2814);function a(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 l(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,r.key,r)}}function i(e,t){return i=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},i(e,t)}function u(e){var t=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 n,r=s(e);if(t){var o=s(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return c(this,n)}}function c(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)}function s(e){return s=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},s(e)}var f=r.default.createElement(o.Card,{active:!0},r.default.createElement("strong",null,"Hellow uiw!")," Check this info.",r.default.createElement("br",null),"\u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e");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&&i(e,t)}(p,e);var t,n,c,s=u(p);function p(){var e;return a(this,p),(e=s.call(this)).state={isOpen:!1},e}return t=p,(n=[{key:"onVisibleChange",value:function(e){this.setState({isOpen:e})}},{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement("div",{style:{position:"relative"}},r.default.createElement(o.OverlayTrigger,{usePortal:!1,isOutside:!0,autoAdjustOverflow:!0,placement:"top",trigger:"click",onVisibleChange:this.onVisibleChange.bind(this),overlay:f},r.default.createElement("span",null,"\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u70b9\u51fb\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6"))),r.default.createElement(o.Divider,null),r.default.createElement("div",null,"\u72b6\u6001\uff1a",this.state.isOpen?"":"\u4e0d","\u53ef\u89c1"))}}])&&l(t.prototype,n),c&&l(t,c),Object.defineProperty(t,"prototype",{writable:!1}),p}(r.default.Component)}()},data:{20:{name:20,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar tooltip = /*#__PURE__*/_react["default"].createElement("div", {\n  style: {\n    backgroundColor: \'#fff\',\n    border: \'1px solid #333\',\n    padding: 10,\n    borderRadius: 3\n  }\n}, /*#__PURE__*/_react["default"].createElement("strong", null, "Hellow uiw!"), " Check this info.", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5C55\\u793A 12 \\u4E2A\\u65B9\\u5411\\u4F4D\\u7F6E");\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "top",\n    trigger: "click",\n    overlay: tooltip\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "\\u9F20\\u6807\\u79FB\\u52A8\\u5230\\u6B64\\u5904\\uFF0C\\u70B9\\u51FB\\u663E\\u793A\\u548C\\u6D88\\u5931\\u89E6\\u53D1\\u4E8B\\u4EF6"));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { OverlayTrigger } from 'uiw';\n\nconst tooltip = (\n  <div style={{ backgroundColor: '#fff', border: '1px solid #333', padding: 10, borderRadius: 3 }}>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </div>\n);\nconst Demo = () => (\n  <OverlayTrigger placement=\"top\" trigger=\"click\" overlay={tooltip}>\n    <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u70b9\u51fb\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n  </OverlayTrigger>\n)\nexport default Demo"},42:{name:42,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar card = /*#__PURE__*/_react["default"].createElement(_uiw.Card, {\n  active: true\n}, /*#__PURE__*/_react["default"].createElement("strong", null, "Hellow uiw!"), " Check this info.", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5C55\\u793A 12 \\u4E2A\\u65B9\\u5411\\u4F4D\\u7F6E");\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "top",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "\\u9F20\\u6807\\u79FB\\u52A8\\u5230\\u6B64\\u5904\\uFF0C\\u663E\\u793A\\u548C\\u6D88\\u5931\\u89E6\\u53D1\\u4E8B\\u4EF6"));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { OverlayTrigger, Card } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\nconst Demo = () => (\n  <OverlayTrigger placement=\"top\" overlay={card}>\n    <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n  </OverlayTrigger>\n)\nexport default Demo"},64:{name:64,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\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; }\n\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; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar btnStl = {\n  position: \'relative\',\n  width: 70,\n  height: 50\n};\n\nvar card = /*#__PURE__*/_react["default"].createElement(_uiw.Card, {\n  active: true\n}, /*#__PURE__*/_react["default"].createElement("strong", null, "Hellow uiw!"), " Check this info.", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5C55\\u793A 12 \\u4E2A\\u65B9\\u5411\\u4F4D\\u7F6E");\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      position: \'relative\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    disabled: true,\n    placement: "topLeft",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 70\n    })\n  }, "TL")), /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "top",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 70\n    })\n  }, "Top")), /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "topRight",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 70\n    })\n  }, "TR"))), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      position: \'relative\',\n      paddingTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "leftTop",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread({}, btnStl)\n  }, "LT")), /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "rightTop",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 216\n    })\n  }, "RT"))), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      position: \'relative\',\n      paddingTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "left",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread({}, btnStl)\n  }, "Left")), /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "right",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 216\n    })\n  }, "Right"))), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      position: \'relative\',\n      paddingTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "leftBottom",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread({}, btnStl)\n  }, "LB")), /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "rightBottom",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 216\n    })\n  }, "RB"))), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      position: \'relative\',\n      paddingTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "bottomLeft",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 70\n    })\n  }, "BL")), /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "bottom",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 70\n    })\n  }, "Bottom")), /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    placement: "bottomRight",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 70\n    })\n  }, "BR"))));\n};\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { OverlayTrigger, Card, Button } from \'uiw\';\nconst btnStl = {position: \'relative\', width: 70, height: 50 }\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\nconst Demo = () => (\n  <div>\n    <div style={{ position: \'relative\' }}>\n      <OverlayTrigger disabled placement="topLeft" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement="top" overlay={card}>\n        <Button style={{ ...btnStl, left: 70}}>Top</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement="topRight" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n      <OverlayTrigger placement="leftTop" overlay={card}>\n        <Button style={{ ...btnStl }}>LT</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement="rightTop" overlay={card}>\n        <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n      <OverlayTrigger placement="left" overlay={card}>\n        <Button style={{ ...btnStl }}>Left</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement="right" overlay={card}>\n        <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n      <OverlayTrigger placement="leftBottom" overlay={card}>\n        <Button style={{ ...btnStl }}>LB</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement="rightBottom" overlay={card}>\n        <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n      <OverlayTrigger placement="bottomLeft" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement="bottom" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement="bottomRight" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n      </OverlayTrigger>\n    </div>\n  </div>\n)\nexport default Demo'},132:{name:132,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},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; } }\n\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\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, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\n\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); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\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); }; }\n\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); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\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; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar card = /*#__PURE__*/_react["default"].createElement(_uiw.Card, {\n  active: true\n}, /*#__PURE__*/_react["default"].createElement("strong", null, "Hellow uiw!"), " Check this info.", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5C55\\u793A 12 \\u4E2A\\u65B9\\u5411\\u4F4D\\u7F6E");\n\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  var _super = _createSuper(Demo);\n\n  function Demo() {\n    var _this;\n\n    _classCallCheck(this, Demo);\n\n    _this = _super.call(this);\n    _this.state = {\n      isVisbale: false\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: "onVisibleChange",\n    value: function onVisibleChange(isVisbale) {\n      this.setState({\n        isVisbale: isVisbale\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n        placement: "top",\n        isOutside: true,\n        onVisibleChange: this.onVisibleChange.bind(this),\n        overlay: card\n      }, /*#__PURE__*/_react["default"].createElement("span", null, "\\u9F20\\u6807\\u79FB\\u52A8\\u5230\\u6B64\\u5904\\uFF0C\\u663E\\u793A\\u548C\\u6D88\\u5931\\u89E6\\u53D1\\u4E8B\\u4EF6")), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement("div", null, "\\u72B6\\u6001\\uFF1A", this.state.isVisbale ? \'\' : \'\u4e0d\', "\\u53EF\\u89C1"));\n    }\n  }]);\n\n  return Demo;\n}(_react["default"].Component);\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { OverlayTrigger, Card, Divider } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isVisbale: false,\n    }\n  }\n  onVisibleChange(isVisbale) {\n    this.setState({ isVisbale })\n  }\n  render() {\n    return (\n      <div>\n        <OverlayTrigger\n          placement=\"top\"\n          isOutside={true}\n          onVisibleChange={this.onVisibleChange.bind(this)}\n          overlay={card}\n        >\n          <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n        </OverlayTrigger>\n        <Divider />\n        <div>\u72b6\u6001\uff1a{this.state.isVisbale ? '' : '\u4e0d'}\u53ef\u89c1</div>\n      </div>\n    )\n  }\n}\nexport default Demo"},178:{name:178,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar card = /*#__PURE__*/_react["default"].createElement(_uiw.Card, {\n  active: true\n}, /*#__PURE__*/_react["default"].createElement("strong", null, "Hellow uiw!"), " Check this info.", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5C55\\u793A 12 \\u4E2A\\u65B9\\u5411\\u4F4D\\u7F6E");\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n    delay: {\n      show: 0,\n      hide: 4000\n    },\n    placement: "top",\n    overlay: card\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "\\u9F20\\u6807\\u79FB\\u52A8\\u5230\\u6B64\\u5904\\uFF0C\\u663E\\u793A\\u548C\\u6D88\\u5931\\u89E6\\u53D1\\u4E8B\\u4EF6\\uFF0C\\u5EF6\\u8FDF `4s` \\u6D88\\u5931"));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { OverlayTrigger, Card } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\nconst Demo = () => (\n  <OverlayTrigger delay={{ show: 0, hide: 4000 }} placement=\"top\" overlay={card}>\n    <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6\uff0c\u5ef6\u8fdf `4s` \u6d88\u5931</span>\n  </OverlayTrigger>\n)\nexport default Demo"},200:{name:200,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},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; } }\n\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\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, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\n\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); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\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); }; }\n\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); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\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; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar card = /*#__PURE__*/_react["default"].createElement(_uiw.Card, {\n  active: true\n}, /*#__PURE__*/_react["default"].createElement("strong", null, "Hellow uiw!"), " Check this info.", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5C55\\u793A 12 \\u4E2A\\u65B9\\u5411\\u4F4D\\u7F6E");\n\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  var _super = _createSuper(Demo);\n\n  function Demo() {\n    var _this;\n\n    _classCallCheck(this, Demo);\n\n    _this = _super.call(this);\n    _this.state = {\n      isOpen: false\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: "onChange",\n    value: function onChange(e) {\n      this.clickChecked = false;\n      this.setState({\n        isOpen: e.target.checked\n      });\n    }\n  }, {\n    key: "onVisibleChange",\n    value: function onVisibleChange(isOpen) {\n      console.log(\'onVisibleChange: \', isOpen);\n      this.setState({\n        isOpen: isOpen\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n        onVisibleChange: this.onVisibleChange.bind(this),\n        isOpen: this.state.isOpen,\n        placement: "right",\n        onEnter: function onEnter(node, isAppearing) {\n          console.log(\'~~\', node, isAppearing);\n        },\n        overlay: card\n      }, /*#__PURE__*/_react["default"].createElement("span", null, "\\u9F20\\u6807\\u79FB\\u52A8\\u5230\\u6B64\\u5904\\uFF0C\\u663E\\u793A\\u548C\\u6D88\\u5931\\u89E6\\u53D1\\u4E8B\\u4EF6")), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Switch, {\n        checked: this.state.isOpen,\n        onChange: this.onChange.bind(this)\n      }));\n    }\n  }]);\n\n  return Demo;\n}(_react["default"].Component);\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { OverlayTrigger, Card, Divider, Switch } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isOpen: false,\n    }\n  }\n  onChange(e) {\n    this.clickChecked = false;\n    this.setState({ isOpen: e.target.checked });\n  }\n  onVisibleChange(isOpen) {\n    console.log('onVisibleChange: ', isOpen);\n    this.setState({ isOpen: isOpen });\n  }\n  render() {\n    return (\n      <div>\n        <OverlayTrigger\n          onVisibleChange={this.onVisibleChange.bind(this)}\n          isOpen={this.state.isOpen}\n          placement=\"right\"\n          onEnter={(node, isAppearing) => {\n            console.log('~~', node, isAppearing);\n          }}\n          overlay={card}\n        >\n          <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n        </OverlayTrigger>\n        <Divider />\n        <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />\n      </div>\n    );\n  }\n}\nexport default Demo"},253:{name:253,meta:{background:"#fff",noScroll:"true",codeSandbox:"true",codePen:"true"},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; } }\n\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\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, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\n\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); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\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); }; }\n\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); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\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; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar card = /*#__PURE__*/_react["default"].createElement(_uiw.Card, {\n  active: true\n}, /*#__PURE__*/_react["default"].createElement("strong", null, "Hellow uiw!"), " Check this info.", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5C55\\u793A 12 \\u4E2A\\u65B9\\u5411\\u4F4D\\u7F6E");\n\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  var _super = _createSuper(Demo);\n\n  function Demo() {\n    var _this;\n\n    _classCallCheck(this, Demo);\n\n    _this = _super.call(this);\n    _this.state = {\n      isOpen: false\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: "onVisibleChange",\n    value: function onVisibleChange(isOpen) {\n      this.setState({\n        isOpen: isOpen\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {\n        style: {\n          position: \'relative\'\n        }\n      }, /*#__PURE__*/_react["default"].createElement(_uiw.OverlayTrigger, {\n        usePortal: false,\n        isOutside: true,\n        autoAdjustOverflow: true,\n        placement: "top",\n        trigger: "click",\n        onVisibleChange: this.onVisibleChange.bind(this),\n        overlay: card\n      }, /*#__PURE__*/_react["default"].createElement("span", null, "\\u9F20\\u6807\\u79FB\\u52A8\\u5230\\u6B64\\u5904\\uFF0C\\u70B9\\u51FB\\u663E\\u793A\\u548C\\u6D88\\u5931\\u89E6\\u53D1\\u4E8B\\u4EF6"))), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement("div", null, "\\u72B6\\u6001\\uFF1A", this.state.isOpen ? \'\' : \'\u4e0d\', "\\u53EF\\u89C1"));\n    }\n  }]);\n\n  return Demo;\n}(_react["default"].Component);\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { OverlayTrigger, Card, Divider } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isOpen: false,\n    }\n  }\n  onVisibleChange(isOpen) {\n    this.setState({ isOpen })\n  }\n  render() {\n    return (\n      <div>\n        <div style={{ position: 'relative' }}>\n          <OverlayTrigger\n            usePortal={false}\n            isOutside={true}\n            autoAdjustOverflow\n            placement=\"top\"\n            trigger=\"click\"\n            onVisibleChange={this.onVisibleChange.bind(this)}\n            overlay={card}\n          >\n            <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u70b9\u51fb\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n          </OverlayTrigger>\n        </div>\n        <Divider />\n        <div>\u72b6\u6001\uff1a{this.state.isOpen ? '' : '\u4e0d'}\u53ef\u89c1</div>\n      </div>\n    );\n  }\n}\nexport default Demo"}},source:"OverlayTrigger \u57fa\u7840\u89e6\u53d1\u5f39\u51fa\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-overlay-trigger/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-overlay-trigger.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-overlay-trigger)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-overlay-trigger.svg?label=@uiw/react-overlay-trigger)](https://npmjs.com/@uiw/react-overlay-trigger)\n\n\u57fa\u7840\u5f39\u51fa\u89e6\u53d1\u7ec4\u4ef6\uff0c\u5728\u7ec4\u4ef6 [`<Overlay>`](#/components/overlay) \u7684\u57fa\u7840\u4e0a\u6dfb\u52a0\u4e8b\u4ef6\u548c 12 \u4e2a\u65b9\u5411\u7684\u4f4d\u7f6e\uff0c\u7ec4\u4ef6 [`<Tooltip>`](#/components/tooltip)\uff0c[`<Popover>`](#/components/popover) \u662f\u57fa\u4e8e\u8fd9\u4e2a\u7ec4\u4ef6\u5c01\u88c5\u7684\uff0c\u5f39\u51fa\u6846\u56f4\u7ed5\u5bf9\u8c61\u6307\u5b9a\u4f4d\u7f6e\u3002\n\n```jsx\nimport { OverlayTrigger } from 'uiw';\n// or\nimport OverlayTrigger from '@uiw/react-overlay-trigger';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n\u6700\u7b80\u5355\u7684\u7528\u6cd5\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { OverlayTrigger } from 'uiw';\n\nconst tooltip = (\n  <div style={{ backgroundColor: '#fff', border: '1px solid #333', padding: 10, borderRadius: 3 }}>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </div>\n);\nconst Demo = () => (\n  <OverlayTrigger placement=\"top\" trigger=\"click\" overlay={tooltip}>\n    <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u70b9\u51fb\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n  </OverlayTrigger>\n)\nexport default Demo\n```\n\n### \u914d\u5408\u7ec4\u4ef6\u4f7f\u7528\n\n\u4e0b\u9762\u914d\u5408 [`<Card />`](#/components/card) \u7ec4\u4ef6\u4f7f\u7528\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { OverlayTrigger, Card } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\nconst Demo = () => (\n  <OverlayTrigger placement=\"top\" overlay={card}>\n    <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n  </OverlayTrigger>\n)\nexport default Demo\n```\n\n### \u4f4d\u7f6e\n\n\u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { OverlayTrigger, Card, Button } from 'uiw';\nconst btnStl = {position: 'relative', width: 70, height: 50 }\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\nconst Demo = () => (\n  <div>\n    <div style={{ position: 'relative' }}>\n      <OverlayTrigger disabled placement=\"topLeft\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"top\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70}}>Top</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"topRight\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: 'relative', paddingTop: 10 }}>\n      <OverlayTrigger placement=\"leftTop\" overlay={card}>\n        <Button style={{ ...btnStl }}>LT</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"rightTop\" overlay={card}>\n        <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: 'relative', paddingTop: 10 }}>\n      <OverlayTrigger placement=\"left\" overlay={card}>\n        <Button style={{ ...btnStl }}>Left</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"right\" overlay={card}>\n        <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: 'relative', paddingTop: 10 }}>\n      <OverlayTrigger placement=\"leftBottom\" overlay={card}>\n        <Button style={{ ...btnStl }}>LB</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"rightBottom\" overlay={card}>\n        <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: 'relative', paddingTop: 10 }}>\n      <OverlayTrigger placement=\"bottomLeft\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"bottom\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"bottomRight\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n      </OverlayTrigger>\n    </div>\n  </div>\n)\nexport default Demo\n```\n\n### \u9f20\u6807\u7ecf\u8fc7\u4e8b\u4ef6\n\n\u9ed8\u8ba4\u79bb\u5f00**\u89e6\u53d1\u533a\u57df**\u9690\u85cf\u5f39\u51fa\u76ee\u6807\uff0c\u8bbe\u7f6e `isOutside` \u503c\u4e3a `true`\uff0c\u5728**\u89e6\u53d1\u533a\u57df**\u6216**\u5f39\u51fa\u76ee\u6807\u533a\u57df**\u5185\uff0c\u4e0d\u9690\u85cf**\u5f39\u51fa\u76ee\u6807**\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { OverlayTrigger, Card, Divider } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isVisbale: false,\n    }\n  }\n  onVisibleChange(isVisbale) {\n    this.setState({ isVisbale })\n  }\n  render() {\n    return (\n      <div>\n        <OverlayTrigger\n          placement=\"top\"\n          isOutside={true}\n          onVisibleChange={this.onVisibleChange.bind(this)}\n          overlay={card}\n        >\n          <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n        </OverlayTrigger>\n        <Divider />\n        <div>\u72b6\u6001\uff1a{this.state.isVisbale ? '' : '\u4e0d'}\u53ef\u89c1</div>\n      </div>\n    )\n  }\n}\nexport default Demo\n```\n\n\n### \u5ef6\u8fdf\u8fdb\u5165\u548c\u6d88\u5931\n\n\u5ef6\u8fdf\u5c5e\u6027\uff0c\u53ea\u9488\u5bf9 `trigger=hover` \u6709\u6548\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { OverlayTrigger, Card } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\nconst Demo = () => (\n  <OverlayTrigger delay={{ show: 0, hide: 4000 }} placement=\"top\" overlay={card}>\n    <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6\uff0c\u5ef6\u8fdf `4s` \u6d88\u5931</span>\n  </OverlayTrigger>\n)\nexport default Demo\n```\n\n### \u7ec4\u4ef6\u53d7\u63a7\n\n\u901a\u8fc7\u8bbe\u7f6e\u5c5e\u6027 isOpen \u53ef\u4ee5\u6587\u5b57\u63d0\u793a\u624b\u52a8\u63a7\u5236\u72b6\u6001\u7684\u5c55\u793a\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { OverlayTrigger, Card, Divider, Switch } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isOpen: false,\n    }\n  }\n  onChange(e) {\n    this.clickChecked = false;\n    this.setState({ isOpen: e.target.checked });\n  }\n  onVisibleChange(isOpen) {\n    console.log('onVisibleChange: ', isOpen);\n    this.setState({ isOpen: isOpen });\n  }\n  render() {\n    return (\n      <div>\n        <OverlayTrigger\n          onVisibleChange={this.onVisibleChange.bind(this)}\n          isOpen={this.state.isOpen}\n          placement=\"right\"\n          onEnter={(node, isAppearing) => {\n            console.log('~~', node, isAppearing);\n          }}\n          overlay={card}\n        >\n          <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n        </OverlayTrigger>\n        <Divider />\n        <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />\n      </div>\n    );\n  }\n}\nexport default Demo\n```\n\n### usePortal\n\n\u8bbe\u7f6e `usePortal={false}` \u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u91cc\u9762\u3002\n\n```jsx mdx:preview&background=#fff&noScroll=true&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { OverlayTrigger, Card, Divider } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isOpen: false,\n    }\n  }\n  onVisibleChange(isOpen) {\n    this.setState({ isOpen })\n  }\n  render() {\n    return (\n      <div>\n        <div style={{ position: 'relative' }}>\n          <OverlayTrigger\n            usePortal={false}\n            isOutside={true}\n            autoAdjustOverflow\n            placement=\"top\"\n            trigger=\"click\"\n            onVisibleChange={this.onVisibleChange.bind(this)}\n            overlay={card}\n          >\n            <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u70b9\u51fb\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n          </OverlayTrigger>\n        </div>\n        <Divider />\n        <div>\u72b6\u6001\uff1a{this.state.isOpen ? '' : '\u4e0d'}\u53ef\u89c1</div>\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| placement | \u6307\u5b9a\u5f39\u51fa\u6846\u4f4d\u7f6e | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | - |\n| trigger | \u60ac\u505c/\u70b9\u51fb\u5f39\u51fa\u7a97\u53e3 | Enum{`hover`, `click`, `focus`} | `hover` |\n| disabled | \u662f\u5426\u7981\u7528\u5f39\u51fa\u76ee\u6807 | Boolean | `false` |\n| overlay | \u5f39\u51fa\u5185\u5bb9 | Function/Element | - |\n| delay | \u5ef6\u8fdf\u8fdb\u5165\u548c\u6d88\u5931\uff0c`{ show: 2000, hide: 4000 }` \u6216\u8005\u76f4\u63a5\u8bbe\u7f6e `2000`\uff0c\u53ea\u5bf9 `trigger=hover` \u6709\u6548 | Object/Number | - |\n| isOpen | \u9ed8\u8ba4\u662f\u5426\u663e\u793a\u5f39\u7a97 | Boolean | `false` |\n| isOutside | \u9ed8\u8ba4\u79bb\u5f00**\u89e6\u53d1\u533a\u57df**\u9690\u85cf\u5f39\u51fa\u76ee\u6807\uff0c\u8bbe\u7f6e\u503c\u4e3a `true`\uff0c\u5728\u89e6\u53d1\u533a\u57df\u548c\u5f39\u51fa\u76ee\u6807\u533a\u57df\u5185\uff0c\u4e0d\u9690\u85cf**\u5f39\u51fa\u76ee\u6807**\u3002 | Boolean | `false` |\n| isClickOutside | \u70b9\u51fb\u76ee\u6807\u533a\u57df\u4ee5\u5916\u7684\u533a\u57df\uff0c\u662f\u5426\u9690\u85cf\u3002 | Boolean | `true` |\n| autoAdjustOverflow | \u5f39\u51fa\u5c42\u88ab\u906e\u6321\u65f6\u81ea\u52a8\u8c03\u6574\u4f4d\u7f6e | Boolean | `false` |\n| onVisibleChange | \u663e\u793a\u9690\u85cf\u7684\u56de\u8c03 | Function(isVisiable:bool) | - |\n\n\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [Overlay](#/components/overlay)\u3002\n"}}}]);
-//# sourceMappingURL=981.03f01463.chunk.js.map

package/web/static/js/9875.f42566b4.chunk.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9875],{9875:function(e,n,t){t.r(n),n.default={components:{18:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(2814);return function(){return n.default.createElement("div",null,n.default.createElement(r.PinCode,{autoFocus:!0,value:["","","","",""],onChange:function(e){return console.log(e)}}))}}(),34:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(2814);function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}return function(){return n.default.createElement("div",null,n.default.createElement(r.Form,{resetOnSubmit:!1,onSubmitError:function(e){return e.filed?function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){i(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}({},e.filed):null},onSubmit:function(e){e.initial;var n=e.current,t={};if(0===n.pinCode.join("").length&&(t.pinCode="\u8bf7\u8f93\u5165\u5b89\u5168\u7801\uff01"),n.pinCode.join("").length<5&&(t.pinCode="\u5b89\u5168\u7801\u6ca1\u6709\u8f93\u5165\u5b8c\u6574\uff01"),Object.keys(t).length>0){var o=new Error;throw o.filed=t,r.Notify.error({title:"\u63d0\u4ea4\u5931\u8d25\uff01",description:"\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01"}),o}r.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\uff01",description:"\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u5b89\u5168\u7801\u4e3a\uff1a".concat(n.pinCode.join(""),"\uff01")})},fields:{pinCode:{initialValue:["","","","",""],children:n.default.createElement(r.PinCode,null)}}},(function(e){var t=e.fields,o=e.state,i=e.canSubmit;return console.log("state:",o.current.pinCode.join("")),n.default.createElement("div",null,n.default.createElement(r.Row,null,n.default.createElement(r.Col,{fixed:!0},t.pinCode)),n.default.createElement(r.Row,null,n.default.createElement(r.Col,{fixed:!0},n.default.createElement(r.Button,{size:"small",disabled:!i(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"),n.default.createElement("span",{style:{paddingLeft:16,color:"#a7a7a7",verticalAlign:"middle"}},o.current.pinCode.join("")))),n.default.createElement(r.Row,null,n.default.createElement(r.Col,null,n.default.createElement("pre",{style:{padding:10,marginTop:10}},JSON.stringify(o.current,null,2)))))})))}}(),107:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(2814);return function(){return n.default.createElement("div",null,n.default.createElement(r.PinCode,{placeholder:"\u25a0",value:["8","7","3","",""],onChange:function(e){return console.log(e)}}),n.default.createElement(r.Divider,null),n.default.createElement(r.PinCode,{placeholder:"\u2605",value:["6","","","",""],onChange:function(e){return console.log(e)}}),n.default.createElement(r.Divider,null),n.default.createElement(r.PinCode,{placeholder:"\ud83e\udd23",value:["","","","",""],onChange:function(e){return console.log(e)}}))}}(),125:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(2814);return function(){return n.default.createElement("div",null,n.default.createElement(r.PinCode,{disabled:!0,value:["1","9","8","7","0"]}),n.default.createElement(r.Divider,null),n.default.createElement(r.PinCode,{disabled:!0,value:["","","","",""]}),n.default.createElement(r.Divider,null),n.default.createElement(r.PinCode,{disabled:!0,placeholder:"\ud83e\udd23",value:["","","","",""]}))}}(),143:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(2814);return function(){return n.default.createElement("div",null,n.default.createElement(r.PinCode,{size:"large",value:["1","9","8","7","0"]}),n.default.createElement(r.Divider,null),n.default.createElement(r.PinCode,{value:["","","","",""]}),n.default.createElement(r.Divider,null),n.default.createElement(r.PinCode,{size:"small",value:["","","","",""]}))}}()},data:{18:{name:18,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.PinCode, {\n    autoFocus: true,\n    value: [\'\', \'\', \'\', \'\', \'\'],\n    onChange: function onChange(val) {\n      return console.log(val);\n    }\n  }));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { PinCode } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <PinCode autoFocus value={['', '', '', '', '']} onChange={(val) => console.log(val)} />\n  </div>\n);\nexport default Demo"},34:{name:34,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\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; }\n\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; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n    resetOnSubmit: false,\n    onSubmitError: function onSubmitError(error) {\n      if (error.filed) {\n        return _objectSpread({}, error.filed);\n      }\n\n      return null;\n    },\n    onSubmit: function onSubmit(_ref) {\n      var initial = _ref.initial,\n          current = _ref.current;\n      var errorObj = {};\n\n      if (current.pinCode.join(\'\').length === 0) {\n        errorObj.pinCode = \'\u8bf7\u8f93\u5165\u5b89\u5168\u7801\uff01\';\n      }\n\n      if (current.pinCode.join(\'\').length < 5) {\n        errorObj.pinCode = \'\u5b89\u5168\u7801\u6ca1\u6709\u8f93\u5165\u5b8c\u6574\uff01\';\n      }\n\n      if (Object.keys(errorObj).length > 0) {\n        var err = new Error();\n        err.filed = errorObj;\n\n        _uiw.Notify.error({\n          title: \'\u63d0\u4ea4\u5931\u8d25\uff01\',\n          description: \'\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01\'\n        });\n\n        throw err;\n      }\n\n      _uiw.Notify.success({\n        title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n        description: "\\u8868\\u5355\\u63D0\\u4EA4\\u6210\\u529F\\uFF0C\\u5B89\\u5168\\u7801\\u4E3A\\uFF1A".concat(current.pinCode.join(\'\'), "\\uFF01")\n      });\n    },\n    fields: {\n      pinCode: {\n        initialValue: [\'\', \'\', \'\', \'\', \'\'],\n        children: /*#__PURE__*/_react["default"].createElement(_uiw.PinCode, null)\n      }\n    }\n  }, function (_ref2) {\n    var fields = _ref2.fields,\n        state = _ref2.state,\n        canSubmit = _ref2.canSubmit;\n    console.log(\'state:\', state.current.pinCode.join(\'\'));\n    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n      fixed: true\n    }, fields.pinCode)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n      fixed: true\n    }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n      size: "small",\n      disabled: !canSubmit(),\n      type: "primary",\n      htmlType: "submit"\n    }, "\\u63D0\\u4EA4"), /*#__PURE__*/_react["default"].createElement("span", {\n      style: {\n        paddingLeft: 16,\n        color: \'#a7a7a7\',\n        verticalAlign: \'middle\'\n      }\n    }, state.current.pinCode.join(\'\')))), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, /*#__PURE__*/_react["default"].createElement("pre", {\n      style: {\n        padding: 10,\n        marginTop: 10\n      }\n    }, JSON.stringify(state.current, null, 2)))));\n  }));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Form, Row, Col, Icon, PinCode, Button, Notify } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      resetOnSubmit={false}\n      onSubmitError={(error) => {\n        if (error.filed) {\n          return { ...error.filed };\n        }\n        return null;\n      }}\n      onSubmit={({initial, current}) => {\n        const errorObj = {};\n        if (current.pinCode.join('').length === 0) {\n          errorObj.pinCode = '\u8bf7\u8f93\u5165\u5b89\u5168\u7801\uff01';\n        }\n        if (current.pinCode.join('').length < 5) {\n          errorObj.pinCode = '\u5b89\u5168\u7801\u6ca1\u6709\u8f93\u5165\u5b8c\u6574\uff01';\n        }\n        if(Object.keys(errorObj).length > 0) {\n          const err = new Error();\n          err.filed = errorObj;\n          Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n          throw err;\n        }\n        Notify.success({\n          title: '\u63d0\u4ea4\u6210\u529f\uff01',\n          description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u5b89\u5168\u7801\u4e3a\uff1a${current.pinCode.join('')}\uff01`,\n        });\n      }}\n      fields={{\n        pinCode: {\n          initialValue: ['', '', '', '', ''],\n          children: <PinCode />\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        console.log('state:',state.current.pinCode.join(''))\n        return (\n          <div>\n            <Row>\n              <Col fixed>{fields.pinCode}</Col>\n            </Row>\n            <Row>\n              <Col fixed>\n                <Button size=\"small\" disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                <span style={{ paddingLeft: 16, color: '#a7a7a7', verticalAlign: 'middle' }}>\n                  {state.current.pinCode.join('')}\n                </span>\n              </Col>\n            </Row>\n            <Row>\n              <Col>\n                <pre style={{ padding: 10, marginTop: 10 }}>\n                  {JSON.stringify(state.current, null, 2)}\n                </pre>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nexport default Demo"},107:{name:107,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    placeholder: \"\\u25A0\",\n    value: ['8', '7', '3', '', ''],\n    onChange: function onChange(val) {\n      return console.log(val);\n    }\n  }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Divider, null), /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    placeholder: \"\\u2605\",\n    value: ['6', '', '', '', ''],\n    onChange: function onChange(val) {\n      return console.log(val);\n    }\n  }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Divider, null), /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    placeholder: \"\\uD83E\\uDD23\",\n    value: ['', '', '', '', ''],\n    onChange: function onChange(val) {\n      return console.log(val);\n    }\n  }));\n};\n\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { PinCode, Divider } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <PinCode placeholder=\"\u25a0\" value={['8', '7', '3', '', '']} onChange={(val) => console.log(val)} />\n    <Divider />\n    <PinCode placeholder=\"\u2605\" value={['6', '', '', '', '']} onChange={(val) => console.log(val)} />\n    <Divider />\n    <PinCode placeholder=\"\ud83e\udd23\" value={['', '', '', '', '']} onChange={(val) => console.log(val)} />\n  </div>\n);\nexport default Demo"},125:{name:125,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    disabled: true,\n    value: ['1', '9', '8', '7', '0']\n  }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Divider, null), /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    disabled: true,\n    value: ['', '', '', '', '']\n  }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Divider, null), /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    disabled: true,\n    placeholder: \"\\uD83E\\uDD23\",\n    value: ['', '', '', '', '']\n  }));\n};\n\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { PinCode, Divider } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <PinCode disabled value={['1', '9', '8', '7', '0']} />\n    <Divider />\n    <PinCode disabled value={['', '', '', '', '']} />\n    <Divider />\n    <PinCode disabled placeholder=\"\ud83e\udd23\" value={['', '', '', '', '']} />\n  </div>\n);\nexport default Demo"},143:{name:143,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    size: \"large\",\n    value: ['1', '9', '8', '7', '0']\n  }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Divider, null), /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    value: ['', '', '', '', '']\n  }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Divider, null), /*#__PURE__*/_react[\"default\"].createElement(_uiw.PinCode, {\n    size: \"small\",\n    value: ['', '', '', '', '']\n  }));\n};\n\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { PinCode, Divider } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <PinCode size=\"large\" value={['1', '9', '8', '7', '0']} />\n    <Divider />\n    <PinCode value={['', '', '', '', '']} />\n    <Divider />\n    <PinCode size=\"small\" value={['', '', '', '', '']} />\n  </div>\n);\nexport default Demo"}},source:"PinCode \u5b89\u5168\u7801\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-pin-code/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-pin-code.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-pin-code)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-pin-code.svg?label=@uiw/react-pin-code)](https://npmjs.com/@uiw/react-pin-code)\n\n\u9488\u5bf9\u8f93\u5165\u6570\u5b57\u5e8f\u5217\u8fdb\u884c\u4e86\u4f18\u5316\u3002\u6700\u5e38\u89c1\u7684\u5e94\u7528\u662f\u8f93\u5165\u4e00\u6b21\u6027\u5b89\u5168\u7801\u3002\u5b83\u7ecf\u8fc7\u4f18\u5316\uff0c\u53ef\u5feb\u901f\u8f93\u5165\u6570\u5b57\u3002\n\n```jsx\nimport { PinCode } from 'uiw';\n// or\nimport PinCode from '@uiw/react-pin-code';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { PinCode } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <PinCode autoFocus value={['', '', '', '', '']} onChange={(val) => console.log(val)} />\n  </div>\n);\nexport default Demo\n```\n\n### \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 [`<PinCode />`](#/components/pin-code) \u7ec4\u4ef6\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Form, Row, Col, Icon, PinCode, Button, Notify } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      resetOnSubmit={false}\n      onSubmitError={(error) => {\n        if (error.filed) {\n          return { ...error.filed };\n        }\n        return null;\n      }}\n      onSubmit={({initial, current}) => {\n        const errorObj = {};\n        if (current.pinCode.join('').length === 0) {\n          errorObj.pinCode = '\u8bf7\u8f93\u5165\u5b89\u5168\u7801\uff01';\n        }\n        if (current.pinCode.join('').length < 5) {\n          errorObj.pinCode = '\u5b89\u5168\u7801\u6ca1\u6709\u8f93\u5165\u5b8c\u6574\uff01';\n        }\n        if(Object.keys(errorObj).length > 0) {\n          const err = new Error();\n          err.filed = errorObj;\n          Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n          throw err;\n        }\n        Notify.success({\n          title: '\u63d0\u4ea4\u6210\u529f\uff01',\n          description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u5b89\u5168\u7801\u4e3a\uff1a${current.pinCode.join('')}\uff01`,\n        });\n      }}\n      fields={{\n        pinCode: {\n          initialValue: ['', '', '', '', ''],\n          children: <PinCode />\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        console.log('state:',state.current.pinCode.join(''))\n        return (\n          <div>\n            <Row>\n              <Col fixed>{fields.pinCode}</Col>\n            </Row>\n            <Row>\n              <Col fixed>\n                <Button size=\"small\" disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                <span style={{ paddingLeft: 16, color: '#a7a7a7', verticalAlign: 'middle' }}>\n                  {state.current.pinCode.join('')}\n                </span>\n              </Col>\n            </Row>\n            <Row>\n              <Col>\n                <pre style={{ padding: 10, marginTop: 10 }}>\n                  {JSON.stringify(state.current, null, 2)}\n                </pre>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nexport default Demo\n```\n\n### \u66f4\u6539\u5360\u4f4d\u7b26\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { PinCode, Divider } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <PinCode placeholder=\"\u25a0\" value={['8', '7', '3', '', '']} onChange={(val) => console.log(val)} />\n    <Divider />\n    <PinCode placeholder=\"\u2605\" value={['6', '', '', '', '']} onChange={(val) => console.log(val)} />\n    <Divider />\n    <PinCode placeholder=\"\ud83e\udd23\" value={['', '', '', '', '']} onChange={(val) => console.log(val)} />\n  </div>\n);\nexport default Demo\n```\n\n### \u8f93\u5165\u6846\u88ab\u7981\u7528\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { PinCode, Divider } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <PinCode disabled value={['1', '9', '8', '7', '0']} />\n    <Divider />\n    <PinCode disabled value={['', '', '', '', '']} />\n    <Divider />\n    <PinCode disabled placeholder=\"\ud83e\udd23\" value={['', '', '', '', '']} />\n  </div>\n);\nexport default Demo\n```\n\n### \u5c3a\u5bf8\u5927\u5c0f\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { PinCode, Divider } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <PinCode size=\"large\" value={['1', '9', '8', '7', '0']} />\n    <Divider />\n    <PinCode value={['', '', '', '', '']} />\n    <Divider />\n    <PinCode size=\"small\" value={['', '', '', '', '']} />\n  </div>\n);\nexport default Demo\n```\n\n## PinCode\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| value | \u7ed1\u5b9a\u503c\uff0c\u6839\u636e\u6570\u7ec4\u957f\u5ea6\uff0c\u5c55\u793a\u5b89\u5168\u7801\u7684\u957f\u5ea6 | string[] | - |\n| disabled | \u7981\u7528\u8f93\u5165\u6846 | Boolean | `false` |\n| autoFocus | \u81ea\u52a8\u83b7\u5f97\u7126\u70b9\u3002 | Boolean | - |\n| placeholder | \u5360\u4f4d\u7b26 | string | `\u25cb` |\n| size | \u6307\u5b9a\u8f93\u5165\u6846\u7684\u5c3a\u5bf8\uff0c\u9664\u4e86\u9ed8\u8ba4\u7684\u5927\u5c0f\u5916\uff0c\u8fd8\u63d0\u4f9b\u4e86 `large`\u3001`small` \u548c `default` \u4e09\u79cd\u5c3a\u5bf8\u3002 | String | - |\n| onChange | `value` \u53d8\u5316\u65f6\u56de\u8c03\u51fd\u6570 | Function(value: string[]) | - |\n| onBlur | \u5931\u53bb\u7126\u70b9\u65f6\u8fd0\u884c | Function(event: React.FocusEvent<HTMLInputElement\\>) | - |\n| onFocus | \u83b7\u5f97\u7126\u70b9\u65f6\u8fd0\u884c | Function(event: React.FocusEvent<HTMLInputElement\\>) | - |"}}}]);
-//# sourceMappingURL=9875.f42566b4.chunk.js.map

package/web/static/js/9947.8aff2fc4.chunk.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9947],{9947:function(e,n,t){t.r(n),n.default={components:{18:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(2814);function a(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!==typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,a,o=[],u=!0,i=!1;try{for(t=t.call(e);!(u=(r=t.next()).done)&&(o.push(r.value),!n||o.length!==n);u=!0);}catch(l){i=!0,a=l}finally{try{u||null==t.return||t.return()}finally{if(i)throw a}}return o}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return o(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return o(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}return function(){var e=a(n.default.useState(!1),2),t=e[0],o=e[1],u=a(n.default.useState(!0),2),i=u[0],l=u[1];return n.default.createElement("div",null,n.default.createElement(r.Button,{type:"primary",onClick:function(){o(!0),l(!0)}},"\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9"),n.default.createElement(r.Button,{type:"primary",onClick:function(){o(!0),l(!1)}},"\u5f39\u51fa\u5185\u5bb9\u6ca1\u6709\u906e\u7f69\u5c42"),n.default.createElement(r.Overlay,{hasBackdrop:i,isOpen:t,onClose:function(){return o(!1)}},n.default.createElement(r.Card,{active:!0,bordered:!i,style:{width:500}},n.default.createElement("h3",{style:{margin:0}},"\u57fa\u7840\u5f39\u51fa\u5c42 - ",String(t)),n.default.createElement("div",null,"\u8fd9\u662f\u4e00\u4e2a\u57fa\u7840\u7684\u5f39\u51fa\u5c42\u7ec4\u4ef6\uff0c\u5176\u5b83\u5f39\u51fa\u5c42\u7ec4\u4ef6\u57fa\u4e8e\u5b83\u6765\u6269\u5c55\u6bd4\u5982 Modal\u3001Alert"),n.default.createElement("br",null),n.default.createElement(r.Button,{type:"danger",onClick:function(){return o(!1)}},"\u5173\u95ed"))))}}(),68:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(2814);function a(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!==typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,a,o=[],u=!0,i=!1;try{for(t=t.call(e);!(u=(r=t.next()).done)&&(o.push(r.value),!n||o.length!==n);u=!0);}catch(l){i=!0,a=l}finally{try{u||null==t.return||t.return()}finally{if(i)throw a}}return o}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return o(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return o(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}return function(){var e=a(n.default.useState(!1),2),t=e[0],o=e[1];return n.default.createElement("div",null,n.default.createElement(r.Button,{type:"primary",onClick:function(){o(!t)}},"\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9"),n.default.createElement(r.Overlay,{backdropProps:{style:{backgroundColor:"rgba(0, 0, 0, .5)"}},isOpen:t,onClose:function(){return o(!1)}},n.default.createElement("div",{style:{backgroundColor:"#fff",minWidth:500}},n.default.createElement(r.Icon,{onClick:function(){return o(!1)},type:"circle-close",style:{position:"absolute",right:0,top:"-20px",color:"#fff",cursor:"pointer"}}),n.default.createElement("div",{style:{backgroundColor:"rgb(0, 204, 180)",color:"rgb(255, 255, 255)",textAlign:"center",padding:"34px 24px"}},n.default.createElement("h1",{style:{fontSize:"28px",fontWeight:"700",color:"rgb(255, 255, 255)",lineHeight:"1.2",margin:"0px"}},"\u4e0b\u6b21\u9884\u8ba2\u53ef\u4eab 5 \uffe5 \u4f18\u60e0"),n.default.createElement("div",{style:{padding:"5px 0"}},"(5 \uffe5 ~ \xa538)"),n.default.createElement("div",{style:{fontSize:"18px"}},"\u4f7f\u7528\u4fc3\u9500\u7801\uff1a ",n.default.createElement("b",{style:{color:"#f8e71c",margin:"0px 4px"}},"KSGI5"))),n.default.createElement("div",{style:{padding:"24px"}},n.default.createElement("h1",{style:{fontSize:"28px",fontWeight:"700",color:"rgb(23, 27, 30)",lineHeight:"1.2",margin:"0px 0px 4px"}},"\u8ba2\u9605 uiw \u7ec4\u4ef6\u65b0\u95fb\u901a\u8baf"),n.default.createElement("div",{style:{color:"rgb(70, 81, 94)"}},"\u5728\u6536\u4ef6\u7bb1\u4e2d\u63a5\u6536\u72ec\u5bb6\u66f4\u65b0\u4fe1\u606f")))))}}(),141:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(2814);function a(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!==typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,a,o=[],u=!0,i=!1;try{for(t=t.call(e);!(u=(r=t.next()).done)&&(o.push(r.value),!n||o.length!==n);u=!0);}catch(l){i=!0,a=l}finally{try{u||null==t.return||t.return()}finally{if(i)throw a}}return o}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return o(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return o(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}return function(){var e=a(n.default.useState(!1),2),t=e[0],o=e[1];function u(e){o(!t)}return n.default.createElement("div",null,n.default.createElement(r.Button,{type:"primary",onClick:u},"\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9"),n.default.createElement(r.Overlay,{usePortal:!1,isOpen:t,onClose:u},n.default.createElement(r.Card,function(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}({active:!0,style:{width:500}},"active",!0),n.default.createElement("h3",{style:{marginTop:0}},"\u57fa\u7840\u5f39\u51fa\u5c42"),n.default.createElement("p",null,"Portals \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728DOM\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 usePortal \u8bbe\u7f6e\u4e3a false \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684DOM\u6811\u4e2d\u3002"),n.default.createElement(r.Button,{type:"danger",onClick:u},"\u5173\u95ed"))))}}(),173:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(2814);function a(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!==typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,a,o=[],u=!0,i=!1;try{for(t=t.call(e);!(u=(r=t.next()).done)&&(o.push(r.value),!n||o.length!==n);u=!0);}catch(l){i=!0,a=l}finally{try{u||null==t.return||t.return()}finally{if(i)throw a}}return o}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return o(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return o(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}return function(){var e=a(n.default.useState(!1),2),t=e[0],o=e[1];function u(e){o(!t)}return n.default.createElement("div",null,n.default.createElement(r.Button,{type:"primary",onClick:u},"\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9"),n.default.createElement(r.Overlay,{transitionName:"animation-flipX",timeout:1e3,isOpen:t,onClose:u},n.default.createElement(r.Card,function(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}({active:!0,style:{width:500}},"active",!0),n.default.createElement("h3",{style:{marginTop:0}},"\u57fa\u7840\u5f39\u51fa\u5c42"),n.default.createElement("p",null,"Portals \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728DOM\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 usePortal \u8bbe\u7f6e\u4e3a false \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684DOM\u6811\u4e2d\u3002"),n.default.createElement(r.Button,{type:"danger",onClick:u},"\u5173\u95ed"))))}}()},data:{18:{name:18,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nfunction Demo() {\n  var _React$useState = _react["default"].useState(false),\n      _React$useState2 = _slicedToArray(_React$useState, 2),\n      isOpen = _React$useState2[0],\n      setIsOpen = _React$useState2[1];\n\n  var _React$useState3 = _react["default"].useState(true),\n      _React$useState4 = _slicedToArray(_React$useState3, 2),\n      hasBackdrop = _React$useState4[0],\n      setHasBackdrop = _React$useState4[1];\n\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary",\n    onClick: function onClick() {\n      setIsOpen(true);\n      setHasBackdrop(true);\n    }\n  }, "\\u70B9\\u51FB\\u5F39\\u51FA\\u5185\\u5BB9"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary",\n    onClick: function onClick() {\n      setIsOpen(true);\n      setHasBackdrop(false);\n    }\n  }, "\\u5F39\\u51FA\\u5185\\u5BB9\\u6CA1\\u6709\\u906E\\u7F69\\u5C42"), /*#__PURE__*/_react["default"].createElement(_uiw.Overlay, {\n    hasBackdrop: hasBackdrop,\n    isOpen: isOpen,\n    onClose: function onClose() {\n      return setIsOpen(false);\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Card, {\n    active: true,\n    bordered: !hasBackdrop,\n    style: {\n      width: 500\n    }\n  }, /*#__PURE__*/_react["default"].createElement("h3", {\n    style: {\n      margin: 0\n    }\n  }, "\\u57FA\\u7840\\u5F39\\u51FA\\u5C42 - ", String(isOpen)), /*#__PURE__*/_react["default"].createElement("div", null, "\\u8FD9\\u662F\\u4E00\\u4E2A\\u57FA\\u7840\\u7684\\u5F39\\u51FA\\u5C42\\u7EC4\\u4EF6\\uFF0C\\u5176\\u5B83\\u5F39\\u51FA\\u5C42\\u7EC4\\u4EF6\\u57FA\\u4E8E\\u5B83\\u6765\\u6269\\u5C55\\u6BD4\\u5982 Modal\\u3001Alert"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "danger",\n    onClick: function onClick() {\n      return setIsOpen(false);\n    }\n  }, "\\u5173\\u95ED"))));\n}\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Overlay, Button, Card } from \'uiw\';\n\nfunction Demo() {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [hasBackdrop, setHasBackdrop] = React.useState(true);\n  return (\n    <div>\n      <Button\n        type="primary"\n        onClick={() => {\n          setIsOpen(true)\n          setHasBackdrop(true)\n        }}\n      >\n        \u70b9\u51fb\u5f39\u51fa\u5185\u5bb9\n      </Button>\n      <Button\n        type="primary"\n        onClick={() => {\n          setIsOpen(true)\n          setHasBackdrop(false)\n        }}\n      >\n        \u5f39\u51fa\u5185\u5bb9\u6ca1\u6709\u906e\u7f69\u5c42\n      </Button>\n      <Overlay\n        hasBackdrop={hasBackdrop}\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n      >\n        <Card active bordered={!hasBackdrop} style={{ width: 500 }}>\n          <h3 style={{margin: 0}}>\u57fa\u7840\u5f39\u51fa\u5c42 - {String(isOpen)}</h3>\n          <div>\n            \u8fd9\u662f\u4e00\u4e2a\u57fa\u7840\u7684\u5f39\u51fa\u5c42\u7ec4\u4ef6\uff0c\u5176\u5b83\u5f39\u51fa\u5c42\u7ec4\u4ef6\u57fa\u4e8e\u5b83\u6765\u6269\u5c55\u6bd4\u5982 Modal\u3001Alert\n          </div>\n          <br />\n          <Button type="danger" onClick={() => setIsOpen(false)}>\u5173\u95ed</Button>\n        </Card>\n      </Overlay>\n    </div>\n  )\n}\n\nexport default Demo'},68:{name:68,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nfunction Demo() {\n  var _React$useState = _react["default"].useState(false),\n      _React$useState2 = _slicedToArray(_React$useState, 2),\n      isOpen = _React$useState2[0],\n      setIsOpen = _React$useState2[1];\n\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary",\n    onClick: function onClick() {\n      setIsOpen(!isOpen);\n    }\n  }, "\\u70B9\\u51FB\\u5F39\\u51FA\\u5185\\u5BB9"), /*#__PURE__*/_react["default"].createElement(_uiw.Overlay, {\n    backdropProps: {\n      style: {\n        backgroundColor: \'rgba(0, 0, 0, .5)\'\n      }\n    },\n    isOpen: isOpen,\n    onClose: function onClose() {\n      return setIsOpen(false);\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      backgroundColor: \'#fff\',\n      minWidth: 500\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    onClick: function onClick() {\n      return setIsOpen(false);\n    },\n    type: "circle-close",\n    style: {\n      position: \'absolute\',\n      right: 0,\n      top: \'-20px\',\n      color: \'#fff\',\n      cursor: \'pointer\'\n    }\n  }), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      backgroundColor: \'rgb(0, 204, 180)\',\n      color: \'rgb(255, 255, 255)\',\n      textAlign: \'center\',\n      padding: \'34px 24px\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("h1", {\n    style: {\n      fontSize: \'28px\',\n      fontWeight: \'700\',\n      color: \'rgb(255, 255, 255)\',\n      lineHeight: \'1.2\',\n      margin: \'0px\'\n    }\n  }, "\\u4E0B\\u6B21\\u9884\\u8BA2\\u53EF\\u4EAB 5 \\uFFE5 \\u4F18\\u60E0"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      padding: \'5px 0\'\n    }\n  }, "(5 \\uFFE5 ~ \\xA538)"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      fontSize: \'18px\'\n    }\n  }, "\\u4F7F\\u7528\\u4FC3\\u9500\\u7801\\uFF1A ", /*#__PURE__*/_react["default"].createElement("b", {\n    style: {\n      color: \'#f8e71c\',\n      margin: \'0px 4px\'\n    }\n  }, "KSGI5"))), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      padding: \'24px\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("h1", {\n    style: {\n      fontSize: \'28px\',\n      fontWeight: \'700\',\n      color: \'rgb(23, 27, 30)\',\n      lineHeight: \'1.2\',\n      margin: \'0px 0px 4px\'\n    }\n  }, "\\u8BA2\\u9605 uiw \\u7EC4\\u4EF6\\u65B0\\u95FB\\u901A\\u8BAF"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      color: \'rgb(70, 81, 94)\'\n    }\n  }, "\\u5728\\u6536\\u4EF6\\u7BB1\\u4E2D\\u63A5\\u6536\\u72EC\\u5BB6\\u66F4\\u65B0\\u4FE1\\u606F")))));\n}\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Overlay, Button, Icon } from 'uiw';\n\nfunction Demo() {\n  const [isOpen, setIsOpen] = React.useState(false);\n  return (\n    <div>\n      <Button\n        type=\"primary\"\n        onClick={() => {\n          setIsOpen(!isOpen);\n        }}\n      >\n        \u70b9\u51fb\u5f39\u51fa\u5185\u5bb9\n      </Button>\n      <Overlay\n        backdropProps={{\n          style: { backgroundColor: 'rgba(0, 0, 0, .5)' }\n        }}\n        isOpen={isOpen} onClose={() => setIsOpen(false)}\n      >\n        <div style={{ backgroundColor: '#fff', minWidth: 500 }} >\n          <Icon\n            onClick={() => setIsOpen(false)}\n            type=\"circle-close\"\n            style={{\n              position: 'absolute',\n              right: 0,\n              top: '-20px',\n              color: '#fff',\n              cursor: 'pointer',\n            }}\n          />\n          <div\n            style={{\n              backgroundColor: 'rgb(0, 204, 180)',\n              color: 'rgb(255, 255, 255)',\n              textAlign: 'center',\n              padding: '34px 24px',\n            }}\n          >\n            <h1\n              style={{\n                fontSize: '28px',\n                fontWeight: '700',\n                color: 'rgb(255, 255, 255)',\n                lineHeight: '1.2',\n                margin: '0px',\n              }}\n            >\n              \u4e0b\u6b21\u9884\u8ba2\u53ef\u4eab 5 \uffe5 \u4f18\u60e0\n            </h1>\n            <div style={{ padding: '5px 0' }}>(5 \uffe5 ~ \xa538)</div>\n            <div style={{ fontSize: '18px' }}>\u4f7f\u7528\u4fc3\u9500\u7801\uff1a <b style={{ color: '#f8e71c', margin: '0px 4px' }}>KSGI5</b></div>\n          </div>\n          <div style={{ padding: '24px' }}>\n            <h1 style={{ fontSize: '28px', fontWeight: '700', color: 'rgb(23, 27, 30)', lineHeight: '1.2', margin: '0px 0px 4px' }}>\u8ba2\u9605 uiw \u7ec4\u4ef6\u65b0\u95fb\u901a\u8baf</h1>\n            <div style={{ color: 'rgb(70, 81, 94)' }}>\u5728\u6536\u4ef6\u7bb1\u4e2d\u63a5\u6536\u72ec\u5bb6\u66f4\u65b0\u4fe1\u606f</div>\n          </div>\n        </div>\n      </Overlay>\n    </div>\n  )\n}\n\nexport default Demo"},141:{name:141,meta:{background:"#fff",noScroll:"true",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nfunction Demo() {\n  var _React$useState = _react["default"].useState(false),\n      _React$useState2 = _slicedToArray(_React$useState, 2),\n      isOpen = _React$useState2[0],\n      setIsOpen = _React$useState2[1];\n\n  function toggleOverlay(e) {\n    setIsOpen(!isOpen);\n  }\n\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary",\n    onClick: toggleOverlay\n  }, "\\u70B9\\u51FB\\u5F39\\u51FA\\u5185\\u5BB9"), /*#__PURE__*/_react["default"].createElement(_uiw.Overlay, {\n    usePortal: false,\n    isOpen: isOpen,\n    onClose: toggleOverlay\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Card, _defineProperty({\n    active: true,\n    style: {\n      width: 500\n    }\n  }, "active", true), /*#__PURE__*/_react["default"].createElement("h3", {\n    style: {\n      marginTop: 0\n    }\n  }, "\\u57FA\\u7840\\u5F39\\u51FA\\u5C42"), /*#__PURE__*/_react["default"].createElement("p", null, "Portals \\u662F react 16 \\u63D0\\u4F9B\\u7684\\u5B98\\u65B9\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u4F7F\\u5F97\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u8131\\u79BB\\u7236\\u7EC4\\u4EF6\\u5C42\\u7EA7\\u6302\\u8F7D\\u5728DOM\\u6811\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\uFF0C\\u6211\\u4EEC\\u5229\\u7528\\u8FD9\\u4E2A\\u65B9\\u6CD5\\uFF0C\\u53EF\\u5C06\\u6A21\\u6001\\u5BF9\\u8BDD\\u6846\\u751F\\u6210\\u5230\\u6839\\u8282\\u70B9\\u7684\\u5916\\u9762\\uFF0C\\u9ED8\\u8BA4\\u60C5\\u51B5\\u751F\\u6210\\u5230\\u8DDF\\u8282\\u70B9\\u7684\\u5916\\u9762\\uFF0C\\u901A\\u8FC7\\u5C06 usePortal \\u8BBE\\u7F6E\\u4E3A false \\u5C06\\u5BF9\\u8BDD\\u6846\\u751F\\u6210\\u5728\\u7236\\u7EC4\\u4EF6\\u5C42\\u7EA7\\u6302\\u8F7D\\u7684DOM\\u6811\\u4E2D\\u3002"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "danger",\n    onClick: toggleOverlay\n  }, "\\u5173\\u95ED"))));\n}\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Overlay, Button, Card } from 'uiw';\n\nfunction Demo() {\n  const [isOpen, setIsOpen] = React.useState(false);\n  function toggleOverlay(e) {\n    setIsOpen(!isOpen);\n  }\n  return (\n    <div>\n      <Button type=\"primary\" onClick={toggleOverlay}>\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9</Button>\n      <Overlay usePortal={false} isOpen={isOpen} onClose={toggleOverlay}>\n        <Card active style={{ width: 500 }} active>\n          <h3 style={{marginTop: 0}}>\u57fa\u7840\u5f39\u51fa\u5c42</h3>\n          <p>Portals \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728DOM\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 usePortal \u8bbe\u7f6e\u4e3a false \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684DOM\u6811\u4e2d\u3002</p>\n          <Button type=\"danger\" onClick={toggleOverlay}>\u5173\u95ed</Button>\n        </Card>\n      </Overlay>\n    </div>\n  )\n}\n\nexport default Demo"},173:{name:173,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nfunction Demo() {\n  var _React$useState = _react["default"].useState(false),\n      _React$useState2 = _slicedToArray(_React$useState, 2),\n      isOpen = _React$useState2[0],\n      setIsOpen = _React$useState2[1];\n\n  function toggleOverlay(e) {\n    setIsOpen(!isOpen);\n  }\n\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary",\n    onClick: toggleOverlay\n  }, "\\u70B9\\u51FB\\u5F39\\u51FA\\u5185\\u5BB9"), /*#__PURE__*/_react["default"].createElement(_uiw.Overlay, {\n    transitionName: "animation-flipX",\n    timeout: 1000,\n    isOpen: isOpen,\n    onClose: toggleOverlay\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Card, _defineProperty({\n    active: true,\n    style: {\n      width: 500\n    }\n  }, "active", true), /*#__PURE__*/_react["default"].createElement("h3", {\n    style: {\n      marginTop: 0\n    }\n  }, "\\u57FA\\u7840\\u5F39\\u51FA\\u5C42"), /*#__PURE__*/_react["default"].createElement("p", null, "Portals \\u662F react 16 \\u63D0\\u4F9B\\u7684\\u5B98\\u65B9\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u4F7F\\u5F97\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u8131\\u79BB\\u7236\\u7EC4\\u4EF6\\u5C42\\u7EA7\\u6302\\u8F7D\\u5728DOM\\u6811\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\uFF0C\\u6211\\u4EEC\\u5229\\u7528\\u8FD9\\u4E2A\\u65B9\\u6CD5\\uFF0C\\u53EF\\u5C06\\u6A21\\u6001\\u5BF9\\u8BDD\\u6846\\u751F\\u6210\\u5230\\u6839\\u8282\\u70B9\\u7684\\u5916\\u9762\\uFF0C\\u9ED8\\u8BA4\\u60C5\\u51B5\\u751F\\u6210\\u5230\\u8DDF\\u8282\\u70B9\\u7684\\u5916\\u9762\\uFF0C\\u901A\\u8FC7\\u5C06 usePortal \\u8BBE\\u7F6E\\u4E3A false \\u5C06\\u5BF9\\u8BDD\\u6846\\u751F\\u6210\\u5728\\u7236\\u7EC4\\u4EF6\\u5C42\\u7EA7\\u6302\\u8F7D\\u7684DOM\\u6811\\u4E2D\\u3002"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "danger",\n    onClick: toggleOverlay\n  }, "\\u5173\\u95ED"))));\n}\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Overlay, Button, Card } from \'uiw\';\n\nfunction Demo() {\n  const [isOpen, setIsOpen] = React.useState(false);\n  function toggleOverlay(e) {\n    setIsOpen(!isOpen);\n  }\n  return (\n    <div>\n      <Button type="primary" onClick={toggleOverlay}>\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9</Button>\n      <Overlay\n        transitionName="animation-flipX"\n        timeout={1000}\n        isOpen={isOpen}\n        onClose={toggleOverlay}\n      >\n        <Card active style={{ width: 500 }} active>\n          <h3 style={{marginTop: 0}}>\u57fa\u7840\u5f39\u51fa\u5c42</h3>\n          <p>Portals \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728DOM\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 usePortal \u8bbe\u7f6e\u4e3a false \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684DOM\u6811\u4e2d\u3002</p>\n          <Button type="danger" onClick={toggleOverlay}>\u5173\u95ed</Button>\n        </Card>\n      </Overlay>\n    </div>\n  )\n}\n\nexport default Demo'}},source:"Overlay \u57fa\u7840\u5f39\u51fa\u5c42\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-overlay/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-overlay.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-overlay)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-overlay.svg?label=@uiw/react-overlay)](https://npmjs.com/@uiw/react-overlay)\n\n\u8fd9\u662f\u4e00\u4e2a\u57fa\u7840\u7684\u5f39\u51fa\u5c42\u7ec4\u4ef6\uff0c\u5176\u5b83\u5f39\u51fa\u7ec4\u4ef6\u7684\u62bd\u8c61\u7ec4\u4ef6\uff0c\u90fd\u57fa\u4e8e\u5b83\u6765\u6269\u5c55\u6bd4\u5982 [`<Modal>`](#/components/modal)\u3001[`<Dawer>`](#/components/drawer)\u3001[`<Alert>`](#/components/alert)\u3001[`<OverlayTrigger>`](#/components/overlay-trigger)\u3001[`<Popover>`](#/components/popover)\u3001[`<Tooltip>`](#/components/tooltip) \u7b49\u3002\n\n```jsx\nimport { Overlay } from 'uiw';\n// or\nimport Overlay from '@uiw/react-overlay';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Overlay, Button, Card } from 'uiw';\n\nfunction Demo() {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [hasBackdrop, setHasBackdrop] = React.useState(true);\n  return (\n    <div>\n      <Button\n        type=\"primary\"\n        onClick={() => {\n          setIsOpen(true)\n          setHasBackdrop(true)\n        }}\n      >\n        \u70b9\u51fb\u5f39\u51fa\u5185\u5bb9\n      </Button>\n      <Button\n        type=\"primary\"\n        onClick={() => {\n          setIsOpen(true)\n          setHasBackdrop(false)\n        }}\n      >\n        \u5f39\u51fa\u5185\u5bb9\u6ca1\u6709\u906e\u7f69\u5c42\n      </Button>\n      <Overlay\n        hasBackdrop={hasBackdrop}\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n      >\n        <Card active bordered={!hasBackdrop} style={{ width: 500 }}>\n          <h3 style={{margin: 0}}>\u57fa\u7840\u5f39\u51fa\u5c42 - {String(isOpen)}</h3>\n          <div>\n            \u8fd9\u662f\u4e00\u4e2a\u57fa\u7840\u7684\u5f39\u51fa\u5c42\u7ec4\u4ef6\uff0c\u5176\u5b83\u5f39\u51fa\u5c42\u7ec4\u4ef6\u57fa\u4e8e\u5b83\u6765\u6269\u5c55\u6bd4\u5982 Modal\u3001Alert\n          </div>\n          <br />\n          <Button type=\"danger\" onClick={() => setIsOpen(false)}>\u5173\u95ed</Button>\n        </Card>\n      </Overlay>\n    </div>\n  )\n}\n\nexport default Demo\n```\n\n### \u5b8c\u5168\u5b9a\u5236\u5f39\u51fa\u5bb9\u5668\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Overlay, Button, Icon } from 'uiw';\n\nfunction Demo() {\n  const [isOpen, setIsOpen] = React.useState(false);\n  return (\n    <div>\n      <Button\n        type=\"primary\"\n        onClick={() => {\n          setIsOpen(!isOpen);\n        }}\n      >\n        \u70b9\u51fb\u5f39\u51fa\u5185\u5bb9\n      </Button>\n      <Overlay\n        backdropProps={{\n          style: { backgroundColor: 'rgba(0, 0, 0, .5)' }\n        }}\n        isOpen={isOpen} onClose={() => setIsOpen(false)}\n      >\n        <div style={{ backgroundColor: '#fff', minWidth: 500 }} >\n          <Icon\n            onClick={() => setIsOpen(false)}\n            type=\"circle-close\"\n            style={{\n              position: 'absolute',\n              right: 0,\n              top: '-20px',\n              color: '#fff',\n              cursor: 'pointer',\n            }}\n          />\n          <div\n            style={{\n              backgroundColor: 'rgb(0, 204, 180)',\n              color: 'rgb(255, 255, 255)',\n              textAlign: 'center',\n              padding: '34px 24px',\n            }}\n          >\n            <h1\n              style={{\n                fontSize: '28px',\n                fontWeight: '700',\n                color: 'rgb(255, 255, 255)',\n                lineHeight: '1.2',\n                margin: '0px',\n              }}\n            >\n              \u4e0b\u6b21\u9884\u8ba2\u53ef\u4eab 5 \uffe5 \u4f18\u60e0\n            </h1>\n            <div style={{ padding: '5px 0' }}>(5 \uffe5 ~ \xa538)</div>\n            <div style={{ fontSize: '18px' }}>\u4f7f\u7528\u4fc3\u9500\u7801\uff1a <b style={{ color: '#f8e71c', margin: '0px 4px' }}>KSGI5</b></div>\n          </div>\n          <div style={{ padding: '24px' }}>\n            <h1 style={{ fontSize: '28px', fontWeight: '700', color: 'rgb(23, 27, 30)', lineHeight: '1.2', margin: '0px 0px 4px' }}>\u8ba2\u9605 uiw \u7ec4\u4ef6\u65b0\u95fb\u901a\u8baf</h1>\n            <div style={{ color: 'rgb(70, 81, 94)' }}>\u5728\u6536\u4ef6\u7bb1\u4e2d\u63a5\u6536\u72ec\u5bb6\u66f4\u65b0\u4fe1\u606f</div>\n          </div>\n        </div>\n      </Overlay>\n    </div>\n  )\n}\n\nexport default Demo\n```\n\n### usePortal\n\n[`Portals`](https://reactjs.org/docs/portals.html#event-bubbling-through-portals) \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728 DOM \u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 `usePortal` \u8bbe\u7f6e\u4e3a `false` \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684 DOM \u6811\u4e2d\u3002 \n\n```jsx mdx:preview&background=#fff&noScroll=true&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Overlay, Button, Card } from 'uiw';\n\nfunction Demo() {\n  const [isOpen, setIsOpen] = React.useState(false);\n  function toggleOverlay(e) {\n    setIsOpen(!isOpen);\n  }\n  return (\n    <div>\n      <Button type=\"primary\" onClick={toggleOverlay}>\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9</Button>\n      <Overlay usePortal={false} isOpen={isOpen} onClose={toggleOverlay}>\n        <Card active style={{ width: 500 }} active>\n          <h3 style={{marginTop: 0}}>\u57fa\u7840\u5f39\u51fa\u5c42</h3>\n          <p>Portals \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728DOM\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 usePortal \u8bbe\u7f6e\u4e3a false \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684DOM\u6811\u4e2d\u3002</p>\n          <Button type=\"danger\" onClick={toggleOverlay}>\u5173\u95ed</Button>\n        </Card>\n      </Overlay>\n    </div>\n  )\n}\n\nexport default Demo\n```\n\n### \u81ea\u5b9a\u4e49\u52a8\u753b\n\n\u52a8\u753b\u8fc7\u6e21\u6548\u679c\u662f\u6839\u636e [`react-transition-group`](https://github.com/reactjs/react-transition-group) \u7ec4\u4ef6\u5c01\u88c5\u3002\u52a8\u753b\u65f6\u957f\u53c2\u6570 `timeout={1000}` \u662f\u6839\u636e CSS \u52a8\u753b\u6837\u5f0f\u6301\u7eed\u65f6\u957f\u6765\u5b9a\u4e49\u3002\n\n> \u6ce8\u610f\uff1a`@3.2.0` ~~`transitionDuration={1000}`~~ \u66f4\u540d\u4e3a `timeout`\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Overlay, Button, Card } from 'uiw';\n\nfunction Demo() {\n  const [isOpen, setIsOpen] = React.useState(false);\n  function toggleOverlay(e) {\n    setIsOpen(!isOpen);\n  }\n  return (\n    <div>\n      <Button type=\"primary\" onClick={toggleOverlay}>\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9</Button>\n      <Overlay\n        transitionName=\"animation-flipX\"\n        timeout={1000}\n        isOpen={isOpen}\n        onClose={toggleOverlay}\n      >\n        <Card active style={{ width: 500 }} active>\n          <h3 style={{marginTop: 0}}>\u57fa\u7840\u5f39\u51fa\u5c42</h3>\n          <p>Portals \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728DOM\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 usePortal \u8bbe\u7f6e\u4e3a false \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684DOM\u6811\u4e2d\u3002</p>\n          <Button type=\"danger\" onClick={toggleOverlay}>\u5173\u95ed</Button>\n        </Card>\n      </Overlay>\n    </div>\n  )\n}\n\nexport default Demo\n```\n\n\u4f60\u53ef\u4ee5\u6839\u636e\u52a8\u753b\u6837\u5f0f\u5e93 [**`animate.css`**](https://daneden.github.io/animate.css/) \u6dfb\u52a0\u4e0d\u540c\u7684\u51fa\u5165\u52a8\u753b\u3002\u9ed8\u8ba4\u901a\u8fc7\u7684 [`Less`](http://lesscss.org/) \u751f\u6210 CSS \u52a8\u753b\u7684\u5b9e\u4f8b\u4ee3\u7801\uff0c\u5b9a\u4e49 `transitionName` \u52a8\u753b\u6837\u5f0f\u540d\u5b57\u4e3a `animation-bouce`\uff0c\u4e0b\u9762\u662f\u4e0a\u9762\u5b9e\u4f8b\u7684\u6837\u5f0f\uff1a\n\n```less\n@animation-prefix:~\"animation-flipX\";\n// \u906e\u7f69\u5c42\u52a8\u753b\n// Background animation\n.@{animation-prefix}-enter .w-overlay-backdrop {\n  opacity: 0.01;\n}\n.@{animation-prefix}-enter-active .w-overlay-backdrop {\n  opacity: 1;\n  transition: opacity 1s ease-in;\n}\n.@{animation-prefix}-exit .w-overlay-backdrop {\n  opacity: 1;\n}\n.@{animation-prefix}-exit-active .w-overlay-backdrop {\n  opacity: 0.01;\n  transition: opacity 1s ease-in;\n}\n// \u5bf9\u8bdd\u6846\u52a8\u753b\n// Content animation\n.@{animation-prefix}-enter-active .w-overlay-content {\n  animation-duration: 1s;\n  animation-fill-mode: both;\n  animation-name: flipInX;\n}\n.@{animation-prefix}-exit-active .w-overlay-content {\n  animation-duration: 1s;\n  animation-fill-mode: both;\n  animation-name: flipOutX;\n}\n\n.@{animation-prefix}-enter,\n.@{animation-prefix}-enter-done,\n.@{animation-prefix}-exit {\n  display: inherit;\n}\n\n@keyframes flipOutX {\n  0% { transform: perspective(400px); }\n  30% {\n    transform: perspective(400px) rotateX(-20deg);\n    opacity: 1;\n  }\n  to {\n    transform: perspective(400px) rotateX(90deg);\n    opacity: 0;\n  }\n}\n\n@keyframes flipInX {\n  0% {\n    transform: perspective(400px) rotateX(90deg);\n    animation-timing-function: ease-in;\n    opacity: 0;\n  }\n  40% {\n    transform: perspective(400px) rotateX(-20deg);\n    animation-timing-function: ease-in;\n  }\n  60% {\n    transform: perspective(400px) rotateX(10deg);\n    opacity: 1;\n  }\n  80% {\n    transform: perspective(400px) rotateX(-5deg);\n  }\n  to { transform: perspective(400px); }\n}\n```\n\n## Overlay\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| isOpen | \u5bf9\u8bdd\u6846\u662f\u5426\u53ef\u89c1 | boolean | `false` |\n| usePortal | \u4f7f\u7528 react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848 [`Portals`](https://reactjs.org/docs/portals.html#event-bubbling-through-portals)\uff0c\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\u3002 |  boolean | `true` |\n| maskClosable | \u70b9\u51fb\u906e\u7f69\u5c42\u662f\u5426\u5141\u8bb8\u5173\u95ed | boolean | `true` |\n| portalProps | \u8bbe\u7f6e [`Portal`](#/components/portal) \u7ec4\u4ef6\u5c5e\u6027 | object | `{}` |\n| backdropProps | \u906e\u7f69\u5c42 HTML \u5c5e\u6027\u8bbe\u7f6e | object | `{}` |\n| dialogProps | \u5f39\u51fa\u76ee\u6807(\u5bf9\u8bdd\u6846) HTML \u5c5e\u6027\u8bbe\u7f6e | object | - |\n| unmountOnExit | \u9ed8\u8ba4 `true` \u9000\u51fa\u52a8\u753b\u5378\u8f7d\u7ec4\u4ef6 | boolean | `true` |\n| hasBackdrop | \u662f\u5426\u6709\u80cc\u666f\uff0c\u662f\u5426\u5411 `<body>` \u6dfb\u52a0\u6837\u5f0f `.w-overlay-open` \u9632\u6b62\u6eda\u52a8\u6761\u51fa\u73b0 | boolean | `true` |\n| transitionName | \u5185\u90e8 [`CSSTransitionsss`](http://reactcommunity.org/react-transition-group/css-transition/) \u7684\u8f6c\u6362\u540d\u79f0\u3002\u5728\u6b64\u63d0\u4f9b\u60a8\u81ea\u5df1\u7684\u540d\u79f0\u5c06\u9700\u8981\u5b9a\u4e49\u65b0\u7684 CSS \u8fc7\u6e21\u5c5e\u6027\u3002 | string | `w-overlay` |\n| timeout | ~~transitionDuration~~ \u66f4\u540d\u4e3a `timeout` \u6301\u7eed\u65f6\u95f4 | number | `300` |\n| onClose | \u70b9\u51fb\u906e\u7f69\u5c42\u56de\u8c03\u51fd\u6570\uff0c\u901a\u8fc7\u8fd9\u4e2a\u51fd\u6570\u8bbe\u7f6e `isOpen=false` \u5173\u95ed\u3002**`onClosed`** \u662f\u5f39\u51fa\u6846\u5173\u95ed\u52a8\u753b\u6267\u884c\u5b8c\u6210\u540e\u7684\u56de\u8c03\u51fd\u6570\uff0c\u6709\u660e\u663e\u533a\u522b\u5bb9\u6613\u6df7\u6dc6\u3002 | Function | - |\n| onEnter | \u987a\u5e8f `1`\uff0c\u5e94\u7528 `enter` \u6216 `appear` \u540e\u7acb\u5373\u89e6\u53d1 [`<CSSTransition>`](http://reactcommunity.org/react-transition-group/transition/) \u56de\u8c03\u3002\u3002 | Function(node: HtmlElement, isAppearing: bool) | - |\n| onOpening | \u987a\u5e8f `2`\uff0c**`\u6253\u5f00`**\u7acb\u5373\u6267\u884c\uff0c\u5728\u5e94\u7528 `enter-active` \u6216 `appear-active` \u7c7b\u540e\u7acb\u5373\u89e6\u53d1 [`<CSSTransition>`](http://reactcommunity.org/react-transition-group/transition/) \u56de\u8c03\u3002 | Function(node: HtmlElement, isAppearing: bool) | - |\n| onOpened | \u987a\u5e8f `3`\uff0c**`\u6253\u5f00`**\u52a8\u753b\u64ad\u653e\u5b8c\u6210\u6267\u884c\uff0c\u5728\u5e94\u7528 `exiting` \u72b6\u6001\u4e4b\u524d\u542f\u52a8\u56de\u8c03\u3002 | Function(node: HtmlElement, isAppearing: bool) | - |\n| onClosing | \u987a\u5e8f `4`\uff0c**`\u5173\u95ed`**\u7acb\u5373\u6267\u884c\uff0c\u5e94\u7528 `exit-active` \u540e\u7acb\u5373\u89e6\u53d1 [`<CSSTransition>`](http://reactcommunity.org/react-transition-group/transition/) \u56de\u8c03\u3002 | Function(node: HtmlElement) | - |\n| onClosed | \u987a\u5e8f `5`\uff0c**`\u5173\u95ed`**\u52a8\u753b\u64ad\u653e\u5b8c\u6210\u7acb\u5373\u6267\u884c\uff0c\u5220\u9664 `exit` \u7c7b\u540e\u7acb\u5373\u89e6\u53d1 [`<CSSTransition>`](http://reactcommunity.org/react-transition-group/transition/) \u56de\u8c03\uff0c\u5e76\u5c06 `exit-done` \u7c7b\u6dfb\u52a0\u5230 DOM \u8282\u70b9\u3002 | Function(node: HtmlElement) | - |\n\n\u652f\u6301\u4f20\u9012 [`<CSSTransition>`](http://reactcommunity.org/react-transition-group/transition/) \u539f\u4e8b\u4ef6\u8986\u76d6\u5f53\u524d\u4e8b\u4ef6\uff0c\u8bf7\u67e5\u770b [`<CSSTransition>`](http://reactcommunity.org/react-transition-group/transition/) \u6587\u6863\u3002\n\n"}}}]);
-//# sourceMappingURL=9947.8aff2fc4.chunk.js.map