react-base-guide/lib/components/table/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const add_custom_style_1 = require("../../utils/add-custom-style");
const Wrapper = styled_components_1.default.table `
  position: relative;
  box-sizing: border-box;
  border-collapse: collapse;
  border-spacing: 0;

  ${p => (0, add_custom_style_1.addCustomStyle)(p.$styled)}
`;
const TableHead = styled_components_1.default.thead `
  box-sizing: border-box;
  font-size: 12px;
  text-transform: uppercase;
  color: ${p => p.theme.palette.text.secondary};
`;
const Body = styled_components_1.default.tbody `
  box-sizing: border-box;
  font-size: 14px;
  color: ${p => p.theme.palette.text.primary};
`;
const Row = styled_components_1.default.tr `
  box-sizing: border-box;
  border-top: 1px solid ${p => p.theme.palette.element.border};
  &:first-of-type {
    border-bottom: none;
  }
`;
const Col = styled_components_1.default.td `
  position: relative;
  box-sizing: border-box;
  padding: 16px 12px;
  vertical-align: top;
  
  @media(max-width: ${p => p.theme.screen.mobile}) {
    padding: 8px 8px;
  }
`;
const Table = (props) => {
    const { head, body } = props;
    return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({ id: props.id, className: props.className, "$styled": props.styled }, { children: [(0, jsx_runtime_1.jsx)(TableHead, { children: (0, jsx_runtime_1.jsx)(Row, { children: head && Object.keys(head).map((col, key) => (0, jsx_runtime_1.jsx)(Col, { children: head[col] }, key)) }) }), (0, jsx_runtime_1.jsx)(Body, { children: body && body.map((row, rowKey) => ((0, jsx_runtime_1.jsx)(Row, { children: head && Object.keys(head).map((col, key) => (0, jsx_runtime_1.jsx)(Col, { children: row[col] }, key)) }, rowKey))) })] })));
};
exports.default = Table;
//# sourceMappingURL=index.js.map