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

package/web/static/js/vendors-uiwjs.3091e433.js

@@ -1,3 +0,0 @@
-/*! For license information please see vendors-uiwjs.3091e433.js.LICENSE.txt */
-(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1908],{8497:function(e){e.exports=function(){"use strict";function e(e,t){var n=document.createElement("textarea");n.value=e,n.setAttribute("readonly",""),n.style={position:"absolute",left:"-9999px"},document.body.appendChild(n);var i=document.getSelection().rangeCount>0&&document.getSelection().getRangeAt(0);n.select();var r=!1;try{r=!!document.execCommand("copy")}catch(a){r=!1}document.body.removeChild(n),i&&document.getSelection&&(document.getSelection().removeAllRanges(),document.getSelection().addRange(i)),t&&t(r)}return e}()},2271:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return p}});var i=n(2951),r=n(1976),a=n(7169),o=n(7591),l=n(4337),d=n(5773),u=n(808),s=n(8133),c=n(9265),f=["prefixCls","className","children","mode","visiable","renderBar","lineBar","disable","onDragEnd","onDragging"],p=function(e){(0,o.Z)(n,e);var t=(0,l.Z)(n);function n(e){var r;return(0,i.Z)(this,n),(r=t.call(this,e)).state={dragging:!1},r.warpper=void 0,r.paneNumber=void 0,r.startX=void 0,r.startY=void 0,r.move=void 0,r.target=void 0,r.boxWidth=void 0,r.boxHeight=void 0,r.preWidth=void 0,r.nextWidth=void 0,r.preHeight=void 0,r.nextHeight=void 0,r.preSize=void 0,r.nextSize=void 0,r.onDragEnd=r.onDragEnd.bind((0,a.Z)(r)),r.onDragging=r.onDragging.bind((0,a.Z)(r)),r}return(0,r.Z)(n,[{key:"componentWillUnmount",value:function(){this.removeEvent()}},{key:"removeEvent",value:function(){window.removeEventListener("mousemove",this.onDragging,!1),window.removeEventListener("mouseup",this.onDragEnd,!1)}},{key:"onMouseDown",value:function(e,t){if(t.target&&this.warpper){this.paneNumber=e,this.startX=t.clientX,this.startY=t.clientY,this.move=!0,this.target=t.target.parentNode;var n=this.target.previousElementSibling,i=this.target.nextElementSibling;this.boxWidth=this.warpper.clientWidth,this.boxHeight=this.warpper.clientHeight,n&&(this.preWidth=n.clientWidth,this.preHeight=n.clientHeight),i&&(this.nextWidth=i.clientWidth,this.nextHeight=i.clientHeight),window.addEventListener("mousemove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd,!1),this.setState({dragging:!0})}}},{key:"onDragging",value:function(e){if(this.move){this.state.dragging||this.setState({dragging:!0});var t=this.props,n=t.mode,i=t.onDragging,r=this.target.nextElementSibling,a=this.target.previousElementSibling,o=e.clientX-this.startX,l=e.clientY-this.startY;if(this.preSize=0,this.nextSize=0,"horizontal"===n){if(this.preSize=this.preWidth+o>-1?this.preWidth+o:0,this.nextSize=this.nextWidth-o>-1?this.nextWidth-o:0,0===this.preSize||0===this.nextSize)return;this.preSize=100*(this.preSize/this.boxWidth>=1?1:this.preSize/this.boxWidth),this.nextSize=100*(this.nextSize/this.boxWidth>=1?1:this.nextSize/this.boxWidth),a&&r&&(a.style.width=this.preSize+"%",r.style.width=this.nextSize+"%")}if("vertical"===n&&this.preHeight+l>-1&&this.nextHeight-l>-1){if(this.preSize=this.preHeight+l>-1?this.preHeight+l:0,this.nextSize=this.nextHeight-l>-1?this.nextHeight-l:0,this.preSize=100*(this.preSize/this.boxHeight>=1?1:this.preSize/this.boxHeight),this.nextSize=100*(this.nextSize/this.boxHeight>=1?1:this.nextSize/this.boxHeight),0===this.preSize||0===this.nextSize)return;a&&r&&(a.style.height=this.preSize+"%",r.style.height=this.nextSize+"%")}i&&i(this.preSize,this.nextSize,this.paneNumber)}}},{key:"onDragEnd",value:function(){var e=this.props.onDragEnd;this.move=!1,e&&e(this.preSize,this.nextSize,this.paneNumber),this.removeEvent(),this.setState({dragging:!1})}},{key:"render",value:function(){var e=this,t=this.props,n=t.prefixCls,i=t.className,r=t.children,a=t.mode,o=t.visiable,l=t.renderBar,p=t.lineBar,m=t.disable,h=(0,u.Z)(t,f),v=this.state.dragging,_=[n,i,n+"-"+a,v?"dragging":null].filter(Boolean).join(" ").trim(),b=s.Children.toArray(r);return(0,c.jsx)("div",(0,d.Z)({className:_},h,{ref:function(t){return e.warpper=t},children:s.Children.map(b,(function(t,i){var r=Object.assign({},t.props,{className:[n+"-pane",t.props.className].filter(Boolean).join(" ").trim(),style:(0,d.Z)({},t.props.style)}),a=!0===o||o&&o.includes(i+1)||!1,u={className:[n+"-bar",p?n+"-line-bar":null,p?null:n+"-large-bar"].filter(Boolean).join(" ").trim()};(!0===m||m&&m.includes(i+1))&&(u.className=[u.className,m?"disable":null].filter(Boolean).join(" ").trim());var f=null;return 0!==i&&a&&l?f=l((0,d.Z)({},u,{onMouseDown:e.onMouseDown.bind(e,i+1)})):0!==i&&a&&(f=s.createElement("div",(0,d.Z)({},u),(0,c.jsx)("div",{onMouseDown:e.onMouseDown.bind(e,i+1)}))),(0,c.jsxs)(s.Fragment,{children:[f,s.cloneElement(t,(0,d.Z)({},r))]},i)}))}))}}]),n}(s.Component);p.defaultProps={prefixCls:"w-split",visiable:!0,mode:"horizontal"}},4104:function(e,t,n){"use strict";n.r(t),t.default={components:{32:function(){var e=i(n(8133)),t=i(n(2271));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement("div",null,e.default.createElement(t.default,{style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",{style:{width:"20%",minWidth:30}},e.default.createElement("iframe",{srcDoc:"<div>test</div>",style:{width:"100%",height:"100%"},title:"Code Preview",sandbox:"allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts"})),e.default.createElement("div",{style:{width:"80%",minWidth:100}},"Right Pane")),e.default.createElement(t.default,{style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",{style:{minWidth:60}},"test"),e.default.createElement("div",{style:{minWidth:80,flex:1}},"Right Pane")))}}(),70:function(){var e=i(n(8133)),t=i(n(2271));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement("div",null,e.default.createElement(t.default,{mode:"vertical",visiable:!1},e.default.createElement("div",{style:{minHeight:45,background:"#dcdcdc"}},"Header"),e.default.createElement(t.default,{visiable:!1},e.default.createElement("div",{style:{minWidth:200,maxWidth:200,minHeight:120,background:"#b5b5b5"}},"Sider"),e.default.createElement("div",{style:{width:"100%",background:"#ececec"}},"Content")),e.default.createElement("div",{style:{minHeight:45,background:"#dcdcdc"}},"Footer")),e.default.createElement("div",{style:{height:20}}),e.default.createElement(t.default,{visiable:!1},e.default.createElement("div",{style:{minWidth:200,maxWidth:200,minHeight:85,background:"#a9a9a9"}},"Sider"),e.default.createElement(t.default,{mode:"vertical",visiable:!1,style:{width:"100%"}},e.default.createElement("div",{style:{minHeight:45,background:"#dcdcdc"}},"Header"),e.default.createElement("div",{style:{minHeight:85,background:"#b5b5b5"}},"Content"),e.default.createElement("div",{style:{minHeight:45,background:"#dcdcdc"}},"Footer"))))}}(),117:function(){var e=i(n(8133)),t=i(n(2271));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement(t.default,{style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",null,"Left Pane"),e.default.createElement("div",null,"Center Pane"),e.default.createElement("div",null,"Center Pane"),e.default.createElement("div",{style:{flex:1}},"Right Pane"))}}(),143:function(){var e=i(n(8133)),t=i(n(2271));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement("div",null,e.default.createElement(t.default,{lineBar:!0,style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",null,"Left Pane"),e.default.createElement("div",null,"Center Pane"),e.default.createElement("div",null,"Center Pane"),e.default.createElement("div",{style:{flex:1}},"Right Pane")),e.default.createElement(t.default,{mode:"vertical",lineBar:!0,style:{height:210,border:"1px solid #d5d5d5",borderRadius:3,marginTop:10}},e.default.createElement("div",{style:{height:"33.3%"}},"Left Pane"),e.default.createElement("div",{style:{height:"33.3%"}},"Center Pane"),e.default.createElement("div",{style:{flex:1}},"Right Pane")))}}(),182:function(){var e=i(n(8133)),t=i(n(2271));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement(t.default,{mode:"vertical",style:{height:200,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",{style:{height:"50%"}},"Top Pane"),e.default.createElement("div",{style:{height:"50%"}},"Bottom Pane"))}}(),202:function(){var e=i(n(8133)),t=i(n(2271));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement(t.default,{style:{height:200,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement(t.default,{mode:"vertical"},e.default.createElement("div",{style:{height:"50%"}},"Top Pane"),e.default.createElement(t.default,{style:{height:"50%"}},e.default.createElement("div",null,"Left Pane"),e.default.createElement("div",{style:{flex:1}},"Right Pane"))),e.default.createElement("div",{style:{flex:1}},"Right Pane"))}}(),234:function(){var e=i(n(8133)),t=i(n(2271));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement("div",null,e.default.createElement(t.default,{visiable:!1,style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",{style:{maxWidth:100,backgroundColor:"#eaeaea"}},"Left Pane"),e.default.createElement("div",{style:{flex:1}},"Right Pane")),e.default.createElement(t.default,{visiable:[4,5],style:{height:100,border:"1px solid #d5d5d5",borderRadius:3,marginTop:10}},e.default.createElement("div",{style:{maxWidth:50,backgroundColor:"#eaeaea"}},"Pane 1"),e.default.createElement("div",{style:{maxWidth:60}},"Pane 2"),e.default.createElement("div",null,"Pane 3"),e.default.createElement("div",null,"Pane 4"),e.default.createElement("div",{style:{flex:1}},"Pane 5")))}}(),275:function(){var e=i(n(8133)),t=i(n(2271));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement("div",null,e.default.createElement(t.default,{disable:!0,style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",{style:{maxWidth:100,backgroundColor:"#eaeaea"}},"Left Pane"),e.default.createElement(t.default,{disable:!0,mode:"vertical"},e.default.createElement("div",null,"Top Pane"),e.default.createElement("div",null,"Bottom Pane")),e.default.createElement("div",{style:{flex:1}},"Right Pane")),e.default.createElement(t.default,{disable:[4,5],style:{height:100,border:"1px solid #d5d5d5",borderRadius:3,marginTop:10}},e.default.createElement("div",{style:{maxWidth:50,backgroundColor:"#eaeaea"}},"Pane 1"),e.default.createElement("div",{style:{maxWidth:60}},"Pane 2"),e.default.createElement("div",null,"Pane 3"),e.default.createElement("div",null,"Pane 4"),e.default.createElement("div",{style:{flex:1}},"Pane 5")))}}(),324: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=a(n(8133)),i=a(n(2271)),r=n(2814);function a(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function l(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){d(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 d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e,t){if(n=e,!(null!=(i=t)&&"undefined"!==typeof Symbol&&i[Symbol.hasInstance]?i[Symbol.hasInstance](n):n instanceof i))throw new TypeError("Cannot call a class as a function");var n,i}function s(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function c(e,t){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},c(e,t)}function f(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,i=m(e);if(t){var r=m(this).constructor;n=Reflect.construct(i,arguments,r)}else n=i.apply(this,arguments);return p(this,n)}}function p(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 m(e){return m=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},m(e)}return function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&c(e,t)}(p,e);var n,a,o,d=f(p);function p(e){var t;return u(this,p),(t=d.call(this,e)).state={width:210},t}return n=p,(a=[{key:"onClick",value:function(){this.setState({width:0===this.state.width?210:0})}},{key:"render",value:function(){var e={};return 0===this.state.width?e.width="0%":e.width=this.state.width,t.default.createElement(t.default.Fragment,null,t.default.createElement("div",{style:{marginBottom:10}},t.default.createElement(r.Button,{type:"primary",onClick:this.onClick.bind(this)},0===this.state.width?"\u9690\u85cf\u83dc\u5355":"\u5c55\u793a\u83dc\u5355")),t.default.createElement(i.default,{lineBar:!0,visiable:0!==this.state.width,style:{border:"1px solid #d5d5d5",borderRadius:3}},t.default.createElement("div",{style:l(l({},e),{},{overflow:"hidden"})},t.default.createElement(r.Menu,null,t.default.createElement(r.Menu.Item,{icon:"heart-on",text:"\u53e6\u5b58\u4e3a",active:!0}),t.default.createElement(r.Menu.Item,{icon:"appstore",text:"\u5e94\u7528\u5546\u57ce"}),t.default.createElement(r.Menu.Item,{icon:"bar-chart",text:"\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa"}),t.default.createElement(r.Menu.Item,{icon:"setting",text:"\u504f\u597d\u8bbe\u7f6e"}),t.default.createElement(r.Menu.Divider,null),t.default.createElement(r.Menu.Item,{icon:"map",text:"\u8c37\u6b4c\u5730\u56fe"}))),t.default.createElement("div",{style:{flex:1,minWidth:30}},"Right Pane")))}}])&&s(n.prototype,a),o&&s(n,o),Object.defineProperty(n,"prototype",{writable:!1}),p}(t.default.Component)}(),378:function(){var e=r(n(8133)),t=r(n(2271)),i=["onMouseDown"];function r(e){return e&&e.__esModule?e:{default:e}}function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},a.apply(this,arguments)}function o(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},a=Object.keys(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}return function(){return e.default.createElement("div",null,e.default.createElement(t.default,{renderBar:function(t){var n=t.onMouseDown,r=o(t,i);return e.default.createElement("div",a({},r,{style:{boxShadow:"none",background:"transparent"}}),e.default.createElement("div",{onMouseDown:n,style:{backgroundColor:"#ff000057",boxShadow:"none"}}))},style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",{style:{minWidth:60}},"test"),e.default.createElement("div",{style:{minWidth:80,flex:1}},"Right Pane")))}}()},data:{32:{name:32,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\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(_reactSplit["default"], {\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      width: \'20%\',\n      minWidth: 30\n    }\n  }, /*#__PURE__*/_react["default"].createElement("iframe", {\n    srcDoc: "<div>test</div>",\n    style: {\n      width: \'100%\',\n      height: \'100%\'\n    },\n    title: "Code Preview",\n    sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts"\n  })), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      width: \'80%\',\n      minWidth: 100\n    }\n  }, "Right Pane")), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minWidth: 60\n    }\n  }, "test"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minWidth: 80,\n      flex: 1\n    }\n  }, "Right Pane")));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div style={{ width: '20%', minWidth: 30 }}>\n        <iframe\n          srcDoc=\"<div>test</div>\"\n          style={{ width: '100%', height: '100%' }}\n          title=\"Code Preview\"\n          sandbox=\"allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts\"\n        />\n      </div>\n      <div style={{ width: '80%', minWidth: 100 }}>\n        Right Pane\n      </div>\n    </Split>\n    <Split\n      style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}\n    >\n      <div style={{ minWidth: 60 }}>\n        test\n      </div>\n      <div  style={{ minWidth: 80, flex: 1 }}>\n        Right Pane\n      </div>\n    </Split>\n  </div>\n);\nexport default Demo"},70:{name:70,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\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(_reactSplit["default"], {\n    mode: "vertical",\n    visiable: false\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minHeight: 45,\n      background: \'#dcdcdc\'\n    }\n  }, "Header"), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    visiable: false\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minWidth: 200,\n      maxWidth: 200,\n      minHeight: 120,\n      background: \'#b5b5b5\'\n    }\n  }, "Sider"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      width: \'100%\',\n      background: \'#ececec\'\n    }\n  }, "Content")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minHeight: 45,\n      background: \'#dcdcdc\'\n    }\n  }, "Footer")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: 20\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    visiable: false\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minWidth: 200,\n      maxWidth: 200,\n      minHeight: 85,\n      background: \'#a9a9a9\'\n    }\n  }, "Sider"), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    mode: "vertical",\n    visiable: false,\n    style: {\n      width: \'100%\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minHeight: 45,\n      background: \'#dcdcdc\'\n    }\n  }, "Header"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minHeight: 85,\n      background: \'#b5b5b5\'\n    }\n  }, "Content"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minHeight: 45,\n      background: \'#dcdcdc\'\n    }\n  }, "Footer"))));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split mode=\"vertical\" visiable={false}>\n      <div style={{ minHeight: 45, background: '#dcdcdc' }}>\n        Header\n      </div>\n      <Split visiable={false}>\n        <div style={{ minWidth: 200, maxWidth: 200, minHeight: 120, background: '#b5b5b5' }}>\n          Sider\n        </div>\n        <div style={{ width: '100%', background: '#ececec' }}>\n          Content\n        </div>\n      </Split>\n      <div style={{ minHeight: 45, background: '#dcdcdc' }}>\n        Footer\n      </div>\n    </Split>\n    <div style={{ height: 20 }}></div>\n    <Split visiable={false}>\n      <div style={{ minWidth: 200, maxWidth: 200, minHeight: 85, background: '#a9a9a9' }}>\n        Sider\n      </div>\n      <Split mode=\"vertical\" visiable={false} style={{ width: '100%' }}>\n        <div style={{ minHeight: 45, background: '#dcdcdc' }}>\n          Header\n        </div>\n        <div style={{ minHeight: 85, background: '#b5b5b5' }}>\n          Content\n        </div>\n        <div style={{ minHeight: 45, background: '#dcdcdc' }}>\n          Footer\n        </div>\n      </Split>\n    </Split>\n  </div>\n);\nexport default Demo\n"},117:{name:117,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", null, "Left Pane"), /*#__PURE__*/_react["default"].createElement("div", null, "Center Pane"), /*#__PURE__*/_react["default"].createElement("div", null, "Center Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane"));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n    <div>\n      Left Pane\n    </div>\n    <div>\n      Center Pane\n    </div>\n    <div>\n      Center Pane\n    </div>\n    <div style={{ flex: 1 }}>\n      Right Pane\n    </div>\n  </Split>\n);\nexport default Demo\n"},143:{name:143,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\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(_reactSplit["default"], {\n    lineBar: true,\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", null, "Left Pane"), /*#__PURE__*/_react["default"].createElement("div", null, "Center Pane"), /*#__PURE__*/_react["default"].createElement("div", null, "Center Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane")), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    mode: "vertical",\n    lineBar: true,\n    style: {\n      height: 210,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3,\n      marginTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'33.3%\'\n    }\n  }, "Left Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'33.3%\'\n    }\n  }, "Center Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane")));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split lineBar style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div>\n        Left Pane\n      </div>\n      <div>\n        Center Pane\n      </div>\n      <div>\n        Center Pane\n      </div>\n      <div style={{ flex: 1 }}>\n        Right Pane\n      </div>\n    </Split>\n    <Split mode=\"vertical\" lineBar style={{ height: 210, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>\n      <div style={{ height: '33.3%' }}>\n        Left Pane\n      </div>\n      <div style={{ height: '33.3%' }}>\n        Center Pane\n      </div>\n      <div style={{ flex: 1 }}>\n        Right Pane\n      </div>\n    </Split>\n  </div>\n);\nexport default Demo\n;"},182:{name:182,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    mode: "vertical",\n    style: {\n      height: 200,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'50%\'\n    }\n  }, "Top Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'50%\'\n    }\n  }, "Bottom Pane"));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <Split mode=\"vertical\" style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n    <div style={{ height: '50%' }}>\n      Top Pane\n    </div>\n    <div style={{ height: '50%' }}>\n      Bottom Pane\n    </div>\n  </Split>\n);\nexport default Demo\n"},202:{name:202,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    style: {\n      height: 200,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    mode: "vertical"\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'50%\'\n    }\n  }, "Top Pane"), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    style: {\n      height: \'50%\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", null, "Left Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane"))), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane"));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <Split style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n    <Split mode=\"vertical\">\n      <div style={{ height: '50%' }}>\n        Top Pane\n      </div>\n      <Split style={{ height: '50%' }}>\n        <div>\n          Left Pane\n        </div>\n        <div style={{ flex: 1 }}>\n          Right Pane\n        </div>\n      </Split>\n    </Split>\n    <div style={{ flex: 1 }}>\n      Right Pane\n    </div>\n  </Split>\n);\nexport default Demo\n"},234:{name:234,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\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(_reactSplit["default"], {\n    visiable: false,\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      maxWidth: 100,\n      backgroundColor: \'#eaeaea\'\n    }\n  }, "Left Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane")), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    visiable: [4, 5],\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3,\n      marginTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      maxWidth: 50,\n      backgroundColor: \'#eaeaea\'\n    }\n  }, "Pane 1"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      maxWidth: 60\n    }\n  }, "Pane 2"), /*#__PURE__*/_react["default"].createElement("div", null, "Pane 3"), /*#__PURE__*/_react["default"].createElement("div", null, "Pane 4"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Pane 5")));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split visiable={false} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>\n        Left Pane\n      </div>\n      <div style={{ flex: 1 }}>\n        Right Pane\n      </div>\n    </Split>\n    <Split visiable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>\n      <div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>\n        Pane 1\n      </div>\n      <div style={{ maxWidth: 60 }}>\n        Pane 2\n      </div>\n      <div>\n        Pane 3\n      </div>\n      <div>\n        Pane 4\n      </div>\n      <div style={{ flex: 1 }}>\n        Pane 5\n      </div>\n    </Split>\n  </div>\n);\nexport default Demo\n"},275:{name:275,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\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(_reactSplit["default"], {\n    disable: true,\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      maxWidth: 100,\n      backgroundColor: \'#eaeaea\'\n    }\n  }, "Left Pane"), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    disable: true,\n    mode: "vertical"\n  }, /*#__PURE__*/_react["default"].createElement("div", null, "Top Pane"), /*#__PURE__*/_react["default"].createElement("div", null, "Bottom Pane")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane")), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    disable: [4, 5],\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3,\n      marginTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      maxWidth: 50,\n      backgroundColor: \'#eaeaea\'\n    }\n  }, "Pane 1"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      maxWidth: 60\n    }\n  }, "Pane 2"), /*#__PURE__*/_react["default"].createElement("div", null, "Pane 3"), /*#__PURE__*/_react["default"].createElement("div", null, "Pane 4"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Pane 5")));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split disable style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>\n        Left Pane\n      </div>\n      <Split disable mode=\"vertical\">\n        <div>\n          Top Pane\n        </div>\n        <div>\n          Bottom Pane\n        </div>\n      </Split>\n      <div style={{ flex: 1 }}>\n        Right Pane\n      </div>\n    </Split>\n    <Split disable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>\n      <div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>\n        Pane 1\n      </div>\n      <div style={{ maxWidth: 60 }}>\n        Pane 2\n      </div>\n      <div>\n        Pane 3\n      </div>\n      <div>\n        Pane 4\n      </div>\n      <div style={{ flex: 1 }}>\n        Pane 5\n      </div>\n    </Split>\n  </div>\n);\nexport default Demo\n"},324:{name:324,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 _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\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\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 Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  var _super = _createSuper(Demo);\n\n  function Demo(props) {\n    var _this;\n\n    _classCallCheck(this, Demo);\n\n    _this = _super.call(this, props);\n    _this.state = {\n      width: 210\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: "onClick",\n    value: function onClick() {\n      this.setState({\n        width: this.state.width === 0 ? 210 : 0\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      var styl = {};\n\n      if (this.state.width === 0) {\n        styl.width = "0%";\n      } else {\n        styl.width = this.state.width;\n      }\n\n      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {\n        style: {\n          marginBottom: 10\n        }\n      }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n        type: "primary",\n        onClick: this.onClick.bind(this)\n      }, this.state.width === 0 ? \'\u9690\u85cf\u83dc\u5355\' : \'\u5c55\u793a\u83dc\u5355\')), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n        lineBar: true,\n        visiable: this.state.width !== 0,\n        style: {\n          border: \'1px solid #d5d5d5\',\n          borderRadius: 3\n        }\n      }, /*#__PURE__*/_react["default"].createElement("div", {\n        style: _objectSpread(_objectSpread({}, styl), {}, {\n          overflow: \'hidden\'\n        })\n      }, /*#__PURE__*/_react["default"].createElement(_uiw.Menu, null, /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n        icon: "heart-on",\n        text: "\\u53E6\\u5B58\\u4E3A",\n        active: true\n      }), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n        icon: "appstore",\n        text: "\\u5E94\\u7528\\u5546\\u57CE"\n      }), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n        icon: "bar-chart",\n        text: "\\u6708\\u7EDF\\u8BA1\\u62A5\\u8868\\u5BFC\\u51FA"\n      }), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n        icon: "setting",\n        text: "\\u504F\\u597D\\u8BBE\\u7F6E"\n      }), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n        icon: "map",\n        text: "\\u8C37\\u6B4C\\u5730\\u56FE"\n      }))), /*#__PURE__*/_react["default"].createElement("div", {\n        style: {\n          flex: 1,\n          minWidth: 30\n        }\n      }, "Right Pane")));\n    }\n  }]);\n\n  return Demo;\n}(_react["default"].Component);\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport Split from \'@uiw/react-split\';\nimport { Menu, Button } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      width: 210,\n    };\n  }\n  onClick() {\n    this.setState({\n      width: this.state.width === 0 ? 210 : 0,\n    });\n  }\n  render() {\n    const styl = {};\n    if (this.state.width === 0) {\n      styl.width = `0%`;\n    } else {\n      styl.width = this.state.width;\n    }\n    return (\n      <>\n        <div style={{ marginBottom: 10 }}>\n          <Button type="primary" onClick={this.onClick.bind(this)}>{this.state.width === 0 ? \'\u9690\u85cf\u83dc\u5355\' : \'\u5c55\u793a\u83dc\u5355\'}</Button>\n        </div>\n        <Split lineBar visiable={this.state.width !== 0} style={{ border: \'1px solid #d5d5d5\', borderRadius: 3 }}>\n          <div style={{ ...styl, overflow: \'hidden\' }}>\n            <Menu>\n              <Menu.Item icon="heart-on" text="\u53e6\u5b58\u4e3a" active />\n              <Menu.Item icon="appstore" text="\u5e94\u7528\u5546\u57ce" />\n              <Menu.Item icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" />\n              <Menu.Item icon="setting" text="\u504f\u597d\u8bbe\u7f6e" />\n              <Menu.Divider />\n              <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n            </Menu>\n          </div>\n          <div style={{ flex: 1, minWidth: 30 }}>\n            Right Pane\n          </div>\n        </Split>\n      </>\n    )\n  }\n}\nexport default Demo\n'},378:{name:378,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\n\nvar _excluded = ["onMouseDown"];\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    renderBar: function renderBar(_ref) {\n      var onMouseDown = _ref.onMouseDown,\n          props = _objectWithoutProperties(_ref, _excluded);\n\n      return /*#__PURE__*/_react["default"].createElement("div", _extends({}, props, {\n        style: {\n          boxShadow: \'none\',\n          background: \'transparent\'\n        }\n      }), /*#__PURE__*/_react["default"].createElement("div", {\n        onMouseDown: onMouseDown,\n        style: {\n          backgroundColor: \'#ff000057\',\n          boxShadow: \'none\'\n        }\n      }));\n    },\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minWidth: 60\n    }\n  }, "test"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minWidth: 80,\n      flex: 1\n    }\n  }, "Right Pane")));\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split\n      renderBar={({ onMouseDown, ...props }) => {\n        return (\n          <div {...props} style={{ boxShadow: 'none', background: 'transparent' }}>\n            <div onMouseDown={onMouseDown} style={{ backgroundColor: '#ff000057', boxShadow: 'none' }} />\n          </div>\n        );\n      }}\n      style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}\n    >\n      <div style={{ minWidth: 60 }}>\n        test\n      </div>\n      <div style={{ minWidth: 80, flex: 1 }}>\n        Right Pane\n      </div>\n    </Split>\n  </div>\n);\nexport default Demo"}},source:"Split \u9762\u677f\u5206\u5272\n===\n\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-split.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-split)\n[![Build & Deploy](https://github.com/uiwjs/react-split/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-split/actions/workflows/ci.yml)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-split/file/README.md)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-split.svg)](https://www.npmjs.com/package/@uiw/react-split)\n[![Coverage Status](https://uiwjs.github.io/react-split/badges.svg)](https://uiwjs.github.io/react-split/coverage/lcov-report/)\n[![Open in Gitpod](https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod)](https://gitpod.io/#https://github.com/uiwjs/react-split)\n[![Repo Dependents](https://badgen.net/github/dependents-repo/uiwjs/react-split)](https://github.com/uiwjs/react-split/network/dependents)\n\nA piece of content can be divided into areas that can be dragged to adjust the width or height.\n\n```jsx\nimport { Split } from 'uiw';\n```\n\n`@uiw/react-split` extracted from the component library `uiw` can be used alone.\n\n```jsx\nimport Split from '@uiw/react-split';\n```\n\n### Basic usage\n\n> ~~By setting the `minWidth` style of the child node, you can set the minimum drag width value. By setting the child node style `flexBasis` style, you can set the proportion width of the default split content. ~~\n\n- Fixed initial width or height, which can be calculated by setting the child node, style `width: '80%'` to 100% width.\n- Drag to the minimum width, you can achieve the effect by setting the child node style `minWidth: 30`.\n- By default, the style `width` is not set, and a child node style needs to be set to `flex: 1` to adapt\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div style={{ width: '20%', minWidth: 30 }}>\n        <iframe\n          srcDoc=\"<div>test</div>\"\n          style={{ width: '100%', height: '100%' }}\n          title=\"Code Preview\"\n          sandbox=\"allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts\"\n        />\n      </div>\n      <div style={{ width: '80%', minWidth: 100 }}>\n        Right Pane\n      </div>\n    </Split>\n    <Split\n      style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}\n    >\n      <div style={{ minWidth: 60 }}>\n        test\n      </div>\n      <div  style={{ minWidth: 80, flex: 1 }}>\n        Right Pane\n      </div>\n    </Split>\n  </div>\n);\nexport default Demo\n```\n\n### Available for layout\n\nSetting `visiable={false}` disables the drag bar, which can be used for layout.\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split mode=\"vertical\" visiable={false}>\n      <div style={{ minHeight: 45, background: '#dcdcdc' }}>\n        Header\n      </div>\n      <Split visiable={false}>\n        <div style={{ minWidth: 200, maxWidth: 200, minHeight: 120, background: '#b5b5b5' }}>\n          Sider\n        </div>\n        <div style={{ width: '100%', background: '#ececec' }}>\n          Content\n        </div>\n      </Split>\n      <div style={{ minHeight: 45, background: '#dcdcdc' }}>\n        Footer\n      </div>\n    </Split>\n    <div style={{ height: 20 }}></div>\n    <Split visiable={false}>\n      <div style={{ minWidth: 200, maxWidth: 200, minHeight: 85, background: '#a9a9a9' }}>\n        Sider\n      </div>\n      <Split mode=\"vertical\" visiable={false} style={{ width: '100%' }}>\n        <div style={{ minHeight: 45, background: '#dcdcdc' }}>\n          Header\n        </div>\n        <div style={{ minHeight: 85, background: '#b5b5b5' }}>\n          Content\n        </div>\n        <div style={{ minHeight: 45, background: '#dcdcdc' }}>\n          Footer\n        </div>\n      </Split>\n    </Split>\n  </div>\n);\nexport default Demo\n\n```\n\n### multi-column split\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n    <div>\n      Left Pane\n    </div>\n    <div>\n      Center Pane\n    </div>\n    <div>\n      Center Pane\n    </div>\n    <div style={{ flex: 1 }}>\n      Right Pane\n    </div>\n  </Split>\n);\nexport default Demo\n\n```\n\n### line drag\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split lineBar style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div>\n        Left Pane\n      </div>\n      <div>\n        Center Pane\n      </div>\n      <div>\n        Center Pane\n      </div>\n      <div style={{ flex: 1 }}>\n        Right Pane\n      </div>\n    </Split>\n    <Split mode=\"vertical\" lineBar style={{ height: 210, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>\n      <div style={{ height: '33.3%' }}>\n        Left Pane\n      </div>\n      <div style={{ height: '33.3%' }}>\n        Center Pane\n      </div>\n      <div style={{ flex: 1 }}>\n        Right Pane\n      </div>\n    </Split>\n  </div>\n);\nexport default Demo\n;\n```\n\n### vertical split\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <Split mode=\"vertical\" style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n    <div style={{ height: '50%' }}>\n      Top Pane\n    </div>\n    <div style={{ height: '50%' }}>\n      Bottom Pane\n    </div>\n  </Split>\n);\nexport default Demo\n\n```\n\n### nested use\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <Split style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n    <Split mode=\"vertical\">\n      <div style={{ height: '50%' }}>\n        Top Pane\n      </div>\n      <Split style={{ height: '50%' }}>\n        <div>\n          Left Pane\n        </div>\n        <div style={{ flex: 1 }}>\n          Right Pane\n        </div>\n      </Split>\n    </Split>\n    <div style={{ flex: 1 }}>\n      Right Pane\n    </div>\n  </Split>\n);\nexport default Demo\n\n```\n\n### Drag tool not showing\n\nThe following example sets whether the drag tool is visible by setting the value of `visiable`.\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split visiable={false} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>\n        Left Pane\n      </div>\n      <div style={{ flex: 1 }}>\n        Right Pane\n      </div>\n    </Split>\n    <Split visiable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>\n      <div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>\n        Pane 1\n      </div>\n      <div style={{ maxWidth: 60 }}>\n        Pane 2\n      </div>\n      <div>\n        Pane 3\n      </div>\n      <div>\n        Pane 4\n      </div>\n      <div style={{ flex: 1 }}>\n        Pane 5\n      </div>\n    </Split>\n  </div>\n);\nexport default Demo\n\n```\n\n### Disable drag and drop\n\nDisable drag tool dragging by setting the value of `disable`.\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split disable style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>\n        Left Pane\n      </div>\n      <Split disable mode=\"vertical\">\n        <div>\n          Top Pane\n        </div>\n        <div>\n          Bottom Pane\n        </div>\n      </Split>\n      <div style={{ flex: 1 }}>\n        Right Pane\n      </div>\n    </Split>\n    <Split disable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>\n      <div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>\n        Pane 1\n      </div>\n      <div style={{ maxWidth: 60 }}>\n        Pane 2\n      </div>\n      <div>\n        Pane 3\n      </div>\n      <div>\n        Pane 4\n      </div>\n      <div style={{ flex: 1 }}>\n        Pane 5\n      </div>\n    </Split>\n  </div>\n);\nexport default Demo\n\n```\n\n### drawer\n\nDraggable left column width.\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\nimport { Menu, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      width: 210,\n    };\n  }\n  onClick() {\n    this.setState({\n      width: this.state.width === 0 ? 210 : 0,\n    });\n  }\n  render() {\n    const styl = {};\n    if (this.state.width === 0) {\n      styl.width = `0%`;\n    } else {\n      styl.width = this.state.width;\n    }\n    return (\n      <>\n        <div style={{ marginBottom: 10 }}>\n          <Button type=\"primary\" onClick={this.onClick.bind(this)}>{this.state.width === 0 ? '\u9690\u85cf\u83dc\u5355' : '\u5c55\u793a\u83dc\u5355'}</Button>\n        </div>\n        <Split lineBar visiable={this.state.width !== 0} style={{ border: '1px solid #d5d5d5', borderRadius: 3 }}>\n          <div style={{ ...styl, overflow: 'hidden' }}>\n            <Menu>\n              <Menu.Item icon=\"heart-on\" text=\"\u53e6\u5b58\u4e3a\" active />\n              <Menu.Item icon=\"appstore\" text=\"\u5e94\u7528\u5546\u57ce\" />\n              <Menu.Item icon=\"bar-chart\" text=\"\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa\" />\n              <Menu.Item icon=\"setting\" text=\"\u504f\u597d\u8bbe\u7f6e\" />\n              <Menu.Divider />\n              <Menu.Item icon=\"map\" text=\"\u8c37\u6b4c\u5730\u56fe\" />\n            </Menu>\n          </div>\n          <div style={{ flex: 1, minWidth: 30 }}>\n            Right Pane\n          </div>\n        </Split>\n      </>\n    )\n  }\n}\nexport default Demo\n\n```\n\n### Support custom drag and drop toolbar\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split\n      renderBar={({ onMouseDown, ...props }) => {\n        return (\n          <div {...props} style={{ boxShadow: 'none', background: 'transparent' }}>\n            <div onMouseDown={onMouseDown} style={{ backgroundColor: '#ff000057', boxShadow: 'none' }} />\n          </div>\n        );\n      }}\n      style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}\n    >\n      <div style={{ minWidth: 60 }}>\n        test\n      </div>\n      <div style={{ minWidth: 80, flex: 1 }}>\n        Right Pane\n      </div>\n    </Split>\n  </div>\n);\nexport default Demo\n```\n\n## Props\n\n```ts\nexport interface SplitProps extends  Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> {\n  style?: React.CSSProperties;\n  className?: string;\n  prefixCls?: string;\n  /**\n   * Drag width/height change callback function,\n   * the width or height is determined according to the mode parameter\n   */\n  onDragging?: (preSize: number, nextSize: number, paneNumber: number) => void;\n  /** Callback function for dragging end */\n  onDragEnd?: (preSize: number, nextSize: number, paneNumber: number) => void;\n  /** Support custom drag and drop toolbar */\n  renderBar?: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;\n  /** Set the drag and drop toolbar as a line style. */\n  lineBar?: boolean;\n  /** Set the dragged toolbar, whether it is visible or not */\n  visiable?: boolean | number[];\n  /**\n   * Set the drag and drop toolbar, disable\n   */\n  disable?: boolean | number[];\n  /**\n   * type, optional `horizontal` or `vertical`\n   */\n  mode?: 'horizontal' | 'vertical';\n}\n```\n\n## Development\n\nRuns the project in development mode.  \n\n```bash\n# Step 1, run first, listen to the component compile and output the .js file\nnpm run watch\nnpm run build\n# Step 2, development mode, listen to compile preview website instance\nnpm run doc\n```\n\n**production**\n\nBuilds the app for production to the build folder.\n\n```bash\nnpm run released\n```\n\nThe build is minified and the filenames include the hashes.\nYour app is ready to be deployed!\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n<a href=\"https://github.com/uiwjs/react-split/graphs/contributors\">\n  <img src=\"https://uiwjs.github.io/react-split/CONTRIBUTORS.svg\" />\n</a>\n\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n### License\n\nLicensed under the MIT License.\n"}}}]);
-//# sourceMappingURL=vendors-uiwjs.3091e433.js.map