chore(client/ts): port abstract_button, command_button, onclick_button

src/public/app/widgets/buttons/command_button.ts

@@ -0,0 +1,73 @@
+import { CommandNames } from "../../components/app_context.js";
+import keyboardActionsService, { Action } from "../../services/keyboard_actions.js";
+import AbstractButtonWidget, { AbstractButtonWidgetSettings } from "./abstract_button.js";
+
+let actions: Action[];
+
+keyboardActionsService.getActions().then(as => actions = as);
+
+// TODO: Is this actually used?
+export type ClickHandler = (widget: CommandButtonWidget, e: JQuery.ClickEvent<any, any, any, any>) => void;
+type CommandOrCallback = (CommandNames | (() => CommandNames));
+
+interface CommandButtonWidgetSettings extends AbstractButtonWidgetSettings {
+    command?: CommandOrCallback;
+    onClick?: ClickHandler;
+}
+
+export default class CommandButtonWidget extends AbstractButtonWidget<CommandButtonWidgetSettings> {
+
+    constructor() {
+        super();
+        this.settings = {
+            titlePlacement: 'right',
+            title: null,
+            icon: null,
+            onContextMenu: null
+        };
+    }
+
+    doRender() {
+        super.doRender();
+
+        if (this.settings.command) {
+            this.$widget.on("click", () => {
+                this.tooltip.hide();
+
+                if (this._command) {
+                    this.triggerCommand(this._command);
+                }
+            });
+        } else {
+            console.warn(`Button widget '${this.componentId}' has no defined command`, this.settings);
+        }
+    }
+
+    getTitle() {
+        const title = super.getTitle();
+
+        const action = actions.find(act => act.actionName === this._command);
+
+        if (action && action.effectiveShortcuts.length > 0) {
+            return `${title} (${action.effectiveShortcuts.join(", ")})`;
+        } else {
+            return title;
+        }
+    }
+
+    onClick(handler: ClickHandler) {
+        this.settings.onClick = handler;
+        return this;
+    }
+
+    command(command: CommandOrCallback) {
+        this.settings.command = command;
+        return this;
+    }
+
+    get _command() {
+        return typeof this.settings.command === "function"
+            ? this.settings.command()
+            : this.settings.command;
+    }
+}