nice-ui
Version:
React design system, components, and utilities
61 lines (60 loc) • 2.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const isFirstLevelBlockElement_1 = require("../util/isFirstLevelBlockElement");
const MarkdownFullWidthBlock_1 = require("../util/MarkdownFullWidthBlock");
const nano_theme_1 = require("nano-theme");
const MarkdownBlock_1 = require("../util/MarkdownBlock");
const MyTable_1 = require("../block/Csv/MyTable");
const Paper_1 = require("../../4-card/Paper");
const { createElement: h } = React;
const tableClass = (0, nano_theme_1.rule)({
'& td,& th': {
minW: '50px',
},
'& td:first-child,& th:first-child': {
minW: '100px',
},
});
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 renderTable = (renderers, ast, idx, props, state) => {
const node = ast.nodes[idx];
const align = node.align;
const columnCount = align.length;
if (!node.children)
return null;
const [head, ...body] = node.children;
const bodyRows = body.map((nodeIdx) => renderers.tableRow(renderers, ast, nodeIdx, props, state));
const tableClassName = tableClass + (columnCount > 5 ? (columnCount > 8 ? tableExtraCompactClass : tableCompactClass) : '');
const element = (React.createElement(MarkdownBlock_1.default, { idx: idx },
React.createElement(Paper_1.Paper, { style: { overflowX: 'scroll' } },
React.createElement(MyTable_1.MyTable, { className: tableClassName },
React.createElement("thead", null, renderers.tableRow(renderers, ast, head, props, state)),
h('tbody', {}, ...bodyRows)))));
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 = renderTable;