Pre-linkify messages and store breakpoints
This commit is contained in:
parent
12fbca8110
commit
c4609574c7
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@
|
||||
import * as actions from '../actions';
|
||||
import { messageHeight } from '../util';
|
||||
import { findBreakpoints, messageHeight, linkify, timestamp } from '../util';
|
||||
|
||||
function initMessage(message, state) {
|
||||
message.dest = message.to || message.from || message.server;
|
||||
@ -11,13 +11,23 @@ function initMessage(message, state) {
|
||||
message.channel = true;
|
||||
}
|
||||
|
||||
// Combine multiple adjacent spaces into a single one
|
||||
// Collapse multiple adjacent spaces into a single one
|
||||
message.message = message.message.replace(/\s\s+/g, ' ');
|
||||
|
||||
if (message.message.indexOf('\x01ACTION') === 0) {
|
||||
const from = message.from;
|
||||
message.from = null;
|
||||
message.type = 'action';
|
||||
message.message = from + message.message.slice(7, -1);
|
||||
}
|
||||
|
||||
const charWidth = state.environment.get('charWidth');
|
||||
const wrapWidth = state.environment.get('wrapWidth');
|
||||
|
||||
message.length = message.message.length;
|
||||
message.breakpoints = findBreakpoints(message.message);
|
||||
message.height = messageHeight(message, wrapWidth, charWidth, 6 * charWidth);
|
||||
message.message = linkify(message.message);
|
||||
|
||||
return message;
|
||||
}
|
||||
@ -34,23 +44,25 @@ export function sendMessage(message, to, server) {
|
||||
return (dispatch, getState) => {
|
||||
const state = getState();
|
||||
|
||||
dispatch(initMessage({
|
||||
dispatch({
|
||||
type: actions.SEND_MESSAGE,
|
||||
message: initMessage({
|
||||
from: state.servers.getIn([server, 'nick']),
|
||||
message,
|
||||
to,
|
||||
server,
|
||||
time: new Date(),
|
||||
time: timestamp()
|
||||
}, state),
|
||||
socket: {
|
||||
type: 'chat',
|
||||
data: { message, to, server }
|
||||
}
|
||||
}, state));
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function addMessage(message) {
|
||||
message.time = new Date();
|
||||
message.time = timestamp();
|
||||
|
||||
return (dispatch, getState) => dispatch({
|
||||
type: actions.ADD_MESSAGE,
|
||||
@ -59,7 +71,7 @@ export function addMessage(message) {
|
||||
}
|
||||
|
||||
export function addMessages(messages) {
|
||||
const now = new Date();
|
||||
const now = timestamp();
|
||||
|
||||
return (dispatch, getState) => {
|
||||
const state = getState();
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -11,25 +11,20 @@ const Message = Record({
|
||||
message: '',
|
||||
time: null,
|
||||
type: null,
|
||||
channel: false,
|
||||
height: 0,
|
||||
channel: false
|
||||
length: 0,
|
||||
breakpoints: null
|
||||
});
|
||||
|
||||
function addMessage(state, message) {
|
||||
if (message.message.indexOf('\x01ACTION') === 0) {
|
||||
const from = message.from;
|
||||
message.from = null;
|
||||
message.type = 'action';
|
||||
message.message = from + message.message.slice(7, -1);
|
||||
}
|
||||
|
||||
return state.updateIn([message.server, message.dest], List(),
|
||||
list => list.push(new Message(message)));
|
||||
}
|
||||
|
||||
export default createReducer(Map(), {
|
||||
[actions.SEND_MESSAGE](state, action) {
|
||||
return addMessage(state, action);
|
||||
return addMessage(state, action.message);
|
||||
},
|
||||
|
||||
[actions.ADD_MESSAGE](state, action) {
|
||||
|
@ -1,6 +1,6 @@
|
||||
import padStart from 'lodash/padStart';
|
||||
|
||||
export messageHeight from './messageHeight';
|
||||
export { findBreakpoints, messageHeight } from './messageHeight';
|
||||
export linkify from './linkify';
|
||||
|
||||
export function normalizeChannel(channel) {
|
||||
|
@ -2,7 +2,23 @@ const lineHeight = 24;
|
||||
let prevWidth;
|
||||
let windowWidth;
|
||||
|
||||
export default function messageHeight(message, width, charWidth, indent = 0) {
|
||||
export function findBreakpoints(text) {
|
||||
const breakpoints = [];
|
||||
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const char = text.charAt(i);
|
||||
|
||||
if (char === ' ') {
|
||||
breakpoints.push({ end: i, next: i + 1 });
|
||||
} else if (char === '-' && i !== text.length - 1) {
|
||||
breakpoints.push({ end: i + 1, next: i + 1 });
|
||||
}
|
||||
}
|
||||
|
||||
return breakpoints;
|
||||
}
|
||||
|
||||
export function messageHeight(message, width, charWidth, indent = 0) {
|
||||
let pad = (6 + (message.from ? message.from.length + 1 : 0)) * charWidth;
|
||||
let height = lineHeight + 4;
|
||||
|
||||
@ -17,32 +33,27 @@ export default function messageHeight(message, width, charWidth, indent = 0) {
|
||||
}
|
||||
}
|
||||
|
||||
if (pad + (message.message.length * charWidth) < width) {
|
||||
if (pad + (message.length * charWidth) < width) {
|
||||
return height;
|
||||
}
|
||||
|
||||
const breaks = message.breakpoints;
|
||||
let prevBreak = 0;
|
||||
let prevPos = 0;
|
||||
|
||||
for (let i = 0, len = message.message.length; i < len; i++) {
|
||||
const c = message.message.charAt(i);
|
||||
|
||||
if (c === ' ' || c === '-') {
|
||||
const end = c === ' ' ? i : i + 1;
|
||||
|
||||
if (pad + ((end - prevBreak) * charWidth) >= width) {
|
||||
for (let i = 0; i < breaks.length; i++) {
|
||||
if (pad + ((breaks[i].end - prevBreak) * charWidth) >= width) {
|
||||
prevBreak = prevPos;
|
||||
pad = indent;
|
||||
height += lineHeight;
|
||||
}
|
||||
|
||||
prevPos = i + 1;
|
||||
} else if (i === len - 1) {
|
||||
if (pad + ((len - prevBreak) * charWidth) >= width) {
|
||||
prevPos = breaks[i].next;
|
||||
}
|
||||
|
||||
if (pad + ((message.length - prevBreak) * charWidth) >= width) {
|
||||
height += lineHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return height;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user