@iobroker/adapter-react-v5 7.0.2 → 7.1.0

package/src/Components/loader.css

@@ -5,10 +5,12 @@
  *
  **/
 
-.logo-background-light, .logo-background-colored {
+.logo-background-light,
+.logo-background-colored {
     background: white;
 }
-.logo-background-dark, .logo-background-blue {
+.logo-background-dark,
+.logo-background-blue {
     background: black;
 }
 .logo-div {
@@ -16,15 +18,15 @@
     top: 50%;
     left: 50%;
     -ms-transform: translateX(-50%) translateY(-50%);
-    -webkit-transform: translate(-50%,-50%);
-    transform: translate(-50%,-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-top-color: #3399cc;
     border-left-color: #164477;
     border-bottom-color: #164477;
     border-right-color: #164477;
@@ -48,14 +50,14 @@
     height: 60%;
     top: 20%;
     left: 42%;
-    background: #3399CC;
+    background: #3399cc;
 }
 .logo-i-top {
     position: absolute;
     width: 14.5%;
     height: 4%;
     left: 42%;
-    background: #3399CC;
+    background: #3399cc;
     border-radius: 100%;
 }
 .logo-back {
@@ -68,13 +70,13 @@
     0% {
         width: 230px;
         height: 230px;
-        transform: translate(-50%,-50%) scale(1);
-        opacity: 1
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
     }
     99% {
         width: 230px;
         height: 230px;
-        transform: translate(-50%,-50%) scale(10);
+        transform: translate(-50%, -50%) scale(10);
         opacity: 0;
     }
     100% {
@@ -83,13 +85,18 @@
         opacity: 0;
     }
 }
-@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+@keyframes logo-spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
 @keyframes logo-color-inside-light {
     0% {
-        background: #FEFEFE;
+        background: #fefefe;
     }
     100% {
-        background: #3399CC;
+        background: #3399cc;
     }
 }
 @keyframes logo-color-inside-dark {
@@ -97,15 +104,15 @@
         background: #030303;
     }
     100% {
-        background: #3399CC;
+        background: #3399cc;
     }
 }
 @keyframes logo-color-inside-colored {
     0% {
-        background: #FEFEFE;
+        background: #fefefe;
     }
     100% {
-        background: #3399CC;
+        background: #3399cc;
     }
 }
 @keyframes logo-color-inside-blue {
@@ -113,27 +120,27 @@
         background: #030303;
     }
     100% {
-        background: #3399CC;
+        background: #3399cc;
     }
 }
 
 @keyframes logo-color-outside-light {
     0% {
-        border-color: #FEFEFE;
+        border-color: #fefefe;
     }
     100% {
-        border-top-color: #3399CC;
+        border-top-color: #3399cc;
         border-left-color: #164477;
         border-bottom-color: #164477;
         border-right-color: #164477;
     }
 }
-@keyframes logo-color-outside-dark  {
+@keyframes logo-color-outside-dark {
     0% {
         border-color: #040404;
     }
     100% {
-        border-top-color: #3399CC;
+        border-top-color: #3399cc;
         border-left-color: #164477;
         border-bottom-color: #164477;
         border-right-color: #164477;
@@ -141,21 +148,21 @@
 }
 @keyframes logo-color-outside-colored {
     0% {
-        border-color: #FEFEFE;
+        border-color: #fefefe;
     }
     100% {
-        border-top-color: #3399CC;
+        border-top-color: #3399cc;
         border-left-color: #164477;
         border-bottom-color: #164477;
         border-right-color: #164477;
     }
 }
-@keyframes logo-color-outside-blue  {
+@keyframes logo-color-outside-blue {
     0% {
         border-color: #040404;
     }
     100% {
-        border-top-color: #3399CC;
+        border-top-color: #3399cc;
         border-left-color: #164477;
         border-bottom-color: #164477;
         border-right-color: #164477;
@@ -163,17 +170,19 @@
 }
 
 .logo-animate-wait {
-    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;
+    animation:
+        logo-color-outside 1.5s,
+        logo-spin 1.5s linear infinite;
 }
 
 .logo-animate-grow-light {
-    background: #DDD;
+    background: #ddd;
 }
 .logo-animate-grow-dark {
     background: #1d1d1d;
 }
 .logo-animate-grow-colored {
-    background: #DDD;
+    background: #ddd;
 }
 .logo-animate-grow-blue {
     background: #1d1d1d;
@@ -186,8 +195,8 @@
     top: 50%;
     left: 50%;
     -ms-transform: translateX(-50%) translateY(-50%);
-    -webkit-transform: translate(-50%,-50%);
-    transform: translate(-50%,-50%);
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
     width: 245px;
     height: 245px;
     border-radius: 50%;
@@ -219,4 +228,4 @@
 }
 .logo-animate-color-outside-blue {
     animation: logo-color-outside-blue 1.5s;
-}
+}

package/src/Components/withWidth.tsx

@@ -1,21 +1,32 @@
-import React, { JSXElementConstructor } from 'react';
+import React, { type JSXElementConstructor, type JSX } from 'react';
 import { useTheme } from '@mui/material/styles';
-import { Breakpoint, useMediaQuery } from '@mui/material';
+import { type Breakpoint, useMediaQuery } from '@mui/material';
 
-function useWidth() {
+function useWidth(): Breakpoint {
     const theme = useTheme();
     const keys = [...theme.breakpoints.keys].reverse();
-    return keys.reduce((output: Breakpoint | null, key: Breakpoint) => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const matches = useMediaQuery(theme.breakpoints.up(key));
-        return !output && matches ? key : output;
-    }, null) || 'xs';
+    return (
+        keys.reduce((output: Breakpoint | null, key: Breakpoint) => {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const matches = useMediaQuery(theme.breakpoints.up(key));
+            return !output && matches ? key : output;
+        }, null) || 'xs'
+    );
 }
 
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-const withWidth = () => (WrappedComponent: JSXElementConstructor<any>) => (props: Record<string, any>) => {
-    const width = useWidth();
-    return <WrappedComponent {...props} width={width} />;
-};
+function withWidth() {
+    return (WrappedComponent: JSXElementConstructor<any>) => {
+        return function AnyComponent(props: Record<string, any>): JSX.Element {
+            const width = useWidth();
+            return (
+                <WrappedComponent
+                    {...props}
+                    width={width}
+                />
+            );
+        };
+    };
+}
 
 export default withWidth;

package/src/Connection.tsx

@@ -1,6 +1,4 @@
-import {
-    Connection, PROGRESS, ERRORS, PERMISSION_ERROR,
-} from '@iobroker/socket-client';
+import { Connection, PROGRESS, ERRORS, PERMISSION_ERROR } from '@iobroker/socket-client';
 
 export { PROGRESS, ERRORS, PERMISSION_ERROR };
 

package/src/Dialogs/ComplexCron.tsx

@@ -1,18 +1,8 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
-import {
-    Button,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Dialog,
-} from '@mui/material';
+import { Button, DialogTitle, DialogContent, DialogActions, Dialog } from '@mui/material';
 
-import {
-    Check as IconOk,
-    Cancel as IconCancel,
-    Delete as IconClear,
-} from '@mui/icons-material';
+import { Check as IconOk, Cancel as IconCancel, Delete as IconClear } from '@mui/icons-material';
 
 import ComplexCron from '../Components/ComplexCron';
 
@@ -60,69 +50,73 @@ class DialogComplexCron extends React.Component<DialogCronProps, DialogCronState
             }
         }
 
-        this.state =  {
+        this.state = {
             cron,
         };
     }
 
-    handleCancel() {
+    handleCancel(): void {
         this.props.onClose();
     }
 
-    handleOk() {
+    handleOk(): void {
         this.props.onOk(this.state.cron);
         this.props.onClose();
     }
 
-    handleClear() {
+    handleClear(): void {
         this.props.onOk(false);
         this.props.onClose();
     }
 
-    render() {
-        return <Dialog
-            onClose={() => {}}
-            maxWidth="md"
-            fullWidth
-            sx={{ '& .MuiDialog-paper': styles.dialogPaper }}
-            open={!0}
-            aria-labelledby="cron-dialog-title"
-        >
-            <DialogTitle id="cron-dialog-title">{this.props.title || I18n.t('ra_Define schedule...')}</DialogTitle>
-            <DialogContent style={{ height: '100%', overflow: 'hidden' }}>
-                <ComplexCron
-                    cronExpression={this.state.cron}
-                    onChange={cron => this.setState({ cron })}
-                    language={I18n.getLanguage()}
-                />
-            </DialogContent>
-            <DialogActions>
-                {!!this.props.clearButton && <Button
-                    color="grey"
-                    variant="contained"
-                    onClick={() => this.handleClear()}
-                    startIcon={<IconClear />}
-                >
-                    {this.props.clear || I18n.t('ra_Clear')}
-                </Button>}
-                <Button
-                    variant="contained"
-                    onClick={() => this.handleOk()}
-                    color="primary"
-                    startIcon={<IconOk />}
-                >
-                    {this.props.ok || I18n.t('ra_Ok')}
-                </Button>
-                <Button
-                    color="grey"
-                    variant="contained"
-                    onClick={() => this.handleCancel()}
-                    startIcon={<IconCancel />}
-                >
-                    {this.props.cancel || I18n.t('ra_Cancel')}
-                </Button>
-            </DialogActions>
-        </Dialog>;
+    render(): JSX.Element {
+        return (
+            <Dialog
+                onClose={() => {}}
+                maxWidth="md"
+                fullWidth
+                sx={{ '& .MuiDialog-paper': styles.dialogPaper }}
+                open={!0}
+                aria-labelledby="cron-dialog-title"
+            >
+                <DialogTitle id="cron-dialog-title">{this.props.title || I18n.t('ra_Define schedule...')}</DialogTitle>
+                <DialogContent style={{ height: '100%', overflow: 'hidden' }}>
+                    <ComplexCron
+                        cronExpression={this.state.cron}
+                        onChange={cron => this.setState({ cron })}
+                        language={I18n.getLanguage()}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    {!!this.props.clearButton && (
+                        <Button
+                            color="grey"
+                            variant="contained"
+                            onClick={() => this.handleClear()}
+                            startIcon={<IconClear />}
+                        >
+                            {this.props.clear || I18n.t('ra_Clear')}
+                        </Button>
+                    )}
+                    <Button
+                        variant="contained"
+                        onClick={() => this.handleOk()}
+                        color="primary"
+                        startIcon={<IconOk />}
+                    >
+                        {this.props.ok || I18n.t('ra_Ok')}
+                    </Button>
+                    <Button
+                        color="grey"
+                        variant="contained"
+                        onClick={() => this.handleCancel()}
+                        startIcon={<IconCancel />}
+                    >
+                        {this.props.cancel || I18n.t('ra_Cancel')}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
     }
 }
 

package/src/Dialogs/Confirm.tsx

@@ -1,12 +1,12 @@
 /**
- * Copyright 2019-2023 Denis Haev (bluefox) <dogafox@gmail.com>
+ * Copyright 2019-2024 Denis Haev (bluefox) <dogafox@gmail.com>
  *
  * MIT License
  *
- * */
+ */
 
 // please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
-import React, { Component } from 'react';
+import React, { Component, type JSX } from 'react';
 
 import {
     Button,
@@ -19,10 +19,7 @@ import {
     Checkbox,
 } from '@mui/material';
 
-import {
-    Check as IconCheck,
-    Close as IconClose,
-} from '@mui/icons-material';
+import { Check as IconCheck, Close as IconClose } from '@mui/icons-material';
 
 import I18n from '../i18n';
 
@@ -73,7 +70,9 @@ class DialogConfirm extends Component<DialogConfirmProps, DialogConfirmState> {
         let suppress: number | boolean = false;
 
         if (this.props.suppressQuestionMinutes) {
-            suppress = parseInt(((window as any)._localStorage || window.localStorage).getItem(this.props.dialogName), 10) || 0;
+            suppress =
+                parseInt(((window as any)._localStorage || window.localStorage).getItem(this.props.dialogName), 10) ||
+                0;
 
             if (!suppress) {
                 suppress = false;
@@ -88,74 +87,98 @@ class DialogConfirm extends Component<DialogConfirmProps, DialogConfirmState> {
         };
     }
 
-    handleOk() {
+    handleOk(): void {
         if (this.state.suppress) {
-            ((window as any)._localStorage || window.localStorage).setItem(this.props.dialogName, Date.now() + (this.props.suppressQuestionMinutes || 2) * 60000);
+            ((window as any)._localStorage || window.localStorage).setItem(
+                this.props.dialogName,
+                Date.now() + (this.props.suppressQuestionMinutes || 2) * 60000,
+            );
+        }
+        if (this.props.onClose) {
+            this.props.onClose(true);
         }
-        this.props.onClose && this.props.onClose(true);
     }
 
-    handleCancel() {
-        this.props.onClose && this.props.onClose(false);
+    handleCancel(): void {
+        if (this.props.onClose) {
+            this.props.onClose(false);
+        }
     }
 
-    render() {
+    render(): JSX.Element | null {
         if (typeof this.state.suppress === 'number') {
             setTimeout(() => this.props.onClose && this.props.onClose(true), 100);
             return null;
         }
 
-        return <Dialog
-            open={!0}
-            maxWidth="md"
-            fullWidth={this.props.fullWidth !== undefined ? this.props.fullWidth : true}
-            onClose={(event, reason) => {
-                if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
-                    this.handleCancel();
-                }
-            }}
-            aria-labelledby="ar_confirmation_dialog_title"
-            aria-describedby="ar_confirmation_dialog_description"
-        >
-            <DialogTitle id="ar_confirmation_dialog_title">{this.props.title || I18n.t('ra_Are you sure?')}</DialogTitle>
-            <DialogContent>
-                <DialogContentText id="ar_confirmation_dialog_description">
-                    {this.props.icon || null}
-                    {this.props.text}
-                    {this.props.suppressQuestionMinutes ? <br /> : null}
-                    {this.props.suppressQuestionMinutes ? <FormControlLabel
-                        sx={{ '& .FormControlLabel-label': styles.suppress, '&.FormControlLabel-root': styles.suppressRoot }}
-                        control={<Checkbox
-                            id={`ar_dialog_confirm_suppress_${this.props.dialogName || ''}`}
-                            checked={!!this.state.suppress}
-                            onChange={() => this.setState({ suppress: !this.state.suppress })}
-                        />}
-                        label={this.props.suppressText || I18n.t('ra_Suppress question for next %s minutes', (this.props.suppressQuestionMinutes || 2).toString())}
-                    /> : null}
-                </DialogContentText>
-            </DialogContent>
-            <DialogActions>
-                <Button
-                    id={`ar_dialog_confirm_ok_${this.props.dialogName || ''}`}
-                    variant="contained"
-                    onClick={() => this.handleOk()}
-                    color="primary"
-                    autoFocus
-                    startIcon={<IconCheck />}
-                >
-                    {this.props.ok || I18n.t('ra_Ok')}
-                </Button>
-                <Button
-                    id={`ar_dialog_confirm_cancel_${this.props.dialogName || ''}`}
-                    variant="contained"
-                    onClick={() => this.handleCancel()}
-                    color="grey"
-                    startIcon={<IconClose />}
-                >
-                    {this.props.cancel || I18n.t('ra_Cancel')}
-                </Button>
-            </DialogActions>
-        </Dialog>;
+        return (
+            <Dialog
+                open={!0}
+                maxWidth="md"
+                fullWidth={this.props.fullWidth !== undefined ? this.props.fullWidth : true}
+                onClose={(event, reason) => {
+                    if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
+                        this.handleCancel();
+                    }
+                }}
+                aria-labelledby="ar_confirmation_dialog_title"
+                aria-describedby="ar_confirmation_dialog_description"
+            >
+                <DialogTitle id="ar_confirmation_dialog_title">
+                    {this.props.title || I18n.t('ra_Are you sure?')}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="ar_confirmation_dialog_description">
+                        {this.props.icon || null}
+                        {this.props.text}
+                        {this.props.suppressQuestionMinutes ? <br /> : null}
+                        {this.props.suppressQuestionMinutes ? (
+                            <FormControlLabel
+                                sx={{
+                                    '& .FormControlLabel-label': styles.suppress,
+                                    '&.FormControlLabel-root': styles.suppressRoot,
+                                }}
+                                control={
+                                    <Checkbox
+                                        id={`ar_dialog_confirm_suppress_${this.props.dialogName || ''}`}
+                                        checked={!!this.state.suppress}
+                                        onChange={() => this.setState({ suppress: !this.state.suppress })}
+                                    />
+                                }
+                                label={
+                                    this.props.suppressText ||
+                                    I18n.t(
+                                        'ra_Suppress question for next %s minutes',
+                                        (this.props.suppressQuestionMinutes || 2).toString(),
+                                    )
+                                }
+                            />
+                        ) : null}
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        id={`ar_dialog_confirm_ok_${this.props.dialogName || ''}`}
+                        variant="contained"
+                        onClick={() => this.handleOk()}
+                        color="primary"
+                        autoFocus
+                        startIcon={<IconCheck />}
+                    >
+                        {this.props.ok || I18n.t('ra_Ok')}
+                    </Button>
+                    <Button
+                        id={`ar_dialog_confirm_cancel_${this.props.dialogName || ''}`}
+                        variant="contained"
+                        onClick={() => this.handleCancel()}
+                        color="grey"
+                        startIcon={<IconClose />}
+                    >
+                        {this.props.cancel || I18n.t('ra_Cancel')}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
     }
 }