@iobroker/adapter-react-v5 7.0.2 → 7.1.0

package/src/Components/SelectWithIcon.tsx

@@ -1,11 +1,9 @@
 import React, { Component } from 'react';
 
-import {
-    FormControl, InputLabel, MenuItem, Select,
-} from '@mui/material';
-import { InputProps } from '@mui/material/Input';
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import type { InputProps } from '@mui/material/Input';
 
-import { ThemeType, Translate } from '../types';
+import type { ThemeType, Translate } from '../types';
 
 import Icon from './Icon';
 import Utils from './Utils';
@@ -67,29 +65,27 @@ class SelectWithIcon extends Component<SelectWithIconProps, SelectWithIconState>
 
         let list: TextWithIconItem[];
         if (Array.isArray(props.list || props.options)) {
-            list = ((props.list || props.options) as ioBroker.Object[])
-                .map(obj => ({
-                    name: Utils.getObjectNameFromObj(obj, props.lang)
-                        .replace('system.group.', '')
-                        .replace('system.user.', '')
-                        .replace('enum.rooms.', '')
-                        .replace('enum.functions.', ''),
-                    value: obj._id,
-                    icon: obj.common?.icon,
-                    color: obj.common?.color,
-                }));
+            list = ((props.list || props.options) as ioBroker.Object[]).map(obj => ({
+                name: Utils.getObjectNameFromObj(obj, props.lang)
+                    .replace('system.group.', '')
+                    .replace('system.user.', '')
+                    .replace('enum.rooms.', '')
+                    .replace('enum.functions.', ''),
+                value: obj._id,
+                icon: obj.common?.icon,
+                color: obj.common?.color,
+            }));
         } else {
-            list = Object.values((props.list || props.options) as Record<string, ioBroker.Object>)
-                .map(obj => ({
-                    name: Utils.getObjectNameFromObj(obj, props.lang)
-                        .replace('system.group.', '')
-                        .replace('system.user.', '')
-                        .replace('enum.rooms.', '')
-                        .replace('enum.functions.', ''),
-                    value: obj._id,
-                    icon: obj.common?.icon,
-                    color: obj.common?.color,
-                }));
+            list = Object.values((props.list || props.options) as Record<string, ioBroker.Object>).map(obj => ({
+                name: Utils.getObjectNameFromObj(obj, props.lang)
+                    .replace('system.group.', '')
+                    .replace('system.user.', '')
+                    .replace('enum.rooms.', '')
+                    .replace('enum.functions.', ''),
+                value: obj._id,
+                icon: obj.common?.icon,
+                color: obj.common?.color,
+            }));
         }
 
         if (props.different && props.value === props.different) {
@@ -105,92 +101,138 @@ class SelectWithIcon extends Component<SelectWithIconProps, SelectWithIconState>
         };
     }
 
-    render() {
+    render(): React.JSX.Element {
         if (this.props.allowNone && !this.state.list.find(obj => obj.value === '')) {
-            this.timeout = this.timeout || setTimeout(() => {
-                this.timeout = null;
-                const list = JSON.parse(JSON.stringify(this.state.list));
-                list.unshift({ value: '', name: I18n.t('ra_none') });
-                this.setState({ list });
-            }, 100);
+            this.timeout =
+                this.timeout ||
+                setTimeout(() => {
+                    this.timeout = null;
+                    const list = JSON.parse(JSON.stringify(this.state.list));
+                    list.unshift({ value: '', name: I18n.t('ra_none') });
+                    this.setState({ list });
+                }, 100);
         } else if (!this.props.allowNone && this.state.list.find(obj => obj.value === '')) {
-            this.timeout = this.timeout || setTimeout(() => {
-                this.timeout = null;
-                const list = JSON.parse(JSON.stringify(this.state.list));
-                const i = this.state.list.findIndex(obj => obj.value === '');
-                list.splice(i, 1);
-                this.setState({ list });
-            }, 100);
+            this.timeout =
+                this.timeout ||
+                setTimeout(() => {
+                    this.timeout = null;
+                    const list = JSON.parse(JSON.stringify(this.state.list));
+                    const i = this.state.list.findIndex(obj => obj.value === '');
+                    list.splice(i, 1);
+                    this.setState({ list });
+                }, 100);
         }
 
-        const item = this.state.list.find(it => it.value === this.props.value || (this.props.removePrefix && it.value.replace(this.props.removePrefix, '') === this.props.value));
+        const item = this.state.list.find(
+            it =>
+                it.value === this.props.value ||
+                (this.props.removePrefix && it.value.replace(this.props.removePrefix, '') === this.props.value),
+        );
 
-        const style = this.props.value === this.props.different ? {} : {
-            color: item?.color || undefined,
-            backgroundColor: Utils.getInvertedColor(item?.color || '', this.props.themeType),
-        };
+        const style =
+            this.props.value === this.props.different
+                ? {}
+                : {
+                      color: item?.color || undefined,
+                      backgroundColor: Utils.getInvertedColor(item?.color || '', this.props.themeType),
+                  };
 
         if (this.props.dense && this.props.style) {
             Object.assign(style, this.props.style);
         }
 
-        const select = <Select
-            variant="standard"
-            disabled={this.props.disabled}
-            value={this.props.value}
-            inputProps={this.props.inputProps}
-            renderValue={(/* value */) => <span>
-                {item?.icon ? <Icon src={item?.icon} style={styles.icon} /> : null}
-                {item?.name}
-            </span>}
-            sx={{
-                '&.MuiSelect-root': this.props.value === this.props.different ? styles.different : {},
-            }}
-            classes={{
-                root: this.props.dense ? this.props.className : '',
-            }}
-            style={style}
-            onChange={el => {
-                if (this.props.different && el.target.value !== this.props.different) {
-                    let pos = null;
-                    for (let i = 0; i < this.state.list.length; i++) {
-                        if (this.state.list[i].value === this.props.different) {
-                            pos = i;
-                            break;
+        const select = (
+            <Select
+                variant="standard"
+                disabled={this.props.disabled}
+                value={this.props.value}
+                slotProps={{
+                    input: this.props.inputProps,
+                }}
+                renderValue={
+                    (/* value */) => (
+                        <span>
+                            {item?.icon ? (
+                                <Icon
+                                    src={item?.icon}
+                                    style={styles.icon}
+                                />
+                            ) : null}
+                            {item?.name}
+                        </span>
+                    )
+                }
+                sx={{
+                    '&.MuiSelect-root': this.props.value === this.props.different ? styles.different : {},
+                }}
+                classes={{
+                    root: this.props.dense ? this.props.className : '',
+                }}
+                style={style}
+                onChange={el => {
+                    if (this.props.different && el.target.value !== this.props.different) {
+                        let pos = null;
+                        for (let i = 0; i < this.state.list.length; i++) {
+                            if (this.state.list[i].value === this.props.different) {
+                                pos = i;
+                                break;
+                            }
+                        }
+                        if (pos !== null) {
+                            const list: TextWithIconItem[] = Utils.clone(this.state.list) as TextWithIconItem[];
+                            list.splice(pos, 1);
+                            this.setState({ list }, () => this.props.onChange(el.target.value));
+                            return;
                         }
                     }
-                    if (pos !== null) {
-                        const list: TextWithIconItem[] = Utils.clone(this.state.list) as TextWithIconItem[];
-                        list.splice(pos, 1);
-                        this.setState({ list }, () => this.props.onChange(el.target.value));
-                        return;
-                    }
-                }
 
-                this.props.onChange(this.props.removePrefix ? el.target.value.replace(this.props.removePrefix, '') : el.target.value);
-            }}
-        >
-            {this.state.list.map(el => <MenuItem
-                style={this.props.different && el.value === this.props.different ? styles.different : {
-                    color: el.color || undefined,
-                    backgroundColor: Utils.getInvertedColor(el.color || '', this.props.themeType),
+                    this.props.onChange(
+                        this.props.removePrefix
+                            ? el.target.value.replace(this.props.removePrefix, '')
+                            : el.target.value,
+                    );
                 }}
-                key={el.value}
-                value={el.value}
             >
-                {el.icon ? <Icon src={el.icon} style={styles.icon} /> : null}
-                {el.name}
-            </MenuItem>)}
-        </Select>;
+                {this.state.list.map(el => (
+                    <MenuItem
+                        style={
+                            this.props.different && el.value === this.props.different
+                                ? styles.different
+                                : {
+                                      color: el.color || undefined,
+                                      backgroundColor: Utils.getInvertedColor(el.color || '', this.props.themeType),
+                                  }
+                        }
+                        key={el.value}
+                        value={el.value}
+                    >
+                        {el.icon ? (
+                            <Icon
+                                src={el.icon}
+                                style={styles.icon}
+                            />
+                        ) : null}
+                        {el.name}
+                    </MenuItem>
+                ))}
+            </Select>
+        );
 
         if (this.props.dense) {
             return select;
         }
 
-        return <FormControl variant="standard" fullWidth={!!this.props.fullWidth} style={this.props.style} className={this.props.className}>
-            <InputLabel>{this.props.label}</InputLabel>
-            {select}
-        </FormControl>;
+        return (
+            <FormControl
+                variant="standard"
+                fullWidth={!!this.props.fullWidth}
+                style={this.props.style}
+                className={this.props.className}
+            >
+                <InputLabel>{this.props.label}</InputLabel>
+                {select}
+            </FormControl>
+        );
     }
 }
 

package/src/Components/TabContainer.tsx

@@ -30,26 +30,28 @@ interface TabContainerProps {
     children: React.ReactNode;
 }
 
-function TabContainer(props: TabContainerProps) {
-    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}
-    >
-        <Grid
-            container
-            direction="column"
-            wrap="nowrap"
-            sx={styles.container}
+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}
         >
-            {props.children}
-        </Grid>
-    </Paper>;
+            <Grid
+                container
+                direction="column"
+                wrap="nowrap"
+                sx={styles.container}
+            >
+                {props.children}
+            </Grid>
+        </Paper>
+    );
 }
 
 export default TabContainer;

package/src/Components/TabContent.tsx

@@ -1,6 +1,6 @@
 // please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
 import React from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 } from '@mui/material';
 
 const styles: Record<string, React.CSSProperties> = {
     root: {
@@ -21,17 +21,18 @@ interface TabContentProps {
     style?: React.CSSProperties;
 }
 
-function TabContent(props: TabContentProps) {
-    return <Grid
-        item
-        sx={{
-            ...styles.root,
-            ...(props?.style || undefined),
-            ...(props.overflow === 'auto' ? styles.overflowAuto : undefined),
-        }}
-    >
-        {props.children}
-    </Grid>;
+function TabContent(props: TabContentProps): React.JSX.Element {
+    return (
+        <Grid2
+            sx={{
+                ...styles.root,
+                ...(props?.style || undefined),
+                ...(props.overflow === 'auto' ? styles.overflowAuto : undefined),
+            }}
+        >
+            {props.children}
+        </Grid2>
+    );
 }
 
 export default TabContent;

package/src/Components/TabHeader.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
 
-import { Grid } from '@mui/material';
+import { Grid2 } from '@mui/material';
 
 interface TabHeaderProps {
     children: React.ReactNode;
 }
 
-function TabHeader(props: TabHeaderProps) {
-    return <Grid
-        item
-        container
-        alignItems="center"
-    >
-        {props.children}
-    </Grid>;
+function TabHeader(props: TabHeaderProps): React.JSX.Element {
+    return (
+        <Grid2
+            container
+            alignItems="center"
+        >
+            {props.children}
+        </Grid2>
+    );
 }
 
 export default TabHeader;

package/src/Components/TableResize.tsx

@@ -3,13 +3,10 @@
  *
  * MIT License
  *
- * */
+ */
 import React, { Component } from 'react';
 
-import {
-    Table,
-    Skeleton,
-} from '@mui/material';
+import { Table, Skeleton } from '@mui/material';
 
 interface TableResizeProps {
     name?: string;
@@ -56,27 +53,29 @@ class TableResize extends Component<TableResizeProps> {
         this.resizerCurrentWidths = [];
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
         this.resizerInstall();
     }
 
-    componentWillUnmount() {
+    componentWillUnmount(): void {
         this.resizerUninstall();
     }
 
-    resizerInstall() {
+    resizerInstall(): void {
         if (this.resizerRefTable.current && !(this.resizerRefTable.current as any)._installed) {
             (this.resizerRefTable.current as any)._installed = true;
             const ths = this.resizerRefTable.current.querySelectorAll('th');
 
-            const widthsStored = ((window as any)._localStorage || window.localStorage).getItem(`App.${this.props.name || 'history'}.table`);
+            const widthsStored = ((window as any)._localStorage || window.localStorage).getItem(
+                `App.${this.props.name || 'history'}.table`,
+            );
             this.widthFilled = false;
 
             if (widthsStored) {
                 try {
                     this.resizerCurrentWidths = JSON.parse(widthsStored);
                     this.widthFilled = true;
-                } catch (e) {
+                } catch {
                     // ignore
                 }
             }
@@ -88,7 +87,6 @@ class TableResize extends Component<TableResizeProps> {
                     const tableWidth = this.resizerRefTable.current.offsetWidth;
                     let storedWidth: number | null = 0;
                     for (let w = 0; w < this.resizerCurrentWidths.length; w++) {
-                        // eslint-disable-next-line no-restricted-properties
                         if (window.isFinite(this.resizerCurrentWidths[w] as number)) {
                             storedWidth += this.resizerCurrentWidths[w] as number;
                         } else {
@@ -128,16 +126,19 @@ class TableResize extends Component<TableResizeProps> {
         }
     }
 
-    resizerReset = () => {
+    resizerReset = (): void => {
         for (let c = 0; c < this.resizerCurrentWidths.length; c++) {
             this.resizerCurrentWidths[c] = (this.props.initialWidths || [])[c] || 'auto';
         }
 
-        ((window as any)._localStorage || window.localStorage).setItem(`App.${this.props.name || 'history'}.table`, JSON.stringify(this.resizerCurrentWidths));
+        ((window as any)._localStorage || window.localStorage).setItem(
+            `App.${this.props.name || 'history'}.table`,
+            JSON.stringify(this.resizerCurrentWidths),
+        );
         this.resizerApplyWidths();
     };
 
-    resizerUninstall() {
+    resizerUninstall(): void {
         this.installTimeout && clearTimeout(this.installTimeout);
         this.installTimeout = null;
 
@@ -155,14 +156,18 @@ class TableResize extends Component<TableResizeProps> {
         }
     }
 
-    resizerApplyWidths() {
-        const gridTemplateColumns = [];
+    resizerApplyWidths(): string | undefined {
+        const gridTemplateColumns: string[] = [];
         if (this.resizerCurrentWidths.length) {
             for (let c = 0; c < this.resizerCurrentWidths.length; c++) {
                 if (this.resizerCurrentWidths[c]) {
-                    gridTemplateColumns.push(this.resizerCurrentWidths[c] !== 'auto' ? `${this.resizerCurrentWidths[c]}px` : 'auto');
+                    gridTemplateColumns.push(
+                        this.resizerCurrentWidths[c] !== 'auto' ? `${this.resizerCurrentWidths[c]}px` : 'auto',
+                    );
                 } else if (this.props.initialWidths && this.props.initialWidths[c]) {
-                    gridTemplateColumns.push(this.props.initialWidths[c] !== 'auto' ? `${this.props.initialWidths[c]}px` : 'auto');
+                    gridTemplateColumns.push(
+                        this.props.initialWidths[c] !== 'auto' ? `${this.props.initialWidths[c]}px` : 'auto',
+                    );
                 } else {
                     gridTemplateColumns.push('auto');
                 }
@@ -170,7 +175,9 @@ class TableResize extends Component<TableResizeProps> {
         } else if (this.props.initialWidths) {
             for (let c = 0; c < this.props.initialWidths.length; c++) {
                 if (this.props.initialWidths[c]) {
-                    gridTemplateColumns.push(this.props.initialWidths[c] !== 'auto' ? `${this.props.initialWidths[c]}px` : 'auto');
+                    gridTemplateColumns.push(
+                        this.props.initialWidths[c] !== 'auto' ? `${this.props.initialWidths[c]}px` : 'auto',
+                    );
                 } else {
                     gridTemplateColumns.push('auto');
                 }
@@ -184,12 +191,14 @@ class TableResize extends Component<TableResizeProps> {
         return gridTemplateColumns.length ? gridTemplateColumns.join(' ') : undefined;
     }
 
-    resizerMouseMove = (e: MouseEvent) => {
+    resizerMouseMove = (e: MouseEvent): void => {
         if (this.resizerActiveDiv && this.resizerActiveIndex !== null) {
             const width = this.resizerOldWidth + e.clientX - this.resizerPosition;
             const widthNext = this.resizerOldWidthNext - e.clientX + this.resizerPosition;
-            if ((!this.resizerMin     || width     > this.resizerMin) &&
-                (!this.resizerMinNext || widthNext > this.resizerMinNext)) {
+            if (
+                (!this.resizerMin || width > this.resizerMin) &&
+                (!this.resizerMinNext || widthNext > this.resizerMinNext)
+            ) {
                 this.resizerCurrentWidths[this.resizerActiveIndex] = width;
                 this.resizerCurrentWidths[this.resizerActiveIndex + 1] = widthNext;
                 this.resizerApplyWidths();
@@ -197,8 +206,11 @@ class TableResize extends Component<TableResizeProps> {
         }
     };
 
-    resizerMouseUp = () => {
-        ((window as any)._localStorage || window.localStorage).setItem(`App.${this.props.name || 'history'}.table`, JSON.stringify(this.resizerCurrentWidths));
+    resizerMouseUp = (): void => {
+        ((window as any)._localStorage || window.localStorage).setItem(
+            `App.${this.props.name || 'history'}.table`,
+            JSON.stringify(this.resizerCurrentWidths),
+        );
 
         this.resizerActiveIndex = null;
         this.resizerActiveDiv = null;
@@ -206,7 +218,7 @@ class TableResize extends Component<TableResizeProps> {
         window.removeEventListener('mouseup', this.resizerMouseUp);
     };
 
-    resizerMouseDown = (e: MouseEvent) => {
+    resizerMouseDown = (e: MouseEvent): void => {
         if (this.resizerActiveIndex === null || this.resizerActiveIndex === undefined) {
             console.log(`Mouse down ${(e.target as HTMLDivElement)?.dataset.index}`);
             this.resizerActiveIndex = parseInt((e.target as HTMLDivElement)?.dataset.index || '0', 10);
@@ -224,7 +236,8 @@ class TableResize extends Component<TableResizeProps> {
             if (this.resizerCurrentWidths[this.resizerActiveIndex + 1] === 'auto') {
                 ths = ths || this.resizerRefTable.current?.querySelectorAll('th');
                 if (ths) {
-                    this.resizerCurrentWidths[this.resizerActiveIndex + 1] = ths[this.resizerActiveIndex + 1].offsetWidth;
+                    this.resizerCurrentWidths[this.resizerActiveIndex + 1] =
+                        ths[this.resizerActiveIndex + 1].offsetWidth;
                 }
             }
 
@@ -236,23 +249,25 @@ class TableResize extends Component<TableResizeProps> {
         }
     };
 
-    render() {
+    render(): React.JSX.Element {
         if (this.props.ready === false) {
             return <Skeleton />;
         }
 
         const style = { gridTemplateColumns: this.resizerApplyWidths() };
 
-        return <Table
-            stickyHeader={this.props.stickyHeader}
-            size={this.props.size || 'small'}
-            className={this.props.className}
-            sx={this.props.sx}
-            ref={this.resizerRefTable}
-            style={({ ...(this.props.style || undefined), ...style })}
-        >
-            {this.props.children}
-        </Table>;
+        return (
+            <Table
+                stickyHeader={this.props.stickyHeader}
+                size={this.props.size || 'small'}
+                className={this.props.className}
+                sx={this.props.sx}
+                ref={this.resizerRefTable}
+                style={{ ...(this.props.style || undefined), ...style }}
+            >
+                {this.props.children}
+            </Table>
+        );
     }
 }
 

package/src/Components/TextWithIcon.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Icon from './Icon';
 import Utils from './Utils';
-import { ThemeType } from '../types';
+import type { ThemeType } from '../types';
 
 const styles: Record<string, React.CSSProperties> = {
     div: {
@@ -53,7 +53,7 @@ interface TextWithIconItem {
     color?: string;
 }
 
-const TextWithIcon = (props: TextWithIconProps) => {
+const TextWithIcon = (props: TextWithIconProps): React.JSX.Element => {
     const value = props.value;
     let item: TextWithIconItem;
     const prefix = props.removePrefix || '';
@@ -125,24 +125,35 @@ const TextWithIcon = (props: TextWithIconProps) => {
         };
     }
 
-    const style = item?.color ? {
-        border:`1px solid ${Utils.invertColor(item?.color)}`,
-        color: Utils.getInvertedColor(item?.color, props.themeType || 'light', true) || undefined,
-        backgroundColor: item?.color,
-    } : {};
+    const style = item?.color
+        ? {
+              border: `1px solid ${Utils.invertColor(item?.color)}`,
+              color: Utils.getInvertedColor(item?.color, props.themeType || 'light', true) || undefined,
+              backgroundColor: item?.color,
+          }
+        : {};
 
-    return <div
-        style={{ ...(props.style || undefined), ...styles.div, ...(style || undefined) }}
-        className={Utils.clsx(props.className, props.moreClasses?.root)}
-        title={props.title || item.value}
-    >
-        {item?.icon ? <Icon
-            src={item?.icon}
-            className={props.moreClasses?.icon}
-            style={styles.icon}
-        /> : null}
-        <div style={styles.text} className={props.moreClasses?.text}>{item?.name}</div>
-    </div>;
+    return (
+        <div
+            style={{ ...(props.style || undefined), ...styles.div, ...(style || undefined) }}
+            className={Utils.clsx(props.className, props.moreClasses?.root)}
+            title={props.title || item.value}
+        >
+            {item?.icon ? (
+                <Icon
+                    src={item?.icon}
+                    className={props.moreClasses?.icon}
+                    style={styles.icon}
+                />
+            ) : null}
+            <div
+                style={styles.text}
+                className={props.moreClasses?.text}
+            >
+                {item?.name}
+            </div>
+        </div>
+    );
 };
 
 export default TextWithIcon;