2019-05-04 21:22:52 +00:00
|
|
|
// @flow
|
|
|
|
|
2019-05-04 21:37:30 +00:00
|
|
|
import React from 'react';
|
2019-05-04 21:22:52 +00:00
|
|
|
|
2019-05-04 21:37:30 +00:00
|
|
|
import AbstractMessageContainer, { type Props }
|
|
|
|
from '../AbstractMessageContainer';
|
2019-05-04 21:22:52 +00:00
|
|
|
|
2019-05-04 21:37:30 +00:00
|
|
|
import ChatMessageGroup from './ChatMessageGroup';
|
2019-05-04 21:22:52 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Displays all received chat messages, grouped by sender.
|
|
|
|
*
|
2019-05-04 21:37:30 +00:00
|
|
|
* @extends AbstractMessageContainer
|
2019-05-04 21:22:52 +00:00
|
|
|
*/
|
2019-05-04 21:37:30 +00:00
|
|
|
export default class MessageContainer extends AbstractMessageContainer<Props> {
|
2019-05-04 21:22:52 +00:00
|
|
|
/**
|
|
|
|
* Reference to the HTML element at the end of the list of displayed chat
|
|
|
|
* messages. Used for scrolling to the end of the chat messages.
|
|
|
|
*/
|
|
|
|
_messagesListEndRef: Object;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Initializes a new {@code MessageContainer} instance.
|
|
|
|
*
|
|
|
|
* @param {Props} props - The React {@code Component} props to initialize
|
|
|
|
* the new {@code MessageContainer} instance with.
|
|
|
|
*/
|
|
|
|
constructor(props: Props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this._messagesListEndRef = React.createRef();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Implements React's {@link Component#componentDidMount()}.
|
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
|
|
|
componentDidMount() {
|
|
|
|
this._scrollMessagesToBottom();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Updates chat input focus.
|
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
|
|
|
componentDidUpdate() {
|
|
|
|
this._scrollMessagesToBottom();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Implements {@code Component#render}.
|
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
|
|
|
render() {
|
|
|
|
const groupedMessages = this._getMessagesGroupedBySender();
|
|
|
|
const messages = groupedMessages.map((group, index) => {
|
|
|
|
const messageType = group[0] && group[0].messageType;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ChatMessageGroup
|
|
|
|
className = { messageType || 'remote' }
|
|
|
|
key = { index }
|
|
|
|
messages = { group } />
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div id = 'chatconversation'>
|
|
|
|
{ messages }
|
|
|
|
<div ref = { this._messagesListEndRef } />
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-05-04 21:37:30 +00:00
|
|
|
_getMessagesGroupedBySender: () => Array<Array<Object>>;
|
2019-05-04 21:22:52 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Automatically scrolls the displayed chat messages down to the latest.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
_scrollMessagesToBottom() {
|
|
|
|
this._messagesListEndRef.current.scrollIntoView({
|
|
|
|
behavior: 'smooth'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|