typescript-overlay-essentials 1.0.0 → 1.2.0

package/Dropdown.tsx

@@ -5,7 +5,7 @@ import type { CSSObject } from '@emotion/react';
 import './Dropdown.css';
 
 // Um das Dropdown Menü zu nutzen, müssen die Optionen das folgende Interface nutzen:
-export interface Option<T = string> {
+export interface DropdownOption<T = string> {
   value: T;
   label: string;
   disabled?: boolean;
@@ -37,14 +37,14 @@ export interface Option<T = string> {
 
 export function Dropdown<T = string>({ selections, value, onChange, maxMenuHeight, menuPlacement, width, placeHolder, defaultValue, isMulti = false, cardColorVariant = false, ignoreDarkMode = false, ...rest} :
     {
-        selections: Option<T>[],
+        selections: DropdownOption<T>[],
         value: T | T[],
         onChange: (value: T | T[] | undefined) => void,
         maxMenuHeight?: number,
         menuPlacement?: "top" | "bottom",
         width?: React.CSSProperties["width"],
         placeHolder?: string,
-        defaultValue?: Option<T> | Option<T>[],
+        defaultValue?: DropdownOption<T> | DropdownOption<T>[],
         isMulti?: boolean,
         cardColorVariant?: boolean,
         ignoreDarkMode?: boolean,
@@ -55,7 +55,7 @@ export function Dropdown<T = string>({ selections, value, onChange, maxMenuHeigh
         const options = selections.map(({value, label, disabled, indent}) => ({value: value, label: label, isDisabled: disabled ?? false, indent}));
 
         if(!initializedRef.current && Array.isArray(value) && value.length === 0 && Array.isArray(defaultValue) && defaultValue.length > 0) {
-            value = options.filter(opt => (defaultValue as Option<T>[]).map(({value}) => (value)).includes(opt.value)).map(opt => opt.value);
+            value = options.filter(opt => (defaultValue as DropdownOption<T>[]).map(({value}) => (value)).includes(opt.value)).map(opt => opt.value);
         } 
 
         function usePrefersDarkMode() : boolean {
@@ -84,7 +84,7 @@ export function Dropdown<T = string>({ selections, value, onChange, maxMenuHeigh
         }
 
         return isMulti || Array.isArray(defaultValue) ? (
-            <Select<Option<T>, true>
+            <Select<DropdownOption<T>, true>
                 className = "custom-select" 
                 isMulti={true}
                 placeholder = {placeHolder ?? ""}
@@ -93,12 +93,12 @@ export function Dropdown<T = string>({ selections, value, onChange, maxMenuHeigh
                                 options.filter(opt => (hasId(opt.value) && (value as T[]).find(val => hasId(val) && hasId(opt.value) && val.id ===  opt.value.id))) // Dann alle Optionen, die in den values per id vorkommen
                                 : options.filter(opt => ((value as T[]).includes(opt.value))) // Ansonsten einfach alle Optionen, die in den values vorkommen
                       }
-                onChange={(selectedOption: MultiValue<Option<T>>) => {initializedRef.current = true; onChange(selectedOption.map((opt: Option<T>) => opt.value))}}
+                onChange={(selectedOption: MultiValue<DropdownOption<T>>) => {initializedRef.current = true; onChange(selectedOption.map((opt: DropdownOption<T>) => opt.value))}}
                 maxMenuHeight={maxMenuHeight ?? 280}
                 menuPlacement={menuPlacement ?? "auto"}
                 menuPosition="fixed"
                 classNamePrefix="dropdown"
-                defaultValue={options.filter(opt => (defaultValue as Option<T>[]).map(({value}) => (value)).includes(opt.value))}
+                defaultValue={options.filter(opt => (defaultValue as DropdownOption<T>[]).map(({value}) => (value)).includes(opt.value))}
                 formatOptionLabel={({ label, indent }: { label: string; indent?: number },{ context } : { context: string }) => {
                     if (context === 'menu') {
                         // Alle mit indent angegebenen Werte im Dropdown-Menü einrücken
@@ -146,7 +146,7 @@ export function Dropdown<T = string>({ selections, value, onChange, maxMenuHeigh
                 {...rest}
             />
         ) : (
-        <Select<Option<T>, false>
+        <Select<DropdownOption<T>, false>
                 className = "custom-select" 
                 isMulti={false}
                 placeholder = {placeHolder ?? ""}
@@ -155,7 +155,7 @@ export function Dropdown<T = string>({ selections, value, onChange, maxMenuHeigh
                             options.find(opt => hasId(opt.value) && hasId(value) && opt.value.id === value.id) // Die eine Option mit der passenden id finden
                             : options.find(opt => opt.value === value)} // Ohne Multi oder id nur die eine Option finden
 
-                onChange={(selectedOption: SingleValue<Option<T>>) => onChange(selectedOption?.value ?? undefined)}
+                onChange={(selectedOption: SingleValue<DropdownOption<T>>) => onChange(selectedOption?.value ?? undefined)}
                 maxMenuHeight={maxMenuHeight ?? 280}
                 menuPlacement={menuPlacement ?? "auto"}
                 menuPosition="fixed"

package/InfoOverlayWithInput.tsx

@@ -18,7 +18,7 @@ export interface InfoOverlayWithInputState {
 }
 
 // Um das InfoOverlayWithInput zu nutzen, muss der State die folgende Struktur haben:
-export const defaultInformationState : InfoOverlayWithInputState = {
+export const defaultInfoOverlayWithInputState : InfoOverlayWithInputState = {
     headline: undefined,
     message: undefined,
     preInput: undefined,
@@ -87,7 +87,7 @@ export function InfoOverlayWithInput({ state, setState }: { state: InfoOverlayWi
             handler: handler,
             handlerArgs: state.handlerArgs
         };
-        setState(defaultInformationState);
+        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')

package/Toast.tsx

@@ -1,9 +1,8 @@
-import { useEffect, useState } from 'react';
-import * as React from 'react';
+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
-function Toast({ state, setState }: { state: string, setState: (value: string) => void }) : React.ReactElement {
+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
@@ -29,6 +28,4 @@ function Toast({ state, setState }: { state: string, setState: (value: string) =
                 {toastContent}
             </div>)}
     </>
-}
-
-export default Toast;
+}

package/ToggleSwitch.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from "react";
 import "./ToggleSwitch.css";
 
-export interface Option<T> {
+export interface ToggleSwitchOption<T> {
     value: T;
     label: string;
 }
@@ -13,7 +13,7 @@ export interface Option<T> {
 // - 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: Option<T>, optionRight: Option<T>, value: T, onChange: (value: T) => void }) {
+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);

package/index.ts

@@ -1,8 +1,10 @@
 export { ConfirmationBox, ConfirmationBoxState, defaultConfirmationState } from './ConfirmationBox.tsx';
-export { Dropdown, Option } from './Dropdown.tsx';
+export { Dropdown, DropdownOption } from './Dropdown.tsx';
 export { InfoOverlay, InfoOverlayState, defaultInfoOverlayState } from './InfoOverlay.tsx';
-export { InfoOverlayWithInput, InfoOverlayWithInputState, defaultInformationState } from './InfoOverlayWithInput.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 { MultipleRadioOverlay, MultipleRadioOverlayState, defaultMultipleRadioState } from './MultipleRadioOverlay.tsx';
+export { Toast } from './Toast.tsx';
+export { ToggleSwitch, ToggleSwitchOption } from './ToggleSwitch.tsx'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-overlay-essentials",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Eine kleine Ansammlung an praktischen Tools, die out of the Box genutzt werden können. Alle enthaltenen Overlays können als Reaktion auf etwas geöffnet werden und schließen sich danach automatisch. Es beinhaltet: \\n - [ConfirmationBox]: Ein Overlay mit einer ConfirmationBox (Fortfahren / Abbrechen), \\n - [InfoOverlay]: ein simples Overlay mit einer Informationsbox die man bestätigen kann, \\n - [InfoOverlayWithInput]: Ein Overlay bei dem ein User zusätzlich ein Freitext-Feld zur Eingabe hat, \\n - [LoadingOverlay]: Ein simples Overlay mit einer Lade-animation und optionalem Ladetext, \\n - [MultipleChoiceOverlay]: Ein simples Overlay bei dem ein Nutzer aus mehreren gegebenen Aktionen auswählen kann, \\n - [MultipleRadioOverlay]: Ein simples Overlay bei dem ein Nutzer genau eine aus mehreren gegebenen Aktionen auswählen kann, \\n - [Toast]: Ein simpler Toast der für kurze Zeit grün hinterlegt in der oberen rechten Ecke des Bildschirms angezeigt wird, \\n - [ToggleSwitch]: Eine Auswahl aus zwei Optionen aus denen ein Nutzer wählen kann in der Darstellung (Option 1 | Option 2), \\n - [Dropdown]: Ein simples Dropdown-Menü (auf Basis von react-select), welches einfacherer zu Konfigurieren ist und einige default-Einstellungen hat, \\n - [InputFilter]: Ein Tool was genutzt werden kann um auf einem Inputfeld einen Regex-Filter anzuwenden und dem User so nur Eingaben erlaubt die dem Filter entsprechen.",
   "keywords": [
     "typescript",
@@ -35,5 +35,8 @@
   "main": "index.ts",
   "scripts": {
     "test": "echo \"No test needed\""
+  },
+  "dependencies": {
+    "react-select": "^5.10.2"
   }
 }