@iobroker/adapter-react-v5 7.0.1 → 7.1.0

package/src/Components/SelectWithIcon.tsx

@@ -1,197 +1,239 @@
-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 type { InputProps } from '@mui/material/Input';
+
+import type { 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(): 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);
+        } 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}
+                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;
+                        }
+                    }
+
+                    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,57 @@
-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): 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}
+        >
+            <Grid
+                container
+                direction="column"
+                wrap="nowrap"
+                sx={styles.container}
+            >
+                {props.children}
+            </Grid>
+        </Paper>
+    );
+}
+
+export default TabContainer;

package/src/Components/TabContent.tsx

@@ -1,37 +1,38 @@
-// 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 { Grid2 } 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): React.JSX.Element {
+    return (
+        <Grid2
+            sx={{
+                ...styles.root,
+                ...(props?.style || undefined),
+                ...(props.overflow === 'auto' ? styles.overflowAuto : undefined),
+            }}
+        >
+            {props.children}
+        </Grid2>
+    );
+}
+
+export default TabContent;