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-start", marginBottom:15 }, wrapper: { position: 'relative', display: 'flex', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', width: 200, padding: '5px 5px 12px 5px', backgroundColor: '#ffffff', borderRadius: 7, "&:after": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "15px solid #ffffff", borderLeft: "15px solid transparent", borderRight: "15px solid transparent", bottom: '0px', left: "-15px" }, "&:before": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "17px solid #ffffff", borderLeft: "16px solid transparent", borderRight: "16px solid transparent", bottom: "0px", left: "-17px" } }, wrapperActive: { position: 'relative', display: 'flex', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', width: 200, padding: '5px 5px 12px 5px', backgroundColor: '#babdbc', borderRadius: 7, "&:after": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "15px solid #babdbc", borderLeft: "15px solid transparent", borderRight: "15px solid transparent", bottom: '0px', left: "-15px" }, "&:before": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "17px solid #babdbc", borderLeft: "16px solid transparent", borderRight: "16px solid transparent", bottom: "0px", left: "-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 IMessageLeftFile { url:string, createdAt: string, type: string, _id:string } const MessageLeftFile = ({ url,createdAt,type,_id }:IMessageLeftFile) => { const classes = useStyles(); const [read, setRead] = useState(false) const [anchorEl, setAnchorEl] = useState(null); const [selected, setSelected] = useState(false); const [modal,setModal] = useState(false) const open = Boolean(anchorEl); const handleOpenRead = () => !read&&setRead(true) const handleCloseRead = () => read && setRead(false) const handleClose = (type: string | undefined): void => { if (type === 'copy') copied('Link') if (type === 'delete') setModal(true) setAnchorEl(null) setSelected(false) } const handleDeleteModal = (e: any) => { const id = e.target.id if (id === 'overlay' || id === 'cancel') return setModal(false) if (id === 'delete') { removeMessageById(_id) setModal(false) } } const handleContextMenu = (e: React.MouseEvent):void => { e.preventDefault() setAnchorEl(e.currentTarget) setSelected(true) } return (
{read&&
}
handleContextMenu(e)} className={selected? classes.wrapperActive:classes.wrapper}> {!read && Read File}
{timeStampMessage(createdAt)}
handleClose('copy')} text={url}> Copy File link handleClose('delete')}> Delete message {modal &&

Delete message

Are you sure you want to delete message?

}
)}; export default MessageLeftFile