typescript-overlay-essentials 1.2.0 → 1.3.0

package/InfoOverlay.tsx

@@ -1,101 +0,0 @@
-import { useEffect, useState, CSSProperties } from 'react';
-import * as React from 'react';
-import './InfoOverlay.css';
-
-// Um das OnfoOverlay zu nutzen, muss der State die folgende Struktur haben:
-export interface InfoOverlayState {
-    headline?: string | undefined;
-    message?: string | undefined;
-    proceedButtonText?: string | undefined;
-    handler?: ((args?: unknown) => void) | undefined;
-    handlerArgs?: unknown;
-    addCloseButton?: boolean | undefined;
-    style?: CSSProperties | undefined;
-}
-
-// Der standard InfoOverlay Status, der zur Initialisierung genutzt werden kann
-export const defaultInfoOverlayState: InfoOverlayState = {
-    headline: undefined,
-    message: undefined,
-    proceedButtonText: undefined,
-    handler: undefined,
-    handlerArgs: undefined,
-    addCloseButton: false,
-    style: undefined,
-};
-
-// Wobei alle Attribute grundsätzlich optional sind:
-// - headline: ist die Überschrift und wird fett hinterlegt
-// - message: ist die angezeigte Nachricht
-// - proceedButtonText: ist der Text der auf dem Procceed Button stehen soll (ohne Angabe wird "OK" verwendet)
-// - handler: Funktion, die optional beim Bestätigen ausgeführt werden kann (Struktur: handler(args))
-// - handlerArgs: kann im handler als Argumente genutzt werden
-// - addCloseButton: boolscher Wert, der angibt, ob ein x oben rechts als close-Button verfügbar sein soll (bricht die Aktion ohne handler ab, standardmäßig false)
-// - style: ist der Style der Information-Box (Standardmäßig unverändert)
-
-export function InfoOverlay({ state, setState }: { state: InfoOverlayState, setState: (state: InfoOverlayState) => void }): React.ReactElement {
-
-    // Wird verwendet um das Infoverlay ein- und auszublenden
-    const [showOverlay, setShowOverlay] = useState(false);
-
-    // Sobald der State von außen aktualisiert wird triggert diese Funktion
-    // Die setzt showOverlay auf true
-    useEffect(() => {
-        if (state?.message !== undefined || state?.headline !== undefined) {
-            setShowOverlay(true);
-            setTimeout(() => { document.getElementById("infoButton")?.focus(); }, 5);
-        }
-    }, [state]);
-
-    const handleAction = () : void => {
-        setShowOverlay(false);
-        const tempState = {
-            handler: state.handler,
-            handlerArgs: state.handlerArgs
-        };
-        setState(defaultInfoOverlayState);
-        if (typeof tempState.handler === 'function')
-            tempState.handler(tempState.handlerArgs);
-    }
-
-    return showOverlay ?
-        <div className="information-overlay"
-            tabIndex={0}>
-            <div className="information-box" style={state?.style !== undefined ? state.style : {}}>
-                {state.addCloseButton?
-                    <span className="closeButton">
-                        <svg xmlns="http://www.w3.org/2000/svg"
-                            tabIndex={0}
-                            className="close-icon"
-                            onClick={() => setShowOverlay(false)}
-                            onKeyDown={(e) => {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault(); // Verhindert Scroll bei Space
-                                    setShowOverlay(false);
-                                }
-                            }}
-                            role="button" aria-label="Dialog schließen"
-                            width="24" height="24" viewBox="0 0 24 24" fill="none"
-                            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-                        </svg>
-                    </span> : 
-                <></>}
-                <p className="headline" tabIndex={0} style={{ whiteSpace: "pre-line" }}><strong>{state?.headline !== undefined ? state.headline : ""}</strong></p>
-                <p tabIndex={0} style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>{state?.message !== undefined ? state.message : ""}</p>
-                <div className="information-buttons">
-                    <button onClick={() => handleAction()}
-                        onKeyDown={(e) => {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault(); // Verhindert Scroll bei Space
-                                    handleAction();
-                                }
-                            }}
-                        className="px-4 py-2 bg-blue-600 text-white rounded"
-                        id="infoButton">
-                        {state?.proceedButtonText !== undefined ? state.proceedButtonText : "OK"}
-                    </button>
-                </div>
-            </div>
-        </div> : <></>;
-}

package/InfoOverlayWithInput.css

@@ -1,88 +0,0 @@
-.information-overlay-with-input {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10000;
-}
-
-.information-box-with-input {
-    background-color: var(--Hellgrau, white);
-    color: var(--HellSchwarz,#2c2c2c);
-    padding: 2rem;
-    border-radius: 12px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
-    max-width: 500px;
-    width: 90%;
-    text-align: center;
-    animation: fadeIn 0.3s ease-in-out;
-    white-space: pre-line;
-    position: relative;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.information-box-with-input .information-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-top: 1.5rem;
-}
-
-    .information-box-with-input .information-buttons button {
-        font-size: 85%;
-        padding: 0.5rem 1.1rem;
-    }
-
-.information-box-with-input input[type="text"] {
-    margin-top: 15px;
-    padding: 0.75rem 1rem;
-    font-size: 1em;
-    color: var(--FastSchwarz, #111);
-    background-color: var(--FastWeiß, #fff);
-    box-shadow: inset 0 0 0 1px #ccc;
-}
-
-.information-box-with-input .headline {
-    margin-bottom: 0.75em;
-}
-
-/* ==== Dark Mode Support ==== */
-@media (prefers-color-scheme: dark) {
-    .information-box-with-input {
-        background-color: var(--HellSchwarz,#2c2c2c);
-        color: #fff;
-    }
-
-    .information-box-with-input input[type="text"] {
-        background-color: var(--HellSchwarz, #2c2c2c);
-        color: var(--FastWeiß, white);
-        box-shadow: inset 0 0 0 1px #444;
-    }
-}
-
-.information-box-with-input .closeButton {
-    right: 10px;
-    top: 10px;
-    position: absolute;
-}
-
-    .information-box-with-input .close-icon:hover {
-        color: var(--HSDAkzent);
-        cursor: pointer;
-    }

package/InfoOverlayWithInput.tsx

@@ -1,157 +0,0 @@
-import { useEffect, useState, CSSProperties } from 'react';
-import './InfoOverlayWithInput.css';
-
-// Um das InfoOverlayWithInput zu nutzen, muss der State die folgende Struktur haben:
-export interface InfoOverlayWithInputState {
-    headline?: string | undefined;
-    message?: string | undefined;
-    preInput?: string | undefined;
-    placeholder?: string | undefined;
-    cancelButtonText?: string | undefined;
-    proceedButtonText?: string | undefined;
-    handlerOk?: ((userInput: string, args?: unknown) => void) | undefined;
-    handlerCancel?: ((args?: unknown) => void) | undefined;
-    handlerArgs?: unknown;
-    addCloseButton?: boolean | undefined;
-    proceedButtonStyle?: CSSProperties | undefined;
-    cancelButtonStyle?: CSSProperties | undefined;
-}
-
-// Um das InfoOverlayWithInput zu nutzen, muss der State die folgende Struktur haben:
-export const defaultInfoOverlayWithInputState : InfoOverlayWithInputState = {
-    headline: undefined,
-    message: undefined,
-    preInput: undefined,
-    placeholder: undefined,
-    cancelButtonText: undefined,
-    proceedButtonText: undefined,
-    handlerOk: undefined,
-    handlerCancel: undefined,
-    handlerArgs: undefined,
-    addCloseButton: false,
-    proceedButtonStyle: undefined,
-    cancelButtonStyle: undefined,
-};
-// Wobei alle Attribute grundsätzlich optional sind:
-// - headline: ist die Überschrift und wird fett hinterlegt
-// - message: ist die angezeigte Nachricht
-// - preInput: Beinhaltet den Text der schon vorher im Inputfield stehen soll (ohne Angabe wird nichts angezeigt)
-// - placeholder: Was bei leerem Inputfield als Platzhalter angezeigt wird (ohne Angabe wird nichts angezeigt)
-// - cancelButtonText: ist der Text der auf dem Cancel Button stehen soll (ohne Angabe wird "Abbrechen" verwendet)
-// - proceedButtonText: ist der Text der auf dem Proceed Button stehen soll (ohne Angabe wird "OK" verwendet)
-// - handlerOk: ist die Funktion die bei Bestätigung des Inputs ausgeführt wird (Struktur: handlerOk(userInput, handlerArgs)
-// - handlerCancel: ist die Funktion die bei Ablehnung des Inputs ausgeführt wird (Struktur: handlerCancel(handlerArgs)
-// - handlerArgs: kann im handler als Argumente genutzt werden
-// - addCloseButton: boolscher Wert, der angibt, ob ein x oben rechts als close-Button verfügbar sein soll (bricht die Aktion ohne handler ab, standardmäßig false)
-// - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
-// - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
-
-// Output: Der Input vom User wird am Ende an den handlerOk übergeben (oder bei handlerCancel ignoriert)!
-// Somit wird der handler so aufgerufen: handlerOk(UserInput, handlerArgs) oder handlerCancel(handlerArgs)
-export function InfoOverlayWithInput({ state, setState }: { state: InfoOverlayWithInputState, setState: (state: InfoOverlayWithInputState) => void }): React.ReactElement {
-
-    // Wird verwendet um das Infoverlay ein- und auszublenden
-    const [showOverlay, setShowOverlay] = useState(false);
-
-    // Wird verwendet um den Inhalt des InputFields aktuell zu halten
-    const [input, setInput] = useState<string>("");
-
-    // Sobald der State von außen aktualisiert wird triggert diese Funktion
-    // Die setzt showOverlay auf true
-    useEffect(() => {
-        if (state?.message != null || state?.headline != null) {
-            setInput(state?.preInput != null ? state.preInput : "");
-            setShowOverlay(true);
-            setTimeout(() => { document.getElementById("information-inputfield")?.focus(); }, 1);
-        }
-    }, [state]);
-
-    // Sorgt dafür, dass die Eingabe beim tippen aktualisiert wird
-    const handleInputChange = (event : React.ChangeEvent<HTMLInputElement>) => {
-        setInput(event.target.value);
-    };
-
-    // Sorgt dafür, dass auch bei Enter bestätigt wird
-    const handleInputKeyDown = (event : React.KeyboardEvent) => {
-        if (event.key === "Enter") {
-            handleAction(state.handlerOk, true);
-        }
-    };
-
-    const handleAction = (
-        handler: ((args?: unknown) => void) | ((userInput: string, args?: unknown) => void) | undefined,
-        useInput: boolean
-    ) : void => {
-        setShowOverlay(false);
-        var tempState = {
-            handler: handler,
-            handlerArgs: state.handlerArgs
-        };
-        setState(defaultInfoOverlayWithInputState);
-        if (typeof tempState.handler === 'function' && useInput)
-            (tempState.handler as ((userInput: string, args?: unknown) => void))(input, tempState.handlerArgs);
-        else if (typeof tempState.handler === 'function')
-            (tempState.handler as ((args?: unknown) => void))(tempState.handlerArgs);
-    }
-
-    return showOverlay ?
-        <div className="information-overlay-with-input">
-            <div className="information-box-with-input">
-                {state.addCloseButton?
-                    <span className="closeButton">
-                        <svg xmlns="http://www.w3.org/2000/svg"
-                            tabIndex={0}
-                            className="close-icon"
-                            onClick={() => handleAction(undefined, false)}
-                            onKeyDown={(e) => {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault(); // Verhindert Scroll bei Space
-                                    handleAction(undefined, false);
-                                }
-                            }}
-                            role="button" aria-label="Dialog schließen"
-                            width="24" height="24" viewBox="0 0 24 24" fill="none"
-                            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                            <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
-                        </svg>
-                    </span> : 
-                <></>}
-                <p className="headline" style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}><strong>{state?.headline != null ? state.headline : ""}</strong></p>
-                <p style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>{state?.message != null ? state.message : ""}</p>
-                <div className="information-input">
-                    <input
-                        id="information-inputfield"
-                        placeholder={state?.placeholder != null ? state.placeholder : ""}
-                        pattern="^[A-Za-z0-9_-~]+$"
-                        required={true}
-                        type="text"
-                        className="form-control"
-                        value={input}
-                        onChange={handleInputChange}
-                        onKeyDown={handleInputKeyDown}
-                        tabIndex={0}
-                    ></input>
-                </div>
-                <div className="information-buttons">
-                    <button onClick={() => handleAction(state.handlerCancel, false)}
-                        className="px-4 py-2 bg-gray-300 rounded"
-                        style={state?.cancelButtonStyle != null ? state.cancelButtonStyle : {}}
-                        tabIndex={0}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault(); // Verhindert Scroll bei Space
-                                handleAction(state.handlerCancel, false);
-                            }
-                        }}>
-                        {state?.cancelButtonText != null ? state.cancelButtonText : "Abbrechen"}
-                    </button>
-                    <button onClick={() => handleAction(state.handlerOk, true)}
-                        className="px-4 py-2 bg-blue-600 text-white rounded"
-                        style={state?.proceedButtonStyle != null ? state.proceedButtonStyle : {}}
-                        tabIndex = {0}>
-                        {state?.proceedButtonText != null ? state.proceedButtonText : "OK"}
-                    </button>
-                </div>
-            </div>
-        </div> : <></>;
-}

package/InputFilter.tsx

@@ -1,36 +0,0 @@
-// Restricts input for the given textbox to the given inputFilter function.
-export function setInputFilter(textbox: HTMLElement | undefined, inputFilter: (value: string) => boolean, errMsg: string) : void {
-    [ "input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout" ].forEach(function(event) {
-        if(textbox) {
-            textbox.addEventListener(event, function(e: Event) {
-                const target = e.currentTarget as HTMLInputElement;
-                if (inputFilter(target.value)) {
-                    // Accepted value.
-                    if ([ "keydown", "mousedown", "focusout" ].indexOf(e.type) >= 0){
-                    target.classList.remove("input-error");
-                    target.setCustomValidity("");
-                    }
-
-                    target.dataset.oldValue = target.value;
-                    target.dataset.oldSelectionStart = target.selectionStart?.toString() ?? "";
-                    target.dataset.oldSelectionEnd = target.selectionEnd?.toString() ?? "";
-                }
-                else if (target.dataset.oldValue !== undefined) {
-                    // Rejected value: restore the previous one.
-                    target.classList.add("input-error");
-                    target.setCustomValidity(errMsg);
-                    target.reportValidity();
-                    target.setAttribute("aria-invalid", "true");
-                    target.value = target.dataset.oldValue;
-                    const start = target.dataset.oldSelectionStart ? parseInt(target.dataset.oldSelectionStart) : 0;
-                    const end = target.dataset.oldSelectionEnd ? parseInt(target.dataset.oldSelectionEnd) : start;
-                    target.setSelectionRange(start, end);
-                }
-                else {
-                    // Rejected value: nothing to restore.
-                    target.value = "";
-                }
-            });
-        }
-    });
-    }

package/LoadingOverlay.css

@@ -1,110 +0,0 @@
-.loading-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(255, 255, 255, 0.65);
-    z-index: 2000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    backdrop-filter: blur(2px);
-}
-
-.loading-box {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-}
-
-/* Spinner (Standardfarbe für Dark Mode) */
-.loading-box .spinner {
-    width: 60px;
-    height: 60px;
-    /*border: 8px solid var(--HellSchwarz, #555);*/
-    border-top: 8px solid var(--spinner-color, #e60028);
-    border-bottom: 8px solid var(--spinner-color, #e60028);
-    border-radius: 50%;
-    animation: spin 0.75s linear infinite;
-    position: relative;
-    transition:
-        border-color 0.3s ease,
-        background-color 0.3s ease,
-        transform 0.3s ease;
-}
-
-.loading-box .spinner.is-success,
-.loading-box .spinner.is-error {
-    animation: none;
-    border-color: transparent;
-}
-
-.loading-box .spinner::before,
-.loading-box .spinner::after {
-    content: "";
-    position: absolute;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.loading-box .spinner.is-success {
-    background-color: var(--success-bg, #4caf50);
-}
-
-.loading-box .spinner.is-success::before {
-    width: 12px;
-    height: 24px;
-    border-right: 6px solid white;
-    border-bottom: 6px solid white;
-    transform: rotate(45deg);
-    left: 24px;
-    top: 8px;
-    opacity: 1;
-}
-
-.loading-box .spinner.is-error {
-    background-color: var(--error-bg, #e60028);
-}
-
-.loading-box .spinner.is-error::before,
-.loading-box .spinner.is-error::after {
-    width: 36px;
-    height: 6px;
-    background: white;
-    top: 20px;
-    left: 12px;
-    opacity: 1;
-}
-
-.loading-box .spinner.is-error::before {
-    transform: rotate(45deg);
-}
-
-.loading-box .spinner.is-error::after {
-    transform: rotate(-45deg);
-}
-
-.loading-box .loading-message {
-    font-size: 1.1em;
-    font-weight: bold;
-    text-align: center;
-    white-space: pre-line;
-    color: var(--FastSchwarz, #2c2c2c);
-    text-shadow:
-        -1px -1px 0 color-mix(in srgb, var(--Mittelgrau, white) 80%, var(--Dunkelgrau, black) 20%),
-        1px -1px 0  color-mix(in srgb, var(--Mittelgrau, white) 80%, var(--Dunkelgrau, black) 20%),
-        -1px  1px 0  color-mix(in srgb, var(--Mittelgrau, white) 80%, var(--Dunkelgrau, black) 20%),
-        1px  1px 0  color-mix(in srgb, var(--Mittelgrau, white) 80%, var(--Dunkelgrau, black) 20%);
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}

package/LoadingOverlay.tsx

@@ -1,57 +0,0 @@
-import { useEffect, useState, ReactElement } from 'react';
-import * as React from 'react';
-import './LoadingOverlay.css';
-
-// Um das LoadingOverlay zu nutzen, muss der State die folgende Struktur haben:
-export interface LoadingOverlayState {
-    isActive?: boolean;
-    message?: string | undefined;
-    color?: string | undefined;
-    showSuccess?: boolean | undefined;
-}
-
-// Der standard LoadingOverlay Status, der zur Initialisierung genutzt werden kann
-export const defaultLoadingOverlayState: LoadingOverlayState = {
-    isActive: false,
-    message: undefined,
-    color: undefined,
-    showSuccess: undefined,
-};
-
-// Wobei alle Attribute grundsätzlich optional sind:
-// - isActive: gibt an ob das Overlay gerade aktiv sein soll oder nicht
-// - message: ist die angezeigte Nachricht
-// - color: ist dir Farbe des Loading icons (ohne Angabe HSD rot)
-// - showSuccess: zeigt bei "true" ein grünes Häkchen an und bei "false" ein rot hinterlegtes X. Bei "undefined" wird die normale Ladeanimation gezeigt.
-
-export function LoadingOverlay({ state, setState }: { state: LoadingOverlayState, setState: (state: LoadingOverlayState) => void }): ReactElement {
-    // Wird verwendet um das LoadingOverlay ein- und auszublenden
-    const [showOverlay, setShowOverlay] = useState(false);
-
-    // Sobald der State von außen aktualisiert wird triggert diese Funktion
-    // Die setzt showOverlay auf true
-    useEffect(() => {
-        if (state?.isActive) {
-            setShowOverlay(true);
-        }
-        else {
-            setState(defaultLoadingOverlayState);
-            setShowOverlay(false);
-        }
-    }, [state, setState]);
-    
-    return showOverlay ? (
-        <div className="loading-overlay">
-            <div className="loading-box">
-                <div className={"spinner " + (state.showSuccess === undefined ? "is-loading" : (state.showSuccess ? "is-success" : "is-error"))}
-                    style={{
-                        "--spinner-color": state.color ?? "#e60028",
-                        "--success-bg": state.color ?? "#42ab34",
-                        "--error-bg": state.color ?? "#e60028",
-                    } as React.CSSProperties }
-                />
-                {state.message && <p className="loading-message">{state.message}</p>}
-            </div>
-        </div>
-    ) : <></>;
-}