@codeworker.br/govbr-tw-react
Version:
Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.
127 lines (126 loc) • 8.48 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useMemo, } from "react";
import { tableCellVariants, tableHeaderCellVariants, tableRowVariants, tableVariants, } from "./variants";
import BASE_CLASSNAMES from "../../config/baseClassNames";
import { cn } from "../../libs/utils";
const TableComponent = (_a, ref) => {
var { className, data, columns, variant = "default", bordered = false, rounded = true, density = "default", striped = false, zebra, lined = true, emptyMessage, rowKey, sum, sumLabel = "Total", sumFormatter } = _a, props = __rest(_a, ["className", "data", "columns", "variant", "bordered", "rounded", "density", "striped", "zebra", "lined", "emptyMessage", "rowKey", "sum", "sumLabel", "sumFormatter"]);
const columnCount = columns.length;
const isStriped = zebra !== null && zebra !== void 0 ? zebra : striped;
const resolvedEmptyMessage = useMemo(() => {
if (emptyMessage !== undefined) {
return emptyMessage;
}
return "Nenhum dado disponível";
}, [emptyMessage]);
const sumValues = useMemo(() => {
if (!(sum === null || sum === void 0 ? void 0 : sum.length) || data.length === 0) {
return null;
}
return sum.reduce((acc, key) => {
const stringKey = String(key);
const total = data.reduce((currentTotal, row) => {
const rawValue = row[stringKey];
let numericValue = null;
if (typeof rawValue === "number") {
numericValue = rawValue;
}
else if (typeof rawValue === "string") {
const parsed = Number(rawValue);
numericValue = Number.isFinite(parsed) ? parsed : null;
}
if (numericValue === null) {
return currentTotal;
}
return currentTotal + numericValue;
}, 0);
acc[stringKey] = total;
return acc;
}, {});
}, [data, sum]);
const hasSumRow = sumValues !== null;
return (_jsxs("table", Object.assign({ className: cn(tableVariants({ variant, bordered, rounded }), className, BASE_CLASSNAMES.table.root), ref: ref }, props, { children: [_jsx("thead", { className: BASE_CLASSNAMES.table.head, children: _jsx("tr", { className: BASE_CLASSNAMES.table.headerRow, children: columns.map(({ key, header, align, headerAlign, headerClassName, }, columnIndex) => {
var _a;
return (_jsx("th", { scope: "col", className: cn(tableHeaderCellVariants({
variant,
align: (_a = headerAlign !== null && headerAlign !== void 0 ? headerAlign : align) !== null && _a !== void 0 ? _a : "left",
lined,
}), headerClassName, rounded
? cn(columnIndex === 0 ? "rounded-tl-lg" : undefined, columnIndex === columnCount - 1
? "rounded-tr-lg"
: undefined)
: undefined, BASE_CLASSNAMES.table.headerCell), children: header }, key));
}) }) }), _jsxs("tbody", { className: BASE_CLASSNAMES.table.body, children: [data.length === 0 ? (_jsx("tr", { className: BASE_CLASSNAMES.table.row, children: _jsx("td", { colSpan: columnCount || 1, className: cn(tableCellVariants({
variant,
density,
align: "center",
lined,
}), rounded ? "rounded-b-lg" : undefined, BASE_CLASSNAMES.table.cell), children: resolvedEmptyMessage }) })) : (data.map((row, rowIndex) => {
var _a;
const computedKey = String((_a = rowKey === null || rowKey === void 0 ? void 0 : rowKey(row, { rowIndex })) !== null && _a !== void 0 ? _a : `${rowIndex}`);
return (_jsx("tr", { className: cn(tableRowVariants({ variant, striped: isStriped }), BASE_CLASSNAMES.table.row), children: columns.map((column, columnIndex) => {
var _a;
const { key, cell, accessor, align, cellClassName, } = column;
const value = typeof accessor === "function"
? accessor(row, { rowIndex, columnIndex })
: accessor
? row[accessor]
: row[key];
const cellContent = (_a = cell === null || cell === void 0 ? void 0 : cell({
value,
row,
rowIndex,
columnIndex,
column,
})) !== null && _a !== void 0 ? _a : value;
return (_jsx("td", { className: cn(tableCellVariants({
variant,
density,
align: align !== null && align !== void 0 ? align : "left",
lined,
}), cellClassName, rounded
? cn(!hasSumRow &&
rowIndex === data.length - 1 &&
columnIndex === 0
? "rounded-bl-lg"
: undefined, !hasSumRow &&
rowIndex === data.length - 1 &&
columnIndex === columnCount - 1
? "rounded-br-lg"
: undefined)
: undefined, BASE_CLASSNAMES.table.cell), children: cellContent }, key));
}) }, computedKey));
})), hasSumRow ? (_jsx("tr", { className: cn(tableRowVariants({ variant, striped: false }), "font-semibold", BASE_CLASSNAMES.table.row), children: columns.map(({ key, accessor, align, cellClassName }, columnIndex) => {
var _a;
const resolvedKey = typeof accessor === "string" ? accessor : key;
const sumValue = sumValues === null || sumValues === void 0 ? void 0 : sumValues[resolvedKey];
const cellContent = sumValue !== undefined
? ((_a = sumFormatter === null || sumFormatter === void 0 ? void 0 : sumFormatter(sumValue, resolvedKey)) !== null && _a !== void 0 ? _a : sumValue)
: columnIndex === 0
? sumLabel
: undefined;
return (_jsx("td", { className: cn(tableCellVariants({
variant,
density,
align: align !== null && align !== void 0 ? align : "left",
lined,
}), cellClassName, rounded
? cn(columnIndex === 0 ? "rounded-bl-lg" : undefined, columnIndex === columnCount - 1
? "rounded-br-lg"
: undefined)
: undefined, BASE_CLASSNAMES.table.cell), children: cellContent }, key));
}) })) : null] })] })));
};
const Table = forwardRef(TableComponent);
export default Table;