@ducor/react
Version:
admin template ui interface
82 lines (81 loc) • 5.19 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 { twMerge } from "tailwind-merge";
import Flex from "./flex";
import { useEffect, forwardRef } from "react";
const Loading = forwardRef((_a, ref) => {
var { title = "Loading", type: loadingType = "spinner", variant = "secondary", size = "md", className } = _a, props = __rest(_a, ["title", "type", "variant", "size", "className"]);
// Tailwind color variants
const variantColors = {
primary: "text-indigo-600 border-blue-300 border-t-blue-500",
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
const sizeClasses = {
sm: "size-4 border-2",
md: "size-8 border-4",
lg: "size-12 border-8",
};
const textSizeClass = {
sm: "text-base",
md: "text-2xl font-semibold",
lg: "text-4xl font-extrabold",
};
// Dynamically select size and color
const selectedColor = variantColors[variant] || variantColors.primary;
const selectedSize = sizeClasses[size] || sizeClasses.md;
const selectedTextSize = textSizeClass[size] || textSizeClass.md;
const renderLoader = () => {
switch (loadingType) {
case "bars":
return (_jsx("div", { className: 'flex items-center space-x-1', children: [...Array(6)].map((_, index) => (_jsx("span", { className: 'w-2 h-6 bg-gray-500 animate-bar', style: { animationDelay: `${index * 0.1}s` } }, index))) }));
default:
return (_jsxs(Flex, { className: twMerge(selectedColor, selectedTextSize), children: [_jsx("span", { className: 'mx-2', children: title }), _jsx(ThreeDot, {})] }));
}
};
const ThreeDot = () => {
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 (_jsx(Flex, Object.assign({ align: 'center', gap: 2, ref: ref, className: className }, props, { children: renderLoader() })));
});
const ScreenLoading = forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
useEffect(() => {
document.body.style.overflow = "hidden"; // Disables scrolling
// Cleanup function to reset the overflow property when the component unmounts
return () => {
document.body.style.overflow = ""; // Resets to default behavior
};
}, []);
return (_jsx("div", Object.assign({ className: 'fixed inset-0 flex items-center justify-center bg-white z-40', ref: ref }, props, { 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' }) }) }) }) })));
});
const PageLoading = forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (_jsx("div", Object.assign({ className: 'fixed inset-0 flex items-center justify-center bg-black/20 z-40', ref: ref }, props, { 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' }) }) }) })));
});
const BackgroundLoading = forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (_jsx("div", Object.assign({ className: 'fixed right-5 w-96 bottom-10 m-2 z-50', ref: ref }, props, { 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' }) }) }) })));
});
Loading.displayName = "Loading";
ScreenLoading.displayName = "Loading.Screen";
PageLoading.displayName = "Loading.Page";
BackgroundLoading.displayName = "Loading.Background";
export default Object.assign(Loading, {
Screen: ScreenLoading,
Page: PageLoading,
Background: BackgroundLoading,
});