@alifd/next/lib/pagination/pagination.js

'use strict';

exports.__esModule = true;

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactLifecyclesCompat = require('react-lifecycles-compat');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _configProvider = require('../config-provider');

var _configProvider2 = _interopRequireDefault(_configProvider);

var _icon = require('../icon');

var _icon2 = _interopRequireDefault(_icon);

var _button = require('../button');

var _button2 = _interopRequireDefault(_button);

var _input = require('../input');

var _input2 = _interopRequireDefault(_input);

var _select = require('../select');

var _select2 = _interopRequireDefault(_select);

var _util = require('../util');

var _zhCn = require('../locale/zh-cn.js');

var _zhCn2 = _interopRequireDefault(_zhCn);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Option = _select2.default.Option;

var noop = function noop() {};

function correctCurrent(currentPage, total, currentPageSize) {
    var totalPage = getTotalPage(total, currentPageSize);
    return currentPage > totalPage ? totalPage : currentPage;
}

function getTotalPage(total, currentPageSize) {
    var totalPage = Math.ceil(total / currentPageSize);
    return totalPage <= 0 ? 1 : totalPage;
}

/**
 * Pagination
 */
var Pagination = (_temp = _class = function (_Component) {
    (0, _inherits3.default)(Pagination, _Component);

    function Pagination(props, context) {
        (0, _classCallCheck3.default)(this, Pagination);

        var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props, context));

        _this.handleJump = function (e) {
            var total = _this.props.total;
            var _this$state = _this.state,
                current = _this$state.current,
                currentPageSize = _this$state.currentPageSize,
                inputValue = _this$state.inputValue;

            var totalPage = getTotalPage(total, currentPageSize);
            var value = parseInt(inputValue, 10);

            if (isNaN(value)) {
                value = '';
            } else if (value < 1) {
                value = 1;
            } else if (value > totalPage) {
                value = totalPage;
            }

            if (value && value !== current) {
                _this.onPageItemClick(value, e);
            }

            _this.setState({
                inputValue: ''
            });
        };

        _this.state = {
            current: props.defaultCurrent || 1,
            currentPageSize: 0,
            inputValue: ''
        };
        return _this;
    }

    Pagination.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
        var current = props.current,
            total = props.total,
            pageSize = props.pageSize;

        var st = {};
        var newCurrent = correctCurrent(current || state.current, total, pageSize);
        if (state.current !== newCurrent) {
            st.current = newCurrent;
        }
        if (state.currentPageSize !== pageSize) {
            st.currentPageSize = pageSize;
        }

        return st;
    };

    Pagination.prototype.onPageItemClick = function onPageItemClick(page, e) {
        if (!('current' in this.props)) {
            this.setState({
                current: page
            });
        }
        this.props.onChange(page, e);
    };

    Pagination.prototype.onInputChange = function onInputChange(value) {
        this.setState({
            inputValue: value
        });
    };

    Pagination.prototype.onSelectSize = function onSelectSize(pageSize) {
        var newState = {
            currentPageSize: pageSize
        };

        var totalPage = getTotalPage(this.props.total, pageSize);
        if (this.state.current > totalPage) {
            newState.current = totalPage;
        }

        this.setState(newState);
        this.props.onPageSizeChange(pageSize);
    };

    Pagination.prototype.renderPageTotal = function renderPageTotal() {
        var _props = this.props,
            prefix = _props.prefix,
            total = _props.total,
            totalRender = _props.totalRender;
        var _state = this.state,
            currentPageSize = _state.currentPageSize,
            current = _state.current;

        var range = [(current - 1) * currentPageSize + 1, current * currentPageSize];

        return _react2.default.createElement(
            'div',
            { className: prefix + 'pagination-total' },
            totalRender(total, range)
        );
    };

    Pagination.prototype.renderPageItem = function renderPageItem(index) {
        var _cx;

        var _props2 = this.props,
            prefix = _props2.prefix,
            size = _props2.size,
            link = _props2.link,
            pageNumberRender = _props2.pageNumberRender,
            total = _props2.total,
            pageSize = _props2.pageSize,
            locale = _props2.locale;
        var current = this.state.current;


        var totalPage = getTotalPage(total, pageSize);
        var isCurrent = parseInt(index, 10) === current;
        var props = {
            size: size,
            className: (0, _classnames2.default)((_cx = {}, _cx[prefix + 'pagination-item'] = true, _cx[prefix + 'current'] = isCurrent, _cx)),
            onClick: isCurrent ? noop : this.onPageItemClick.bind(this, index)
        };
        if (link) {
            props.component = 'a';
            props.href = link.replace('{page}', index);
        }

        return _react2.default.createElement(
            _button2.default,
            (0, _extends3.default)({
                'aria-label': _util.str.template(locale.total, {
                    current: index,
                    total: totalPage
                })
            }, props, {
                key: index
            }),
            pageNumberRender(index)
        );
    };

    Pagination.prototype.renderPageFirst = function renderPageFirst(current) {
        var _cx2;

        var _props3 = this.props,
            prefix = _props3.prefix,
            size = _props3.size,
            shape = _props3.shape,
            locale = _props3.locale;


        var isFirst = current <= 1;
        var props = {
            disabled: isFirst,
            size: size,
            className: (0, _classnames2.default)((_cx2 = {}, _cx2[prefix + 'pagination-item'] = true, _cx2[prefix + 'prev'] = true, _cx2)),
            onClick: this.onPageItemClick.bind(this, current - 1)
        };

        var icon = _react2.default.createElement(_icon2.default, { type: 'arrow-left', className: prefix + 'pagination-icon-prev' });

        return _react2.default.createElement(
            _button2.default,
            (0, _extends3.default)({}, props, { 'aria-label': _util.str.template(locale.labelPrev, { current: current }) }),
            icon,
            shape === 'arrow-only' || shape === 'arrow-prev-only' || shape === 'no-border' ? '' : locale.prev
        );
    };

    Pagination.prototype.renderPageLast = function renderPageLast(current, totalPage) {
        var _cx3;

        var _props4 = this.props,
            prefix = _props4.prefix,
            size = _props4.size,
            shape = _props4.shape,
            locale = _props4.locale;


        var isLast = current >= totalPage;
        var props = {
            disabled: isLast,
            size: size,
            className: (0, _classnames2.default)((_cx3 = {}, _cx3[prefix + 'pagination-item'] = true, _cx3[prefix + 'next'] = true, _cx3)),
            onClick: this.onPageItemClick.bind(this, current + 1)
        };

        var icon = _react2.default.createElement(_icon2.default, { type: 'arrow-right', className: prefix + 'pagination-icon-next' });

        return _react2.default.createElement(
            _button2.default,
            (0, _extends3.default)({}, props, { 'aria-label': _util.str.template(locale.labelNext, { current: current }) }),
            shape === 'arrow-only' || shape === 'no-border' ? '' : locale.next,
            icon
        );
    };

    Pagination.prototype.renderPageEllipsis = function renderPageEllipsis(idx) {
        var prefix = this.props.prefix;


        return _react2.default.createElement(_icon2.default, {
            className: prefix + 'pagination-ellipsis ' + prefix + 'pagination-icon-ellipsis',
            type: 'ellipsis',
            key: 'ellipsis-' + idx
        });
    };

    Pagination.prototype.renderPageJump = function renderPageJump() {
        var _this2 = this;

        var _props5 = this.props,
            prefix = _props5.prefix,
            size = _props5.size,
            locale = _props5.locale;
        var inputValue = this.state.inputValue;

        /* eslint-disable react/jsx-key */

        return [_react2.default.createElement(
            'span',
            { className: prefix + 'pagination-jump-text' },
            locale.goTo
        ), _react2.default.createElement(_input2.default, {
            className: prefix + 'pagination-jump-input',
            type: 'text',
            'aria-label': locale.inputAriaLabel,
            size: size,
            value: inputValue,
            onChange: this.onInputChange.bind(this),
            onKeyDown: function onKeyDown(e) {
                if (e.keyCode === _util.KEYCODE.ENTER) {
                    _this2.handleJump(e);
                }
            }
        }), _react2.default.createElement(
            'span',
            { className: prefix + 'pagination-jump-text' },
            locale.page
        ), _react2.default.createElement(
            _button2.default,
            { className: prefix + 'pagination-jump-go', size: size, onClick: this.handleJump },
            locale.go
        )];
        /* eslint-enable react/jsx-key */
    };

    Pagination.prototype.renderPageDisplay = function renderPageDisplay(current, totalPage) {
        var _props6 = this.props,
            prefix = _props6.prefix,
            pageNumberRender = _props6.pageNumberRender;


        return _react2.default.createElement(
            'span',
            { className: prefix + 'pagination-display' },
            _react2.default.createElement(
                'em',
                null,
                pageNumberRender(current)
            ),
            '/',
            pageNumberRender(totalPage)
        );
    };

    Pagination.prototype.renderPageList = function renderPageList(current, totalPage) {
        var _props7 = this.props,
            prefix = _props7.prefix,
            pageShowCount = _props7.pageShowCount;

        var pages = [];

        if (totalPage <= pageShowCount) {
            for (var i = 1; i <= totalPage; i++) {
                pages.push(this.renderPageItem(i));
            }
        } else {
            // 除去第一页，最后一页以及当前页，剩下的页数
            var othersCount = pageShowCount - 3;
            var halfCount = parseInt(othersCount / 2, 10);
            var start = void 0,
                end = void 0;

            pages.push(this.renderPageItem(1));

            start = current - halfCount;
            end = current + halfCount;
            if (start <= 1) {
                start = 2;
                end = start + othersCount;
            }
            if (start > 2) {
                pages.push(this.renderPageEllipsis(1));
            }
            if (end >= totalPage - 1) {
                end = totalPage - 1;
                start = totalPage - 1 - othersCount;
            }
            for (var j = start; j <= end; j++) {
                pages.push(this.renderPageItem(j));
            }
            if (end < totalPage - 1) {
                pages.push(this.renderPageEllipsis(2));
            }

            pages.push(this.renderPageItem(totalPage));
        }

        return _react2.default.createElement(
            'div',
            { className: prefix + 'pagination-list' },
            pages
        );
    };

    Pagination.prototype.renderPageSizeSelector = function renderPageSizeSelector() {
        var _props8 = this.props,
            prefix = _props8.prefix,
            pageSizeSelector = _props8.pageSizeSelector,
            locale = _props8.locale;

        var pageSizeSpan = _react2.default.createElement(
            'span',
            { className: prefix + 'pagination-size-selector-title' },
            locale.pageSize
        );

        switch (pageSizeSelector) {
            case 'filter':
                return _react2.default.createElement(
                    'div',
                    { className: prefix + 'pagination-size-selector' },
                    pageSizeSpan,
                    this.renderPageSizeFilter()
                );
            case 'dropdown':
                return _react2.default.createElement(
                    'div',
                    { className: prefix + 'pagination-size-selector' },
                    pageSizeSpan,
                    this.renderPageSizeDropdown()
                );
            default:
                return null;
        }
    };

    Pagination.prototype.renderPageSizeFilter = function renderPageSizeFilter() {
        var _this3 = this;

        var _props9 = this.props,
            prefix = _props9.prefix,
            size = _props9.size,
            pageSizeList = _props9.pageSizeList;
        var currentPageSize = this.state.currentPageSize;


        return _react2.default.createElement(
            'div',
            { className: prefix + 'pagination-size-selector-filter' },
            pageSizeList.map(function (item, index) {
                var _cx4;

                var label = void 0;
                var pageSize = void 0;
                if (item.value) {
                    // {label: '', value: 5}
                    label = item.label;
                    pageSize = item.value;
                } else {
                    // number
                    label = pageSize = item;
                }
                var classes = (0, _classnames2.default)((_cx4 = {}, _cx4[prefix + 'pagination-size-selector-btn'] = true, _cx4[prefix + 'current'] = pageSize === currentPageSize, _cx4));

                return _react2.default.createElement(
                    _button2.default,
                    {
                        key: index,
                        text: true,
                        size: size,
                        className: classes,
                        onClick: pageSize !== currentPageSize ? _this3.onSelectSize.bind(_this3, pageSize) : null
                    },
                    label
                );
            })
        );
    };

    Pagination.prototype.renderPageSizeDropdown = function renderPageSizeDropdown() {
        var _props10 = this.props,
            prefix = _props10.prefix,
            size = _props10.size,
            pageSizeList = _props10.pageSizeList,
            locale = _props10.locale,
            popupProps = _props10.popupProps,
            selectProps = _props10.selectProps;
        var currentPageSize = this.state.currentPageSize;


        return _react2.default.createElement(
            _select2.default,
            (0, _extends3.default)({
                className: prefix + 'pagination-size-selector-dropdown',
                popupClassName: prefix + 'pagination-size-selector-popup',
                popupProps: popupProps,
                'aria-label': locale.selectAriaLabel,
                autoWidth: false,
                size: size,
                value: currentPageSize,
                onChange: this.onSelectSize.bind(this)
            }, selectProps),
            pageSizeList.map(function (item, index) {
                var label = void 0;
                var pageSize = void 0;
                if (item.value) {
                    // {label: '', value: 5}
                    label = item.label;
                    pageSize = item.value;
                } else {
                    // number
                    label = pageSize = item;
                }
                return _react2.default.createElement(
                    Option,
                    { key: index, value: pageSize },
                    label
                );
            })
        );
    };

    Pagination.prototype.render = function render() {
        var _cx5,
            _this4 = this;

        /* eslint-disable no-unused-vars */
        var _props11 = this.props,
            prefix = _props11.prefix,
            pure = _props11.pure,
            rtl = _props11.rtl,
            device = _props11.device,
            paginationType = _props11.type,
            size = _props11.size,
            shape = _props11.shape,
            className = _props11.className,
            total = _props11.total,
            totalRender = _props11.totalRender,
            pageSize = _props11.pageSize,
            pageSizeSelector = _props11.pageSizeSelector,
            pageSizeList = _props11.pageSizeList,
            pageSizePosition = _props11.pageSizePosition,
            useFloatLayout = _props11.useFloatLayout,
            onPageSizeChange = _props11.onPageSizeChange,
            hideOnlyOnePage = _props11.hideOnlyOnePage,
            showJump = _props11.showJump,
            locale = _props11.locale,
            current = _props11.current,
            defaultCurrent = _props11.defaultCurrent,
            pageShowCount = _props11.pageShowCount,
            pageNumberRender = _props11.pageNumberRender,
            link = _props11.link,
            onChange = _props11.onChange,
            popupProps = _props11.popupProps,
            selectProps = _props11.selectProps,
            others = (0, _objectWithoutProperties3.default)(_props11, ['prefix', 'pure', 'rtl', 'device', 'type', 'size', 'shape', 'className', 'total', 'totalRender', 'pageSize', 'pageSizeSelector', 'pageSizeList', 'pageSizePosition', 'useFloatLayout', 'onPageSizeChange', 'hideOnlyOnePage', 'showJump', 'locale', 'current', 'defaultCurrent', 'pageShowCount', 'pageNumberRender', 'link', 'onChange', 'popupProps', 'selectProps']);
        /* eslint-enable */

        var _state2 = this.state,
            currentPage = _state2.current,
            currentPageSize = _state2.currentPageSize;

        var totalPage = getTotalPage(total, currentPageSize);
        var pageFirst = this.renderPageFirst(currentPage);
        var pageLast = this.renderPageLast(currentPage, totalPage);
        var sizeSelector = this.renderPageSizeSelector();
        var isStart = pageSizePosition === 'start';

        var type = paginationType;

        if (device === 'phone' && type === 'normal') {
            type = 'simple';
        }

        var classes = (0, _classnames2.default)((_cx5 = {}, _cx5[prefix + 'pagination'] = true, _cx5['' + prefix + size] = size, _cx5['' + prefix + type] = type, _cx5['' + prefix + shape] = shape, _cx5[prefix + 'start'] = !!pageSizeSelector && isStart && useFloatLayout, _cx5[prefix + 'end'] = !!pageSizeSelector && !isStart && useFloatLayout, _cx5[prefix + 'hide'] = totalPage <= 1 && hideOnlyOnePage, _cx5[className] = !!className, _cx5));

        if (rtl) {
            others.dir = 'rtl';
        }

        var buildComponent = function buildComponent() {
            for (var _len = arguments.length, coms = Array(_len), _key = 0; _key < _len; _key++) {
                coms[_key] = arguments[_key];
            }

            return _react2.default.createElement(
                'div',
                (0, _extends3.default)({ className: classes }, _util.obj.pickOthers(Object.keys(Pagination.propTypes), others)),
                isStart && sizeSelector,
                totalRender ? _this4.renderPageTotal() : null,
                _react2.default.createElement(
                    'div',
                    { className: prefix + 'pagination-pages' },
                    coms.map(function (com, index) {
                        return com && _react2.default.cloneElement(com, { key: index });
                    })
                ),
                !isStart && sizeSelector
            );
        };

        switch (type) {
            case 'mini':
                return buildComponent(pageFirst, pageLast);
            case 'simple':
                {
                    var pageDisplay = this.renderPageDisplay(currentPage, totalPage);
                    return buildComponent(pageFirst, pageDisplay, pageLast);
                }
            case 'normal':
                {
                    var pageList = this.renderPageList(currentPage, totalPage);
                    var _pageDisplay = showJump && total > pageSize * pageShowCount ? this.renderPageDisplay(currentPage, totalPage) : null;
                    var pageJump = showJump && total > pageSize * pageShowCount ? this.renderPageJump(currentPage, totalPage) : null;
                    return buildComponent.apply(undefined, [pageFirst, pageList, pageLast, _pageDisplay].concat(pageJump));
                }
            default:
                return null;
        }
    };

    return Pagination;
}(_react.Component), _class.propTypes = (0, _extends3.default)({}, _configProvider2.default.propTypes, {
    prefix: _propTypes2.default.string,
    pure: _propTypes2.default.bool,
    rtl: _propTypes2.default.bool,
    device: _propTypes2.default.oneOf(['desktop', 'tablet', 'phone']),
    className: _propTypes2.default.string,
    /**
     * 自定义国际化文案对象
     */
    locale: _propTypes2.default.object,
    /**
     * 分页组件类型
     */
    type: _propTypes2.default.oneOf(['normal', 'simple', 'mini']),
    /**
     * 前进后退按钮样式
     */
    shape: _propTypes2.default.oneOf(['normal', 'arrow-only', 'arrow-prev-only', 'no-border']),
    /**
     * 分页组件大小
     */
    size: _propTypes2.default.oneOf(['small', 'medium', 'large']),
    /**
     * （受控）当前页码
     */
    current: _propTypes2.default.number,
    /**
     * （非受控）初始页码
     */
    defaultCurrent: _propTypes2.default.number,
    /**
     * 页码发生改变时的回调函数
     * @param {Number} current 改变后的页码数
     * @param {Object} e 点击事件对象
     */
    onChange: _propTypes2.default.func,
    /**
     * 总记录数
     */
    total: _propTypes2.default.number,
    /**
     * 总数的渲染函数
     * @param {Number} total 总数
     * @param {Array} range 当前数据在总数中的区间
     */
    totalRender: _propTypes2.default.func,
    /**
     * 页码显示的数量，更多的使用...代替
     */
    pageShowCount: _propTypes2.default.number,
    /**
     * 一页中的记录数
     */
    pageSize: _propTypes2.default.number,
    /**
     * 每页显示选择器类型
     */
    pageSizeSelector: _propTypes2.default.oneOf([false, 'filter', 'dropdown']),
    /**
     * 每页显示选择器可选值
     */
    pageSizeList: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.number), _propTypes2.default.arrayOf(_propTypes2.default.shape({
        label: _propTypes2.default.string,
        value: _propTypes2.default.number
    }))]),
    /**
     * 自定义页码渲染函数，函数作用于页码button以及当前页/总页数的数字渲染
     * @param {Number} index 分页的页码，从1开始
     * @return {ReactNode} 返回渲染结果
     */
    pageNumberRender: _propTypes2.default.func,
    /**
     * 每页显示选择器在组件中的位置
     */
    pageSizePosition: _propTypes2.default.oneOf(['start', 'end']),
    /**
     * 存在每页显示选择器时是否使用浮动布局
     */
    useFloatLayout: _propTypes2.default.bool,
    /**
     * 每页显示记录数量改变时的回调函数
     * @param {Number} pageSize 改变后的每页显示记录数
     */
    onPageSizeChange: _propTypes2.default.func,
    /**
     * 当分页数为1时，是否隐藏分页器
     */
    hideOnlyOnePage: _propTypes2.default.bool,
    /**
     * type 设置为 normal 时，在页码数超过5页后，会显示跳转输入框与按钮，当设置 showJump 为 false 时，不再显示该跳转区域
     */
    showJump: _propTypes2.default.bool,
    /**
     * 设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串，如：https://www.taobao.com/{page}
     */
    link: _propTypes2.default.string,
    /**
     * 弹层组件属性，透传给Popup
     */
    popupProps: _propTypes2.default.object,
    selectProps: _propTypes2.default.object
}), _class.defaultProps = {
    prefix: 'next-',
    pure: false,
    rtl: false,
    locale: _zhCn2.default.Pagination,
    type: 'normal',
    shape: 'normal',
    size: 'medium',
    defaultCurrent: 1,
    onChange: noop,
    pageSize: 10,
    pageSizeSelector: false,
    pageSizeList: [5, 10, 20],
    pageSizePosition: 'start',
    onPageSizeChange: noop,
    useFloatLayout: false,
    total: 100,
    pageShowCount: 5,
    hideOnlyOnePage: false,
    showJump: true,
    pageNumberRender: function pageNumberRender(index) {
        return index;
    }
}, _temp);
Pagination.displayName = 'Pagination';
exports.default = _configProvider2.default.config((0, _reactLifecyclesCompat.polyfill)(Pagination));
module.exports = exports['default'];