|
|
|
@ -1,33 +1,33 @@ |
|
|
|
import React, { Component } from 'react'; |
|
|
|
import React, { Component } from "react"; |
|
|
|
import ReactAudioPlayer from 'react-audio-player'; |
|
|
|
import ReactAudioPlayer from "react-audio-player"; |
|
|
|
import ReactPlayer from 'react-player'; |
|
|
|
import ReactPlayer from "react-player"; |
|
|
|
import CloudDownloadIcon from '@material-ui/icons/CloudDownload'; |
|
|
|
import CloudDownloadIcon from "@material-ui/icons/CloudDownload"; |
|
|
|
import Avatar from '@material-ui/core/Avatar'; |
|
|
|
import Avatar from "@material-ui/core/Avatar"; |
|
|
|
import moment from 'jalali-moment'; |
|
|
|
import moment from "jalali-moment"; |
|
|
|
import DoneIcon from '@material-ui/icons/Done'; |
|
|
|
import DoneIcon from "@material-ui/icons/Done"; |
|
|
|
import DoneAllIcon from '@material-ui/icons/DoneAll'; |
|
|
|
import DoneAllIcon from "@material-ui/icons/DoneAll"; |
|
|
|
import EditIcon from '@material-ui/icons/Edit'; |
|
|
|
import EditIcon from "@material-ui/icons/Edit"; |
|
|
|
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; |
|
|
|
import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; |
|
|
|
import './index.scss'; |
|
|
|
import "./index.scss"; |
|
|
|
import Menu from '@material-ui/core/Menu'; |
|
|
|
import Menu from "@material-ui/core/Menu"; |
|
|
|
import MenuItem from '@material-ui/core/MenuItem'; |
|
|
|
import MenuItem from "@material-ui/core/MenuItem"; |
|
|
|
import ReplyIcon from '@material-ui/icons/Reply'; |
|
|
|
import ReplyIcon from "@material-ui/icons/Reply"; |
|
|
|
import ForwardIcon from '@material-ui/icons/Forward'; |
|
|
|
import ForwardIcon from "@material-ui/icons/Forward"; |
|
|
|
import DeleteIcon from '@material-ui/icons/Delete'; |
|
|
|
import DeleteIcon from "@material-ui/icons/Delete"; |
|
|
|
import FavoriteIcon from '@material-ui/icons/Favorite'; |
|
|
|
import FavoriteIcon from "@material-ui/icons/Favorite"; |
|
|
|
import TextsmsIcon from '@material-ui/icons/Textsms'; |
|
|
|
import TextsmsIcon from "@material-ui/icons/Textsms"; |
|
|
|
import ScheduleIcon from '@material-ui/icons/Schedule'; |
|
|
|
import ScheduleIcon from "@material-ui/icons/Schedule"; |
|
|
|
const file = (fileId) => `${window.baseURL}/file/download/${fileId}`; |
|
|
|
const file = (fileId) => `${window.baseURL}/file/download/${fileId}`; |
|
|
|
const menu = [ |
|
|
|
const menu = [ |
|
|
|
{ text: 'پسند', icon: FavoriteIcon, onClick: () => {} }, |
|
|
|
{ text: "پسند", icon: FavoriteIcon, onClick: () => {} }, |
|
|
|
{ text: 'تبادل نظر', icon: TextsmsIcon, onClick: () => {} }, |
|
|
|
{ text: "تبادل نظر", icon: TextsmsIcon, onClick: () => {} }, |
|
|
|
{ text: 'پاسخ', icon: ReplyIcon, onClick: () => {} }, |
|
|
|
{ text: "پاسخ", icon: ReplyIcon, onClick: () => {} }, |
|
|
|
{ text: 'باز ارسال', icon: ForwardIcon, onClick: () => {} }, |
|
|
|
{ text: "باز ارسال", icon: ForwardIcon, onClick: () => {} }, |
|
|
|
]; |
|
|
|
]; |
|
|
|
const selfMenu = [ |
|
|
|
const selfMenu = [ |
|
|
|
{ text: 'باز ارسال', icon: ForwardIcon, onClick: () => {} }, |
|
|
|
{ text: "باز ارسال", icon: ForwardIcon, onClick: () => {} }, |
|
|
|
{ text: 'ویرایش', icon: EditIcon, onClick: () => {} }, |
|
|
|
{ text: "ویرایش", icon: EditIcon, onClick: () => {} }, |
|
|
|
{ text: 'حذف', icon: DeleteIcon, onClick: () => {} }, |
|
|
|
{ text: "حذف", icon: DeleteIcon, onClick: () => {} }, |
|
|
|
]; |
|
|
|
]; |
|
|
|
export default class NormalMessage extends Component { |
|
|
|
export default class NormalMessage extends Component { |
|
|
|
state = { messageMenu: null }; |
|
|
|
state = { messageMenu: null }; |
|
|
|
@ -42,7 +42,15 @@ export default class NormalMessage extends Component { |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
render() { |
|
|
|
render() { |
|
|
|
const { message, user, document, isSelf, prevUserId, children,addcounter } = this.props; |
|
|
|
const { |
|
|
|
|
|
|
|
message, |
|
|
|
|
|
|
|
user, |
|
|
|
|
|
|
|
document, |
|
|
|
|
|
|
|
isSelf, |
|
|
|
|
|
|
|
prevUserId, |
|
|
|
|
|
|
|
children, |
|
|
|
|
|
|
|
addcounter, |
|
|
|
|
|
|
|
} = this.props; |
|
|
|
const { messageMenu } = this.state; |
|
|
|
const { messageMenu } = this.state; |
|
|
|
const hasavatar = prevUserId != message.userId; |
|
|
|
const hasavatar = prevUserId != message.userId; |
|
|
|
|
|
|
|
|
|
|
|
@ -50,41 +58,44 @@ export default class NormalMessage extends Component { |
|
|
|
<div |
|
|
|
<div |
|
|
|
className="normal-message d-flex flex-column d-flex" |
|
|
|
className="normal-message d-flex flex-column d-flex" |
|
|
|
style={{ |
|
|
|
style={{ |
|
|
|
filter: document !== null ? 'blur(16px)' : 'blur(0px)', |
|
|
|
filter: document !== null ? "blur(4px)" : "blur(0px)", |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
{hasavatar && false && ( |
|
|
|
{hasavatar && false && ( |
|
|
|
<Avatar |
|
|
|
<Avatar |
|
|
|
alt={user.name} |
|
|
|
alt={user.name} |
|
|
|
src={window.baseURL + '/file/download/' + user.fileId} |
|
|
|
src={window.baseURL + "/file/download/" + user.fileId} |
|
|
|
className="" |
|
|
|
className="" |
|
|
|
style={{ |
|
|
|
style={{ |
|
|
|
marginTop: -5, |
|
|
|
marginTop: -5, |
|
|
|
backgroundColor: user.color, |
|
|
|
backgroundColor: user.color, |
|
|
|
alignSelf: isSelf ? 'flex-end' : 'flex-start', |
|
|
|
alignSelf: isSelf ? "flex-end" : "flex-start", |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
{user.name |
|
|
|
{user.name |
|
|
|
.split(' ') |
|
|
|
.split(" ") |
|
|
|
.map((e) => e.slice(0, 1)) |
|
|
|
.map((e) => e.slice(0, 1)) |
|
|
|
.join(' ')} |
|
|
|
.join(" ")} |
|
|
|
</Avatar> |
|
|
|
</Avatar> |
|
|
|
)} |
|
|
|
)} |
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
<div |
|
|
|
className="d-flex" |
|
|
|
className="d-flex" |
|
|
|
style={{ direction: isSelf ? 'rtl' : 'ltr', marginTop: hasavatar ? 0 : 0 }} |
|
|
|
style={{ |
|
|
|
|
|
|
|
direction: isSelf ? "rtl" : "ltr", |
|
|
|
|
|
|
|
marginTop: hasavatar ? 0 : 0, |
|
|
|
|
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
<div |
|
|
|
<div |
|
|
|
className={ |
|
|
|
className={ |
|
|
|
message.type == 'text' |
|
|
|
message.type == "text" |
|
|
|
? `normal-message__box ` |
|
|
|
? `normal-message__box ` |
|
|
|
: `normal-message__box normal-message__box--file` |
|
|
|
: `normal-message__box normal-message__box--file` |
|
|
|
} |
|
|
|
} |
|
|
|
style={{ |
|
|
|
style={{ |
|
|
|
paddingTop: hasavatar ? 25 : 15, |
|
|
|
paddingTop: hasavatar ? 25 : 15, |
|
|
|
backgroundColor: isSelf ? 'white' : 'rgb(220, 248, 198)', |
|
|
|
backgroundColor: isSelf ? "white" : "rgb(220, 248, 198)", |
|
|
|
width: 'calc(100%-70px)', |
|
|
|
width: "calc(100%-70px)", |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
<div |
|
|
|
<div |
|
|
|
@ -92,12 +103,15 @@ export default class NormalMessage extends Component { |
|
|
|
style={{ |
|
|
|
style={{ |
|
|
|
top: 0, |
|
|
|
top: 0, |
|
|
|
|
|
|
|
|
|
|
|
direction: isSelf ? 'ltr' : 'rtl', |
|
|
|
direction: isSelf ? "ltr" : "rtl", |
|
|
|
paddingRight: isSelf ? 20 : 20, |
|
|
|
paddingRight: isSelf ? 20 : 20, |
|
|
|
paddingLeft: isSelf ? 0 : 0, |
|
|
|
paddingLeft: isSelf ? 0 : 0, |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
<div style={{ color: isSelf ? '#aaa' : 'gray' }} onClick={() => addcounter('nothing')}> |
|
|
|
<div |
|
|
|
|
|
|
|
style={{ color: isSelf ? "#aaa" : "gray" }} |
|
|
|
|
|
|
|
onClick={() => addcounter("nothing")} |
|
|
|
|
|
|
|
> |
|
|
|
<ExpandMoreIcon fontSize="small" onClick={this.handleClick} /> |
|
|
|
<ExpandMoreIcon fontSize="small" onClick={this.handleClick} /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Menu |
|
|
|
<Menu |
|
|
|
@ -113,7 +127,7 @@ export default class NormalMessage extends Component { |
|
|
|
onClick={() => { |
|
|
|
onClick={() => { |
|
|
|
this.handleClose(); |
|
|
|
this.handleClose(); |
|
|
|
e.onClick(); |
|
|
|
e.onClick(); |
|
|
|
addcounter('nothing'); |
|
|
|
addcounter("nothing"); |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
{e.text} |
|
|
|
{e.text} |
|
|
|
@ -121,50 +135,67 @@ export default class NormalMessage extends Component { |
|
|
|
</MenuItem> |
|
|
|
</MenuItem> |
|
|
|
))} |
|
|
|
))} |
|
|
|
</Menu> |
|
|
|
</Menu> |
|
|
|
{hasavatar && <div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</div>} |
|
|
|
{hasavatar && ( |
|
|
|
|
|
|
|
<div style={{ color: isSelf ? "#aaa" : "gray" }}> |
|
|
|
|
|
|
|
{user.name} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
)} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
{message.type == 'text' ? ( |
|
|
|
{message.type == "text" ? ( |
|
|
|
<p style={{ color: isSelf ? 'black' : 'black' }}>{message.text}</p> |
|
|
|
<p style={{ color: isSelf ? "black" : "black" }}> |
|
|
|
|
|
|
|
{message.text} |
|
|
|
|
|
|
|
</p> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
{message.type == 'voice' ? ( |
|
|
|
{message.type == "voice" ? ( |
|
|
|
<ReactAudioPlayer src={file(message.fileId)} controls /> |
|
|
|
<ReactAudioPlayer src={file(message.fileId)} controls /> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
{message.type == 'image' ? ( |
|
|
|
{message.type == "image" ? ( |
|
|
|
<div className="normal-message__box--caption"> |
|
|
|
<div className="normal-message__box--caption"> |
|
|
|
<a href={file(message.fileId)} download> |
|
|
|
<a href={file(message.fileId)} download> |
|
|
|
<img src={file(message.fileId)} download alt="" /> |
|
|
|
<img src={file(message.fileId)} download alt="" /> |
|
|
|
</a> |
|
|
|
</a> |
|
|
|
<p style={{ color: isSelf ? 'black' : 'black' }}>{message.text}</p> |
|
|
|
<p style={{ color: isSelf ? "black" : "black" }}> |
|
|
|
|
|
|
|
{message.text} |
|
|
|
|
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
{message.type == 'video' ? ( |
|
|
|
{message.type == "video" ? ( |
|
|
|
<div className="normal-message__box--caption"> |
|
|
|
<div className="normal-message__box--caption"> |
|
|
|
<a href={file(message.fileId)} download> |
|
|
|
<a href={file(message.fileId)} download> |
|
|
|
<ReactPlayer url={file(message.fileId)} controls width={'100%'} height={250} /> |
|
|
|
<ReactPlayer |
|
|
|
|
|
|
|
url={file(message.fileId)} |
|
|
|
|
|
|
|
controls |
|
|
|
|
|
|
|
width={"100%"} |
|
|
|
|
|
|
|
height={250} |
|
|
|
|
|
|
|
/> |
|
|
|
</a> |
|
|
|
</a> |
|
|
|
<p style={{ color: isSelf ? 'black' : 'black' }}>{message.text}</p> |
|
|
|
<p style={{ color: isSelf ? "black" : "black" }}> |
|
|
|
|
|
|
|
{message.text} |
|
|
|
|
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
{message.type == 'audio' ? ( |
|
|
|
{message.type == "audio" ? ( |
|
|
|
<div className="normal-message__box--caption"> |
|
|
|
<div className="normal-message__box--caption"> |
|
|
|
<ReactAudioPlayer src={file(message.fileId)} controls /> |
|
|
|
<ReactAudioPlayer src={file(message.fileId)} controls /> |
|
|
|
<p style={{ color: isSelf ? 'black' : 'black' }}>{message.text}</p> |
|
|
|
<p style={{ color: isSelf ? "black" : "black" }}> |
|
|
|
|
|
|
|
{message.text} |
|
|
|
|
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
{message.type == 'document' ? ( |
|
|
|
{message.type == "document" ? ( |
|
|
|
<a |
|
|
|
<a |
|
|
|
href={file(message.fileId)} |
|
|
|
href={file(message.fileId)} |
|
|
|
download |
|
|
|
download |
|
|
|
className="normal-message__box--document d-flex" |
|
|
|
className="normal-message__box--document d-flex" |
|
|
|
style={{ |
|
|
|
style={{ |
|
|
|
backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white', |
|
|
|
backgroundColor: isSelf ? "rgb(15, 93, 190)" : "white", |
|
|
|
color: isSelf ? 'black' : 'black', |
|
|
|
color: isSelf ? "black" : "black", |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
<CloudDownloadIcon |
|
|
|
<CloudDownloadIcon |
|
|
|
style={{ |
|
|
|
style={{ |
|
|
|
color: isSelf ? 'black' : 'black', |
|
|
|
color: isSelf ? "black" : "black", |
|
|
|
width: 32, |
|
|
|
width: 32, |
|
|
|
height: 32, |
|
|
|
height: 32, |
|
|
|
marginRight: 10, |
|
|
|
marginRight: 10, |
|
|
|
@ -174,41 +205,52 @@ export default class NormalMessage extends Component { |
|
|
|
</a> |
|
|
|
</a> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
|
|
|
|
|
|
|
|
<div className={'normal-message__box--date d-flex ' + (isSelf ? 'self' : '')}> |
|
|
|
<div |
|
|
|
<span style={{ color: isSelf ? '#aaa' : 'gray' }}> |
|
|
|
className={ |
|
|
|
|
|
|
|
"normal-message__box--date d-flex " + (isSelf ? "self" : "") |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<span style={{ color: isSelf ? "#aaa" : "gray" }}> |
|
|
|
{message.updatedAt != message.createdAt ? ( |
|
|
|
{message.updatedAt != message.createdAt ? ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<span> ویرایش در</span> |
|
|
|
<span> ویرایش در</span> |
|
|
|
|
|
|
|
|
|
|
|
{moment(message.updatedAt).format(' hh:mm jMM/jDD')} |
|
|
|
{moment(message.updatedAt).format(" hh:mm jMM/jDD")} |
|
|
|
</> |
|
|
|
</> |
|
|
|
) : ( |
|
|
|
) : ( |
|
|
|
moment(message.createdAt).format('hh:mm') |
|
|
|
moment(message.createdAt).format("hh:mm") |
|
|
|
)} |
|
|
|
)} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<span |
|
|
|
<span |
|
|
|
style={{ |
|
|
|
style={{ |
|
|
|
color: isSelf ? '#aaa' : 'gray', |
|
|
|
color: isSelf ? "#aaa" : "gray", |
|
|
|
padding: '0 2px', |
|
|
|
padding: "0 2px", |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
{isSelf && message.status == 0 && <ScheduleIcon fontSize="small" />} |
|
|
|
{isSelf && message.status == 0 && ( |
|
|
|
|
|
|
|
<ScheduleIcon fontSize="small" /> |
|
|
|
|
|
|
|
)} |
|
|
|
{isSelf && message.status == 2 && <DoneIcon fontSize="small" />} |
|
|
|
{isSelf && message.status == 2 && <DoneIcon fontSize="small" />} |
|
|
|
{isSelf && message.status == 1 && ( |
|
|
|
{isSelf && message.status == 1 && ( |
|
|
|
<DoneAllIcon fontSize="small" style={{ color: '#00afea', fontSize: '17px' }} /> |
|
|
|
<DoneAllIcon |
|
|
|
|
|
|
|
fontSize="small" |
|
|
|
|
|
|
|
style={{ color: "#00afea", fontSize: "17px" }} |
|
|
|
|
|
|
|
/> |
|
|
|
)} |
|
|
|
)} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div className={isSelf ? 'icons self' : 'icons'} onClick={() => addcounter('nothing')}> |
|
|
|
<div |
|
|
|
|
|
|
|
className={isSelf ? "icons self" : "icons"} |
|
|
|
|
|
|
|
onClick={() => addcounter("nothing")} |
|
|
|
|
|
|
|
> |
|
|
|
{!isSelf ? ( |
|
|
|
{!isSelf ? ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
{' '} |
|
|
|
{" "} |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<span> {10}</span> |
|
|
|
<span> {10}</span> |
|
|
|
<FavoriteIcon fontSize="samall" color="primary" /> |
|
|
|
<FavoriteIcon fontSize="samall" color="primary" /> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<span> {10}</span> |
|
|
|
<span> {10}</span> |
|
|
|
@ -231,10 +273,10 @@ export default class NormalMessage extends Component { |
|
|
|
<div |
|
|
|
<div |
|
|
|
className="f-flex keys" |
|
|
|
className="f-flex keys" |
|
|
|
style={{ |
|
|
|
style={{ |
|
|
|
width: 'calc(100% - 70px)', |
|
|
|
width: "calc(100% - 70px)", |
|
|
|
marginRight: isSelf ? 0 : 70, |
|
|
|
marginRight: isSelf ? 0 : 70, |
|
|
|
marginLeft: isSelf ? 70 : 0, |
|
|
|
marginLeft: isSelf ? 70 : 0, |
|
|
|
alignSelf: isSelf ? 'flex-end' : 'flex-start', |
|
|
|
alignSelf: isSelf ? "flex-end" : "flex-start", |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
{children} |
|
|
|
{children} |
|
|
|
|
Gorji
3 years ago
