123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- import ReactTimeAgo from 'react-time-ago'
- import TimeAgo from 'javascript-time-ago'
- import ru from 'javascript-time-ago/locale/ru.json'
- import { useCallback, useState, useEffect, useRef } from 'react'
- import { ListItem, Menu, MenuItem } from '@mui/material'
- TimeAgo.addLocale(ru)
- export const ShortMessage = ({ nick, text, date }) => {
- return (
- <>
- <div className="msg-short">
- <span className="msg-nick">Ответ на сообщение {nick}</span>
- <span className="msg-text">{text}</span>
- <ReactTimeAgo className="msg-date" date={+date} locale="ru" timeStyle="twitter" />
- </div>
- </>
- )
- }
- export const Message = ({ id, nick, msg, date, media, own = false, replyTo, onMSGEdit, onMSGReply, onMSGForward }) => {
- let [isEdit, setIsEdit] = useState(false)
- let [messageEdit, setMessageEdit] = useState("" || msg)
- const [contextMenu, setContextMenu] = useState(null);
- const handleContextMenu = (event) => {
- event.preventDefault();
- setContextMenu(
- contextMenu === null
- ? {
- mouseX: event.clientX - 2,
- mouseY: event.clientY - 4,
- }
- : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
- // Other native context menus might behave different.
- // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
- null,
- );
- };
- const handleClose = (e, type, msg_id) => {
- if (type === "edit") {
- setIsEdit(true)
- }
- if (type === "reply") {
- onMSGReply([true, msg_id])
- }
- if (type === "forward") {
- alert("Сорян пока не работает)")
- // onMSGForward([true, ""])
- }
- setContextMenu(null);
- };
- let msgEditHandler = () => {
- setIsEdit(false)
- onMSGEdit(id, messageEdit)
- }
- return (
- <li className={own ? "msg-user" : "msg-someone"} onContextMenu={handleContextMenu} >
- <Menu
- open={contextMenu !== null}
- onClose={handleClose}
- anchorReference="anchorPosition"
- anchorPosition={
- contextMenu !== null
- ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
- : undefined
- }
- >
- <MenuItem onClick={e => handleClose(e, "reply", id)}>Ответить</MenuItem>
- <MenuItem onClick={e => handleClose(e, "forward", id)}>Переслать</MenuItem>
- <MenuItem onClick={e => handleClose(e, "edit", id)}>Редактировать</MenuItem>
- </Menu>
- {/* <ContextMenu message={id} element={el.current} owner={own} onEdit={setIsEdit} onForwardTo={onMSGForward} onReplyTo={onMSGReply} /> */}
- {replyTo && <div className="msg-reply">В ответ на сообщение: {replyTo.text}</div>}
- <div className="msg">
- <span className="msg-nick">{nick}</span>
- {isEdit ?
- <>
- <input value={messageEdit} onChange={(e) => setMessageEdit(e.target.value)} />
- <button onClick={() => msgEditHandler()} >Сохранить изменения</button>
- </> :
- <span className="msg-text">{msg}</span>}
- <ReactTimeAgo className="msg-date" date={+date} locale="ru" timeStyle="round" />
- {media && media.length > 0 &&
- <ul className="msg-media">
- {media.map(file => {
- return (<li key={file.url}>
- {file.type && file.type.includes("audio") &&
- <audio className="msg-media-audio" preload="metadata" controls>
- <source src={"/" + file.url} type={file.type} />
- <a href={"/" + file.url}>Скачать</a>
- </audio>
- }
- {
- file.type && file.type.includes("image") &&
- <img className="msg-media-img" src={"/" + file.url} alt="media" />
- }
- {
- file.type && file.type.includes("video") &&
- <video className="msg-media-video" preload="metadata" controls>
- <source src={"/" + file.url} type={file.type} />
- <a href={"/" + file.url}>Скачать</a>
- </video>
- }
- </li>)
- })}
- </ul>}
- </div>
- </li>
- )
- }
|