phx-react/dist/esm/components/TableGroup/TableGroup.js

PHX REACT

import React from 'react';
import { Fragment } from 'react';
import { PHXTextV2 } from '../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.createElement("div", { className: 'flex flex-col gap-1' },
        React.createElement("div", { className: 'flex items-center gap-1.5' },
            React.createElement(PHXTextV2, { size: 'subtitle', color: 'primary', weight: 'medium' },
                cell.title,
                cell.titleSuffix && (React.createElement(PHXTextV2, { as: 'span', size: 'caption', color: 'subdued', ml: 'atomic' }, cell.titleSuffix))),
            cell.action && (React.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.createElement(PHXTextV2, { size: 'caption', color: 'subdued', mt: 'atomic' }, cell.description))));
}
function renderCell(col, row, section) {
    if (col.getValue)
        return React.createElement(PrimaryContent, { cell: col.getValue(row, section) });
    return col.render(row, section);
}
export default function PHXTableGroup({ sections, columns, rowKey }) {
    const [primary, ...rest] = columns;
    return (React.createElement("div", { className: 'w-full overflow-hidden rounded-xl border border-gray-200 bg-white' },
        React.createElement("div", { className: 'hidden overflow-x-auto sm:block' },
            React.createElement("table", { className: 'w-full text-left' },
                React.createElement("tbody", { className: 'divide-y divide-gray-100' }, sections.map((section, sIdx) => (React.createElement(Fragment, { key: section.id },
                    React.createElement("tr", { className: sIdx > 0 ? 'border-t-2 border-gray-200' : '' },
                        React.createElement("td", { className: 'px-5 py-4' },
                            React.createElement("span", { className: 'text-sm font-semibold text-gray-800 ' }, section.label)),
                        rest.map((col) => (React.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.createElement(Fragment, { key: sub.id },
                        sub.label && (React.createElement("tr", null,
                            React.createElement("td", { colSpan: columns.length, className: 'bg-gray-100/80 px-8 py-3 ' },
                                React.createElement("span", { className: 'text-xs font-semibold tracking-wider text-gray-800 ' }, sub.label)))),
                        sub.rows.map((row) => (React.createElement("tr", { key: rowKey(row), className: 'transition-colors hover:bg-gray-50/60' },
                            React.createElement("td", { className: 'px-8 py-4' }, renderCell(primary, row, section)),
                            rest.map((col) => (React.createElement("td", { key: col.key, style: col.width ? { width: col.width } : undefined, className: 'px-4 py-5' },
                                React.createElement("div", { className: alignCellClass(col.align) }, renderCell(col, row, section))))))))))))))))),
        React.createElement("div", { className: 'sm:hidden' }, sections.map((section, sIdx) => (React.createElement("div", { key: section.id },
            React.createElement("div", { className: `px-4 py-4${sIdx > 0 ? ' border-t-2 border-gray-200' : ''}` },
                React.createElement("span", { className: 'text-sm font-semibold text-gray-800 ' }, section.label)),
            section.subSections.map((sub) => (React.createElement("div", { key: sub.id },
                sub.label && (React.createElement("div", { className: 'bg-gray-100/80 px-5 py-3 ' },
                    React.createElement("span", { className: 'text-xs font-semibold tracking-wider text-gray-800 ' }, sub.label))),
                React.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.createElement("div", { key: rowKey(row), className: 'px-4 py-4' },
                        React.createElement("div", { className: 'mb-2' }, renderCell(primary, row, section)),
                        fullWidthCols.map((col) => (React.createElement("div", { key: col.key, className: 'mb-2' }, renderCell(col, row, section)))),
                        inlineCols.length > 0 && (React.createElement("div", { className: 'flex flex-wrap items-center gap-x-5 gap-y-2' }, inlineCols.map((col) => (React.createElement("div", { key: col.key, className: 'flex items-center gap-2' },
                            col.header && (React.createElement(PHXTextV2, { as: 'span', size: 'caption', color: 'subdued' }, col.header)),
                            renderCell(col, row, section))))))));
                })))))))))));
}
//# sourceMappingURL=TableGroup.js.map