If it’s clear to me, you’re seeking the builder pattern.
Below is an implementation based on your provided code snippet:
class DialogService {
private _title: string;
private _message: string;
private _okBtn: string;
private _cancelBtn: string;
private _confirm: string;
private _cancel: string;
constructor() {}
public title(value: string): DialogService {
this._title = value;
return this;
}
public message(value: string): DialogService {
this._message = value;
return this;
}
public okBtn(value: string): DialogService {
this._okBtn = value;
return this;
}
public cancelBtn(value: string): DialogService {
this._cancelBtn = value;
return this;
}
public confirm(value: () => {}): DialogService {
this._confirm = value;
return this;
}
public cancel(value: () => {}): DialogService {
this._cancel = value;
return this;
}
public show(): void {
bootbox.dialog({
title: this._title,
message: this._message,
buttons: {
cancel: {
label: this._cancelBtn,
className: 'btn-inverse btn-inverse-primary',
callback: this._cancel
},
okay: {
label: okBtn,
className: 'btn-inverse btn-inverse-primary',
callback: this._confirm
}
}
});
}
}
Following that:
new DialogService()
.title('Some title')
.message('Some message')
.okBtn('Sounds Good')
.cancelBtn('No way!')
.confirm(() => {})
.cancel(() => {})
.show();
Edit
I observed the modified question after my initial edit, so I am re-editing it:
interface ButtonData {
label: string;
className: string;
callback: () => void;
}
class DialogService {
private static BUTTON_CLASS_NAME = "btn-inverse btn-inverse-primary";
private _title: string;
private _message: string;
private _okay: ButtonData;
private _cancel: ButtonData;
constructor() {}
public title(value: string): DialogService {
this._title = value;
return this;
}
public message(value: string): DialogService {
this._message = value;
return this;
}
public okay(label: string, callback?: () => void): DialogService {
this._okay = {
label: label,
className: DialogService.BUTTON_CLASS_NAME,
callback: callback || function() {}
};
return this;
}
public cancel(label: string, callback?: () => void): DialogService {
this._cancel = {
label: label,
className: DialogService.BUTTON_CLASS_NAME,
callback: callback || function() {}
};
return this;
}
public alert(): void {
bootbox.dialog({
title: this._title,
message: this._message,
buttons: {
okay: this.okay
}
});
}
public confirm(): void {
bootbox.dialog({
title: this._title,
message: this._message,
buttons: {
cancel: this._cancel,
okay: this.okay
}
});
}
}
older edit
I’m still unsure about your specific requirements. I made some adjustments and included both `confirm` and `alert` methods, though their functionalities are not entirely clear...
The `confirm` method utilizes the existing `bootbox.dialog` from your code, but for the `alert`, I improvised with a `bootbox.alert` function.
This may not be accurate, so you might need to implement it as needed...
interface ButtonData {
label: string;
className: string;
callback: () => void;
}
interface ServiceData {
title: string;
message: string;
buttons: {
cancel: ButtonData,
okay: ButtonData
};
}
class DialogService {
private static BUTTON_CLASS_NAME = "btn-inverse btn-inverse-primary";
private data: ServiceData
constructor() {
this.data = <ServiceData> {
buttons: {
cancel: <ButtonData> {},
okay: <ButtonData> {}
}
};
}
public title(value: string): DialogService {
this.data.title = value;
return this;
}
public message(value: string): DialogService {
this.data.message = value;
return this;
}
public okay(label: string, callback?: () => void): DialogService {
this.data.buttons.okay = {
label: label,
className: DialogService.BUTTON_CLASS_NAME,
callback: callback || function() {}
}
return this;
}
public cancel(label: string, callback?: () => void): DialogService {
this.data.buttons.cancel = {
label: label,
className: DialogService.BUTTON_CLASS_NAME,
callback: callback || function() {}
}
return this;
}
public confirm(): void {
bootbox.dialog(this.data);
}
public alert(): void {
bootbox.alert(this.data);
}
}