2017-02-17 00:46:39 +00:00
|
|
|
import React, { PureComponent } from 'react';
|
2018-06-03 04:18:03 +00:00
|
|
|
import classnames from 'classnames';
|
2015-12-28 23:34:32 +00:00
|
|
|
|
2017-02-17 00:46:39 +00:00
|
|
|
export default class Message extends PureComponent {
|
2017-05-27 05:30:22 +00:00
|
|
|
handleNickClick = () => this.props.onNickClick(this.props.message.from);
|
2017-05-06 21:02:45 +00:00
|
|
|
|
2015-12-28 23:34:32 +00:00
|
|
|
render() {
|
|
|
|
const { message } = this.props;
|
2018-06-03 04:18:03 +00:00
|
|
|
|
|
|
|
const className = classnames('message', {
|
|
|
|
[`message-${message.type}`]: message.type
|
|
|
|
});
|
|
|
|
|
2016-02-16 21:43:25 +00:00
|
|
|
const style = {
|
|
|
|
paddingLeft: `${window.messageIndent + 15}px`,
|
2017-03-23 19:38:27 +00:00
|
|
|
textIndent: `-${window.messageIndent}px`,
|
|
|
|
...this.props.style
|
2016-02-16 21:43:25 +00:00
|
|
|
};
|
|
|
|
|
2015-12-28 23:34:32 +00:00
|
|
|
return (
|
2017-04-17 02:11:45 +00:00
|
|
|
<p className={className} style={style}>
|
|
|
|
<span className="message-time">{message.time}</span>
|
2018-04-05 23:46:22 +00:00
|
|
|
{message.from && (
|
2017-04-19 23:51:55 +00:00
|
|
|
<span className="message-sender" onClick={this.handleNickClick}>
|
2018-04-05 23:46:22 +00:00
|
|
|
{' '}
|
|
|
|
{message.from}
|
2017-04-17 02:11:45 +00:00
|
|
|
</span>
|
2018-04-05 23:46:22 +00:00
|
|
|
)}{' '}
|
|
|
|
{message.content}
|
2015-12-28 23:34:32 +00:00
|
|
|
</p>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|