'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); var _defineProperty3 = _interopRequireDefault(_defineProperty2); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _createClass2 = require('babel-runtime/helpers/createClass'); var _createClass3 = _interopRequireDefault(_createClass2); var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _Pager = require('./Pager'); var _Pager2 = _interopRequireDefault(_Pager); var _Options = require('./Options'); var _Options2 = _interopRequireDefault(_Options); var _KeyCode = require('./KeyCode'); var _KeyCode2 = _interopRequireDefault(_KeyCode); var _zh_CN = require('./locale/zh_CN'); var _zh_CN2 = _interopRequireDefault(_zh_CN); var _reactLifecyclesCompat = require('react-lifecycles-compat'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function noop() {} function isInteger(value) { return typeof value === 'number' && isFinite(value) && Math.floor(value) === value; } function defaultItemRender(page, type, element) { return element; } function calculatePage(p, state, props) { var pageSize = p; if (typeof pageSize === 'undefined') { pageSize = state.pageSize; } return Math.floor((props.total - 1) / pageSize) + 1; } var Pagination = function (_React$Component) { (0, _inherits3['default'])(Pagination, _React$Component); function Pagination(props) { (0, _classCallCheck3['default'])(this, Pagination); var _this = (0, _possibleConstructorReturn3['default'])(this, (Pagination.__proto__ || Object.getPrototypeOf(Pagination)).call(this, props)); _initialiseProps.call(_this); var hasOnChange = props.onChange !== noop; var hasCurrent = 'current' in props; if (hasCurrent && !hasOnChange) { console.warn('Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.'); // eslint-disable-line } var current = props.defaultCurrent; if ('current' in props) { current = props.current; } var pageSize = props.defaultPageSize; if ('pageSize' in props) { pageSize = props.pageSize; } current = Math.min(current, calculatePage(pageSize, undefined, props)); _this.state = { current: current, currentInputValue: current, pageSize: pageSize }; return _this; } (0, _createClass3['default'])(Pagination, [{ key: 'componentDidUpdate', value: function componentDidUpdate(prevProps, prevState) { // When current page change, fix focused style of prev item // A hacky solution of https://github.com/ant-design/ant-design/issues/8948 var prefixCls = this.props.prefixCls; if (prevState.current !== this.state.current && this.paginationNode) { var lastCurrentNode = this.paginationNode.querySelector('.' + prefixCls + '-item-' + prevState.current); if (lastCurrentNode && document.activeElement === lastCurrentNode) { lastCurrentNode.blur(); } } } }, { key: 'getValidValue', value: function getValidValue(e) { var inputValue = e.target.value; var allPages = calculatePage(undefined, this.state, this.props); var currentInputValue = this.state.currentInputValue; var value = void 0; if (inputValue === '') { value = inputValue; } else if (isNaN(Number(inputValue))) { value = currentInputValue; } else if (inputValue >= allPages) { value = allPages; } else { value = Number(inputValue); } return value; } }, { key: 'render', value: function render() { var _props = this.props, prefixCls = _props.prefixCls, className = _props.className, disabled = _props.disabled; // When hideOnSinglePage is true and there is only 1 page, hide the pager if (this.props.hideOnSinglePage === true && this.props.total <= this.state.pageSize) { return null; } var props = this.props; var locale = props.locale; var allPages = calculatePage(undefined, this.state, this.props); var pagerList = []; var jumpPrev = null; var jumpNext = null; var firstPager = null; var lastPager = null; var gotoButton = null; var goButton = props.showQuickJumper && props.showQuickJumper.goButton; var pageBufferSize = props.showLessItems ? 1 : 2; var _state = this.state, current = _state.current, pageSize = _state.pageSize; var prevPage = current - 1 > 0 ? current - 1 : 0; var nextPage = current + 1 < allPages ? current + 1 : allPages; var dataOrAriaAttributeProps = Object.keys(props).reduce(function (prev, key) { if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role') { prev[key] = props[key]; } return prev; }, {}); if (props.simple) { if (goButton) { if (typeof goButton === 'boolean') { gotoButton = _react2['default'].createElement( 'button', { type: 'button', onClick: this.handleGoTO, onKeyUp: this.handleGoTO }, locale.jump_to_confirm ); } else { gotoButton = _react2['default'].createElement( 'span', { onClick: this.handleGoTO, onKeyUp: this.handleGoTO }, goButton ); } gotoButton = _react2['default'].createElement( 'li', { title: props.showTitle ? '' + locale.jump_to + this.state.current + '/' + allPages : null, className: prefixCls + '-simple-pager' }, gotoButton ); } return _react2['default'].createElement( 'ul', (0, _extends3['default'])({ className: prefixCls + ' ' + prefixCls + '-simple ' + props.className, style: props.style, ref: this.savePaginationNode }, dataOrAriaAttributeProps), _react2['default'].createElement( 'li', { title: props.showTitle ? locale.prev_page : null, onClick: this.prev, tabIndex: this.hasPrev() ? 0 : null, onKeyPress: this.runIfEnterPrev, className: (this.hasPrev() ? '' : prefixCls + '-disabled') + ' ' + prefixCls + '-prev', 'aria-disabled': !this.hasPrev() }, props.itemRender(prevPage, 'prev', this.getItemIcon(props.prevIcon)) ), _react2['default'].createElement( 'li', { title: props.showTitle ? this.state.current + '/' + allPages : null, className: prefixCls + '-simple-pager' }, _react2['default'].createElement('input', { type: 'text', value: this.state.currentInputValue, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onChange: this.handleKeyUp, size: '3' }), _react2['default'].createElement( 'span', { className: prefixCls + '-slash' }, '/' ), allPages ), _react2['default'].createElement( 'li', { title: props.showTitle ? locale.next_page : null, onClick: this.next, tabIndex: this.hasPrev() ? 0 : null, onKeyPress: this.runIfEnterNext, className: (this.hasNext() ? '' : prefixCls + '-disabled') + ' ' + prefixCls + '-next', 'aria-disabled': !this.hasNext() }, props.itemRender(nextPage, 'next', this.getItemIcon(props.nextIcon)) ), gotoButton ); } if (allPages <= 5 + pageBufferSize * 2) { var pagerProps = { locale: locale, rootPrefixCls: prefixCls, onClick: this.handleChange, onKeyPress: this.runIfEnter, showTitle: props.showTitle, itemRender: props.itemRender }; if (!allPages) { pagerList.push(_react2['default'].createElement(_Pager2['default'], (0, _extends3['default'])({}, pagerProps, { key: 'noPager', page: allPages, className: prefixCls + '-disabled' }))); } for (var i = 1; i <= allPages; i++) { var active = this.state.current === i; pagerList.push(_react2['default'].createElement(_Pager2['default'], (0, _extends3['default'])({}, pagerProps, { key: i, page: i, active: active }))); } } else { var prevItemTitle = props.showLessItems ? locale.prev_3 : locale.prev_5; var nextItemTitle = props.showLessItems ? locale.next_3 : locale.next_5; if (props.showPrevNextJumpers) { var jumpPrevClassString = prefixCls + '-jump-prev'; if (props.jumpPrevIcon) { jumpPrevClassString += ' ' + prefixCls + '-jump-prev-custom-icon'; } jumpPrev = _react2['default'].createElement( 'li', { title: props.showTitle ? prevItemTitle : null, key: 'prev', onClick: this.jumpPrev, tabIndex: '0', onKeyPress: this.runIfEnterJumpPrev, className: jumpPrevClassString }, props.itemRender(this.getJumpPrevPage(), 'jump-prev', this.getItemIcon(props.jumpPrevIcon)) ); var jumpNextClassString = prefixCls + '-jump-next'; if (props.jumpNextIcon) { jumpNextClassString += ' ' + prefixCls + '-jump-next-custom-icon'; } jumpNext = _react2['default'].createElement( 'li', { title: props.showTitle ? nextItemTitle : null, key: 'next', tabIndex: '0', onClick: this.jumpNext, onKeyPress: this.runIfEnterJumpNext, className: jumpNextClassString }, props.itemRender(this.getJumpNextPage(), 'jump-next', this.getItemIcon(props.jumpNextIcon)) ); } lastPager = _react2['default'].createElement(_Pager2['default'], { locale: props.locale, last: true, rootPrefixCls: prefixCls, onClick: this.handleChange, onKeyPress: this.runIfEnter, key: allPages, page: allPages, active: false, showTitle: props.showTitle, itemRender: props.itemRender }); firstPager = _react2['default'].createElement(_Pager2['default'], { locale: props.locale, rootPrefixCls: prefixCls, onClick: this.handleChange, onKeyPress: this.runIfEnter, key: 1, page: 1, active: false, showTitle: props.showTitle, itemRender: props.itemRender }); var left = Math.max(1, current - pageBufferSize); var right = Math.min(current + pageBufferSize, allPages); if (current - 1 <= pageBufferSize) { right = 1 + pageBufferSize * 2; } if (allPages - current <= pageBufferSize) { left = allPages - pageBufferSize * 2; } for (var _i = left; _i <= right; _i++) { var _active = current === _i; pagerList.push(_react2['default'].createElement(_Pager2['default'], { locale: props.locale, rootPrefixCls: prefixCls, onClick: this.handleChange, onKeyPress: this.runIfEnter, key: _i, page: _i, active: _active, showTitle: props.showTitle, itemRender: props.itemRender })); } if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) { pagerList[0] = _react2['default'].cloneElement(pagerList[0], { className: prefixCls + '-item-after-jump-prev' }); pagerList.unshift(jumpPrev); } if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) { pagerList[pagerList.length - 1] = _react2['default'].cloneElement(pagerList[pagerList.length - 1], { className: prefixCls + '-item-before-jump-next' }); pagerList.push(jumpNext); } if (left !== 1) { pagerList.unshift(firstPager); } if (right !== allPages) { pagerList.push(lastPager); } } var totalText = null; if (props.showTotal) { totalText = _react2['default'].createElement( 'li', { className: prefixCls + '-total-text' }, props.showTotal(props.total, [props.total === 0 ? 0 : (current - 1) * pageSize + 1, current * pageSize > props.total ? props.total : current * pageSize]) ); } var prevDisabled = !this.hasPrev() || !allPages; var nextDisabled = !this.hasNext() || !allPages; return _react2['default'].createElement( 'ul', (0, _extends3['default'])({ className: (0, _classnames2['default'])(prefixCls, className, (0, _defineProperty3['default'])({}, prefixCls + '-disabled', disabled)), style: props.style, unselectable: 'unselectable', ref: this.savePaginationNode }, dataOrAriaAttributeProps), totalText, _react2['default'].createElement( 'li', { title: props.showTitle ? locale.prev_page : null, onClick: this.prev, tabIndex: prevDisabled ? null : 0, onKeyPress: this.runIfEnterPrev, className: (!prevDisabled ? '' : prefixCls + '-disabled') + ' ' + prefixCls + '-prev', 'aria-disabled': prevDisabled }, props.itemRender(prevPage, 'prev', this.getItemIcon(props.prevIcon)) ), pagerList, _react2['default'].createElement( 'li', { title: props.showTitle ? locale.next_page : null, onClick: this.next, tabIndex: nextDisabled ? null : 0, onKeyPress: this.runIfEnterNext, className: (!nextDisabled ? '' : prefixCls + '-disabled') + ' ' + prefixCls + '-next', 'aria-disabled': nextDisabled }, props.itemRender(nextPage, 'next', this.getItemIcon(props.nextIcon)) ), _react2['default'].createElement(_Options2['default'], { disabled: disabled, locale: props.locale, rootPrefixCls: prefixCls, selectComponentClass: props.selectComponentClass, selectPrefixCls: props.selectPrefixCls, changeSize: this.props.showSizeChanger ? this.changePageSize : null, current: this.state.current, pageSize: this.state.pageSize, pageSizeOptions: this.props.pageSizeOptions, quickGo: this.shouldDisplayQuickJumper() ? this.handleChange : null, goButton: goButton }) ); } }], [{ key: 'getDerivedStateFromProps', value: function getDerivedStateFromProps(props, prevState) { var newState = {}; if ('current' in props) { newState.current = props.current; if (props.current !== prevState.current) { newState.currentInputValue = newState.current; } } if ('pageSize' in props && props.pageSize !== prevState.pageSize) { var current = prevState.current; var newCurrent = calculatePage(props.pageSize, prevState, props); current = current > newCurrent ? newCurrent : current; if (!('current' in props)) { newState.current = current; newState.currentInputValue = current; } newState.pageSize = props.pageSize; } return newState; } /** * computed icon node that need to be rendered. * @param {React.ReactNode | React.ComponentType} icon received icon. * @returns {React.ReactNode} */ }]); return Pagination; }(_react2['default'].Component); Pagination.propTypes = { disabled: _propTypes2['default'].bool, prefixCls: _propTypes2['default'].string, className: _propTypes2['default'].string, current: _propTypes2['default'].number, defaultCurrent: _propTypes2['default'].number, total: _propTypes2['default'].number, pageSize: _propTypes2['default'].number, defaultPageSize: _propTypes2['default'].number, onChange: _propTypes2['default'].func, hideOnSinglePage: _propTypes2['default'].bool, showSizeChanger: _propTypes2['default'].bool, showLessItems: _propTypes2['default'].bool, onShowSizeChange: _propTypes2['default'].func, selectComponentClass: _propTypes2['default'].func, showPrevNextJumpers: _propTypes2['default'].bool, showQuickJumper: _propTypes2['default'].oneOfType([_propTypes2['default'].bool, _propTypes2['default'].object]), showTitle: _propTypes2['default'].bool, pageSizeOptions: _propTypes2['default'].arrayOf(_propTypes2['default'].string), showTotal: _propTypes2['default'].func, locale: _propTypes2['default'].object, style: _propTypes2['default'].object, itemRender: _propTypes2['default'].func, prevIcon: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].node]), nextIcon: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].node]), jumpPrevIcon: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].node]), jumpNextIcon: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].node]) }; Pagination.defaultProps = { defaultCurrent: 1, total: 0, defaultPageSize: 10, onChange: noop, className: '', selectPrefixCls: 'rc-select', prefixCls: 'rc-pagination', selectComponentClass: null, hideOnSinglePage: false, showPrevNextJumpers: true, showQuickJumper: false, showSizeChanger: false, showLessItems: false, showTitle: true, onShowSizeChange: noop, locale: _zh_CN2['default'], style: {}, itemRender: defaultItemRender }; var _initialiseProps = function _initialiseProps() { var _this2 = this; this.getJumpPrevPage = function () { return Math.max(1, _this2.state.current - (_this2.props.showLessItems ? 3 : 5)); }; this.getJumpNextPage = function () { return Math.min(calculatePage(undefined, _this2.state, _this2.props), _this2.state.current + (_this2.props.showLessItems ? 3 : 5)); }; this.getItemIcon = function (icon) { var prefixCls = _this2.props.prefixCls; var iconNode = icon || _react2['default'].createElement('a', { className: prefixCls + '-item-link' }); if (typeof icon === 'function') { iconNode = _react2['default'].createElement(icon, (0, _extends3['default'])({}, _this2.props)); } return iconNode; }; this.savePaginationNode = function (node) { _this2.paginationNode = node; }; this.isValid = function (page) { return isInteger(page) && page !== _this2.state.current; }; this.shouldDisplayQuickJumper = function () { var _props2 = _this2.props, showQuickJumper = _props2.showQuickJumper, pageSize = _props2.pageSize, total = _props2.total; if (total <= pageSize) { return false; } return showQuickJumper; }; this.handleKeyDown = function (e) { if (e.keyCode === _KeyCode2['default'].ARROW_UP || e.keyCode === _KeyCode2['default'].ARROW_DOWN) { e.preventDefault(); } }; this.handleKeyUp = function (e) { var value = _this2.getValidValue(e); var currentInputValue = _this2.state.currentInputValue; if (value !== currentInputValue) { _this2.setState({ currentInputValue: value }); } if (e.keyCode === _KeyCode2['default'].ENTER) { _this2.handleChange(value); } else if (e.keyCode === _KeyCode2['default'].ARROW_UP) { _this2.handleChange(value - 1); } else if (e.keyCode === _KeyCode2['default'].ARROW_DOWN) { _this2.handleChange(value + 1); } }; this.changePageSize = function (size) { var current = _this2.state.current; var newCurrent = calculatePage(size, _this2.state, _this2.props); current = current > newCurrent ? newCurrent : current; // fix the issue: // Once 'total' is 0, 'current' in 'onShowSizeChange' is 0, which is not correct. if (newCurrent === 0) { current = _this2.state.current; } if (typeof size === 'number') { if (!('pageSize' in _this2.props)) { _this2.setState({ pageSize: size }); } if (!('current' in _this2.props)) { _this2.setState({ current: current, currentInputValue: current }); } } _this2.props.onShowSizeChange(current, size); }; this.handleChange = function (p) { var disabled = _this2.props.disabled; var page = p; if (_this2.isValid(page) && !disabled) { var currentPage = calculatePage(undefined, _this2.state, _this2.props); if (page > currentPage) { page = currentPage; } else if (page < 1) { page = 1; } if (!('current' in _this2.props)) { _this2.setState({ current: page, currentInputValue: page }); } var pageSize = _this2.state.pageSize; _this2.props.onChange(page, pageSize); return page; } return _this2.state.current; }; this.prev = function () { if (_this2.hasPrev()) { _this2.handleChange(_this2.state.current - 1); } }; this.next = function () { if (_this2.hasNext()) { _this2.handleChange(_this2.state.current + 1); } }; this.jumpPrev = function () { _this2.handleChange(_this2.getJumpPrevPage()); }; this.jumpNext = function () { _this2.handleChange(_this2.getJumpNextPage()); }; this.hasPrev = function () { return _this2.state.current > 1; }; this.hasNext = function () { return _this2.state.current < calculatePage(undefined, _this2.state, _this2.props); }; this.runIfEnter = function (event, callback) { for (var _len = arguments.length, restParams = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { restParams[_key - 2] = arguments[_key]; } if (event.key === 'Enter' || event.charCode === 13) { callback.apply(undefined, restParams); } }; this.runIfEnterPrev = function (e) { _this2.runIfEnter(e, _this2.prev); }; this.runIfEnterNext = function (e) { _this2.runIfEnter(e, _this2.next); }; this.runIfEnterJumpPrev = function (e) { _this2.runIfEnter(e, _this2.jumpPrev); }; this.runIfEnterJumpNext = function (e) { _this2.runIfEnter(e, _this2.jumpNext); }; this.handleGoTO = function (e) { if (e.keyCode === _KeyCode2['default'].ENTER || e.type === 'click') { _this2.handleChange(_this2.state.currentInputValue); } }; }; (0, _reactLifecyclesCompat.polyfill)(Pagination); exports['default'] = Pagination; module.exports = exports['default'];