@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
54 lines (53 loc) • 3.9 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 { Empty, Spin } from "antd";
import { useCallback } from "react";
import dayjs from "dayjs";
import useConversationStore from "../../store/conversation";
import { useTranslation } from "react-i18next";
import { documentIcon } from "../../assets/svg";
import { shortenFileName } from "../message/footer/FilePreview";
import { renderFileSize } from "../../utils/common";
const FileCollection = () => {
const { t } = useTranslation();
const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
payload: {
recvID: selectedSourceId,
contentType: MessageType.FileMessage,
},
});
const handleDownload = (url, fileName) => {
if (!url) {
console.warn("Không có link file để tải");
return;
}
const link = document.createElement("a");
link.href = url;
if (fileName) {
link.setAttribute("download", fileName);
}
link.setAttribute("target", "_blank");
link.setAttribute("rel", "noopener noreferrer");
document.body.appendChild(link);
link.click();
link.remove();
};
const renderItem = useCallback((date, items) => {
return (_jsxs("div", { className: "px-3", children: [_jsx("span", { className: "text-sm font-medium text-gray-500", children: dayjs(date).format("DD MMMM, YYYY") }), _jsx("div", { className: "flex flex-col gap-1 mt-2", children: items.map((item) => {
var _a, _b, _c;
const fileContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
return (_jsxs("div", { className: "relative flex flex-row items-center gap-2 align-center bg-gray-100 rounded-md p-2 cursor-pointer", onClick: () => handleDownload((fileContent === null || fileContent === void 0 ? void 0 : fileContent.sourceUrl) || "", (fileContent === null || fileContent === void 0 ? void 0 : fileContent.fileName) || ""), children: [documentIcon, _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx("span", { className: "text-sm font-medium", children: shortenFileName((fileContent === null || fileContent === void 0 ? void 0 : fileContent.fileName) || "", {
maxLength: 32,
}) }), _jsx("span", { className: "text-xs text-gray-500", children: `${renderFileSize(fileContent.fileSize || 0)} - ${dayjs(((_b = item === null || item === void 0 ? void 0 : item.chatLog) === null || _b === void 0 ? void 0 : _b.sendTime) || 0).format("HH:mm")}` })] })] }, (_c = item.chatLog) === null || _c === void 0 ? void 0 : _c.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: "scrollableFileDiv", className: "h-full overflow-auto", children: _jsx(InfiniteScroll, { dataLength: Object.keys(groupedData).length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableFileDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }) }));
};
export default FileCollection;