nice-ui
Version:
React design system, components, and utilities
49 lines (48 loc) • 2.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const context_1 = require("../../context");
const MarkdownBlock_1 = require("../../util/MarkdownBlock");
const MarkdownFullWidthBlock_1 = require("../../util/MarkdownFullWidthBlock");
const isFirstLevelBlockElement_1 = require("../../util/isFirstLevelBlockElement");
const HighlightCode_1 = require("../../../1-inline/HighlightCode");
const nano_theme_1 = require("nano-theme");
const blockClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.mono,
d: 'block',
bdrad: '5px',
trs: 'background 0.6s ease 0s',
fz: '.9em',
lh: 1.3,
overflowY: 'hidden',
bd: '1px solid transparent',
pad: '16px !important',
'@media (max-width: 800px)': {
pad: '8px !important',
},
});
const blockCompactClass = (0, nano_theme_1.rule)({
pad: `${nano_theme_1.theme.g(0.2)}px ${nano_theme_1.theme.g(0.3)}px !important`,
});
const { useContext } = React;
const Code = ({ idx }) => {
const dynamicBlockClass = (0, nano_theme_1.useRule)((theme) => ({
col: theme.g(0.3),
bg: theme.g(0, 0.02),
'&:hover': {
bg: theme.bg,
bd: `1px solid ${theme.g(0, 0.04)}`,
},
}));
const { ast, props } = useContext(context_1.context);
const node = ast.nodes[idx];
const { lang, value } = node;
const lines = (value.match(/\n/g) || '').length + 1;
const charsPerLine = value.length / lines;
const doCenterAsTopLevelBlock = props.isFullWidth && (0, isFirstLevelBlockElement_1.default)(node, ast);
const makeWide = charsPerLine > 50 || (charsPerLine > 40 && lines > 3);
const blockStyle = {};
const element = (React.createElement(MarkdownBlock_1.default, { idx: idx, as: "pre", className: blockClass + dynamicBlockClass + (props.isCompact ? blockCompactClass : ''), style: blockStyle }, !!lang ? React.createElement(HighlightCode_1.default, { code: value, lang: lang || undefined }) : React.createElement("code", null, value)));
return doCenterAsTopLevelBlock ? React.createElement(MarkdownFullWidthBlock_1.default, { wide: makeWide }, element) : element;
};
exports.default = Code;