@smitch/fluid
Version:
A Next/React ui-component libray.
73 lines (72 loc) • 3.62 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { Suspense, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
var Bars = React.lazy(function () { return import('./spinners/Bars'); });
var Clock = React.lazy(function () { return import('./spinners/Clock'); });
var Dots = React.lazy(function () { return import('./spinners/Dots'); });
var Pulse = React.lazy(function () { return import('./spinners/Pulse'); });
var Spindots = React.lazy(function () { return import('./spinners/Spindots'); });
var Wifi = React.lazy(function () { return import('./spinners/Wifi'); });
import Spinner from './spinners/Spinner';
var sizeToWidth = {
sm: 20,
md: 40,
lg: 60,
xl: 80,
};
var colors = {
info: 'text-info',
success: 'text-success',
warning: 'text-warning',
danger: 'text-error',
primary: 'text-primary',
secondary: 'text-secondary',
dark: 'text-dark',
light: 'text-light',
current: 'text-current',
};
var layouts = {
col: 'flex-col',
col_reverse: 'flex-col-reverse',
row: 'flex-row items-center',
row_reverse: 'flex-row-reverse items-center',
};
var animates = {
spin: 'animate-spin',
bounce: 'animate-bounce',
pulse: 'animate-pulse',
ping: 'animate-ping',
};
var getSpinnerComponent = function (spinner) {
switch (spinner) {
case 'bars':
return Bars;
case 'clock':
return Clock;
case 'dots':
return Dots;
case 'pulse':
return Pulse;
case 'spindots':
return Spindots;
case 'wifi':
return Wifi;
case 'spinner':
default:
return Spinner;
}
};
var Loading = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.caption, caption = _c === void 0 ? '' : _c, _d = _a.spinner, spinner = _d === void 0 ? 'spinner' : _d, customSpinner = _a.customSpinner, _e = _a.customAnimate, customAnimate = _e === void 0 ? 'spin' : _e, _f = _a.size, size = _f === void 0 ? 'md' : _f, _g = _a.loadingColor, loadingColor = _g === void 0 ? 'current' : _g, _h = _a.layout, layout = _h === void 0 ? 'col' : _h;
var SpinnerIcon = useMemo(function () { return getSpinnerComponent(spinner); }, [spinner]);
var width = useMemo(function () { return sizeToWidth[size]; }, [size]);
var colorClasses = useMemo(function () { return colors[loadingColor]; }, [loadingColor]);
var layoutClasses = useMemo(function () { return layouts[layout]; }, [layout]);
var animateClasses = useMemo(function () { return animates[customAnimate]; }, [customAnimate]);
return (_jsx("div", { className: twMerge("loading flex justify-center items-center text-dark dark:text-light", className), children: _jsxs("figure", { className: "figure flex items-center gap-4 ".concat(colorClasses, " ").concat(layoutClasses), children: [customSpinner ? (_jsx("div", { className: 'flex items-center justify-center', style: {
fontSize: "".concat(width, "px"),
width: "".concat(width, "px"),
height: "".concat(width, "px"),
}, children: _jsx("div", { className: "flex items-center justify-center ".concat(animateClasses), children: customSpinner }) })) : (_jsx(Suspense, { fallback: _jsx("div", { className: 'text-center', children: "..." }), children: _jsx(SpinnerIcon, { width: width }) })), caption && (_jsx("figcaption", { className: "figcaption text-center ".concat(colorClasses, " text-").concat(size), children: caption }))] }) }));
};
export default Loading;