nice-ui
Version:
React design system, components, and utilities
52 lines (51 loc) • 2.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const nano_theme_1 = require("nano-theme");
const React = require("react");
const conf_1 = require("../../../../misc/conf");
const constants_1 = require("../../../../constants");
const Separator_1 = require("../../../../3-list-item/Separator");
const wrapClass = (0, nano_theme_1.rule)({
d: 'flex',
justifyContent: 'center',
});
const blockClass = (0, nano_theme_1.rule)({
d: 'inline-block',
mar: '0 auto',
bxz: 'border-box',
maxW: constants_1.NiceUiSizes.BlogContentMaxWidth + 'px',
bd: `1px solid ${nano_theme_1.theme.g(0.92)}`,
// bg: theme.blueColor(0.01),
bdrad: '4px',
pad: '4px',
img: {
d: 'block',
maxW: '100%',
bdrad: '3px',
},
});
const captionClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.ui1.mid,
textAlign: 'center',
col: nano_theme_1.theme.g(0.5),
fz: '14px',
pad: '16px',
});
const Screenshot = (props) => {
const { src, alt, width, height, caption, retinaFactor = 1, noPadding } = props;
const [maxWidth, setMaxWidth] = React.useState(undefined);
const url = src.indexOf('/docs') === 0 ? conf_1.CDN + '/ff' + src : src;
const handleLoad = (e) => {
if (retinaFactor > 1) {
const img = e.target;
setMaxWidth(img.naturalWidth / retinaFactor);
}
};
return (React.createElement("div", { className: wrapClass },
React.createElement("figure", { className: 'jj-screenshot' + blockClass, style: { padding: noPadding ? 0 : undefined, maxWidth } },
React.createElement("img", { src: url, alt: alt || caption || 'screenshot', style: { maxWidth: '100%', width: width || undefined, height: height || undefined }, onLoad: handleLoad }),
!!caption && (React.createElement(React.Fragment, null,
React.createElement(Separator_1.Separator, null),
React.createElement("figcaption", { className: captionClass }, caption))))));
};
exports.default = Screenshot;