mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-27 17:23:21 -05:00
Disable wizard/dialog next/done buttons when page not valid (#1708)
This commit is contained in:
@@ -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');
|
||||
}
|
||||
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user