@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
53 lines (52 loc) • 3.99 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { MessageType } from "@openim/wasm-client-sdk";
import { useSearchMessage } from "../../hooks/search/useSearchMessage";
import InfiniteScroll from "react-infinite-scroll-component";
import { Button, Empty, Image, Spin } from "antd";
import { useCallback } from "react";
import dayjs from "dayjs";
import useConversationStore from "../../store/conversation";
import { images } from "../../constants/images";
import { useTranslation } from "react-i18next";
import { DownloadOutlined } from "@ant-design/icons";
const ImageCollection = () => {
const { t } = useTranslation();
const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
payload: {
recvID: selectedSourceId,
contentType: MessageType.PictureMessage,
},
});
const handleDownload = (imageUrl) => {
if (!imageUrl)
return;
const link = document.createElement("a");
link.href = imageUrl;
link.download = imageUrl.substring(imageUrl.lastIndexOf("/") + 1);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const renderItem = useCallback((date, items) => {
return (_jsxs("div", { className: "mb-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-500 px-3", children: dayjs(date).format("DD MMMM, YYYY") }), _jsx("div", { className: "grid grid-cols-3 justify-start gap-px py-2", children: items.map((item) => {
var _a, _b, _c, _d;
const imageContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
const sourceUrl = ((_b = imageContent.sourcePicture) === null || _b === void 0 ? void 0 : _b.url) ||
((_c = imageContent.snapshotPicture) === null || _c === void 0 ? void 0 : _c.url);
return (_jsx("div", { className: "border inline-block w-full h-full aspect-square", children: _jsx(Image, { rootClassName: "cursor-pointer w-full h-full", className: "w-full !h-full object-cover", src: sourceUrl, preview: true, placeholder: _jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }), fallback: images.imageFailed }) }, (_d = item === null || item === void 0 ? void 0 : item.chatLog) === null || _d === void 0 ? void 0 : _d.clientMsgID));
}) })] }, date));
}, []);
if (dataFlatten.length === 0 && !isLoading)
return _jsx(Empty, { description: t("no_media_files") });
if (isLoading)
return (_jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }));
return (_jsx("div", { id: "scrollableImageDiv", className: "h-full overflow-auto", children: _jsx(Image.PreviewGroup, { preview: {
toolbarRender: (originalNode, info) => {
var _a;
const imageUrl = (_a = info === null || info === void 0 ? void 0 : info.image) === null || _a === void 0 ? void 0 : _a.url;
return (_jsxs("div", { className: "flex flex-col justify-center gap-2", children: [originalNode, imageUrl && (_jsx(Button, { type: "primary", icon: _jsx(DownloadOutlined, {}), className: "self-center", onClick: () => handleDownload(imageUrl), children: t("download") }))] }));
},
}, children: _jsx(InfiniteScroll, { dataLength: dataFlatten.length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableImageDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }) }) }));
};
export default ImageCollection;