@iobroker/adapter-react-v5 7.0.1 → 7.1.0

package/src/Components/TextWithIcon.tsx

@@ -1,148 +1,159 @@
-import React from 'react';
-
-import Icon from './Icon';
-import Utils from './Utils';
-import { ThemeType } from '../types';
-
-const styles: Record<string, React.CSSProperties> = {
-    div: {
-        borderRadius: 3,
-        padding: '0 3px',
-        lineHeight: '20px',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        display: 'flex',
-        alignItems: 'center',
-    },
-    icon: {
-        width: 16,
-        height: 16,
-        marginRight: 8,
-        verticalAlign: 'middle',
-    },
-    text: {
-        display: 'inline-block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-};
-
-interface TextWithIconProps {
-    lang: ioBroker.Languages;
-    themeType?: ThemeType;
-    value: string | Record<string, any>;
-    list?: ioBroker.Object[] | Record<string, ioBroker.Object>;
-    options?: Record<string, any>;
-    className?: string;
-    style?: React.CSSProperties;
-    title?: string;
-    removePrefix?: string;
-    moreClasses?: {
-        root?: string;
-        icon?: string;
-        text?: string;
-    };
-    icon?: string;
-    color?: string;
-}
-
-interface TextWithIconItem {
-    name: string;
-    value: string;
-    icon?: string;
-    color?: string;
-}
-
-const TextWithIcon = (props: TextWithIconProps) => {
-    const value = props.value;
-    let item: TextWithIconItem;
-    const prefix = props.removePrefix || '';
-
-    if (typeof value === 'string') {
-        const list = props.list || props.options;
-        if (list) {
-            // if a list is array, then it is list of ioBroker.Object
-            if (Array.isArray(list)) {
-                const _item: ioBroker.Object = list.find((obj: ioBroker.Object) => obj._id === prefix + value);
-                if (_item) {
-                    item = {
-                        name: Utils.getObjectNameFromObj(_item, props.lang).replace('system.group.', ''),
-                        value: _item._id,
-                        icon: props.icon || _item.common?.icon,
-                        color: props.color || _item.common?.color,
-                    };
-                } else {
-                    item = {
-                        name: value,
-                        value: prefix + value,
-                    };
-                }
-            } else if (list[prefix + value]) {
-                // List is object with key-value pairs: {'enum.rooms.1': {common: {name: 'Room 1'}}}
-                const obj: ioBroker.Object = list[prefix + value];
-                item = {
-                    name: Utils.getObjectNameFromObj(obj, props.lang).replace('system.group.', ''),
-                    value: obj._id,
-                    icon: props.icon || obj.common?.icon,
-                    color: props.color || obj.common?.color,
-                };
-            } else {
-                // value is a string, ignore list
-                item = {
-                    name: value,
-                    value: prefix + value,
-                    icon: props.icon,
-                    color: props.color,
-                };
-            }
-        } else {
-            item = {
-                name: value,
-                value: prefix + value,
-                icon: props.icon,
-                color: props.color,
-            };
-        }
-    } else if (!value || typeof value !== 'object') {
-        item = {
-            name: '',
-            value: '',
-            icon: props.icon,
-            color: props.color,
-        };
-    } else {
-        // Item is an ioBroker.Object
-        const obj: ioBroker.Object = value as ioBroker.Object;
-        item = {
-            name: Utils.getObjectNameFromObj(obj, props.lang)
-                .replace('system.group.', '')
-                .replace('system.user.', '')
-                .replace('enum.rooms.', '')
-                .replace('enum.functions.', ''),
-            value: obj._id,
-            icon: props.icon || obj.common?.icon,
-            color: props.color || obj.common?.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>;
-};
-
-export default TextWithIcon;
+import React from 'react';
+
+import Icon from './Icon';
+import Utils from './Utils';
+import type { ThemeType } from '../types';
+
+const styles: Record<string, React.CSSProperties> = {
+    div: {
+        borderRadius: 3,
+        padding: '0 3px',
+        lineHeight: '20px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    icon: {
+        width: 16,
+        height: 16,
+        marginRight: 8,
+        verticalAlign: 'middle',
+    },
+    text: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+};
+
+interface TextWithIconProps {
+    lang: ioBroker.Languages;
+    themeType?: ThemeType;
+    value: string | Record<string, any>;
+    list?: ioBroker.Object[] | Record<string, ioBroker.Object>;
+    options?: Record<string, any>;
+    className?: string;
+    style?: React.CSSProperties;
+    title?: string;
+    removePrefix?: string;
+    moreClasses?: {
+        root?: string;
+        icon?: string;
+        text?: string;
+    };
+    icon?: string;
+    color?: string;
+}
+
+interface TextWithIconItem {
+    name: string;
+    value: string;
+    icon?: string;
+    color?: string;
+}
+
+const TextWithIcon = (props: TextWithIconProps): React.JSX.Element => {
+    const value = props.value;
+    let item: TextWithIconItem;
+    const prefix = props.removePrefix || '';
+
+    if (typeof value === 'string') {
+        const list = props.list || props.options;
+        if (list) {
+            // if a list is array, then it is list of ioBroker.Object
+            if (Array.isArray(list)) {
+                const _item: ioBroker.Object = list.find((obj: ioBroker.Object) => obj._id === prefix + value);
+                if (_item) {
+                    item = {
+                        name: Utils.getObjectNameFromObj(_item, props.lang).replace('system.group.', ''),
+                        value: _item._id,
+                        icon: props.icon || _item.common?.icon,
+                        color: props.color || _item.common?.color,
+                    };
+                } else {
+                    item = {
+                        name: value,
+                        value: prefix + value,
+                    };
+                }
+            } else if (list[prefix + value]) {
+                // List is object with key-value pairs: {'enum.rooms.1': {common: {name: 'Room 1'}}}
+                const obj: ioBroker.Object = list[prefix + value];
+                item = {
+                    name: Utils.getObjectNameFromObj(obj, props.lang).replace('system.group.', ''),
+                    value: obj._id,
+                    icon: props.icon || obj.common?.icon,
+                    color: props.color || obj.common?.color,
+                };
+            } else {
+                // value is a string, ignore list
+                item = {
+                    name: value,
+                    value: prefix + value,
+                    icon: props.icon,
+                    color: props.color,
+                };
+            }
+        } else {
+            item = {
+                name: value,
+                value: prefix + value,
+                icon: props.icon,
+                color: props.color,
+            };
+        }
+    } else if (!value || typeof value !== 'object') {
+        item = {
+            name: '',
+            value: '',
+            icon: props.icon,
+            color: props.color,
+        };
+    } else {
+        // Item is an ioBroker.Object
+        const obj: ioBroker.Object = value as ioBroker.Object;
+        item = {
+            name: Utils.getObjectNameFromObj(obj, props.lang)
+                .replace('system.group.', '')
+                .replace('system.user.', '')
+                .replace('enum.rooms.', '')
+                .replace('enum.functions.', ''),
+            value: obj._id,
+            icon: props.icon || obj.common?.icon,
+            color: props.color || obj.common?.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>
+    );
+};
+
+export default TextWithIcon;

package/src/Components/ToggleThemeMenu.tsx

@@ -1,34 +1,52 @@
-import React from 'react';
-
-import { IconButton, Tooltip } from '@mui/material';
-
-import {
-    Brightness4 as Brightness4Icon,
-    Brightness5 as Brightness5Icon,
-    Brightness6 as Brightness6Icon,
-    Brightness7 as Brightness7Icon,
-} from '@mui/icons-material';
-
-interface ToggleThemeMenuProps {
-    themeName: 'dark' | 'blue' | 'colored' | 'light';
-    toggleTheme: () => void;
-    t: (key: string) => string;
-    className?: string;
-    style?: React.CSSProperties;
-    size?: 'small' | 'medium' | 'large';
-}
-
-export default function ToggleThemeMenu({
-    themeName, toggleTheme, t, className, style, size,
-}: ToggleThemeMenuProps) {
-    return <div className={className || undefined} style={style || undefined}>
-        <Tooltip title={t('ra_Change color theme')} componentsProps={{ popper: { sx: { pointerEvents: 'none' } } }}>
-            <IconButton onClick={() => toggleTheme()} size={size || 'medium'}>
-                {themeName === 'dark' && <Brightness4Icon className={className} />}
-                {themeName === 'blue' && <Brightness5Icon className={className} />}
-                {themeName === 'colored' && <Brightness6Icon className={className} />}
-                {themeName !== 'dark' && themeName !== 'blue' && themeName !== 'colored' && <Brightness7Icon className={className} />}
-            </IconButton>
-        </Tooltip>
-    </div>;
-}
+import React, { type JSX } from 'react';
+
+import { IconButton, Tooltip } from '@mui/material';
+
+import {
+    Brightness4 as Brightness4Icon,
+    Brightness5 as Brightness5Icon,
+    Brightness6 as Brightness6Icon,
+    Brightness7 as Brightness7Icon,
+} from '@mui/icons-material';
+
+interface ToggleThemeMenuProps {
+    themeName: 'dark' | 'blue' | 'colored' | 'light';
+    toggleTheme: () => void;
+    t: (key: string) => string;
+    className?: string;
+    style?: React.CSSProperties;
+    size?: 'small' | 'medium' | 'large';
+}
+
+export default function ToggleThemeMenu({
+    themeName,
+    toggleTheme,
+    t,
+    className,
+    style,
+    size,
+}: ToggleThemeMenuProps): JSX.Element {
+    return (
+        <div
+            className={className || undefined}
+            style={style || undefined}
+        >
+            <Tooltip
+                title={t('ra_Change color theme')}
+                slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}
+            >
+                <IconButton
+                    onClick={() => toggleTheme()}
+                    size={size || 'medium'}
+                >
+                    {themeName === 'dark' && <Brightness4Icon className={className} />}
+                    {themeName === 'blue' && <Brightness5Icon className={className} />}
+                    {themeName === 'colored' && <Brightness6Icon className={className} />}
+                    {themeName !== 'dark' && themeName !== 'blue' && themeName !== 'colored' && (
+                        <Brightness7Icon className={className} />
+                    )}
+                </IconButton>
+            </Tooltip>
+        </div>
+    );
+}