react-busy-indicator
Version:
A stand-alone busy indicator for React.
60 lines • 3.47 kB
JavaScript
;
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);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var baseClass = 'BusyIndicator-' + Math.random().toString(36).slice(2);
// Add busy indicator stylesheet
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = "\n." + baseClass + " {\n position: fixed;\n height: 3px;\n width: 100%;\n top: 0;\n left: 0;\n z-index: 1000;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;\n transform: scaleX(0);\n transform-origin: left center;\n transition: transform ease-in 300ms, opacity ease-in 300ms;\n transition-delay: 0;\n opacity: 0;\n}\n." + baseClass + ".active {\n animation: " + baseClass + " 2s cubic-bezier(.4,.45,.6,.55) infinite;\n animation-fill-mode: forwards;\n opacity: 1;\n}\n\n@keyframes " + baseClass + " {\n 0% {\n transform: scaleX(0);\n }\n 10% {\n transform: scaleX(0.3);\n }\n 50% {\n transform: scaleX(0.7);\n }\n 90% {\n transform: scaleX(0.8);\n }\n 100% {\n transform: scaleX(1);\n }\n}";
document.getElementsByTagName('head')[0].appendChild(style);
function BusyIndicator(_a) {
var className = _a.className, color = _a.color, active = _a.active, isBusy = _a.isBusy, delayMs = _a.delayMs, style = _a.style, props = __rest(_a, ["className", "color", "active", "isBusy", "delayMs", "style"]);
var _b = react_1.useState(false), hasRendered = _b[0], setHasRendered = _b[1];
var isActive = active || isBusy;
// Prevent the `active` class from being applied on the first render,
// to allow the CSS animation's delay prop to work even if `isActive`
// is true when the component is mounted.
if (!hasRendered) {
isActive = false;
setTimeout(function () { return setHasRendered(true); });
}
// Only add the `active` class to this element while the
// next page is loading, triggering a CSS animation to
// show or hide the loading bar.
return react_1.default.createElement('div', __assign({}, props, { className: baseClass + " " + (isActive ? 'active' : '') + " " + (className || ''), style: __assign({ backgroundColor: color }, (isActive ? {
transitionDelay: (delayMs || 0) + 'ms',
} : {}), style) }));
}
exports.default = BusyIndicator;
BusyIndicator.defaultProps = {
color: '#F54391',
delayMs: 333,
};
//# sourceMappingURL=BusyIndicator.js.map