@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
50 lines (49 loc) • 3.78 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from "react";
import { useMessageFooterContext } from ".";
import { Button } from "antd";
import { Icon } from "../../icon";
import { documentIcon } from "../../../assets/svg";
const documentTypes = [
"application/pdf",
"application/msword",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
];
export const shortenFileName = (name, options = {}) => {
const { maxLength = 20, keepStart = 8, keepEnd = 3 } = options;
if (name.length <= maxLength)
return name;
const dotIndex = name.lastIndexOf(".");
const ext = dotIndex !== -1 ? name.slice(dotIndex) : "";
const base = dotIndex !== -1 ? name.slice(0, dotIndex) : name;
// Tính toán độ dài phần đầu & cuối
const available = maxLength - ext.length - 3; // trừ "...”
const startLen = keepStart !== null && keepStart !== void 0 ? keepStart : Math.floor(available / 2);
const endLen = keepEnd !== null && keepEnd !== void 0 ? keepEnd : Math.floor(available / 2);
const start = base.slice(0, startLen);
const end = base.slice(-endLen);
return `${start}...${end}${ext}`;
};
const FilePreview = () => {
var _a;
const { listUploadFiles, setListUploadFiles } = useMessageFooterContext();
const onRemoveFile = (file) => {
setListUploadFiles(listUploadFiles.filter((f) => f.uid !== file.uid));
};
const renderFilePreview = useCallback((file) => {
var _a, _b, _c;
const isDocument = documentTypes.includes(((_a = file === null || file === void 0 ? void 0 : file.originFileObj) === null || _a === void 0 ? void 0 : _a.type) || "");
const isVideo = (_b = file.type) === null || _b === void 0 ? void 0 : _b.startsWith("video/");
let src = file.url;
if (!src && file.originFileObj) {
src = URL.createObjectURL(file.originFileObj);
}
if (isDocument) {
return (_jsxs("div", { className: "relative flex flex-row items-center gap-2 align-center bg-gray-100 rounded-md p-1 pr-2", children: [documentIcon, _jsx("span", { className: "text-xs text-gray-500", children: shortenFileName(((_c = file === null || file === void 0 ? void 0 : file.originFileObj) === null || _c === void 0 ? void 0 : _c.name) || "") }), _jsx(Button, { className: "absolute top-[-8px] right-[-8px] w-5 h-5 rounded-full p-0 bg-gray-500 hover:bg-gray-600", type: "primary", onClick: () => onRemoveFile(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) })] }, file.uid));
}
return (_jsxs("div", { className: "relative rounded-md border", children: [isVideo ? (_jsx("video", { src: src, className: "w-[48px] h-[48px] object-cover rounded-lg", autoPlay: false })) : (_jsx("img", { src: src, alt: file.name, className: "w-[48px] h-[48px] object-cover rounded-lg" })), _jsx(Button, { className: "absolute top-[-8px] right-[-8px] w-5 h-5 rounded-full p-0 bg-gray-500 hover:bg-gray-600", type: "primary", onClick: () => onRemoveFile(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) }), isVideo && (_jsx(Icon, { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", icon: "play-b", size: 20, color: "white" }))] }, file.uid));
}, [listUploadFiles]);
return (_jsx("div", { className: "overflow-x-auto mb-[-4px]", children: _jsx("div", { className: "border-b py-2 px-4", children: _jsx("div", { className: "flex items-center gap-2", children: (_a = listUploadFiles === null || listUploadFiles === void 0 ? void 0 : listUploadFiles.map) === null || _a === void 0 ? void 0 : _a.call(listUploadFiles, (file) => renderFilePreview(file)) }) }) }));
};
export default FilePreview;