phx-react/dist/cjs/components/TableReport/component/ExpandedRows.js

PHX REACT

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const types_1 = require("../../types");
const TruncatedTooltip_1 = tslib_1.__importDefault(require("./TruncatedTooltip"));
const animatedContentClassName = 'block min-w-0 overflow-hidden text-ellipsis motion-safe:animate-phx-table-report-expanded-cell';
/**
 * Builds class names for an expanded child table cell.
 *
 * @param config - Visual table options shared by expanded cells.
 * @param absoluteIdx - Cell index in the full parent table grid.
 * @param isHeader - Whether the cell belongs to the expanded header row.
 * @returns Tailwind class names for the expanded cell.
 */
function getExpandedCellClassName(config, absoluteIdx, isHeader = false) {
    return (0, types_1.classNames)('max-w-0 min-w-0 overflow-hidden text-ellipsis text-xs whitespace-nowrap text-gray-900', isHeader ? 'bg-gray-100 font-medium text-gray-800' : 'bg-gray-50', config.textCenter ? 'text-center' : 'pl-8 text-left', config.spacing ? (isHeader ? 'px-3 py-2.5' : 'px-2 py-2.5') : '', absoluteIdx !== 0 && config.border && 'border-l');
}
/**
 * Builds class names for the expanded placeholder cell under the select column.
 *
 * @param config - Visual table options shared by expanded cells.
 * @param isHeader - Whether the placeholder belongs to the expanded header row.
 * @returns Tailwind class names for the selection placeholder cell.
 */
function getSelectionCellClassName(config, isHeader = false) {
    return (0, types_1.classNames)('border-t p-0', isHeader ? 'bg-gray-100' : 'bg-gray-50', config.border && 'border-r');
}
/**
 * Renders empty expanded cells before or after the child columns.
 *
 * @param props - Empty-cell count, position, and visual configuration.
 * @returns Placeholder cells that preserve alignment with the parent table.
 */
function EmptyCells({ config, count, isHeader = false, keyPrefix, selectedColumnAtStart = false, startIndex = 0, }) {
    return (react_1.default.createElement(react_1.default.Fragment, null, Array.from({ length: count }).map((_, emptyIdx) => (react_1.default.createElement("td", { key: `expanded-${keyPrefix}-${config.dataIdx}-${emptyIdx}`, className: selectedColumnAtStart && emptyIdx === 0
            ? getSelectionCellClassName(config, isHeader)
            : (0, types_1.classNames)(getExpandedCellClassName(config, startIndex + emptyIdx, isHeader), 'border-t') })))));
}
/**
 * Builds props for placeholder cells that appear before child columns.
 *
 * @param sharedProps - Shared expanded row layout and visual configuration.
 * @param keyPrefix - Key prefix for the generated placeholder cells.
 * @param isHeader - Whether the placeholders belong to the expanded header row.
 * @returns Props for the EmptyCells component.
 */
function getBeforeEmptyCellsProps(sharedProps, keyPrefix, isHeader = false) {
    const { layoutConfig, visualConfig } = sharedProps;
    return {
        config: visualConfig,
        count: layoutConfig.emptyCellsBefore,
        isHeader,
        keyPrefix,
        selectedColumnAtStart: layoutConfig.hasSelectionColumn,
    };
}
/**
 * Builds props for placeholder cells that appear after child columns.
 *
 * @param sharedProps - Shared expanded row layout and visual configuration.
 * @param keyPrefix - Key prefix for the generated placeholder cells.
 * @param isHeader - Whether the placeholders belong to the expanded header row.
 * @returns Props for the EmptyCells component.
 */
function getAfterEmptyCellsProps(sharedProps, keyPrefix, isHeader = false) {
    const { layoutConfig, visualConfig } = sharedProps;
    return {
        startIndex: layoutConfig.childStartIndex + layoutConfig.childCellLength,
        keyPrefix,
        config: visualConfig,
        isHeader,
        count: layoutConfig.emptyCellsAfter,
    };
}
/**
 * Renders the child header cells for the expanded row.
 *
 * @param childHeaders - Header labels for the child data columns.
 * @param layoutConfig - Column alignment information for the parent table grid.
 * @param visualConfig - Visual table options shared by expanded cells.
 * @returns Expanded child header cells.
 */
function ChildHeaderCells({ childHeaders, layoutConfig, visualConfig }) {
    return (react_1.default.createElement(react_1.default.Fragment, null, childHeaders.map((header, headerIdx) => (react_1.default.createElement("th", { key: `expanded-header-${visualConfig.dataIdx}-${headerIdx}`, className: (0, types_1.classNames)(getExpandedCellClassName(visualConfig, layoutConfig.childStartIndex + headerIdx, true), 'border-t') },
        react_1.default.createElement("span", { className: animatedContentClassName }, header))))));
}
/**
 * Renders the expanded header row aligned with the parent table columns.
 *
 * @param childHeaders - Header labels for the child data columns.
 * @param layoutConfig - Column alignment information for the parent table grid.
 * @param visualConfig - Visual table options shared by expanded cells.
 * @returns Header row for the expanded child data.
 */
function ExpandedHeaderRow({ childHeaders, layoutConfig, visualConfig }) {
    const sharedProps = { layoutConfig, visualConfig };
    return (react_1.default.createElement("tr", null,
        react_1.default.createElement(EmptyCells, { ...getBeforeEmptyCellsProps(sharedProps, 'empty-header-before', true) }),
        react_1.default.createElement(ChildHeaderCells, { childHeaders: childHeaders, layoutConfig: layoutConfig, visualConfig: visualConfig }),
        react_1.default.createElement(EmptyCells, { ...getAfterEmptyCellsProps(sharedProps, 'empty-header-after', true) })));
}
/**
 * Renders the child data cells for one expanded data row.
 *
 * @param childBody - Data keys for child cells.
 * @param childData - Child row source data.
 * @param childDataIdx - Child row index.
 * @param layoutConfig - Column alignment information for the parent table grid.
 * @param visualConfig - Visual table options shared by expanded cells.
 * @returns Expanded child data cells.
 */
function ChildDataCells({ childBody, childData, childDataIdx, layoutConfig, visualConfig }) {
    return (react_1.default.createElement(react_1.default.Fragment, null, childBody.map((bodyKey, bodyIdx) => {
        var _a;
        return (react_1.default.createElement("td", { key: `expanded-cell-${visualConfig.dataIdx}-${childDataIdx}-${bodyIdx}`, className: (0, types_1.classNames)(getExpandedCellClassName(visualConfig, layoutConfig.childStartIndex + bodyIdx), 'border-t') },
            react_1.default.createElement(TruncatedTooltip_1.default, { className: animatedContentClassName }, (_a = childData[bodyKey]) !== null && _a !== void 0 ? _a : '')));
    })));
}
/**
 * Renders one expanded child data row aligned with the parent table columns.
 *
 * @param childBody - Data keys for child cells.
 * @param childData - Child row source data.
 * @param childDataIdx - Child row index.
 * @param layoutConfig - Column alignment information for the parent table grid.
 * @param visualConfig - Visual table options shared by expanded cells.
 * @returns One expanded child data row.
 */
function ExpandedDataRow({ childBody, childData, childDataIdx, layoutConfig, visualConfig }) {
    const sharedProps = { layoutConfig, visualConfig };
    return (react_1.default.createElement("tr", { key: `expanded-row-${visualConfig.dataIdx}-${childDataIdx}` },
        react_1.default.createElement(EmptyCells, { ...getBeforeEmptyCellsProps(sharedProps, `empty-before-${childDataIdx}`) }),
        react_1.default.createElement(ChildDataCells, { childData: childData, layoutConfig: layoutConfig, childDataIdx: childDataIdx, visualConfig: visualConfig, childBody: childBody }),
        react_1.default.createElement(EmptyCells, { ...getAfterEmptyCellsProps(sharedProps, `empty-after-${childDataIdx}`) })));
}
/**
 * Renders expanded child rows below a parent table row.
 *
 * @param props - Child row data and parent table alignment options.
 * @returns Expanded header and data rows.
 */
function ExpandedRows({ rowChildren, dataIdx, thBody, selectedAllPeople, border, spacing, textCenter, }) {
    const { children, columnIndex } = rowChildren;
    const childCellLength = Math.min(children.body.length, thBody.length - columnIndex);
    const hasSelectionColumn = !!(selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable);
    const layoutConfig = {
        childCellLength,
        childStartIndex: columnIndex + (hasSelectionColumn ? 1 : 0),
        emptyCellsAfter: Math.max(thBody.length - columnIndex - childCellLength, 0),
        emptyCellsBefore: columnIndex + (hasSelectionColumn ? 1 : 0),
        hasSelectionColumn,
    };
    const visualConfig = { border, dataIdx, spacing, textCenter };
    const childHeaders = Array.from({ length: childCellLength }, (_, headerIdx) => { var _a; return (_a = children.headers[headerIdx]) !== null && _a !== void 0 ? _a : ''; });
    const childBody = children.body.slice(0, childCellLength);
    const sharedProps = { layoutConfig, visualConfig };
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(ExpandedHeaderRow, { childHeaders: childHeaders, ...sharedProps }),
        children.data.map((childData, childDataIdx) => (react_1.default.createElement(ExpandedDataRow, { key: `expanded-row-${dataIdx}-${childDataIdx}`, childBody: childBody, childData: childData, childDataIdx: childDataIdx, ...sharedProps })))));
}
exports.default = ExpandedRows;
//# sourceMappingURL=ExpandedRows.js.map