ref(chat): on native, show messages as grouped by sender

This commit is contained in:
Leonard Kim 2019-05-06 11:21:41 -07:00 committed by virtuacoplenny
parent 34dffbfc5e
commit 7187e540a8
5 changed files with 56 additions and 32 deletions

View File

@ -19,12 +19,24 @@ export type Props = {
*/
message: Object,
/**
* Whether or not the avatar image of the participant which sent the message
* should be displayed.
*/
showAvatar: boolean,
/**
* Whether or not the name of the participant which sent the message should
* be displayed.
*/
showDisplayName: boolean,
/**
* Whether or not the time at which the message was sent should be
* displayed.
*/
showTimestamp: boolean,
/**
* Invoked to receive translated strings.
*/
@ -36,7 +48,9 @@ export type Props = {
*/
export default class AbstractChatMessage<P: Props> extends PureComponent<P> {
static defaultProps = {
showDisplayName: true
showAvatar: false,
showDisplayName: false,
showTimestamp: false
};
}

View File

@ -39,7 +39,7 @@ export default class AbstractMessageContainer<P: Props> extends PureComponent<P>
if (message.id === currentGroupParticipantId) {
currentGrouping.push(message);
} else {
groups.push(currentGrouping);
currentGrouping.length && groups.push(currentGrouping);
currentGrouping = [ message ];
currentGroupParticipantId = message.id;

View File

@ -13,11 +13,6 @@ import AbstractChatMessage, {
} from '../AbstractChatMessage';
import styles from './styles';
/**
* Size of the rendered avatar in the message.
*/
const AVATAR_SIZE = 32;
/**
* Formatter string to display the message timestamp.
*/
@ -34,8 +29,6 @@ class ChatMessage extends AbstractChatMessage<Props> {
*/
render() {
const { message } = this.props;
const timeStamp = getLocalizedDateFormatter(
new Date(message.timestamp)).format(TIMESTAMP_FORMAT);
const localMessage = message.messageType === 'local';
// Style arrays that need to be updated in various scenarios, such as
@ -60,18 +53,12 @@ class ChatMessage extends AbstractChatMessage<Props> {
return (
<View style = { styles.messageWrapper } >
{
// Avatar is only rendered for remote messages.
!localMessage && this._renderAvatar()
}
{ this._renderAvatar() }
<View style = { detailsWrapperStyle }>
<View style = { textWrapperStyle } >
{
// Display name is only rendered for remote
// messages.
!localMessage && this._renderDisplayName()
this.props.showDisplayName
&& this._renderDisplayName()
}
<Text style = { styles.messageText }>
{ message.messageType === 'error'
@ -82,9 +69,7 @@ class ChatMessage extends AbstractChatMessage<Props> {
: message.message }
</Text>
</View>
<Text style = { styles.timeText }>
{ timeStamp }
</Text>
{ this.props.showTimestamp && this._renderTimestamp() }
</View>
</View>
);
@ -96,13 +81,12 @@ class ChatMessage extends AbstractChatMessage<Props> {
* @returns {React$Element<*>}
*/
_renderAvatar() {
const { _avatarURL } = this.props;
return (
<View style = { styles.avatarWrapper }>
<Avatar
size = { AVATAR_SIZE }
uri = { _avatarURL } />
{ this.props.showAvatar && <Avatar
size = { styles.avatarWrapper.width }
uri = { this.props._avatarURL } />
}
</View>
);
}
@ -113,11 +97,26 @@ class ChatMessage extends AbstractChatMessage<Props> {
* @returns {React$Element<*>}
*/
_renderDisplayName() {
const { message } = this.props;
return (
<Text style = { styles.displayName }>
{ message.displayName }
{ this.props.message.displayName }
</Text>
);
}
/**
* Renders the time at which the message was sent.
*
* @returns {React$Element<*>}
*/
_renderTimestamp() {
return (
<Text style = { styles.timeText }>
{
getLocalizedDateFormatter(
new Date(this.props.message.timestamp)
).format(TIMESTAMP_FORMAT)
}
</Text>
);
}

View File

@ -68,9 +68,19 @@ export default class ChatMessageGroup extends Component<Props> {
* @param {Object} message - The chat message to render.
* @returns {React$Element<*>}
*/
_renderMessage({ item: message }) {
_renderMessage({ index, item: message }) {
return (
<ChatMessage message = { message } />
<ChatMessage
message = { message }
showAvatar = {
this.props.messages[0].messageType !== 'local'
&& index === this.props.messages.length - 1
}
showDisplayName = {
this.props.messages[0].messageType === 'remote'
&& index === this.props.messages.length - 1
}
showTimestamp = { index === 0 } />
);
}
}

View File

@ -16,7 +16,8 @@ export default {
* Wrapper View for the avatar.
*/
avatarWrapper: {
marginRight: 8
marginRight: 8,
width: 32
},
/**