@retailmenot/anchor/ts/Table/Table.component.js

A React UI Library by RetailMeNot

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;
};
// VENDOR
import * as React from 'react';
import classNames from 'classnames';
import styled, { css } from '@xstyled/styled-components';
import { th, variant as createVariant, width as widthStyles, height as heightStyles, maxWidth as maxWidthStyles, minWidth as minWidthStyles, textAlign as textAlignStyles, fontSize as fontSizeStyles, fontWeight as fontWeightStyles, color as colorStyles, borderRadius as borderRadiusStyles, border as borderStyles, space as spaceStyles, } from '@xstyled/system';
const TableSizes = {
    sm: {
        th: { padding: '0.25rem 0.75rem' },
        td: { padding: '0.25rem 0.75rem' },
    },
    md: {
        th: { padding: '0.5rem 1.25rem' },
        td: { padding: '0.5rem 1.25rem' },
    },
};
export const sizeVariantStyles = createVariant({
    key: 'table.sizes',
    prop: 'size',
    default: 'md',
    variants: TableSizes,
});
const StyledTable = styled('table') `
    border-spacing: 0;
    overflow: hidden;

    ${sizeVariantStyles}
    ${borderStyles}
    ${widthStyles}
    ${maxWidthStyles}
    ${minWidthStyles}
    ${borderRadiusStyles}
    ${colorStyles}
    ${fontWeightStyles}
    ${fontSizeStyles}
    ${spaceStyles}
    ${({ background }) => css({ background: th.color(background) })}

    tbody tr:nth-child(odd) {
        ${({ altBackground }) => css({ background: th.color(altBackground) })}
    }

    th {
        white-space: nowrap;
    }
`;
export const Table = (_a) => {
    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
    return (React.createElement(StyledTable, Object.assign({ className: classNames('anchor-table', className) }, props), children));
};
Table.defaultProps = {
    color: 'text.light',
    fontWeight: 500,
    border: 'base',
    borderRadius: 'base',
    background: 'white',
    altBackground: 'background.base',
};
const StyledRow = styled('tr') `
    ${heightStyles}
    ${colorStyles}
    ${spaceStyles}
    ${({ background }) => css({ background: th.color(background) })}
`;
export const TableRow = (_a) => {
    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
    return (React.createElement(StyledRow, Object.assign({ className: classNames('anchor-table-row', className) }, props), children));
};
Table.Row = TableRow;
export const TableBody = (_a) => {
    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
    return (React.createElement("tbody", Object.assign({ className: classNames('anchor-table-body', className) }, props), children));
};
Table.Body = TableBody;
export const TableHead = (_a) => {
    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
    return (React.createElement("thead", Object.assign({ className: classNames('anchor-table-head', className) }, props), children));
};
Table.Head = TableHead;
export const TableFooter = (_a) => {
    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
    return (React.createElement("tfoot", Object.assign({ className: classNames('anchor-table-footer', className) }, props), children));
};
Table.Footer = TableFooter;
const StyledTd = styled('td') `
    ${heightStyles}
    ${widthStyles}
    ${maxWidthStyles}
    ${minWidthStyles}
    ${fontSizeStyles}
    ${fontWeightStyles}
    ${colorStyles}
    ${spaceStyles}
    ${({ align }) => textAlignStyles({ textAlign: align })}
`;
export const TableCell = (_a) => {
    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
    return (React.createElement(StyledTd, Object.assign({ className: classNames('anchor-table-cell', className) }, props), children));
};
Table.Cell = TableCell;
const StyledTh = styled('th') `
    ${heightStyles}
    ${widthStyles}
    ${maxWidthStyles}
    ${minWidthStyles}
    ${fontSizeStyles}
    ${fontWeightStyles}
    ${colorStyles}
    ${spaceStyles}
    ${({ align }) => textAlignStyles({ textAlign: align })}
`;
export const TableHeaderCell = (_a) => {
    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
    return (React.createElement(StyledTh, Object.assign({ className: classNames('anchor-table-header-cell', className) }, props), children));
};
Table.HeaderCell = TableHeaderCell;
//# sourceMappingURL=Table.component.js.map