12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- import { makeStyles } from "@material-ui/core/styles";
- 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";
- const useStyles = makeStyles({
- replyTop : {
- 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,
- },
- replyIconClose: {
- cursor: 'pointer',
- marginLeft: 5,
- marginRight: 5,
- '&:hover': {
- color:'#f02a2a',
- transform: 'rotate(180deg)',
- transition: 'all 250ms ease-out ',
- }
- },
- replyListWrapper: {
- width: '100%',
- },
- replyColumn: {
- height: '80%',
- width: 2,
- backgroundColor: 'rgb(41, 139, 231)',
- marginRight:10
- },
- folderIcon: {
- color: '#54b0fc',
- },
- });
- interface IReplyBar {
- isReply:TMessage,
- handleCloseReply: () => void,
- handleScrollToTheMessage:(_id:string) => void
- }
- const ReplyBar = ({ isReply, handleCloseReply,handleScrollToTheMessage }: IReplyBar) => {
- const classes = useStyles();
-
- return (
- <div className={classes.replyTop}>
- <ReplyIcon style={{margin:'0px 7px',color: "rgb(41, 139, 231)"}}/>
- <div className={classes.replyColumn}></div>
- <ul className={classes.replyListWrapper}>
- <MenuItem onClick={() => handleScrollToTheMessage(isReply._id)}>
- <ListItemText
- primary={`${firstLetter(isReply.name)}${slicedWord(isReply.name, 15, 1)}
- ${firstLetter(isReply.lastName)}${slicedWord(isReply.lastName, 15, 1)}`}
- primaryTypographyProps={{ color: "rgb(41, 139, 231)",fontSize:16 }}
- secondary={`Type : ${isReply.type.toUpperCase()}`}
- secondaryTypographyProps={{ fontSize: 16 }} />
- {isReply.type === 'text' &&<ContentCopyIcon className={classes.folderIcon} fontSize='large' />}
- {isReply.type === 'audio' &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
- {isReply.type === 'video' &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
- {isReply.type === 'image' &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
- {isReply.type === 'pdf'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}
- {isReply.type === 'docx'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}
- </MenuItem>
- </ul>
- <CloseIcon onClick={handleCloseReply} className={classes.replyIconClose} />
- </div>
- )
- }
- export default ReplyBar
|