@boomerang-io/carbon-addons-boomerang-react/dist/esm/components/ImageModal/ImageModal.js

Carbon Addons for Boomerang apps

import React from 'react';
import { Button } from '@carbon/react';
import { Close } from '@carbon/react/icons';
import { Modal } from '../Modal/Modal.js';
import cx from 'classnames';
import { prefix } from '../../internal/settings.js';

/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
function ImageModal(props) {
    const { appElement = "#app", className, containerClassName, modalProps, imageClassName, imageProps, imageSrc } = props;
    const [isModalOpen, setIsModalOpen] = React.useState(false);
    const handleOpenModal = () => {
        setIsModalOpen(true);
    };
    return (React.createElement("div", { className: cx(`${prefix}--bmrg-image-modal-container`, containerClassName) },
        React.createElement(Modal, { appElement: appElement, containerClassName: `${prefix}--bmrg-image-modal`, isOpen: isModalOpen, onRequestClose: () => setIsModalOpen(false), ...modalProps },
            React.createElement(Button, { kind: "ghost", size: "lg", hasIconOnly: true, renderIcon: Close, className: `${prefix}--bmrg-image-modal__close`, onClick: () => setIsModalOpen(false) }),
            React.createElement("img", { className: `${prefix}--bmrg-image-modal__open-image`, alt: "modal-content", src: imageSrc })),
        React.createElement("button", { tabIndex: 0, onClick: handleOpenModal, className: cx(`${prefix}--bmrg-image-modal__trigger`, className) },
            React.createElement("img", { className: cx(`${prefix}--bmrg-image-modal__image`, imageClassName), alt: "trigger", src: imageSrc, ...imageProps }))));
}

export { ImageModal, ImageModal as default };