nice-ui
Version:
React design system, components, and utilities
54 lines (53 loc) • 2.08 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 nano_theme_1 = require("nano-theme");
const isFirstLevelBlockElement_1 = require("../../util/isFirstLevelBlockElement");
const MarkdownFullWidthBlock_1 = require("../../util/MarkdownFullWidthBlock");
const { memo, useContext } = React;
const paragraphClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.sans,
lh: 1.7,
fz: '1em',
[nano_theme_1.m2]: {
lh: 1.6,
},
[nano_theme_1.m1]: {
lh: 1.5,
ta: 'initial',
},
});
const paragraphCompactClass = (0, nano_theme_1.rule)({
lh: 1.45,
});
const Paragraph = memo(({ idx, children }) => {
const { ast, props } = useContext(context_1.context);
const theme = (0, nano_theme_1.useTheme)();
const root = ast.nodes[0];
const blockCount = root.children ? root.children.length : 0;
const node = ast.nodes[idx];
const isFirstLevelBlock = (0, isFirstLevelBlockElement_1.default)(node, ast);
const style = {
color: theme.g(0, 0.8),
};
if (props.isFullWidth && blockCount === 1) {
// Is like a tweet. Add extra character in case of newline.
if ((root.len || 0) <= 141) {
style.fontSize = '1.3em';
}
else if ((root.len || 0) <= 281) {
style.fontSize = '1.2em';
}
}
if (props.isFullWidth && (root.len || 0) <= 10) {
// Looks nice with emojis.
style.textAlign = 'center';
style.fontSize = '2em';
}
const paragraph = (React.createElement(MarkdownBlock_1.default, { as: "p", idx: idx, className: paragraphClass + (props.isCompact ? paragraphCompactClass : ''), style: style }, children));
const doCenterAsTopLevelBlock = props.isFullWidth && isFirstLevelBlock;
return doCenterAsTopLevelBlock ? React.createElement(MarkdownFullWidthBlock_1.default, null, paragraph) : paragraph;
});
exports.default = Paragraph;