stream-chat-react/dist/components/MessageInput/UploadsPreview.js

React components to create chat conversations or livestream style chat

import React from 'react';
import { FilePreviewer, ImagePreviewer } from 'react-file-utils';
import { useChannelStateContext } from '../../context/ChannelStateContext';
import { useMessageInputContext } from '../../context/MessageInputContext';
import { useChatContext } from '../../context';
/**
 * @deprecated This component has been deprecated in favor of `AttachmentPreviewList` as this component
 * utilises outdated components from the package [`react-file-utils`](https://github.com/GetStream/react-file-utils)
 * which will no longer receive updates for aforementioned components.
 *
 * **Will be removed with the complete transition to the theming V2.**
 */
export var UploadsPreview = function () {
    var themeVersion = useChatContext('UploadsPreview').themeVersion;
    var _a = useChannelStateContext('UploadsPreview'), _b = _a.maxNumberOfFiles, maxNumberOfFiles = _b === void 0 ? 0 : _b, multipleUploads = _a.multipleUploads;
    var _c = useMessageInputContext('UploadsPreview'), fileOrder = _c.fileOrder, fileUploads = _c.fileUploads, imageOrder = _c.imageOrder, imageUploads = _c.imageUploads, _d = _c.numberOfUploads, numberOfUploads = _d === void 0 ? 0 : _d, removeFile = _c.removeFile, removeImage = _c.removeImage, uploadFile = _c.uploadFile, uploadImage = _c.uploadImage, uploadNewFiles = _c.uploadNewFiles;
    var imagesToPreview = imageOrder
        .map(function (id) { return imageUploads[id]; })
        // filter OG scraped images
        .filter(function (image) { return !image.og_scrape_url; });
    var filesToPreview = fileOrder.map(function (id) { return fileUploads[id]; });
    return (React.createElement(React.Fragment, null,
        imageOrder.length > 0 && (React.createElement(ImagePreviewer, { disabled: !multipleUploads || numberOfUploads >= maxNumberOfFiles, handleFiles: uploadNewFiles, handleRemove: removeImage, handleRetry: uploadImage, imageUploads: imagesToPreview, multiple: multipleUploads })),
        fileOrder.length > 0 && (React.createElement(FilePreviewer, { fileIconProps: {
                className: 'str-chat__file-icon',
                version: themeVersion,
            }, handleFiles: uploadNewFiles, handleRemove: removeFile, handleRetry: uploadFile, uploads: filesToPreview }))));
};