jiti-meet/react/features/chat/components/web/ChatMessage.js

114 lines
3.3 KiB
JavaScript
Raw Normal View History

// @flow
import React from 'react';
import { toArray } from 'react-emoji-render';
import { translate } from '../../../base/i18n';
2019-08-05 10:46:10 +00:00
import { Linkify } from '../../../base/react';
2019-10-15 14:08:23 +00:00
import { MESSAGE_TYPE_LOCAL } from '../../constants';
import AbstractChatMessage, {
type Props
} from '../AbstractChatMessage';
2019-10-07 12:35:04 +00:00
import PrivateMessageButton from '../PrivateMessageButton';
/**
* Renders a single chat message.
*/
class ChatMessage extends AbstractChatMessage<Props> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { message } = this.props;
const processedMessage = [];
// content is an array of text and emoji components
2019-10-09 08:34:01 +00:00
const content = toArray(this._getMessageText(), { className: 'smiley' });
content.forEach(i => {
if (typeof i === 'string') {
2019-08-05 10:46:10 +00:00
processedMessage.push(<Linkify key = { i }>{ i }</Linkify>);
} else {
processedMessage.push(i);
}
});
return (
<div className = 'chatmessage-wrapper'>
2019-10-22 07:56:42 +00:00
<div className = { `chatmessage ${message.privateMessage ? 'privatemessage' : ''}` }>
<div className = 'replywrapper'>
<div className = 'messagecontent'>
{ this.props.showDisplayName && this._renderDisplayName() }
<div className = 'usermessage'>
{ processedMessage }
</div>
{ message.privateMessage && this._renderPrivateNotice() }
2019-10-07 12:35:04 +00:00
</div>
2019-10-22 07:56:42 +00:00
{ message.privateMessage && message.messageType !== MESSAGE_TYPE_LOCAL
&& (
<div className = 'messageactions'>
<PrivateMessageButton
participantID = { message.id }
reply = { true }
showLabel = { false } />
</div>
) }
</div>
</div>
{ this.props.showTimestamp && this._renderTimestamp() }
</div>
);
}
_getFormattedTimestamp: () => string;
2019-10-09 08:34:01 +00:00
_getMessageText: () => string;
2019-10-07 12:35:04 +00:00
_getPrivateNoticeMessage: () => string;
/**
* Renders the display name of the sender.
*
* @returns {React$Element<*>}
*/
_renderDisplayName() {
return (
<div className = 'display-name'>
{ this.props.message.displayName }
</div>
);
}
2019-10-07 12:35:04 +00:00
/**
* Renders the message privacy notice.
*
* @returns {React$Element<*>}
*/
_renderPrivateNotice() {
return (
<div className = 'privatemessagenotice'>
{ this._getPrivateNoticeMessage() }
</div>
);
}
/**
* Renders the time at which the message was sent.
*
* @returns {React$Element<*>}
*/
_renderTimestamp() {
return (
<div className = 'timestamp'>
{ this._getFormattedTimestamp() }
</div>
);
}
}
export default translate(ChatMessage);