@navinc/base-react-components
Version:
Nav's Pattern Library
54 lines • 3.91 kB
JavaScript
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';
import isRebrand from './is-rebrand';
const Background = styled.div.withConfig({ displayName: "brc-sc-Background", componentId: "brc-sc-lx9s67" }) `
border-radius: ${({ theme }) => (isRebrand(theme) ? '16px' : '20px')};
background-color: ${({ theme }) => (isRebrand(theme) ? theme.navSecondary100 : theme.white)};
overflow: hidden;
`;
export const Table = ({ name, headers, rows, stickyHeader = false, 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, Object.assign({ "data-testid": `table:${name}` }, { children: _jsx(MuiTableContainer, Object.assign({ sx: {
fontFamily: theme.fontPrimary,
maxHeight,
} }, { children: _jsxs(MuiTable, Object.assign({ "aria-label": name, stickyHeader: stickyHeader }, { children: [_jsx(MuiTableHead, { children: _jsx(MuiTableRow, Object.assign({ "data-testid": "table:header" }, { children: headers === null || headers === void 0 ? void 0 : headers.map(({ label, align, field }) => (_jsx(MuiTableCell, Object.assign({ 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, Object.assign({ "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, Object.assign({ "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, Object.assign({ 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 default styled(Table).withConfig({ componentId: "brc-sc-xoizxh" }) ``;
//# sourceMappingURL=table.js.map