@beisen/paging/lib/index.js

configurable page component

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _commonFunc = require('@beisen/common-func');

var _dropdownButton = require('@beisen/dropdown-button');

var _dropdownButton2 = _interopRequireDefault(_dropdownButton);

require('../src/index.scss');

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

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } /* eslint-disable */


var defaultTranslation = {
  pieceOrPage: '{0}条/页',
  jumpTo: '跳转至',
  countPageTotal: '共{0}页'
};

var Paging = function (_Component) {
  _inherits(Paging, _Component);

  function Paging(props) {
    _classCallCheck(this, Paging);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.handleOver = function (e) {
      console.log(e);
      switch (e) {
        case 'icon_ne':
          if (_this.icon_next == 'pc-sys-Forward-nomal-svg') {
            _this.icon_next = 'pc-sys-Forward-active-svg';
            _this.setState({});
          }
          break;
        case 'icon_pr':
          console.log(_this.icon_prev);
          if (_this.icon_prev == 'pc-sys-backward-nomal-svg') {
            _this.icon_prev = 'pc-sys-backward-active-svg';
            _this.setState({});
          }
          break;

      }
    };

    _this.handleLeave = function (e) {
      console.log(e);
      switch (e) {
        case 'icon_ne':
          if (_this.icon_next == 'pc-sys-Forward-active-svg') {
            _this.icon_next = 'pc-sys-Forward-nomal-svg';
            _this.setState({});
          }
          break;
        case 'icon_pr':
          if (_this.icon_prev == 'pc-sys-backward-active-svg') {
            _this.icon_prev = 'pc-sys-backward-nomal-svg';
            _this.setState({});
          }
          break;

      }
    };

    _this.state = {
      currentPage: props.currentPage || 1,
      isFocus: false,
      inputValue: '',
      capacity: props.capacity,
      visiblePages: 7
    };

    _this.icon_next = _this.state.currentPage === _this.props.total ? "pc-sys-Forward-disabled-svg" : "pc-sys-Forward-nomal-svg";
    _this.icon_prev = _this.state.currentPage === 1 ? "pc-sys-backward-disabled-svg" : "pc-sys-backward-nomal-svg";
    _this.translation = _extends({}, defaultTranslation, props.translation);
    _this.pageClick = _this.pageClick.bind(_this);
    _this.onChange = _this.onChange.bind(_this);
    _this.addClass = _this.addClass.bind(_this);
    _this.removeClass = _this.removeClass.bind(_this);
    _this.ulListStyle = _this.ulListStyle.bind(_this);
    _this.renderPageItems = _this.renderPageItems.bind(_this);
    _this.pageContainerStyle = _this.pageContainerStyle.bind(_this);
    _this.handleKeyUp = _this.handleKeyUp.bind(_this);

    return _this;
  }

  Paging.prototype.componentDidUpdate = function componentDidUpdate() {

    if (!this.props.hidden) {
      var fawidth = this.refs.pagref.parentElement.clientWidth;
      var pawidth = this.refs.pagref.clientWidth;
      var totle = document.getElementsByClassName('total').length > 0 ? document.getElementsByClassName('total')[0].clientWidth : 0;
      var allchose = document.getElementsByClassName('checkAllAcrossPage').length > 0 ? document.getElementsByClassName('checkAllAcrossPage')[0].clientWidth : 0;
      if (fawidth - (totle + allchose + 30) < pawidth) {
        switch (this.state.visiblePages) {
          case 7:
            this.setState({ visiblePages: 5 });
            break;
          case 5:
            this.setState({ visiblePages: 3 });
            break;
          case 3:
            break;
        }
      }
    }
  };

  // 数据校验


  Paging.prototype.verify = function verify(props) {
    var total = props.total,
        currentPage = props.currentPage;


    try {
      if (total < 2) {
        throw {
          name: 'TypeError',
          message: 'error total'
        };
      }
    } catch (err) {
      console.error(err);
    }

    try {
      if (currentPage < 1 || currentPage > total) {
        throw {
          name: 'TypeError',
          message: 'error currentPage'
        };
      }
    } catch (err) {
      console.error(err);
    }

    // 因为新的需求需要有visiblePages少于5的情况这里把这部分的验证取消
    // try {
    //   if (visiblePages < 5 || visiblePages % 2 === 0) {
    //     throw {
    //       name: 'TypeError',
    //       message: 'error visiblePages'
    //     }
    //   }
    // } catch (err) {
    //   console.error(err);
    // }
  };

  // 渲染item 除开头和和结尾


  Paging.prototype.renderPageItems = function renderPageItems() {
    var total = this.props.total;
    var visiblePages = this.state.visiblePages;
    var currentPage = this.state.currentPage;

    var pageItems = [];
    // let tempClassName;
    // wuzhe----四位数时，添加类，改变宽度
    // for (let i = 2; i < total; i++) {
    //   let tempClassName = currentPage === i ? 'active' : '';
    //   if (i >= 1000) {
    //     pageItems.push(<li key={i} className={tempClassName}><a href="javascript:void(0)" data-index={i} className="page_large">{i}</a></li>)
    //   } else {
    //     pageItems.push(<li key={i} className={tempClassName}><a href="javascript:void(0)" data-index={i}>{i}</a></li>)
    //   }
    // }
    //优化渲染，防止出几万个Dom节点
    var showCount = (visiblePages - 2) / 2;

    if (currentPage >= 5 && total - currentPage >= 3 && total > 99) {
      for (var i = currentPage - Math.floor(showCount); i < currentPage + Math.ceil(showCount); i++) {
        this.getPageItem(pageItems, currentPage, i);
      }
    } else if (total - currentPage < 5 && total > 99) {
      var fir = total - currentPage < 5 ? total - 5 : currentPage - 1;
      for (var _i = fir; _i < total + 1; _i++) {
        this.getPageItem(pageItems, currentPage, _i);
      }
    } else {
      var all = total > 100 ? 100 : total;
      for (var _i2 = 2; _i2 < all + 1; _i2++) {
        this.getPageItem(pageItems, currentPage, _i2, total);
      }
    }
    return pageItems;
  };

  Paging.prototype.getPageItem = function getPageItem(pageItems, currentPage, i, total) {
    var tempClassName = currentPage === i ? 'active' : '';
    if (i >= 1000) {
      var width = 34 + ((i + "").length - 4) * 4;
      pageItems.push(_react2.default.createElement(
        'li',
        { key: i, className: tempClassName },
        _react2.default.createElement(
          'a',
          { href: 'javascript:void(0)', 'data-index': i, style: { "padding": "3px", "width": width + "px" } },
          i
        )
      ));
    } else {
      pageItems.push(_react2.default.createElement(
        'li',
        { key: i, className: tempClassName },
        _react2.default.createElement(
          'a',
          { href: 'javascript:void(0)', 'data-index': i },
          i
        )
      ));
    }
  };

  // 渲染样式


  Paging.prototype.pageContainerStyle = function pageContainerStyle() {
    var total = this.props.total;
    var _state = this.state,
        currentPage = _state.currentPage,
        visiblePages = _state.visiblePages;

    if (total <= visiblePages) {
      return;
    }
    var styles = {},

    // num = visiblePages - 4;
    num = visiblePages;
    var tempEll = this.showEllipsis();
    // num = tempEll.isEllPrev ? num : num+1;
    // num = tempEll.isEllNext ? num : num+1;

    styles['overflow'] = 'hidden';

    if (num == 1) {
      if (currentPage >= 1000) {
        styles['width'] = num * (33 + ((currentPage + "").length - 4) * 4) + 1;
      } else {
        styles['width'] = num * 26 + 1;
      }
      return styles;
    };

    // wuzhe----省略号在中间
    if (tempEll.isEllPrev && tempEll.isEllNext) {
      num = visiblePages - 2;
      var maxNum = currentPage + (num - 1) / 2;
      var minNum = currentPage - (num - 1) / 2;
      if (maxNum < 1000) {
        styles['width'] = num * 26 + num + 1;
      } else if (minNum >= 1000) {
        styles['width'] = num * (34 + ((currentPage + "").length - 4) * 4) + num + 1;
      } else {
        var largeNum = maxNum - 1000 + 1;
        styles['width'] = largeNum * 34 + (num - largeNum) * 26 + num;
      }
      return styles;
    }

    // wuzhe----省略号在左边
    if (tempEll.isEllPrev) {
      num = visiblePages - 1;
      if (total > 1000) {
        var _minNum = total - num;
        if (_minNum >= 1000) {
          styles['width'] = num * (34 + ((currentPage + "").length - 4) * 4) + num + 1;
        } else {
          var _largeNum = total - 1000;
          styles['width'] = _largeNum * 33 + (num - _largeNum) * 26 + num - 1 + _largeNum - 2;
        };
      } else {
        styles['width'] = num * 26 + num + 1;
      }
      return styles;
    }

    // wuzhe----省略号在右边
    if (tempEll.isEllNext) {
      num = visiblePages - 1;
      styles['width'] = num * 26 + num + 1;
      return styles;
    }
  };

  // ul 样式


  Paging.prototype.ulListStyle = function ulListStyle() {
    var total = this.props.total;
    var visiblePages = this.state.visiblePages;

    var preWidth = (1000 - 2) * 26;

    if (total <= visiblePages) {
      return;
    }
    var styles = {};

    // wuzhe----
    if (total > 1000) {
      styles['width'] = (total - 1000) * 33 + preWidth + total - 1;
      styles['marginRight'] = this.transformUl();
    } else {
      //去除最后一页,此处total-2，变为 total -1
      styles['width'] = (total - 1) * 26 + total;
      styles['marginRight'] = this.transformUl();
    }
    if (styles['marginRight']) {
      styles['overflow'] = 'initial';
    }
    return styles;
  };

  // ul move


  Paging.prototype.transformUl = function transformUl() {
    var total = this.props.total;
    var visiblePages = this.state.visiblePages;
    var currentPage = this.state.currentPage;

    if (total <= visiblePages) {
      return;
    }
    var tempEll = this.showEllipsis();
    var translateX = void 0,
        largeNum = void 0;
    // let num = visiblePages - 4;
    var num = visiblePages;
    // num = tempEll.isEllPrev ? num-1 : num;
    // num = tempEll.isEllNext ? num-1 : num;

    if (tempEll.isEllPrev && tempEll.isEllNext) {
      //去除最后一页,此处total+2 变为 total +3
      var count = total + 3 - (visiblePages + 1) / 2 - currentPage;
      // wuzhe----
      var moveNum = total - count;

      if (total <= 1000) {
        translateX = -((count - 1) * 26 + count) + 1 + 'px';
      } else if (moveNum >= 1000) {
        translateX = -(33 * count + count + 1) + 'px';
      } else {
        largeNum = total - 1000;
        translateX = -(33 * largeNum + largeNum + 1) - (count - largeNum) * 34 + 'px';
      }

      return translateX;
    }
    if (tempEll.isEllPrev) {
      var middle = (visiblePages + 1) / 2;
      if (currentPage > total - middle - 2) {
        return 0;
      }
    }

    var preWidth = (1000 - 2) * 26;
    if (tempEll.isEllNext) {
      //去除最后一页,此处total-2 变为 total -1
      // let count = (total - 1) - (visiblePages - 3);
      var _count = total - 2 - (visiblePages - 1);
      if (total > 1000) {
        translateX = -((total - 1000) * 33 + preWidth + total - 1 - (num * 26 + num)) + 'px';
      } else {
        translateX = ((_count + 1) * 26 + _count + 1) * -1 + 'px';
      }
      return translateX;
    }
  };

  // 是否显示省略号


  Paging.prototype.showEllipsis = function showEllipsis() {
    var total = this.props.total;
    var visiblePages = this.state.visiblePages;
    var currentPage = this.state.currentPage;

    var obj = {
      isEllPrev: false,
      isEllNext: false
    };
    if (total <= visiblePages) {
      return obj;
    }

    var middle = (visiblePages + 1) / 2;
    obj.isEllPrev = currentPage > middle ? true : false;
    //去除最后一页，此处+1
    obj.isEllNext = total - currentPage + 1 >= middle ? true : false;
    return obj;
  };

  Paging.prototype.addClass = function addClass(event) {
    event.stopPropagation();
    this.setState({
      isFocus: true
    });
    this.props.focusCallBack && this.props.focusCallBack(event);
  };

  // input blur animation


  Paging.prototype.removeClass = function removeClass(event) {
    event.stopPropagation();
    this.setState({
      isFocus: false
    });
    this.props.blurCallBack && this.props.blurCallBack(event);
  };

  // input onchange event


  Paging.prototype.onChange = function onChange(event) {
    this.setState({
      inputValue: event.target.value
    });
    this.props.changeCallBack && this.props.changeCallBack(event);
  };

  // click


  Paging.prototype.pageClick = function pageClick(event) {
    if (event.target.className.indexOf('drop-down-btn-title') > -1) return;
    if (event.target.className.indexOf('drop-down-btn-svg') > -1) return;
    // event.stopPropagation(); // 影响了推屏关闭，暂时注掉，不知道为啥加的
    var node = event.target;
    if (this.props.total == 1) return;
    if (node.tagName == 'DIV' || node.tagName == 'INPUT' || node.tagName == 'UL') return;
    if (node.className === 'page-ellipsis') return;
    var index = void 0;
    if (node.className == 'goAnyWhere') {
      index = this.paging_input.value;
      if (parseInt(index) >= 1 && parseInt(index) <= this.props.total) {
        if (parseInt(index) === this.state.currentPage) return;
        this.state.inputValue = '';
      } else {
        return;
      }
    } else {
      index = node.getAttribute('data-index');
      if (parseInt(index) === this.state.currentPage) return;
    }
    this.state.currentPage = parseInt(index);
    this.icon_next = this.state.currentPage === this.props.total ? "pc-sys-Forward-disabled-svg" : "pc-sys-Forward-nomal-svg";
    this.icon_prev = this.state.currentPage === 1 ? "pc-sys-backward-disabled-svg" : "pc-sys-backward-nomal-svg";
    this.setState(this.state);
    this.props.onIndexChange && this.props.onIndexChange(parseInt(index));
  };
  //zyt


  Paging.prototype.handleKeyUp = function handleKeyUp(e) {
    var index = this.paging_input.value;
    if (e.keyCode == 13 && parseInt(index) >= 1 && parseInt(index) <= this.props.total) {
      if (parseInt(index) === this.state.currentPage) return;
      this.state.inputValue = '';
    } else {
      return;
    }
    this.setState({ currentPage: parseInt(index) });
    this.props.onIndexChange && this.props.onIndexChange(parseInt(index));
  };

  Paging.prototype.dropDownClick = function dropDownClick(val, target, onClick, stateVal) {
    target.stopPropagation();
    this.state.capacity = parseInt(val.text);
    this.setState(this.state);
    this.props.onCapacityChange && this.props.onCapacityChange(val.value);
  };

  Paging.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    if (nextProps.currentPage != this.props.currentPage) {
      this.setState({
        currentPage: nextProps.currentPage
      });
    }
  };

  Paging.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        total = _props.total,
        hidden = _props.hidden,
        capacity = _props.capacity,
        capacityList = _props.capacityList,
        _props$isShowDropdown = _props.isShowDropdown,
        isShowDropdown = _props$isShowDropdown === undefined ? true : _props$isShowDropdown;
    var _state2 = this.state,
        currentPage = _state2.currentPage,
        inputValue = _state2.inputValue,
        isFocus = _state2.isFocus;

    if (!hidden) {
      // 省略号显示
      var tempEll = this.showEllipsis();
      var ell_prev_style = tempEll.isEllPrev ? {
        display: 'inline-block'
      } : {
        display: 'none'
      };
      var ell_next_style = tempEll.isEllNext ? {
        display: 'inline-block'
      } : {
        display: 'none'
      };

      var start_temp = currentPage === 1 ? 'page_start active' : 'page_start';
      var end_temp = currentPage === total ? 'page_end active' : 'page_end';
      var end_style = {};
      if (total >= 1000) {
        end_temp += ' page_large';
        if (total >= 10000) {
          var width = 34 + ((total + "").length - 4) * 4;
          end_style = { "padding": "3px", "width": width + "px" };
        }
      };

      var nextPage = currentPage === total ? total : currentPage + 1;
      var prevPage = currentPage === 1 ? 1 : currentPage - 1;

      var notAllowed_prev = currentPage === 1 ? ' notAllowed_prev' : '';
      var notAllowed_next = currentPage === total ? ' notAllowed_next' : '';
      this.icon_prev = currentPage === 1 ? "pc-sys-backward-disabled-svg" : "pc-sys-backward-nomal-svg";
      this.icon_next = currentPage === total ? "pc-sys-Forward-disabled-svg" : 'pc-sys-Forward-nomal-svg';

      var dropChildren = capacityList && capacityList.map(function (item, index) {
        var isFalg = false;
        if (capacity == item) isFalg = true;
        return {
          value: index,
          text: (0, _commonFunc.transFormat)(_this2.translation.pieceOrPage, item),
          active: false,
          isChecked: isFalg
        };
      });
      var autoDirection = true;
      var direction = 'right-down';
      if (this.props.autoDirection !== undefined && this.props.direction !== undefined) {
        autoDirection = this.props.autoDirection;
        direction = this.props.direction;
      }
      var jumpTo = this.props.hasJumpTo ? _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'a',
          { href: 'javascript:void(0)', className: 'goAnyWhere' },
          'Go'
        ),
        _react2.default.createElement(
          'div',
          { className: "auto-rightinput auto-form-input " + inputClass },
          _react2.default.createElement('input', { type: 'text', placeholder: this.translation.jumpTo, ref: function ref(input) {
              _this2.paging_input = input;
            }, value: inputValue, onClick: function onClick(event) {
              return event.stopPropagation();
            }, onKeyUp: this.handleKeyUp, onChange: this.onChange, onFocus: this.addClass, onBlur: this.removeClass })
        )
      ) : '';
      var dropDownData = {
        title: (0, _commonFunc.transFormat)(this.translation.pieceOrPage, capacity),
        type: 'text',
        bsSize: 'small',
        bsStyle: 'weaken',
        children: dropChildren || [],
        open: false,
        iconName: "pc-sys-arrowdown-nomal-svg",
        hoverName: "pc-sys-arrowdown-active-svg",
        activeName: "pc-sys-arrowdown-active-svg",
        direction: direction,
        autoDirection: autoDirection,
        onClick: this.dropDownClick.bind(this)
      };
      var inputClass = isFocus ? 'auto-form-input-active' : '';
      var totalOne = total == 1 ? '' : _react2.default.createElement(
        'a',
        { href: 'javascript:void(0)', className: end_temp, style: end_style, 'data-index': total },
        total
      );
      return _react2.default.createElement(
        'div',
        { className: 'paging', onClick: this.pageClick, ref: 'pagref' },
        _react2.default.createElement(
          'div',
          { className: 'page-next' },
          _react2.default.createElement(
            'a',
            { className: 'page-ellipsis', style: ell_next_style },
            '...'
          ),
          _react2.default.createElement('a', { href: 'javascript:void(0)', onMouseOver: this.handleOver.bind(this, 'icon_ne'), onMouseOut: this.handleLeave.bind(this, 'icon_ne'), style: { "marginLeft": "4px" }, 'data-index': nextPage, className: this.icon_next + notAllowed_next + ' paging-icon paging__btn paging__btn__next' }),
          jumpTo
        ),
        _react2.default.createElement(
          'div',
          { className: 'page-container' + (total - currentPage < 5 && total > 99 || currentPage >= 5 && total - currentPage >= 3 && total > 99 ? '' : '' + (ell_prev_style.display == 'none' ? ' remove_left_radius' : ' add_left_radius')), style: this.pageContainerStyle() },
          _react2.default.createElement(
            'ul',
            { style: total > 99 ? {} : this.ulListStyle() },
            this.renderPageItems()
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'page-content' + ('' + (ell_prev_style.display == 'none' ? '' : ' content-box')) },
          _react2.default.createElement(
            'a',
            { className: 'page-ellipsis', style: ell_prev_style },
            '...'
          ),
          _react2.default.createElement(
            'a',
            { href: 'javascript:void(0)', className: start_temp + ('' + (ell_prev_style.display == 'none' && total != 1 ? ' remove_right_border remove_right_radius' : '')), 'data-index': '1' },
            '1'
          ),
          _react2.default.createElement('a', { href: 'javascript:void(0)', onMouseOver: this.handleOver.bind(this, 'icon_pr'), onMouseOut: this.handleLeave.bind(this, 'icon_pr'), 'data-index': prevPage, className: this.icon_prev + notAllowed_prev + ' paging-icon paging__btn' }),
          isShowDropdown ? _react2.default.createElement(_dropdownButton2.default, dropDownData) : null,
          this.props.issum && this.props.issum == true ? _react2.default.createElement(
            'span',
            { style: { pointerEvents: "none" }, className: 'pag-sum' },
            (0, _commonFunc.transFormat)(this.translation.countPageTotal, total)
          ) : ''
        )
      );
    } else {
      return _react2.default.createElement('div', null);
    }
  };

  return Paging;
}(_react.Component);

module.exports = Paging;