@iobroker/adapter-react-v5 7.2.4 → 7.3.0

package/src/Components/Image.tsx

@@ -1,193 +0,0 @@
-import React, { type JSX } from 'react';
-import { Component } from 'react';
-
-import IconNoIcon from '../icons/IconNoIcon';
-
-function getElementFromSource(src: string): HTMLElement | null {
-    const svgContainer = document.createElement('div');
-    svgContainer.innerHTML = src;
-    const svg: HTMLElement = svgContainer.firstElementChild as HTMLElement;
-    if (svg?.remove) {
-        svg.remove();
-    } else if (svg) {
-        svgContainer.removeChild(svg);
-    }
-
-    svgContainer.remove();
-    return svg;
-}
-
-function serializeAttrs(map?: NamedNodeMap): Record<string, string> {
-    const ret: Record<string, string> = {};
-    if (!map) {
-        return ret;
-    }
-    for (let prop, i = 0; i < map.length; i++) {
-        const key = map[i].name;
-        if (key === 'class') {
-            prop = 'className';
-        } else if (!key.startsWith('data-')) {
-            prop = key.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());
-        } else {
-            prop = key;
-        }
-
-        ret[prop] = map[i].value;
-    }
-    return ret;
-}
-
-interface ImageProps {
-    /* The color */
-    color?: string;
-    /* The source of the image */
-    src?: string;
-    /* The image prefix (default: './files/') */
-    imagePrefix?: string;
-    /* The CSS class name */
-    className?: string;
-    /* Show image errors (or just show no image)? */
-    showError?: boolean;
-}
-
-interface ImageState {
-    svg?: boolean;
-    created?: boolean;
-    color?: string;
-    src?: string;
-    imgError?: boolean;
-    showError?: boolean;
-}
-
-/**
- * A component for displaying an image.
- */
-class Image extends Component<ImageProps, ImageState> {
-    private svg: JSX.Element | null;
-
-    static REMOTE_SERVER: boolean = window.location.hostname.includes('iobroker.in');
-
-    static REMOTE_PREFIX: string = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
-
-    constructor(props: ImageProps) {
-        super(props);
-        this.state = {
-            svg: !!this.props.src?.startsWith('data:'),
-            created: true,
-            color: this.props.color || '',
-            src: this.props.src || '',
-            imgError: false,
-            showError: !!this.props.showError,
-        };
-
-        this.svg = this.state.svg && this.state.src ? this.getSvgFromData(this.state.src) : null;
-    }
-
-    static getDerivedStateFromProps(props: ImageProps, state: ImageState): Partial<ImageState> | null {
-        const newState: ImageState = {};
-        let changed = false;
-
-        if (props && state && props.src !== state.src) {
-            newState.src = props.src;
-            newState.svg = props.src?.startsWith('data:');
-            newState.created = false;
-            changed = true;
-        }
-
-        if (props && state && props.color !== state.color) {
-            newState.color = props.color;
-            newState.created = false;
-            changed = true;
-        }
-
-        if (props && state && props.showError !== state.showError) {
-            newState.showError = props.showError;
-            changed = true;
-        }
-
-        return changed ? newState : null;
-    }
-
-    getSvgFromData(src: string): JSX.Element | null {
-        const len = 'data:image/svg+xml;base64,';
-        if (!src.startsWith(len)) {
-            return null;
-        }
-        src = src.substring(len.length);
-        try {
-            src = atob(src);
-            const svg = getElementFromSource(src) as HTMLElement;
-            const inner = svg.innerHTML;
-            const svgProps = serializeAttrs(svg.attributes);
-
-            svg.remove();
-
-            return (
-                <svg
-                    className={this.props.className}
-                    style={this.state.color ? { color: this.state.color } : {}}
-                    {...svgProps}
-                    dangerouslySetInnerHTML={{ __html: inner }}
-                />
-            );
-        } catch {
-            // ignore
-        }
-        return null;
-    }
-
-    render(): JSX.Element | null {
-        if (this.state.svg) {
-            if (!this.state.created) {
-                setTimeout(() => {
-                    this.svg = this.state.src ? this.getSvgFromData(this.state.src) : null;
-                    this.setState({ created: true });
-                }, 50);
-            }
-
-            return this.svg;
-        }
-        if (this.state.src) {
-            if (this.state.imgError || !this.state.src) {
-                return <IconNoIcon className={this.props.className} />;
-            }
-            if (
-                Image.REMOTE_SERVER &&
-                !this.state.src.startsWith('http://') &&
-                !this.state.src.startsWith('https://')
-            ) {
-                let src = (this.props.imagePrefix || '') + this.state.src;
-                if (src.startsWith('./')) {
-                    src = Image.REMOTE_PREFIX + src.substring(2);
-                } else if (!src.startsWith('/')) {
-                    src = Image.REMOTE_PREFIX + src;
-                }
-                return (
-                    <img
-                        className={this.props.className}
-                        src={`https://remote-files.iobroker.in${src}`}
-                        alt=""
-                        onError={() =>
-                            this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' })
-                        }
-                    />
-                );
-            }
-
-            return (
-                <img
-                    className={this.props.className}
-                    src={(this.props.imagePrefix || '') + this.state.src}
-                    alt=""
-                    onError={() =>
-                        this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' })
-                    }
-                />
-            );
-        }
-
-        return null;
-    }
-}
-
-export default Image;

package/src/Components/Loader.tsx

@@ -1,328 +0,0 @@
-/**
- * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
- *
- * MIT License
- *
- */
-import React, { useEffect } from 'react';
-import type { ThemeName, ThemeType } from '../types';
-// import './loader.css'
-
-declare global {
-    interface Window {
-        loadingBackgroundImage: undefined | string;
-        loadingBackgroundColor: undefined | string;
-        loadingHideLogo: undefined | 'true';
-    }
-}
-
-const loaderStyles = `
-/**
- * Copyright 2018-2024 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;
-}
-`;
-
-interface LoaderProps {
-    /** The size in pixels of this loader. */
-    size?: number;
-    /** The chosen theme type. */
-    themeType?: ThemeType;
-    /** Theme name */
-    themeName?: ThemeName;
-    /** @deprecated Theme name. use themeName instead */
-    theme?: ThemeName;
-    /** Background color */
-    backgroundColor?: string;
-    /** Background image URL */
-    backgroundImage?: string;
-}
-
-function Loader(props: LoaderProps): React.JSX.Element {
-    useEffect(() => {
-        if (!window.document.getElementById('loader-iobroker-component')) {
-            const style = window.document.createElement('style');
-            style.setAttribute('id', 'loader-iobroker-component');
-            style.innerHTML = loaderStyles;
-            window.document.head.appendChild(style);
-        }
-    }, []);
-
-    const size = props.size || 234;
-    const theme = props.themeName || props.theme || props.themeType || 'light';
-    return (
-        <div
-            className={`logo-back logo-background-${theme}`}
-            style={{
-                backgroundImage:
-                    props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'
-                        ? props.backgroundImage
-                        : window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'
-                          ? `url(${window.loadingBackgroundImage})`
-                          : undefined,
-                backgroundColor:
-                    props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'
-                        ? props.backgroundColor
-                        : window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'
-                          ? window.loadingBackgroundColor
-                          : undefined,
-                backgroundSize: 'cover',
-            }}
-        >
-            {window.loadingHideLogo === 'true' ? null : (
-                <>
-                    <div
-                        className="logo-div"
-                        style={{ width: size, height: size }}
-                    >
-                        <div
-                            className={`logo-top logo-background-${theme}`}
-                            style={{ left: '37%' }}
-                        />
-                        <div
-                            className={`logo-top logo-background-${theme}`}
-                            style={{ left: '57%' }}
-                        />
-                        <div
-                            className={`logo-border logo-background-${theme} logo-animate-wait`}
-                            style={{ borderWidth: size * 0.132 }}
-                        />
-                        <div className={`logo-i logo-animate-color-inside-${theme}`} />
-                        <div
-                            className={`logo-i-top logo-animate-color-inside-${theme}`}
-                            style={{ top: '18%' }}
-                        />
-                        <div
-                            className={`logo-i-top logo-animate-color-inside-${theme}`}
-                            style={{ bottom: '18%' }}
-                        />
-                    </div>
-                    <div
-                        className={`logo-animate-grow logo-animate-grow-${theme}`}
-                        style={{ width: size + 11, height: size + 11 }}
-                    />
-                </>
-            )}
-        </div>
-    );
-}
-
-export default Loader;

package/src/Components/Logo.tsx

@@ -1,176 +0,0 @@
-import React from 'react';
-import { Fab } from '@mui/material';
-
-import {
-    Help as IconHelp,
-    VerticalAlignTop as IconUpload,
-    VerticalAlignBottom as IconDownload,
-} from '@mui/icons-material';
-
-import I18n from '../i18n';
-import Icon from './Icon';
-
-interface LogoProps {
-    /* Adapter common configuration from io-package.json */
-    common: any;
-    /* Adapter native data from io-package.json */
-    native: any;
-    /* Adapter instance number. */
-    instance: number;
-    /* on Load handler */
-    onLoad?: (contents: any) => void;
-    /* on Error handler */
-    onError?: (error: string) => void;
-    className?: string;
-    style?: Record<string, any>;
-}
-
-class Logo extends React.Component<LogoProps> {
-    static generateFile(fileName: string, obj: any): void {
-        const el = window.document.createElement('a');
-        el.setAttribute(
-            'href',
-            `data:application/json;charset=utf-8,${encodeURIComponent(JSON.stringify(obj, null, 2))}`,
-        );
-        el.setAttribute('download', fileName);
-
-        el.style.display = 'none';
-        window.document.body.appendChild(el);
-
-        el.click();
-
-        window.document.body.removeChild(el);
-    }
-
-    handleFileSelect = (evt: Event): void => {
-        const target = evt.target as HTMLInputElement;
-        const files = target?.files;
-        if (!files || !files.length) {
-            console.error('No files found. Please report to developers');
-            return;
-        }
-        const f = files[0];
-
-        if (f) {
-            const r = new window.FileReader();
-            r.onload = () => {
-                const contents: string = r.result?.toString() || '';
-                try {
-                    const json = JSON.parse(contents);
-                    if (json.native && json.common) {
-                        if (json.common.name !== this.props.common.name) {
-                            this.props.onError && this.props.onError(I18n.t('ra_otherConfig', json.common.name));
-                        } else {
-                            this.props.onLoad && this.props.onLoad(json.native);
-                        }
-                    } else {
-                        this.props.onError && this.props.onError(I18n.t('ra_invalidConfig'));
-                    }
-                } catch (err: any) {
-                    this.props.onError && this.props.onError(err?.toString());
-                }
-            };
-            r.readAsText(f);
-        } else {
-            alert('Failed to open JSON File');
-        }
-    };
-
-    download(): void {
-        const result = {
-            _id: `system.adapter.${this.props.common.name}.${this.props.instance}`,
-            common: JSON.parse(JSON.stringify(this.props.common)),
-            native: this.props.native,
-        };
-        // remove unimportant information
-        if (result.common.news) {
-            delete result.common.news;
-        }
-        if (result.common.titleLang) {
-            delete result.common.titleLang;
-        }
-        if (result.common.desc) {
-            delete result.common.desc;
-        }
-
-        // window.open('data:application/iobroker; content-disposition=attachment; filename=' + result._id + '.json,' + JSON.stringify(result, null, 2));
-        Logo.generateFile(`${result._id}.json`, result);
-    }
-
-    upload(): void {
-        const input = window.document.createElement('input');
-        input.setAttribute('type', 'file');
-        input.setAttribute('id', 'files');
-        input.setAttribute('opacity', '0');
-        input.addEventListener('change', this.handleFileSelect, false);
-        input.click();
-    }
-
-    render(): React.JSX.Element {
-        return (
-            <div
-                className={this.props.className}
-                style={this.props.style}
-            >
-                {this.props.common.icon ? (
-                    <Icon
-                        src={this.props.common.icon}
-                        style={{
-                            padding: 8,
-                            width: 64,
-                        }}
-                        alt="logo"
-                    />
-                ) : null}
-                {this.props.common.readme ? (
-                    <Fab
-                        size="small"
-                        color="primary"
-                        aria-label="Help"
-                        style={{
-                            marginRight: 5,
-                            marginTop: 5,
-                            float: 'right',
-                        }}
-                        onClick={() => {
-                            const win = window.open(this.props.common.readme, '_blank');
-                            win?.focus();
-                        }}
-                    >
-                        <IconHelp />
-                    </Fab>
-                ) : null}
-                <Fab
-                    size="small"
-                    color="primary"
-                    aria-label="Load config"
-                    style={{
-                        marginRight: 5,
-                        marginTop: 5,
-                        float: 'right',
-                    }}
-                    title={I18n.t('ra_Load configuration from file')}
-                    onClick={() => this.upload()}
-                >
-                    <IconUpload />
-                </Fab>
-                <Fab
-                    size="small"
-                    color="primary"
-                    aria-label="Save config"
-                    style={{
-                        marginRight: 5,
-                        marginTop: 5,
-                        float: 'right',
-                    }}
-                    title={I18n.t('ra_Save configuration to file')}
-                    onClick={() => this.download()}
-                >
-                    <IconDownload />
-                </Fab>
-            </div>
-        );
-    }
-}
-
-export default Logo;