phx-react
Version:
PHX REACT
97 lines • 8.39 kB
JavaScript
import { PHXCard } from '../Card/Card';
import React from 'react';
import { classNames } from '../types';
export function PHXSkeleton({ className, filterQty, reportQty, size = 'extra-large', type = 'default', }) {
const 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');
const SkeletonReportOnly = () => (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 Skeleton = () => (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' })))));
const SkeletonReport = () => (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' })))));
return (React.createElement(React.Fragment, null, type === 'single' || type === 'only-header' || type === 'only-report' || type === 'only-report_v2' ? (React.createElement(React.Fragment, null,
type === 'single' && (React.createElement("div", { className: `flex animate-pulse space-x-4 ${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 ${className}` }),
type === 'only-report_v2' && (React.createElement("div", { className: classNames('mx-3 flex animate-pulse items-center rounded-xl bg-gray-100 px-3', className) },
React.createElement("div", { className: 'h-2 w-2/3 rounded bg-gray-200' }))),
type === 'only-report' && (React.createElement("div", { className: classNames('p-[1px]', className) },
React.createElement(PHXCard, null,
React.createElement(SkeletonReportOnly, null)))))) : type === 'content-modal' ? (React.createElement(PHXCard, null,
React.createElement(Skeleton, null),
React.createElement(Skeleton, null),
React.createElement(Skeleton, null))) : (React.createElement("div", { className: `${className} ${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' }, [...Array(filterQty)].map((_, index) => (React.createElement("div", { key: index, className: 'h-7 w-20 animate-pulse rounded bg-gray-200' }))))),
(type === 'page-table-with-report' || type === 'page-table-report-filter') && (React.createElement(React.Fragment, null, [...Array(reportQty)].map((_, index) => (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