-
Notifications
You must be signed in to change notification settings - Fork 0
/
3854-c8bf14d7c3c0d881dba6.js
1 lines (1 loc) · 46.5 KB
/
3854-c8bf14d7c3c0d881dba6.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[3854],{93854:(n,a,s)=>{"use strict";s.r(a),s.d(a,{default:()=>j});var t=s(73450),p=s(73118),e=s(27378),o=s(57318),c=s(96681),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];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",footer:(0,r.jsx)("div",{style:{textAlign:"center"},children:(0,r.jsx)(c.z,{onClick:()=>t(!1),children:"close"})}),visible:s,onClose:()=>t(!1),maskClosable:!0,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(){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),v=g[0],h=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:v,onChange:n=>h(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 h(n){return(0,r.jsx)(n.tag,d(d({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function b(n){return(0,r.jsx)(h,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function f(n){return(0,r.jsx)(h,{tag:"style",html:n.style})}function y(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),y(n.parentNode,a);return a}class w 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)(h,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class j 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,y(a,-9))}}render(){return e.createElement("div",{className:"zandoc-react-container"},e.createElement(f,{style:""}),e.createElement(b,{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="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),e.createElement(w,{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 <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">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">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> textAlign<span class="token operator">:</span> <span class="token string">\'center\'</span> <span class="token punctuation">}</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">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">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>close<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 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 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> margin<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 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 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> padding<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<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(w,{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> marginLeft<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(g)),e.createElement(w,{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>\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">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>\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">Input</span></span> <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> <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> <span class="token attr-name">showClear</span> <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> <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> margin<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> fontSize<span class="token operator">:</span> <span class="token string">\'50px\'</span><span class="token punctuation">,</span> paddingLeft<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)),e.createElement(b,{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</tbody>\n</table>'}))}}},38098:(n,a,s)=>{"use strict";s.d(a,{d:()=>f});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":"9.12.16"},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":"9.12.16"},{children:"number"==typeof n||"string"==typeof n?(0,p.jsx)("span",(0,t.pi)({className:"zent-drawer-header__title","data-zv":"9.12.16"},{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":"9.12.16"},{children:n}),void 0)},g=s(27036),v=function(n,a){return(0,k.Z)(n)?null:(0,p.jsx)("div",(0,t.pi)({onClick:a,className:"zent-drawer-close","data-zv":"9.12.16"},{children:!0===n?(0,p.jsx)(g.Z,{type:"close"},void 0):n}),void 0)},h=s(49744),b=function(n){var a,s=n.mask,e=n.visible,c=n.title,i=n.children,k=n.footer,g=n.placement,b=n.closeBtn,f=n.onClose,y=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)(),O=(0,r.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))&&f()})))}),[f,s]),E=(0,r.useCallback)((function(){var n;s||null===(n=C.current)||void 0===n||n.call(C)}),[s]),N=(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:O,onExit:E,onExited:y},{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]),N),"data-zv":"9.12.16"},{children:[v(b,f),d(c),(0,p.jsx)("div",(0,t.pi)({className:"zent-drawer-body","data-zv":"9.12.16"},{children:i}),void 0),m(k)]}),void 0)}),void 0)},f=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,v=n.footer,h=n.placement,f=n.closeBtn,y=(0,t._T)(n,["onClose","title","children","className","visible","maskClosable","closeOnESC","mask","footer","placement","closeBtn"]),w="width"in y?y.width:"45%",j="height"in y?y.height:"45%",x=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),C=x.exiting,z=x.onExited;return(0,p.jsx)(c.ZP,(0,t.pi)({visible:k||C,onClose:s,closeOnESC:m,blockPageScroll:g},{children:(0,p.jsxs)("div",(0,t.pi)({className:o()((a={},a[u]=!!u,a)),"data-zv":"9.12.16"},{children:[(0,p.jsx)(i,{mask:g,maskClosable:d,visible:k,onClose:s},void 0),(0,p.jsx)(b,(0,t.pi)({mask:g,visible:k,title:e,footer:v,onClose:s,onExited:z,placement:h,width:w,height:j,closeBtn:f},{children:l}),void 0)]}),void 0)}),void 0)};f.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,v=n.style,h=n.children,b=n.onChange,f=(0,c.useMemo)((function(){return{value:s,disabled:i,readOnly:k,isValueEqual:m,onRadioChange:b}}),[s,i,k,m,b]);return(0,p.jsx)(l.Z.Provider,(0,t.pi)({value:f},{children:(0,p.jsx)("div",(0,t.pi)({className:o()("zent-radio-group",g),style:v,"data-zv":"9.12.16"},{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 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"])),v=(0,l.useContext)(k.d),h=(0,l.useContext)(d.Z),b=i(v,h,n),f=b.checked,y=b.disabled,w=b.readOnly,j=u(h,n),x=o()(a,"zent-radio-wrap",{"zent-radio-checked":!!f,"zent-radio-disabled":y||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":"9.12.16"},{children:[(0,p.jsxs)("span",(0,t.pi)({className:"zent-radio","data-zv":"9.12.16"},{children:[(0,p.jsx)("span",{className:"zent-radio-inner","data-zv":"9.12.16"},void 0),(0,p.jsx)("input",(0,t.pi)({},g,{type:"radio",checked:!!f,disabled:y,readOnly:w,onChange:j,"data-zv":"9.12.16"}),void 0)]}),void 0),void 0!==e&&(0,p.jsx)("span",(0,t.pi)({className:"zent-radio-label",style:m,"data-zv":"9.12.16"},{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,v=(0,t._T)(n,["className","style","children","value","width","onMouseEnter","onMouseLeave"]),h=(0,l.useContext)(k.d),b=(0,l.useContext)(d.Z);if(!b)throw new Error("Radio.Button must be nested within Radio.Group");var f=i(h,b,n),y=f.checked,w=f.disabled,j=f.readOnly,x=u(b,n),C=o()(a,"zent-radio-button",{"zent-radio-button--checked":!!y,"zent-radio-button--disabled":w||j}),z=(0,c.Z)(r),O=(0,t.pi)((0,t.pi)({},s),z);return(0,p.jsxs)("label",(0,t.pi)({className:C,style:O,onMouseEnter:m,onMouseLeave:g,"data-zv":"9.12.16"},{children:[(0,p.jsx)("input",(0,t.pi)({},v,{type:"radio",checked:!!y,disabled:w,readOnly:j,onChange:x,"data-zv":"9.12.16"}),void 0),(0,p.jsx)("span",(0,t.pi)({className:"zent-radio-button__content","data-zv":"9.12.16"},{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})}}]);