import { makeStyles } from "@material-ui/core/styles"; import { styled } from '@mui/material/styles'; import { useState } from "react"; import { IconButton } from "@material-ui/core"; import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'; import FileDownloadIcon from '@mui/icons-material/FileDownload'; import Button from '@mui/material/Button'; import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import { removeMessageById } from "../../../../../../api-data"; import { timeStampMessage,copied } from '../../../../../../helpers' const FileViewer = require('react-file-viewer') const StyledMenu = styled((props:any) => (
))(({ theme }:any) => ({ '& .MuiPaper-root': { borderRadius: 10, marginTop: theme.spacing(0), minWidth: 220, color: theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500], boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px', '& .MuiMenu-list': { padding: '4px 4px', }, '& .MuiMenuItem-root': { marginBottom: theme.spacing(1), '& .MuiSvgIcon-root': { fontSize: 21, color: theme.palette.text.secondary, marginRight: theme.spacing(2), } }, }, })); const useStyles = makeStyles({ container: { display: "flex", justifyContent: "flex-end", marginBottom:15 }, wrapper: { position: 'relative', display: 'flex', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', width: 200, padding: '5px 5px 12px 5px', backgroundColor: '#deffa9', borderRadius: 7, "&:after": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "15px solid #deffa9", borderLeft: "15px solid transparent", borderRight: "15px solid transparent", bottom: "0", right: "-15px" }, "&:before": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "17px solid #deffa9", borderLeft: "16px solid transparent", borderRight: "16px solid transparent", bottom: "0px", right: "-17px" } }, wrapperActive: { position: 'relative', display: 'flex', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', width: 200, padding: '5px 5px 12px 5px', backgroundColor: '#ced8d7', borderRadius: 7, "&:after": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "15px solid #ced8d7", borderLeft: "15px solid transparent", borderRight: "15px solid transparent", bottom: "0", right: "-15px" }, "&:before": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "17px solid #ced8d7", borderLeft: "16px solid transparent", borderRight: "16px solid transparent", bottom: "0px", right: "-17px" } }, bntDownload: { backgroundColor: 'inherit', color: '#54b0fc', width: 30, height:30, '&:hover': { backgroundColor: '#54b0fc', color:'#ffffff' } }, title: { margin: '0 30px 0 5px', color: '#0e0d0d', cursor: 'pointer', '&:hover': { color: '#54b0fc', } }, time: { position: "absolute", fontSize: ".65em", fontWeight:600, bottom: 0, right: 6, color: '#414141', padding: 3, borderRadius: 5, }, overlay: { position: 'sticky', top: 0, left: 0, width: '100%', minHeight:'100%', backgroundColor: 'rgba(104, 105, 104, 0.6)', border: 'solid 1px rgba(179, 179, 179, 0.6)', overflow: 'hidden', cursor:'pointer' }, modalDelete: { background: '#ffffff', position: 'absolute', content:'', width: '20%', height:'auto', left: '40%', bottom: '48.5%', borderRadius: 10, padding: 10, display: 'flex', flexDirection:'column' }, overlayDelete: { position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', zIndex: 100, backgroundColor: 'rgba(104, 105, 104, 0.6)', overflowY: 'hidden', }, }); interface IMessageRightFile { url:string, createdAt: string, type: string, _id:string } const MessageRightFile = ({ url,createdAt,type,_id }:IMessageRightFile) => { const classes = useStyles(); const [read, setRead] = useState