@iobroker/adapter-react-v5 7.0.2 → 7.1.0

package/src/Components/Image.tsx

@@ -1,4 +1,5 @@
-import React, { Component } from 'react';
+import React, { type JSX } from 'react';
+import { Component } from 'react';
 
 import IconNoIcon from '../icons/IconNoIcon';
 
@@ -58,8 +59,11 @@ interface ImageState {
     showError?: boolean;
 }
 
+/**
+ * A component for displaying an image.
+ */
 class Image extends Component<ImageProps, ImageState> {
-    private svg: React.JSX.Element | null;
+    private svg: JSX.Element | null;
 
     static REMOTE_SERVER: boolean = window.location.hostname.includes('iobroker.in');
 
@@ -79,7 +83,7 @@ class Image extends Component<ImageProps, ImageState> {
         this.svg = this.state.svg && this.state.src ? this.getSvgFromData(this.state.src) : null;
     }
 
-    static getDerivedStateFromProps(props: ImageProps, state: ImageState) {
+    static getDerivedStateFromProps(props: ImageProps, state: ImageState): Partial<ImageState> | null {
         const newState: ImageState = {};
         let changed = false;
 
@@ -104,7 +108,7 @@ class Image extends Component<ImageProps, ImageState> {
         return changed ? newState : null;
     }
 
-    getSvgFromData(src: string): React.JSX.Element | null {
+    getSvgFromData(src: string): JSX.Element | null {
         const len = 'data:image/svg+xml;base64,';
         if (!src.startsWith(len)) {
             return null;
@@ -118,20 +122,21 @@ class Image extends Component<ImageProps, ImageState> {
 
             svg.remove();
 
-            return <svg
-                className={this.props.className}
-                style={this.state.color ? { color: this.state.color } : {}}
-                {...svgProps}
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML={{ __html: inner }}
-            />;
-        } catch (e) {
+            return (
+                <svg
+                    className={this.props.className}
+                    style={this.state.color ? { color: this.state.color } : {}}
+                    {...svgProps}
+                    dangerouslySetInnerHTML={{ __html: inner }}
+                />
+            );
+        } catch {
             // ignore
         }
         return null;
     }
 
-    render() {
+    render(): JSX.Element | null {
         if (this.state.svg) {
             if (!this.state.created) {
                 setTimeout(() => {
@@ -146,27 +151,39 @@ class Image extends Component<ImageProps, ImageState> {
             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://')) {
+            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={`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 (
+                <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;

package/src/Components/Loader.tsx

@@ -3,9 +3,9 @@
  *
  * MIT License
  *
- * */
+ */
 import React, { useEffect } from 'react';
-import { ThemeName, ThemeType } from '../types';
+import type { ThemeName, ThemeType } from '../types';
 // import './loader.css'
 
 declare global {
@@ -256,7 +256,7 @@ interface LoaderProps {
     backgroundImage?: string;
 }
 
-function Loader(props: LoaderProps) {
+function Loader(props: LoaderProps): React.JSX.Element {
     useEffect(() => {
         if (!window.document.getElementById('loader-iobroker-component')) {
             const style = window.document.createElement('style');
@@ -268,37 +268,61 @@ function Loader(props: LoaderProps) {
 
     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%' }} />
+    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-border logo-background-${theme} logo-animate-wait`}
-                        style={{ borderWidth: size * 0.132 }}
+                        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 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>;
+                </>
+            )}
+        </div>
+    );
 }
 
 export default Loader;

package/src/Components/Logo.tsx

@@ -26,9 +26,12 @@ interface LogoProps {
 }
 
 class Logo extends React.Component<LogoProps> {
-    static generateFile(fileName: string, obj: any) {
+    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(
+            'href',
+            `data:application/json;charset=utf-8,${encodeURIComponent(JSON.stringify(obj, null, 2))}`,
+        );
         el.setAttribute('download', fileName);
 
         el.style.display = 'none';
@@ -39,7 +42,7 @@ class Logo extends React.Component<LogoProps> {
         window.document.body.removeChild(el);
     }
 
-    handleFileSelect = (evt: Event) => {
+    handleFileSelect = (evt: Event): void => {
         const target = evt.target as HTMLInputElement;
         const files = target?.files;
         if (!files || !files.length) {
@@ -73,7 +76,7 @@ class Logo extends React.Component<LogoProps> {
         }
     };
 
-    download() {
+    download(): void {
         const result = {
             _id: `system.adapter.${this.props.common.name}.${this.props.instance}`,
             common: JSON.parse(JSON.stringify(this.props.common)),
@@ -94,72 +97,79 @@ class Logo extends React.Component<LogoProps> {
         Logo.generateFile(`${result._id}.json`, result);
     }
 
-    upload() {
+    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)();
+        input.click();
     }
 
-    render() {
-        return <div className={this.props.className} style={this.props.style}>
-            {this.props.common.icon ?
-                <Icon
-                    src={this.props.common.icon}
+    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={{
-                        padding: 8,
-                        width: 64,
+                        marginRight: 5,
+                        marginTop: 5,
+                        float: 'right',
                     }}
-                    alt="logo"
-                /> : null}
-            {this.props.common.readme ?
+                    title={I18n.t('ra_Load configuration from file')}
+                    onClick={() => this.upload()}
+                >
+                    <IconUpload />
+                </Fab>
                 <Fab
                     size="small"
                     color="primary"
-                    aria-label="Help"
+                    aria-label="Save config"
                     style={{
                         marginRight: 5,
                         marginTop: 5,
                         float: 'right',
                     }}
-                    onClick={() => {
-                        const win = window.open(this.props.common.readme, '_blank');
-                        win?.focus();
-                    }}
+                    title={I18n.t('ra_Save configuration to file')}
+                    onClick={() => this.download()}
                 >
-                    <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>;
+                    <IconDownload />
+                </Fab>
+            </div>
+        );
     }
 }
 

package/src/Components/MDUtils.tsx

@@ -3,7 +3,7 @@
  *
  * MIT License
  *
- * */
+ */
 import copy from './CopyToClipboard';
 
 class MDUtils {
@@ -13,10 +13,14 @@ class MDUtils {
             text = text.replace(m[0], m[0].replace(/\s/, ' '));
         }
 
-        return text.replace(/[^a-zA-Zа-яА-Я0-9]/g, '').trim().replace(/\s/g, '').toLowerCase();
+        return text
+            .replace(/[^a-zA-Zа-яА-Я0-9]/g, '')
+            .trim()
+            .replace(/\s/g, '')
+            .toLowerCase();
     }
 
-    static openLink(url: string, target?: string) {
+    static openLink(url: string, target?: string): void {
         // replace IPv6 Address with [ipv6]:port
         url = url.replace(/\/\/([0-9a-f]*:[0-9a-f]*:[0-9a-f]*:[0-9a-f]*:[0-9a-f]*:[0-9a-f]*)(:\d+)?\//i, '//[$1]$2/');
 
@@ -27,7 +31,7 @@ class MDUtils {
         }
     }
 
-    static getTitle(text: string) {
+    static getTitle(text: string): string {
         const result = MDUtils.extractHeader(text);
         let body = result.body;
         const header = result.header;
@@ -44,7 +48,7 @@ class MDUtils {
             return '';
         }
 
-        return header.title;
+        return header.title.toString();
     }
 
     static extractHeader(text: string): { header: Record<string, string | boolean | number>; body: string } {
@@ -85,7 +89,7 @@ class MDUtils {
     static removeDocsify(text: string): string {
         const m = text.match(/{docsify-[^}]*}/g);
         if (m) {
-            m.forEach(doc => text = text.replace(doc, ''));
+            m.forEach(doc => (text = text.replace(doc, '')));
         }
         return text;
     }