gather-content-ui
Version:
GatherContent UI Library
92 lines (91 loc) • 4.12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LoadingOverlay = LoadingOverlay;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Loader = require("../src/modules/loader/Loader");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
var LoadingSVG = function LoadingSVG(props) {
return /*#__PURE__*/_react["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: "100",
height: "100",
style: {
background: "#fdfdfd"
},
viewBox: "0 0 100 100"
}, props), /*#__PURE__*/_react["default"].createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/_react["default"].createElement("path", {
className: "gui-line gui-line-1",
fill: "#278AEA",
d: "M32 41h19v-5H32z"
}), /*#__PURE__*/_react["default"].createElement("path", {
className: "gui-line gui-line-2",
fill: "#278AEA",
d: "M32 51h32v-5H32z"
}), /*#__PURE__*/_react["default"].createElement("path", {
className: "gui-line gui-line-3",
fill: "#278AEA",
d: "M32 61h25.5v-5H32z"
}), /*#__PURE__*/_react["default"].createElement("path", {
className: "gui-line gui-line-4",
fill: "#278AEA",
d: "M0 61h19v-5H0z"
}), /*#__PURE__*/_react["default"].createElement("path", {
className: "gui-line gui-line-5",
fill: "#278AEA",
d: "M0 61h32v-5H0z"
}), /*#__PURE__*/_react["default"].createElement("path", {
className: "gui-line gui-line-6",
fill: "#278AEA",
d: "M0 61h25.5v-5H0z"
}), /*#__PURE__*/_react["default"].createElement("path", {
fill: "#FDFDFD",
d: "M32 26.5H0v44h32z"
}), /*#__PURE__*/_react["default"].createElement("path", {
fill: "#278AEA",
d: "M65.62 21h-.025.201c5.467.056 9.855 4.533 9.8 10 0 0-.286 32.33 3.19 46.55a1.135 1.135 0 0 1-1.085 1.44c-.076 0-.22-.07-.29-.07-10.78-2.93-42.67-3-46.5-3H30.5c-5.523 0-10-4.476-10-10V31v-.05c.028-5.522 4.527-9.977 10.05-9.95h35.07zm0 5.325l-35.07-.005h-.02A4.68 4.68 0 0 0 25.85 31v34.95a4.68 4.68 0 0 0 4.7 4.66h.365c5.135 0 27.91.13 41.575 2C70.105 56.77 70.32 32.5 70.32 31v-.014a4.68 4.68 0 0 0-4.7-4.66z"
})));
};
function LoadingOverlay(_ref) {
var fixed = _ref.fixed,
hideSVG = _ref.hideSVG,
percentageLoaded = _ref.percentageLoaded,
loadingText = _ref.loadingText,
useSpinner = _ref.useSpinner;
var className = (0, _classnames["default"])("gui-loading-overlay", {
"gui-loading-overlay--fixed": fixed
});
return /*#__PURE__*/_react["default"].createElement("div", {
className: className,
role: "status"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "gui-loading-overlay__content gui-weight-semi-bold gui-text-align-center"
}, !hideSVG && useSpinner && /*#__PURE__*/_react["default"].createElement(_Loader.Loader, {
isOverlay: true
}), !hideSVG && !useSpinner &&
/*#__PURE__*/
// @ts-expect-error Type '{ title: string; }' is not assignable to type
_react["default"].createElement(LoadingSVG, {
title: "Loading"
}), percentageLoaded > 0 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", {
className: "gui-loading-overlay-text"
}, loadingText), /*#__PURE__*/_react["default"].createElement("p", {
className: "gui-h-margin-clear gui-color-neutral-base"
}, "".concat(percentageLoaded, "%")))));
}
LoadingOverlay.defaultProps = {
fixed: false,
hideSVG: false,
useSpinner: false,
percentageLoaded: 0,
loadingText: "Loading"
};
var _default = exports["default"] = LoadingOverlay;
//# sourceMappingURL=index.js.map