@navinc/base-react-components
Version:
Nav's Pattern Library
430 lines • 17.6 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
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 { useEffect, useState, useMemo, Fragment, useRef } from 'react';
const FullScreenWrapper = styled.div.withConfig({ displayName: "brc-sc-FullScreenWrapper", componentId: "brc-sc-330zp" }) `
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
`;
const LoadingWrapper = styled.div.withConfig({ displayName: "brc-sc-LoadingWrapper", componentId: "brc-sc-w1rspi" }) `
display: flex;
gap: 8px;
align-items: center;
`;
const animationData = {
v: '4.8.0',
meta: { g: 'LottieFiles AE 3.6.0', a: '', k: '', d: '', tc: '' },
fr: 60,
ip: 0,
op: 120,
w: 512,
h: 512,
nm: 'Pulse-Lottie-V2',
ddd: 0,
assets: [],
layers: [
{
ddd: 0,
ind: 1,
ty: 4,
nm: 'Top',
sr: 1,
ks: {
o: { a: 0, k: 100, ix: 11 },
r: { a: 0, k: 0, ix: 10 },
p: { a: 0, k: [256, 256, 0], ix: 2 },
a: { a: 0, k: [0, 0, 0], ix: 1 },
s: { a: 0, k: [100, 100, 100], ix: 6 },
},
ao: 0,
shapes: [
{
ty: 'gr',
it: [
{
ind: 0,
ty: 'sh',
ix: 1,
ks: {
a: 0,
k: {
i: [
[0, 0],
[0, 0],
[0, 0],
],
o: [
[0, 0],
[0, 0],
[0, 0],
],
v: [
[-170.375, 170.875],
[172, -172],
[172, 171.5],
],
c: false,
},
ix: 2,
},
nm: 'Path 1',
mn: 'ADBE Vector Shape - Group',
hd: false,
},
{
ty: 'tm',
s: {
a: 1,
k: [
{ i: { x: [0.2], y: [1] }, o: { x: [0.4], y: [0] }, t: 71, s: [0] },
{ t: 100, s: [100] },
],
ix: 1,
},
e: {
a: 1,
k: [
{ i: { x: [0.2], y: [1] }, o: { x: [0.4], y: [0] }, t: 10, s: [0] },
{ t: 40, s: [100] },
],
ix: 2,
},
o: { a: 0, k: 0, ix: 3 },
m: 1,
ix: 2,
nm: 'Trim Paths 1',
mn: 'ADBE Vector Filter - Trim',
hd: false,
},
{
ty: 'st',
c: { a: 0, k: [0.36862745098, 0.301960784314, 0.698039215686, 1], ix: 3 },
o: { a: 0, k: 100, ix: 4 },
w: { a: 0, k: 32, ix: 5 },
lc: 2,
lj: 2,
bm: 0,
nm: 'Stroke 1',
mn: 'ADBE Vector Graphic - Stroke',
hd: false,
},
{
ty: 'tr',
p: { a: 0, k: [0, 0], ix: 2 },
a: { a: 0, k: [0, 0], ix: 1 },
s: { a: 0, k: [100, 100], ix: 3 },
r: { a: 0, k: 0, ix: 6 },
o: { a: 0, k: 100, ix: 7 },
sk: { a: 0, k: 0, ix: 4 },
sa: { a: 0, k: 0, ix: 5 },
nm: 'Transform',
},
],
nm: 'Shape 2',
np: 4,
cix: 2,
bm: 0,
ix: 1,
mn: 'ADBE Vector Group',
hd: false,
},
],
ip: 0,
op: 150,
st: 0,
bm: 0,
},
{
ddd: 0,
ind: 2,
ty: 4,
nm: 'Middle',
sr: 1,
ks: {
o: { a: 0, k: 100, ix: 11 },
r: { a: 0, k: 0, ix: 10 },
p: { a: 0, k: [256, 256, 0], ix: 2 },
a: { a: 0, k: [0, 0, 0], ix: 1 },
s: { a: 0, k: [100, 100, 100], ix: 6 },
},
ao: 0,
shapes: [
{
ty: 'gr',
it: [
{
ind: 0,
ty: 'sh',
ix: 1,
ks: {
a: 0,
k: {
i: [
[0, 0],
[0, 0],
[0, 0],
],
o: [
[0, 0],
[0, 0],
[0, 0],
],
v: [
[-92, 171.5],
[116.75, -38.25],
[116.5, 171.5],
],
c: false,
},
ix: 2,
},
nm: 'Path 1',
mn: 'ADBE Vector Shape - Group',
hd: false,
},
{
ty: 'tm',
s: {
a: 1,
k: [
{ i: { x: [0.2], y: [1] }, o: { x: [0.4], y: [0] }, t: 66, s: [0] },
{ t: 95, s: [100] },
],
ix: 1,
},
e: {
a: 1,
k: [
{ i: { x: [0.2], y: [1] }, o: { x: [0.4], y: [0] }, t: 5, s: [0] },
{ t: 35, s: [100] },
],
ix: 2,
},
o: { a: 0, k: 0, ix: 3 },
m: 1,
ix: 2,
nm: 'Trim Paths 1',
mn: 'ADBE Vector Filter - Trim',
hd: false,
},
{
ty: 'st',
c: { a: 0, k: [0.36862745098, 0.301960784314, 0.698039215686, 1], ix: 3 },
o: { a: 0, k: 100, ix: 4 },
w: { a: 0, k: 32, ix: 5 },
lc: 2,
lj: 1,
ml: 4,
bm: 0,
nm: 'Stroke 1',
mn: 'ADBE Vector Graphic - Stroke',
hd: false,
},
{
ty: 'tr',
p: { a: 0, k: [0, 0], ix: 2 },
a: { a: 0, k: [0, 0], ix: 1 },
s: { a: 0, k: [100, 100], ix: 3 },
r: { a: 0, k: 0, ix: 6 },
o: { a: 0, k: 100, ix: 7 },
sk: { a: 0, k: 0, ix: 4 },
sa: { a: 0, k: 0, ix: 5 },
nm: 'Transform',
},
],
nm: 'Shape 2',
np: 4,
cix: 2,
bm: 0,
ix: 1,
mn: 'ADBE Vector Group',
hd: false,
},
],
ip: 0,
op: 150,
st: 0,
bm: 0,
},
{
ddd: 0,
ind: 3,
ty: 4,
nm: 'Bottom',
sr: 1,
ks: {
o: { a: 0, k: 100, ix: 11 },
r: { a: 0, k: 0, ix: 10 },
p: { a: 0, k: [255.5, 256, 0], ix: 2 },
a: { a: 0, k: [0, 0, 0], ix: 1 },
s: { a: 0, k: [100, 100, 100], ix: 6 },
},
ao: 0,
shapes: [
{
ty: 'gr',
it: [
{
ind: 0,
ty: 'sh',
ix: 1,
ks: {
a: 0,
k: {
i: [
[0, 0],
[0, 0],
[0, 0],
],
o: [
[0, 0],
[0, 0],
[0, 0],
],
v: [
[-12.5, 172.5],
[62.25, 97.75],
[62, 171.5],
],
c: false,
},
ix: 2,
},
nm: 'Path 1',
mn: 'ADBE Vector Shape - Group',
hd: false,
},
{
ty: 'tm',
s: {
a: 1,
k: [
{ i: { x: [0.2], y: [1] }, o: { x: [0.4], y: [0] }, t: 61, s: [0] },
{ t: 90, s: [100] },
],
ix: 1,
},
e: {
a: 1,
k: [
{ i: { x: [0.2], y: [1] }, o: { x: [0.4], y: [0] }, t: 0, s: [0] },
{ t: 30, s: [100] },
],
ix: 2,
},
o: { a: 0, k: 0, ix: 3 },
m: 1,
ix: 2,
nm: 'Trim Paths 1',
mn: 'ADBE Vector Filter - Trim',
hd: false,
},
{
ty: 'st',
c: { a: 0, k: [0.36862745098, 0.301960784314, 0.698039215686, 1], ix: 3 },
o: { a: 0, k: 100, ix: 4 },
w: { a: 0, k: 32, ix: 5 },
lc: 2,
lj: 1,
ml: 4,
bm: 0,
nm: 'Stroke 1',
mn: 'ADBE Vector Graphic - Stroke',
hd: false,
},
{
ty: 'tr',
p: { a: 0, k: [0, 0], ix: 2 },
a: { a: 0, k: [0, 0], ix: 1 },
s: { a: 0, k: [100, 100], ix: 3 },
r: { a: 0, k: 0, ix: 6 },
o: { a: 0, k: 100, ix: 7 },
sk: { a: 0, k: 0, ix: 4 },
sa: { a: 0, k: 0, ix: 5 },
nm: 'Transform',
},
],
nm: 'Shape 2',
np: 4,
cix: 2,
bm: 0,
ix: 1,
mn: 'ADBE Vector Group',
hd: false,
},
],
ip: 0,
op: 150,
st: 0,
bm: 0,
},
],
markers: [],
};
/**
* A loading spinner that pulses with color and displays a message or an array of messages.
*
* @description Adds a loading spinner with a pulsing color animation and a message.
*
* @param loadingMessage - A string or array of strings. NOTE: keep to a max char length of 30.
* @param messageDelay - The time in milliseconds to wait before changing the message. Default is 2000ms.
* @param fullScreen - Whether the spinner should take up the full screen.
*
* @returns A loading Nav logo with a pulsing color animation and an optional message.
*/
export const LoadingPulse = styled((_a) => {
var { loadingMessage, messageDelay = 2000, fullScreen } = _a, props = __rest(_a, ["loadingMessage", "messageDelay", "fullScreen"]);
const Wrapper = fullScreen ? FullScreenWrapper : Fragment;
const messageArray = useMemo(() => (typeof loadingMessage === 'string' ? [loadingMessage] : loadingMessage || []), [loadingMessage]);
const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
const animationRef = useRef(null);
const animationInstanceRef = useRef(null);
useEffect(() => {
const intervalId = setInterval(() => {
setCurrentMessageIndex((prevIndex) => (prevIndex + 1) % messageArray.length);
}, messageDelay);
return () => clearInterval(intervalId);
}, [messageArray, messageDelay]);
useEffect(() => {
function loadLottie() {
return __awaiter(this, void 0, void 0, function* () {
const lottiePkg = yield import('lottie-web');
if (!animationRef.current)
return;
if (animationInstanceRef.current) {
animationInstanceRef.current.destroy();
}
animationInstanceRef.current = lottiePkg.default.loadAnimation({
autoplay: true,
loop: true,
animationData,
container: animationRef.current,
});
});
}
loadLottie();
});
return (_jsx(Wrapper, { children: _jsxs(LoadingWrapper, Object.assign({ "data-testid": "loading-pulse" }, props, { children: [_jsx("div", { ref: animationRef, className: "h-300" }), messageArray[currentMessageIndex] && (_jsx("p", { className: "body1 w-[200px] whitespace-nowrap", children: messageArray[currentMessageIndex] }))] })) }));
}).withConfig({ displayName: "brc-sc-LoadingPulse", componentId: "brc-sc-1ild22m" }) ``;
//# sourceMappingURL=loading-pulse.js.map