@smitch/fluid/lib/loading/Loading.js

A lightweight, Tailwind-powered React/Next.js UI component library.

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",
    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;
//# sourceMappingURL=Loading.js.map