1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- 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 { 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
- },
- });
- 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 }}/>
- </MenuItem>
- </ul>
- <CloseIcon onClick={handleCloseReply} className={classes.replyIconClose} />
- </div>
- )
- }
- export default ReplyBar
|