ui/ButtonGroup.tstypescript
import { ToggleButton } from "./ToggleButton";
import { createEvents } from "../Events";
import type { EventsHandler } from "../Events";
interface IButtonGroupParams {
buttons?: ToggleButton[];
}
type ButtonGroupEventsList = ["change"];
const BUTTONGROUP_EVENTS: ButtonGroupEventsList = ["change"];
class ButtonGroup {
public events: EventsHandler<ButtonGroupEventsList>;
protected _buttons: ToggleButton[];
constructor(options: IButtonGroupParams = {}) {
this.events = createEvents<ButtonGroupEventsList>(BUTTONGROUP_EVENTS);
this._buttons = options.buttons || [];
for (let i = 0; i < this._buttons.length; i++) {
this._bindButton(this._buttons[i]);
}
}
protected _bindButton(button: ToggleButton) {
button.events.on("change", this._onChange);
}
public add(button: ToggleButton) {
this._buttons.push(button);
this._bindButton(button);
}
protected _onChange = (isActive: boolean, btn: ToggleButton) => {
if (isActive) {
btn.preventClick = true;
for (let i = 0; i < this._buttons.length; i++) {
let bi = this._buttons[i];
if (!bi.isEqual(btn)) {
bi.setActive(false);
bi.preventClick = false;
}
}
this.events.dispatch(this.events.change, btn);
}
};
public remove(button: ToggleButton) {
for (let i = 0; i < this._buttons.length; i++) {
if (this._buttons[i].isEqual(button)) {
this._buttons.splice(i);
button.events.off("change", this._onChange);
return;
}
}
}
}
export { ButtonGroup };