@ducor/react
Version:
admin template ui interface
81 lines (80 loc) • 5.62 kB
JavaScript
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { twJoin } from "tailwind-merge";
import Flex from "./flex";
import { useEffect } from "react";
var Loading = function (_a) {
var _b = _a.title, title = _b === void 0 ? "Loading" : _b, _c = _a.type, loadingType = _c === void 0 ? "spinner" : _c, _d = _a.varient, varient = _d === void 0 ? "secondary" : _d, _e = _a.size, size = _e === void 0 ? "md" : _e;
// Tailwind color variants
var varientColors = {
primary: "text-indigo-600 border-indigo-600",
secondary: "text-gray-600 border-gray-600",
success: "text-green-600 border-green-600",
danger: "text-red-600 border-red-600",
warning: "text-orange-500 border-orange-500",
};
// Tailwind size variants
var sizeClasses = {
sm: "size-4 border-2",
md: "size-8 border-4",
lg: "size-12 border-8",
};
var textSizeClass = {
sm: "text-base",
md: "text-2xl font-semibold",
lg: "text-4xl font-extrabold",
};
// Dynamically select size and color
var selectedColor = varientColors[varient] || varientColors.secondary;
var selectedSize = sizeClasses[size] || sizeClasses.md;
var selectedTextSize = textSizeClass[size] || textSizeClass.md;
var renderLoader = function () {
switch (loadingType) {
case "dots":
return (_jsxs("div", { className: 'flex space-x-2', children: [_jsx("div", { className: "h-2 w-2 rounded-full animate-bounce " }), _jsx("div", { className: "h-2 w-2 rounded-full animate-bounce200 " }), _jsx("div", { className: "h-2 w-2 rounded-full animate-bounce400 " })] }));
case "ring":
return (_jsx("div", { className: twJoin("rounded-full animate-spin ".concat(selectedSize, " border-dashed"), selectedColor) }));
case "ball":
return (_jsx("div", { className: twJoin("rounded-full animate-bounce ".concat(selectedSize), selectedColor) }));
case "bars":
return (_jsx("div", { className: 'flex space-x-1', children: __spreadArray([], Array(3), true).map(function (_, index) { return (_jsx("div", { className: twJoin("h-5 w-2 animate-pulse", selectedColor, "delay-".concat(index * 200)) }, index)); }) }));
case "infinity":
return (_jsx("div", { className: twJoin("relative flex items-center justify-center ".concat(selectedSize), selectedColor), children: _jsx("div", { className: 'h-4 w-12 animate-infinity' }) }));
default:
return (_jsx("div", { className: twJoin("border-t-transparent rounded-full animate-spin", selectedSize, selectedColor), role: 'status', children: _jsx("span", { className: 'sr-only', children: title }) }));
}
};
var ThreeDot = function () {
return (_jsxs(Flex, { align: 'center', justify: 'center', className: 'space-x-2 mt-2', children: [_jsx("div", { className: 'h-2 w-2 rounded-full bg-gray-500 opacity-0 animate-loadingSpanDot1' }), _jsx("div", { className: 'h-2 w-2 rounded-full bg-gray-500 opacity-0 animate-loadingSpanDot2' }), _jsx("div", { className: 'h-2 w-2 rounded-full bg-gray-500 opacity-0 animate-loadingSpanDot3' })] }));
};
return (_jsxs(Flex, { align: 'center', gap: 2, children: [renderLoader(), _jsxs(Flex, { className: twJoin(selectedColor, selectedTextSize), children: [_jsx("span", { className: 'mx-2', children: title }), _jsx(ThreeDot, {})] })] }));
};
var ScreenLoading = function () {
useEffect(function () {
document.body.style.overflow = "hidden"; // Disables scrolling
// Cleanup function to reset the overflow property when the component unmounts
return function () {
document.body.style.overflow = ""; // Resets to default behavior
};
}, []);
return (_jsx("div", { className: 'fixed inset-0 flex items-center justify-center bg-white z-40', children: _jsx("div", { className: 'text-center p-8', children: _jsx("div", { className: 'flex w-screen justify-center items-center h-screen bg-gray-200', children: _jsx("div", { className: 'w-12 h-12 flex items-center justify-center', children: _jsx("div", { className: 'w-10 h-10 border-2 border-blue-300 border-t-blue-500 rounded-full animate-spin' }) }) }) }) }));
};
var PageLoading = function () {
return (_jsx("div", { className: 'fixed inset-0 flex items-center justify-center bg-black/20 z-40', children: _jsx("div", { className: 'p-5 bg-gray-100 rounded-xl shadow-lg', children: _jsx("div", { className: 'w-12 h-12 flex items-center justify-center', children: _jsx("div", { className: 'w-10 h-10 border-2 border-blue-300 border-t-blue-500 rounded-full animate-spin' }) }) }) }));
};
var BackgroundLoading = function () {
return (_jsx("div", { className: 'fixed right-5 w-96 bottom-10 m-2 z-50', children: _jsx("div", { className: 'flex items-end justify-end', children: _jsx("div", { className: 'p-3 rounded-lg bg-gray-100 flex gap-2 ', children: _jsx("div", { className: 'w-5 h-5 border-2 border-blue-300 border-t-blue-500 rounded-full animate-spin' }) }) }) }));
};
export default Object.assign(Loading, {
Screen: ScreenLoading,
Page: PageLoading,
Background: BackgroundLoading,
});