@iobroker/adapter-react-v5 7.1.3 → 7.2.1

package/src/Components/TabContainer.tsx

@@ -1,57 +1,57 @@
-import React from 'react';
-
-import { Grid2, Paper } from '@mui/material';
-
-const styles: Record<string, React.CSSProperties> = {
-    root: {
-        width: '100%',
-        height: '100%',
-    },
-    overflowHidden: {
-        overflow: 'hidden',
-    },
-    container: {
-        height: '100%',
-    },
-};
-
-interface TabContainerProps {
-    /* The elevation of the tab container. */
-    elevation?: number;
-    /* Set to 'visible' show the overflow. */
-    overflow?: string;
-    styles?: {
-        root?: React.CSSProperties;
-        container?: React.CSSProperties;
-    };
-    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-    tabIndex?: number;
-    /** The content of the component. */
-    children: React.ReactNode;
-}
-
-function TabContainer(props: TabContainerProps): React.JSX.Element {
-    return (
-        <Paper
-            elevation={!Number.isNaN(props.elevation) ? props.elevation : 1}
-            style={{
-                ...styles.root,
-                ...(props.styles?.root || undefined),
-                ...(props.overflow !== 'visible' ? styles.overflowHidden : undefined),
-            }}
-            onKeyDown={props.onKeyDown}
-            tabIndex={props.tabIndex}
-        >
-            <Grid2
-                container
-                direction="column"
-                wrap="nowrap"
-                sx={styles.container}
-            >
-                {props.children}
-            </Grid2>
-        </Paper>
-    );
-}
-
-export default TabContainer;
+import React from 'react';
+
+import { Grid2, Paper } from '@mui/material';
+
+const styles: Record<string, React.CSSProperties> = {
+    root: {
+        width: '100%',
+        height: '100%',
+    },
+    overflowHidden: {
+        overflow: 'hidden',
+    },
+    container: {
+        height: '100%',
+    },
+};
+
+interface TabContainerProps {
+    /* The elevation of the tab container. */
+    elevation?: number;
+    /* Set to 'visible' show the overflow. */
+    overflow?: string;
+    styles?: {
+        root?: React.CSSProperties;
+        container?: React.CSSProperties;
+    };
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    tabIndex?: number;
+    /** The content of the component. */
+    children: React.ReactNode;
+}
+
+function TabContainer(props: TabContainerProps): React.JSX.Element {
+    return (
+        <Paper
+            elevation={!Number.isNaN(props.elevation) ? props.elevation : 1}
+            style={{
+                ...styles.root,
+                ...(props.styles?.root || undefined),
+                ...(props.overflow !== 'visible' ? styles.overflowHidden : undefined),
+            }}
+            onKeyDown={props.onKeyDown}
+            tabIndex={props.tabIndex}
+        >
+            <Grid2
+                container
+                direction="column"
+                wrap="nowrap"
+                sx={styles.container}
+            >
+                {props.children}
+            </Grid2>
+        </Paper>
+    );
+}
+
+export default TabContainer;

package/src/Components/UploadImage.tsx

@@ -478,8 +478,20 @@ class UploadImage extends Component<UploadImageProps, UploadImageState> {
     render(): JSX.Element {
         const { disabled, icon, removeIconFunc, error, crop, onChange } = this.props;
         const maxSize = this.props.maxSize || 10 * 1024;
-        const accept = this.props.accept || { 'image/*': [] };
+        let accept = this.props.accept || { 'image/*': [] };
         const { uploadFile, anchorEl, cropHandler } = this.state;
+
+        // covert '"image/png"' to { 'image/*': [] }
+        if (typeof accept === 'string') {
+            accept = { [accept]: [] };
+        } else if (Array.isArray(accept)) {
+            const result: Record<string, string[]> = {};
+            accept.forEach(item => {
+                result[item] = [];
+            });
+            accept = result;
+        }
+
         return (
             <Dropzone
                 disabled={!!disabled || cropHandler}
@@ -535,7 +547,7 @@ class UploadImage extends Component<UploadImageProps, UploadImageState> {
                                     <div style={styles.buttonRemoveWrapper}>
                                         <Tooltip
                                             title={I18n.t('ra_Clear')}
-                                            componentsProps={{ popper: { sx: { pointerEvents: 'none' } } }}
+                                            slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}
                                         >
                                             <IconButton
                                                 size="large"
@@ -554,7 +566,7 @@ class UploadImage extends Component<UploadImageProps, UploadImageState> {
                                 <div style={styles.buttonCropWrapper}>
                                     <Tooltip
                                         title={I18n.t('ra_Crop')}
-                                        componentsProps={{ popper: { sx: { pointerEvents: 'none' } } }}
+                                        slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}
                                     >
                                         <IconButton
                                             size="large"

package/src/Dialogs/ComplexCron.tsx

@@ -1,163 +1,163 @@
-import React, { type JSX } from 'react';
-
-import { Button, DialogTitle, DialogContent, DialogActions, Dialog } from '@mui/material';
-
-import { Check as IconOk, Cancel as IconCancel, Delete as IconClear } from '@mui/icons-material';
-
-import ComplexCron from '../Components/ComplexCron';
-import ConfirmDialog from '../Dialogs/Confirm';
-
-import I18n from '../i18n';
-
-// Generate cron expression
-const styles: Record<string, React.CSSProperties> = {
-    headerID: {
-        fontWeight: 'bold',
-        fontStyle: 'italic',
-    },
-    radio: {
-        display: 'inline-block',
-    },
-    dialogPaper: {
-        height: 'calc(100% - 96px)',
-    },
-};
-
-interface DialogCronProps {
-    onClose: () => void;
-    onOk: (cron: string | false) => void;
-    title?: string;
-    cron?: string;
-    cancel?: string;
-    ok?: string;
-    clear?: string;
-    clearButton?: boolean;
-}
-
-interface DialogCronState {
-    cron: string;
-    showWarning: '' | 'everySecond' | 'everyMinute';
-}
-
-class DialogComplexCron extends React.Component<DialogCronProps, DialogCronState> {
-    constructor(props: DialogCronProps) {
-        super(props);
-        let cron;
-        if (this.props.cron && typeof this.props.cron === 'string' && this.props.cron.replace(/^["']/, '')[0] !== '{') {
-            cron = this.props.cron.replace(/['"]/g, '').trim();
-        } else {
-            cron = this.props.cron || '{}';
-            if (typeof cron === 'string') {
-                cron = cron.replace(/^["']/, '').replace(/["']\n?$/, '');
-            }
-        }
-
-        this.state = {
-            showWarning: '',
-            cron,
-        };
-    }
-
-    handleCancel(): void {
-        this.props.onClose();
-    }
-
-    handleOk(ignoreCheck?: boolean): void {
-        if (!ignoreCheck) {
-            // Check if the CRON will be executed every second or every minute and warn about it
-            const cron = ComplexCron.cron2state(this.state.cron);
-            if (cron.seconds === '*' || cron.seconds === '*/1') {
-                this.setState({ showWarning: 'everySecond' });
-                return;
-            }
-            if (cron.minutes === '*' || cron.minutes === '*/1') {
-                this.setState({ showWarning: 'everyMinute' });
-                return;
-            }
-        }
-
-        this.props.onOk(this.state.cron);
-        this.props.onClose();
-    }
-
-    renderWarningDialog(): JSX.Element | null {
-        if (!this.state.showWarning) {
-            return null;
-        }
-        return (
-            <ConfirmDialog
-                title={I18n.t('ra_Please confirm')}
-                text={I18n.t(
-                    this.state.showWarning === 'everySecond'
-                        ? 'ra_The schedule will be executed every second. Are you sure?'
-                        : 'ra_The schedule will be executed every minute. Are you sure?',
-                )}
-                onClose={(ok: boolean) =>
-                    this.setState({ showWarning: '' }, () => {
-                        if (ok) {
-                            this.handleOk(true);
-                        }
-                    })
-                }
-            />
-        );
-    }
-
-    handleClear(): void {
-        this.props.onOk(false);
-        this.props.onClose();
-    }
-
-    render(): JSX.Element {
-        return (
-            <Dialog
-                onClose={() => {}}
-                maxWidth="md"
-                fullWidth
-                sx={{ '& .MuiDialog-paper': styles.dialogPaper }}
-                open={!0}
-                aria-labelledby="cron-dialog-title"
-            >
-                {this.renderWarningDialog()}
-                <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>
-        );
-    }
-}
-
-export default DialogComplexCron;
+import React, { type JSX } from 'react';
+
+import { Button, DialogTitle, DialogContent, DialogActions, Dialog } from '@mui/material';
+
+import { Check as IconOk, Cancel as IconCancel, Delete as IconClear } from '@mui/icons-material';
+
+import ComplexCron from '../Components/ComplexCron';
+import ConfirmDialog from '../Dialogs/Confirm';
+
+import I18n from '../i18n';
+
+// Generate cron expression
+const styles: Record<string, React.CSSProperties> = {
+    headerID: {
+        fontWeight: 'bold',
+        fontStyle: 'italic',
+    },
+    radio: {
+        display: 'inline-block',
+    },
+    dialogPaper: {
+        height: 'calc(100% - 96px)',
+    },
+};
+
+interface DialogCronProps {
+    onClose: () => void;
+    onOk: (cron: string | false) => void;
+    title?: string;
+    cron?: string;
+    cancel?: string;
+    ok?: string;
+    clear?: string;
+    clearButton?: boolean;
+}
+
+interface DialogCronState {
+    cron: string;
+    showWarning: '' | 'everySecond' | 'everyMinute';
+}
+
+class DialogComplexCron extends React.Component<DialogCronProps, DialogCronState> {
+    constructor(props: DialogCronProps) {
+        super(props);
+        let cron;
+        if (this.props.cron && typeof this.props.cron === 'string' && this.props.cron.replace(/^["']/, '')[0] !== '{') {
+            cron = this.props.cron.replace(/['"]/g, '').trim();
+        } else {
+            cron = this.props.cron || '{}';
+            if (typeof cron === 'string') {
+                cron = cron.replace(/^["']/, '').replace(/["']\n?$/, '');
+            }
+        }
+
+        this.state = {
+            showWarning: '',
+            cron,
+        };
+    }
+
+    handleCancel(): void {
+        this.props.onClose();
+    }
+
+    handleOk(ignoreCheck?: boolean): void {
+        if (!ignoreCheck) {
+            // Check if the CRON will be executed every second or every minute and warn about it
+            const cron = ComplexCron.cron2state(this.state.cron);
+            if (cron.seconds === '*' || cron.seconds === '*/1') {
+                this.setState({ showWarning: 'everySecond' });
+                return;
+            }
+            if (cron.minutes === '*' || cron.minutes === '*/1') {
+                this.setState({ showWarning: 'everyMinute' });
+                return;
+            }
+        }
+
+        this.props.onOk(this.state.cron);
+        this.props.onClose();
+    }
+
+    renderWarningDialog(): JSX.Element | null {
+        if (!this.state.showWarning) {
+            return null;
+        }
+        return (
+            <ConfirmDialog
+                title={I18n.t('ra_Please confirm')}
+                text={I18n.t(
+                    this.state.showWarning === 'everySecond'
+                        ? 'ra_The schedule will be executed every second. Are you sure?'
+                        : 'ra_The schedule will be executed every minute. Are you sure?',
+                )}
+                onClose={(ok: boolean) =>
+                    this.setState({ showWarning: '' }, () => {
+                        if (ok) {
+                            this.handleOk(true);
+                        }
+                    })
+                }
+            />
+        );
+    }
+
+    handleClear(): void {
+        this.props.onOk(false);
+        this.props.onClose();
+    }
+
+    render(): JSX.Element {
+        return (
+            <Dialog
+                onClose={() => {}}
+                maxWidth="md"
+                fullWidth
+                sx={{ '& .MuiDialog-paper': styles.dialogPaper }}
+                open={!0}
+                aria-labelledby="cron-dialog-title"
+            >
+                {this.renderWarningDialog()}
+                <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>
+        );
+    }
+}
+
+export default DialogComplexCron;

package/src/Dialogs/Confirm.tsx

@@ -37,7 +37,7 @@ interface DialogConfirmProps {
     /** The dialog title; default: Are you sure? (translated) */
     title?: string;
     /** The dialog text */
-    text?: string | React.JSX.Element;
+    text?: string | React.JSX.Element | React.JSX.Element[];
     /** Close handler. */
     onClose?: (ok: boolean) => void;
     /** if the dialog must be fill sized */

package/src/Dialogs/Error.tsx

@@ -17,7 +17,7 @@ interface DialogErrorProps {
     /* The dialog title; default: Error (translated) */
     title?: string;
     /* The dialog text */
-    text: string | React.JSX.Element;
+    text: string | React.JSX.Element | React.JSX.Element[];
     /* Close handler. */
     onClose?: () => void;
     /* if the dialog must be fill sized */

package/src/Dialogs/Message.tsx

@@ -18,7 +18,7 @@ interface DialogMessageProps {
     /* The dialog title; default: Message (translated) */
     title?: string;
     /* The dialog text */
-    text: string | React.JSX.Element;
+    text: string | React.JSX.Element | React.JSX.Element[];
     /* Close handler. */
     onClose?: () => void;
     /* if the dialog must be fill sized */

package/src/LegacyConnection.tsx

@@ -16,6 +16,7 @@ declare global {
         registerSocketOnLoad: (func: () => void) => void;
         vendorPrefix: undefined | string;
         io: any;
+        iob: any;
     }
 }
 
@@ -410,7 +411,7 @@ class Connection {
      */
     startSocket(): void {
         // if socket io is not yet loaded
-        if (typeof window.io === 'undefined') {
+        if (typeof window.io === 'undefined' && typeof window.iob === 'undefined') {
             // if in index.html the onLoad function not defined
             if (typeof window.registerSocketOnLoad !== 'function') {
                 // poll if loaded
@@ -475,7 +476,7 @@ class Connection {
 
         const url = port ? `${protocol}://${host}:${port}${path}` : `${protocol}://${host}${path}`;
 
-        this._socket = window.io.connect(url, {
+        this._socket = (window.io || window.iob).connect(url, {
             path: path.endsWith('/') ? `${path}socket.io` : `${path}/socket.io`,
             query: 'ws=true',
             name: this.props.name,