feat(react): port info modal

apps/client/src/widgets/dialogs/info.ts

@@ -1,79 +0,0 @@
-import type { EventData } from "../../components/app_context.js";
-import { t } from "../../services/i18n.js";
-import BasicWidget from "../basic_widget.js";
-import { Modal } from "bootstrap";
-import type { ConfirmDialogCallback } from "./confirm.js";
-import { openDialog } from "../../services/dialog.js";
-
-const TPL = /*html*/`
-<div class="info-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">${t("info.modalTitle")}</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t("info.closeButton")}"></button>
-            </div>
-            <div class="modal-body">
-                <div class="info-dialog-content"></div>
-            </div>
-            <div class="modal-footer">
-                <button class="info-dialog-ok-button btn btn-primary btn-sm">${t("info.okButton")}</button>
-            </div>
-        </div>
-    </div>
-</div>`;
-
-export default class InfoDialog extends BasicWidget {
-
-    private resolve: ConfirmDialogCallback | null;
-    private modal!: bootstrap.Modal;
-    private $originallyFocused!: JQuery<HTMLElement> | null;
-    private $infoContent!: JQuery<HTMLElement>;
-    private $okButton!: JQuery<HTMLElement>;
-
-    constructor() {
-        super();
-
-        this.resolve = null;
-        this.$originallyFocused = null; // element focused before the dialog was opened, so we can return to it afterward
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
-        this.$infoContent = this.$widget.find(".info-dialog-content");
-        this.$okButton = this.$widget.find(".info-dialog-ok-button");
-
-        this.$widget.on("shown.bs.modal", () => this.$okButton.trigger("focus"));
-
-        this.$widget.on("hidden.bs.modal", () => {
-            if (this.resolve) {
-                this.resolve();
-            }
-
-            if (this.$originallyFocused) {
-                this.$originallyFocused.trigger("focus");
-                this.$originallyFocused = null;
-            }
-        });
-
-        this.$okButton.on("click", () => this.modal.hide());
-    }
-
-    showInfoDialogEvent({ message, callback }: EventData<"showInfoDialog">) {
-        this.$originallyFocused = $(":focus");
-
-        if (typeof message === "string") {
-            this.$infoContent.text(message);
-        } else if (Array.isArray(message)) {
-            this.$infoContent.html(message[0]);
-        } else {
-            this.$infoContent.html(message as HTMLElement);
-        }
-
-
-        openDialog(this.$widget);
-
-        this.resolve = callback;
-    }
-}

apps/client/src/widgets/dialogs/info.tsx

@@ -0,0 +1,56 @@
+import { EventData } from "../../components/app_context";
+import ReactBasicWidget from "../react/ReactBasicWidget";
+import { ConfirmDialogCallback } from "./confirm";
+import { closeActiveDialog, openDialog } from "../../services/dialog";
+import Modal from "../react/Modal";
+import { t } from "../../services/i18n";
+import Button from "../react/Button";
+import { useRef } from "preact/compat";
+
+interface ShowInfoDialogProps {
+    message?: string | HTMLElement;
+    callback?: ConfirmDialogCallback;
+    lastElementToFocus?: HTMLElement | null;
+}
+
+function ShowInfoDialogComponent({ message, callback, lastElementToFocus }: ShowInfoDialogProps) {
+    const okButtonRef = useRef<HTMLButtonElement>(null);
+
+    return (message && <Modal
+        className="info-dialog"
+        size="sm"
+        title={t("info.modalTitle")}
+        onHidden={() => {
+            callback?.();
+            lastElementToFocus?.focus();
+        }}
+        onShown={() => okButtonRef.current?.focus?.()}
+        footer={<Button
+            buttonRef={okButtonRef}
+            text={t("info.okButton")}
+            onClick={() => closeActiveDialog()}
+        />}
+    >
+        <div className="info-dialog-content" dangerouslySetInnerHTML={{ __html: message ?? "" }}></div>
+    </Modal>);
+}
+
+export default class InfoDialog extends ReactBasicWidget {
+
+    private props: ShowInfoDialogProps = {};
+
+    get component() {
+        return <ShowInfoDialogComponent {...this.props} />;
+    }
+
+    showInfoDialogEvent({ message, callback }: EventData<"showInfoDialog">) {
+        this.props = { 
+            message: Array.isArray(message) ? message[0] : message,
+            callback,
+            lastElementToFocus: (document.activeElement as HTMLElement)
+        };
+        this.doRender();
+        openDialog(this.$widget);
+    }
+
+}

apps/client/src/widgets/react/Button.tsx

@@ -1,6 +1,9 @@
+import { RefObject } from "preact";
 import { useRef } from "preact/hooks";
 
 interface ButtonProps {
+    /** Reference to the button element. Mostly useful for requesting focus. */
+    buttonRef: RefObject<HTMLButtonElement>;
     text: string;
     className?: string;
     keyboardShortcut?: string;
@@ -8,14 +11,14 @@ interface ButtonProps {
     onClick?: () => void;
 }
 
-export default function Button({ className, text, onClick, keyboardShortcut }: ButtonProps) {
+export default function Button({ buttonRef: _buttonRef, className, text, onClick, keyboardShortcut }: ButtonProps) {
     const classes: string[] = ["btn"];
     classes.push("btn-primary");
     if (className) {
         classes.push(className);
     }
 
-    const buttonRef = useRef<HTMLButtonElement>(null);
+    const buttonRef = _buttonRef ?? useRef<HTMLButtonElement>(null);
     const splitShortcut = (keyboardShortcut ?? "").split("+");
 
     return (

apps/client/src/widgets/react/Modal.tsx

@@ -15,19 +15,27 @@ interface ModalProps {
      * Especially useful for user input that can be submitted with Enter key.
      */
     onSubmit?: () => void;
+    /** Called when the modal is shown. */
     onShown?: () => void;
+    /** Called when the modal is hidden, either via close button, backdrop click or submit. */
+    onHidden?: () => void;
     helpPageId?: string;
 }
 
-export default function Modal({ children, className, size, title, footer, onShown, onSubmit, helpPageId, maxWidth }: ModalProps) {
+export default function Modal({ children, className, size, title, footer, onShown, onSubmit, helpPageId, maxWidth, onHidden: onHidden }: ModalProps) {
     const modalRef = useRef<HTMLDivElement>(null);
 
-    if (onShown) {
+    if (onShown || onHidden) {
         useEffect(() => {
             const modalElement = modalRef.current;
             if (modalElement) {
+                if (onShown) {
                     modalElement.addEventListener("shown.bs.modal", onShown);
                 }
+                if (onHidden) {
+                    modalElement.addEventListener("hidden.bs.modal", onHidden);
+                }
+            }
         });
     }