@iobroker/adapter-react-v5 7.0.1 → 7.1.0

package/types.d.ts

@@ -1,134 +1,141 @@
-import React from 'react';
-import { Theme as MuiTheme, Palette as MuiPalette } from '@mui/material/styles';
-import { AdminConnection, Connection } from '@iobroker/socket-client';
-import LegacyConnection from './LegacyConnection';
-
-export type Translate = (key: string, ...args: (string | number | boolean)[]) => string;
-
-export interface ConnectionProps {
-    /** The socket name. */
-    name?: string;
-    /** State IDs to always automatically subscribe to. */
-    autoSubscribes?: string[];
-    /** Automatically subscribe to logging. */
-    autoSubscribeLog?: boolean;
-    /** The protocol to use for the socket.io connection. */
-    protocol?: string;
-    /** The host name to use for the socket.io connection. */
-    host?: string;
-    /** The port to use for the socket.io connection. */
-    port?: string | number;
-    /** The socket.io connection timeout. */
-    ioTimeout?: number;
-    /** Flag to indicate if all objects should be loaded or not. Default true (not loaded) */
-    doNotLoadAllObjects?: boolean;
-    /** Flag to indicate if AccessControlList for current user will be loaded or not. Default true (not loaded) */
-    doNotLoadACL?: boolean;
-    /** Progress callback. */
-    onProgress?: (progress: number) => void;
-    /** Ready callback. */
-    onReady?: (objects: Record<string, ioBroker.Object>) => void;
-    /** Log callback. */
-    onLog?: (text: string) => void;
-    /** Error callback. */
-    onError?: (error: any) => void;
-    /** Object change callback. */
-    onObjectChange?: ioBroker.ObjectChangeHandler;
-    /** Language callback */
-    onLanguage?: (lang: ioBroker.Languages) => void;
-}
-
-export interface OldObject {
-    _id: string;
-    type: string;
-}
-
-export type ObjectChangeHandler = (id: string, obj: ioBroker.Object | null | undefined, oldObj: OldObject) => void | Promise<void>;
-
-export type ThemeName = 'dark' | 'light' | 'colored' | 'blue' | 'PT' | 'DX';
-export type ThemeType = 'dark' | 'light';
-
-export interface GenericAppProps {
-    /** Adapter instance number if known, else will be determined from url */
-    instance?: number;
-    /** The name of the adapter. */
-    adapterName?: string;
-    /** Should the bottom buttons be shown (default: true). */
-    bottomButtons?: boolean;
-    /** Additional translations. */
-    translations?: { [lang in ioBroker.Languages]?: Record<string, string>; };
-    /** Fields that should be encrypted/decrypted. */
-    encryptedFields?: string[];
-    /** Socket.io configuration. */
-    socket?: ConnectionProps;
-    /** Desired connection object */
-    Connection?: LegacyConnection | Connection | AdminConnection;
-    /** sentry DNS */
-    sentryDSN?: string;
-    /** Callback if user changes the theme. Call it to trigger change */
-    onThemeChange?: (newThemeName: ThemeName) => void;
-    classes?: Record<string, string>;
-}
-
-export interface GenericAppSettings extends GenericAppProps {
-    /** Don't load all objects on start-up. */
-    doNotLoadAllObjects?: boolean;
-}
-
-interface Palette extends MuiPalette {
-    mode: ThemeType;
-    expert: string;
-    grey: {
-        main: string;
-        dark: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        A100: string;
-        A200: string;
-        A400: string;
-        A700: string;
-    };
-}
-
-export interface IobTheme extends MuiTheme {
-    name: ThemeName;
-    palette: Palette;
-    toolbar: React.CSSProperties;
-    saveToolbar: {
-        background: string;
-        button: React.CSSProperties;
-    };
-}
-
-export type Width = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export interface GenericAppState {
-    loaded: boolean;
-    themeType: ThemeType;
-    themeName: ThemeName;
-    theme: IobTheme;
-    expertMode: boolean;
-    selectedTab: string;
-    selectedTabNum: number | undefined;
-    native: Record<string, any>;
-    errorText: string | React.JSX.Element;
-    changed: boolean;
-    connected: boolean;
-    isConfigurationError: string;
-    toast: string | React.JSX.Element;
-    bottomButtons: boolean;
-    width: Width;
-    confirmClose: boolean;
-    _alert: boolean;
-    _alertType: 'info' | 'warning' | 'error' | 'success';
-    _alertMessage: string | React.JSX.Element;
-    common?: Record<string, any>;
-}
+import type { JSX, CSSProperties } from 'react';
+import type { Theme as MuiTheme, Palette as MuiPalette } from '@mui/material/styles';
+import type { AdminConnection, Connection } from '@iobroker/socket-client';
+import type LegacyConnection from './LegacyConnection';
+
+export type Translate = (key: string, ...args: (string | number | boolean)[]) => string;
+
+/**
+ * Properties for the connection to the admin or web instance.
+ */
+export interface ConnectionProps {
+    /** The socket name. */
+    name?: string;
+    /** State IDs to always automatically subscribe to. */
+    autoSubscribes?: string[];
+    /** Automatically subscribe to logging. */
+    autoSubscribeLog?: boolean;
+    /** The protocol to use for the socket.io connection. */
+    protocol?: string;
+    /** The host name to use for the socket.io connection. */
+    host?: string;
+    /** The port to use for the socket.io connection. */
+    port?: string | number;
+    /** The socket.io connection timeout. */
+    ioTimeout?: number;
+    /** Flag to indicate if all objects should be loaded or not. Default true (not loaded) */
+    doNotLoadAllObjects?: boolean;
+    /** Flag to indicate if AccessControlList for current user will be loaded or not. Default true (not loaded) */
+    doNotLoadACL?: boolean;
+    /** Progress callback. */
+    onProgress?: (progress: number) => void;
+    /** Ready callback. */
+    onReady?: (objects: Record<string, ioBroker.Object>) => void;
+    /** Log callback. */
+    onLog?: (text: string) => void;
+    /** Error callback. */
+    onError?: (error: any) => void;
+    /** Object change callback. */
+    onObjectChange?: ioBroker.ObjectChangeHandler;
+    /** Language callback */
+    onLanguage?: (lang: ioBroker.Languages) => void;
+}
+
+export interface OldObject {
+    _id: string;
+    type: string;
+}
+
+export type ObjectChangeHandler = (
+    id: string,
+    obj: ioBroker.Object | null | undefined,
+    oldObj: OldObject,
+) => void | Promise<void>;
+
+export type ThemeName = 'dark' | 'light' | 'colored' | 'blue' | 'PT' | 'DX';
+export type ThemeType = 'dark' | 'light';
+
+export interface GenericAppProps {
+    /** Adapter instance number if known, else will be determined from url */
+    instance?: number;
+    /** The name of the adapter. */
+    adapterName?: string;
+    /** Should the bottom buttons be shown (default: true). */
+    bottomButtons?: boolean;
+    /** Additional translations. */
+    translations?: { [lang in ioBroker.Languages]?: Record<string, string> };
+    /** Fields that should be encrypted/decrypted. */
+    encryptedFields?: string[];
+    /** Socket.io configuration. */
+    socket?: ConnectionProps;
+    /** Desired connection object */
+    Connection?: LegacyConnection | Connection | AdminConnection;
+    /** sentry DNS */
+    sentryDSN?: string;
+    /** Callback if user changes the theme. Call it to trigger change */
+    onThemeChange?: (newThemeName: ThemeName) => void;
+    classes?: Record<string, string>;
+}
+
+export interface GenericAppSettings extends GenericAppProps {
+    /** Don't load all objects on start-up. */
+    doNotLoadAllObjects?: boolean;
+}
+
+interface Palette extends MuiPalette {
+    mode: ThemeType;
+    expert: string;
+    grey: {
+        main: string;
+        dark: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        A100: string;
+        A200: string;
+        A400: string;
+        A700: string;
+    };
+}
+
+export interface IobTheme extends MuiTheme {
+    name: ThemeName;
+    palette: Palette;
+    toolbar: CSSProperties;
+    saveToolbar: {
+        background: string;
+        button: CSSProperties;
+    };
+}
+
+export type Width = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface GenericAppState {
+    loaded: boolean;
+    themeType: ThemeType;
+    themeName: ThemeName;
+    theme: IobTheme;
+    expertMode: boolean;
+    selectedTab: string;
+    selectedTabNum: number | undefined;
+    native: Record<string, any>;
+    errorText: string | JSX.Element;
+    changed: boolean;
+    connected: boolean;
+    isConfigurationError: string;
+    toast: string | JSX.Element;
+    bottomButtons: boolean;
+    width: Width;
+    confirmClose: boolean;
+    _alert: boolean;
+    _alertType: 'info' | 'warning' | 'error' | 'success';
+    _alertMessage: string | JSX.Element;
+    common?: Record<string, any>;
+}

package/Components/Loaders/PT.css

@@ -1,109 +0,0 @@
-/**
- * Copyright 2021-2023 ioBroker GmbH
- *
- * MIT License
- *
- **/
-
-.logo-background-light, .logo-background-colored {
-    background: white;
-}
-.logo-background-dark, .logo-background-blue {
-    background: black;
-}
-.pt-logo-div {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -ms-transform: translateX(-50%) translateY(-50%);
-    -webkit-transform: translate(-50%,-50%);
-    transform: translate(-50%,-50%);
-    z-index: 2;
-}
-.pt-logo-border {
-    border-style: solid;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-}
-.pt-loader-block {
-    height: 65px;
-    width: 74px;
-    border-radius: 15px;
-    position: absolute;
-    box-sizing: content-box;
-}
-.pt-loader-blue {
-    border: 9px solid #0F99DE;
-    transform: rotate(5grad);
-    left: 93px;
-    top: 0;
-    animation: spin-blue 5s ease-in-out infinite;
-}
-.pt-loader-green {
-    border: 9px solid #88A536;
-    transform: rotate(-6grad);
-    left: 70px;
-    top: 58px;
-    animation: spin-green 5s ease-in-out infinite;
-}
-.pt-loader-red {
-    border: 9px solid #BD1B24;
-    transform: rotate(-15grad);
-    left: 24px;
-    top: 100px;
-    animation: spin-red 5s ease-in-out infinite;
-}
-
-@keyframes spin-blue {
-    0% {
-        transform: rotate(5deg);
-    }
-    25% {
-        transform: rotate(185deg);
-    }
-    50% {
-        transform: rotate(185deg);
-    }
-    75% {
-        transform: rotate(185deg);
-    }
-    100% {
-        transform: rotate(185deg);
-    }
-}
-@keyframes spin-green {
-    0% {
-        transform: rotate(-6deg);
-    }
-    25% {
-        transform: rotate(-6deg);
-    }
-    50% {
-        transform: rotate(174deg);
-    }
-    75% {
-        transform: rotate(174deg);
-    }
-    100% {
-        transform: rotate(-6deg);
-    }
-}
-@keyframes spin-red {
-    0% {
-        transform: rotate(-15deg);
-    }
-    25% {
-        transform: rotate(-15deg);
-    }
-    50% {
-        transform: rotate(-15deg);
-    }
-    75% {
-        transform: rotate(165deg);
-    }
-    100% {
-        transform: rotate(165deg);
-    }
-}

package/Components/Loaders/Vendor.css

@@ -1,13 +0,0 @@
-/**
- * Copyright 2021-2023 ioBroker GmbH
- *
- * MIT License
- *
- **/
-
-.logo-background-light, .logo-background-colored {
-    background: white;
-}
-.logo-background-dark, .logo-background-blue {
-    background: black;
-}

package/Components/loader.css

@@ -1,222 +0,0 @@
-/**
- * Copyright 2018-2023 Denis Haev (bluefox) <dogafox@gmail.com>
- *
- * MIT License
- *
- **/
-
-.logo-background-light, .logo-background-colored {
-    background: white;
-}
-.logo-background-dark, .logo-background-blue {
-    background: black;
-}
-.logo-div {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -ms-transform: translateX(-50%) translateY(-50%);
-    -webkit-transform: translate(-50%,-50%);
-    transform: translate(-50%,-50%);
-    overflow: hidden;
-    border-radius: 50%;
-    z-index: 2;
-}
-.logo-border {
-    /*border-color: #164477;*/
-    border-top-color: #3399CC;
-    border-left-color: #164477;
-    border-bottom-color: #164477;
-    border-right-color: #164477;
-    border-radius: 50%;
-    border-style: solid;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-}
-.logo-top {
-    position: absolute;
-    width: 4.5%;
-    height: 16%;
-    top: 0;
-    z-index: 2;
-}
-.logo-i {
-    position: absolute;
-    width: 14.5%;
-    height: 60%;
-    top: 20%;
-    left: 42%;
-    background: #3399CC;
-}
-.logo-i-top {
-    position: absolute;
-    width: 14.5%;
-    height: 4%;
-    left: 42%;
-    background: #3399CC;
-    border-radius: 100%;
-}
-.logo-back {
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    overflow: hidden;
-}
-@keyframes logo-grow {
-    0% {
-        width: 230px;
-        height: 230px;
-        transform: translate(-50%,-50%) scale(1);
-        opacity: 1
-    }
-    99% {
-        width: 230px;
-        height: 230px;
-        transform: translate(-50%,-50%) scale(10);
-        opacity: 0;
-    }
-    100% {
-        width: 0;
-        height: 0;
-        opacity: 0;
-    }
-}
-@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
-@keyframes logo-color-inside-light {
-    0% {
-        background: #FEFEFE;
-    }
-    100% {
-        background: #3399CC;
-    }
-}
-@keyframes logo-color-inside-dark {
-    0% {
-        background: #030303;
-    }
-    100% {
-        background: #3399CC;
-    }
-}
-@keyframes logo-color-inside-colored {
-    0% {
-        background: #FEFEFE;
-    }
-    100% {
-        background: #3399CC;
-    }
-}
-@keyframes logo-color-inside-blue {
-    0% {
-        background: #030303;
-    }
-    100% {
-        background: #3399CC;
-    }
-}
-
-@keyframes logo-color-outside-light {
-    0% {
-        border-color: #FEFEFE;
-    }
-    100% {
-        border-top-color: #3399CC;
-        border-left-color: #164477;
-        border-bottom-color: #164477;
-        border-right-color: #164477;
-    }
-}
-@keyframes logo-color-outside-dark  {
-    0% {
-        border-color: #040404;
-    }
-    100% {
-        border-top-color: #3399CC;
-        border-left-color: #164477;
-        border-bottom-color: #164477;
-        border-right-color: #164477;
-    }
-}
-@keyframes logo-color-outside-colored {
-    0% {
-        border-color: #FEFEFE;
-    }
-    100% {
-        border-top-color: #3399CC;
-        border-left-color: #164477;
-        border-bottom-color: #164477;
-        border-right-color: #164477;
-    }
-}
-@keyframes logo-color-outside-blue  {
-    0% {
-        border-color: #040404;
-    }
-    100% {
-        border-top-color: #3399CC;
-        border-left-color: #164477;
-        border-bottom-color: #164477;
-        border-right-color: #164477;
-    }
-}
-
-.logo-animate-wait {
-    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;
-}
-
-.logo-animate-grow-light {
-    background: #DDD;
-}
-.logo-animate-grow-dark {
-    background: #1d1d1d;
-}
-.logo-animate-grow-colored {
-    background: #DDD;
-}
-.logo-animate-grow-blue {
-    background: #1d1d1d;
-}
-
-.logo-animate-grow {
-    display: inline-block;
-    text-align: center;
-    z-index: 1;
-    top: 50%;
-    left: 50%;
-    -ms-transform: translateX(-50%) translateY(-50%);
-    -webkit-transform: translate(-50%,-50%);
-    transform: translate(-50%,-50%);
-    width: 245px;
-    height: 245px;
-    border-radius: 50%;
-    position: absolute;
-    animation: logo-grow 1s 1 ease forwards;
-}
-
-.logo-animate-color-inside-light {
-    animation: logo-color-inside-light 2.5s;
-}
-.logo-animate-color-inside-dark {
-    animation: logo-color-inside-dark 2.5s;
-}
-.logo-animate-color-inside-colored {
-    animation: logo-color-inside-colored 2.5s;
-}
-.logo-animate-color-inside-blue {
-    animation: logo-color-inside-blue 2.5s;
-}
-
-.logo-animate-color-outside-light {
-    animation: logo-color-outside-light 1.5s;
-}
-.logo-animate-color-outside-dark {
-    animation: logo-color-outside-dark 1.5s;
-}
-.logo-animate-color-outside-colored {
-    animation: logo-color-outside-colored 1.5s;
-}
-.logo-animate-color-outside-blue {
-    animation: logo-color-outside-blue 1.5s;
-}