decorateKoCommands() each command must have function

And due to that, a bug is found and solved in MessageView
This commit is contained in:
the-djmaze 2022-03-03 17:34:45 +01:00
parent a67fb22bee
commit f50f2c5ea0
5 changed files with 40 additions and 49 deletions

6
dev/External/ko.js vendored
View file

@ -99,7 +99,7 @@ Object.assign(ko.bindingHandlers, {
init: (element, fValueAccessor, fAllBindings, viewModel, bindingContext) => {
const command = fValueAccessor();
if (!command || !command.enabled || !command.canExecute) {
if (!command || !command.canExecute) {
throw new Error('Value should be a command');
}
@ -115,9 +115,7 @@ Object.assign(ko.bindingHandlers, {
const cl = element.classList,
command = fValueAccessor();
let disabled = !command.enabled();
disabled = disabled || !command.canExecute();
let disabled = !command.canExecute();
cl.toggle('disabled', disabled);
if (element.matches('INPUT,TEXTAREA,BUTTON')) {

View file

@ -1,7 +1,7 @@
import ko from 'ko';
import { koComputable } from 'External/ko';
import { doc, $htmlCL, elementById, fireEvent } from 'Common/Globals';
import { isFunction, forEachObjectValue, forEachObjectEntry } from 'Common/Utils';
import { forEachObjectValue, forEachObjectEntry } from 'Common/Utils';
let
SCREENS = {},
@ -48,7 +48,7 @@ const
ViewModelClass.__dom = vmDom;
if (ViewType.Popup === position) {
vm.closeCommand = createCommand(() => hideScreenPopup(ViewModelClass));
vm.closeCommand = () => hideScreenPopup(ViewModelClass);
// Firefox / Safari HTMLDialogElement not defined
if (!vmDom.showModal) {
@ -236,23 +236,6 @@ export const
Content: 'Content'
},
/**
* @param {Function} fExecute
* @param {(Function|boolean|null)=} fCanExecute = true
* @returns {Function}
*/
createCommand = (fExecute, fCanExecute) => {
let fResult = () => {
fResult.canExecute() && fExecute.call(null);
return false;
};
fResult.enabled = ko.observable(true);
fResult.canExecute = isFunction(fCanExecute)
? koComputable(() => fResult.enabled() && fCanExecute())
: fResult.enabled;
return fResult;
},
/**
* @param {Function} ViewModelClassToShow
* @param {Array=} params
@ -316,15 +299,9 @@ export const
decorateKoCommands = (thisArg, commands) =>
forEachObjectEntry(commands, (key, canExecute) => {
let command = thisArg[key],
fn = (...args) => fn.enabled() && fn.canExecute() && command.apply(thisArg, args);
fn = (...args) => fn.canExecute() && command.apply(thisArg, args);
// fn.__realCanExecute = canExecute;
fn.enabled = ko.observable(true);
fn.canExecute = isFunction(canExecute)
? koComputable(() => fn.enabled() && canExecute.call(thisArg, thisArg))
: koComputable(() => fn.enabled());
fn.canExecute = koComputable(() => canExecute.call(thisArg, thisArg));
thisArg[key] = fn;
});

View file

@ -366,10 +366,10 @@ export class ComposePopupView extends AbstractViewPopup {
decorateKoCommands(this, {
sendCommand: self => self.canBeSentOrSaved(),
saveCommand: self => self.canBeSentOrSaved(),
deleteCommand: self => self.isDraftFolderMessage(),
skipCommand: self => self.canBeSentOrSaved(),
contactsCommand: self => self.allowContacts
saveCommand: self => self.canBeSentOrSaved(),
deleteCommand: self => self.isDraftFolderMessage(),
skipCommand: self => self.canBeSentOrSaved(),
contactsCommand: self => self.allowContacts
});
}

View file

@ -136,6 +136,7 @@ export class ContactsPopupView extends AbstractViewPopup {
});
decorateKoCommands(this, {
// closeCommand: self => !self.watchDirty(),
deleteCommand: self => 0 < self.contactsCheckedOrSelected().length,
newMessageCommand: self => 0 < self.contactsCheckedOrSelected().length,
saveCommand: self => !self.viewSaving() && !self.viewReadOnly()

View file

@ -1,4 +1,5 @@
import ko from 'ko';
import { koComputable } from 'External/ko';
import { UNUSED_OPTION_VALUE } from 'Common/Consts';
@ -46,7 +47,7 @@ import * as Local from 'Storage/Client';
import Remote from 'Remote/User/Fetch';
import { decorateKoCommands, createCommand } from 'Knoin/Knoin';
import { decorateKoCommands } from 'Knoin/Knoin';
import { AbstractViewRight } from 'Knoin/AbstractViews';
import { PgpUserStore } from 'Stores/User/Pgp';
@ -63,6 +64,20 @@ export class MailMessageView extends AbstractViewRight {
super('MailMessageView');
const
/**
* @param {Function} fExecute
* @param {(Function|boolean|null)=} fCanExecute = true
* @returns {Function}
*/
createCommand = (fExecute, fCanExecute) => {
let fResult = () => {
fResult.canExecute() && fExecute.call(null);
return false;
};
fResult.canExecute = koComputable(() => fCanExecute());
return fResult;
},
createCommandReplyHelper = type =>
createCommand(() => this.replyOrforward(type), this.canBeRepliedOrForwarded),
@ -112,19 +127,6 @@ export class MailMessageView extends AbstractViewRight {
this.messageDomFocused = ko.observable(false).extend({ rateLimit: 0 });
// commands
this.replyCommand = createCommandReplyHelper(ComposeType.Reply);
this.replyAllCommand = createCommandReplyHelper(ComposeType.ReplyAll);
this.forwardCommand = createCommandReplyHelper(ComposeType.Forward);
this.forwardAsAttachmentCommand = createCommandReplyHelper(ComposeType.ForwardAsAttachment);
this.editAsNewCommand = createCommandReplyHelper(ComposeType.EditAsNew);
this.deleteCommand = createCommandActionHelper(FolderType.Trash, true);
this.deleteWithoutMoveCommand = createCommandActionHelper(FolderType.Trash, false);
this.archiveCommand = createCommandActionHelper(FolderType.Archive, true);
this.spamCommand = createCommandActionHelper(FolderType.Spam, true);
this.notSpamCommand = createCommandActionHelper(FolderType.NotSpam, true);
// viewer
this.viewHash = '';
@ -224,6 +226,19 @@ export class MailMessageView extends AbstractViewRight {
addEventListener('mailbox.message-view.toggle-full-screen', () => this.toggleFullScreen());
// commands
this.replyCommand = createCommandReplyHelper(ComposeType.Reply);
this.replyAllCommand = createCommandReplyHelper(ComposeType.ReplyAll);
this.forwardCommand = createCommandReplyHelper(ComposeType.Forward);
this.forwardAsAttachmentCommand = createCommandReplyHelper(ComposeType.ForwardAsAttachment);
this.editAsNewCommand = createCommandReplyHelper(ComposeType.EditAsNew);
this.deleteCommand = createCommandActionHelper(FolderType.Trash, true);
this.deleteWithoutMoveCommand = createCommandActionHelper(FolderType.Trash, false);
this.archiveCommand = createCommandActionHelper(FolderType.Archive, true);
this.spamCommand = createCommandActionHelper(FolderType.Spam, true);
this.notSpamCommand = createCommandActionHelper(FolderType.NotSpam, true);
decorateKoCommands(this, {
messageEditCommand: self => self.messageVisibility(),
goUpCommand: self => !self.messageListOrViewLoading(),