zarm-web/es/pagination/index.js

基于 React 的桌面端UI库

import React, { Component } from 'react';
import classnames from 'classnames';
import Select from '../select';
import Input from '../input';
import Icon from '../icon';
import format from '../locale-provider/format';
import LocaleReceiver from '../locale-provider/LocaleReceiver';

const noop = () => {};

class Pagination extends Component {
  constructor(props) {
    super(props);

    this.getPagerList = () => {
      const {
        total,
        addonBefore,
        addonAfter,
        pageSize
      } = this.props;
      const pageCount = Math.ceil(total / pageSize);
      const pagerList = [];
      let {
        value
      } = this.state;
      value = value < 1 ? 1 : value;
      value = value > pageCount ? pageCount : value;

      if (pageCount <= 9) {
        for (let i = 1; i <= pageCount; i++) {
          pagerList.push(this.renderPager(i, value));
        }
      } else {
        let left = Math.max(1, value - 2);
        let right = Math.min(value + 2, pageCount);

        if (value - 1 <= 2) {
          right = 1 + 4;
        }

        if (pageCount - value <= 2) {
          left = pageCount - 4;
        }

        for (let i = left; i <= right; i++) {
          pagerList.push(this.renderPager(i, value));
        }

        if (value - 1 >= 4) {
          pagerList.unshift(this.jumpPrev(value));
        }

        if (pageCount - value >= 4) {
          pagerList.push(this.jumpNext(value));
        }

        if (left !== 1) {
          pagerList.unshift(this.firstPager());
        }

        if (right !== pageCount) {
          pagerList.push(this.lastPager(pageCount));
        }

        pagerList.unshift(this.prevPager(value));
        pagerList.push(this.nextPager(value, pageCount));
      }

      if (addonBefore) {
        pagerList.unshift(this.renderAddonBefore(addonBefore));
      }

      if (addonAfter) {
        pagerList.push(this.renderAddonAfter(addonAfter));
      }

      return pagerList;
    };

    this.firstPager = () => {
      const {
        prefixCls,
        locale
      } = this.props;
      return React.createElement("li", {
        key: 1,
        title: locale.first_page,
        className: `${prefixCls}-item`,
        onClick: () => this._onPagerClick(1)
      }, "1");
    };

    this.lastPager = pageCount => {
      const {
        prefixCls,
        locale
      } = this.props;
      return React.createElement("li", {
        key: pageCount,
        title: locale.last_page,
        className: `${prefixCls}-item`,
        onClick: () => this._onPagerClick(pageCount)
      }, pageCount);
    };

    this.prevPager = current => {
      const {
        prefixCls,
        locale
      } = this.props;
      return React.createElement("li", {
        key: "prev",
        title: locale.prev_page // tslint:disable-next-line:jsx-no-multiline-js
        ,
        className: classnames({
          [`${prefixCls}-item`]: true,
          [`${prefixCls}-item-prev`]: true,
          [`${prefixCls}-item-disabled`]: Number(current) === 1
        }),
        onClick: () => current > 1 && this._onPagerClick(current - 1)
      }, React.createElement(Icon, {
        type: "arrow-left"
      }));
    };

    this.nextPager = (current, pageCount) => {
      const {
        prefixCls,
        locale
      } = this.props;
      return React.createElement("li", {
        key: "next",
        title: locale.next_page // tslint:disable-next-line:jsx-no-multiline-js
        ,
        className: classnames({
          [`${prefixCls}-item`]: true,
          [`${prefixCls}-item-next`]: true,
          [`${prefixCls}-item-disabled`]: Number(current) === pageCount
        }),
        onClick: () => current < pageCount && this._onPagerClick(current + 1)
      }, React.createElement(Icon, {
        type: "arrow-right"
      }));
    };

    this.jumpPrev = current => {
      const {
        prefixCls,
        locale
      } = this.props;
      return React.createElement("li", {
        key: "jump-prev",
        title: locale.prev_5_page,
        className: `${prefixCls}-item ${prefixCls}-item-jump-prev`,
        onClick: () => this._onPagerClick(current - 5)
      });
    };

    this.jumpNext = current => {
      const {
        prefixCls,
        locale
      } = this.props;
      return React.createElement("li", {
        key: "jump-next",
        title: locale.next_5_page,
        className: `${prefixCls}-item ${prefixCls}-item-jump-next`,
        onClick: () => this._onPagerClick(current + 5)
      });
    };

    this.renderPager = (i, current) => {
      const {
        prefixCls
      } = this.props;
      return React.createElement("li", {
        key: i,
        title: i // tslint:disable-next-line:jsx-no-multiline-js
        ,
        className: classnames({
          [`${prefixCls}-item`]: true,
          [`${prefixCls}-item-active`]: current === i
        }),
        onClick: () => this._onPagerClick(i)
      }, i);
    };

    this.renderAddonBefore = addonBefore => {
      const {
        prefixCls
      } = this.props;
      return React.createElement("div", {
        key: "addon-before",
        className: `${prefixCls}-addon-before`
      }, addonBefore);
    };

    this.renderAddonAfter = addonAfter => {
      const {
        prefixCls
      } = this.props;
      return React.createElement("div", {
        key: "addon-after",
        className: `${prefixCls}-addon-after`
      }, addonAfter);
    };

    this.renderTotal = () => {
      const {
        total,
        prefixCls,
        locale,
        pageSize
      } = this.props;
      const {
        value
      } = this.state;
      return React.createElement("div", {
        className: `${prefixCls}-total`
      }, format(locale.total, {
        total
      }), format(locale.current, {
        current: `${value} / ${Math.ceil(total / pageSize)}`
      }));
    };

    this.renderPageSizeSelector = () => {
      const {
        prefixCls,
        onPageSizeChange,
        onChange,
        locale,
        pageSize
      } = this.props;
      let {
        pageSizeSource
      } = this.props;
      let defaultPageSize = pageSizeSource && pageSizeSource.length > 0 && pageSizeSource[0];

      if (!pageSizeSource) {
        pageSizeSource = [10, 20, 30, 40, 50];
        defaultPageSize = 10;
      }

      return React.createElement("div", {
        className: `${prefixCls}-size`
      }, React.createElement(Select, {
        defaultValue: defaultPageSize,
        size: "sm",
        value: pageSize === 10 ? defaultPageSize : pageSize,
        onChange: ({
          value
        }) => {
          if (value === pageSize) {
            return;
          }

          if (onPageSizeChange !== noop) {
            onPageSizeChange(value);
            return;
          }

          onChange({
            currentPage: 1,
            pageSize: value
          });
        }
      }, pageSizeSource.map(value => {
        return React.createElement(Select.Option, {
          value: value,
          key: value
        }, format(locale.pagesize, {
          value
        }));
      })));
    };

    this.renderJumper = () => {
      const {
        shape,
        total,
        prefixCls,
        locale,
        pageSize
      } = this.props;
      return React.createElement("div", {
        className: `${prefixCls}-jumper`
      }, locale.goto, React.createElement(Input, {
        shape: shape,
        type: "text",
        style: {
          width: 50,
          textAlign: 'center',
          marginLeft: 5,
          marginRight: 5
        },
        size: "sm",
        defaultValue: "" // tslint:disable-next-line:jsx-no-multiline-js
        ,
        onKeyDown: e => {
          const {
            value
          } = e.target;

          if (e.keyCode === 13) {
            let sValue = parseInt(value, 10); // eslint-disable-next-line

            if (!sValue || isNaN(sValue)) {
              return;
            }

            if (sValue < 1) {
              sValue = 1;
            }

            const pageCount = Math.ceil(total / pageSize);

            if (sValue > pageCount) {
              sValue = pageCount;
            }

            this._onPagerClick(sValue);
          }
        }
      }), locale.pageClassifier);
    };

    this.state = {
      value: props.value || props.defaultValue
    };
  }

  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps) {
      this.setState({
        value: nextProps.value
      });
    }
  }

  _onPagerClick(value) {
    const {
      onPageChange,
      onChange,
      pageSize
    } = this.props;
    this.setState({
      value
    });

    if (onPageChange !== noop) {
      onPageChange(value);
      return;
    }

    onChange({
      pageSize,
      currentPage: value
    });
  }

  render() {
    const {
      prefixCls,
      isBordered,
      shape,
      className,
      showTotal,
      showJumper,
      showPageSizeSelector,
      style
    } = this.props;
    const cls = classnames({
      [prefixCls]: true,
      bordered: 'bordered' in this.props || isBordered,
      [`shape-${shape}`]: !!shape,
      [className]: !!className
    });
    return React.createElement("div", {
      className: cls,
      style: style
    }, showTotal && this.renderTotal(), React.createElement("div", {
      className: `${prefixCls}-pagers`
    }, React.createElement("ul", null, this.getPagerList()), showPageSizeSelector && this.renderPageSizeSelector(), showJumper && this.renderJumper()));
  }

}

Pagination.defaultProps = {
  prefixCls: 'ui-pagination',
  defaultValue: 1,
  isBordered: false,
  isRadius: false,
  total: 0,
  pageSize: 10,
  pageSizeSource: [10, 20, 30, 40, 50],
  showTotal: false,
  showJumper: false,
  showPageSizeSelector: false,
  onPageChange: noop,
  onPageSizeChange: noop,
  onChange: noop
};
export default LocaleReceiver('Pagination')(Pagination);