typescript-overlay-essentials 1.2.0 → 1.3.0

package/Toast.tsx

@@ -1,31 +0,0 @@
-import { useEffect, useState, ReactElement } from 'react';
-import './Toast.css'
-
-// Zeigt einen kleinen Toast in der oberen rechten Ecke an, der nach 2,5 Sekunden wieder verschwindet
-export function Toast({ state, setState }: { state: string, setState: (value: string) => void }) : ReactElement {
-    // Wird verwendet um die Toast-Notification ein-/auszublenden
-    const [showToast, setShowToast] = useState(false);
-    // Wird verwendet um den Inhalt der Toast-Notification zu bestimmen
-    const [toastContent, setToastContent] = useState("");
-
-    useEffect(() => {
-        setToastContent(state)
-    }, [state]);
-
-    useEffect(() => {
-        if (toastContent && toastContent !== "") {
-            setShowToast(true);
-            setTimeout(() => { setState(""); }, 2500); // Hinweis nach 2,5 Sekunden wieder ausblenden
-        }
-        else {
-            setShowToast(false);
-        }
-    }, [toastContent, setState]);
-
-    return <>
-        {showToast && (
-            <div className="toast-notification">
-                {toastContent}
-            </div>)}
-    </>
-}

package/ToggleSwitch.tsx

@@ -1,56 +0,0 @@
-import React, { useRef, useEffect, useState } from "react";
-import "./ToggleSwitch.css";
-
-export interface ToggleSwitchOption<T> {
-    value: T;
-    label: string;
-}
-
-// Attribute vom ToggleSwitch:
-// - optionLeft: {value: valueLeft, label: labelLeft} Beschreibt die linke Option. valueLeft ist der Wert, der in "value" eingetragen wird und labelLeft, was als Option angezeigt wird.
-// - optionRight: {value: valueLeft, label: labelRight} Beschreibt die rechte Option. valueRight ist der Wert, der in "value" eingetragen wird und labelRight, was als Option angezeigt wird.
-// - value: Der Wert, der ausgewählt angezeigt werden soll (useState)
-// - onChange: Die Funktion die bei Änderung ausgeführt werden soll.
-//             Standardmäßig könnte z.B. {(value) => {value === valueLeft ? setValue(valueLeft) : setValue(valueRight)}} genutzt werden
-
-export function ToggleSwitch<T>({ optionLeft, optionRight, value, onChange } : { optionLeft: ToggleSwitchOption<T>, optionRight: ToggleSwitchOption<T>, value: T, onChange: (value: T) => void }) {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const optionLeftRef = useRef<HTMLDivElement>(null);
-    const optionRightRef = useRef<HTMLDivElement>(null);
-    const [sliderStyle, setSliderStyle] = useState({});
-
-    useEffect(() => {
-        const el = value === optionLeft.value ? optionLeftRef.current : optionRightRef.current;
-        const container = containerRef.current;
-
-        if (!el || !container) return;
-
-        const { offsetLeft, offsetWidth } = el;
-
-        setSliderStyle({
-            transform: `translateX(calc(${offsetLeft}px - 1rem))`,
-            width: `calc(${offsetWidth}px + 2rem)`
-        });
-    }, [value, optionLeft, optionRight]);
-
-    return (
-        <div className="toggleWrapper" ref={containerRef}>
-            <div
-                className={`toggleOption ${value === optionLeft.value ? "active" : ""}`}
-                ref={el => {optionLeftRef.current = el}}
-                onClick={() => onChange(optionLeft.value)}
-            >
-                {optionLeft.label}
-            </div>
-            <div
-                className={`toggleOption ${value === optionRight.value ? "active" : ""}`}
-                ref={el => {optionRightRef.current = el}}
-                onClick={() => onChange(optionRight.value)}
-            >
-                {optionRight.label}
-            </div>
-
-            <div className={`toggleSlider ${value === optionLeft.value ? "left" : "right"}`} style={sliderStyle}/>
-        </div>
-    );
-}

package/Toggleswitch.css

@@ -1,49 +0,0 @@
-.toggleWrapper {
-    position: relative;
-    display: flex;
-    width: fit-content; 
-    height: 40px;
-    border-radius: 20px;
-    background-color: #f9eeee;;
-    overflow: hidden;
-    cursor: pointer;
-    user-select: none;
-    font-family: sans-serif;
-    font-weight: 500;
-    float: right;
-}
-
-.toggleOption {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 2;
-    color: var(--FastSchwarz, black);
-    transition: color 0.2s;
-    margin: 1rem;
-    white-space: nowrap;
-}
-
-.toggleOption.active {
-    color: black;
-}
-
-.toggleSlider {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 50%;
-    border-radius: 20px;
-    background-color: var(--HellAkzent, red);
-    transition: transform 0.25s ease;
-    z-index: 1;
-}
-
-.toggleSlider.left {
-    transform: translateX(0%);
-}
-
-.toggleSlider.right {
-    transform: translateX(100%);
-}

package/index.ts

@@ -1,10 +0,0 @@
-export { ConfirmationBox, ConfirmationBoxState, defaultConfirmationState } from './ConfirmationBox.tsx';
-export { Dropdown, DropdownOption } from './Dropdown.tsx';
-export { InfoOverlay, InfoOverlayState, defaultInfoOverlayState } from './InfoOverlay.tsx';
-export { InfoOverlayWithInput, InfoOverlayWithInputState, defaultInfoOverlayWithInputState } from './InfoOverlayWithInput.tsx';
-export { setInputFilter } from './InputFilter.tsx';
-export { LoadingOverlay, LoadingOverlayState, defaultLoadingOverlayState } from './LoadingOverlay.tsx';
-export { MultipleChoiceOverlay, MultipleChoiceOverlayState, defaultMultipleChoiceState } from './MultipleChoiceOverlay.tsx';
-export { MultipleRadioOverlay, MultipleRadioOverlayState, defaultMultipleRadioState } from './MultipleRadioOverlay.tsx';
-export { Toast } from './Toast.tsx';
-export { ToggleSwitch, ToggleSwitchOption } from './ToggleSwitch.tsx'