@jdcfe/yep-react/es/infinite-loader/index.js

一套移动端的React组件库

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import * as React from 'react';
import throttle from 'lodash/throttle';
import noop from '../_utils/noop';

var InfiniteLoader = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(InfiniteLoader, _React$PureComponent);

  var _super = _createSuper(InfiniteLoader);

  function InfiniteLoader(props) {
    var _this;

    _classCallCheck(this, InfiniteLoader);

    _this = _super.call(this, props);
    _this.state = {
      showLoader: false,
      lastScrollTop: 0,
      actionTriggered: false
    }; // will be populated in componentDidMount
    // based on the height of the pull down element

    _this.onScrollListener = _this.onScrollListener.bind(_assertThisInitialized(_this));
    _this.throttledOnScrollListener = throttle(_this.onScrollListener, 150).bind(_assertThisInitialized(_this));
    _this.getScrollableTarget = _this.getScrollableTarget.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(InfiniteLoader, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this._scrollableNode = this.getScrollableTarget();
      this.el = this.props.height ? this._infScroll : this.props.scrollableTarget ? this._scrollableNode : window;
      this.el.addEventListener('scroll', this.throttledOnScrollListener);

      if (typeof this.props.initialScrollY === 'number' && this.el.scrollHeight > this.props.initialScrollY) {
        //this.el.scrollTo(0, this.props.initialScrollY) scrollTo is not a function in andriod webview
        if (typeof this.el.scrollTo === 'function') {
          this.el.scrollTo(0, this.props.initialScrollY);
        } else {
          this.el.scrollTop = this.props.initialScrollY;
        }
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.el.removeEventListener('scroll', this.throttledOnScrollListener);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(props) {
      // do nothing when dataLength is unchanged
      if (this.props.dataLength === props.dataLength) return; // update state when new data was sent in

      this.setState({
        showLoader: false,
        actionTriggered: false
      });
    }
  }, {
    key: "getScrollableTarget",
    value: function getScrollableTarget() {
      if (this.props.scrollableTarget instanceof HTMLElement) return this.props.scrollableTarget;

      if (typeof this.props.scrollableTarget === 'string') {
        return document.getElementById(this.props.scrollableTarget);
      }

      return this.el && this.el.parentNode;
    }
  }, {
    key: "isElementAtBottom",
    value: function isElementAtBottom(target) {
      var scrollThreshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.8;
      var clientHeight = target.clientHeight;
      return target.scrollTop + clientHeight >= scrollThreshold * target.scrollHeight;
    }
  }, {
    key: "onScrollListener",
    value: function onScrollListener(event) {
      var onScroll = this.props.onScroll;

      if (onScroll && typeof onScroll === 'function') {
        // Execute this callback in next tick so that it does not affect the
        // functionality of the library.
        setTimeout(function () {
          return onScroll(event);
        }, 0);
      }

      var target = this.props.height || this._scrollableNode ? event.target : document.documentElement.scrollTop ? document.documentElement : document.body; // return immediately if the action has already been triggered,
      // prevents multiple triggers.

      if (this.state.actionTriggered) return;
      var atBottom = this.isElementAtBottom(target, this.props.scrollThreshold); // call the `next` function in the props to trigger the next data fetch

      if (atBottom && this.props.hasMore) {
        this.setState({
          actionTriggered: true,
          showLoader: true
        });
        this.props.loadMore();
      }

      this.setState({
        lastScrollTop: target.scrollTop
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          className = _this$props.className,
          style = _this$props.style,
          hasChildren = _this$props.hasChildren,
          children = _this$props.children,
          height = _this$props.height,
          hasMore = _this$props.hasMore,
          endMessage = _this$props.endMessage,
          loader = _this$props.loader;
      var componentStyle = Object.assign({
        height: height || 'auto',
        overflow: 'auto',
        WebkitOverflowScrolling: 'touch'
      }, style);
      var hasChild = hasChildren || !!(children && React.Children.count(children));
      return /*#__PURE__*/React.createElement("div", {
        className: className,
        ref: function ref(infScroll) {
          return _this2._infScroll = infScroll;
        },
        style: componentStyle
      }, children, !this.state.showLoader && !hasChild && hasMore && loader, this.state.showLoader && hasMore && loader, !hasMore && endMessage);
    }
  }]);

  return InfiniteLoader;
}(React.PureComponent);

InfiniteLoader.defaultProps = {
  style: {},
  className: 'Yep-infinite-loader',
  onScroll: noop
};
export default InfiniteLoader;