nice-ui
Version:
React design system, components, and utilities
47 lines (46 loc) • 1.87 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const nano_theme_1 = require("nano-theme");
const MarkdownBlock_1 = require("../../util/MarkdownBlock");
const isFirstLevelBlockElement_1 = require("../../util/isFirstLevelBlockElement");
const MarkdownFullWidthBlock_1 = require("../../util/MarkdownFullWidthBlock");
const DataTable_1 = require("./DataTable");
const context_1 = require("../../context");
const { useContext } = React;
const tableCompactClass = (0, nano_theme_1.rule)({
'& td,& th': {
padl: '12px',
padr: '12px',
},
'& td:first-child,& th:first-child': {
padl: '16px',
},
'& td:last-child,& th:last-child': {
padr: '16px',
},
});
const tableExtraCompactClass = (0, nano_theme_1.rule)({
'& td,& th': {
padl: '4px',
padr: '4px',
},
'& td:first-child,& th:first-child': {
padl: '12px',
},
'& td:last-child,& th:last-child': {
padr: '12px',
},
});
const MarkdownDataTable = ({ idx, ...dataTableProps }) => {
const { ast, props } = useContext(context_1.context);
const node = ast.nodes[idx];
const head = dataTableProps.data[0];
const columnCount = head.length;
const tableClassName = columnCount > 5 ? (columnCount > 8 ? tableExtraCompactClass : tableCompactClass) : '';
const element = (React.createElement(MarkdownBlock_1.default, { idx: idx, className: tableClassName },
React.createElement(DataTable_1.default, { ...dataTableProps })));
const doCenterAsTopLevelBlock = props.isFullWidth && (0, isFirstLevelBlockElement_1.default)(node, ast);
return doCenterAsTopLevelBlock ? (React.createElement(MarkdownFullWidthBlock_1.default, { wide: columnCount > 4, xwide: columnCount > 11 }, element)) : (element);
};
exports.default = MarkdownDataTable;