@kitten-science/kitten-scientists/lib/ui/components/Dialog.js

Add-on for the wonderful incremental browser game: https://kittensgame.com/web/

import { coalesceArray } from "@oliversalzburg/js-utils/data/nil.js";
import { Button } from "./Button.js";
import stylesButton from "./Button.module.css";
import { Container } from "./Container.js";
import { Delimiter } from "./Delimiter.js";
import styles from "./Dialog.module.css";
import stylesExplainer from "./ExplainerLiteItem.module.css";
import { HeaderListItem } from "./HeaderListItem.js";
import { Input } from "./Input.js";
import { Paragraph } from "./Paragraph.js";
import stylesToolbarListItem from "./ToolbarListItem.module.css";
import { UiComponent } from "./UiComponent.js";
export class Dialog extends UiComponent {
    element;
    returnValue;
    /**
     * Constructs a dialog.
     *
     * @param host - A reference to the host.
     * @param options - Options for the dialog.
     */
    constructor(host, options) {
        super(host, { ...options, children: [] });
        this.element = $("<dialog/>")
            .addClass("dialog")
            .addClass("help")
            .addClass(styles.dialog);
        //.addClass(stylesUserInterface.ui);
        if (options?.hasClose !== false) {
            this.addChild(new Button(host, "close", null, {
                classes: [styles.close],
                onClick: () => {
                    this.close();
                    options?.onCancel?.();
                },
            }));
        }
        this.addChildren(options?.children);
        this.returnValue = options?.promptValue ?? "";
        this.addChildren(coalesceArray([
            options?.prompt
                ? new Input(host, {
                    onChange: (value) => {
                        this.returnValue = value;
                    },
                    onEnter: (value) => {
                        this.returnValue = value;
                        this.close();
                        options.onConfirm?.(this.returnValue);
                    },
                    onEscape: (_value) => {
                        this.close();
                        options.onCancel?.();
                    },
                    selected: true,
                    value: options.promptValue,
                })
                : undefined,
            ...(options?.childrenAfterPrompt ?? []),
            new Delimiter(host),
            new Container(host, {
                children: coalesceArray([
                    new Button(host, "OK", null, {
                        classes: [stylesButton.large],
                        onClick: () => {
                            this.close();
                            options?.onConfirm?.(this.returnValue);
                        },
                    }),
                    options?.hasCancel
                        ? new Button(host, "Cancel", null, {
                            classes: [stylesButton.large],
                            onClick: () => {
                                this.close();
                                options.onCancel?.();
                            },
                        })
                        : undefined,
                ]),
                classes: [stylesToolbarListItem.toolbar],
            }),
        ]));
    }
    show() {
        $("#gamePageContainer").append(this.element);
        this.element[0].show();
    }
    showModal() {
        $("#gamePageContainer").append(this.element);
        this.element[0].showModal();
    }
    close() {
        this.element[0].close();
        this.element.remove();
    }
    static async prompt(host, text, title, initialValue, explainer) {
        return new Promise(resolve => {
            new Dialog(host, {
                children: coalesceArray([
                    title ? new HeaderListItem(host, title) : undefined,
                    new Paragraph(host, text),
                ]),
                childrenAfterPrompt: explainer
                    ? [
                        new Container(host, {
                            children: [new Paragraph(host, explainer)],
                            classes: [stylesExplainer.explainer],
                        }),
                    ]
                    : [],
                hasCancel: true,
                hasClose: false,
                onCancel: () => {
                    resolve(undefined);
                },
                onConfirm: (result) => {
                    resolve(result);
                },
                prompt: true,
                promptValue: initialValue,
            }).showModal();
        });
    }
}
//# sourceMappingURL=Dialog.js.map