@cimpress/react-components
Version:
React components to support the MCP styleguide
205 lines (201 loc) • 8.6 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Table = void 0;
/* eslint-disable react/no-array-index-key */
const react_1 = __importStar(require("react"));
const css_1 = require("@emotion/css");
const Pagination_1 = require("../Pagination");
const SortIndicator_1 = require("./elements/SortIndicator");
const TableBody_1 = require("./elements/TableBody");
const EmptyTableRow_1 = require("./elements/EmptyTableRow");
const cvar_1 = __importDefault(require("../theme/cvar"));
const Spinner_1 = require("../Spinner");
const FeatureFlags_1 = require("../FeatureFlags");
const DEFAULT_LOADING_TEXT = 'Loading...';
const commonCellBorders = `
border-color: ${(0, cvar_1.default)('color-border-default')};
border-style: solid;
border-width: 0;
border-top-width: 1px;
`;
const tableStyle = (0, css_1.css) `
background-color: ${(0, cvar_1.default)('color-background')};
border-collapse: collapse;
border-spacing: 0;
border: 1px solid ${(0, cvar_1.default)('color-border-default')};
color: ${(0, cvar_1.default)('color-text-table-header')};
margin-bottom: 18px;
max-width: 100%;
width: 100%;
thead {
background-color: ${(0, cvar_1.default)('color-table-header')};
text-transform: uppercase;
tr {
th,
td {
${commonCellBorders}
border-bottom-width: 1px;
font: ${(0, cvar_1.default)('text-table-header')};
padding: ${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('spacing-12')};
text-align: left;
vertical-align: top;
}
}
}
tbody {
tr {
td,
th {
${commonCellBorders}
padding: ${(0, cvar_1.default)('spacing-12')};
}
}
}
`;
const condensedStyle = (0, css_1.css) `
thead {
tr {
th,
td {
padding: ${(0, cvar_1.default)('spacing-8')};
}
}
}
tbody {
font-size: 10px;
line-height: 12px;
}
`;
const hoverStyle = (0, css_1.css) `
tbody {
tr:hover {
background-color: ${(0, cvar_1.default)('color-hover')};
}
}
`;
const borderedStyle = (0, css_1.css) `
thead,
tbody {
tr {
td,
th {
border-width: 1px;
}
}
}
`;
const loadingOverlayStyle = (0, css_1.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 = (0, css_1.css) `
position: relative;
`;
const noOuterMarginCss = (0, css_1.css) `
margin-bottom: 0;
`;
function LoadingOverlay({ loadingText, columnCount }) {
return (react_1.default.createElement("tr", { className: loadingOverlayStyle },
react_1.default.createElement("td", { colSpan: columnCount, align: "center" },
react_1.default.createElement(Spinner_1.Spinner, null),
react_1.default.createElement("p", null, loadingText))));
}
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 } = (0, FeatureFlags_1.useFeatureFlags)();
const [page, setPage] = (0, react_1.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_1.default.createElement(Pagination_1.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_1.default.createElement(react_1.default.Fragment, null,
paginationPosition === 'topRight' && (react_1.default.createElement("div", { style: {
display: 'flex',
justifyContent: 'flex-end',
marginBottom: v17_noOuterSpacing ? (0, cvar_1.default)('spacing-24') : 0,
} }, pagination)),
react_1.default.createElement("table", Object.assign({ className: (0, css_1.cx)('crc-table', tableStyle, isCondensed && condensedStyle, hasHover && hoverStyle, isBordered && borderedStyle, v17_noOuterSpacing && noOuterMarginCss, className), "aria-busy": loading }, rest),
react_1.default.createElement("thead", null,
react_1.default.createElement("tr", null, columns.map((c, i) => (react_1.default.createElement("th", { key: `th-${i}-${c.accessor}` }, c.sortable ? (react_1.default.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_1.default.createElement(SortIndicator_1.SortIndicator, { currentSort: sortedBy, accessor: c.accessor }) : null)) : (c.Header)))))),
react_1.default.createElement("tbody", { className: tableBodyStyle, style: tbodyHeightStyle },
loading && react_1.default.createElement(LoadingOverlay, { loadingText: loadingText, columnCount: columns.length }),
tableData.length > 0 ? (react_1.default.createElement(TableBody_1.TableBody, { data: tableData, columns: columns })) : !loading ? (react_1.default.createElement(EmptyTableRow_1.EmptyTableRow, { columns: columns, message: noDataText })) : null)),
paginationPosition === 'bottomRight' && (react_1.default.createElement("div", { style: {
display: 'flex',
justifyContent: 'flex-end',
marginTop: v17_noOuterSpacing ? (0, cvar_1.default)('spacing-24') : 0,
} }, pagination))));
};
exports.Table = Table;
//# sourceMappingURL=Table.js.map