nice-ui
Version:
React design system, components, and utilities
70 lines (69 loc) • 2.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const nano_theme_1 = require("nano-theme");
const React = require("react");
const use_t_1 = require("use-t");
const useWindowSize_1 = require("react-use/lib/useWindowSize");
const ContentItem_1 = require("./ContentItem");
const AsideContainer_1 = require("../Aside/AsideContainer");
const InlineCard_1 = require("../InlineCard");
const constants_1 = require("../../../../../constants");
const blockClass = (0, nano_theme_1.rule)({
bd: `1px solid ${nano_theme_1.theme.g(0.98)}`,
bdrad: '8px',
mar: '0 0 32px',
pad: '32px',
'&:hover': {
bd: `1px solid ${nano_theme_1.theme.g(0.9)}`,
},
[`@media(max-width: ${constants_1.NiceUiSizes.SiteWidth}px)`]: {
bd: `1px solid ${nano_theme_1.theme.g(0.9)}`,
},
});
const blockClassRight = (0, nano_theme_1.rule)({
pad: '8px',
bd: 0,
'&:hover': {
bd: 0,
},
[`@media(max-width: ${constants_1.NiceUiSizes.SiteWidth}px)`]: {
bd: 0,
},
});
const contentsClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.ui2.mid,
col: nano_theme_1.theme.g(0.5),
fz: '10px',
// ta: 'right',
textTransform: 'uppercase',
marb: '8px',
bdb: `1px solid ${nano_theme_1.theme.g(0.92)}`,
[`@media(min-width: ${constants_1.NiceUiSizes.SiteWidth}px)`]: {
op: 0.4,
[`.${blockClass.trim()}:hover &`]: {
op: 1,
},
},
});
const Contents = ({ ast, renderers, right }) => {
const [t] = (0, use_t_1.useT)();
const wndSize = (0, useWindowSize_1.default)();
const contents = ast.contents;
if (!contents || contents.length < 2)
return null;
const headings = [];
for (let i = 0; i < contents.length; i++) {
const headingId = contents[i];
const node = ast.nodes[headingId];
headings.push(React.createElement(ContentItem_1.default, { key: i, node: node, ast: ast, renderers: renderers }));
}
const isLargeScreen = wndSize.width >= 1600;
if (isLargeScreen) {
return (React.createElement(AsideContainer_1.default, { left: !right },
React.createElement("div", { className: blockClass + (right ? blockClassRight : '') },
!right && React.createElement("div", { className: contentsClass }, t('Contents')),
headings)));
}
return React.createElement(InlineCard_1.default, { title: t('Contents') }, headings);
};
exports.default = Contents;