@cimpress/react-components
Version:
React components to support the MCP styleguide
175 lines (171 loc) • 6.69 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;
};
/* eslint-disable react/no-array-index-key */
import React, { useState } from 'react';
import { css, cx } from '@emotion/css';
import { Pagination } from '../Pagination';
import { SortIndicator } from './elements/SortIndicator';
import { TableBody } from './elements/TableBody';
import { EmptyTableRow } from './elements/EmptyTableRow';
import cvar from '../theme/cvar';
import { Spinner } from '../Spinner';
import { useFeatureFlags } from '../FeatureFlags';
const DEFAULT_LOADING_TEXT = 'Loading...';
const commonCellBorders = `
border-color: ${cvar('color-border-default')};
border-style: solid;
border-width: 0;
border-top-width: 1px;
`;
const tableStyle = css `
background-color: ${cvar('color-background')};
border-collapse: collapse;
border-spacing: 0;
border: 1px solid ${cvar('color-border-default')};
color: ${cvar('color-text-table-header')};
margin-bottom: 18px;
max-width: 100%;
width: 100%;
thead {
background-color: ${cvar('color-table-header')};
text-transform: uppercase;
tr {
th,
td {
${commonCellBorders}
border-bottom-width: 1px;
font: ${cvar('text-table-header')};
padding: ${cvar('spacing-16')} ${cvar('spacing-12')};
text-align: left;
vertical-align: top;
}
}
}
tbody {
tr {
td,
th {
${commonCellBorders}
padding: ${cvar('spacing-12')};
}
}
}
`;
const condensedStyle = css `
thead {
tr {
th,
td {
padding: ${cvar('spacing-8')};
}
}
}
tbody {
font-size: 10px;
line-height: 12px;
}
`;
const hoverStyle = css `
tbody {
tr:hover {
background-color: ${cvar('color-hover')};
}
}
`;
const borderedStyle = css `
thead,
tbody {
tr {
td,
th {
border-width: 1px;
}
}
}
`;
const loadingOverlayStyle = css `
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 1;
display: grid;
place-items: center;
&& td {
border: none;
}
`;
const tableBodyStyle = css `
position: relative;
`;
const noOuterMarginCss = css `
margin-bottom: 0;
`;
function LoadingOverlay({ loadingText, columnCount }) {
return (React.createElement("tr", { className: loadingOverlayStyle },
React.createElement("td", { colSpan: columnCount, align: "center" },
React.createElement(Spinner, null),
React.createElement("p", null, loadingText))));
}
export const Table = (_a) => {
var { data, columns, sortedBy, noDataText, onSortingRequested, isCondensed, hasHover, isBordered, pageSize, paginationPosition, loading, loadingText = DEFAULT_LOADING_TEXT, className } = _a, rest = __rest(_a, ["data", "columns", "sortedBy", "noDataText", "onSortingRequested", "isCondensed", "hasHover", "isBordered", "pageSize", "paginationPosition", "loading", "loadingText", "className"]);
const { v17_noOuterSpacing } = useFeatureFlags();
const [page, setPage] = useState(0);
const onHeaderSortClick = (c) => {
if (!c.sortable) {
return;
}
if (onSortingRequested) {
onSortingRequested({
key: c.accessor,
desc: sortedBy && sortedBy.key === c.accessor ? !sortedBy.desc : sortedBy ? sortedBy.desc : false,
});
}
};
const total = (data || []).length;
const hasPages = pageSize && total > pageSize;
let pagination = null;
let tableData = data;
if (hasPages && pageSize) {
const start = page * pageSize;
tableData = (data || []).slice(start, start + pageSize);
pagination = hasPages ? (React.createElement(Pagination, { initialPage: page, pageCount: Math.ceil(total / pageSize), pageRangeDisplayed: 2, marginPagesDisplayed: 2, onPageChange: ({ selected }) => {
setPage(selected);
} })) : null;
}
// Apply min height to `tbody` when loading and no data, otherwise the table will collapse
const tbodyHeightStyle = loading && tableData.length === 0 ? { height: '200px' } : undefined;
return (React.createElement(React.Fragment, null,
paginationPosition === 'topRight' && (React.createElement("div", { style: {
display: 'flex',
justifyContent: 'flex-end',
marginBottom: v17_noOuterSpacing ? cvar('spacing-24') : 0,
} }, pagination)),
React.createElement("table", Object.assign({ className: cx('crc-table', tableStyle, isCondensed && condensedStyle, hasHover && hoverStyle, isBordered && borderedStyle, v17_noOuterSpacing && noOuterMarginCss, className), "aria-busy": loading }, rest),
React.createElement("thead", null,
React.createElement("tr", null, columns.map((c, i) => (React.createElement("th", { key: `th-${i}-${c.accessor}` }, c.sortable ? (React.createElement("div", { tabIndex: 0, role: "button", style: { textTransform: 'uppercase', cursor: c.sortable ? 'pointer' : undefined }, onClick: () => onHeaderSortClick(c), onKeyDown: event => {
if (event.keyCode === 13 || event.keyCode === 32) {
event.preventDefault();
onHeaderSortClick(c);
}
} },
c.Header,
c.sortable ? React.createElement(SortIndicator, { currentSort: sortedBy, accessor: c.accessor }) : null)) : (c.Header)))))),
React.createElement("tbody", { className: tableBodyStyle, style: tbodyHeightStyle },
loading && React.createElement(LoadingOverlay, { loadingText: loadingText, columnCount: columns.length }),
tableData.length > 0 ? (React.createElement(TableBody, { data: tableData, columns: columns })) : !loading ? (React.createElement(EmptyTableRow, { columns: columns, message: noDataText })) : null)),
paginationPosition === 'bottomRight' && (React.createElement("div", { style: {
display: 'flex',
justifyContent: 'flex-end',
marginTop: v17_noOuterSpacing ? cvar('spacing-24') : 0,
} }, pagination))));
};
//# sourceMappingURL=Table.js.map