react-async-effect/dist/react-async-effect.esm.js

A component to help manage work outside render cycle

import { Component } from 'react';

var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

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







var _extends = Object.assign || function (target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];

    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }

  return target;
};



var inherits = function (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;
};









var objectWithoutProperties = function (obj, keys) {
  var target = {};

  for (var i in obj) {
    if (keys.indexOf(i) >= 0) continue;
    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
    target[i] = obj[i];
  }

  return target;
};

var possibleConstructorReturn = function (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;
};

/**
 * Worker which is going to run at consumer's call
 */
var babelPluginFlowReactPropTypes_proptype_Worker = {
  run: require('prop-types').func.isRequired,
  stop: require('prop-types').func.isRequired
};


/**
 * Current representation of the Worker run state
 */
if (typeof exports !== 'undefined') Object.defineProperty(exports, 'babelPluginFlowReactPropTypes_proptype_Worker', {
  value: babelPluginFlowReactPropTypes_proptype_Worker,
  configurable: true,
  enumerable: true
});
var babelPluginFlowReactPropTypes_proptype_AsyncState = {
  isRunning: require('prop-types').bool.isRequired,
  result: require('prop-types').any,
  error: require('prop-types').any
};


/**
 * Async Effect renderer props
 */
if (typeof exports !== 'undefined') Object.defineProperty(exports, 'babelPluginFlowReactPropTypes_proptype_AsyncState', {
  value: babelPluginFlowReactPropTypes_proptype_AsyncState,
  configurable: true,
  enumerable: true
});
var babelPluginFlowReactPropTypes_proptype_AsyncEffectRendererProps = {
  isRunning: require('prop-types').bool,
  result: require('prop-types').any,
  error: require('prop-types').any,
  run: require('prop-types').func.isRequired,
  stop: require('prop-types').func.isRequired,
  reset: require('prop-types').func.isRequired
};


/**
 * A function to return a Worker bound to resolve and reject callbacks
 */
if (typeof exports !== 'undefined') Object.defineProperty(exports, 'babelPluginFlowReactPropTypes_proptype_AsyncEffectRendererProps', {
  value: babelPluginFlowReactPropTypes_proptype_AsyncEffectRendererProps,
  configurable: true,
  enumerable: true
});

var babelPluginFlowReactPropTypes_proptype_workerFactory = require('prop-types').func;

if (typeof exports !== 'undefined') Object.defineProperty(exports, 'babelPluginFlowReactPropTypes_proptype_workerFactory', {
  value: babelPluginFlowReactPropTypes_proptype_workerFactory,
  configurable: true,
  enumerable: true
});


var InitialState = {
  isRunning: false,
  result: undefined,
  error: undefined
};

var AsyncEffect = function (_React$Component) {
  inherits(AsyncEffect, _React$Component);

  function AsyncEffect() {
    var _ref;

    var _temp, _this, _ret;

    classCallCheck(this, AsyncEffect);

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

    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = AsyncEffect.__proto__ || Object.getPrototypeOf(AsyncEffect)).call.apply(_ref, [this].concat(args))), _this), _initialiseProps.call(_this), _temp), possibleConstructorReturn(_this, _ret);
  }

  // A function to dispose worker's bind


  // the current worker


  createClass(AsyncEffect, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.bindWorker(this.props.createWorker);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(props) {
      if (props.createWorker !== this.props.createWorker) {
        if (!props.concurrentWorkers) {
          if (!props.concurrentRuns) {
            this.stop();
          }

          this.unbindWorker();
        }

        this.bindWorker(props.createWorker);
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this.props.stopOnUnmount) {
        this.worker.stop();
      }

      this.unbindWorker();
    }

    /**
     * handle async method's success callback
     *
     * @param {any} result the result of the async effect
     */


    /**
     * handle worker run's failure
     *
     * @param {any} error a error that occured during the effect
     */


    /**
     * Runs worker's run with `...args`, stopping any concurrent runs
     * they are not allowed
     *
     * @param {any} args arguments to call `run` with
     */


    /**
     * Stops worker's run
     */


    /**
     * Stops any run of the current worker.
     */


    /**
     * Creates and bind worker to this listener
     *
     * @param {workerFactory} createWorker {@see @prop createWorker}
     */

  }, {
    key: 'render',
    value: function render() {
      var props = _extends({}, this.state, {
        run: this.run,
        stop: this.stop,
        reset: this.reset
      });

      if (typeof this.props.render === 'function') return this.props.render(props);

      return this.props.children(props);
    }
  }]);
  return AsyncEffect;
}(Component);

AsyncEffect.defaultProps = {
  // Most of time shouldn't be there two workers at the same time
  concurrentWorkers: false,

  // Most of time shouldn't be there two tasks at the same time
  concurrentRuns: false,

  // Most of time, none is interested in a side-effect if none is listening
  stopOnUnmount: true };

var _initialiseProps = function () {
  var _this2 = this;

  this.state = InitialState;

  this.didChange = function () {
    if (_this2.props.onChange) {
      _this2.props.onChange(_this2.state);
    }
  };

  this.resolve = function () {
    var result = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;

    _this2.setState({
      isRunning: false,
      result: result,
      error: undefined
    }, _this2.didChange);
  };

  this.reject = function () {
    var error = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;

    _this2.setState({
      isRunning: false,
      error: error
    }, _this2.didChange);
  };

  this.run = function () {
    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    _this2.setState(function (_ref2, _ref3) {
      var _worker;

      var concurrentRuns = _ref3.concurrentRuns;
      var isRunning = _ref2.isRunning,
          state = objectWithoutProperties(_ref2, ['isRunning']);

      if (isRunning && !concurrentRuns) {
        _this2.worker.stop();
      }

      (_worker = _this2.worker).run.apply(_worker, args);

      return _extends({}, state, { isRunning: true });
    }, _this2.didChange);
  };

  this.stop = function () {
    _this2.setState(function (_ref4) {
      var isRunning = _ref4.isRunning,
          state = objectWithoutProperties(_ref4, ['isRunning']);

      if (isRunning) {
        _this2.worker.stop();
      }

      return _extends({}, state, {
        isRunning: false
      });
    }, _this2.didChange);
  };

  this.reset = function () {
    _this2.setState(function (_ref5) {
      var isRunning = _ref5.isRunning;

      if (isRunning) {
        _this2.worker.stop();
      }

      return InitialState;
    }, _this2.didChange);
  };

  this.bindWorker = function (createWorker) {
    var resolve = _this2.resolve;
    var reject = _this2.reject;

    _this2.unbindWorker = function () {
      resolve = function () {};
      reject = function () {};
    };

    _this2.worker = createWorker(function () {
      return resolve.apply(undefined, arguments);
    }, function () {
      return reject.apply(undefined, arguments);
    });
  };
};

AsyncEffect.propTypes = {
  /**
   * Whether current worker should stop when new Worker is going to be created
   */
  concurrentWorkers: require('prop-types').bool.isRequired,


  /**
   * Whether worker should stop before a new run
   */
  concurrentRuns: require('prop-types').bool.isRequired,


  /**
   * Whether worker should stop after the unmount
   */
  stopOnUnmount: require('prop-types').bool.isRequired,


  /**
   * A function to return a Worker bound to resolve and reject callbacks
   */
  createWorker: require('prop-types').func.isRequired,


  /**
   * Called whenever state is changed
   */
  onChange: require('prop-types').func,


  /**
   * The UI to be rendered on each state change
   */
  render: require('prop-types').func,


  /**
   * Alias for render, for convenience
   */
  children: require('prop-types').func
};

export default AsyncEffect;