stream-chat-react/dist/components/Gallery/Image.js

React components to create chat conversations or livestream style chat

import { useCallback } from 'react';
import React, { useState } from 'react';
import { sanitizeUrl } from '@braintree/sanitize-url';
import { BaseImage as DefaultBaseImage } from './BaseImage';
import { Modal as DefaultModal } from '../Modal';
import { ModalGallery as DefaultModalGallery } from './ModalGallery';
import { useComponentContext } from '../../context';
/**
 * A simple component that displays an image.
 */
export const ImageComponent = (props) => {
    const { dimensions = {}, fallback, image_url, innerRef, previewUrl, style, thumb_url, } = props;
    const [modalIsOpen, setModalIsOpen] = useState(false);
    const { BaseImage = DefaultBaseImage, Modal = DefaultModal, ModalGallery = DefaultModalGallery, } = useComponentContext('ImageComponent');
    const imageSrc = sanitizeUrl(previewUrl || image_url || thumb_url);
    const closeModal = useCallback(() => {
        setModalIsOpen(false);
    }, []);
    const openModal = useCallback(() => {
        setModalIsOpen(true);
    }, []);
    return (React.createElement(React.Fragment, null,
        React.createElement(BaseImage, { alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: openModal, src: imageSrc, style: style, tabIndex: 0, title: fallback, ...dimensions, ...(innerRef && { ref: innerRef }) }),
        React.createElement(Modal, { className: 'str-chat__image-modal', onClose: closeModal, open: modalIsOpen },
            React.createElement(ModalGallery, { images: [props], index: 0 }))));
};