@dodona/papyros/dist/frontend/components/AddFileButton.js

Scratchpad for multiple programming languages in the browser.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { customElement, state } from "lit/decorators.js";
import { PapyrosElement } from "./PapyrosElement";
import { css, html } from "lit";
import { createRef, ref } from "lit/directives/ref.js";
import { inlineInputStyles } from "./shared-styles";
import { isValidFileName } from "../../util/Util";
let AddFileButton = class AddFileButton extends PapyrosElement {
    constructor() {
        super(...arguments);
        this.adding = false;
        this.invalid = false;
        this.addInputRef = createRef();
    }
    static get styles() {
        return css `
            :host {
                display: flex;
            }

            .add-btn {
                padding: 0.375rem 0.5rem;
                border: 1px solid var(--md-sys-color-outline-variant);
                border-bottom: 2px solid var(--md-sys-color-outline-variant);
                border-radius: 0.375rem 0.375rem 0 0;
                cursor: pointer;
                font-size: 1rem;
                line-height: 1;
                background-color: var(--md-sys-color-surface);
                color: var(--md-sys-color-on-surface);
            }

            .add-btn:hover {
                opacity: 0.8;
            }

            ${inlineInputStyles}
        `;
    }
    startAdding() {
        this.adding = true;
        this.invalid = false;
    }
    confirmAdd() {
        var _a, _b;
        const name = (_b = (_a = this.addInputRef.value) === null || _a === void 0 ? void 0 : _a.value.trim()) !== null && _b !== void 0 ? _b : "";
        if (!this.papyros.io.addFile(name)) {
            return;
        }
        void this.papyros.runner.updateFile(name, "", false);
        this.adding = false;
    }
    cancelAdd() {
        this.adding = false;
    }
    onAddInput() {
        var _a, _b;
        const value = (_b = (_a = this.addInputRef.value) === null || _a === void 0 ? void 0 : _a.value.trim()) !== null && _b !== void 0 ? _b : "";
        this.invalid = !isValidFileName(value) || this.papyros.io.files.some((f) => f.name === value);
    }
    onBlur() {
        var _a, _b;
        if (!this.adding)
            return;
        const name = (_b = (_a = this.addInputRef.value) === null || _a === void 0 ? void 0 : _a.value.trim()) !== null && _b !== void 0 ? _b : "";
        if (name.length === 0) {
            this.cancelAdd();
        }
        else {
            this.confirmAdd();
        }
    }
    onAddKeydown(e) {
        if (e.key === "Enter") {
            e.preventDefault();
            this.confirmAdd();
        }
        else if (e.key === "Escape") {
            this.cancelAdd();
        }
    }
    updated() {
        var _a;
        if (this.adding) {
            (_a = this.addInputRef.value) === null || _a === void 0 ? void 0 : _a.focus();
        }
    }
    render() {
        if (this.adding) {
            return html `<input
                ${ref(this.addInputRef)}
                class=${this.invalid ? "inline-input invalid" : "inline-input"}
                placeholder=${this.t("Papyros.add_file_placeholder")}
                @input=${this.onAddInput}
                @keydown=${this.onAddKeydown}
                @blur=${this.onBlur}
            />`;
        }
        return html `<button
            class="add-btn"
            title=${this.t("Papyros.add_file")}
            aria-label=${this.t("Papyros.add_file")}
            @click=${this.startAdding}
        >
            +
        </button>`;
    }
};
__decorate([
    state()
], AddFileButton.prototype, "adding", void 0);
__decorate([
    state()
], AddFileButton.prototype, "invalid", void 0);
AddFileButton = __decorate([
    customElement("p-add-file-button")
], AddFileButton);
export { AddFileButton };
//# sourceMappingURL=AddFileButton.js.map