nice-ui
Version:
React design system, components, and utilities
50 lines (49 loc) • 1.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SizerBigModal = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const useWindowSize_1 = require("react-use/lib/useWindowSize");
const wrapTopPadding = 80;
const minHorizontalMargin = 30;
const minHorizontalPadding = 0;
const blockClass = (0, nano_theme_1.rule)({
margin: '-88px -24px -32px',
d: 'flex',
flexDirection: 'column',
bxz: 'border-box',
pos: 'relative',
pad: '0 0 24px',
});
const wrapClass = (0, nano_theme_1.rule)({
d: 'flex',
flex: '1 1 100%',
w: '100%',
h: '100%',
mar: '0 auto',
pad: `${wrapTopPadding}px 0 0`,
});
const headerClass = (0, nano_theme_1.rule)({
pos: 'absolute',
h: '40px',
w: 'calc(100% - 100px)',
top: `${nano_theme_1.lightTheme.space(0)}px`,
left: `${nano_theme_1.lightTheme.space(0)}px`,
});
const SizerBigModal = ({ header, narrow, wide, children }) => {
const { width, height } = (0, useWindowSize_1.default)();
const availableContentWidth = width - minHorizontalMargin - minHorizontalMargin - minHorizontalPadding - minHorizontalPadding;
const blockTopPadding = height > 700 ? 64 : 16;
const blockHeight = height - blockTopPadding - blockTopPadding;
const style = {
minHeight: blockHeight,
};
const wrapStyle = {
minWidth: Math.min(availableContentWidth, narrow ? 640 : wide ? 1200 : 960),
maxWidth: narrow ? 640 : undefined,
};
return (React.createElement("div", { className: blockClass, style: style },
!!header && React.createElement("div", { className: headerClass }, header),
React.createElement("div", { className: wrapClass, style: wrapStyle }, typeof children === 'function' ? children(availableContentWidth) : children)));
};
exports.SizerBigModal = SizerBigModal;