test.js

'use strict';

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

var _assign = require('babel-runtime/core-js/object/assign');

var _assign2 = _interopRequireDefault(_assign);

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 _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _hoistNonReactStatics = require('hoist-non-react-statics');

var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics);

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

if (typeof window !== 'undefined') {
  // Polyfills for intersection-observer
  require('intersection-observer');
}

function handleViewport(Component, options) {
  var InViewport = function (_PureComponent) {
    (0, _inherits3.default)(InViewport, _PureComponent);

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

      var _this = (0, _possibleConstructorReturn3.default)(this, (InViewport.__proto__ || (0, _getPrototypeOf2.default)(InViewport)).call(this, props));

      _this.observer = null;
      _this.node = null;
      _this.state = {
        inViewport: false
      };
      _this.handleIntersection = _this.handleIntersection.bind(_this);
      _this.initIntersectionObserver = _this.initIntersectionObserver.bind(_this);
      return _this;
    }

    (0, _createClass3.default)(InViewport, [{
      key: 'componentDidMount',
      value: function componentDidMount() {
        // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
        this.initIntersectionObserver();
        this.startObserver(this.node, this.observer);
      }
    }, {
      key: 'initIntersectionObserver',
      value: function initIntersectionObserver() {
        if (!this.observer) {
          this.observer = new IntersectionObserver(this.handleIntersection, options);
        }
      }
    }, {
      key: 'componentWillUnmount',
      value: function componentWillUnmount() {
        this.stopObserver(this.node, this.observer);
      }
    }, {
      key: 'startObserver',
      value: function startObserver(node, observer) {
        if (node && observer) {
          observer.observe(node);
        }
      }
    }, {
      key: 'stopObserver',
      value: function stopObserver(node, observer) {
        if (node && observer) {
          observer.unobserve(node);
          observer.disconnect();
          observer = null;
        }
      }
    }, {
      key: 'handleIntersection',
      value: function handleIntersection(entries) {
        var entry = entries[0] || {};
        var intersectionRatio = entry.intersectionRatio;

        if (intersectionRatio <= 0) {
          return;
        }
        this.setState({
          inViewport: true
        });
      }
    }, {
      key: 'render',
      value: function render() {
        var _this2 = this;

        return _react2.default.createElement(Component, (0, _assign2.default)({}, this.props, {
          inViewport: this.state.inViewport,
          ref: function ref(node) {
            _this2.node = _reactDom2.default.findDOMNode(node);
          },
          innerRef: function innerRef(node) {
            if (node && !_this2.node) {
              // handle stateless
              _this2.initIntersectionObserver();
              _this2.startObserver(_reactDom2.default.findDOMNode(node), _this2.observer);
            }
          }
        }));
      }
    }]);
    return InViewport;
  }(_react.PureComponent);

  return (0, _hoistNonReactStatics2.default)(InViewport, Component);
}

exports.default = handleViewport;