react-loading-progress
Version:
Loading display components
295 lines (257 loc) • 9.62 kB
JavaScript
import _regeneratorRuntime from "babel-runtime/regenerator";
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; }; }();
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
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; }
import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import styled, { css } from "styled-components";
import Ripple from "../Ripple";
import Fade from "../Fade";
import Err from "../Error";
import Update from "../Update";
import Spinner from "./Spinner/Connected";
import DefaultSpinner from "./DefaultSpinner";
var _class = function (_Component) {
_inherits(_class, _Component);
function _class() {
var _ref,
_this2 = this;
var _temp, _this, _ret;
_classCallCheck(this, _class);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
height: 0,
width: 0,
ripple: false,
rootHeight: 0,
rootWidth: 0,
isLoad: null
}, _this.getIcon = function () {
if (_this.props.update) {
return React.createElement(Update, null);
}
return _this.context.icon();
}, _this.changeRoot = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var root;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (_this.context.isLoad()) {
setTimeout(function () {
return _this.changeRoot();
}, 50);
}
_context.next = 3;
return ReactDOM.findDOMNode(_this.root);
case 3:
root = _context.sent;
if (root) {
_context.next = 6;
break;
}
return _context.abrupt("return");
case 6:
if (!(root.offsetHeight === 0 || root.offsetWidth === 0)) {
_context.next = 8;
break;
}
return _context.abrupt("return");
case 8:
_this.setState({
height: root.offsetHeight,
width: root.offsetWidth,
rootHeight: root.offsetHeight,
rootWidth: root.offsetWidth
});
case 9:
case "end":
return _context.stop();
}
}
}, _callee, _this2);
})), _this.getPlacement = function (placement) {
if (placement === "left") {
return "flex-start";
}
if (placement === "right") {
return "flex-end";
}
return "center";
}, _this.content = function () {
if (_this.context.isLoad() && !_this.props.children) {
return React.createElement(DefaultSpinner, {
component: _this.getIcon(),
placement: _this.getPlacement(_this.props.placement),
width: _this.state.rootWidth,
height: _this.state.rootHeight,
iconSize: _this.props.size,
iconHeightSize: _this.props.heightSize,
iconWidthSize: _this.props.widthSize,
maxHeight: _this.props.maxHeight,
maxWidth: _this.props.maxWidth,
center: _this.props.center
});
}
if (!_this.context.isLoad()) {
if (_this.context.isError()) {
return React.createElement(
Err,
{
errorNoChild: _this.props.errorNoChild,
errorText: _this.props.errorText,
ripple: _this.state.ripple ? React.createElement(Ripple, {
width: _this.state.width,
height: _this.state.height,
placement: _this.getPlacement(_this.props.placement),
error: true
}) : null
},
_this.props.children
);
}
return React.createElement(
Fragment,
null,
_this.state.ripple ? React.createElement(Ripple, {
width: _this.state.width,
height: _this.state.height,
placement: _this.getPlacement(_this.props.placement)
}) : null,
_this.props.children
);
}
return React.createElement(
Fragment,
null,
React.createElement(Spinner, {
component: _this.getIcon(),
iconSize: _this.props.size,
iconHeightSize: _this.props.heightSize,
iconWidthSize: _this.props.widthSize,
placement: _this.getPlacement(_this.props.placement),
height: _this.state.height,
width: _this.state.width,
maxHeight: _this.props.maxHeight,
maxWidth: _this.props.maxWidth,
center: _this.props.center
}),
!_this.props.noChild ? React.createElement(
"div",
{
style: {
opacity: "0.25",
zIndex: 1
}
},
_this.props.children
) : React.createElement("div", null)
);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(_class, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this3 = this;
setTimeout(function () {
return _this3.changeRoot();
}, 10);
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps() {
var _this4 = this;
if (this.context.isLoad()) {
this.setState({
ripple: this.props.ripple
});
}
if (this.context.isLoad() && this.props.noChild) {
return;
}
setTimeout(function () {
return _this4.changeRoot();
}, 50);
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
if (this.context.isLoad() !== this.state.isLoad || nextProps.children !== this.props.children) {
this.setState({
isLoad: this.context.isLoad()
});
return true;
}
if (this.state.height === nextState.height && this.state.width === nextState.width) {
return false;
}
this.setState({
isLoad: this.context.isLoad()
});
return true;
}
}, {
key: "render",
value: function render() {
var _this5 = this;
return React.createElement(
"div",
{ ref: function ref(node) {
return _this5.root = node;
} },
React.createElement(
Fade,
{
mask: this.props.mask,
width: this.state.width,
height: this.state.height,
fadeOut: !this.context.isLoad()
},
this.content()
)
);
}
}]);
return _class;
}(Component);
_class.defaultProps = {
placement: "center",
mask: true,
noChild: false,
errorNoChild: false,
errorText: "",
size: 1,
heightSize: 1,
widthSize: 1,
maxHeight: 100,
maxWidth: 100,
ripple: false,
update: false,
center: true
};
_class.propTypes = {
placement: PropTypes.string,
mask: PropTypes.bool,
noChild: PropTypes.bool,
errorNoChild: PropTypes.bool,
errorText: PropTypes.any,
size: PropTypes.number,
heightSize: PropTypes.number,
widthSize: PropTypes.number,
maxHeight: PropTypes.number,
maxWidth: PropTypes.number,
ripple: PropTypes.bool,
update: PropTypes.bool,
center: PropTypes.bool
};
_class.contextTypes = {
isLoad: PropTypes.func,
icon: PropTypes.func,
isError: PropTypes.func
};
export default _class;