phx-react/dist/cjs/components/Skeleton/Skeleton.js

PHX REACT

"use strict";
exports.__esModule = true;
exports.PHXSkeleton = void 0;
var tslib_1 = require("tslib");
var Card_1 = require("../Card/Card");
var react_1 = tslib_1.__importDefault(require("react"));
var types_1 = require("../types");
function PHXSkeleton(_a) {
    var className = _a.className, _b = _a.size, size = _b === void 0 ? 'extra-large' : _b, _c = _a.type, type = _c === void 0 ? 'default' : _c, filterQty = _a.filterQty, reportQty = _a.reportQty;
    var skeletonClass = (0, types_1.classNames)(
    // @ts-ignore
    size === 'small' && 'mx-auto md:w-5/6 xl:w-1/2', size === 'medium' && 'mx-auto md:w-5/6 lg:w-3/4', size === 'large' && 'mx-auto md:w-md lg:w-11/12', size === 'extra-large' && 'mx-auto w-full');
    var Skeleton = function () { return (react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
        react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
            react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }),
            react_1["default"].createElement("div", { className: 'space-y-3' },
                react_1["default"].createElement("div", { className: 'grid grid-cols-3 gap-4' },
                    react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                    react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
                react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }))))); };
    var SkeletonReport = function () { return (react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
        react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
            react_1["default"].createElement("div", { className: 'space-y-3' },
                react_1["default"].createElement("div", { className: 'grid grid-cols-3 gap-4' },
                    react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                    react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
                react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }),
                react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }))))); };
    var SkeletonReportOnly = function () { return (react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
        react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
            react_1["default"].createElement("div", { className: 'space-y-2.5' },
                react_1["default"].createElement("div", { className: 'h-2 w-3/4 rounded bg-gray-200' }),
                react_1["default"].createElement("div", { className: 'h-7 w-1/4 rounded bg-gray-200' }))))); };
    // const TableLoad = () => {
    //   return type !== 'table' ? <div className='h-3 w-1/4 rounded bg-gray-200' /> : null
    // }
    return (react_1["default"].createElement(react_1["default"].Fragment, null, type === 'single' || type === 'only-header' || type === 'only-report' ? (react_1["default"].createElement(react_1["default"].Fragment, null,
        type === 'single' && (react_1["default"].createElement("div", { className: "flex animate-pulse space-x-4 ".concat(className) },
            react_1["default"].createElement("div", { className: 'h-3 w-full rounded bg-gray-300' }))),
        type === 'only-header' && react_1["default"].createElement("div", { className: "h-7 rounded bg-gray-200 ".concat(className) }),
        type === 'only-report' && (react_1["default"].createElement("div", { className: className },
            react_1["default"].createElement(Card_1.PHXCard, null,
                react_1["default"].createElement(SkeletonReportOnly, null)))))) : type === 'content-modal' ? (react_1["default"].createElement(Card_1.PHXCard, null,
        react_1["default"].createElement(Skeleton, null),
        react_1["default"].createElement(Skeleton, null),
        react_1["default"].createElement(Skeleton, null))) : (react_1["default"].createElement("div", { className: "".concat(className, " ").concat(skeletonClass) },
        type !== 'table' ? (react_1["default"].createElement("div", { className: 'mb-7 flex animate-pulse space-x-4' },
            react_1["default"].createElement("div", { className: 'h-7 w-1/6 rounded bg-gray-200' }))) : null,
        react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'default' ||
                type === 'table' ||
                type === 'page' ||
                type === 'page-with-table' ||
                type === 'page-table-with-report' ||
                type === 'page-table-report-filter' ||
                type === 'page-table-filter'
                ? ''
                : 'grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-4') },
            react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'default' ? '' : 'grid grid-cols-1 gap-4 lg:col-span-2') },
                (type === 'page-table-report-filter' || type === 'page-table-filter') && (react_1["default"].createElement("div", { className: 'flex gap-x-3' }, tslib_1.__spreadArray([], Array(filterQty), true).map(function (_, index) { return (react_1["default"].createElement("div", { key: index, className: 'h-7 w-20 rounded bg-gray-200 animate-pulse' })); }))),
                (type === 'page-table-with-report' || type === 'page-table-report-filter') && (react_1["default"].createElement(react_1["default"].Fragment, null, tslib_1.__spreadArray([], Array(reportQty), true).map(function (_, index) { return (react_1["default"].createElement(Card_1.PHXCard, { key: index },
                    react_1["default"].createElement(SkeletonReport, null))); }))),
                react_1["default"].createElement(Card_1.PHXCard, null,
                    react_1["default"].createElement(Skeleton, null),
                    type === 'page' || type === 'page-col' ? null : (react_1["default"].createElement(react_1["default"].Fragment, null,
                        react_1["default"].createElement(Skeleton, null),
                        react_1["default"].createElement(Skeleton, null))),
                    (type === 'table' ||
                        type === 'page-with-table' ||
                        type === 'page-table-with-report' ||
                        type === 'page-table-report-filter' ||
                        type === 'page-table-filter') && (react_1["default"].createElement(react_1["default"].Fragment, null,
                        react_1["default"].createElement(Skeleton, null),
                        react_1["default"].createElement(Skeleton, null),
                        react_1["default"].createElement(Skeleton, null),
                        react_1["default"].createElement(Skeleton, null)))),
                type === 'page' || type === 'page-col' ? (react_1["default"].createElement(react_1["default"].Fragment, null,
                    react_1["default"].createElement(Card_1.PHXCard, null,
                        react_1["default"].createElement(Skeleton, null)),
                    react_1["default"].createElement(Card_1.PHXCard, null,
                        react_1["default"].createElement(Skeleton, null)))) : null),
            type === 'col' || type === 'page-col' ? (react_1["default"].createElement("div", { className: 'grid grid-cols-1 gap-4' },
                react_1["default"].createElement(Card_1.PHXCard, null,
                    react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
                        react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
                            react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }),
                            react_1["default"].createElement("div", { className: 'space-y-3' },
                                react_1["default"].createElement("div", { className: 'grid grid-cols-3 gap-4' },
                                    react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' }),
                                    react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                                    react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                                    react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
                                react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }))))),
                type === 'page-col' && (react_1["default"].createElement(Card_1.PHXCard, null,
                    react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
                        react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
                            react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }),
                            react_1["default"].createElement("div", { className: 'space-y-3' },
                                react_1["default"].createElement("div", { className: 'grid grid-cols-3 gap-4' },
                                    react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                                    react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
                                react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' })))))))) : null)))));
}
exports.PHXSkeleton = PHXSkeleton;
//# sourceMappingURL=Skeleton.js.map