@cimpress/react-components
Version:
React components to support the MCP styleguide
171 lines (169 loc) • 7.1 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 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')};
line-height: 12px;
padding: ${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('spacing-12')};
text-align: left;
vertical-align: top;
:first-child {
padding-left: ${(0, cvar_1.default)('spacing-32')};
}
:last-child {
padding-right: ${(0, cvar_1.default)('spacing-32')};
}
}
}
}
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 Table = (_a) => {
var { data, columns, sortedBy, noDataText, onSortingRequested, isCondensed, hasHover, isBordered, pageSize, paginationPosition, className } = _a, rest = __rest(_a, ["data", "columns", "sortedBy", "noDataText", "onSortingRequested", "isCondensed", "hasHover", "isBordered", "pageSize", "paginationPosition", "className"]);
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;
}
return (react_1.default.createElement(react_1.default.Fragment, null,
paginationPosition === 'topRight' ? (react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } }, pagination)) : null,
react_1.default.createElement("table", Object.assign({ className: (0, css_1.cx)('crc-table', tableStyle, isCondensed && condensedStyle, hasHover && hoverStyle, isBordered && borderedStyle, className) }, 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", null, tableData.length > 0 ? (react_1.default.createElement(TableBody_1.TableBody, { data: tableData, columns: columns })) : (react_1.default.createElement(EmptyTableRow_1.EmptyTableRow, { columns: columns, message: noDataText })))),
paginationPosition === 'bottomRight' ? (react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } }, pagination)) : null));
};
exports.Table = Table;
//# sourceMappingURL=Table.js.map