@up-group-ui/react-controls
Version:
Up shared react controls
61 lines • 6.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LoadingIndicator = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var Box_1 = (0, tslib_1.__importDefault)(require("../../Containers/Box"));
var Grid_1 = require("../../Containers/Grid");
var typestyle_1 = require("typestyle");
var styles_1 = require("./styles");
var withTheme_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/withTheme"));
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var Box_2 = (0, tslib_1.__importDefault)(require("../../Containers/Box"));
var utils_1 = require("../../../Common/theming/utils");
var SvgIcon = function (props) {
var children = props.children, className = props.className, loaderSize = props.loaderSize, theme = props.theme, others = (0, tslib_1.__rest)(props, ["children", "className", "loaderSize", "theme"]);
return ((0, jsx_runtime_1.jsx)("svg", (0, tslib_1.__assign)({ className: (0, classnames_1.default)((0, typestyle_1.style)((0, styles_1.svgStyle)(props)), className) }, others, { children: children }), void 0));
};
var LoadingIndicator = (function (_super) {
(0, tslib_1.__extends)(LoadingIndicator, _super);
function LoadingIndicator() {
return _super !== null && _super.apply(this, arguments) || this;
}
LoadingIndicator.prototype.render = function () {
var _displayMode = this.props.displayMode || 'inline';
var _title = this.props.title || 'Veuillez patienter...';
var _a = this.props, theme = _a.theme, isLoading = _a.isLoading;
if (!isLoading && _displayMode != 'zone') {
return null;
}
var _b = (0, styles_1.getStyleByMode)(this.props, _displayMode), container = _b.container, overlay = _b.overlay, loadingIndicatorStyle = _b.loadingIndicatorStyle;
if (_displayMode === 'zone') {
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: container, className: (0, classnames_1.default)('up-loading-indicator', this.props.className) }, { children: [this.props.children, (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: overlay }, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, typestyle_1.style)(loadingIndicatorStyle) }, { children: (0, jsx_runtime_1.jsxs)(Box_1.default, (0, tslib_1.__assign)({ boxSize: 'auto', pad: 'none', margin: 'none', flexDirection: 'column', alignItems: "center", justifyContent: "center", className: (0, classnames_1.default)('up-loading-indicator', this.props.className) }, { children: [(0, jsx_runtime_1.jsx)(SvgIcon, { viewBox: "0 0 64 64", theme: theme, loaderSize: this.props.loaderSize }, void 0), this.props.message && ((0, jsx_runtime_1.jsx)("p", (0, tslib_1.__assign)({ style: {
color: theme.colorMap.grey1,
} }, { children: this.props.message }), void 0))] }), void 0) }), void 0) }), void 0)] }), void 0));
}
else if (_displayMode === 'inline') {
return ((0, jsx_runtime_1.jsxs)(Box_1.default, (0, tslib_1.__assign)({ boxSize: 'auto', pad: 'none', margin: 'none', alignItems: "center", justifyContent: "center", className: (0, classnames_1.default)('up-loading-indicator', this.props.className) }, { children: [(0, jsx_runtime_1.jsx)(SvgIcon, { viewBox: "0 0 " + (this.props.width || 48) + " " + (this.props.width || 48), loaderSize: this.props.loaderSize, theme: theme }, void 0), this.props.message && (0, jsx_runtime_1.jsx)("p", (0, tslib_1.__assign)({ style: { color: theme.colorMap.grey1 } }, { children: this.props.message }), void 0)] }), void 0));
}
else {
return ((0, jsx_runtime_1.jsx)("aside", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-loading-screen', this.props.className), style: container }, { children: (0, jsx_runtime_1.jsx)(Box_2.default, (0, tslib_1.__assign)({ boxSize: 'full', justifyContent: 'center', alignItems: 'center' }, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: loadingIndicatorStyle }, { children: (0, jsx_runtime_1.jsx)(Grid_1.UpGrid, { children: (0, jsx_runtime_1.jsxs)(Grid_1.UpRow, { children: [(0, jsx_runtime_1.jsx)(Grid_1.UpCol, (0, tslib_1.__assign)({ span: 6 }, { children: (0, jsx_runtime_1.jsx)(SvgIcon, { theme: theme, loaderSize: this.props.loaderSize, viewBox: "0 0 48 48" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(Grid_1.UpCol, (0, tslib_1.__assign)({ span: 18 }, { children: (0, jsx_runtime_1.jsxs)(Grid_1.UpGrid, { children: [(0, jsx_runtime_1.jsx)(Grid_1.UpRow, { children: (0, jsx_runtime_1.jsx)(Grid_1.UpCol, (0, tslib_1.__assign)({ span: 24 }, { children: (0, jsx_runtime_1.jsx)("hgroup", (0, tslib_1.__assign)({ style: {
textShadow: '0px 0px 0.1ex',
} }, { children: (0, jsx_runtime_1.jsx)("h3", (0, tslib_1.__assign)({ style: {
fontSize: (0, utils_1.toRem)(22),
margin: '0px',
} }, { children: (0, jsx_runtime_1.jsx)("span", { children: _title }, void 0) }), void 0) }), void 0) }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(Grid_1.UpRow, { children: (0, jsx_runtime_1.jsx)(Grid_1.UpCol, (0, tslib_1.__assign)({ span: 24 }, { children: (0, jsx_runtime_1.jsx)("p", (0, tslib_1.__assign)({ className: "loading-status text-info", style: {
textAlign: 'left',
color: theme.colorMap.grey1,
} }, { children: this.props.message }), void 0) }), void 0) }, void 0)] }, void 0) }), void 0)] }, void 0) }, void 0) }), void 0) }), void 0) }), void 0));
}
};
LoadingIndicator.defaultProps = {
theme: theming_1.default,
width: 84,
};
return LoadingIndicator;
}(react_1.default.Component));
exports.LoadingIndicator = LoadingIndicator;
exports.default = (0, withTheme_1.default)(LoadingIndicator);
//# sourceMappingURL=UpLoadingIndicator.js.map