You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
241 lines
8.4 KiB
241 lines
8.4 KiB
import React, { Component } from 'react'; |
|
import ReactAudioPlayer from 'react-audio-player'; |
|
import ReactPlayer from 'react-player'; |
|
import CloudDownloadIcon from '@material-ui/icons/CloudDownload'; |
|
import Avatar from '@material-ui/core/Avatar'; |
|
import moment from 'jalali-moment'; |
|
import DoneIcon from '@material-ui/icons/Done'; |
|
import DoneAllIcon from '@material-ui/icons/DoneAll'; |
|
import EditIcon from '@material-ui/icons/Edit'; |
|
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; |
|
import './index.scss'; |
|
import Menu from '@material-ui/core/Menu'; |
|
import MenuItem from '@material-ui/core/MenuItem'; |
|
import ReplyIcon from '@material-ui/icons/Reply'; |
|
import ForwardIcon from '@material-ui/icons/Forward'; |
|
import DeleteIcon from '@material-ui/icons/Delete'; |
|
import FavoriteIcon from '@material-ui/icons/Favorite'; |
|
import TextsmsIcon from '@material-ui/icons/Textsms'; |
|
import ScheduleIcon from '@material-ui/icons/Schedule'; |
|
const file = (fileId) => `${window.baseURL}/file/download/${fileId}`; |
|
const menu = [ |
|
{ text: 'پسند', icon: FavoriteIcon, onClick: () => {} }, |
|
{ text: 'تبادل نظر', icon: TextsmsIcon, onClick: () => {} }, |
|
{ text: 'پاسخ', icon: ReplyIcon, onClick: () => {} }, |
|
{ text: 'باز ارسال', icon: ForwardIcon, onClick: () => {} }, |
|
]; |
|
const selfMenu = [ |
|
{ text: 'باز ارسال', icon: ForwardIcon, onClick: () => {} }, |
|
{ text: 'ویرایش', icon: EditIcon, onClick: () => {} }, |
|
{ text: 'حذف', icon: DeleteIcon, onClick: () => {} }, |
|
]; |
|
export default class NormalMessage extends Component { |
|
state = { messageMenu: null }; |
|
handleClose = () => { |
|
this.setState({ |
|
messageMenu: null, |
|
}); |
|
}; |
|
handleClick = (event) => { |
|
this.setState({ |
|
messageMenu: event.currentTarget, |
|
}); |
|
}; |
|
render() { |
|
const { message, user, document, isSelf, prevUserId, children } = this.props; |
|
const { messageMenu } = this.state; |
|
const hasavatar = prevUserId != message.userId; |
|
|
|
return ( |
|
<div |
|
className="normal-message d-flex flex-column d-flex" |
|
style={{ |
|
filter: document !== null ? 'blur(16px)' : 'blur(0px)', |
|
}} |
|
> |
|
{hasavatar && ( |
|
<Avatar |
|
alt={user.name} |
|
src={window.baseURL + '/file/download/' + user.fileId} |
|
className="" |
|
style={{ |
|
marginTop: -5, |
|
backgroundColor: user.color, |
|
alignSelf: isSelf ? 'flex-end' : 'flex-start', |
|
}} |
|
> |
|
{user.name |
|
.split(' ') |
|
.map((e) => e.slice(0, 1)) |
|
.join(' ')} |
|
</Avatar> |
|
)} |
|
|
|
<div |
|
className="d-flex" |
|
style={{ direction: isSelf ? 'rtl' : 'ltr', marginTop: hasavatar ? -15 : 0 }} |
|
> |
|
<div |
|
className={ |
|
message.type == 'text' |
|
? `normal-message__box ` |
|
: `normal-message__box normal-message__box--file` |
|
} |
|
style={{ |
|
paddingTop: hasavatar ? 25 : 15, |
|
backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white', |
|
width: 'calc(100%-70px)', |
|
}} |
|
> |
|
<div |
|
className="normal-message__box--detail d-flex" |
|
style={{ |
|
top: 0, |
|
|
|
direction: isSelf ? 'ltr' : 'rtl', |
|
paddingRight: isSelf ? 70 : 0, |
|
paddingLeft: isSelf ? 0 : 70, |
|
}} |
|
> |
|
<div style={{ color: isSelf ? '#aaa' : 'gray' }}> |
|
<ExpandMoreIcon fontSize="small" onClick={this.handleClick} /> |
|
</div> |
|
<Menu |
|
anchorEl={messageMenu} |
|
keepMounted |
|
open={Boolean(messageMenu)} |
|
onClose={() => this.handleClose()} |
|
className="rtl fontLight" |
|
> |
|
{(isSelf ? selfMenu : menu).map((e) => ( |
|
<MenuItem |
|
className="fontLight" |
|
onClick={() => { |
|
this.handleClose(); |
|
e.onClick(); |
|
}} |
|
> |
|
<e.icon fontSize="samall" /> |
|
{e.text} |
|
</MenuItem> |
|
))} |
|
</Menu> |
|
{hasavatar && <div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</div>} |
|
</div> |
|
|
|
{message.type == 'text' ? ( |
|
<p style={{ color: isSelf ? 'white' : 'black' }}>{message.text}</p> |
|
) : null} |
|
{message.type == 'voice' ? ( |
|
<ReactAudioPlayer src={file(message.fileId)} controls /> |
|
) : null} |
|
{message.type == 'image' ? ( |
|
<div className="normal-message__box--caption"> |
|
<a href={file(message.fileId)} download> |
|
<img src={file(message.fileId)} download alt="" /> |
|
</a> |
|
<p style={{ color: isSelf ? 'white' : 'black' }}>{message.text}</p> |
|
</div> |
|
) : null} |
|
{message.type == 'video' ? ( |
|
<div className="normal-message__box--caption"> |
|
<a href={file(message.fileId)} download> |
|
<ReactPlayer url={file(message.fileId)} controls width={'100%'} height={250} /> |
|
</a> |
|
<p style={{ color: isSelf ? 'white' : 'black' }}>{message.text}</p> |
|
</div> |
|
) : null} |
|
{message.type == 'audio' ? ( |
|
<div className="normal-message__box--caption"> |
|
<ReactAudioPlayer src={file(message.fileId)} controls /> |
|
<p style={{ color: isSelf ? 'white' : 'black' }}>{message.text}</p> |
|
</div> |
|
) : null} |
|
{message.type == 'document' ? ( |
|
<a |
|
href={file(message.fileId)} |
|
download |
|
className="normal-message__box--document d-flex" |
|
style={{ |
|
backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white', |
|
color: isSelf ? 'white' : 'black', |
|
}} |
|
> |
|
<CloudDownloadIcon |
|
style={{ |
|
color: isSelf ? 'white' : 'black', |
|
width: 32, |
|
height: 32, |
|
marginRight: 10, |
|
}} |
|
/> |
|
<div>{message.text}</div> |
|
</a> |
|
) : null} |
|
|
|
<div className={'normal-message__box--date d-flex ' + (isSelf ? 'self' : '')}> |
|
<span style={{ color: isSelf ? '#aaa' : 'gray' }}> |
|
{message.updatedAt != message.createdAt ? ( |
|
<> |
|
<span> ویرایش در</span> |
|
|
|
{moment(message.updatedAt).format(' hh:mm jMM/jDD')} |
|
</> |
|
) : ( |
|
moment(message.createdAt).format('hh:mm') |
|
)} |
|
</span> |
|
<span |
|
style={{ |
|
color: isSelf ? '#aaa' : 'gray', |
|
padding: '0 2px', |
|
}} |
|
> |
|
{isSelf && message.status == 0 && <ScheduleIcon fontSize="small" />} |
|
{isSelf && message.status == 1 && <DoneIcon fontSize="small" />} |
|
{isSelf && message.status == 2 && <DoneAllIcon fontSize="small" />} |
|
</span> |
|
</div> |
|
</div> |
|
|
|
<div className={isSelf ? 'icons self' : 'icons'}> |
|
{!isSelf ? ( |
|
<> |
|
{' '} |
|
<div> |
|
<FavoriteIcon fontSize="samall" color="primary" /> |
|
<span> {10}</span> |
|
</div> |
|
<div> |
|
<TextsmsIcon fontSize="samall" color="secondary" /> |
|
<span> {10}</span> |
|
</div> |
|
</> |
|
) : ( |
|
<> |
|
<div> |
|
<span> |
|
+5 |
|
<br /> |
|
خلاقیت |
|
</span> |
|
</div> |
|
</> |
|
)} |
|
</div> |
|
</div> |
|
<div |
|
className="f-flex keys" |
|
style={{ |
|
width: 'calc(100% - 70px)', |
|
marginRight: isSelf ? 0 : 70, |
|
marginLeft: isSelf ? 70 : 0, |
|
alignSelf: isSelf ? 'flex-end' : 'flex-start', |
|
}} |
|
> |
|
{children} |
|
</div> |
|
</div> |
|
); |
|
} |
|
}
|
|
|