ref(chat): on web, move timestamp to chat message

This commit is contained in:
Leonard Kim
2019-05-06 12:30:38 -07:00
committed by virtuacoplenny
parent 7187e540a8
commit 504fadaf71
5 changed files with 63 additions and 34 deletions

View File

@@ -56,13 +56,42 @@ class ChatMessage extends AbstractChatMessage<Props> {
});
return (
<div className = 'chatmessage'>
{ this.props.showDisplayName && <div className = 'display-name'>
{ message.displayName }
</div> }
<div className = 'usermessage'>
{ processedMessage }
<div>
<div className = 'chatmessage'>
{ this.props.showDisplayName && this._renderDisplayName() }
<div className = 'usermessage'>
{ processedMessage }
</div>
</div>
{ this.props.showTimestamp && this._renderTimestamp() }
</div>
);
}
_getFormattedTimestamp: () => string;
/**
* Renders the display name of the sender.
*
* @returns {React$Element<*>}
*/
_renderDisplayName() {
return (
<div className = 'display-name'>
{ this.props.message.displayName }
</div>
);
}
/**
* Renders the time at which the message was sent.
*
* @returns {React$Element<*>}
*/
_renderTimestamp() {
return (
<div className = 'timestamp'>
{ this._getFormattedTimestamp() }
</div>
);
}

View File

@@ -3,8 +3,6 @@
import React, { Component } from 'react';
import ChatMessage from './ChatMessage';
import { getLocalizedDateFormatter } from '../../../base/i18n';
type Props = {
/**
@@ -43,8 +41,6 @@ class ChatMessageGroup extends Component<Props> {
return null;
}
const { timestamp } = messages[messagesLength - 1];
return (
<div className = { `chat-message-group ${className}` }>
{
@@ -52,13 +48,10 @@ class ChatMessageGroup extends Component<Props> {
<ChatMessage
key = { i }
message = { message }
showDisplayName = { i === 0 } />
showDisplayName = { i === 0 }
showTimestamp = { i === messages.length - 1 } />
))
}
<div className = 'chat-message-group-footer'>
{ getLocalizedDateFormatter(
new Date(timestamp)).format('H:mm') }
</div>
</div>
);
}