react-fetch-preloader/dist/react-fetch-preloader.cjs.js

Simple React component for display preloader while fetching

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a 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);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _extends() {
  _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;
  };

  return _extends.apply(this, arguments);
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);

    if (typeof Object.getOwnPropertySymbols === 'function') {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }

    ownKeys.forEach(function (key) {
      _defineProperty(target, key, source[key]);
    });
  }

  return target;
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  }

  return _assertThisInitialized(self);
}

var INTERVAL = 50;

var ShowPreloader =
/*#__PURE__*/
function (_React$Component) {
  _inherits(ShowPreloader, _React$Component);

  function ShowPreloader() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, ShowPreloader);

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

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ShowPreloader)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
      responseTime: 0,
      isLoading: false,
      showPreloader: false,
      data: null,
      error: null
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "checkResponse", function () {
      var duration = _this.props.duration;
      var _this$state = _this.state,
          responseTime = _this$state.responseTime,
          isLoading = _this$state.isLoading,
          showPreloader = _this$state.showPreloader;

      _this.setState(function (prevState) {
        return {
          responseTime: prevState.responseTime + INTERVAL
        };
      }, function () {
        if (responseTime >= duration && isLoading) {
          if (!showPreloader) {
            _this.setState({
              showPreloader: true
            });
          }

          clearInterval(_this.intervalId);
        }
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "makeResponse", function (url) {
      var fetch = _this.props.fetch;

      _this.setState({
        responseTime: 0,
        isLoading: true
      });

      fetch(url).then(function (resp) {
        return resp.json();
      }).then(function (data) {
        _this.setState({
          isLoading: false,
          data: data,
          showPreloader: false
        });

        clearInterval(_this.intervalId);
      }).catch(function (error) {
        _this.setState({
          isLoading: false,
          error: error,
          showPreloader: false
        });

        clearInterval(_this.intervalId);
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderContent", function () {
      var _this$props = _this.props,
          loaded = _this$props.loaded,
          errored = _this$props.errored;
      var Loaded = loaded;
      var Error = errored;
      var _this$state2 = _this.state,
          data = _this$state2.data,
          isLoading = _this$state2.isLoading,
          error = _this$state2.error;

      if (error) {
        return React.createElement(Error, {
          error: error
        });
      }

      return !isLoading && data ? React.createElement(Loaded, {
        data: data
      }) : null;
    });

    return _this;
  }

  _createClass(ShowPreloader, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props2 = this.props,
          url = _this$props2.url,
          loaded = _this$props2.loaded;

      if (!url) {
        throw new Error('url param is required!');
      }

      if (!loaded) {
        throw new Error('loaded param is required!');
      }

      this.makeResponse(url);
      this.intervalId = setInterval(this.checkResponse, INTERVAL);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var url = this.props.url;

      if (url !== prevProps.url) {
        this.makeResponse(url);
        this.intervalId = setInterval(this.checkResponse, INTERVAL);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      clearInterval(this.intervalId);
    }
  }, {
    key: "render",
    value: function render() {
      var showPreloader = this.state.showPreloader;
      var preloader = this.props.preloader;
      var Preloader = preloader;
      return showPreloader ? React.createElement(Preloader, null) : this.renderContent();
    }
  }]);

  return ShowPreloader;
}(React.Component);

_defineProperty(ShowPreloader, "defaultProps", {
  fetch: typeof window !== 'undefined' ? window.fetch : function () {},
  duration: 500,
  errored: function errored() {
    return null;
  },
  preloader: function preloader() {
    return React.createElement("span", null, "Loading...");
  }
});

var withPreloader = function withPreloader(WrappedComponent) {
  var HOC =
  /*#__PURE__*/
  function (_React$Component) {
    _inherits(HOC, _React$Component);

    function HOC() {
      var _getPrototypeOf2;

      var _this;

      _classCallCheck(this, HOC);

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

      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(HOC)).call.apply(_getPrototypeOf2, [this].concat(args)));

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {});

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "preload", function (id, url) {
        if (!id) {
          throw new Error('Id param is required!');
        }

        if (!url) {
          throw new Error('Url param is required!');
        }

        _this.setState(_defineProperty({}, id, {
          url: url
        }));
      });

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderPreloader", function (id, showPreloaderOptions) {
        var preloadOptions = _this.props.preloadOptions;

        var options = _objectSpread({}, preloadOptions, showPreloaderOptions);

        return _this.state[id] && React.createElement(ShowPreloader, _extends({
          url: _this.state[id].url
        }, options));
      });

      return _this;
    }

    _createClass(HOC, [{
      key: "render",
      value: function render() {
        return React.createElement(WrappedComponent, {
          preload: this.preload,
          renderPreloader: this.renderPreloader
        });
      }
    }]);

    return HOC;
  }(React.Component);

  return HOC;
};

exports.withPreloader = withPreloader;
exports.ShowPreloader = ShowPreloader;