@kadconsulting/dry
Version:
KAD Reusable Component Library
68 lines • 4.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
// TODO-DRY: MOVE TO / REPLACE WITH DRY
import { useState, useCallback } from 'react';
import { Badge } from '../../Badge';
import { MultiAccordion } from '../../MultiAccordion';
import useWindowSize from '../../../hooks/useWindowSize';
import classnames from 'classnames';
// Types
// TODO: this need to be made dynamic and we need to replace the anys
// import { DashboardPurchaseOrder } from '../../../types/types';
import './TableBody.scss';
const TableBody = ({
// TODO-p3: Use or remove theses
loadingRowCount = 10, columns, data, getTableBodyProps, prepareRow, rows, selectedRowIds, onRowSelect, expandedRowIds, onRowExpansion, loading, handleRowClick, badgeColumnConfig, hasAccordion, }) => {
const [localExpandedRows, setLocalExpandedRows] = useState(new Set());
const windowSize = useWindowSize();
const handleRowSelect = useCallback((rowId) => {
const newSelectedRowIds = { ...selectedRowIds };
newSelectedRowIds[rowId] = !newSelectedRowIds[rowId];
onRowSelect(newSelectedRowIds);
}, [selectedRowIds, onRowSelect]);
const handleRowExpansion = useCallback((rowId) => {
const newLocalExpandedRows = new Set(localExpandedRows);
if (newLocalExpandedRows.has(rowId)) {
newLocalExpandedRows.delete(rowId);
}
else {
newLocalExpandedRows.add(rowId);
}
setLocalExpandedRows(newLocalExpandedRows);
onRowExpansion(newLocalExpandedRows);
}, [localExpandedRows, onRowExpansion]);
const renderLoadingRows = () => {
const loadingRows = [];
for (let i = 0; i < loadingRowCount; i++) {
loadingRows.push(_jsx("tr", { className: 'table-body__loading-row', children: columns.map((column, index) => (_jsx("td", { className: 'table-body__loading-cell' }, `loading-cell-${i}-${index}`))) }, `loading-row-${i}`));
}
return loadingRows;
};
const displayContent = ({ isMobile }) => {
return rows.map((row, index) => {
prepareRow(row);
const rowId = row.id;
const isSelected = !!selectedRowIds[rowId];
const isExpanded = localExpandedRows.has(rowId);
const content = (_jsx("tr", { onClick: () => handleRowClick(row.original.id), className: `tr ${isSelected ? 'selected' : ''}`, children: row.cells.map((cell) => {
const headerText = cell.column.Header;
const badgeConfig = badgeColumnConfig?.[cell.column.id]?.[cell.value];
const dynamicClass = cell?.column?.className;
return (_jsx("td", { ...cell.getCellProps(), className: classnames({
td: true,
[dynamicClass]: dynamicClass,
}), children: badgeConfig && windowSize.width > 770 ? (_jsx(Badge, { color: badgeConfig.color, variant: badgeConfig.variant, size: badgeConfig.size, children: cell.render('Cell') })) : (_jsxs("div", { className: 'table-body__header-text-wrapper', children: [windowSize.width < 770 && (_jsx("span", { className: 'table-body__header-text-1', children: headerText })), _jsx("span", { className: 'table-body__header-text-2', children: cell.render('Cell') })] })) }));
}) }, rowId));
if (isMobile) {
return {
title: row.original.mobileTitle,
subTitle: row.original.mobileSubTitle,
content: content,
};
}
return content;
});
};
return (_jsx("tbody", { className: 'table-body', ...getTableBodyProps(), role: 'rowgroup', children: loading ? (renderLoadingRows()) : (_jsxs(_Fragment, { children: [!hasAccordion && displayContent({}), hasAccordion && (_jsx(MultiAccordion, { faqs: displayContent({ isMobile: true }) }))] })) }));
};
export default TableBody;
//# sourceMappingURL=TableBody.js.map