stream-chat-react
Version:
React components to create chat conversations or livestream style chat
45 lines (44 loc) • 3.04 kB
JavaScript
import clsx from 'clsx';
import React, { useState } from 'react';
import { LinkPreviewsManager } from 'stream-chat';
import { useStateStore } from '../../store';
import { PopperTooltip } from '../Tooltip';
import { useEnterLeaveHandlers } from '../Tooltip/hooks';
import { useMessageComposer } from './hooks';
import { CloseIcon, LinkIcon } from './icons';
const linkPreviewsManagerStateSelector = (state) => ({
linkPreviews: Array.from(state.previews.values()).filter((preview) => LinkPreviewsManager.previewIsLoaded(preview) ||
LinkPreviewsManager.previewIsLoading(preview)),
});
const messageComposerStateSelector = (state) => ({
quotedMessage: state.quotedMessage,
});
export const LinkPreviewList = () => {
const messageComposer = useMessageComposer();
const { linkPreviewsManager } = messageComposer;
const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateSelector);
const { linkPreviews } = useStateStore(linkPreviewsManager.state, linkPreviewsManagerStateSelector);
const showLinkPreviews = linkPreviews.length > 0 && !quotedMessage;
if (!showLinkPreviews)
return null;
return (React.createElement("div", { className: 'str-chat__link-preview-list' }, linkPreviews.map((linkPreview) => (React.createElement(LinkPreviewCard, { key: linkPreview.og_scrape_url, linkPreview: linkPreview })))));
};
export const LinkPreviewCard = ({ linkPreview }) => {
const { linkPreviewsManager } = useMessageComposer();
const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
const [referenceElement, setReferenceElement] = useState(null);
if (!LinkPreviewsManager.previewIsLoaded(linkPreview) &&
!LinkPreviewsManager.previewIsLoading(linkPreview))
return null;
return (React.createElement("div", { className: clsx('str-chat__link-preview-card', {
'str-chat__link-preview-card--loading': LinkPreviewsManager.previewIsLoading(linkPreview),
}), "data-testid": 'link-preview-card' },
React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, linkPreview.og_scrape_url),
React.createElement("div", { className: 'str-chat__link-preview-card__icon-container', onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
React.createElement(LinkIcon, null)),
React.createElement("div", { className: 'str-chat__link-preview-card__content' },
React.createElement("div", { className: 'str-chat__link-preview-card__content-title' }, linkPreview.title),
React.createElement("div", { className: 'str-chat__link-preview-card__content-description' }, linkPreview.text)),
React.createElement("button", { className: 'str-chat__link-preview-card__dismiss-button', "data-testid": 'link-preview-card-dismiss-btn', onClick: () => linkPreviewsManager.dismissPreview(linkPreview.og_scrape_url), type: 'button' },
React.createElement(CloseIcon, null))));
};