stream-chat-react
Version:
React components to create chat conversations or livestream style chat
47 lines (46 loc) • 4.51 kB
JavaScript
import React from 'react';
import { isLocalAttachment, isLocalAudioAttachment, isLocalFileAttachment, isLocalImageAttachment, isLocalVideoAttachment, isLocalVoiceRecordingAttachment, isScrapedContent, } from 'stream-chat';
import { UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview } from './UnsupportedAttachmentPreview';
import { VoiceRecordingPreview as DefaultVoiceRecordingPreview } from './VoiceRecordingPreview';
import { FileAttachmentPreview as DefaultFilePreview } from './FileAttachmentPreview';
import { ImageAttachmentPreview as DefaultImagePreview } from './ImageAttachmentPreview';
import { useAttachmentsForPreview, useMessageComposer } from '../hooks';
import { GeolocationPreview as DefaultGeolocationPreview, } from './GeolocationPreview';
export const AttachmentPreviewList = ({ AudioAttachmentPreview = DefaultFilePreview, FileAttachmentPreview = DefaultFilePreview, GeolocationPreview = DefaultGeolocationPreview, ImageAttachmentPreview = DefaultImagePreview, UnsupportedAttachmentPreview = DefaultUnknownAttachmentPreview, VideoAttachmentPreview = DefaultFilePreview, VoiceRecordingPreview = DefaultVoiceRecordingPreview, }) => {
const messageComposer = useMessageComposer();
// todo: we could also allow to attach poll to a message composition
const { attachments, location } = useAttachmentsForPreview();
if (!attachments.length && !location)
return null;
return (React.createElement("div", { className: 'str-chat__attachment-preview-list' },
React.createElement("div", { className: 'str-chat__attachment-list-scroll-container', "data-testid": 'attachment-list-scroll-container' },
location && (React.createElement(GeolocationPreview, { location: location,
// It is not possible to nullify shared_location field so we do not show a preview when editing
// to prevent a user from wanting to remove the location
remove: messageComposer.editedMessage
? undefined
: messageComposer.locationComposer.initState })),
attachments.map((attachment) => {
if (isScrapedContent(attachment))
return null;
if (isLocalVoiceRecordingAttachment(attachment)) {
return (React.createElement(VoiceRecordingPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
}
else if (isLocalAudioAttachment(attachment)) {
return (React.createElement(AudioAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
}
else if (isLocalVideoAttachment(attachment)) {
return (React.createElement(VideoAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
}
else if (isLocalImageAttachment(attachment)) {
return (React.createElement(ImageAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.image_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
}
else if (isLocalFileAttachment(attachment)) {
return (React.createElement(FileAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
}
else if (isLocalAttachment(attachment)) {
return (React.createElement(UnsupportedAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
}
return null;
}))));
};