Pre-linkify messages and store breakpoints
This commit is contained in:
parent
12fbca8110
commit
c4609574c7
6 changed files with 85 additions and 82 deletions
|
@ -1,5 +1,4 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
import { timestamp, linkify } from '../util';
|
||||
|
||||
export default class Message extends PureComponent {
|
||||
handleSenderClick = () => {
|
||||
|
@ -11,24 +10,7 @@ export default class Message extends PureComponent {
|
|||
|
||||
render() {
|
||||
const { message } = this.props;
|
||||
const classes = ['message'];
|
||||
let sender = null;
|
||||
|
||||
if (message.type) {
|
||||
classes.push(`message-${message.type}`);
|
||||
}
|
||||
|
||||
if (message.from) {
|
||||
sender = (
|
||||
<span>
|
||||
{' '}
|
||||
<span className="message-sender" onClick={this.handleSenderClick}>
|
||||
{message.from}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const className = message.type ? `message message-${message.type}` : 'message';
|
||||
const style = {
|
||||
paddingLeft: `${window.messageIndent + 15}px`,
|
||||
textIndent: `-${window.messageIndent}px`,
|
||||
|
@ -36,10 +18,13 @@ export default class Message extends PureComponent {
|
|||
};
|
||||
|
||||
return (
|
||||
<p className={classes.join(' ')} style={style}>
|
||||
<span className="message-time">{timestamp(message.time)}</span>
|
||||
{sender}
|
||||
<span>{' '}{linkify(message.message)}</span>
|
||||
<p className={className} style={style}>
|
||||
<span className="message-time">{message.time}</span>
|
||||
{message.from &&
|
||||
<span className="message-sender" onClick={this.handleSenderClick}>
|
||||
{' '}{message.from}
|
||||
</span>
|
||||
}{' '}{message.message}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue