text: (self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[9760],{99760:(n,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>x});var t=a(73450),p=a(27378),e=a(57318),c=a(90218),o=a(39215),l=a(24246);function u(n,s){var a=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);s&&(t=t.filter((function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable}))),a.push.apply(a,t)}return a}function k(n){for(var s=1;s<arguments.length;s++){var a=null!=arguments[s]?arguments[s]:{};s%2?u(Object(a),!0).forEach((function(s){(0,t.Z)(n,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):u(Object(a)).forEach((function(s){Object.defineProperty(n,s,Object.getOwnPropertyDescriptor(a,s))}))}return n}var i=function(){var n=c.v.MenuItem,s=(n,s)=>{},a=()=>(0,l.jsxs)(c.v,{onClick:s,className:"hello",children:[(0,l.jsx)(n,{className:"food",children:"Food"},"1-1"),(0,l.jsx)(n,{disabled:!0,children:"Clothing"},"1-2")]});return(0,l.jsx)(a,{})},r=function(){var n=c.v.MenuItem,s=c.v.SubMenu,a=(n,s)=>{},t=()=>(0,l.jsxs)(c.v,{onClick:a,className:"hello",children:[(0,l.jsx)(n,{className:"food",children:"Food"},"1-1"),(0,l.jsx)(n,{disabled:!0,children:"Clothing"},"1-2"),(0,l.jsxs)(s,{title:"Electrical",overlayClassName:"sub",children:[(0,l.jsx)(n,{className:"tv",children:"TV"},"2-1"),(0,l.jsx)(n,{disabled:!0,children:"Laptop"},"2-2"),(0,l.jsx)(n,{children:"Washing"},"2-3")]}),(0,l.jsxs)(s,{title:"Makeup",disabled:!0,children:[(0,l.jsx)(n,{children:"Eye Shadow"},"3-1"),(0,l.jsx)(n,{children:"Cleanser"},"3-2")]})]});return(0,l.jsx)(t,{})},m=function(){var n=c.v.MenuItem,s=c.v.SubMenu;return(0,l.jsx)("div",{className:"zent-menu-simple-wrapper",children:(0,l.jsxs)(c.v,{className:"simple",onClick:function(n,s){},children:[(0,l.jsx)(n,{children:"Guangdong"}),(0,l.jsxs)(s,{title:"Jiangsu",children:[(0,l.jsx)(n,{children:"Suzhou"}),(0,l.jsx)(n,{children:"Wuxi"}),(0,l.jsx)(n,{children:"Changzhou"}),(0,l.jsx)(n,{children:"Zhenjiang"}),(0,l.jsxs)(s,{title:"Nanjing",children:[(0,l.jsx)(n,{children:"Jiangning"}),(0,l.jsx)(n,{children:"Xianling"})]})]}),(0,l.jsx)(n,{children:"Shandong"}),(0,l.jsxs)(s,{title:"Zhejiang",children:[(0,l.jsxs)(s,{title:"Hangzhou",children:[(0,l.jsx)(n,{children:"Xihu"}),(0,l.jsx)(n,{children:"Shangcheng"})]}),(0,l.jsx)(n,{children:"Wenzhou"}),(0,l.jsx)(n,{children:"Shaoxing"}),(0,l.jsx)(n,{children:"Jiaxing"})]})]})})},d=function(){var n=c.v.MenuItem,s=c.v.SubMenu,a=(n,s)=>{},t=()=>(0,l.jsxs)(c.v,{onClick:a,className:"hello",children:[(0,l.jsxs)(s,{title:(0,l.jsxs)("span",{children:[(0,l.jsx)(o.J,{type:"youzan"}),"Electrical"]}),overlayClassName:"sub",children:[(0,l.jsx)(n,{className:"tv",children:"TV"},"2-1"),(0,l.jsx)(n,{disabled:!0,children:"Laptop"},"2-2"),(0,l.jsx)(n,{children:"Washing"},"2-3")]}),(0,l.jsxs)(s,{title:(0,l.jsxs)("span",{children:[(0,l.jsx)(o.J,{type:"settings"}),"Makeup"]}),children:[(0,l.jsx)(n,{children:"Eye Shadow"},"3-1"),(0,l.jsx)(n,{children:"Cleanser"},"3-2")]})]});return(0,l.jsx)(t,{})},g=function(){var n=c.v.MenuItem,s=c.v.SubMenu,a=(n,s)=>{},t=()=>(0,l.jsxs)(c.v,{mode:"inline",onClick:a,children:[(0,l.jsx)(n,{children:"Food"},"1-1"),(0,l.jsx)(n,{children:"Clothing"},"1-2"),(0,l.jsxs)(s,{title:(0,l.jsxs)("span",{children:[(0,l.jsx)(o.J,{type:"youzan"}),"Electrical"]}),children:[(0,l.jsx)(n,{children:"TV"},"1-3-1"),(0,l.jsx)(n,{children:"Laptop"},"1-3-2"),(0,l.jsx)(n,{children:"Washing"},"1-3-3")]},"1-3"),(0,l.jsxs)(s,{title:"Makeup",children:[(0,l.jsx)(n,{children:"Eye Shadow"},"1-4-1"),(0,l.jsx)(n,{children:"Cleanser"},"1-4-2"),(0,l.jsxs)(s,{title:"Food",children:[(0,l.jsx)(n,{children:"TV"},"1-4-3-1"),(0,l.jsx)(n,{children:"Laptop"},"1-4-3-2"),(0,l.jsx)(n,{children:"Washing"},"1-4-3-3")]},"1-4-3")]},"1-4"),(0,l.jsx)(n,{disabled:!0,children:"Clothing"},"1-5"),(0,l.jsx)(s,{title:"Food",disabled:!0},"1-6")]});return(0,l.jsx)(t,{})},h=function(){var n=c.v.MenuItem,s=c.v.SubMenu,a=(n,s)=>{},t=()=>(0,l.jsxs)(c.v,{mode:"inline",defaultSelectedKey:"1-2",defaultExpandedKeys:["1-4","1-4-3"],onClick:a,children:[(0,l.jsx)(n,{children:"Food"},"1-1"),(0,l.jsx)(n,{children:"Clothing"},"1-2"),(0,l.jsxs)(s,{title:(0,l.jsxs)("span",{children:[(0,l.jsx)(o.J,{type:"youzan"}),"Electrical"]}),children:[(0,l.jsx)(n,{children:"TV"},"1-3-1"),(0,l.jsx)(n,{children:"Laptop"},"1-3-2"),(0,l.jsx)(n,{children:"Washing"},"1-3-3")]},"1-3"),(0,l.jsxs)(s,{title:"Makeup",children:[(0,l.jsx)(n,{children:"Eye Shadow"},"1-4-1"),(0,l.jsx)(n,{children:"Cleanser"},"1-4-2"),(0,l.jsxs)(s,{title:"Food",children:[(0,l.jsx)(n,{children:"TV"},"1-4-3-1"),(0,l.jsx)(n,{children:"Laptop"},"1-4-3-2"),(0,l.jsx)(n,{children:"Washing"},"1-4-3-3")]},"1-4-3")]},"1-4")]});return(0,l.jsx)(t,{})};function y(n){return(0,l.jsx)(n.tag,k(k({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function b(n){return(0,l.jsx)(y,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function v(n){return(0,l.jsx)(y,{tag:"style",html:n.style})}function M(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),M(n.parentNode,s);return s}class f extends p.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,s=this.props,a=s.title,t=s.src,p=s.children;return(0,l.jsxs)("div",{className:"zandoc-react-demo",children:[(0,l.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,l.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,l.jsx)("div",{className:"zandoc-react-demo__title",children:(0,l.jsx)("p",{children:a||""})}),(0,l.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,l.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,l.jsx)(y,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class x extends p.Component{componentDidMount(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&(0,e.l)(document.documentElement,0,M(s,-9))}}render(){return p.createElement("div",{className:"zandoc-react-container"},p.createElement(v,{style:""}),p.createElement(b,{html:'<h2 class="anchor-heading"><a href="#menu">¶</a><a href="javascript:void(0)" id="menu" class="anchor-point"></a>Menu</h2>\n<p>Menu, can be used to provide navigation.</p>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),p.createElement(f,{title:"Basic Usage",id:"Demobasic",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Menu</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<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">MenuItem</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Example</span></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 keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu</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>onClick<span class="token punctuation">}</span></span>\n      <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hello<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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-1<span class="token punctuation">"</span></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>food<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Food</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token maybe-class-name">Clothing</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n  <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">&lt;</span><span class="token class-name">Example</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(i)),p.createElement(f,{title:"Submenu",id:"Demosubmenu",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Menu</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<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SubMenu</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Example</span></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 keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu</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>onClick<span class="token punctuation">}</span></span>\n      <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hello<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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-1<span class="token punctuation">"</span></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>food<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Food</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token maybe-class-name">Clothing</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Electrical"</span><span class="token punctuation">}</span></span> <span class="token attr-name">overlayClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sub<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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2-1<span class="token punctuation">"</span></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>tv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">TV</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token maybe-class-name">Laptop</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Washing</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Makeup"</span><span class="token punctuation">}</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Eye</span> <span class="token maybe-class-name">Shadow</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Cleanser</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n  <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">&lt;</span><span class="token class-name">Example</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(r)),p.createElement(f,{title:"Nested",id:"Demonested",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Menu</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 punctuation">{</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SubMenu</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token function-variable function">clickHandler</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> key<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 maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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-menu-simple-wrapper<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">&lt;</span><span class="token class-name">Menu</span></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>simple<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>clickHandler<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">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Guangdong</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Jiangsu<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">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Suzhou</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Wuxi</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Changzhou</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Zhenjiang</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nanjing<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">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Jiangning</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Xianling</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Shandong</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Zhejiang<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">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hangzhou<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">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Xihu</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Shangcheng</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Wenzhou</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Shaoxing</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Jiaxing</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(m)),p.createElement(f,{title:"WithIcon",id:"Demowithicon",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Icon</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<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SubMenu</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Example</span></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 keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu</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>onClick<span class="token punctuation">}</span></span>\n      <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hello<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">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Icon</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>youzan<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token maybe-class-name">Electrical</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span> <span class="token attr-name">overlayClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sub<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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2-1<span class="token punctuation">"</span></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>tv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">TV</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token maybe-class-name">Laptop</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Washing</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Icon</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>settings<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token maybe-class-name">Makeup</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Eye</span> <span class="token maybe-class-name">Shadow</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Cleanser</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n  <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">&lt;</span><span class="token class-name">Example</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(d)),p.createElement(f,{title:"Inline",id:"Demoinline",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Menu</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<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SubMenu</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Example</span></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 keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu</span></span>\n      <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inline<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>onClick<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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token maybe-class-name">Food</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token maybe-class-name">Clothing</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Icon</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>youzan<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token maybe-class-name">Electrical</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3<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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">TV</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Laptop</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Washing</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Makeup"</span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4<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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Eye</span> <span class="token maybe-class-name">Shadow</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Cleanser</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Food"</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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">TV</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Laptop</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Washing</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-5<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>\n        <span class="token maybe-class-name">Clothing</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-6<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Food"</span><span class="token punctuation">}</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n  <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">&lt;</span><span class="token class-name">Example</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(g)),p.createElement(f,{title:"Inline with selected key",id:"Demoinlineselected",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Menu</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<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SubMenu</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Example</span></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 keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu</span></span>\n      <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span>\n      <span class="token attr-name">defaultSelectedKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span>\n      <span class="token attr-name">defaultExpandedKeys</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 string">"1-4"</span><span class="token punctuation">,</span> <span class="token string">"1-4-3"</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>onClick<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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token maybe-class-name">Food</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token maybe-class-name">Clothing</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Icon</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>youzan<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token maybe-class-name">Electrical</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3<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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">TV</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Laptop</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Washing</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Makeup"</span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4<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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Eye</span> <span class="token maybe-class-name">Shadow</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Cleanser</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Food"</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">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">TV</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Laptop</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Washing</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n  <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">&lt;</span><span class="token class-name">Example</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(h)),p.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<h4 class="anchor-heading"><a href="#menu">¶</a><a href="javascript:void(0)" id="menu" class="anchor-point"></a>Menu</h4>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n<th>Optional</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onClick</td>\n<td>Callback fires when a node of menu is clicked</td>\n<td>func</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onSubMenuClick</td>\n<td>Callback fires when a SubMenu is clicked</td>\n<td>func</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>style</td>\n<td>Custom inline styles</td>\n<td>object</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>mode</td>\n<td>Display mode</td>\n<td>string</td>\n<td>\'pop\'</td>\n<td>\'pop\', \'inline\'</td>\n</tr>\n<tr>\n<td>className</td>\n<td>Class name for the node</td>\n<td><code>string</code></td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#inline-mode-menu">¶</a><a href="javascript:void(0)" id="inline-mode-menu" class="anchor-point"></a><code>inline</code> mode Menu</h4>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n<th>Optional</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>defaultExpandedKeys</td>\n<td>Default expand keys for SubMenu</td>\n<td><code>string[]</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>defaultSelectedKey</td>\n<td>Default selected Key for MenuItem</td>\n<td><code>string</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>expandedKeys</td>\n<td>Expand keys for SubMenu</td>\n<td><code>string[]</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>selectedKey</td>\n<td>Selected Key for MenuItem</td>\n<td><code>string</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onSelectChange</td>\n<td>Callback fires when selected menu item is changed</td>\n<td><code>(key: string) => void</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onExpandChange</td>\n<td>Callback fires when SubMenus toggle expand/collapsed, input param is the array of currently expanded SubMenu IDs</td>\n<td><code>(keys: string[]) => void</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>inlineIndent</td>\n<td>Distance in px when the mode is inline</td>\n<td>number</td>\n<td>24</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#menuitem">¶</a><a href="javascript:void(0)" id="menuitem" class="anchor-point"></a>MenuItem</h4>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>key</td>\n<td>the unique identify of the item</td>\n<td>string</td>\n<td>an ID generated internally</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>whether to disable the menu item</td>\n<td>bool</td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>custom class name</td>\n<td>string</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#submenu">¶</a><a href="javascript:void(0)" id="submenu" class="anchor-point"></a>SubMenu</h4>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>key</td>\n<td>the unique identify of the item</td>\n<td>string</td>\n<td>an ID generated internally</td>\n</tr>\n<tr>\n<td>title</td>\n<td>title of the submenu</td>\n<td>node</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>whether to disable the submenu</td>\n<td>bool</td>\n<td></td>\n</tr>\n<tr>\n<td>overlayClassName</td>\n<td>custom class name of the pop menu</td>\n<td>string</td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>custom class name of the submenu item</td>\n<td>string</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 class="anchor-heading"><a href="#faq">¶</a><a href="javascript:void(0)" id="faq" class="anchor-point"></a>FAQ</h3>\n<ul>\n<li>\n<p>A click event callback function, whose parameters are event and key(which is the key property of the node), is used as a unified agent.</p>\n</li>\n<li>\n<p>When the <code>key</code> property is not set for the MenuItem, a unique identify of the node (starting from 0) is generated automatically in order and hierarchy, which will be saved on the <code>index</code> property as the second argument of the <code>onClick</code> function.\nWhen the <code>key</code> property is set manually, the property will be copied to the <code>index</code> property and will override  the unique identify generated. It\'s recommanded to manually set the <code>key</code> property to a proper value of MenuItem in the condition that the Menu is not complex.</p>\n<pre><code class="language-text"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>   <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_0\'</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span> <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_1_0\'</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span> <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_1_1\'</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>   <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_2\'</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n    <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span>`</code></pre>\n</li>\n</ul>'}))}}},90218:(n,s,a)=>{"use strict";a.d(s,{v:()=>y,Z:()=>b});var t=a(93646),p=a(24246),e=a(60042),c=a.n(e),o=a(27378),l=a(17949),u=a(42690),k=a(53090),i=function(n){function s(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(s,n),s.prototype.renderCommonMenuItem=function(n,s,a,p){var e=(0,t.pi)({specKey:(0,k.o)(n,s,a),onClick:this.handleClick},p);return(0,o.cloneElement)(n,e)},s}(o.PureComponent),r=a(80736),m=a(27036),d=a(79737),g=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.handleClick=function(n,a){(0,s.props.onClick)(n,a)},s.onSubMenuClick=function(){s.props.onSubMenuClick&&s.props.onSubMenuClick(s.props.specKey)},s.renderSubMenuItems=function(n,a){if(!n)return null;var t=s.props.specKey;return s.renderCommonMenuItem(n,a,t)},s}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this.props,s=n.children,a=n.visible,e=n.overlayCx;return a?(0,p.jsx)("ul",(0,t.pi)({className:c()("zent-menu","zent-submenu-content",e),onClick:this.onSubMenuClick,"data-zv":"10.0.0-beta.1"},{children:o.Children.map(s,this.renderSubMenuItems)}),void 0):null},s}(i),h=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.state={subMenuVisible:!1},s.getEventHanders=function(n,a){var t={};return n||a||(t={onMouseEnter:s.onMouseEnter,onMouseLeave:s.onMouseLeave}),t},s.handleClick=function(n,a){var t=s.props,p=t.onClick;!t.isInline&&s.setState({subMenuVisible:!1}),p(n,a)},s.titleClickHandler=function(n){var a,t,p=s.props,e=p.isInline,c=p.specKey,o=p.toggleExpand;null===(t=(a=s.props).onSubMenuClick)||void 0===t||t.call(a,c),e&&o(c),n.stopPropagation()},s.onMouseEnter=function(){s.leaveTimer&&clearTimeout(s.leaveTimer),s.enterTimer=setTimeout((function(){s.setState({subMenuVisible:!0})}),200)},s.onMouseLeave=function(){s.enterTimer&&clearTimeout(s.enterTimer),s.leaveTimer=setTimeout((function(){s.setState({subMenuVisible:!1})}),200)},s.renderInlineChild=function(n,a){var t=s.props,p=t.depth,e=t.isInline,c=t.inlineIndent,o=t.selectedKey,l=t.expandKeys,u=t.handleSelect,k=t.toggleExpand,i=t.specKey;return s.renderCommonMenuItem(n,a,i,{depth:p+1,isInline:e,inlineIndent:c,selectedKey:o,expandKeys:l,handleSelect:u,toggleExpand:k,onSubMenuClick:s.props.onSubMenuClick})},s}return(0,t.ZT)(s,n),s.prototype.renderContent=function(){var n=this.props,s=n.children,a=n.specKey,e=n.overlayClassName,c=n.isInline,l=n.expandKeys,u=l&&-1!==l.indexOf(a);return c?(0,p.jsx)(d.H,(0,t.pi)({duration:200,height:u?"auto":0},{children:(0,p.jsx)("ul",(0,t.pi)({className:"zent-menu__inner","data-zv":"10.0.0-beta.1"},{children:o.Children.map(s,this.renderInlineChild)}),void 0)}),void 0):(0,p.jsx)(g,(0,t.pi)({visible:this.state.subMenuVisible,onClick:this.handleClick,specKey:a,overlayCx:e,onSubMenuClick:this.props.onSubMenuClick},{children:s}),void 0)},s.prototype.render=function(){var n=this.props,s=n.className,a=n.disabled,e=n.title,o=n.isInline,l=n.depth,u=n.inlineIndent,i=n.expandKeys,r=n.specKey,d=i&&-1!==i.indexOf(r),g=this.getEventHanders(a,o),h=(0,k.g)({isInline:o,depth:l,inlineIndent:u}),y=c()(s,{"zent-menu-item":!o,"zent-menu-item-disabled":a,"zent-submenu":!o,"zent-menu__inline-submenu":o,"zent-menu__inline-item-disabled":a&&o});return(0,p.jsxs)("li",(0,t.pi)({className:y},g,{"data-zv":"10.0.0-beta.1"},{children:[(0,p.jsxs)("div",(0,t.pi)({className:c()({"zent-submenu-title":!o,"zent-menu__inline-submenu-title":o,"zent-submenu-disabled":a}),style:h,onClick:this.titleClickHandler,"data-zv":"10.0.0-beta.1"},{children:[e,!a&&(0,p.jsx)(m.Z,{className:c()("zent-submenu-title-operate-icon",{"zent-menu__inline-submenu-icon--expand":o&&d}),type:"right"},void 0)]}),void 0),!a&&this.renderContent()]}),void 0)},s.defaultProps={className:""},s}(i),y=function(n){function s(s){var a,p,e,c=n.call(this,s)||this;return c.toggleExpand=function(n){var s,a,p=c.state.expandedKeys,e=-1!==p.indexOf(n)?p.filter((function(s){return s!==n})):(0,t.ev)([n],p);c.setState({expandedKeys:e}),null===(a=(s=c.props).onExpandChange)||void 0===a||a.call(s,e)},c.handleSelect=function(n){var s,a;c.setState({selectedKey:n}),null===(a=(s=c.props).onSelectChange)||void 0===a||a.call(s,n)},c.handleClick=function(n,s){var a=c.props.onClick;a&&a(n,s)},c.renderMenuItem=function(n,s){return n?c.renderCommonMenuItem(n,s,void 0,{depth:1,isInline:"inline"===c.props.mode,inlineIndent:c.props.inlineIndent,selectedKey:c.state.selectedKey,expandKeys:c.state.expandedKeys,handleSelect:c.handleSelect,toggleExpand:c.toggleExpand,onSubMenuClick:c.props.onSubMenuClick}):null},"inline"===s.mode?c.state={selectedKey:null!==(a=s.selectedKey)&&void 0!==a?a:s.defaultSelectedKey,expandedKeys:null!==(e=null!==(p=s.expandedKeys)&&void 0!==p?p:s.defaultExpandedKeys)&&void 0!==e?e:s.defaultExpandKeys,prevExpandedKeysProp:s.expandedKeys,prevSelectedKeyProp:s.selectedKey}:c.state={},c}return(0,t.ZT)(s,n),s.getDerivedStateFromProps=function(n,s){if("inline"!==n.mode)return null;var a={prevSelectedKeyProp:n.selectedKey,prevExpandedKeysProp:n.expandedKeys};return n.selectedKey!==s.prevSelectedKeyProp&&n.selectedKey!==s.selectedKey&&(a.selectedKey=n.selectedKey),(0,l.Z)(n.expandedKeys,s.prevExpandedKeysProp)||(0,l.Z)(n.expandedKeys,s.expandedKeys)||(a.expandedKeys=n.expandedKeys),a},s.prototype.render=function(){var n=this.props,s=n.children,a=n.className,e=n.style,l="inline"===n.mode,u=c()("zent-menu",a,{"zent-menu__inline":l});return(0,p.jsx)("ul",(0,t.pi)({className:u,style:e,"data-zv":"10.0.0-beta.1"},{children:o.Children.map(s,this.renderMenuItem)}),void 0)},s.MenuItem=r.Z,s.SubMenu=h,s.defaultProps={onClick:u.Z,mode:"pop",inlineIndent:24,defaultExpandKeys:[],onSubMenuClick:u.Z},s}(i),b=y},80736:(n,s,a)=>{"use strict";a.d(s,{s:()=>u});var t=a(93646),p=a(24246),e=a(27378),c=a(60042),o=a.n(c),l=a(53090),u=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.handleClick=function(n){var a=s.props,t=a.specKey,p=a.onClick,e=a.disabled,c=a.isInline,o=a.handleSelect;e||(c&&o(t),p(n,t))},s}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this.props,s=n.specKey,a=n.className,e=n.children,c=n.disabled,u=n.isInline,k=n.selectedKey,i=n.depth,r=n.inlineIndent,m=k===s,d=(0,l.g)({isInline:u,depth:i,inlineIndent:r});return(0,p.jsx)("li",(0,t.pi)({className:o()("zent-menu-item",a,{"zent-menu__inline-item":u,"zent-menu__inline-item-selected":m,"zent-menu-item-disabled":c}),style:d,onClick:this.handleClick,"data-zv":"10.0.0-beta.1"},{children:e}),void 0)},s}(e.Component);s.Z=u},53090:(n,s,a)=>{"use strict";function t(n,s,a){return void 0===a&&(a="item"),n.key||a+"_"+s}function p(n){var s=n.isInline,a=n.depth,t=n.inlineIndent,p={};return s&&(p={paddingLeft:a*t+"px"}),p}a.d(s,{o:()=>t,g:()=>p})},79737:(n,s,a)=>{"use strict";a.d(s,{H:()=>l});var t=a(93646),p=a(24246),e=a(27378),c=a(17127);function o(n,s){n.style.height="number"==typeof s?s+"px":s}var l=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.ref=(0,e.createRef)(),s.timer=null,s}return(0,t.ZT)(s,n),s.prototype.componentDidMount=function(){var n=this,s=this.props,a=s.appear,t=s.height,p=s.duration,e=this.ref.current;a&&"auto"===t?(e.style.height="0px",(0,c.tA)((function(){n.props.height===t&&(e.style.height=e.offsetHeight+"px",n.timer=setTimeout((function(){n.timer=null,n.props.height===t&&(e.style.height="auto")}),p))}))):o(e,t)},s.prototype.componentDidUpdate=function(n){var s=this,a=this.props,t=a.height,p=a.duration;if(n.height!==t){null!==this.timer&&(clearTimeout(this.timer),this.timer=null);var e=this.ref.current;if("auto"===n.height)e.style.height=e.offsetHeight+"px",(0,c.tA)((function(){s.props.height===t&&o(e,t)}));else if("auto"===t){var l=e.offsetHeight;e.style.height="auto";var u=e.offsetHeight;e.style.height=l+"px",(0,c.tA)((function(){e.style.height=u+"px",s.timer=setTimeout((function(){s.timer=null,s.props.height===t&&(e.style.height=t)}),p)}))}else o(e,t)}},s.prototype.render=function(){var n=this.props,s=n.duration,a=n.className,e=n.style,c=n.easing,o=n.overflow,l=n.children,u=n.transitionPrototype;return(0,p.jsx)("div",(0,t.pi)({ref:this.ref,className:a,style:(0,t.pi)((0,t.pi)({},e),{transition:u+" "+s+"ms "+c,overflow:o}),"data-zv":"10.0.0-beta.1"},{children:l}),void 0)},s.defaultProps={appear:!1,duration:200,easing:"ease",overflow:"hidden",transitionPrototype:"height"},s}(e.Component)}}]);