@navinc/base-react-components
Version:
Nav's Pattern Library
65 lines • 4.28 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 { useMemo } from 'react';
import MuiTable from '@mui/material/Table';
import MuiTableBody from '@mui/material/TableBody';
import MuiTableCell, { tableCellClasses } from '@mui/material/TableCell';
import MuiTableContainer from '@mui/material/TableContainer';
import MuiTableHead from '@mui/material/TableHead';
import MuiTableRow from '@mui/material/TableRow';
import styled, { useTheme } from 'styled-components';
const Background = styled.div.withConfig({ displayName: "brc-sc-Background", componentId: "brc-sc-lx9s67" }) `
border-radius: 16px;
background-color: ${({ theme }) => theme.navSecondary100};
overflow: hidden;
`;
const _Table = (_a) => {
var { name, headers, rows, stickyHeader = false, maxHeight } = _a, rest = __rest(_a, ["name", "headers", "rows", "stickyHeader", "maxHeight"]);
const theme = useTheme();
const rowCount = rows === null || rows === void 0 ? void 0 : rows.length;
const alignmentMap = useMemo(() => {
const map = {};
headers.map((header) => (map[header.field] = header.align || 'left'));
return map;
}, [headers]);
if (!rows && !headers)
return null;
return (_jsx(Background, { "data-testid": `table:${name}`, children: _jsx(MuiTableContainer, Object.assign({ sx: {
fontFamily: theme.fontPrimary,
maxHeight,
} }, rest, { children: _jsxs(MuiTable, { "aria-label": name, stickyHeader: stickyHeader, children: [_jsx(MuiTableHead, { children: _jsx(MuiTableRow, { "data-testid": "table:header", children: headers === null || headers === void 0 ? void 0 : headers.map(({ label, align, field }) => (_jsx(MuiTableCell, { align: align, "data-testid": `table:header-cell:${field}`, sx: {
fontFamily: theme.fontPrimary,
padding: '15px 24px',
background: 'white',
[`&.${tableCellClasses.stickyHeader}`]: {
borderBottom: `1px solid ${theme.neutral400}`,
},
}, children: label }, field))) }) }), _jsx(MuiTableBody, { "data-testid": "table:body", children: rows === null || rows === void 0 ? void 0 : rows.map((row, rowIndex) => {
const rowLength = Object.keys(row).length;
const rowNumber = rowIndex + 1;
return (_jsx(MuiTableRow, { "data-testid": `table:row:${rowNumber}`, children: [...Array(rowLength)].map((_, columnIndex) => {
const columnName = Object.keys(row)[columnIndex];
const cellValue = row[columnName];
if (!alignmentMap[columnName])
return null;
return (_jsx(MuiTableCell, { align: alignmentMap[columnName], sx: {
fontFamily: theme.fontPrimary,
padding: '20px 24px',
borderBottom: rowCount === rowNumber ? 'none' : '',
background: 'white',
}, "data-testid": `table:row-cell:${columnName} table:row-${rowNumber}:column-${columnIndex + 1}`, children: cellValue }, `${rowNumber}-${columnIndex}`));
}) }, rowIndex));
}) })] }) })) }));
};
export const Table = styled(_Table).withConfig({ displayName: "brc-sc-Table", componentId: "brc-sc-2a29n6" }) ``;
//# sourceMappingURL=table.js.map