@iobroker/adapter-react-v5 7.0.1 → 7.0.2

package/src/Components/SelectWithIcon.tsx

@@ -1,197 +1,197 @@
-import React, { Component } from 'react';
-
-import {
-    FormControl, InputLabel, MenuItem, Select,
-} from '@mui/material';
-import { InputProps } from '@mui/material/Input';
-
-import { ThemeType, Translate } from '../types';
-
-import Icon from './Icon';
-import Utils from './Utils';
-import I18n from '../i18n';
-
-const styles: Record<string, React.CSSProperties> = {
-    different: {
-        opacity: 0.5,
-    },
-    icon: {
-        width: 16,
-        height: 16,
-        marginRight: 8,
-    },
-};
-
-interface SelectWithIconProps {
-    t: Translate;
-    lang: ioBroker.Languages;
-    themeType: ThemeType;
-    value?: string;
-    onChange: (id: string) => void;
-    disabled?: boolean;
-    list?: ioBroker.Object[] | Record<string, ioBroker.Object>; // one of "list"(Array) or "options"(object) is required
-    options?: Record<string, any>; // one of "list"(Array) or "options"(object) is required
-    different?: string | boolean;
-    label?: string;
-    fullWidth?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    removePrefix?: string;
-    allowNone?: boolean;
-    inputProps?: InputProps['inputProps'];
-    dense?: boolean;
-}
-
-interface TextWithIconItem {
-    name: string;
-    value: string;
-    icon?: string;
-    color?: string;
-}
-
-interface SelectWithIconState {
-    list: TextWithIconItem[];
-}
-
-class SelectWithIcon extends Component<SelectWithIconProps, SelectWithIconState> {
-    private readonly wordDifferent: string | undefined;
-
-    private timeout: ReturnType<typeof setTimeout> | null = null;
-
-    constructor(props: SelectWithIconProps) {
-        super(props);
-
-        if (props.different) {
-            this.wordDifferent = props.t('ra___different__');
-        }
-
-        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,
-                }));
-        } 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,
-                }));
-        }
-
-        if (props.different && props.value === props.different) {
-            list.unshift({ value: props.different, name: this.wordDifferent || '' });
-        }
-
-        if (props.allowNone) {
-            list.unshift({ value: '', name: I18n.t('ra_none') });
-        }
-
-        this.state = {
-            list,
-        };
-    }
-
-    render() {
-        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);
-        } 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);
-        }
-
-        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),
-        };
-
-        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;
-                        }
-                    }
-                    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),
-                }}
-                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>;
-    }
-}
-
-export default SelectWithIcon;
+import React, { Component } from 'react';
+
+import {
+    FormControl, InputLabel, MenuItem, Select,
+} from '@mui/material';
+import { InputProps } from '@mui/material/Input';
+
+import { ThemeType, Translate } from '../types';
+
+import Icon from './Icon';
+import Utils from './Utils';
+import I18n from '../i18n';
+
+const styles: Record<string, React.CSSProperties> = {
+    different: {
+        opacity: 0.5,
+    },
+    icon: {
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },
+};
+
+interface SelectWithIconProps {
+    t: Translate;
+    lang: ioBroker.Languages;
+    themeType: ThemeType;
+    value?: string;
+    onChange: (id: string) => void;
+    disabled?: boolean;
+    list?: ioBroker.Object[] | Record<string, ioBroker.Object>; // one of "list"(Array) or "options"(object) is required
+    options?: Record<string, any>; // one of "list"(Array) or "options"(object) is required
+    different?: string | boolean;
+    label?: string;
+    fullWidth?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    removePrefix?: string;
+    allowNone?: boolean;
+    inputProps?: InputProps['inputProps'];
+    dense?: boolean;
+}
+
+interface TextWithIconItem {
+    name: string;
+    value: string;
+    icon?: string;
+    color?: string;
+}
+
+interface SelectWithIconState {
+    list: TextWithIconItem[];
+}
+
+class SelectWithIcon extends Component<SelectWithIconProps, SelectWithIconState> {
+    private readonly wordDifferent: string | undefined;
+
+    private timeout: ReturnType<typeof setTimeout> | null = null;
+
+    constructor(props: SelectWithIconProps) {
+        super(props);
+
+        if (props.different) {
+            this.wordDifferent = props.t('ra___different__');
+        }
+
+        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,
+                }));
+        } 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,
+                }));
+        }
+
+        if (props.different && props.value === props.different) {
+            list.unshift({ value: props.different, name: this.wordDifferent || '' });
+        }
+
+        if (props.allowNone) {
+            list.unshift({ value: '', name: I18n.t('ra_none') });
+        }
+
+        this.state = {
+            list,
+        };
+    }
+
+    render() {
+        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);
+        } 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);
+        }
+
+        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),
+        };
+
+        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;
+                        }
+                    }
+                    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),
+                }}
+                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>;
+    }
+}
+
+export default SelectWithIcon;

package/src/Components/TabContainer.tsx

@@ -1,55 +1,55 @@
-import React from 'react';
-
-import { Grid, 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) {
-    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}
-        >
-            {props.children}
-        </Grid>
-    </Paper>;
-}
-
-export default TabContainer;
+import React from 'react';
+
+import { Grid, 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) {
+    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}
+        >
+            {props.children}
+        </Grid>
+    </Paper>;
+}
+
+export default TabContainer;

package/src/Components/TabContent.tsx

@@ -1,37 +1,37 @@
-// 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';
-
-const styles: Record<string, React.CSSProperties> = {
-    root: {
-        height: '100%',
-        overflow: 'hidden',
-    },
-    overflowAuto: {
-        overflow: 'auto',
-    },
-};
-
-interface TabContentProps {
-    /** The content of the component. */
-    children: React.JSX.Element | (React.JSX.Element | null | React.JSX.Element[])[];
-    /** Overflow behavior */
-    overflow?: 'auto';
-
-    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>;
-}
-
-export default TabContent;
+// 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';
+
+const styles: Record<string, React.CSSProperties> = {
+    root: {
+        height: '100%',
+        overflow: 'hidden',
+    },
+    overflowAuto: {
+        overflow: 'auto',
+    },
+};
+
+interface TabContentProps {
+    /** The content of the component. */
+    children: React.JSX.Element | (React.JSX.Element | null | React.JSX.Element[])[];
+    /** Overflow behavior */
+    overflow?: 'auto';
+
+    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>;
+}
+
+export default TabContent;

package/src/Components/TabHeader.tsx

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