123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- import { makeStyles } from "@material-ui/core/styles";
- import { useDispatch } from "react-redux";
- import CloseIcon from '@mui/icons-material/Close';
- import ReplyIcon from '@mui/icons-material/Reply';
- import MenuItem from '@mui/material/MenuItem';
- import ListItemText from '@mui/material/ListItemText';
- import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
- import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
- import ImageIcon from '@mui/icons-material/Image';
- import ContentCopyIcon from '@mui/icons-material/ContentCopy';
- import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
- import { firstLetter,slicedWord } from "../../../../../../helpers";
- import { TMessage } from "../../../../../../typescript/redux/messages/types";
- import { asyncGetChatById } from '../../../../../../redux/chat/operations'
- import { actionRightIsOpen, actionOpenPinned } from '../../../../../../redux/control/action'
- const useStyles = makeStyles({
- forwardTop : {
- position: 'absolute',
- left: 0,
- top: '-7vh',
- height: '6vh',
- width: '100%',
- borderRadius: 8,
- display: 'flex',
- flexWrap: 'nowrap',
- alignContent: 'center',
- alignItems: 'center',
- color: '#6b6b6b',
- border:'solid 2px rgb(41, 139, 231)',
- backgroundColor: '#ffffff',
- padding: '0px 5px',
- zIndex:2,
- },
- forwardIconClose: {
- cursor: 'pointer',
- marginLeft: 5,
- marginRight: 5,
- '&:hover': {
- color:'#f02a2a',
- transform: 'rotate(180deg)',
- transition: 'all 250ms ease-out ',
- }
- },
- forwardListWrapper: {
- width: '100%',
- },
- forwardColumn: {
- height: '80%',
- width: 2,
- backgroundColor: 'rgb(41, 139, 231)',
- marginRight:10
- },
- folderIcon: {
- color: '#54b0fc',
- },
- });
- interface IForwardBar {
- companionId: string,
- isForward:TMessage,
- handleCloseForward: () => void,
- handleScrollToTheMessage: (_id: string) => void,
- setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
- }
- const ForwardBar = ({ companionId,isForward, handleCloseForward,handleScrollToTheMessage,setIsForward }: IForwardBar) => {
- const classes = useStyles();
- const dispatch = useDispatch()
-
- const handleScrollHereOrBack = () => {
- if (companionId === isForward.companionId) return handleScrollToTheMessage(isForward._id)
- setIsForward(undefined)
- dispatch(actionRightIsOpen(''))
- dispatch(actionOpenPinned(false))
- dispatch(asyncGetChatById(isForward.companionId))
- setTimeout(() => handleScrollToTheMessage(isForward._id), 2000)
- }
-
- return (
- <div className={classes.forwardTop}>
- <ReplyIcon style={{margin:'0px 7px',color: "rgb(41, 139, 231)",transform :'rotateY(180deg)'}} />
- <div className={classes.forwardColumn}></div>
- <ul className={classes.forwardListWrapper}>
- <MenuItem onClick={handleScrollHereOrBack}>
- <ListItemText
- primary={`${firstLetter(isForward.name)}${slicedWord(isForward.name, 15, 1)}
- ${firstLetter(isForward.lastName)}${slicedWord(isForward.lastName, 15, 1)}`}
- primaryTypographyProps={{ color: "rgb(41, 139, 231)",fontSize:16 }}
- secondary={`Type : ${isForward.type.toUpperCase()}`}
- secondaryTypographyProps={{ fontSize:16 }}/>
- {isForward.type === 'text' &&<ContentCopyIcon className={classes.folderIcon} fontSize='large' />}
- {isForward.type === 'audio' &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
- {isForward.type === 'video' &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
- {isForward.type === 'image' &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
- {isForward.type === 'pdf'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}
- {isForward.type === 'docx'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}
- </MenuItem>
- </ul>
- <CloseIcon onClick={handleCloseForward} className={classes.forwardIconClose} />
- </div>
- )
- }
- export default ForwardBar
|