1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- 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 { 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
- },
- });
- 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 }}/>
- </MenuItem>
- </ul>
- <CloseIcon onClick={handleCloseForward} className={classes.forwardIconClose} />
- </div>
- )
- }
- export default ForwardBar
|