stream-chat-react
Version:
React components to create chat conversations or livestream style chat
58 lines (57 loc) • 3.27 kB
JavaScript
import React, { useState } from 'react';
import { sanitizeUrl } from '@braintree/sanitize-url';
import clsx from 'clsx';
import { BaseImage as DefaultBaseImage } from './BaseImage';
import { Modal as DefaultModal } from '../Modal';
import { ModalGallery as DefaultModalGallery } from './ModalGallery';
import { useComponentContext } from '../../context/ComponentContext';
import { useTranslationContext } from '../../context/TranslationContext';
const UnMemoizedGallery = (props) => {
const { images, innerRefs } = props;
const [index, setIndex] = useState(0);
const [modalOpen, setModalOpen] = useState(false);
const { BaseImage = DefaultBaseImage, Modal = DefaultModal, ModalGallery = DefaultModalGallery, } = useComponentContext('Gallery');
const { t } = useTranslationContext('Gallery');
const imageFallbackTitle = t('User uploaded content');
const countImagesDisplayedInPreview = 4;
const lastImageIndexInPreview = countImagesDisplayedInPreview - 1;
const toggleModal = (selectedIndex) => {
if (modalOpen) {
setModalOpen(false);
}
else {
setIndex(selectedIndex);
setModalOpen(true);
}
};
const renderImages = images.slice(0, countImagesDisplayedInPreview).map((image, i) => i === lastImageIndexInPreview && images.length > countImagesDisplayedInPreview ? (React.createElement("button", { className: 'str-chat__gallery-placeholder', "data-testid": 'gallery-image-last', key: `gallery-image-${i}`, onClick: () => toggleModal(i), style: {
backgroundImage: `url(${images[lastImageIndexInPreview].previewUrl ||
images[lastImageIndexInPreview].image_url ||
images[lastImageIndexInPreview].thumb_url})`,
...image.style,
}, ...(innerRefs?.current && {
ref: (r) => {
innerRefs.current[i] = r;
},
}) },
React.createElement("p", null, t('{{ imageCount }} more', {
imageCount: images.length - countImagesDisplayedInPreview,
})))) : (React.createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: `gallery-image-${i}`, onClick: () => toggleModal(i) },
React.createElement(BaseImage, { alt: image?.fallback || imageFallbackTitle, src: sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url), style: image.style, title: image?.fallback || imageFallbackTitle, ...(innerRefs?.current && {
ref: (r) => {
innerRefs.current[i] = r;
},
}) }))));
const className = clsx('str-chat__gallery', {
'str-chat__gallery--square': images.length > lastImageIndexInPreview,
'str-chat__gallery-two-rows': images.length > 2,
});
return (React.createElement("div", { className: className },
renderImages,
React.createElement(Modal, { className: 'str-chat__gallery-modal', onClose: () => setModalOpen((modalOpen) => !modalOpen), open: modalOpen },
React.createElement(ModalGallery, { images: images, index: index }))));
};
/**
* Displays images in a simple responsive grid with a light box to view the images.
*/
export const Gallery = React.memo(UnMemoizedGallery);