react-lazily-render-scroll-parent/dist/esnext/index.js

Lazily render react components

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

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) : subClass.__proto__ = superClass; }

import * as React from 'react';
import scrollParent from 'scrollparent';
import './types';
import _getViewportBounds from './utils/getViewportBounds';
import _getElementBounds from './utils/getElementBounds';
import convertOffsetToBounds from './utils/convertOffsetToBounds';
import isElementInViewport from './utils/isElementInViewport';
import isBackCompatMode from './utils/isBackCompatMode';
import eventListenerOptions from './utils/eventListenerOptions';

var LazilyRender = function (_React$Component) {
  _inherits(LazilyRender, _React$Component);

  function LazilyRender() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, LazilyRender);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = LazilyRender.__proto__ || Object.getPrototypeOf(LazilyRender)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      hasBeenScrolledIntoView: false
    }, _this.update = function () {
      cancelAnimationFrame(_this.raf);
      _this.raf = requestAnimationFrame(function () {

        var elementBounds = _this.getElementBounds();
        var viewportBounds = _this.getViewportBounds();
        var offsetBounds = _this.getOffsetBounds();

        if (!elementBounds || !viewportBounds) {
          return;
        }

        if (isElementInViewport(elementBounds, viewportBounds, offsetBounds)) {
          _this.stopListening(_this.container);
          _this.setState({
            hasBeenScrolledIntoView: true
          }, function () {
            var onRender = _this.props.onRender;

            if (onRender) {
              onRender();
            }
          });
        }
      });
    }, _this.handleMount = function (element) {
      var scrollContainer = _this.props.scrollContainer;

      _this.element = element;
      _this.container = _this.getContainer(scrollContainer);
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(LazilyRender, [{
    key: 'getContainer',
    value: function getContainer(scrollContainer) {
      if (scrollContainer) {
        return scrollContainer;
      } else {
        if (this.element) {
          var container = scrollParent(this.element);
          if (container === document.scrollingElement || container === document.documentElement || !isBackCompatMode() && container == document.body) {
            return window;
          } else {
            return container;
          }
        } else {
          return undefined;
        }
      }
    }
  }, {
    key: 'getViewportBounds',
    value: function getViewportBounds() {
      return _getViewportBounds(this.container);
    }
  }, {
    key: 'getElementBounds',
    value: function getElementBounds() {
      return _getElementBounds(this.element);
    }
  }, {
    key: 'getOffsetBounds',
    value: function getOffsetBounds() {
      var offset = this.props.offset;

      return convertOffsetToBounds(offset);
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      var _this2 = this;

      var prevContainer = prevProps.scrollContainer;
      var nextContainer = this.props.scrollContainer;
      // If a scroll container was defined before, do some cleanup
      // and bootstrap the next scroll container.

      if (prevContainer !== nextContainer) {
        // If the previous container was already utilised, no cleanup
        // is required - already done in LazilyRender.update().
        if (!prevState.hasBeenScrolledIntoView) {
          this.stopListening(prevContainer);
        }
        // Set a new listener if the scrollContainer is defined, and update 
        // the container property accordingly. Note: this should only be done
        // when the next container is different.
        this.container = this.getContainer(nextContainer);
        this.startListening(this.container);
        // Signal that the element has not been scrolled into view and 
        // recompute its position. This will essentially 'reset' the node's
        // current status back to a placeholder item if need be.
        this.setState({ hasBeenScrolledIntoView: false }, function () {
          _this2.update();
        });
      }
    }
  }, {
    key: 'startListening',
    value: function startListening(container) {
      if (container) container.addEventListener('scroll', this.update, eventListenerOptions);
      window.addEventListener('resize', this.update);
    }
  }, {
    key: 'stopListening',
    value: function stopListening(container) {
      if (container) container.removeEventListener('scroll', this.update, eventListenerOptions);
      window.removeEventListener('resize', this.update);
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.update();
      this.startListening(this.container);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.stopListening(this.container);
    }
  }, {
    key: 'renderChildren',
    value: function renderChildren() {
      var _props = this.props,
          placeholder = _props.placeholder,
          content = _props.content,
          children = _props.children;
      var hasBeenScrolledIntoView = this.state.hasBeenScrolledIntoView;


      if (!hasBeenScrolledIntoView && placeholder) {
        return placeholder;
      }

      if (hasBeenScrolledIntoView && content) {
        return content;
      }

      if (children) {
        return children(hasBeenScrolledIntoView);
      }

      return null;
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          className = _props2.className,
          component = _props2.component;

      return React.createElement(component || 'div', {
        ref: this.handleMount,
        className: className,
        children: this.renderChildren()
      });
    }
  }]);

  return LazilyRender;
}(React.Component);

export default LazilyRender;