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

115 lines
3.3 KiB
JavaScript
Raw Normal View History

// @flow
import React from 'react';
import { Text, View } from 'react-native';
2019-06-26 14:08:23 +00:00
import { Avatar } from '../../../base/avatar';
import { translate } from '../../../base/i18n';
2019-06-26 14:08:23 +00:00
import AbstractChatMessage, { type Props } from '../AbstractChatMessage';
import styles from './styles';
/**
* Renders a single chat message.
*/
class ChatMessage extends AbstractChatMessage<Props> {
/**
* Implements {@code Component#render}.
*
* @inheritdoc
*/
render() {
const { message } = this.props;
const localMessage = message.messageType === 'local';
// Style arrays that need to be updated in various scenarios, such as
// error messages or others.
const detailsWrapperStyle = [
styles.detailsWrapper
];
const textWrapperStyle = [
styles.textWrapper
];
if (localMessage) {
// The wrapper needs to be aligned to the right.
detailsWrapperStyle.push(styles.ownMessageDetailsWrapper);
// The bubble needs to be differently styled.
textWrapperStyle.push(styles.ownTextWrapper);
} else if (message.messageType === 'error') {
// The bubble needs to be differently styled.
textWrapperStyle.push(styles.systemTextWrapper);
}
return (
<View style = { styles.messageWrapper } >
{ this._renderAvatar() }
<View style = { detailsWrapperStyle }>
<View style = { textWrapperStyle } >
{
this.props.showDisplayName
&& this._renderDisplayName()
}
<Text style = { styles.messageText }>
{ message.messageType === 'error'
? this.props.t('chat.error', {
error: message.error,
originalText: message.message
})
: message.message }
</Text>
</View>
{ this.props.showTimestamp && this._renderTimestamp() }
</View>
</View>
);
}
_getFormattedTimestamp: () => string;
/**
* Renders the avatar of the sender.
*
* @returns {React$Element<*>}
*/
_renderAvatar() {
return (
<View style = { styles.avatarWrapper }>
{ this.props.showAvatar && <Avatar
2019-06-26 14:08:23 +00:00
participantId = { this.props.message.id }
size = { styles.avatarWrapper.width } />
}
</View>
);
}
/**
* Renders the display name of the sender.
*
* @returns {React$Element<*>}
*/
_renderDisplayName() {
return (
<Text style = { styles.displayName }>
{ this.props.message.displayName }
</Text>
);
}
/**
* Renders the time at which the message was sent.
*
* @returns {React$Element<*>}
*/
_renderTimestamp() {
return (
<Text style = { styles.timeText }>
{ this._getFormattedTimestamp() }
</Text>
);
}
}
2019-06-26 14:08:23 +00:00
export default translate(ChatMessage);