-
Notifications
You must be signed in to change notification settings - Fork 1
/
3854-93cf8fb0f26b594075a2.js
1 lines (1 loc) · 60 KB
/
3854-93cf8fb0f26b594075a2.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[3854],{93854:(n,a,s)=>{"use strict";s.r(a),s.d(a,{default:()=>x});var t=s(73450),p=s(73118),e=s(27378),o=s(57318),c=s(3454),l=s(38098),u=s(71457),i=s(82285),k=s(24246);function r(n,a){var s=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);a&&(t=t.filter((function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable}))),s.push.apply(s,t)}return s}function d(n){for(var a=1;a<arguments.length;a++){var s=null!=arguments[a]?arguments[a]:{};a%2?r(Object(s),!0).forEach((function(a){(0,t.Z)(n,a,s[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(s)):r(Object(s)).forEach((function(a){Object.defineProperty(n,a,Object.getOwnPropertyDescriptor(s,a))}))}return n}var m=function(){function n(){var n=(0,e.useState)(!1),a=(0,p.Z)(n,2),s=a[0],t=a[1],o=()=>{t(!1)};return(0,k.jsxs)(k.Fragment,{children:[(0,k.jsx)(c.z,{onClick:()=>t(!0),type:"primary",children:"开启"}),(0,k.jsxs)(l.d,{title:"抽屉名称",visible:s,onClose:()=>t(!1),maskClosable:!0,footer:(0,k.jsxs)("div",{className:"zent-drawer-demo-drawer-footer",children:[(0,k.jsx)(c.z,{onClick:o,children:"关闭"}),(0,k.jsx)(c.z,{type:"primary",onClick:o,children:"确定"})]}),children:[(0,k.jsx)(c.z,{style:{margin:"10px 20px"},onClick:()=>t(!1),children:"关闭"}),new Array(30).fill().map(((n,a)=>(0,k.jsxs)("div",{style:{padding:"10px"},children:["抽屉内容",a]},a)))]})]})}return(0,k.jsx)(n,{})},g=function(){function n(){var n=(0,e.useState)(!1),a=(0,p.Z)(n,2),s=a[0],t=a[1],o=(0,e.useState)(),u=(0,p.Z)(o,2),i=u[0],r=u[1];return(0,k.jsxs)(k.Fragment,{children:[(0,k.jsx)(c.z,{onClick:()=>{r("default"),t(!0)},type:"primary",children:"Open Default Size（728px）"}),(0,k.jsx)(c.z,{onClick:()=>{r("small"),t(!0)},type:"primary",children:"Open Small Size（364px）"}),(0,k.jsx)(l.d,{visible:s,size:i,onClose:()=>t(!1),title:"抽屉标题",footer:(0,k.jsxs)("div",{className:"zent-drawer-demo__custom-width__drawer-footer",children:[(0,k.jsx)(c.z,{children:"次要按钮"}),(0,k.jsx)(c.z,{type:"primary",children:"主要按钮"})]})})]})}return(0,k.jsx)(n,{})},v=function(){var n=u.Y.Group;function a(){var a=(0,e.useState)(!1),s=(0,p.Z)(a,2),t=s[0],o=s[1],i=(0,e.useState)("top"),r=(0,p.Z)(i,2),d=r[0],m=r[1];return(0,k.jsxs)(k.Fragment,{children:[(0,k.jsxs)(n,{onChange:n=>m(n.target.value),value:d,children:[(0,k.jsx)(u.Y,{value:"top",children:"top"}),(0,k.jsx)(u.Y,{value:"right",children:"right"}),(0,k.jsx)(u.Y,{value:"bottom",children:"bottom"}),(0,k.jsx)(u.Y,{value:"left",children:"left"})]}),(0,k.jsx)(c.z,{onClick:()=>o(!0),type:"primary",style:{marginLeft:"20px"},children:"Open"}),(0,k.jsxs)(l.d,{visible:t,onClose:()=>o(!1),placement:d,maskClosable:!0,children:[(0,k.jsx)("div",{children:"Drawer Content ..."}),(0,k.jsx)("div",{children:"Drawer Content ..."}),(0,k.jsx)("div",{children:"Drawer Content ..."})]})]})}return(0,k.jsx)(a,{})},h=function(){function n(){var n=(0,e.useState)(!1),a=(0,p.Z)(n,2),s=a[0],t=a[1],o=(0,e.useState)(!1),u=(0,p.Z)(o,2),r=u[0],d=u[1],m=(0,e.useState)(),g=(0,p.Z)(m,2),v=g[0],h=g[1];return(0,k.jsxs)(k.Fragment,{children:[(0,k.jsx)(c.z,{onClick:n=>{n.nativeEvent.stopImmediatePropagation(),t(!0),d(!r)},type:"primary",children:"Toggle Content"}),(0,k.jsxs)(l.d,{visible:s,onClose:()=>t(!1),mask:!1,children:[(0,k.jsx)(i.I,{value:v,onChange:n=>h(n.target.value),showClear:!0,width:200}),(0,k.jsx)(c.z,{style:{margin:"20px"},onClick:()=>t(!1),children:"close"}),(0,k.jsx)("div",{style:{fontSize:"50px",paddingLeft:"20px"},children:r?"111":"222"})]})]})}return(0,k.jsx)(n,{})};function f(n){return(0,k.jsx)(n.tag,d(d({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function y(n){return(0,k.jsx)(f,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function b(n){return(0,k.jsx)(f,{tag:"style",html:n.style})}function w(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),w(n.parentNode,a);return a}class j extends e.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{showCode:!1}),(0,t.Z)(this,"toggle",(()=>{this.setState({showCode:!this.state.showCode})}))}render(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,p=a.children;return(0,k.jsxs)("div",{className:"zandoc-react-demo",children:[(0,k.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,k.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,k.jsx)("div",{className:"zandoc-react-demo__title",children:(0,k.jsx)("p",{children:s||""})}),(0,k.jsx)("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})]}),n&&(0,k.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,k.jsx)(f,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class x extends e.Component{componentDidMount(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&(0,o.l)(document.documentElement,0,w(a,-9))}}render(){return e.createElement("div",{className:"zandoc-react-container"},e.createElement(b,{style:".zent-drawer-demo-drawer-footer {\n\t\ttext-align: right;\n padding-right: 16px;\n\t}\n\n.zent-drawer-demo__custom-width__drawer-footer {\n\t\tpadding-right: 16px;\n\t\ttext-align: right;\n\t}"}),e.createElement(y,{html:'<h2 class="anchor-heading"><a href="#drawer">¶</a><a href="javascript:void(0)" id="drawer" class="anchor-point"></a>Drawer</h2>\n<p>屏幕右侧滑出的模态面板；用于承载较大体量的详情或表单内容。</p>\n<h3 class="anchor-heading"><a href="#jian-yi">¶</a><a href="javascript:void(0)" id="jian-yi" class="anchor-point"></a>建议</h3>\n<ul>\n<li>当操作唤起的临时窗口信息量比较大，需要在纵向的信息上有比较高的扩展性时，可以使用抽屉。</li>\n</ul>\n<h3 class="anchor-heading"><a href="#zhu-yi">¶</a><a href="javascript:void(0)" id="zhu-yi" class="anchor-point"></a>注意</h3>\n<ul>\n<li>禁止在抽屉中使用单个按钮；</li>\n<li>禁止在抽屉中使用两个以上的主行动按钮。</li>\n</ul>\n<h3 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),e.createElement(j,{title:"基础用法",id:"Demobasic",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Drawer</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">SimpleDrawer</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>visible<span class="token punctuation">,</span> setVisible<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> <span class="token function-variable function">close</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n 开启\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Drawer</span></span>\n <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>抽屉名称<span class="token punctuation">"</span></span>\n <span class="token attr-name">visible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>visible<span class="token punctuation">}</span></span>\n <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">maskClosable</span>\n <span class="token attr-name">footer</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-drawer-demo-drawer-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>close<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>关闭<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>close<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n 确定\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>\n <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token string">\'10px 20px\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n 关闭\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token string">\'10px\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n 抽屉内容\n <span class="token punctuation">{</span>index<span class="token punctuation">}</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Drawer</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SimpleDrawer</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(m)),e.createElement(j,{title:"不同尺寸抽屉",id:"Democustomwidth",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Drawer</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Input</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">SimpleDrawer</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>visible<span class="token punctuation">,</span> setVisible<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>size<span class="token punctuation">,</span> setSize<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> <span class="token function-variable function">showDefaultDrawer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setSize</span><span class="token punctuation">(</span><span class="token string">\'default\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> <span class="token function-variable function">showSmallDrawer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setSize</span><span class="token punctuation">(</span><span class="token string">\'small\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>showDefaultDrawer<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token maybe-class-name">Open</span> <span class="token maybe-class-name">Default</span> <span class="token maybe-class-name">Size（728px）</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>showSmallDrawer<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token maybe-class-name">Open</span> <span class="token maybe-class-name">Small</span> <span class="token maybe-class-name">Size（364px）</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Drawer</span></span>\n <span class="token attr-name">visible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>visible<span class="token punctuation">}</span></span>\n <span class="token attr-name">size</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span>\n <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>抽屉标题<span class="token punctuation">"</span></span>\n <span class="token attr-name">footer</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-drawer-demo__custom-width__drawer-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>次要按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>主要按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SimpleDrawer</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(g)),e.createElement(y,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必填</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onClose</td>\n<td>关闭 Drawer 的回调</td>\n<td><code>e => void</code></td>\n<td><code>noop</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Drawer 是否可见</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>maskClosable</td>\n<td>点击遮罩触发\n<code>onClose</code></td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>closeOnESC</td>\n<td>按下 ESC 键时触发\n<code>onClose</code></td>\n<td><code>boolean</code></td>\n<td><code>true</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>mask</td>\n<td>是否显示遮罩</td>\n<td><code>boolean</code></td>\n<td><code>true</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>title</td>\n<td>标题</td>\n<td><code>ReactNode</code></td>\n<td><code>null</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>footer</td>\n<td>自定义底部内容</td>\n<td><code>ReactNode</code></td>\n<td><code>null</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>placement</td>\n<td>Drawer 的方向</td>\n<td><code>top</code>\n \n|\n \n<code>right</code>\n \n|\n \n<code>bottom</code>\n \n|\n \n<code>left</code></td>\n<td><code>right</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>width</td>\n<td>宽度，在 \n<code>placement</code>\n 为 \n<code>left</code>\n 或 \n<code>right</code>\n 时使用</td>\n<td><code>string</code>\n \n|\n \n<code>number</code></td>\n<td><code>45%</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>height</td>\n<td>宽度，在 \n<code>placement</code>\n 为 \n<code>top</code>\n 或 \n<code>bottom</code>\n 时使用</td>\n<td><code>string</code>\n \n|\n \n<code>number</code></td>\n<td><code>45%</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>className</td>\n<td>对话框外层容器的类名</td>\n<td><code>string</code></td>\n<td><code>\'\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>closeBtn</td>\n<td>自定义关闭按钮，为\n<code>false</code>\n会隐藏\n<code>closeBtn</code></td>\n<td><code>ReactNode</code></td>\n<td><code>true</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>size</td>\n<td>预设抽屉宽度，default 728px 和 small 364px</td>\n<td><code>\'default\'</code>\n|\n<code>\'small\'</code></td>\n<td></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<p>Drawer 当不设置<code>width</code>、 <code>size</code>字段时默认宽度为 45%，当同时设置时字段优先级：<code>width</code> > <code>size</code>。</p>\n<h4 class="anchor-heading"><a href="#yi-xia-gong-neng-xin-ban-she-ji-yu-yan-yi-fei-qi-jin-zuo-wei-lao-ban-shi-yong-de-can-kao">¶</a><a href="javascript:void(0)" id="yi-xia-gong-neng-xin-ban-she-ji-yu-yan-yi-fei-qi-jin-zuo-wei-lao-ban-shi-yong-de-can-kao" class="anchor-point"></a>以下功能新版设计语言已废弃，仅作为老版使用的参考</h4>'}),e.createElement(j,{title:"自定义位置",id:"Demoplacement",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Drawer</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Radio</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">RadioGroup</span> <span class="token operator">=</span> <span class="token maybe-class-name">Radio</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Group</span></span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">SimpleDrawer</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>visible<span class="token punctuation">,</span> setVisible<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>placement<span class="token punctuation">,</span> setPlacement<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">\'top\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RadioGroup</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">e</span> <span class="token arrow operator">=></span> <span class="token function">setPlacement</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>placement<span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>top<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>bottom<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RadioGroup</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>\n <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span>\n <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">marginLeft</span><span class="token operator">:</span> <span class="token string">\'20px\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token maybe-class-name">Open</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Drawer</span></span>\n <span class="token attr-name">visible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>visible<span class="token punctuation">}</span></span>\n <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">placement</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>placement<span class="token punctuation">}</span></span>\n <span class="token attr-name">maskClosable</span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token maybe-class-name">Drawer</span> <span class="token maybe-class-name">Content</span> <span class="token spread operator">...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token maybe-class-name">Drawer</span> <span class="token maybe-class-name">Content</span> <span class="token spread operator">...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token maybe-class-name">Drawer</span> <span class="token maybe-class-name">Content</span> <span class="token spread operator">...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Drawer</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SimpleDrawer</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(v)),e.createElement(j,{title:"无遮罩",id:"DemonoMask",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Drawer</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Input</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">SimpleDrawer</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>visible<span class="token punctuation">,</span> setVisible<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>content<span class="token punctuation">,</span> setContent<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>inputVal<span class="token punctuation">,</span> setInputVal<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>\n <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">e</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n e<span class="token punctuation">.</span><span class="token property-access">nativeEvent</span><span class="token punctuation">.</span><span class="token method function property-access">stopImmediatePropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 阻止原生click事件冒泡，让drawer不关闭的同时修改children</span>\n <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">setContent</span><span class="token punctuation">(</span><span class="token operator">!</span>content<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span>\n <span class="token punctuation">></span></span>\n <span class="token maybe-class-name">Toggle</span> <span class="token maybe-class-name">Content</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Drawer</span></span> <span class="token attr-name">visible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>visible<span class="token punctuation">}</span></span> <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">mask</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Input</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>inputVal<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">e</span> <span class="token arrow operator">=></span> <span class="token function">setInputVal</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">showClear</span>\n <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">200</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token string">\'20px\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n close\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">\'50px\'</span><span class="token punctuation">,</span> <span class="token literal-property property">paddingLeft</span><span class="token operator">:</span> <span class="token string">\'20px\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">{</span>content <span class="token operator">?</span> <span class="token string">\'111\'</span> <span class="token operator">:</span> <span class="token string">\'222\'</span><span class="token punctuation">}</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Drawer</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SimpleDrawer</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(h)))}}},38098:(n,a,s)=>{"use strict";s.d(a,{d:()=>b});var t=s(59312),p=s(24246),e=s(60042),o=s.n(e),c=s(53552),l=s(14623),u={left:{height:"100%",left:0,top:0},right:{height:"100%",right:0,top:0},top:{width:"100%",top:0,left:0},bottom:{width:"100%",bottom:0,left:0}},i=function(n){var a=n.mask,s=n.maskClosable,e=n.visible,o=n.onClose;return(0,p.jsx)(l.Z,(0,t.pi)({appear:!0,mountOnEnter:!0,unmountOnExit:!0,in:e&&a,timeout:300,classNames:"zent-drawer-transition__backdrop"},{children:(0,p.jsx)("div",{className:"zent-drawer-backdrop",onClick:function(){a&&s&&o()},"data-zv":"10.0.10"},void 0)}),void 0)},k=s(27378),r=s(31256),d=function(n){return(0,r.Z)(n)?null:(0,p.jsx)("div",(0,t.pi)({className:"zent-drawer-header","data-zv":"10.0.10"},{children:"number"==typeof n||"string"==typeof n?(0,p.jsx)("span",(0,t.pi)({className:"zent-drawer-header__title","data-zv":"10.0.10"},{children:n}),void 0):n}),void 0)},m=function(n){return(0,r.Z)(n)?null:(0,p.jsx)("div",(0,t.pi)({className:"zent-drawer-footer","data-zv":"10.0.10"},{children:n}),void 0)},g=s(27036),v=function(n,a){return(0,r.Z)(n)?null:(0,p.jsx)("div",(0,t.pi)({onClick:a,className:"zent-drawer-close","data-zv":"10.0.10"},{children:!0===n?(0,p.jsx)(g.Z,{type:"close"},void 0):n}),void 0)},h=s(49744),f=function(n){var a,s=n.mask,e=n.visible,c=n.title,i=n.children,r=n.footer,g=n.placement,f=n.closeBtn,y=n.onClose,b=n.onExited,w=(0,t._T)(n,["mask","visible","title","children","footer","placement","closeBtn","onClose","onExited"]),j="width"in w&&w.width,x="height"in w&&w.height,C=(0,k.useRef)(),z=(0,k.useRef)(),S=(0,k.useCallback)((function(){s||(C.current=(0,h.Oo)(document,"click",(function(n){var a,s=n.target;document.contains(s)&&!(null===(a=z.current)||void 0===a?void 0:a.contains(s))&&y()})))}),[y,s]),D=(0,k.useCallback)((function(){var n;s||null===(n=C.current)||void 0===n||n.call(C)}),[s]),O=(0,k.useMemo)((function(){var n=function(n){return"number"==typeof n?n+"px":n};return"left"===g||"right"===g?{width:n(j)}:{height:n(x)}}),[g,j,x]);return(0,p.jsx)(l.Z,(0,t.pi)({appear:!0,mountOnEnter:!0,unmountOnExit:!0,in:e,timeout:300,classNames:"zent-drawer-transition-"+g,onEntered:S,onExit:D,onExited:b},{children:(0,p.jsxs)("div",(0,t.pi)({ref:z,className:o()("zent-drawer-content",(a={},a["zent-drawer-content--transparent"]=!s,a)),style:(0,t.pi)((0,t.pi)({},u[g]),O),"data-zv":"10.0.10"},{children:[v(f,y),d(c),(0,p.jsx)("div",(0,t.pi)({className:"zent-drawer-body","data-zv":"10.0.10"},{children:i}),void 0),m(r)]}),void 0)}),void 0)},y={default:"728px",small:"364px"},b=function(n){var a,s=n.onClose,e=n.title,l=n.children,u=n.className,r=n.visible,d=n.maskClosable,m=n.closeOnESC,g=n.mask,v=n.footer,h=n.placement,b=n.closeBtn,w=n.size,j=(0,t._T)(n,["onClose","title","children","className","visible","maskClosable","closeOnESC","mask","footer","placement","closeBtn","size"]),x=y[w]||"45%";"width"in j&&(x=j.width);var C="height"in j?j.height:"45%",z=function(n){var a=(0,k.useState)(!1),s=a[0],t=a[1],p=(0,k.useState)(n),e=p[0],o=p[1],c=(0,k.useCallback)((function(){t(!1)}),[]);return e===n||(t(!n),o(n)),{exiting:s,onExited:c}}(r),S=z.exiting,D=z.onExited;return(0,p.jsx)(c.ZP,(0,t.pi)({visible:r||S,onClose:s,closeOnESC:m,blockPageScroll:g},{children:(0,p.jsxs)("div",(0,t.pi)({className:o()((a={},a[u]=!!u,a)),"data-zv":"10.0.10"},{children:[(0,p.jsx)(i,{mask:g,maskClosable:d,visible:r,onClose:s},void 0),(0,p.jsx)(f,(0,t.pi)({mask:g,visible:r,title:e,footer:v,onClose:s,onExited:D,placement:h,width:x,height:C,closeBtn:b},{children:l}),void 0)]}),void 0)}),void 0)};b.defaultProps={className:"",visible:!1,maskClosable:!1,closeOnESC:!0,mask:!0,footer:null,title:null,onClose:function(){},placement:"right",closeBtn:!0}},4246:(n,a,s)=>{"use strict";s.d(a,{E:()=>i});var t=s(59312),p=s(24246),e=s(60042),o=s.n(e),c=s(27378),l=s(57961),u=s(1348);function i(n){var a=(0,c.useContext)(u.d),s=n.value,e=n.disabled,i=void 0===e?a.value:e,k=n.readOnly,r=void 0!==k&&k,d=n.isValueEqual,m=void 0===d?Object.is:d,g=n.className,v=n.style,h=n.children,f=n.onChange,y=(0,c.useMemo)((function(){return{value:s,disabled:i,readOnly:r,isValueEqual:m,onRadioChange:f}}),[s,i,r,m,f]);return(0,p.jsx)(l.Z.Provider,(0,t.pi)({value:y},{children:(0,p.jsx)("div",(0,t.pi)({className:o()("zent-radio-group",g),style:v,"data-zv":"10.0.10"},{children:h}),void 0)}),void 0)}a.Z=i},57961:(n,a,s)=>{"use strict";var t=(0,s(27378).createContext)(null);t.displayName="RadioGroupContext",a.Z=t},71457:(n,a,s)=>{"use strict";s.d(a,{Y:()=>m,Z:()=>g});var t=s(59312),p=s(24246),e=s(60042),o=s.n(e),c=s(1535),l=s(27378);function u(n,a){var s=(0,l.useRef)(a);s.current=a;var p=n&&n.onRadioChange;return(0,l.useCallback)((function(n){var a=function(n,a){var s=Object.create(n);return s.target=(0,t.pi)((0,t.pi)({},a),{type:"radio",checked:n.target.checked}),s}(n,s.current);if(p)p(a);else{var e=s.current.onChange;e&&e(a)}}),[p])}function i(n,a,s){var t=function(n,a,s){return"boolean"==typeof s.disabled?s.disabled:a&&"boolean"==typeof a.disabled?a.disabled:n.value}(n,a,s),p=function(n,a){return"boolean"==typeof a.readOnly?a.readOnly:!!n&&n.readOnly}(a,s);return{checked:a?a.isValueEqual(a.value,s.value):!!s.checked,disabled:t,readOnly:p}}var k=s(4246),r=s(1348),d=s(57961);function m(n){var a=n.className,s=n.style,e=n.children,k=(n.value,n.width),m=n.labelStyle,g=(n.onMouseEnter,n.onMouseLeave,(0,t._T)(n,["className","style","children","value","width","labelStyle","onMouseEnter","onMouseLeave"])),v=(0,l.useContext)(r.d),h=(0,l.useContext)(d.Z),f=i(v,h,n),y=f.checked,b=f.disabled,w=f.readOnly,j=u(h,n),x=o()(a,"zent-radio-wrap",{"zent-radio-checked":!!y,"zent-radio-disabled":b||w}),C=(0,c.Z)(k),z=(0,t.pi)((0,t.pi)({},s),C);return(0,p.jsxs)("label",(0,t.pi)({className:x,style:z,onMouseEnter:n.onMouseEnter,onMouseLeave:n.onMouseLeave,"data-zv":"10.0.10"},{children:[(0,p.jsxs)("span",(0,t.pi)({className:"zent-radio","data-zv":"10.0.10"},{children:[(0,p.jsx)("span",{className:"zent-radio-inner","data-zv":"10.0.10"},void 0),(0,p.jsx)("input",(0,t.pi)({},g,{type:"radio",checked:!!y,disabled:b,readOnly:w,onChange:j,"data-zv":"10.0.10"}),void 0)]}),void 0),void 0!==e&&(0,p.jsx)("span",(0,t.pi)({className:"zent-radio-label",style:m,"data-zv":"10.0.10"},{children:e}),void 0)]}),void 0)}m.Button=function(n){var a=n.className,s=n.style,e=n.children,k=(n.value,n.width),m=n.onMouseEnter,g=n.onMouseLeave,v=(0,t._T)(n,["className","style","children","value","width","onMouseEnter","onMouseLeave"]),h=(0,l.useContext)(r.d),f=(0,l.useContext)(d.Z);if(!f)throw new Error("Radio.Button must be nested within Radio.Group");var y=i(h,f,n),b=y.checked,w=y.disabled,j=y.readOnly,x=u(f,n),C=o()(a,"zent-radio-button",{"zent-radio-button--checked":!!b,"zent-radio-button--disabled":w||j}),z=(0,c.Z)(k),S=(0,t.pi)((0,t.pi)({},s),z);return(0,p.jsxs)("label",(0,t.pi)({className:C,style:S,onMouseEnter:m,onMouseLeave:g,"data-zv":"10.0.10"},{children:[(0,p.jsx)("input",(0,t.pi)({},v,{type:"radio",checked:!!b,disabled:w,readOnly:j,onChange:x,"data-zv":"10.0.10"}),void 0),(0,p.jsx)("span",(0,t.pi)({className:"zent-radio-button__content","data-zv":"10.0.10"},{children:e}),void 0)]}),void 0)},m.Group=k.Z;var g=m},1535:(n,a,s)=>{"use strict";function t(n){return"string"==typeof n||"number"==typeof n?{width:n}:{}}s.d(a,{Z:()=>t})},31256:(n,a,s)=>{"use strict";function t(n){return null==n}s.d(a,{Z:()=>t})}}]);