react-loader-factory-immutable/dist/index.js

A factory for creating custom functional react loading screen components (immutableJS version).

'use strict';

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

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; }; }();

exports.default = loaderFactory;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRedux = require('react-redux');

var _deepEqual = require('deep-equal');

var _deepEqual2 = _interopRequireDefault(_deepEqual);

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

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; }

function deepIncludes(arr, item) {
  return arr.some(function (el) {
    return (0, _deepEqual2.default)(el, item);
  });
}

function shallowDesymbolize(obj) {
  if (obj instanceof Array) {
    return obj.map(function (el) {
      return shallowDesymbolize(el);
    });
  } else if (obj instanceof Object) {
    var res = {};
    Object.getOwnPropertySymbols(obj).forEach(function (key) {
      var desymbolizedKey = '__dsym__'.concat(String(key));
      res[desymbolizedKey] = obj[key];
    });
    return res;
  }
  return obj;
}

function loaderFactory(actionsList, requestStates, stateInjector, stateMonitor) {
  if (stateMonitor === undefined) {
    stateMonitor = function stateMonitor() {
      return false;
    };
  }

  return function (WrappedComponent) {

    var factoryInjector = stateInjector || function (state) {
      return { activeRequests: state.get('activeRequests').toJS() };
    };
    var waitInjector = function waitInjector(state) {
      return Object.assign(factoryInjector(state), {
        waitingOnStore: stateMonitor(state)
      });
    };

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

      function Loader(props) {
        _classCallCheck(this, Loader);

        var _this = _possibleConstructorReturn(this, (Loader.__proto__ || Object.getPrototypeOf(Loader)).call(this, props));

        _this.currentRequests = [];
        _this.needsDispatch = true;
        return _this;
      }

      _createClass(Loader, [{
        key: 'render',
        value: function render() {
          var _this2 = this;

          var _props = this.props,
              activeRequests = _props.activeRequests,
              dispatch = _props.dispatch;

          // monitor given request states

          var requestsBusy = this.needsDispatch || this.props.waitingOnStore || function () {
            if (activeRequests instanceof Array) {
              return requestStates.some(function (state) {
                return activeRequests.includes(state);
              });
            } else if (activeRequests instanceof Object) {
              // works as else if
              return requestStates.some(function (state) {
                return Object.keys(activeRequests).includes(state);
              });
            } else {
              console.warn('Loader: did not receive a valid requestStates object: ', requestStates);
              return false;
            }
          }();

          // call actions, but throttle if repeating
          actionsList.forEach(function (action) {
            if (!deepIncludes(shallowDesymbolize(_this2.currentRequests), shallowDesymbolize(action))) {
              _this2.currentRequests.push(action);
              dispatch(action);
            }
          });
          // needsDispatch should be "true" only for the first render pass
          this.needsDispatch = false;

          // return function that takes a component which will be rendered when
          // none of the request states is active
          var Throbber = this.props.throbber || function (props) {
            return _react2.default.createElement(
              'div',
              {
                className: props.throbberClass || "loader layout--flex"
              },
              _react2.default.createElement(
                'h1',
                null,
                'Loading...'
              )
            );
          };

          // in other words:
          // IF requesting RENDER throbber
          // ELSE render given component
          if (requestsBusy) {
            return _react2.default.createElement(Throbber, null);
          } else {
            return _react2.default.createElement(WrappedComponent, this.props);
          }
        }
      }]);

      return Loader;
    }(_react2.default.Component);

    return (0, _reactRedux.connect)(waitInjector)(Loader);
  };
}