97 lines
3.0 KiB
React
97 lines
3.0 KiB
React
|
ChatMessage = React.createClass({
|
||
|
|
sanitizeAndFormat: function(str) {
|
||
|
|
let res;
|
||
|
|
if(typeof str === 'string') { // First, replace replace all tags with the ascii equivalent (excluding those involved in anchor tags)
|
||
|
|
res = str.replace(/&/g, '&').replace(/<(?![au\/])/g, '<').replace(/\/([^au])>/g, '$1>').replace(/([^=])"(?!>)/g, '$1"');
|
||
|
|
res = this.toClickable(res);
|
||
|
|
return res = this.activateBreakLines(res);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
toClickable: function(str) {
|
||
|
|
let res;
|
||
|
|
if(typeof str === 'string') {
|
||
|
|
res = str.replace(/<a href='event:/gim, "<a target='_blank' href='");
|
||
|
|
return res = res.replace(/<a href="event:/gim, '<a target="_blank" href="');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
activateBreakLines: function(str) {
|
||
|
|
let res;
|
||
|
|
if(typeof str === 'string') { // turn '\r' carriage return characters into '<br/>' break lines
|
||
|
|
res = str.replace(new RegExp(CARRIAGE_RETURN, 'g'), BREAK_LINE);
|
||
|
|
return res;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
autoscroll: function() {
|
||
|
|
let ref;
|
||
|
|
$('#chatbody').scrollTop((ref = $('#chatbody')[0]) != null ? ref.scrollHeight : void 0);
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
|
||
|
|
componentDidUpdate: function() {
|
||
|
|
this.autoscroll();
|
||
|
|
},
|
||
|
|
|
||
|
|
componentDidMount: function() {
|
||
|
|
this.autoscroll();
|
||
|
|
},
|
||
|
|
|
||
|
|
toClockTime: function(epochTime) {
|
||
|
|
let dateObj, hours, local, minutes, offset;
|
||
|
|
if(epochTime === null) {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
local = new Date();
|
||
|
|
offset = local.getTimezoneOffset();
|
||
|
|
epochTime = epochTime - offset * 60000; // 1 min = 60 s = 60,000 ms
|
||
|
|
dateObj = new Date(epochTime);
|
||
|
|
hours = dateObj.getUTCHours();
|
||
|
|
minutes = dateObj.getUTCMinutes();
|
||
|
|
if(minutes < 10) {
|
||
|
|
minutes = `0${minutes}`;
|
||
|
|
}
|
||
|
|
return `${hours}:${minutes}`;
|
||
|
|
},
|
||
|
|
|
||
|
|
getTime: function() {
|
||
|
|
var floatRight = {float: 'right'};
|
||
|
|
|
||
|
|
if(this.props.message.message.from_time) {
|
||
|
|
return (
|
||
|
|
<span style={floatRight}>
|
||
|
|
<span style={this.props.messageFontSize}>{this.toClockTime(this.props.message.message.from_time)}</span>
|
||
|
|
<span style={this.props.messageFontSize} className="glyphicon glyphicon-time"></span>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
return (
|
||
|
|
<span style={floatRight}>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
render(){
|
||
|
|
var messageColor = { color: colourToHex(this.props.message.message.from_color) };
|
||
|
|
var floatLeft = {float: 'left'};
|
||
|
|
function createMarkup(str) { return {__html: str}; };
|
||
|
|
return (
|
||
|
|
<li>
|
||
|
|
<span style={floatLeft}>
|
||
|
|
{this.props.message.message.from_username ?
|
||
|
|
<span className="userNameEntry" rel="tooltip" data-placement="bottom" title={this.props.message.message.from_username}>
|
||
|
|
{this.props.message.message.from_username}
|
||
|
|
</span>
|
||
|
|
: null }
|
||
|
|
</span>
|
||
|
|
{this.getTime()}
|
||
|
|
<br/>
|
||
|
|
<div style={ messageColor } dangerouslySetInnerHTML={createMarkup(this.sanitizeAndFormat(this.props.message.message.message))}>
|
||
|
|
</div>
|
||
|
|
{this.autoscroll()}
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|