Put reply into its own view model.
Otherwise, we re-render the reply message on every keystroke.
This commit is contained in:
parent
f486bc0e04
commit
d33d55376a
3 changed files with 41 additions and 25 deletions
|
@ -155,7 +155,7 @@ export class RoomViewModel extends ViewModel {
|
||||||
this._room.join();
|
this._room.join();
|
||||||
}
|
}
|
||||||
|
|
||||||
async _sendMessage(message, replyTo) {
|
async _sendMessage(message, replyingTo) {
|
||||||
if (!this._room.isArchived && message) {
|
if (!this._room.isArchived && message) {
|
||||||
try {
|
try {
|
||||||
let msgtype = "m.text";
|
let msgtype = "m.text";
|
||||||
|
@ -164,8 +164,8 @@ export class RoomViewModel extends ViewModel {
|
||||||
msgtype = "m.emote";
|
msgtype = "m.emote";
|
||||||
}
|
}
|
||||||
const content = {msgtype, body: message};
|
const content = {msgtype, body: message};
|
||||||
if (replyTo) {
|
if (replyingTo) {
|
||||||
content["m.relates_to"] = replyTo.reply();
|
content["m.relates_to"] = replyingTo.reply();
|
||||||
}
|
}
|
||||||
await this._room.sendEvent("m.room.message", content);
|
await this._room.sendEvent("m.room.message", content);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
@ -175,7 +175,6 @@ export class RoomViewModel extends ViewModel {
|
||||||
this.emitChange("error");
|
this.emitChange("error");
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
this.setReply(null);
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
|
@ -301,8 +300,10 @@ export class RoomViewModel extends ViewModel {
|
||||||
this.navigation.applyPath(path);
|
this.navigation.applyPath(path);
|
||||||
}
|
}
|
||||||
|
|
||||||
setReply(entry) {
|
startReply(entry) {
|
||||||
this._composerVM.setReply(entry);
|
if (!this._room.isArchived) {
|
||||||
|
this._composerVM.startReply(entry);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -310,32 +311,23 @@ class ComposerViewModel extends ViewModel {
|
||||||
constructor(roomVM) {
|
constructor(roomVM) {
|
||||||
super();
|
super();
|
||||||
this._roomVM = roomVM;
|
this._roomVM = roomVM;
|
||||||
this._replyTo = null;
|
this._replyVM = new ReplyViewModel(roomVM);
|
||||||
this._isEmpty = true;
|
}
|
||||||
|
|
||||||
|
startReply(entry) {
|
||||||
|
this._replyVM.setReplyingTo(entry);
|
||||||
}
|
}
|
||||||
|
|
||||||
get isEncrypted() {
|
get isEncrypted() {
|
||||||
return this._roomVM.isEncrypted;
|
return this._roomVM.isEncrypted;
|
||||||
}
|
}
|
||||||
|
|
||||||
setReply(entry) {
|
|
||||||
this._replyTo = entry;
|
|
||||||
this.emitChange("replyTo");
|
|
||||||
}
|
|
||||||
|
|
||||||
clearReply() {
|
|
||||||
this.setReply(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
get replyTo() {
|
|
||||||
return this._replyTo;
|
|
||||||
}
|
|
||||||
|
|
||||||
sendMessage(message) {
|
sendMessage(message) {
|
||||||
const success = this._roomVM._sendMessage(message, this._replyTo);
|
const success = this._roomVM._sendMessage(message, this._replyVM.replyingTo);
|
||||||
if (success) {
|
if (success) {
|
||||||
this._isEmpty = true;
|
this._isEmpty = true;
|
||||||
this.emitChange("canSend");
|
this.emitChange("canSend");
|
||||||
|
this._replyVM.clearReply();
|
||||||
}
|
}
|
||||||
return success;
|
return success;
|
||||||
}
|
}
|
||||||
|
@ -372,6 +364,30 @@ class ComposerViewModel extends ViewModel {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class ReplyViewModel extends ViewModel {
|
||||||
|
constructor(roomVM) {
|
||||||
|
super();
|
||||||
|
this._roomVM = roomVM;
|
||||||
|
this._replyingTo = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
setReplyingTo(entry) {
|
||||||
|
const changed = this._replyingTo !== entry;
|
||||||
|
this._replyingTo = entry;
|
||||||
|
if (changed) {
|
||||||
|
this.emitChange("replyingTo");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
clearReply() {
|
||||||
|
this.setReplyingTo(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
get replyingTo() {
|
||||||
|
return this._replyingTo;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function imageToInfo(image) {
|
function imageToInfo(image) {
|
||||||
return {
|
return {
|
||||||
w: image.width,
|
w: image.width,
|
||||||
|
|
|
@ -106,8 +106,8 @@ export class BaseMessageTile extends SimpleTile {
|
||||||
return action;
|
return action;
|
||||||
}
|
}
|
||||||
|
|
||||||
setReply() {
|
startReply() {
|
||||||
this._roomVM.setReply(this._entry);
|
this._roomVM.startReply(this._entry);
|
||||||
}
|
}
|
||||||
|
|
||||||
redact(reason, log) {
|
redact(reason, log) {
|
||||||
|
|
|
@ -113,7 +113,7 @@ export class BaseMessageView extends TemplateView {
|
||||||
if (vm.canReact && vm.shape !== "redacted") {
|
if (vm.canReact && vm.shape !== "redacted") {
|
||||||
options.push(new QuickReactionsMenuOption(vm));
|
options.push(new QuickReactionsMenuOption(vm));
|
||||||
}
|
}
|
||||||
options.push(Menu.option(vm.i18n`Reply`, () => vm.setReply()));
|
options.push(Menu.option(vm.i18n`Reply`, () => vm.startReply()));
|
||||||
if (vm.canAbortSending) {
|
if (vm.canAbortSending) {
|
||||||
options.push(Menu.option(vm.i18n`Cancel`, () => vm.abortSending()));
|
options.push(Menu.option(vm.i18n`Cancel`, () => vm.abortSending()));
|
||||||
} else if (vm.canRedact) {
|
} else if (vm.canRedact) {
|
||||||
|
|
Reference in a new issue