dtd/es/pagination/rc-pagination/Pagination.js

根据数梦工场视觉规范打造的组件库，感谢react-components和ant design

import _classCallCheck from"babel-runtime/helpers/classCallCheck";import _createClass from"babel-runtime/helpers/createClass";import _possibleConstructorReturn from"babel-runtime/helpers/possibleConstructorReturn";import _inherits from"babel-runtime/helpers/inherits";import*as React from"react";import*as PropTypes from"prop-types";import Pager from"./Pager";import Options from"./Options";import KEYCODE from"./KeyCode";import LOCALE from"./locale/zh_CN";function noop(){}function isInteger(e){return"number"==typeof e&&isFinite(e)&&Math.floor(e)===e}function defaultItemRender(e,t,n){return n}var Pagination=function(e){function t(e){_classCallCheck(this,t);var n=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));n.savePaginationNode=function(e){n.paginationNode=e},n.calculatePage=function(e){var t=e,a=n.props.total||0;return void 0===t&&(t=n.state.pageSize),Math.floor((a-1)/t)+1},n.isValid=function(e){return isInteger(e)&&e>=1&&e!==n.state.current},n.handleKeyDown=function(e){e.keyCode!==KEYCODE.ARROW_UP&&e.keyCode!==KEYCODE.ARROW_DOWN||e.preventDefault()},n.handleKeyUp=function(e){var t=e.target.value,a=n.state.currentInputValue,r=void 0;(r=""===t?t:isNaN(Number(t))?a:Number(t))!==a&&n.setState({currentInputValue:r}),e.keyCode===KEYCODE.ENTER?n.handleChange(r):e.keyCode===KEYCODE.ARROW_UP?n.handleChange(r-1):e.keyCode===KEYCODE.ARROW_DOWN&&n.handleChange(r+1)},n.changePageSize=function(e){var t=n.state.current,a=n.calculatePage(e);t=t>a?a:t,"number"==typeof e&&("pageSize"in n.props||n.setState({pageSize:e}),"current"in n.props||n.setState({current:t,currentInputValue:t}));var r=n.props.onShowSizeChange;r&&r(t,e)},n.handleChange=function(e){var t=e;if(n.isValid(t)){t>n.calculatePage()&&(t=n.calculatePage()),"current"in n.props||n.setState({current:t,currentInputValue:t});var a=n.state.pageSize;return n.props.onChange&&n.props.onChange(t,a),t}return n.state.current},n.prev=function(){n.hasPrev()&&n.handleChange(n.state.current-1)},n.next=function(){n.hasNext()&&n.handleChange(n.state.current+1)},n.jumpPrev=function(){n.handleChange(n.getJumpPrevPage())},n.jumpNext=function(){n.handleChange(n.getJumpNextPage())},n.hasPrev=function(){return n.state.current>1},n.hasNext=function(){return n.state.current<n.calculatePage()},n.runIfEnter=function(e,t){for(var n=arguments.length,a=Array(n>2?n-2:0),r=2;r<n;r++)a[r-2]=arguments[r];"Enter"!==e.key&&13!==e.charCode||t.apply(void 0,a)},n.runIfEnterPrev=function(e){n.runIfEnter(e,n.prev)},n.runIfEnterNext=function(e){n.runIfEnter(e,n.next)},n.runIfEnterJumpPrev=function(e){n.runIfEnter(e,n.jumpPrev)},n.runIfEnterJumpNext=function(e){n.runIfEnter(e,n.jumpNext)},n.handleGoTO=function(e){e.keyCode!==KEYCODE.ENTER&&"click"!==e.type||n.handleChange(n.state.currentInputValue)};var a=e.onChange!==noop;"current"in e&&!a&&console.warn("Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.");var r=e.defaultCurrent;"current"in e&&(r=e.current);var s=e.defaultPageSize;return"pageSize"in e&&(s=e.pageSize),n.state={current:r,currentInputValue:r,pageSize:s},n}return _inherits(t,e),_createClass(t,[{key:"componentWillReceiveProps",value:function(e){if("current"in e&&this.setState({current:e.current,currentInputValue:e.current}),"pageSize"in e){var t={},n=this.state.current,a=this.calculatePage(e.pageSize);n=n>a?a:n,"current"in e||(t.current=n,t.currentInputValue=n),t.pageSize=e.pageSize,this.setState(t)}}},{key:"componentDidUpdate",value:function(e,t){var n=this.props.prefixCls;if(t.current!==this.state.current&&this.paginationNode){var a=this.paginationNode.querySelector("."+n+"-item-"+t.current);a&&document.activeElement===a&&a.blur()}}},{key:"getJumpPrevPage",value:function(){return Math.max(1,this.state.current-(this.props.showLessItems?3:5))}},{key:"getJumpNextPage",value:function(){return Math.min(this.calculatePage(),this.state.current+(this.props.showLessItems?3:5))}},{key:"render",value:function(){if(!0===this.props.hideOnSinglePage&&(this.props.total||0)<=this.state.pageSize)return null;var e=this.props,t=e.locale,n=void 0===t?{}:t,a=e.itemRender,r=void 0===a?defaultItemRender:a,s=e.pageSizeOptions,i=void 0===s?["10","20","30","40"]:s,o=e.prefixCls,l=this.calculatePage(),p=[],c=null,u=null,h=null,m=null,g=null,f=e.showQuickJumper&&e.goButton,P=e.showLessItems?1:2,C=this.state,d=C.current,v=C.pageSize,y=d-1>0?d-1:0,E=d+1<l?d+1:l;if(e.simple)return f&&(g="boolean"==typeof f?React.createElement("button",{type:"button",onClick:this.handleGoTO,onKeyUp:this.handleGoTO},n.jump_to_confirm):React.createElement("span",{onClick:this.handleGoTO,onKeyUp:this.handleGoTO},f),g=React.createElement("li",{title:e.showTitle?""+n.jump_to+this.state.current+"/"+l:"",className:o+"-simple-pager"},g)),React.createElement("ul",{className:o+" "+o+"-simple "+e.className,style:e.style},React.createElement("li",{title:e.showTitle?n.prev_page:"",onClick:this.prev,tabIndex:this.hasPrev()?0:-1,onKeyPress:this.runIfEnterPrev,className:(this.hasPrev()?"":o+"-disabled")+" "+o+"-prev","aria-disabled":!this.hasPrev()},r(y,"prev",React.createElement("a",{className:o+"-item-link"}))),React.createElement("li",{title:e.showTitle?this.state.current+"/"+l:"",className:o+"-simple-pager"},React.createElement("input",{type:"text",value:this.state.currentInputValue,onKeyDown:this.handleKeyDown,onKeyUp:this.handleKeyUp,onChange:this.handleKeyUp,size:3}),React.createElement("span",{className:o+"-slash"},"／"),l),React.createElement("li",{title:e.showTitle?n.next_page:"",onClick:this.next,tabIndex:this.hasPrev()?0:-1,onKeyPress:this.runIfEnterNext,className:(this.hasNext()?"":o+"-disabled")+" "+o+"-next","aria-disabled":!this.hasNext()},r(E,"next",React.createElement("a",{className:o+"-item-link"}))),g);if(l<=5+2*P)for(var x=1;x<=l;x++){var N=this.state.current===x;p.push(React.createElement(Pager,{locale:n,rootPrefixCls:o,onClick:this.handleChange,onKeyPress:this.runIfEnter,key:x,page:x,active:N,showTitle:e.showTitle,itemRender:r}))}else{var T=e.showLessItems?n.prev_3:n.prev_5,R=e.showLessItems?n.next_3:n.next_5;e.showPrevNextJumpers&&(c=React.createElement("li",{title:e.showTitle?T:"",key:"prev",onClick:this.jumpPrev,tabIndex:0,onKeyPress:this.runIfEnterJumpPrev,className:o+"-jump-prev"},r(this.getJumpPrevPage(),"jump-prev",React.createElement("a",{className:o+"-item-link"}))),u=React.createElement("li",{title:e.showTitle?R:"",key:"next",tabIndex:0,onClick:this.jumpNext,onKeyPress:this.runIfEnterJumpNext,className:o+"-jump-next"},r(this.getJumpNextPage(),"jump-next",React.createElement("a",{className:o+"-item-link"})))),m=React.createElement(Pager,{locale:n,rootPrefixCls:o,onClick:this.handleChange,onKeyPress:this.runIfEnter,key:l,page:l,active:!1,showTitle:e.showTitle,itemRender:r}),h=React.createElement(Pager,{locale:n,rootPrefixCls:o,onClick:this.handleChange,onKeyPress:this.runIfEnter,key:1,page:1,active:!1,showTitle:e.showTitle,itemRender:r});var b=Math.max(1,d-P),S=Math.min(d+P,l);d-1<=P&&(S=1+2*P),l-d<=P&&(b=l-2*P);for(var w=b;w<=S;w++){var k=d===w;p.push(React.createElement(Pager,{locale:n,rootPrefixCls:o,onClick:this.handleChange,onKeyPress:this.runIfEnter,key:w,page:w,active:k,showTitle:e.showTitle,itemRender:r}))}d-1>=2*P&&3!==d&&(p[0]=React.cloneElement(p[0],{className:o+"-item-after-jump-prev"}),p.unshift(c)),l-d>=2*P&&d!==l-2&&(p[p.length-1]=React.cloneElement(p[p.length-1],{className:o+"-item-before-jump-next"}),p.push(u)),1!==b&&p.unshift(h),S!==l&&p.push(m)}var I=null;if(e.showTotal){var z=e.total||0;I=React.createElement("li",{className:o+"-total-text"},e.showTotal(z,[(d-1)*v+1,d*v>z?z:d*v]))}var O=!this.hasPrev(),_=!this.hasNext();return React.createElement("ul",{className:o+" "+e.className,style:e.style,ref:this.savePaginationNode},I,React.createElement(Options,{locale:n,rootPrefixCls:o,selectComponentClass:e.selectComponentClass,selectPrefixCls:e.selectPrefixCls,changeSize:this.props.showSizeChanger?this.changePageSize:null,current:this.state.current,pageSize:this.state.pageSize,pageSizeOptions:i,getPopupContainer:e.getPopupContainer,quickGo:null,goButton:!1}),React.createElement("li",{title:e.showTitle?n.prev_page:"",onClick:this.prev,tabIndex:O?void 0:0,onKeyPress:this.runIfEnterPrev,className:(O?o+"-disabled":"")+" "+o+"-prev","aria-disabled":O},r(y,"prev",React.createElement("a",{className:o+"-item-link"}))),p,React.createElement("li",{title:e.showTitle?n.next_page:"",onClick:this.next,tabIndex:_?void 0:0,onKeyPress:this.runIfEnterNext,className:(_?o+"-disabled":"")+" "+o+"-next","aria-disabled":_},r(E,"next",React.createElement("a",{className:o+"-item-link"}))),React.createElement(Options,{locale:n,rootPrefixCls:o,selectComponentClass:e.selectComponentClass,selectPrefixCls:e.selectPrefixCls,changeSize:null,current:this.state.current,pageSize:this.state.pageSize,pageSizeOptions:i,quickGo:this.props.showQuickJumper?this.handleChange:null,goButton:f}))}}]),t}(React.Component);export default Pagination;Pagination.propTypes={prefixCls:PropTypes.string,current:PropTypes.number,defaultCurrent:PropTypes.number,total:PropTypes.number,pageSize:PropTypes.number,defaultPageSize:PropTypes.number,onChange:PropTypes.func,hideOnSinglePage:PropTypes.bool,showSizeChanger:PropTypes.bool,showLessItems:PropTypes.bool,onShowSizeChange:PropTypes.func,selectComponentClass:PropTypes.func,showPrevNextJumpers:PropTypes.bool,showQuickJumper:PropTypes.oneOfType([PropTypes.bool,PropTypes.object]),showTitle:PropTypes.bool,pageSizeOptions:PropTypes.arrayOf(PropTypes.string),showTotal:PropTypes.func,locale:PropTypes.object,style:PropTypes.object,itemRender:PropTypes.func,getPopupContainer:PropTypes.func},Pagination.defaultProps={defaultCurrent:1,total:0,defaultPageSize:10,onChange:noop,className:"",selectPrefixCls:"rc-select",prefixCls:"rc-pagination",selectComponentClass:null,hideOnSinglePage:!1,showPrevNextJumpers:!0,showQuickJumper:!1,showSizeChanger:!1,showLessItems:!1,showTitle:!0,onShowSizeChange:noop,locale:LOCALE,style:{},itemRender:defaultItemRender,getPopupContainer:function(e){return e.parentNode}};