rmc-list-view/lib/PullUpLoadMoreMixin.js

m-list-view ui component for react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

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

exports["default"] = {
  bindEvt: function bindEvt() {
    var ele = this.getEle();
    ele.addEventListener('touchstart', this.onPullUpStart);
    ele.addEventListener('touchmove', this.onPullUpMove);
    ele.addEventListener('touchend', this.onPullUpEnd);
    ele.addEventListener('touchcancel', this.onPullUpEnd);
  },
  unBindEvt: function unBindEvt() {
    var ele = this.getEle();
    ele.removeEventListener('touchstart', this.onPullUpStart);
    ele.removeEventListener('touchmove', this.onPullUpMove);
    ele.removeEventListener('touchend', this.onPullUpEnd);
    ele.removeEventListener('touchcancel', this.onPullUpEnd);
  },
  getEle: function getEle() {
    var _props = this.props,
        stickyHeader = _props.stickyHeader,
        useBodyScroll = _props.useBodyScroll,
        useZscroller = _props.useZscroller;

    var ele = void 0;
    if (stickyHeader || useBodyScroll) {
      ele = document.body;
    } else {
      ele = _reactDom2["default"].findDOMNode(this.refs['listviewscroll'].refs['ScrollView']);
    }
    return ele;
  },
  componentDidMount: function componentDidMount() {
    this.bindEvt();
  },
  componentWillUnmount: function componentWillUnmount() {
    this.unBindEvt();
  },
  onPullUpStart: function onPullUpStart(e) {
    this._pullUpStartPageY = e.touches[0].screenY;
    this._isPullUp = false;
    this._pullUpEle = this.getEle();
  },
  onPullUpMove: function onPullUpMove(e) {
    // console.log(this._getDistanceFromEnd(this.scrollProperties), Object.keys(this.scrollProperties).every(i => this.scrollProperties[i] !== null))
    // 使用 pageY 对比有问题
    if (e.touches[0].screenY < this._pullUpStartPageY && this._reachBottom()) {
      // console.log('滚动条到了底部，pull up');
      this._isPullUp = true;
    }
  },
  onPullUpEnd: function onPullUpEnd(e) {
    if (this._isPullUp && this.props.onEndReached) {
      this.props.onEndReached(e);
    }
    this._isPullUp = false;
  },
  _reachBottom: function _reachBottom() {
    var element = this._pullUpEle;
    if (element === document.body) {
      return element.scrollHeight - element.scrollTop === window.innerHeight;
    }
    return element.scrollHeight - element.scrollTop === element.clientHeight;
  }
};
module.exports = exports['default'];