import { FC, useState } from "react"; import Link from "next/link"; import { AlertCircle, X } from "lucide-react"; // hooks import { usePlatformOS } from "hooks/use-platform-os"; // ui import { Tooltip } from "@plane/ui"; // components // icons import { getFileIcon } from "components/icons"; // helper import { convertBytesToSize, getFileExtension, getFileName } from "helpers/attachment.helper"; import { renderFormattedDate } from "helpers/date-time.helper"; import { truncateText } from "helpers/string.helper"; import { useIssueDetail, useMember } from "hooks/store"; import { IssueAttachmentDeleteModal } from "./delete-attachment-confirmation-modal"; // types import { TAttachmentOperations } from "./root"; type TAttachmentOperationsRemoveModal = Exclude; type TIssueAttachmentsDetail = { attachmentId: string; handleAttachmentOperations: TAttachmentOperationsRemoveModal; disabled?: boolean; }; export const IssueAttachmentsDetail: FC = (props) => { // props const { attachmentId, handleAttachmentOperations, disabled } = props; // store hooks const { getUserDetails } = useMember(); const { attachment: { getAttachmentById }, } = useIssueDetail(); // states const [attachmentDeleteModal, setAttachmentDeleteModal] = useState(false); const { isMobile } = usePlatformOS(); const attachment = attachmentId && getAttachmentById(attachmentId); if (!attachment) return <>; return ( <>
{getFileIcon(getFileExtension(attachment.asset))}
{truncateText(`${getFileName(attachment.attributes.name)}`, 10)}
{getFileExtension(attachment.asset).toUpperCase()} {convertBytesToSize(attachment.attributes.size)}
{!disabled && ( )}
); };