phx-react
Version:
PHX REACT
72 lines • 6.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = PHXTableGroup;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_2 = require("react");
const TextV2_1 = require("../TextV2");
const thBase = 'whitespace-nowrap py-3 text-xs font-semibold text-gray-800 ';
function alignThClass(align) {
if (align === 'right')
return 'text-right';
if (align === 'center')
return 'text-center';
return 'text-left';
}
function alignCellClass(align) {
if (align === 'right')
return 'flex justify-end';
if (align === 'center')
return 'flex justify-center';
return '';
}
function PrimaryContent({ cell }) {
return (react_1.default.createElement("div", { className: 'flex flex-col gap-1' },
react_1.default.createElement("div", { className: 'flex items-center gap-1.5' },
react_1.default.createElement(TextV2_1.PHXTextV2, { size: 'subtitle', color: 'primary', weight: 'medium' },
cell.title,
cell.titleSuffix && (react_1.default.createElement(TextV2_1.PHXTextV2, { as: 'span', size: 'caption', color: 'subdued', ml: 'atomic' }, cell.titleSuffix))),
cell.action && (react_1.default.createElement("button", { type: 'button', className: 'inline-flex items-center rounded-full p-0.5 text-slate-500 transition-colors hover:text-slate-800', onClick: cell.action.onClick }, cell.action.icon))),
cell.description && (react_1.default.createElement(TextV2_1.PHXTextV2, { size: 'caption', color: 'subdued', mt: 'atomic' }, cell.description))));
}
function renderCell(col, row, section) {
if (col.getValue)
return react_1.default.createElement(PrimaryContent, { cell: col.getValue(row, section) });
return col.render(row, section);
}
function PHXTableGroup({ sections, columns, rowKey }) {
const [primary, ...rest] = columns;
return (react_1.default.createElement("div", { className: 'w-full overflow-hidden rounded-xl border border-gray-200 bg-white' },
react_1.default.createElement("div", { className: 'hidden overflow-x-auto sm:block' },
react_1.default.createElement("table", { className: 'w-full text-left' },
react_1.default.createElement("tbody", { className: 'divide-y divide-gray-100' }, sections.map((section, sIdx) => (react_1.default.createElement(react_2.Fragment, { key: section.id },
react_1.default.createElement("tr", { className: sIdx > 0 ? 'border-t-2 border-gray-200' : '' },
react_1.default.createElement("td", { className: 'px-5 py-4' },
react_1.default.createElement("span", { className: 'text-sm font-semibold text-gray-800 ' }, section.label)),
rest.map((col) => (react_1.default.createElement("td", { key: col.key, style: col.width ? { width: col.width } : undefined, className: `px-4 ${thBase} ${alignThClass(col.align)}` }, col.header)))),
section.subSections.map((sub) => (react_1.default.createElement(react_2.Fragment, { key: sub.id },
sub.label && (react_1.default.createElement("tr", null,
react_1.default.createElement("td", { colSpan: columns.length, className: 'bg-gray-100/80 px-8 py-3 ' },
react_1.default.createElement("span", { className: 'text-xs font-semibold tracking-wider text-gray-800 ' }, sub.label)))),
sub.rows.map((row) => (react_1.default.createElement("tr", { key: rowKey(row), className: 'transition-colors hover:bg-gray-50/60' },
react_1.default.createElement("td", { className: 'px-8 py-4' }, renderCell(primary, row, section)),
rest.map((col) => (react_1.default.createElement("td", { key: col.key, style: col.width ? { width: col.width } : undefined, className: 'px-4 py-5' },
react_1.default.createElement("div", { className: alignCellClass(col.align) }, renderCell(col, row, section))))))))))))))))),
react_1.default.createElement("div", { className: 'sm:hidden' }, sections.map((section, sIdx) => (react_1.default.createElement("div", { key: section.id },
react_1.default.createElement("div", { className: `px-4 py-4${sIdx > 0 ? ' border-t-2 border-gray-200' : ''}` },
react_1.default.createElement("span", { className: 'text-sm font-semibold text-gray-800 ' }, section.label)),
section.subSections.map((sub) => (react_1.default.createElement("div", { key: sub.id },
sub.label && (react_1.default.createElement("div", { className: 'bg-gray-100/80 px-5 py-3 ' },
react_1.default.createElement("span", { className: 'text-xs font-semibold tracking-wider text-gray-800 ' }, sub.label))),
react_1.default.createElement("div", { className: 'divide-y divide-gray-100' }, sub.rows.map((row) => {
const fullWidthCols = rest.filter((c) => c.mobileFullWidth);
const inlineCols = rest.filter((c) => !c.mobileFullWidth);
return (react_1.default.createElement("div", { key: rowKey(row), className: 'px-4 py-4' },
react_1.default.createElement("div", { className: 'mb-2' }, renderCell(primary, row, section)),
fullWidthCols.map((col) => (react_1.default.createElement("div", { key: col.key, className: 'mb-2' }, renderCell(col, row, section)))),
inlineCols.length > 0 && (react_1.default.createElement("div", { className: 'flex flex-wrap items-center gap-x-5 gap-y-2' }, inlineCols.map((col) => (react_1.default.createElement("div", { key: col.key, className: 'flex items-center gap-2' },
col.header && (react_1.default.createElement(TextV2_1.PHXTextV2, { as: 'span', size: 'caption', color: 'subdued' }, col.header)),
renderCell(col, row, section))))))));
})))))))))));
}
//# sourceMappingURL=TableGroup.js.map