@navinc/base-react-components
Version:
Nav's Pattern Library
43 lines (41 loc) • 1.69 kB
JavaScript
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 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import CDNIllustration from './cdn-illustration';
import LoadingDots from './loading-dots';
import * as theme from './theme';
const GoldenCenter = styled.div `
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh * 1 / ${theme.goldenRatio});
`;
const LoadingContent = styled.div `
display: flex;
flex-flow: column nowrap;
align-items: center;
& > ${LoadingDots} {
color: ${theme.azure};
margin: 24px 0;
}
& > ${CDNIllustration} {
height: 190px;
}
`;
const LoadingView = (_a) => {
var { className, message = null, illustration, children } = _a, props = __rest(_a, ["className", "message", "illustration", "children"]);
return (_jsx(GoldenCenter, Object.assign({ className: className, "data-testid": "loading-view" }, props, { children: _jsxs(LoadingContent, { children: [message, _jsx(LoadingDots, {}, void 0), illustration ? _jsx(CDNIllustration, { filename: illustration }, void 0) : null] }, void 0) }), void 0));
};
LoadingView.displayName = 'LoadingView';
export default LoadingView;
//# sourceMappingURL=loading-view.js.map