-
Notifications
You must be signed in to change notification settings - Fork 0
/
4315-d6a135b2d949d6ea20e6.js
1 lines (1 loc) · 56 KB
/
4315-d6a135b2d949d6ea20e6.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[4315],{94315:(n,a,s)=>{"use strict";s.r(a),s.d(a,{default:()=>z});var t=s(73450),p=s(27378),e=s(57318),o=s(31770),c=s(82148),u=s(36055),l=s(24246);function i(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 r(n){for(var a=1;a<arguments.length;a++){var s=null!=arguments[a]?arguments[a]:{};a%2?i(Object(s),!0).forEach((function(a){(0,t.Z)(n,a,s[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(s)):i(Object(s)).forEach((function(a){Object.defineProperty(n,a,Object.getOwnPropertyDescriptor(s,a))}))}return n}var k=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{pageSize:10,current:1}),(0,t.Z)(this,"onChange",(n=>{this.setState(n)}))}render(){var n=this.state,a=n.current,s=n.pageSize;return(0,l.jsxs)("div",{children:[(0,l.jsx)(o.t,{current:a,pageSize:s,total:101,onChange:this.onChange}),(0,l.jsx)("br",{}),(0,l.jsx)(c.w,{current:a,pageSize:s,total:101,onChange:this.onChange}),(0,l.jsx)("br",{}),(0,l.jsx)(u.m,{current:a,pageSize:s,total:101,onChange:this.onChange})]})}}return(0,l.jsx)(n,{})},d=function(){var n=[10,20,30];class a extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{pageSize:10,current:2}),(0,t.Z)(this,"onChange",(n=>{this.setState(n)}))}render(){var a=this.state,s=a.current,t=a.pageSize;return(0,l.jsx)("div",{children:(0,l.jsx)(o.t,{current:s,pageSize:t,pageSizeOptions:n,total:101,onChange:this.onChange})})}}return(0,l.jsx)(a,{})},g=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{pageSize:10,current:2}),(0,t.Z)(this,"onChange",(n=>{this.setState(n)}))}render(){var n=this.state,a=n.current,s=n.pageSize;return(0,l.jsxs)("div",{children:[(0,l.jsx)(o.t,{current:a,pageSize:s,total:0,onChange:this.onChange}),(0,l.jsx)("br",{}),(0,l.jsx)(c.w,{current:a,pageSize:s,total:0,onChange:this.onChange}),(0,l.jsx)("br",{}),(0,l.jsx)(u.m,{current:a,pageSize:s,total:0,onChange:this.onChange})]})}}return(0,l.jsx)(n,{})},m=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{pageSize:10,current:2}),(0,t.Z)(this,"onChange",(n=>{this.setState(n)}))}render(){var n=this.state,a=n.current,s=n.pageSize;return(0,l.jsx)("div",{children:(0,l.jsx)(o.t,{current:a,pageSize:s,total:101,formatTotal:n=>"一百零一",onChange:this.onChange})})}}return(0,l.jsx)(n,{})},h=function(){var n=101;class a extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{pageSize:10,current:11}),(0,t.Z)(this,"onChange",(n=>{this.setState(n)}))}render(){var a=this.state,s=a.current,t=a.pageSize;return(0,l.jsxs)("div",{children:[(0,l.jsx)(o.t,{current:s,pageSize:t,total:n,onChange:this.onChange,lastPageHelp:{content:"数据最多支持查看 %d 条".replace("%d",n)}}),(0,l.jsx)("br",{}),(0,l.jsx)(c.w,{current:s,pageSize:t,total:n,onChange:this.onChange,lastPageHelp:{content:"数据最多支持查看 %d 条".replace("%d",n)}}),(0,l.jsx)("br",{}),(0,l.jsx)(u.m,{current:s,pageSize:t,total:n,onChange:this.onChange,lastPageHelp:{content:"数据最多支持查看 %d 条".replace("%d",n)}})]})}}return(0,l.jsx)(a,{})};function y(n){return(0,l.jsx)(n.tag,r(r({},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 f(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),f(n.parentNode,a);return a}class j 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,a=this.props,s=a.title,t=a.src,p=a.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:s||""})}),(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 z extends p.Component{componentDidMount(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&(0,e.l)(document.documentElement,0,f(a,-9))}}render(){return p.createElement("div",{className:"zandoc-react-container"},p.createElement(v,{style:""}),p.createElement(b,{html:'<h2 class="anchor-heading"><a href="#pagination-fen-ye">¶</a><a href="javascript:void(0)" id="pagination-fen-ye" class="anchor-point"></a>Pagination 分页</h2>\n<p>共有 3 种样式。</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>'}),p.createElement(j,{title:"基础用法",id:"Demo01basic",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Pagination</span><span class="token punctuation">,</span> <span class="token maybe-class-name">MiniPagination</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LitePagination</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">class</span> <span class="token class-name">Test</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n pageSize<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n current<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token parameter">options</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>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>options<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 function">render</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> current<span class="token punctuation">,</span> pageSize <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</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>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">Pagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">101</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">LitePagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">101</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MiniPagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">101</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</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>div</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<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">Test</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(k)),p.createElement(j,{title:"修改分页大小",id:"Demo02dynamicpagesize",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Pagination</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 constant">PAGE_SIZE_OPTIONS</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n pageSize<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n current<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token parameter">options</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>options<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 function">render</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> current<span class="token punctuation">,</span> pageSize <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</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>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">Pagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSizeOptions</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">PAGE_SIZE_OPTIONS</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">101</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</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>div</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<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">Test</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(j,{title:"无数据",id:"Demo03empty",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Pagination</span><span class="token punctuation">,</span> <span class="token maybe-class-name">MiniPagination</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LitePagination</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">class</span> <span class="token class-name">Test</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n pageSize<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n current<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token parameter">options</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>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>options<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 function">render</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> current<span class="token punctuation">,</span> pageSize <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</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>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">Pagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">LitePagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MiniPagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</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>div</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<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">Test</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(j,{title:"格式化总数展示",id:"Demo04format",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Pagination</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">class</span> <span class="token class-name">Test</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n pageSize<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n current<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token parameter">options</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>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>options<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 function">render</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> current<span class="token punctuation">,</span> pageSize <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</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>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">Pagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">101</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">formatTotal</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 parameter">total</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token string">\'一百零一\'</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</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>div</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<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">Test</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(m)),p.createElement(j,{title:"最后一页帮助提示",id:"Demo05lastpagehelp",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Pagination</span><span class="token punctuation">,</span> <span class="token maybe-class-name">MiniPagination</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LitePagination</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 constant">TOTAL</span> <span class="token operator">=</span> <span class="token number">101</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n pageSize<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n current<span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token parameter">options</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>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>options<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 function">render</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> current<span class="token punctuation">,</span> pageSize <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</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>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">Pagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">TOTAL</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">lastPageHelp</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n content<span class="token operator">:</span> <span class="token string">\'数据最多支持查看 %d 条\'</span><span class="token punctuation">.</span><span class="token method function property-access">replace</span><span class="token punctuation">(</span><span class="token string">\'%d\'</span><span class="token punctuation">,</span> <span class="token constant">TOTAL</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">LitePagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">TOTAL</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">lastPageHelp</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n content<span class="token operator">:</span> <span class="token string">\'数据最多支持查看 %d 条\'</span><span class="token punctuation">.</span><span class="token method function property-access">replace</span><span class="token punctuation">(</span><span class="token string">\'%d\'</span><span class="token punctuation">,</span> <span class="token constant">TOTAL</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MiniPagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">TOTAL</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">lastPageHelp</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n content<span class="token operator">:</span> <span class="token string">\'数据最多支持查看 %d 条\'</span><span class="token punctuation">.</span><span class="token method function property-access">replace</span><span class="token punctuation">(</span><span class="token string">\'%d\'</span><span class="token punctuation">,</span> <span class="token constant">TOTAL</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</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>div</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<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">Test</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="#pagination">¶</a><a href="javascript:void(0)" id="pagination" class="anchor-point"></a>Pagination</h4>\n<p>⚠️ 注意：API 不向下兼容老版的分页组件。</p>\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>onChange</td>\n<td>翻页和分页大小改变时的回调</td>\n<td><code>({pageSize: number, current: number}) => any</code></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>current</td>\n<td>当前页数</td>\n<td><code>number</code></td>\n<td><code>1</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>total</td>\n<td>总个数</td>\n<td><code>number</code></td>\n<td><code>0</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>formatTotal</td>\n<td>格式化展示的总数</td>\n<td><code>(total: number) => React.ReactNode</code></td>\n<td><code>identity</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>每页个数</td>\n<td><code>number</code></td>\n<td><code>10</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSizeOptions</td>\n<td>分页选项</td>\n<td><code>Array<number></code>\n \n|\n \n<code>Array<{text: node, value: number}></code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>showQuickJumper</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>showSizeChanger</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>buttonBordered</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>lastPageHelp</td>\n<td>最后一页时下一页按钮的帮助提示</td>\n<td><code>IPopProps</code></td>\n<td>默认样式</td>\n<td>否</td>\n</tr>\n<tr>\n<td>className</td>\n<td>自定义额外类名</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="#litepagination">¶</a><a href="javascript:void(0)" id="litepagination" class="anchor-point"></a>LitePagination</h4>\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>onChange</td>\n<td>翻页和分页大小改变时的回调</td>\n<td><code>({pageSize: number, current: number}) => any</code></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>current</td>\n<td>当前页数</td>\n<td><code>number</code></td>\n<td><code>1</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>total</td>\n<td>总个数</td>\n<td><code>number</code></td>\n<td><code>0</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>每页个数</td>\n<td><code>number</code></td>\n<td><code>10</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSizeOptions</td>\n<td>分页选项</td>\n<td><code>Array<number></code>\n \n|\n \n<code>Array<{text: node, value: number}></code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>showQuickJumper</td>\n<td>是否可以快速跳转到指定页</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>showSizeChanger</td>\n<td>是否可以改变分页大小</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>buttonBordered</td>\n<td>按钮是否有边框</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>lastPageHelp</td>\n<td>最后一页时下一页按钮的帮助提示</td>\n<td><code>IPopProps</code></td>\n<td>默认样式</td>\n<td>否</td>\n</tr>\n<tr>\n<td>className</td>\n<td>自定义额外类名</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="#minipagination">¶</a><a href="javascript:void(0)" id="minipagination" class="anchor-point"></a>MiniPagination</h4>\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>onChange</td>\n<td>翻页和分页大小改变时的回调</td>\n<td><code>({pageSize: number, current: number}) => any</code></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>current</td>\n<td>当前页数</td>\n<td><code>number</code></td>\n<td><code>1</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>total</td>\n<td>总个数</td>\n<td><code>number</code></td>\n<td><code>0</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>每页个数</td>\n<td><code>number</code></td>\n<td><code>10</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>buttonBordered</td>\n<td>按钮是否有边框</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>lastPageHelp</td>\n<td>最后一页时下一页按钮的帮助提示</td>\n<td><code>IPopProps</code></td>\n<td>默认样式</td>\n<td>否</td>\n</tr>\n<tr>\n<td>className</td>\n<td>自定义额外类名</td>\n<td><code>string</code></td>\n<td></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>'}))}}},82148:(n,a,s)=>{"use strict";s.d(a,{w:()=>o,Z:()=>c});var t=s(59312),p=s(8234);function e(n){var a=n.current,s=n.total,t=(0,p.J)(n),e=t.min,o=t.max,c=o-e+1+2,u=new Array(c);u[0]={type:"left-arrow",disabled:a<=1||s<=0};for(var l=e;l<=o;l++)u[l-e+1]={type:"number",page:l,selected:a===l};return u[c-1]={type:"right-arrow",disabled:a>=o||s<=0},u}var o=function(n){function a(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(a,n),Object.defineProperty(a.prototype,"name",{get:function(){return"lite"},enumerable:!1,configurable:!0}),Object.defineProperty(a.prototype,"layoutFn",{get:function(){return e},enumerable:!1,configurable:!0}),a.defaultProps={current:1,pageSize:10,buttonBordered:!1,showQuickJumper:!1,showSizeChanger:!1},a}(s(72645).Z),c=o},31770:(n,a,s)=>{"use strict";s.d(a,{t:()=>o,Z:()=>c});var t=s(59312),p=s(8234);function e(n){var a=n.pageSize,s=n.total,e=n.current,o=Math.ceil(s/a);if(o<=5){var c=2+o,u=new Array(c);u[0]={type:"left-arrow",disabled:e<=1||s<=0},u[c-1]={type:"right-arrow",disabled:e>=o||s<=0};for(var l=1;l<=o;l++)u[l]={type:"number",page:l,selected:e===l};return u}var i=[{type:"left-arrow",disabled:e<=1||s<=0},{type:"number",page:1,selected:1===e||s<=0}];e>4&&i.push({type:"double-left-arrow"});var r=(0,p.J)((0,t.pi)((0,t.pi)({},n),{startDelta:1,endDelta:-1})),k=r.min,d=r.max;for(l=k;l<=d;l++)i.push({type:"number",page:l,selected:e===l});return e<o-3&&i.push({type:"double-right-arrow"}),i.push({type:"number",page:o,selected:e===o},{type:"right-arrow",disabled:e>=o||s<=0}),function(n,a){if(n.length<4)return n;var s=n[1],t=n[2],p=n[3];if("double-left-arrow"===t.type&&"number"===s.type&&"number"===p.type){var e=p.page-s.page;if(2===e){var o=s.page+1;n[2]={type:"number",page:o,selected:a===o}}else 1===e&&n.splice(2,1)}}(i,e),function(n,a){if(n.length<5)return n;var s=n.length,t=n[s-2],p=n[s-3],e=n[s-4];if("double-right-arrow"===p.type&&"number"===e.type&&"number"===t.type){var o=t.page-e.page;if(2===o){var c=e.page+1;n[s-3]={type:"number",page:c,selected:c===a}}else 1===o&&n.splice(s-3,1)}}(i,e),i}var o=function(n){function a(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(a,n),Object.defineProperty(a.prototype,"name",{get:function(){return"normal"},enumerable:!1,configurable:!0}),Object.defineProperty(a.prototype,"layoutFn",{get:function(){return e},enumerable:!1,configurable:!0}),a.defaultProps={current:1,pageSize:10,buttonBordered:!0,showQuickJumper:!0,showSizeChanger:!0},a}(s(72645).Z),c=o},72645:(n,a,s)=>{"use strict";s.d(a,{Z:()=>z});var t=s(59312),p=s(24246),e=s(60042),o=s.n(e),c=s(27378),u=s(41925),l=s(7360),i=s(52074),r=(0,u.Z)((function(n,a){return(n||[]).map((function(n){return"number"==typeof n?{key:n,text:n+" "+a.items}:{key:n.value,text:n.text}}))})),k=function(n){return(0,p.jsx)("span",(0,t.pi)({className:"zent-pagination-count--"+n.type,"data-zv":"9.12.16"},{children:n.children}),void 0)},d=function(n){function a(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(a,n),a.prototype.render=function(){var n=this.props,a=n.total,s=n.formatTotal,e=n.pageSize,o=n.pageSizeOptions,c=n.onPageSizeChange;if(!o||0===o.length)return(0,p.jsx)(m,{total:a,formatTotal:s,pageSize:e},void 0);var u=s?s(a):a;return(0,p.jsx)(i.Z,(0,t.pi)({componentName:"Pagination"},{children:function(n){var a=(0,p.jsx)(g,{pageSizeOptions:o,onPageSizeChange:c,pageSize:e,i18n:n},void 0);return(0,p.jsx)("div",(0,t.pi)({className:"zent-pagination-page-size-changer","data-zv":"9.12.16"},{children:n.pageStats({select:a,total:u,Text:k})}),void 0)}}),void 0)},a}(c.Component),g=function(n){function a(){var a=null!==n&&n.apply(this,arguments)||this;return a.onChange=function(n){var s=n.key;a.props.onPageSizeChange(s)},a}return(0,t.ZT)(a,n),a.prototype.render=function(){var n=this.props,a=n.pageSize,s=n.i18n,t=n.pageSizeOptions,e=r(t,s);return(0,p.jsx)(l.Z,{width:s.selectWidth,options:e,value:{key:a,text:a+" "+s.items},onChange:this.onChange},void 0)},a}(c.Component),m=function(n){function a(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(a,n),a.prototype.render=function(){var n=this.props,a=n.total,s=n.formatTotal,e=n.pageSize,o=s?s(a):a;return(0,p.jsx)(i.Z,(0,t.pi)({componentName:"Pagination"},{children:function(n){return(0,p.jsx)("div",(0,t.pi)({className:"zent-pagination-page-size-changer","data-zv":"9.12.16"},{children:n.pageStatsStatic({total:o,pageSize:e,Text:k})}),void 0)}}),void 0)},a}(c.Component),h=s(88510),y=s(90347),b=function(n){function a(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(a,n),a.prototype.render=function(){var n,a=this.props,s=a.selected,e=a.bordered,c=(0,t._T)(a,["selected","bordered"]);return n=s?"primary":"default",(0,p.jsx)(y.ZP,(0,t.pi)({},c,{type:n,className:o()("zent-pagination-page-number-button","zent-pagination-button--layout",{"zent-pagination-page-button--no-border":!e})}),void 0)},a.defaultProps={selected:!1,bordered:!0},a}(c.Component),v=function(n){function a(){var a=null!==n&&n.apply(this,arguments)||this;return a.state={activeDoubleArrowButton:""},a.onPrevPage=a.jumpToPageDelta(-1,a.resetActiveDoubleArrowButton),a.onNextPage=a.jumpToPageDelta(1,a.resetActiveDoubleArrowButton),a.onFastForwardPrevPage=a.jumpToPageDelta(-5,(function(){a.setState({activeDoubleArrowButton:"left"})})),a.onFastForwardNextPage=a.jumpToPageDelta(5,(function(){a.setState({activeDoubleArrowButton:"right"})})),a.resetActiveDoubleArrowButton=function(){a.setState({activeDoubleArrowButton:""})},a}return(0,t.ZT)(a,n),a.prototype.render=function(){var n=this,a=this.props,s=a.layout,e=a.buttonBordered,o=a.lastPageHelp,c=this.state.activeDoubleArrowButton;return(0,p.jsx)("div",(0,t.pi)({className:"zent-pagination-page-list--normal","data-zv":"9.12.16"},{children:s.map((function(a){var s=a.type;if("number"===s){var u=a.page,l=a.selected;return(0,p.jsx)(b,(0,t.pi)({selected:l,bordered:e,onClick:n.onPageNumberClick(u)},{children:u}),"page-"+u)}return"left-arrow"===s?(0,p.jsx)(h.Z,{direction:"left",disabled:a.disabled,bordered:e,onClick:n.onPrevPage},s):"right-arrow"===s?(0,p.jsx)(h.Z,{direction:"right",disabled:a.disabled,bordered:e,onClick:n.onNextPage,disabledHelp:o},s):"double-left-arrow"===s?(0,p.jsx)(h.Z,{direction:"left",double:!0,active:"left"===c,bordered:e,onClick:n.onFastForwardPrevPage},s):"double-right-arrow"===s?(0,p.jsx)(h.Z,{direction:"right",double:!0,active:"right"===c,bordered:e,onClick:n.onFastForwardNextPage},s):null}))}),void 0)},a}(s(28645).Z),f=s(80964),j=function(n){function a(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(a,n),a.prototype.render=function(){var n=this.state.value,a=(0,p.jsx)(f.Y,{integer:!0,value:n,onChange:this.onChange,onPressEnter:this.onConfirm,width:56},void 0);return(0,p.jsx)(i.Z,(0,t.pi)({componentName:"Pagination"},{children:function(n){return(0,p.jsx)("div",(0,t.pi)({className:"zent-pagination-page-jumper","data-zv":"9.12.16"},{children:n.jumpTo({input:a})}),void 0)}}),void 0)},a.prototype.handleJump=function(n){this.props.onJump(n),this.setState({value:null})},a}(s(17840).Z),z=function(n){function a(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(a,n),a.prototype.render=function(){var n=this.getLayout(this.props),a=this.props,s=a.current,e=a.pageSize,c=a.pageSizeOptions,u=a.showQuickJumper,l=a.showSizeChanger,i=a.buttonBordered,r=a.className,k=a.formatTotal,g=a.lastPageHelp,m=this.getTotal();return(0,p.jsxs)("div",(0,t.pi)({className:o()("zent-pagination zent-pagination--"+this.name,r),"data-zv":"9.12.16"},{children:[l&&(0,p.jsx)(d,{pageSize:e,total:m,formatTotal:k,pageSizeOptions:c,onPageSizeChange:this.onPageSizeChange},void 0),(0,p.jsx)(v,{layout:n,current:s,buttonBordered:i,onPageChange:this.onPageChange,lastPageHelp:g},void 0),u&&(0,p.jsx)(j,{onJump:this.onPageChange},void 0)]}),void 0)},a}(s(97714).Z)},8234:(n,a,s)=>{"use strict";function t(n){var a=n.pageSize,s=n.total,t=n.current,p=n.startDelta,e=n.endDelta,o=1+(p||0),c=Math.ceil(s/a)+(e||0),u=Math.max(o,t-2),l=Math.min(t+2,c),i=l-u+1;if(i<5){var r=5-i;u>o&&(u=Math.max(o,u-r)),l<c&&(l=Math.min(l+r,c))}return{min:u,max:l}}s.d(a,{J:()=>t})},7360:(n,a,s)=>{"use strict";var t=s(95388);a.Z=t.Z}}]);