@redocly/theme/lib/components/Image/Image.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
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 = __importStar(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, lightboxStyle } = props;
    const lightboxContainerRef = (0, react_1.useRef)(null);
    const [lightboxImage, setLightboxImage] = (0, react_1.useState)(undefined);
    const parsedSourceSetMap = (0, react_1.useMemo)(() => {
        return srcSet ? (0, utils_1.parseSrcSet)(srcSet) : new Map();
    }, [srcSet]);
    const handleLightboxKeyDown = (0, react_1.useCallback)((e) => {
        e.stopPropagation();
        if (e.key === 'Escape') {
            setLightboxImage(undefined);
        }
    }, []);
    const handleImageClick = (0, react_1.useCallback)((src) => {
        if (!withLightbox || lightboxImage) {
            return;
        }
        setLightboxImage(src);
    }, [withLightbox, lightboxImage]);
    const handleCloseLightbox = (0, react_1.useCallback)(() => {
        setLightboxImage(undefined);
    }, []);
    (0, react_1.useEffect)(() => {
        var _a;
        if (lightboxImage) {
            (_a = lightboxContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
        }
    }, [lightboxImage]);
    const combinedStyles = Object.assign(Object.assign(Object.assign({}, (withLightbox && { cursor: 'pointer' })), (border && { border })), (typeof style === 'string' ? { cssText: style } : style));
    const lightboxOverlayStyles = typeof lightboxStyle === 'string' ? { cssText: lightboxStyle } : lightboxStyle;
    return (react_1.default.createElement(react_1.default.Fragment, null,
        lightboxImage ? (react_1.default.createElement(LightboxContainer, { ref: lightboxContainerRef, onClick: handleCloseLightbox, onKeyDown: handleLightboxKeyDown, tabIndex: 0 },
            react_1.default.createElement(Overlay, { style: lightboxOverlayStyles }),
            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 Overlay = styled_components_1.default.div `
  background-color: var(--bg-color-modal-overlay);
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  height: 100%;
  width: 100%;
  z-index: -1;
`;
const LightboxContainer = styled_components_1.default.div `
  display: grid;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: var(--z-index-overlay);

  &:focus {
    outline: none;
  }

  img {
    cursor: pointer;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    margin: auto;
    max-width: 90%;
    max-height: 90%;
  }
`;
//# sourceMappingURL=Image.js.map