123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350 |
- 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 Divider from '@mui/material/Divider';
- import { CopyToClipboard } from 'react-copy-to-clipboard';
- import { removeMessageById,updateMessageById } from "../../../../../../api-data";
- import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
- const FileViewer = require('react-file-viewer')
- const StyledMenu = styled((props:any) => (
- <Menu
- elevation={0}
- anchorOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- transformOrigin={{
- vertical: 'bottom',
- horizontal: 'right',
- }}
- {...props}
- />
- ))(({ 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,
- },
- caption: {
- position: "absolute",
- fontSize: ".65em",
- fontWeight:600,
- bottom: 0,
- left: 6,
- color: '#000000',
- padding: 3,
- borderRadius: 5,
- },
- overlay: {
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height:'100%',
- backgroundColor: 'rgba(104, 105, 104, 0.6)',
- border:'solid 2px #0084ff',
- cursor: 'pointer',
- zIndex:100
- },
- 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',
- },
- emojiTitle: {
- position: "absolute",
- fontSize: "1.7em",
- fontWeight:600,
- bottom: 0,
- left: -40,
- },
- emojiCompanionTitle: {
- position: "absolute",
- fontSize: "1.7em",
- fontWeight:600,
- bottom: '2rem',
- left: -40,
- },
- emoji: {
- cursor: 'pointer',
- fontSize: '1.7rem',
- transition: 'all 0.3s',
- '&:hover': {
- transform: 'scale(1.5)'
- }
- },
- emojiActive: {
- cursor: 'pointer',
- fontSize: '1.2rem',
- animation: `$emoji 0.6s ease-out`,
- animationDirection: 'forwards',
- animationIterationCount: 1,
- },
- '@keyframes emoji': {
- '5%': { transform: 'translateY(1rem)'},
- '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
- '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
- '80%': {opacity: 0},
- '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
- },
- });
- interface IMessageRightFile {
- url:string,
- createdAt: string,
- type: string,
- caption: string,
- emoji: string,
- emojiCompanion: string,
- _id:string
- }
- const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,_id }:IMessageRightFile) => {
- const classes = useStyles();
- const [read, setRead] = useState<boolean>(false)
- const [anchorEl, setAnchorEl] = useState<any>(null);
- const [selected, setSelected] = useState<boolean>(false);
- const [emojiIndex, setEmojiIndex] = useState<string | null>(null);
- const [modal,setModal] = useState<boolean>(false)
- const open = Boolean(anchorEl);
- const handleOpenRead = () => !read&&setRead(true)
- const handleCloseRead = (e: any) => {
- console.log(e)
- 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<HTMLDivElement>):void => {
- e.preventDefault()
- setAnchorEl(e.currentTarget)
- setSelected(true)
- }
- const handleEmojiMenu = ({ target }: any): void => {
- const idEmoji = target.id
- if (idEmoji === emoji) {
- updateMessageById(_id,'')
- setEmojiIndex(null)
- } else {
- updateMessageById(_id,idEmoji)
- setEmojiIndex(idEmoji)
- }
- }
- return (
- <div className={classes.container}>
- {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
- <FileViewer
- allowFullScreen={true}
- fileType={type}
- filePath={url}
- onError={handleCloseRead}
- />
- </div>}
- <div onContextMenu={(e) => handleContextMenu(e)}
- className={selected? classes.wrapperActive:classes.wrapper}>
- <InsertDriveFileIcon fontSize='large' style={{ color: '#99b401' }} />
- {!read && <span className={classes.title} onClick={handleOpenRead}>Read File</span>}
- <a href={url} target="_blank" rel="noreferrer" download>
- <IconButton className={classes.bntDownload}>
- <FileDownloadIcon fontSize='medium'/>
- </IconButton>
- </a>
- <div className={classes.time}>{timeStampMessage(createdAt)}</div>
- {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
- {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
- <div className={classes.caption}>{caption}</div>
- <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
- anchorEl={anchorEl} open={open} onClose={handleClose}>
- <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
- {emojisArr.map((el:string, i:number) =>
- <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
- </MenuItem>
- <Divider/>
- <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
- <MenuItem>
- <ContentCopyIcon />
- Copy File link
- </MenuItem>
- </CopyToClipboard>
- <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
- <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
- Delete message
- </MenuItem>
- </StyledMenu>
- {modal &&
- <div onClick={handleDeleteModal} className={classes.overlayDelete} id='overlay'>
- <div className={classes.modalDelete}>
- <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
- <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
- <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
- DELETE MESSAGE
- </Button>
- <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
- CANCEL
- </Button>
- </div>
- </div>}
- </div>
- </div>
- )};
- export default MessageRightFile
|