phx-react
Version:
PHX REACT
97 lines • 8.32 kB
JavaScript
import { __spreadArray } from "tslib";
import { PHXCard } from '../Card/Card';
import React from 'react';
import { classNames } from '../types';
export 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 = 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.createElement("div", { className: 'flex animate-pulse space-x-4' },
React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'space-y-3' },
React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
React.createElement("div", { className: 'h-2 rounded bg-gray-200' }))))); };
var SkeletonReport = function () { return (React.createElement("div", { className: 'flex animate-pulse space-x-4' },
React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
React.createElement("div", { className: 'space-y-3' },
React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'h-2 rounded bg-gray-200' }))))); };
var SkeletonReportOnly = function () { return (React.createElement("div", { className: 'flex animate-pulse space-x-4' },
React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
React.createElement("div", { className: 'space-y-2.5' },
React.createElement("div", { className: 'h-2 w-3/4 rounded bg-gray-200' }),
React.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.createElement(React.Fragment, null, type === 'single' || type === 'only-header' || type === 'only-report' ? (React.createElement(React.Fragment, null,
type === 'single' && (React.createElement("div", { className: "flex animate-pulse space-x-4 ".concat(className) },
React.createElement("div", { className: 'h-3 w-full rounded bg-gray-300' }))),
type === 'only-header' && React.createElement("div", { className: "h-7 rounded bg-gray-200 ".concat(className) }),
type === 'only-report' && (React.createElement("div", { className: className },
React.createElement(PHXCard, null,
React.createElement(SkeletonReportOnly, null)))))) : (React.createElement("div", { className: "".concat(className, " ").concat(skeletonClass) },
type !== 'table' ? (React.createElement("div", { className: 'mb-7 flex animate-pulse space-x-4' },
React.createElement("div", { className: 'h-7 w-1/6 rounded bg-gray-200' }))) : null,
React.createElement("div", { className: 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.createElement("div", { className: classNames(type === 'default' ? '' : 'grid grid-cols-1 gap-4 lg:col-span-2') },
(type === 'page-table-report-filter' || type === 'page-table-filter') && (React.createElement("div", { className: 'flex gap-x-3' }, __spreadArray([], Array(filterQty), true).map(function (_, index) { return (React.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.createElement(React.Fragment, null, __spreadArray([], Array(reportQty), true).map(function (_, index) { return (React.createElement(PHXCard, { key: index },
React.createElement(SkeletonReport, null))); }))),
React.createElement(PHXCard, null,
React.createElement(Skeleton, null),
type === 'page' || type === 'page-col' ? null : (React.createElement(React.Fragment, null,
React.createElement(Skeleton, null),
React.createElement(Skeleton, null))),
(type === 'table' ||
type === 'page-with-table' ||
type === 'page-table-with-report' ||
type === 'page-table-report-filter' ||
type === 'page-table-filter') && (React.createElement(React.Fragment, null,
React.createElement(Skeleton, null),
React.createElement(Skeleton, null),
React.createElement(Skeleton, null),
React.createElement(Skeleton, null)))),
type === 'page' || type === 'page-col' ? (React.createElement(React.Fragment, null,
React.createElement(PHXCard, null,
React.createElement(Skeleton, null)),
React.createElement(PHXCard, null,
React.createElement(Skeleton, null)))) : null),
type === 'col' || type === 'page-col' ? (React.createElement("div", { className: 'grid grid-cols-1 gap-4' },
React.createElement(PHXCard, null,
React.createElement("div", { className: 'flex animate-pulse space-x-4' },
React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'space-y-3' },
React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
React.createElement("div", { className: 'h-2 rounded bg-gray-200' }))))),
type === 'page-col' && (React.createElement(PHXCard, null,
React.createElement("div", { className: 'flex animate-pulse space-x-4' },
React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'space-y-3' },
React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
React.createElement("div", { className: 'h-2 rounded bg-gray-200' })))))))) : null)))));
}
//# sourceMappingURL=Skeleton.js.map