|  |  |  | @ -9,19 +9,37 @@ import DoneAllIcon from '@material-ui/icons/DoneAll'; | 
			
		
	
		
			
				
					|  |  |  |  | import EditIcon from '@material-ui/icons/Edit'; | 
			
		
	
		
			
				
					|  |  |  |  | import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; | 
			
		
	
		
			
				
					|  |  |  |  | import './NormalMessage.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'; | 
			
		
	
		
			
				
					|  |  |  |  | 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 } = this.props; | 
			
		
	
		
			
				
					|  |  |  |  |     const { message, user, document, isSelf, prevUserId } = this.props; | 
			
		
	
		
			
				
					|  |  |  |  |     const { messageMenu } = this.state; | 
			
		
	
		
			
				
					|  |  |  |  |     const hasavatar = prevUserId != message.userId; | 
			
		
	
		
			
				
					|  |  |  |  |     return ( | 
			
		
	
		
			
				
					|  |  |  |  |       <div | 
			
		
	
		
			
				
					|  |  |  |  |         className="normal-message d-flex flex-column d-flex" | 
			
		
	
		
			
				
					|  |  |  |  |         style={{ | 
			
		
	
		
			
				
					|  |  |  |  |           marginRight: isSelf ? 0 : 70, | 
			
		
	
		
			
				
					|  |  |  |  |           marginLeft: isSelf ? 70 : 0, | 
			
		
	
		
			
				
					|  |  |  |  |           filter: document !== null ? 'blur(16px)' : 'blur(0px)', | 
			
		
	
		
			
				
					|  |  |  |  |         }} | 
			
		
	
		
			
				
					|  |  |  |  |       > | 
			
		
	
		
			
				
					|  |  |  |  |         {hasavatar && ( | 
			
		
	
		
			
				
					|  |  |  |  |           <Avatar | 
			
		
	
		
			
				
					|  |  |  |  |             alt={user.name} | 
			
		
	
		
			
				
					|  |  |  |  |             src={window.baseURL + '/file/download/' + user.fileId} | 
			
		
	
	
		
			
				
					|  |  |  | @ -33,11 +51,9 @@ export default class NormalMessage extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |               .map((e) => e.slice(0, 1)) | 
			
		
	
		
			
				
					|  |  |  |  |               .join(' ')} | 
			
		
	
		
			
				
					|  |  |  |  |           </Avatar> | 
			
		
	
		
			
				
					|  |  |  |  |         {/* <img | 
			
		
	
		
			
				
					|  |  |  |  |           src={window.baseURL + '/file/download/' + user.fileId} | 
			
		
	
		
			
				
					|  |  |  |  |           style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }} | 
			
		
	
		
			
				
					|  |  |  |  |           alt={message.id} | 
			
		
	
		
			
				
					|  |  |  |  |         /> */} | 
			
		
	
		
			
				
					|  |  |  |  |         )} | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |         <div className="d-flex" style={{ direction: isSelf ? 'rtl' : 'ltr' }}> | 
			
		
	
		
			
				
					|  |  |  |  |           <div | 
			
		
	
		
			
				
					|  |  |  |  |             className={ | 
			
		
	
		
			
				
					|  |  |  |  |               message.voice === null && | 
			
		
	
	
		
			
				
					|  |  |  | @ -45,10 +61,14 @@ export default class NormalMessage extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |               message.image === null && | 
			
		
	
		
			
				
					|  |  |  |  |               message.music === null && | 
			
		
	
		
			
				
					|  |  |  |  |               message.document === null | 
			
		
	
		
			
				
					|  |  |  |  |               ? `normal-message__box d-flex` | 
			
		
	
		
			
				
					|  |  |  |  |               : `normal-message__box d-flex normal-message__box--file` | 
			
		
	
		
			
				
					|  |  |  |  |                 ? `normal-message__box ` | 
			
		
	
		
			
				
					|  |  |  |  |                 : `normal-message__box  normal-message__box--file` | 
			
		
	
		
			
				
					|  |  |  |  |             } | 
			
		
	
		
			
				
					|  |  |  |  |           style={{ backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white' }} | 
			
		
	
		
			
				
					|  |  |  |  |             style={{ | 
			
		
	
		
			
				
					|  |  |  |  |               paddingTop: hasavatar ? 25 : 10, | 
			
		
	
		
			
				
					|  |  |  |  |               backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white', | 
			
		
	
		
			
				
					|  |  |  |  |               width: 'calc(100%-70px)', | 
			
		
	
		
			
				
					|  |  |  |  |             }} | 
			
		
	
		
			
				
					|  |  |  |  |           > | 
			
		
	
		
			
				
					|  |  |  |  |             {message.voice === null && | 
			
		
	
		
			
				
					|  |  |  |  |             message.video === null && | 
			
		
	
	
		
			
				
					|  |  |  | @ -61,14 +81,52 @@ export default class NormalMessage extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |                   top: 0, | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |                   direction: isSelf ? 'ltr' : 'rtl', | 
			
		
	
		
			
				
					|  |  |  |  |                 paddingRight: isSelf ? 60 : 0, | 
			
		
	
		
			
				
					|  |  |  |  |                 paddingLeft: isSelf ? 15 : 70, | 
			
		
	
		
			
				
					|  |  |  |  |                   paddingRight: isSelf ? 70 : 0, | 
			
		
	
		
			
				
					|  |  |  |  |                   paddingLeft: isSelf ? 0 : 70, | 
			
		
	
		
			
				
					|  |  |  |  |                 }} | 
			
		
	
		
			
				
					|  |  |  |  |               > | 
			
		
	
		
			
				
					|  |  |  |  |                 <div style={{ color: isSelf ? '#aaa' : 'gray' }}> | 
			
		
	
		
			
				
					|  |  |  |  |                 <ExpandMoreIcon fontSize="small" /> | 
			
		
	
		
			
				
					|  |  |  |  |                   <ExpandMoreIcon fontSize="small" onClick={this.handleClick} /> | 
			
		
	
		
			
				
					|  |  |  |  |                 </div> | 
			
		
	
		
			
				
					|  |  |  |  |               <div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</div> | 
			
		
	
		
			
				
					|  |  |  |  |                 <Menu | 
			
		
	
		
			
				
					|  |  |  |  |                   id="simple-menu" | 
			
		
	
		
			
				
					|  |  |  |  |                   anchorEl={messageMenu} | 
			
		
	
		
			
				
					|  |  |  |  |                   keepMounted | 
			
		
	
		
			
				
					|  |  |  |  |                   open={Boolean(messageMenu)} | 
			
		
	
		
			
				
					|  |  |  |  |                   onClose={() => this.handleClose()} | 
			
		
	
		
			
				
					|  |  |  |  |                   style={{ direction: 'rtl', fontFamily: 'IRANSansNumeralLight' }} | 
			
		
	
		
			
				
					|  |  |  |  |                 > | 
			
		
	
		
			
				
					|  |  |  |  |                   <MenuItem | 
			
		
	
		
			
				
					|  |  |  |  |                     style={{ fontFamily: 'IRANSansNumeralLight' }} | 
			
		
	
		
			
				
					|  |  |  |  |                     onClick={() => this.handleClose()} | 
			
		
	
		
			
				
					|  |  |  |  |                   > | 
			
		
	
		
			
				
					|  |  |  |  |                     <ReplyIcon fontSize="samall" /> | 
			
		
	
		
			
				
					|  |  |  |  |                     پاسخ | 
			
		
	
		
			
				
					|  |  |  |  |                   </MenuItem> | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |                   <MenuItem | 
			
		
	
		
			
				
					|  |  |  |  |                     style={{ fontFamily: 'IRANSansNumeralLight' }} | 
			
		
	
		
			
				
					|  |  |  |  |                     onClick={() => this.handleClose()} | 
			
		
	
		
			
				
					|  |  |  |  |                   > | 
			
		
	
		
			
				
					|  |  |  |  |                     <ForwardIcon fontSize="samall" /> | 
			
		
	
		
			
				
					|  |  |  |  |                     باز ارسال به | 
			
		
	
		
			
				
					|  |  |  |  |                   </MenuItem> | 
			
		
	
		
			
				
					|  |  |  |  |                   <MenuItem | 
			
		
	
		
			
				
					|  |  |  |  |                     style={{ fontFamily: 'IRANSansNumeralLight' }} | 
			
		
	
		
			
				
					|  |  |  |  |                     onClick={() => this.handleClose()} | 
			
		
	
		
			
				
					|  |  |  |  |                   > | 
			
		
	
		
			
				
					|  |  |  |  |                     <EditIcon fontSize="samall" /> | 
			
		
	
		
			
				
					|  |  |  |  |                     ویرایش | 
			
		
	
		
			
				
					|  |  |  |  |                   </MenuItem> | 
			
		
	
		
			
				
					|  |  |  |  |                   <MenuItem | 
			
		
	
		
			
				
					|  |  |  |  |                     style={{ fontFamily: 'IRANSansNumeralLight' }} | 
			
		
	
		
			
				
					|  |  |  |  |                     onClick={() => this.handleClose()} | 
			
		
	
		
			
				
					|  |  |  |  |                   > | 
			
		
	
		
			
				
					|  |  |  |  |                     <DeleteIcon fontSize="samall" /> | 
			
		
	
		
			
				
					|  |  |  |  |                     حذف | 
			
		
	
		
			
				
					|  |  |  |  |                   </MenuItem> | 
			
		
	
		
			
				
					|  |  |  |  |                 </Menu> | 
			
		
	
		
			
				
					|  |  |  |  |                 {hasavatar && <div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</div>} | 
			
		
	
		
			
				
					|  |  |  |  |               </div> | 
			
		
	
		
			
				
					|  |  |  |  |             ) : null} | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
	
		
			
				
					|  |  |  | @ -87,7 +145,12 @@ export default class NormalMessage extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |                 <a href={message.image} download> | 
			
		
	
		
			
				
					|  |  |  |  |                   <img src={message.image} download alt="" /> | 
			
		
	
		
			
				
					|  |  |  |  |                 </a> | 
			
		
	
		
			
				
					|  |  |  |  |               <p id="2" style={{ color: isSelf ? 'white' : 'black' }}> | 
			
		
	
		
			
				
					|  |  |  |  |                 <p | 
			
		
	
		
			
				
					|  |  |  |  |                   id="2" | 
			
		
	
		
			
				
					|  |  |  |  |                   style={{ | 
			
		
	
		
			
				
					|  |  |  |  |                     color: isSelf ? 'white' : 'black', | 
			
		
	
		
			
				
					|  |  |  |  |                   }} | 
			
		
	
		
			
				
					|  |  |  |  |                 > | 
			
		
	
		
			
				
					|  |  |  |  |                   {message.text} | 
			
		
	
		
			
				
					|  |  |  |  |                 </p> | 
			
		
	
		
			
				
					|  |  |  |  |               </div> | 
			
		
	
	
		
			
				
					|  |  |  | @ -97,7 +160,12 @@ export default class NormalMessage extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |                 <a href={message.video} download> | 
			
		
	
		
			
				
					|  |  |  |  |                   <ReactPlayer url={message.video} controls width={'100%'} height={250} /> | 
			
		
	
		
			
				
					|  |  |  |  |                 </a> | 
			
		
	
		
			
				
					|  |  |  |  |               <p id="1" style={{ color: isSelf ? 'white' : 'black' }}> | 
			
		
	
		
			
				
					|  |  |  |  |                 <p | 
			
		
	
		
			
				
					|  |  |  |  |                   id="1" | 
			
		
	
		
			
				
					|  |  |  |  |                   style={{ | 
			
		
	
		
			
				
					|  |  |  |  |                     color: isSelf ? 'white' : 'black', | 
			
		
	
		
			
				
					|  |  |  |  |                   }} | 
			
		
	
		
			
				
					|  |  |  |  |                 > | 
			
		
	
		
			
				
					|  |  |  |  |                   {message.text} | 
			
		
	
		
			
				
					|  |  |  |  |                 </p> | 
			
		
	
		
			
				
					|  |  |  |  |               </div> | 
			
		
	
	
		
			
				
					|  |  |  | @ -124,7 +192,7 @@ export default class NormalMessage extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |                 <div>{message.document.name}</div> | 
			
		
	
		
			
				
					|  |  |  |  |               </a> | 
			
		
	
		
			
				
					|  |  |  |  |             ) : null} | 
			
		
	
		
			
				
					|  |  |  |  |           <div className="normal-message__box--dete d-flex"> | 
			
		
	
		
			
				
					|  |  |  |  |             <div className="normal-message__box--date d-flex"> | 
			
		
	
		
			
				
					|  |  |  |  |               <span style={{ color: isSelf ? '#aaa' : 'gray' }}> | 
			
		
	
		
			
				
					|  |  |  |  |                 {message.status == 1 && <DoneIcon fontSize="small" />} | 
			
		
	
		
			
				
					|  |  |  |  |                 {message.status == 2 && <DoneAllIcon fontSize="small" />} | 
			
		
	
	
		
			
				
					|  |  |  | @ -140,6 +208,21 @@ export default class NormalMessage extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |               </span> | 
			
		
	
		
			
				
					|  |  |  |  |             </div> | 
			
		
	
		
			
				
					|  |  |  |  |           </div> | 
			
		
	
		
			
				
					|  |  |  |  |           <div className={isSelf ? 'icons self' : 'icons'}> | 
			
		
	
		
			
				
					|  |  |  |  |             <div> | 
			
		
	
		
			
				
					|  |  |  |  |               <FavoriteIcon fontSize="samall" color="primary" /> | 
			
		
	
		
			
				
					|  |  |  |  |               <span> {10}</span> | 
			
		
	
		
			
				
					|  |  |  |  |             </div> | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |             {/* <div> | 
			
		
	
		
			
				
					|  |  |  |  |               <TextsmsIcon fontSize="samall" color="secondary" /> | 
			
		
	
		
			
				
					|  |  |  |  |               <span> {10}</span> | 
			
		
	
		
			
				
					|  |  |  |  |             </div> | 
			
		
	
		
			
				
					|  |  |  |  |             <div> | 
			
		
	
		
			
				
					|  |  |  |  |               <span> {'+5 اعتماد به نفس'}</span> | 
			
		
	
		
			
				
					|  |  |  |  |             </div> */} | 
			
		
	
		
			
				
					|  |  |  |  |           </div> | 
			
		
	
		
			
				
					|  |  |  |  |         </div> | 
			
		
	
		
			
				
					|  |  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |  |     ); | 
			
		
	
		
			
				
					|  |  |  |  |   } | 
			
		
	
	
		
			
				
					|  |  |  | 
 |