Disable wizard/dialog next/done buttons when page not valid (#1708)

This commit is contained in:
Matt Irvine
2018-06-25 12:25:48 -07:00
committed by GitHub
parent 473ddfcdf1
commit ea979de19f
2 changed files with 31 additions and 20 deletions

View File

@@ -68,8 +68,11 @@ export class DialogModal extends Modal {
});
}
this._doneButton = this.addDialogButton(this._dialog.okButton, () => this.done(), false);
this._doneButton = this.addDialogButton(this._dialog.okButton, () => this.done(), false, true);
this._dialog.okButton.registerClickEvent(this._onDone.event);
this._dialog.onValidityChanged(valid => {
this._doneButton.enabled = valid && this._dialog.okButton.enabled;
});
this._cancelButton = this.addDialogButton(this._dialog.cancelButton, () => this.cancel(), false);
this._dialog.cancelButton.registerClickEvent(this._onCancel.event);
@@ -85,23 +88,23 @@ export class DialogModal extends Modal {
this._dialog.onMessageChange(message => messageChangeHandler(message));
}
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true): Button {
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true, requireDialogValid: boolean = false): Button {
let buttonElement = this.addFooterButton(button.label, onSelect);
buttonElement.enabled = button.enabled;
if (registerClickEvent) {
button.registerClickEvent(buttonElement.onDidClick);
}
button.onUpdate(() => {
this.updateButtonElement(buttonElement, button);
this.updateButtonElement(buttonElement, button, requireDialogValid);
});
attachButtonStyler(buttonElement, this._themeService);
this.updateButtonElement(buttonElement, button);
this.updateButtonElement(buttonElement, button, requireDialogValid);
return buttonElement;
}
private updateButtonElement(buttonElement: Button, dialogButton: DialogButton) {
private updateButtonElement(buttonElement: Button, dialogButton: DialogButton, requireDialogValid: boolean = false) {
buttonElement.label = dialogButton.label;
buttonElement.enabled = dialogButton.enabled;
buttonElement.enabled = requireDialogValid ? dialogButton.enabled && this._dialog.valid : dialogButton.enabled;
dialogButton.hidden ? buttonElement.element.classList.add('dialogModal-hidden') : buttonElement.element.classList.remove('dialogModal-hidden');
}

View File

@@ -74,10 +74,10 @@ export class WizardModal extends Modal {
});
}
this._previousButton = this.addDialogButton(this._wizard.backButton, () => this.showPage(this.getCurrentPage() - 1));
this._nextButton = this.addDialogButton(this._wizard.nextButton, () => this.showPage(this.getCurrentPage() + 1));
this._previousButton = this.addDialogButton(this._wizard.backButton, () => this.showPage(this._wizard.currentPage - 1));
this._nextButton = this.addDialogButton(this._wizard.nextButton, () => this.showPage(this._wizard.currentPage + 1), true, true);
this._generateScriptButton = this.addDialogButton(this._wizard.generateScriptButton, () => undefined);
this._doneButton = this.addDialogButton(this._wizard.doneButton, () => this.done(), false);
this._doneButton = this.addDialogButton(this._wizard.doneButton, () => this.done(), false, true);
this._wizard.doneButton.registerClickEvent(this._onDone.event);
this._cancelButton = this.addDialogButton(this._wizard.cancelButton, () => this.cancel(), false);
this._wizard.cancelButton.registerClickEvent(this._onCancel.event);
@@ -92,25 +92,34 @@ export class WizardModal extends Modal {
messageChangeHandler(this._wizard.message);
this._wizard.onMessageChange(message => messageChangeHandler(message));
this._wizard.pages.forEach((page, index) => {
page.onValidityChanged(valid => {
if (index === this._wizard.currentPage) {
this._nextButton.enabled = this._wizard.nextButton.enabled && page.valid;
this._doneButton.enabled = this._wizard.doneButton.enabled && page.valid;
}
});
});
}
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true): Button {
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true, requirePageValid: boolean = false): Button {
let buttonElement = this.addFooterButton(button.label, onSelect);
buttonElement.enabled = button.enabled;
if (registerClickEvent) {
button.registerClickEvent(buttonElement.onDidClick);
}
button.onUpdate(() => {
this.updateButtonElement(buttonElement, button);
this.updateButtonElement(buttonElement, button, requirePageValid);
});
attachButtonStyler(buttonElement, this._themeService);
this.updateButtonElement(buttonElement, button);
this.updateButtonElement(buttonElement, button, requirePageValid);
return buttonElement;
}
private updateButtonElement(buttonElement: Button, dialogButton: DialogButton) {
private updateButtonElement(buttonElement: Button, dialogButton: DialogButton, requirePageValid: boolean = false) {
buttonElement.label = dialogButton.label;
buttonElement.enabled = dialogButton.enabled;
buttonElement.enabled = requirePageValid ? dialogButton.enabled && this._wizard.pages[this._wizard.currentPage].valid : dialogButton.enabled;
dialogButton.hidden ? buttonElement.element.classList.add('dialogModal-hidden') : buttonElement.element.classList.remove('dialogModal-hidden');
}
@@ -124,12 +133,12 @@ export class WizardModal extends Modal {
});
this._wizard.onPageAdded(page => {
this.registerPage(page);
this.showPage(this.getCurrentPage(), false);
this.showPage(this._wizard.currentPage, false);
});
this._wizard.onPageRemoved(page => {
let dialogPane = this._dialogPanes.get(page);
this._dialogPanes.delete(page);
this.showPage(this.getCurrentPage(), false);
this.showPage(this._wizard.currentPage, false);
dialogPane.dispose();
});
}
@@ -159,6 +168,9 @@ export class WizardModal extends Modal {
});
this.setButtonsForPage(index);
this._wizard.setCurrentPage(index);
let currentPageValid = this._wizard.pages[this._wizard.currentPage].valid;
this._nextButton.enabled = this._wizard.nextButton.enabled && currentPageValid;
this._doneButton.enabled = this._wizard.doneButton.enabled && currentPageValid;
}
private setButtonsForPage(index: number) {
@@ -179,10 +191,6 @@ export class WizardModal extends Modal {
}
}
private getCurrentPage(): number {
return this._wizard.currentPage;
}
public open(): void {
this.showPage(0, false);
this.show();