-
Notifications
You must be signed in to change notification settings - Fork 1
/
3533-067f6305d93007c59bd2.js
1 lines (1 loc) · 60.5 KB
/
3533-067f6305d93007c59bd2.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[3533],{93533:(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),r=s(24246);function k(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?k(Object(s),!0).forEach((function(a){(0,t.Z)(n,a,s[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(s)):k(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,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(c.z,{onClick:()=>t(!0),type:"primary",children:"Open"}),(0,r.jsxs)(l.d,{title:"drawer title",visible:s,onClose:()=>t(!1),maskClosable:!0,footer:(0,r.jsxs)("div",{className:"zent-drawer-demo-drawer-footer",children:[(0,r.jsx)(c.z,{onClick:o,children:"Close"}),(0,r.jsx)(c.z,{type:"primary",onClick:o,children:"Ok"})]}),children:[(0,r.jsx)(c.z,{style:{margin:"10px 20px"},onClick:()=>t(!1),children:"Close"}),new Array(30).fill().map(((n,a)=>(0,r.jsxs)("div",{style:{padding:"10px"},children:["drawer content",a]},a)))]})]})}return(0,r.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],k=u[1];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(c.z,{onClick:()=>{k("default"),t(!0)},type:"primary",children:"Open Default Size（728px）"}),(0,r.jsx)(c.z,{onClick:()=>{k("small"),t(!0)},type:"primary",children:"Open Small Size（364px）"}),(0,r.jsx)(l.d,{visible:s,size:i,onClose:()=>t(!1),title:"Drawer Title",footer:(0,r.jsxs)("div",{className:"zent-drawer-demo__custom-width__drawer-footer",children:[(0,r.jsx)(c.z,{children:"Secondary Button"}),(0,r.jsx)(c.z,{type:"primary",children:"Primary Button"})]})})]})}return(0,r.jsx)(n,{})},h=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"),k=(0,p.Z)(i,2),d=k[0],m=k[1];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n,{onChange:n=>m(n.target.value),value:d,children:[(0,r.jsx)(u.Y,{value:"top",children:"top"}),(0,r.jsx)(u.Y,{value:"right",children:"right"}),(0,r.jsx)(u.Y,{value:"bottom",children:"bottom"}),(0,r.jsx)(u.Y,{value:"left",children:"left"})]}),(0,r.jsx)(c.z,{onClick:()=>o(!0),type:"primary",style:{marginLeft:"20px"},children:"Open"}),(0,r.jsxs)(l.d,{visible:t,onClose:()=>o(!1),placement:d,maskClosable:!0,children:[(0,r.jsx)("div",{children:"Drawer Content ..."}),(0,r.jsx)("div",{children:"Drawer Content ..."}),(0,r.jsx)("div",{children:"Drawer Content ..."})]})]})}return(0,r.jsx)(a,{})},v=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),k=u[0],d=u[1],m=(0,e.useState)(),g=(0,p.Z)(m,2),h=g[0],v=g[1];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(c.z,{onClick:n=>{n.nativeEvent.stopImmediatePropagation(),t(!0),d(!k)},type:"primary",children:"Toggle Content"}),(0,r.jsxs)(l.d,{visible:s,onClose:()=>t(!1),mask:!1,children:[(0,r.jsx)(i.I,{value:h,onChange:n=>v(n.target.value),showClear:!0,width:200}),(0,r.jsx)(c.z,{style:{margin:"20px"},onClick:()=>t(!1),children:"close"}),(0,r.jsx)("div",{style:{fontSize:"50px",paddingLeft:"20px"},children:k?"111":"222"})]})]})}return(0,r.jsx)(n,{})};function f(n){return(0,r.jsx)(n.tag,d(d({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function y(n){return(0,r.jsx)(f,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function b(n){return(0,r.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,r.jsxs)("div",{className:"zandoc-react-demo",children:[(0,r.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,r.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,r.jsx)("div",{className:"zandoc-react-demo__title",children:(0,r.jsx)("p",{children:s||""})}),(0,r.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,r.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,r.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>The modal panel that slides out on the right side of the screen; Used to carry a large volume of details or form content.</p>\n<h3 class="anchor-heading"><a href="#suggestion">¶</a><a href="javascript:void(0)" id="suggestion" class="anchor-point"></a>Suggestion</h3>\n<ul>\n<li>The drawer can be used when the temporary window information evoked by the operation is large and high scalability of vertical information is required.</li>\n</ul>\n<h3 class="anchor-heading"><a href="#note">¶</a><a href="javascript:void(0)" id="note" class="anchor-point"></a>Note</h3>\n<ul>\n<li>Do not use a single button in the drawer;</li>\n<li>Do not use more than two main action buttons in the drawer;</li>\n</ul>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),e.createElement(j,{title:"Basic usage",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 <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">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer title<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 maybe-class-name">Close</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 <span class="token maybe-class-name">Ok</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>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 <span class="token maybe-class-name">Close</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 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 drawer content\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:"Drawers of different sizes",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>Drawer Title<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 maybe-class-name">Secondary</span> <span class="token maybe-class-name">Button</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 maybe-class-name">Primary</span> <span class="token maybe-class-name">Button</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>Specify a callback that will be called when a user clicks mask, close button or cancel button</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>Whether the Drawer dialog is visible or not</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>Clicking on the mask (area outside the Drawer) to trigger \n<code>onClose</code>\n or not</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>Whether support press esc to trigger \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>Whether to show mask or not</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>The title for Drawer</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>Custom footer for Drawer</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>The placement of the 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>Placement is left or right, width of the Drawer dialog</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>Placement is top or bottom, height of the Drawer dialog</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>The class name of the container of the Drawer dialog</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>Custom close btn, setting \n<code>false</code>\n will hide \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>presetted size of drawer, default 728px and small 364px</td>\n<td><code>\'default\'</code>\n|\n<code>\'small\'</code></td>\n<td><code>default</code></td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<p>The default width of the Drawer is 45% when the <code>width</code> and <code>size</code> fields are not set. The priority of the Drawer is <code>width</code> > <code>size</code>.</p>\n<h4 class="anchor-heading"><a href="#the-following-functions-is-obs">¶</a><a href="javascript:void(0)" id="the-following-functions-is-obs" class="anchor-point"></a>The following functions is obsolete in the new design system and is only used as a reference for the old version</h4>'}),e.createElement(j,{title:"Placement usage",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(h)),e.createElement(j,{title:"No mask usage",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(v)))}}},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)},r=s(27378),k=s(31256),d=function(n){return(0,k.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,k.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),h=function(n,a){return(0,k.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)},v=s(49744),f=function(n){var a,s=n.mask,e=n.visible,c=n.title,i=n.children,k=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,r.useRef)(),z=(0,r.useRef)(),D=(0,r.useCallback)((function(){s||(C.current=(0,v.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]),S=(0,r.useCallback)((function(){var n;s||null===(n=C.current)||void 0===n||n.call(C)}),[s]),O=(0,r.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:D,onExit:S,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:[h(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(k)]}),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,k=n.visible,d=n.maskClosable,m=n.closeOnESC,g=n.mask,h=n.footer,v=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,r.useState)(!1),s=a[0],t=a[1],p=(0,r.useState)(n),e=p[0],o=p[1],c=(0,r.useCallback)((function(){t(!1)}),[]);return e===n||(t(!n),o(n)),{exiting:s,onExited:c}}(k),D=z.exiting,S=z.onExited;return(0,p.jsx)(c.ZP,(0,t.pi)({visible:k||D,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:k,onClose:s},void 0),(0,p.jsx)(f,(0,t.pi)({mask:g,visible:k,title:e,footer:h,onClose:s,onExited:S,placement:v,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,r=n.readOnly,k=void 0!==r&&r,d=n.isValueEqual,m=void 0===d?Object.is:d,g=n.className,h=n.style,v=n.children,f=n.onChange,y=(0,c.useMemo)((function(){return{value:s,disabled:i,readOnly:k,isValueEqual:m,onRadioChange:f}}),[s,i,k,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:h,"data-zv":"10.0.10"},{children:v}),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 r=s(4246),k=s(1348),d=s(57961);function m(n){var a=n.className,s=n.style,e=n.children,r=(n.value,n.width),m=n.labelStyle,g=(n.onMouseEnter,n.onMouseLeave,(0,t._T)(n,["className","style","children","value","width","labelStyle","onMouseEnter","onMouseLeave"])),h=(0,l.useContext)(k.d),v=(0,l.useContext)(d.Z),f=i(h,v,n),y=f.checked,b=f.disabled,w=f.readOnly,j=u(v,n),x=o()(a,"zent-radio-wrap",{"zent-radio-checked":!!y,"zent-radio-disabled":b||w}),C=(0,c.Z)(r),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,r=(n.value,n.width),m=n.onMouseEnter,g=n.onMouseLeave,h=(0,t._T)(n,["className","style","children","value","width","onMouseEnter","onMouseLeave"]),v=(0,l.useContext)(k.d),f=(0,l.useContext)(d.Z);if(!f)throw new Error("Radio.Button must be nested within Radio.Group");var y=i(v,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)(r),D=(0,t.pi)((0,t.pi)({},s),z);return(0,p.jsxs)("label",(0,t.pi)({className:C,style:D,onMouseEnter:m,onMouseLeave:g,"data-zv":"10.0.10"},{children:[(0,p.jsx)("input",(0,t.pi)({},h,{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=r.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})}}]);