@redocly/theme
Version:
Shared UI components lib
58 lines (57 loc) • 2.59 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Image = Image;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../../core/utils");
function Image(props) {
const { src, srcSet, alt, className, width, height, border, style, withLightbox } = props;
const [lightboxImage, setLightboxImage] = react_1.default.useState(undefined);
const parsedSourceSetMap = react_1.default.useMemo(() => {
return srcSet ? (0, utils_1.parseSrcSet)(srcSet) : new Map();
}, [srcSet]);
const handleImageClick = (src) => {
if (!withLightbox || lightboxImage) {
return;
}
setLightboxImage(src);
};
const handleCloseLightbox = () => {
setLightboxImage(undefined);
};
const combinedStyles = Object.assign(Object.assign(Object.assign({}, (withLightbox && { cursor: 'pointer' })), (border && { border })), (typeof style === 'string' ? { cssText: style } : style));
return (react_1.default.createElement(react_1.default.Fragment, null,
lightboxImage ? (react_1.default.createElement(LightboxContainer, { onClick: handleCloseLightbox },
react_1.default.createElement(Image, { src: lightboxImage, alt: alt }))) : null,
src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className, width: width, height: height, style: combinedStyles, onClick: () => handleImageClick(src) })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, colorMode: key, src: value, alt: alt, className: className, width: width, height: height, "$withLightbox": withLightbox, style: combinedStyles, onClick: () => handleImageClick(value) }))))));
}
const ColorModeAwareImage = styled_components_1.default.img `
html:not(.${(props) => props.colorMode}) && {
display: none;
}
${({ $withLightbox }) => $withLightbox &&
`
cursor: pointer;
`}
`;
const LightboxContainer = styled_components_1.default.div `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--bg-color-modal-overlay);
z-index: var(--z-index-overlay);
display: flex;
justify-content: center;
align-items: center;
img {
cursor: pointer;
max-width: 90%;
max-height: 90%;
}
`;
//# sourceMappingURL=Image.js.map