1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- import { makeStyles } from "@material-ui/core/styles";
- import CloseIcon from '@mui/icons-material/Close';
- import EditIcon from '@mui/icons-material/Edit';
- import ListItemText from '@mui/material/ListItemText';
- import { TMessage } from "../../../../../../typescript/redux/messages/types";
- const useStyles = makeStyles({
- editTop : {
- 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,
- },
- editListWrapper: {
- width: '100%',
- wordBreak: 'break-word',
- overflowY: "auto",
- height: '6vh',
- },
- editIconClose: {
- cursor: 'pointer',
- marginLeft: 5,
- marginRight: 5,
- '&:hover': {
- color:'#f02a2a',
- transform: 'rotate(180deg)',
- transition: 'all 250ms ease-out ',
- }
- },
- editColumn: {
- height: '80%',
- width: 2,
- backgroundColor: 'rgb(41, 139, 231)',
- marginRight:10
- },
- });
- interface IEditBar {
- isEdit:TMessage,
- handleCloseEdit: () => void,
- handleScrollToTheMessage:(_id:string) => void
- }
- const EditBar = ({ isEdit, handleCloseEdit,handleScrollToTheMessage }: IEditBar) => {
- const classes = useStyles();
-
- return (
- <div className={classes.editTop}>
- <EditIcon style={{margin:'0px 7px',color: "rgb(41, 139, 231)"}}/>
- <div className={classes.editColumn}></div>
- <ul className={classes.editListWrapper}>
- <li onClick={() => handleScrollToTheMessage(isEdit._id)}>
- <ListItemText
- primary={`Edit ${isEdit.type === 'text'?'Message and Caption':'only Caption'}`}
- primaryTypographyProps={{ color: "rgb(41, 139, 231)",fontSize:16 }}
- secondary={isEdit.type === 'text' ? `Message: ${isEdit.message} , Caption: ${isEdit.caption}`:`Caption: ${isEdit.caption}`}
- secondaryTypographyProps={{ fontSize: 16}} />
- </li>
- </ul>
- <CloseIcon onClick={handleCloseEdit} className={classes.editIconClose} />
- </div>
- )
- }
- export default EditBar
|