nice-ui
Version:
React design system, components, and utilities
55 lines (54 loc) • 2.08 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const useWindowSize_1 = require("react-use/lib/useWindowSize");
const nano_theme_1 = require("nano-theme");
const context_1 = require("../../context");
const AsideInline_1 = require("./AsideInline");
const constants_1 = require("../../../../../constants");
const blockClass = (0, nano_theme_1.rule)({
pos: 'relative',
h: 0,
pad: 0,
mar: 0,
lh: 0,
});
const innerBlockClass = (0, nano_theme_1.rule)({
pos: 'absolute',
top: 0,
left: '100%',
pad: '4px 0 0',
fz: '0.83em',
lh: '1.42em',
bxz: 'border-box',
'& a': {
col: nano_theme_1.theme.g(0.4),
bdb: '1px solid rgba(66, 66, 66, 0.2)',
},
});
const AsideContainer = ({ children, left }) => {
const wndSize = (0, useWindowSize_1.default)();
const { contentWidth } = (0, context_1.useDocsMarkdownCtx)();
const isSmallWidth = wndSize.width <= constants_1.NiceUiSizes.BlogContentMaxWidth + 100;
if (isSmallWidth)
return React.createElement(AsideInline_1.default, null, children);
let inner = null;
if (wndSize.width > constants_1.NiceUiSizes.BlogContentMaxWidth + 100) {
const marginWidth = (wndSize.width - (contentWidth || constants_1.NiceUiSizes.BlogContentMaxWidth)) / 2;
if (marginWidth < 200)
return React.createElement(AsideInline_1.default, null, children);
const width = Math.min(400, marginWidth - 32);
if (width < 200)
return React.createElement(AsideInline_1.default, null, children);
const paddingLeft = width > 360 ? 96 : 24;
const style = { width, paddingLeft };
if (left) {
style.left = -width;
style.paddingLeft = 0;
style.paddingRight = paddingLeft;
}
inner = (React.createElement("div", { className: innerBlockClass, style: style }, children));
}
return React.createElement("div", { className: 'invisible' + blockClass }, inner);
};
exports.default = AsideContainer;