123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- import { DropMediaList, MediaBox, MediaModalHeader } from "../MessageMediaModal/MessageMediaModal.style"
- import { MessageEditorMediaFooter, MessageEditorMediaModalWrapper } from "./MessageEditorMediaModal.style"
- import SimpleBar from 'simplebar-react';
- import 'simplebar/dist/simplebar.min.css';
- import { MemoizedDropMediaItem } from "../DropMediaItem/DropMediaItem";
- import { Button, TextField } from "@mui/material";
- import { actionSendMessage } from "../../actions/actionsMessages";
- import { actionDeleteDropMedia, actionSetInputMessageValue, actionSetMessageEditor } from "../../reducers/chatReducer";
- import { useEffect } from "react";
- import { connect } from "react-redux";
- const MessageEditorMediaModal = ({chats, handleClose, deleteMessageEditor, open, chatId, sendMessage, setInputValue, deleteMedia}) => {
- const media = chats[chatId].draft?.media || [];
- const inputValue = chats[chatId].draft?.messageEditor?.value || '';
- const messageId = chats[chatId].draft?.messageEditor?.message?._id;
- useEffect(() => {
- open || deleteMedia(chatId);
- open || deleteMessageEditor(chatId, null);
- }, [open])
- return (
- <MessageEditorMediaModalWrapper>
- <MediaModalHeader>Edit message</MediaModalHeader>
- <MediaBox>
- <SimpleBar style={{ maxHeight: '400px'}}>
- <DropMediaList>
- {media.map((item) => <MemoizedDropMediaItem key={item.uploadDate} chatId={chatId} mediaItem={item}/>)}
- </DropMediaList>
- </SimpleBar>
- </MediaBox>
- <TextField
- maxRows={7}
- multiline
- sx={{width: "100%", mt: "30px"}}
- variant="standard"
- label="Caption"
- onChange = {(e) => setInputValue(chatId, e.target.value, 'messageEditor')}
- value={inputValue}
- />
- <MessageEditorMediaFooter>
- <Button variant="text" onClick={handleClose}>Cancel</Button>
- <Button
- variant="text"
- onClick={
- async () => {
- let val = await sendMessage(messageId, chatId, inputValue.replace(/^\s+|\s+$/g, ''), media, null, null);
- val && setInputValue(chatId, "", 'messageEditor'); handleClose();
- }
- }
- >Send</Button>
- </MessageEditorMediaFooter>
- </MessageEditorMediaModalWrapper>
- )
- }
- export default connect(state => ({
- chats: state.chats
- }),
- {
- deleteMedia: actionDeleteDropMedia,
- deleteMessageEditor: actionSetMessageEditor,
- sendMessage: actionSendMessage,
- setInputValue: actionSetInputMessageValue,
- })(MessageEditorMediaModal);
|