@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
107 lines • 4.88 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
// (C) 2007-2018 GoodData Corporation
var React = require("react");
var PropTypes = require("prop-types");
exports.LoadingPropTypes = {
className: PropTypes.string,
color: PropTypes.string,
speed: PropTypes.number,
inline: PropTypes.bool,
height: PropTypes.any,
width: PropTypes.any,
imageHeight: PropTypes.any,
imageWidth: PropTypes.any,
};
var baseAnimationDuration = 1.4;
/**
* [LoadingComponent](http://sdk.gooddata.com/gooddata-ui/docs/loading_component.html)
* is a component that renders a default loading indicator
*/
var LoadingComponent = /** @class */ (function (_super) {
__extends(LoadingComponent, _super);
function LoadingComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
LoadingComponent.prototype.render = function () {
var _a = this.props, inline = _a.inline, width = _a.width, height = _a.height, imageWidth = _a.imageWidth, imageHeight = _a.imageHeight, color = _a.color, speed = _a.speed, className = _a.className;
var duration = baseAnimationDuration / speed;
var delay = duration / -5;
var dotStyles = {
transformOrigin: "4px 4px",
animation: "GDC-pop " + duration + "s infinite",
animationDelay: delay * 2 + "s",
fill: color,
};
var wrapperStyles = {
textAlign: "center",
display: inline ? "inline-flex" : "flex",
verticalAlign: "middle",
flexDirection: "column",
alignContent: "center",
justifyContent: "center",
flex: "1 0 auto",
height: height,
width: width,
};
var svgStyles = {
maxHeight: "100%",
maxWidth: "100%",
flex: "0 1 auto",
width: imageWidth,
height: imageHeight,
};
var dot1Styles = dotStyles;
var dot2Styles = __assign({}, dotStyles, { transformOrigin: "18px 4px", animationDelay: delay + "s" });
var dot3Styles = __assign({}, dotStyles, { transformOrigin: "32px 4px", animationDelay: "0" });
return (React.createElement("div", { className: className,
// this is intentional. Typescript complains about exact matching of css string values to enum.
style: wrapperStyles },
React.createElement("svg", { style: svgStyles, version: "1.1", x: "0px", y: "0px", viewBox: "0 0 36 8" },
React.createElement("style", { scoped: true }, "\n @keyframes GDC-pop {\n 0%,\n 80%,\n 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n }\n "),
React.createElement("g", { style: dot1Styles },
React.createElement("circle", { cx: "4", cy: "4", r: "4" })),
React.createElement("g", { style: dot2Styles },
React.createElement("circle", { cx: "18", cy: "4", r: "4" })),
React.createElement("g", { style: dot3Styles },
React.createElement("circle", { cx: "32", cy: "4", r: "4" })))));
};
LoadingComponent.defaultProps = {
className: "s-loading",
color: "#94a1ad",
speed: 1,
inline: false,
height: "100%",
width: undefined,
imageHeight: 8,
imageWidth: undefined,
};
LoadingComponent.propTypes = exports.LoadingPropTypes;
return LoadingComponent;
}(React.Component));
exports.LoadingComponent = LoadingComponent;
//# sourceMappingURL=LoadingComponent.js.map