phx-react
Version:
PHX REACT
50 lines • 2.44 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = PHXLoadingIndicator;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const constant_1 = require("../MainWrapV4/constant");
const LoadingProvider_1 = require("../LoadingProvider");
const getLoginInfo_1 = tslib_1.__importDefault(require("../Func/getLoginInfo"));
function PHXLoadingIndicator() {
const defaultColor = {
from: '#CB1D63',
to: '#621639',
};
const { progress } = (0, LoadingProvider_1.useLoading)();
const [color, setColor] = (0, react_1.useState)(defaultColor);
const userInfo = (0, getLoginInfo_1.default)();
(0, react_1.useEffect)(() => {
if (!userInfo)
return;
const savedSideBarType = localStorage.getItem(constant_1.LOCALSTORAGE_SHOW_SIDEBAR_TYPE);
if (savedSideBarType === constant_1.SIDEBAR_TYPE.ICON_AND_LABEL_HORIZONTAL) {
setColor(defaultColor);
return;
}
const themeJson = localStorage.getItem(`saved_theme_${userInfo.id}`);
if (themeJson) {
const theme = JSON.parse(themeJson);
setColor({
from: theme.bgColorFrom,
to: theme.bgColorTo,
});
}
}, [progress]);
return (react_1.default.createElement(react_1.default.Fragment, null, progress > 0 && (react_1.default.createElement("div", { className: ' fixed left-0 top-0 z-[9999] h-[3px] transition-all', style: { width: `${progress}%` } },
react_1.default.createElement("div", { className: 'relative h-[3px] w-full', style: {
backgroundColor: color.from,
} },
react_1.default.createElement("div", { className: 'absolute -right-1 -top-2.5 left-0 z-[80] h-4 rounded-r-2xl blur-[2px]', style: {
background: 'linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1))',
boxShadow: `
0 0 10px rgba(255,255,255,1),
0 0 30px rgba(255,255,255,0.8),
0 0 60px rgba(255,255,255,0.6)
`,
} }),
react_1.default.createElement("div", { className: 'pointer-events-none absolute right-0 h-[3px] w-full blur-[8px]', style: {
background: `radial-gradient(circle at right, ${color.from}, ${color.to})`,
} }))))));
}
//# sourceMappingURL=loading-indicator.js.map