@cimpress/react-components/dist/esm/src/Table/Table.js

React components to support the MCP styleguide

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';
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')};
        line-height: 12px;
        padding: ${cvar('spacing-16')} ${cvar('spacing-12')};
        text-align: left;
        vertical-align: top;
        :first-child {
          padding-left: ${cvar('spacing-32')};
        }
        :last-child {
          padding-right: ${cvar('spacing-32')};
        }
      }
    }
  }

  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;
      }
    }
  }
`;
export 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] = 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;
    }
    return (React.createElement(React.Fragment, null,
        paginationPosition === 'topRight' ? (React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } }, pagination)) : null,
        React.createElement("table", Object.assign({ className: cx('crc-table', tableStyle, isCondensed && condensedStyle, hasHover && hoverStyle, isBordered && borderedStyle, className) }, 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", null, tableData.length > 0 ? (React.createElement(TableBody, { data: tableData, columns: columns })) : (React.createElement(EmptyTableRow, { columns: columns, message: noDataText })))),
        paginationPosition === 'bottomRight' ? (React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } }, pagination)) : null));
};
//# sourceMappingURL=Table.js.map