@beisen/ethos/lib/paging/index.js

beisencloud pc react components

'use strict';

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

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

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 _commonFunc = require('../common-func');

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

var _dropdownButton2 = _interopRequireDefault(_dropdownButton);

require('./index.scss');

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

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

var Paging = function (_Component) {
  (0, _inherits3.default)(Paging, _Component);

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

    var _this = (0, _possibleConstructorReturn3.default)(this, (Paging.__proto__ || (0, _getPrototypeOf2.default)(Paging)).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 = (0, _extends3.default)({}, 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;
  }

  (0, _createClass3.default)(Paging, [{
    key: 'componentDidUpdate',
    value: 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;
          }
        }
      }
    }

    // 数据校验

  }, {
    key: 'verify',
    value: 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 除开头和和结尾

  }, {
    key: 'renderPageItems',
    value: 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;
    }
  }, {
    key: 'getPageItem',
    value: 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
          )
        ));
      }
    }

    // 渲染样式

  }, {
    key: 'pageContainerStyle',
    value: 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 样式

  }, {
    key: 'ulListStyle',
    value: 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

  }, {
    key: 'transformUl',
    value: 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;
      }
    }

    // 是否显示省略号

  }, {
    key: 'showEllipsis',
    value: 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;
    }
  }, {
    key: 'addClass',
    value: function addClass(event) {
      event.stopPropagation();
      this.setState({
        isFocus: true
      });
      this.props.focusCallBack && this.props.focusCallBack(event);
    }

    // input blur animation

  }, {
    key: 'removeClass',
    value: function removeClass(event) {
      event.stopPropagation();
      this.setState({
        isFocus: false
      });
      this.props.blurCallBack && this.props.blurCallBack(event);
    }

    // input onchange event

  }, {
    key: 'onChange',
    value: function onChange(event) {
      this.setState({
        inputValue: event.target.value
      });
      this.props.changeCallBack && this.props.changeCallBack(event);
    }

    // click

  }, {
    key: 'pageClick',
    value: 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

  }, {
    key: 'handleKeyUp',
    value: 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));
    }
  }, {
    key: 'dropDownClick',
    value: 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);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.currentPage != this.props.currentPage) {
        this.setState({
          currentPage: nextProps.currentPage
        });
      }
    }
  }, {
    key: 'render',
    value: 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;