react-preloading-screen/dist/index.js

<p align="center"> <img alt="logo" title="react-preloading-screen" src="logo.svg" width="250"> </p> <p align="center"><b>react-preloading-screen</b></p> <p align="center">Minimal preloading component for React</p>

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
  (factory((global.Preloader = {}),null));
}(this, (function (exports,React) { 'use strict';

  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 _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 defaultStyle = {
    opacity: 1,
    zIndex: 999,
    backgroundColor: 'white',
    height: '100vh',
    width: '100vw',
    position: 'fixed',
    top: 0,
    left: 0,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  };

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

    function Preloader() {
      var _getPrototypeOf2;

      var _this;

      _classCallCheck(this, Preloader);

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

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

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
        loaded: false
      });

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "ref", void 0);

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "componentDidMount", function () {
        window.requestAnimationFrame(_this.checkReadyState);
      });

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "checkReadyState", function () {
        if (document.readyState === 'complete' && _this.ref) {
          _this.ref.style.opacity = '0';
          setTimeout(function () {
            _this.setState({
              loaded: true
            });

            _this.ref = null;
          }, _this.props.fadeDuration || 200);
        } else {
          window.requestAnimationFrame(_this.checkReadyState);
        }
      });

      return _this;
    }

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

        var _this$props = this.props,
            style = _this$props.style,
            className = _this$props.className,
            children = _this$props.children,
            fadeDuration = _this$props.fadeDuration;
        var PlaceholderComponent = React.Children.toArray(children).find(function (_ref) {
          var type = _ref.type;
          return type.displayName === 'PreloadingPlaceholder';
        });

        if (!PlaceholderComponent) {
          console.warn('react-preloading-screen:', 'No <Placeholder> component found in children of <Preloader>. Preloader is not in effect.');
          return children;
        }

        var cleanChildren = React.Children.map(children, function (child) {
          return child.type.displayName === 'PreloadingPlaceholder' ? null : child;
        });
        return React.createElement(React.Fragment, null, cleanChildren, this.state.loaded ? null : React.createElement("div", {
          style: _objectSpread({}, defaultStyle, {
            transition: "opacity ".concat(fadeDuration || 200 / 1000, "s ease")
          }, style),
          className: className,
          ref: function ref(_ref2) {
            _this2.ref = _ref2;
          }
        }, PlaceholderComponent));
      }
    }]);

    return Preloader;
  }(React.Component);

  var Placeholder = function Placeholder(_ref3) {
    var children = _ref3.children;
    return React.createElement(React.Fragment, null, children);
  };

  Placeholder.displayName = 'PreloadingPlaceholder';

  exports.Preloader = Preloader;
  exports.Placeholder = Placeholder;

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

})));
//# sourceMappingURL=index.js.map