@modus/react-idle/dist/commonjs/index.js

Render components when browser is idle

'use strict';

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

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 React = _interopRequireWildcard(_react);

var _IdleQueue = require('idlize/IdleQueue.mjs');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

// Initialize the global queue manager
/**
 * React Idle v1.1.1
 * (c) Modus Create
 * MIT Licensed
 * https://labs.moduscreate.com
 */

var queue = new _IdleQueue.IdleQueue();

// Let's see if this is a browser or node (server side rendering)
var isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement);

var OnIdle = function (_React$Component) {
  (0, _inherits3.default)(OnIdle, _React$Component);

  function OnIdle() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, OnIdle);

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

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = OnIdle.__proto__ || (0, _getPrototypeOf2.default)(OnIdle)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      ready: false
    }, _this.job = null, _this.clearJob = function () {
      // Remove this task from the global queue
      queue.unshiftTask(_this.queueRendering);
    }, _this.requestIdle = function () {
      // Clear the existing job if exists to avoid duplicates
      _this.clearJob();
      if (_this.props.skipSSR !== true) {
        // Queue up
        _this.job = queue.pushTask(_this.queueRendering);
      }
    }, _this.queueRendering = function () {
      // We request animation frame so that rendering doesn't happen during another ongoing process
      requestAnimationFrame(_this.readyToRender);
    }, _this.readyToRender = function () {
      _this.setState({
        ready: true
      });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(OnIdle, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.requestIdle();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      // We will render updates onIdle, unless this.props.syncUpdate is true
      if (!this.props.syncUpdate && this.props.children !== nextProps.children) {
        this.setState({ ready: false });
        this.requestIdle();
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      // Call the onRender function (if it exists) after the children have been rendered
      if (!prevState.ready && this.state.ready && typeof this.props.onRender === 'function') {
        this.props.onRender();
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      // Cleanup
      this.clearJob();
    }

    // Render when DOM is ready, not earlier

  }, {
    key: 'render',
    value: function render() {
      // Don't render anything if we are skipping SSR
      if ((process.env.NODE_ENV === 'test' && '__SSR__' in window && window.__SSR__ || !isBrowser) && this.props.skipSSR) {
        return null;
      }

      return this.state.ready ? this.props.children : this.props.placeholder || null;
    }
  }]);
  return OnIdle;
}(React.Component);

OnIdle.defaultProps = {
  placeholder: null
};
exports.default = OnIdle;