@iobroker/adapter-react-v5 7.6.7 → 7.6.9

package/build/Components/InfoBox.d.ts

@@ -23,7 +23,7 @@ interface InfoBoxState {
 /**
  * This component can be used to show important information or warnings to the user
  */
-export default class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {
+export declare class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {
     private readonly refTypo;
     private height;
     private width;

package/build/Components/InfoBox.js

@@ -4,7 +4,7 @@ import { Info, Warning, Close, Visibility, Check } from '@mui/icons-material';
 /**
  * This component can be used to show important information or warnings to the user
  */
-export default class InfoBox extends React.Component {
+export class InfoBox extends React.Component {
     refTypo;
     height;
     width;

package/build/Components/InfoBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoBox.js","sourceRoot":"./src/","sources":["Components/InfoBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { Info, Warning, Close, Visibility, type SvgIconComponent, Check } from '@mui/icons-material';\n\ninterface InfoBoxProps {\n    /** Text to display in the info box */\n    children: string | (string | React.JSX.Element | null)[] | React.JSX.Element;\n    /** The type determines the color and symbol */\n    type: 'warning' | 'info' | 'error' | 'ok';\n    /** If the Box is closeable */\n    closeable?: boolean;\n    /** Use together with `closeable: true`. You can specify in which variable in local storage the state of this info box could be stored */\n    storeId?: string;\n    /** Use together with `closeable: true`, listener called if close button clicked */\n    onClose?: (desiredState: boolean) => void;\n    /** Custom style */\n    style?: React.CSSProperties;\n    /** Icon position */\n    iconPosition?: 'top' | 'middle';\n    /** Use together with `closeable: true`. If the box is closed or not. In this case, it will be controlled from outside */\n    closed?: boolean;\n}\n\ninterface InfoBoxState {\n    closed: boolean;\n}\n/**\n * This component can be used to show important information or warnings to the user\n */\nexport default class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {\n    private readonly refTypo: React.RefObject<HTMLDivElement>;\n    private height: number;\n    private width: number;\n\n    constructor(props: InfoBoxProps) {\n        super(props);\n        this.state = {\n            closed: this.props.storeId ? window.localStorage.getItem(this.props.storeId) === 'true' : false,\n        };\n        this.height = 0;\n        this.width = 0;\n\n        this.refTypo = React.createRef();\n    }\n\n    componentDidMount(): void {\n        this.detectHeight();\n    }\n\n    onClick(): void {\n        if (this.props.storeId && this.props.closed === undefined) {\n            if (this.state.closed) {\n                window.localStorage.removeItem(this.props.storeId);\n            } else {\n                window.localStorage.setItem(this.props.storeId, 'true');\n            }\n        }\n        if (this.props.closed === undefined) {\n            this.setState({ closed: !this.state.closed }, () => {\n                // Inform about state change\n                if (this.props.onClose) {\n                    this.props.onClose(this.state.closed);\n                }\n            });\n        } else if (this.props.onClose) {\n            this.props.onClose(!this.props.closed);\n        }\n    }\n\n    detectHeight(): void {\n        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n        // We must get the height of the element when it is open to make transition\n        if (this.props.closeable && !closed && this.refTypo.current) {\n            window.requestAnimationFrame(() => {\n                const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n                if (closed) {\n                    return;\n                }\n                if (this.refTypo.current && (!this.height || this.width !== this.refTypo.current.clientWidth)) {\n                    this.height = this.refTypo.current.clientHeight;\n                    this.width = this.refTypo.current.clientWidth;\n                    this.forceUpdate();\n                }\n            });\n        }\n    }\n\n    componentDidUpdate(): void {\n        this.detectHeight();\n    }\n\n    render(): React.ReactNode {\n        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n\n        const Icon: SvgIconComponent = closed ? Visibility : Close;\n\n        return (\n            <Box\n                className=\"iom-info-box\"\n                style={{\n                    whiteSpace: 'preserve',\n                    display: 'flex',\n                    gap: 8,\n                    alignItems: closed || this.props.iconPosition === 'top' ? 'flex-start' : 'center',\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    padding: 4,\n                    borderRadius: 5,\n                    marginBottom: 8,\n                    maxWidth: '100%',\n                    transition: 'height 0.5s',\n                    height: this.props.closeable ? (closed ? 30 : this.height || undefined) : undefined,\n                    overflow: this.props.closeable ? 'hidden' : undefined,\n                    position: 'relative',\n                    ...this.props.style,\n                }}\n                sx={{\n                    borderColor: theme =>\n                        this.props.type === 'ok' ? theme.palette.info.main : theme.palette[this.props.type].main,\n                }}\n            >\n                {this.props.type === 'ok' ? (\n                    <Check style={{ color: '#0F0' }} />\n                ) : this.props.type === 'info' ? (\n                    <Info color=\"primary\" />\n                ) : (\n                    <Warning color={this.props.type} />\n                )}\n                <Typography ref={this.refTypo}>{this.props.children}</Typography>\n                {this.props.closeable ? (\n                    <Icon\n                        sx={{\n                            color: theme => (theme.palette.mode === 'dark' ? 'lightgray' : 'gray'),\n                            // alignSelf: 'flex-start',\n                            cursor: 'pointer',\n                            position: 'absolute',\n                            top: 4,\n                            right: 4,\n                        }}\n                        onClick={() => this.onClick()}\n                    />\n                ) : null}\n                {/* Reserve place for button so it will not overlap the text */}\n                {this.props.closeable ? <div style={{ width: 22 }} /> : null}\n                {closed ? (\n                    <Box\n                        // This is a shadow box at the bottom of the InfoBox when it closed\n                        component=\"div\"\n                        sx={theme => {\n                            const color = theme.palette[this.props.type === 'ok' ? 'info' : this.props.type].main;\n                            return {\n                                background: `linear-gradient(${color}00 0%, ${color}10 60%, ${color}90 100%)`,\n                            };\n                        }}\n                        style={{\n                            bottom: 0,\n                            position: 'absolute',\n                            left: 0,\n                            right: 0,\n                            height: 10,\n                        }}\n                    />\n                ) : null}\n            </Box>\n        );\n    }\n}\n"]}
+{"version":3,"file":"InfoBox.js","sourceRoot":"./src/","sources":["Components/InfoBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { Info, Warning, Close, Visibility, type SvgIconComponent, Check } from '@mui/icons-material';\n\ninterface InfoBoxProps {\n    /** Text to display in the info box */\n    children: string | (string | React.JSX.Element | null)[] | React.JSX.Element;\n    /** The type determines the color and symbol */\n    type: 'warning' | 'info' | 'error' | 'ok';\n    /** If the Box is closeable */\n    closeable?: boolean;\n    /** Use together with `closeable: true`. You can specify in which variable in local storage the state of this info box could be stored */\n    storeId?: string;\n    /** Use together with `closeable: true`, listener called if close button clicked */\n    onClose?: (desiredState: boolean) => void;\n    /** Custom style */\n    style?: React.CSSProperties;\n    /** Icon position */\n    iconPosition?: 'top' | 'middle';\n    /** Use together with `closeable: true`. If the box is closed or not. In this case, it will be controlled from outside */\n    closed?: boolean;\n}\n\ninterface InfoBoxState {\n    closed: boolean;\n}\n/**\n * This component can be used to show important information or warnings to the user\n */\nexport class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {\n    private readonly refTypo: React.RefObject<HTMLDivElement>;\n    private height: number;\n    private width: number;\n\n    constructor(props: InfoBoxProps) {\n        super(props);\n        this.state = {\n            closed: this.props.storeId ? window.localStorage.getItem(this.props.storeId) === 'true' : false,\n        };\n        this.height = 0;\n        this.width = 0;\n\n        this.refTypo = React.createRef();\n    }\n\n    componentDidMount(): void {\n        this.detectHeight();\n    }\n\n    onClick(): void {\n        if (this.props.storeId && this.props.closed === undefined) {\n            if (this.state.closed) {\n                window.localStorage.removeItem(this.props.storeId);\n            } else {\n                window.localStorage.setItem(this.props.storeId, 'true');\n            }\n        }\n        if (this.props.closed === undefined) {\n            this.setState({ closed: !this.state.closed }, () => {\n                // Inform about state change\n                if (this.props.onClose) {\n                    this.props.onClose(this.state.closed);\n                }\n            });\n        } else if (this.props.onClose) {\n            this.props.onClose(!this.props.closed);\n        }\n    }\n\n    detectHeight(): void {\n        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n        // We must get the height of the element when it is open to make transition\n        if (this.props.closeable && !closed && this.refTypo.current) {\n            window.requestAnimationFrame(() => {\n                const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n                if (closed) {\n                    return;\n                }\n                if (this.refTypo.current && (!this.height || this.width !== this.refTypo.current.clientWidth)) {\n                    this.height = this.refTypo.current.clientHeight;\n                    this.width = this.refTypo.current.clientWidth;\n                    this.forceUpdate();\n                }\n            });\n        }\n    }\n\n    componentDidUpdate(): void {\n        this.detectHeight();\n    }\n\n    render(): React.ReactNode {\n        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n\n        const Icon: SvgIconComponent = closed ? Visibility : Close;\n\n        return (\n            <Box\n                className=\"iom-info-box\"\n                style={{\n                    whiteSpace: 'preserve',\n                    display: 'flex',\n                    gap: 8,\n                    alignItems: closed || this.props.iconPosition === 'top' ? 'flex-start' : 'center',\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    padding: 4,\n                    borderRadius: 5,\n                    marginBottom: 8,\n                    maxWidth: '100%',\n                    transition: 'height 0.5s',\n                    height: this.props.closeable ? (closed ? 30 : this.height || undefined) : undefined,\n                    overflow: this.props.closeable ? 'hidden' : undefined,\n                    position: 'relative',\n                    ...this.props.style,\n                }}\n                sx={{\n                    borderColor: theme =>\n                        this.props.type === 'ok' ? theme.palette.info.main : theme.palette[this.props.type].main,\n                }}\n            >\n                {this.props.type === 'ok' ? (\n                    <Check style={{ color: '#0F0' }} />\n                ) : this.props.type === 'info' ? (\n                    <Info color=\"primary\" />\n                ) : (\n                    <Warning color={this.props.type} />\n                )}\n                <Typography ref={this.refTypo}>{this.props.children}</Typography>\n                {this.props.closeable ? (\n                    <Icon\n                        sx={{\n                            color: theme => (theme.palette.mode === 'dark' ? 'lightgray' : 'gray'),\n                            // alignSelf: 'flex-start',\n                            cursor: 'pointer',\n                            position: 'absolute',\n                            top: 4,\n                            right: 4,\n                        }}\n                        onClick={() => this.onClick()}\n                    />\n                ) : null}\n                {/* Reserve place for button so it will not overlap the text */}\n                {this.props.closeable ? <div style={{ width: 22 }} /> : null}\n                {closed ? (\n                    <Box\n                        // This is a shadow box at the bottom of the InfoBox when it closed\n                        component=\"div\"\n                        sx={theme => {\n                            const color = theme.palette[this.props.type === 'ok' ? 'info' : this.props.type].main;\n                            return {\n                                background: `linear-gradient(${color}00 0%, ${color}10 60%, ${color}90 100%)`,\n                            };\n                        }}\n                        style={{\n                            bottom: 0,\n                            position: 'absolute',\n                            left: 0,\n                            right: 0,\n                            height: 10,\n                        }}\n                    />\n                ) : null}\n            </Box>\n        );\n    }\n}\n"]}

package/build/Components/ObjectBrowser.d.ts

@@ -59,6 +59,8 @@ export interface TreeItemData {
     button?: boolean;
     /** If the item has read and write and is boolean */
     switch?: boolean;
+    /** If the item is url linke */
+    url?: boolean;
     /** if the item has custom settings in `common.custom` */
     hasCustoms?: boolean;
     /** If this item is visible */
@@ -440,6 +442,7 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private systemConfig;
     objects: Record<string, ioBroker.Object>;
     private defaultHistory;
+    private cltrPressed;
     private columnsVisibility;
     private changedIds;
     private contextMenu;
@@ -464,6 +467,7 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
      * Called when component is mounted.
      */
     componentDidMount(): Promise<void>;
+    onKeyPress: (event: KeyboardEvent) => void;
     /**
      * Called when component is unmounted.
      */
@@ -571,6 +575,12 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     renderColumnButtons(id: string, item: TreeItem): (JSX.Element | null)[] | JSX.Element | null;
     private readHistory;
     private getTooltipInfo;
+    /**
+     * This function renders the value in different forms in the table
+     * @param id state ID
+     * @param item Item
+     * @param narrowStyleWithDetails if use mobile view
+     */
     private renderColumnValue;
     private _syncEnum;
     private syncEnum;

package/build/Components/ObjectBrowser.js

@@ -1355,6 +1355,9 @@ function buildTree(objects, options) {
                             obj.common?.type === 'boolean' &&
                             obj.common?.write !== false &&
                             obj.common?.read !== false,
+                        url: !!obj.common?.role &&
+                            typeof obj.common.role === 'string' &&
+                            obj.common.role.startsWith('url'),
                     },
                 };
                 cRoot.children = cRoot.children || [];
@@ -1870,6 +1873,7 @@ export class ObjectBrowserClass extends Component {
     systemConfig;
     objects;
     defaultHistory = '';
+    cltrPressed = false;
     columnsVisibility = {};
     changedIds = null;
     contextMenu = null;
@@ -2048,6 +2052,7 @@ export class ObjectBrowserClass extends Component {
             customConfig: props.t('ra_tooltip_customConfig'),
             copyState: props.t('ra_tooltip_copyState'),
             editState: props.t('ra_tooltip_editState'),
+            ctrlForLink: props.t('ra_tooltip_ctrlForLink'),
             close: props.t('ra_Close'),
             filter_id: props.t('ra_filter_id'),
             filter_name: props.t('ra_filter_name'),
@@ -2363,7 +2368,23 @@ export class ObjectBrowserClass extends Component {
         }
         objectsAlreadyLoaded = true;
         window.addEventListener('contextmenu', this.onContextMenu, true);
+        window.addEventListener('keydown', this.onKeyPress, true);
+        window.addEventListener('keyup', this.onKeyPress, true);
     }
+    onKeyPress = (event) => {
+        if (event.type === 'keydown' && event.ctrlKey && !this.cltrPressed) {
+            this.cltrPressed = true;
+            if (this.tableRef.current) {
+                this.tableRef.current.className = 'highlight-link';
+            }
+        }
+        else if (event.type === 'keyup' && !event.ctrlKey && this.cltrPressed) {
+            this.cltrPressed = false;
+            if (this.tableRef.current) {
+                this.tableRef.current.className = '';
+            }
+        }
+    };
     /**
      * Called when component is unmounted.
      */
@@ -2373,6 +2394,8 @@ export class ObjectBrowserClass extends Component {
             this.filterTimer = null;
         }
         window.removeEventListener('contextmenu', this.onContextMenu, true);
+        window.removeEventListener('keydown', this.onKeyPress, true);
+        window.removeEventListener('keyup', this.onKeyPress, true);
         if (this.props.objectsWorker) {
             this.props.objectsWorker.unregisterHandler(this.onObjectChangeFromWorker, true);
         }
@@ -3909,16 +3932,25 @@ export class ObjectBrowserClass extends Component {
                 }
             }
         });
+        const role = obj?.common?.role || '';
         if (fileViewer === 'image') {
             valFullRx.push(React.createElement("img", { style: styles.cellValueTooltipImage, src: state.val, alt: id }));
         }
-        else if (this.defaultHistory &&
-            this.objects[id]?.common?.custom &&
-            this.objects[id].common.custom[this.defaultHistory]) {
+        else if (role === 'url' || obj.common.role === 'url.self' || obj.common.role === 'url.blank') {
+            // Show comment about "Hold Ctrl/⌘ key to open the link"
+            valFullRx.unshift(React.createElement("div", { key: "ctrl", style: { textDecoration: 'underline', fontWeight: 'bold' } }, this.texts.ctrlForLink));
+        }
+        else if (this.defaultHistory && obj?.common?.custom?.[this.defaultHistory]) {
             valFullRx.push(React.createElement("svg", { key: "sparkline", className: "sparkline", "data-id": id, style: { fill: '#3d85de' }, width: "200", height: "30", strokeWidth: "3" }));
         }
         this.setState({ tooltipInfo: { el: valFullRx, id } }, () => cb && cb());
     }
+    /**
+     * This function renders the value in different forms in the table
+     * @param id state ID
+     * @param item Item
+     * @param narrowStyleWithDetails if use mobile view
+     */
     renderColumnValue(id, item, narrowStyleWithDetails) {
         const obj = item.data.obj;
         if (!obj || !this.states) {
@@ -4004,7 +4036,7 @@ export class ObjectBrowserClass extends Component {
                 popper: { sx: styles.cellValueTooltipBox },
                 tooltip: { sx: styles.cellValueTooltip },
             }, onOpen: () => this.getTooltipInfo(id, () => this.readHistory(id)), onClose: () => this.state.tooltipInfo?.id === id && this.setState({ tooltipInfo: null }) },
-            React.createElement(Box, { component: "div", style: info.style, sx: {
+            React.createElement(Box, { component: "div", style: info.style, className: item.data.url ? 'iob-link' : undefined, sx: {
                     ...styles.cellValueText,
                     height: narrowStyleWithDetails ? undefined : ROW_HEIGHT,
                     '& .admin-button:active': {
@@ -4838,14 +4870,25 @@ export class ObjectBrowserClass extends Component {
                             ? 'grab'
                             : 'text'
                     : 'default',
-            }, onClick: valueEditable
-                ? () => {
+            }, onClick: e => {
+                if (valueEditable) {
                     if (!obj || !this.states) {
                         // return;
                     }
                     else if (common?.type === 'file') {
                         this.setState({ viewFileDialog: id });
                     }
+                    else if (item.data.url && e.ctrlKey) {
+                        if (this.states[id]?.val && typeof this.states[id].val === 'string') {
+                            if (common?.role === 'url.self') {
+                                window.location.href = this.states[id].val;
+                            }
+                            else {
+                                const opened = window.open(this.states[id].val, '_blank');
+                                opened?.focus();
+                            }
+                        }
+                    }
                     else if (!this.state.filter.expertMode && item.data.button) {
                         // in non-expert mode control button directly
                         this.props.socket
@@ -4868,7 +4911,17 @@ export class ObjectBrowserClass extends Component {
                         this.setState({ updateOpened: true });
                     }
                 }
-                : undefined }, columnValue)) : null;
+                else if (common?.role === 'url' || (common?.role === 'url.blank' && e.ctrlKey)) {
+                    if (this.states[id]?.val && typeof this.states[id].val === 'string') {
+                        window.open(this.states[id].val, '_blank');
+                    }
+                }
+                else if (common?.role === 'url.self' && e.ctrlKey) {
+                    if (this.states[id]?.val && typeof this.states[id].val === 'string') {
+                        window.location.href = this.states[id].val;
+                    }
+                }
+            } }, columnValue)) : null;
         let colButtons = narrowStyleWithDetails || this.columnsVisibility.buttons ? (React.createElement("div", { style: {
                 ...styles.cellButtons,
                 width: this.props.width !== 'xs' ? this.columnsVisibility.buttons : undefined,
@@ -6060,11 +6113,15 @@ export class ObjectBrowserClass extends Component {
 .newValueBrowser-light {
     animation: newValueAnimation-light 2s ease-in-out;
 }
+.highlight-link .iob-link {
+    text-decoration: underline;
+    cursor: pointer;
+}
 `),
             React.createElement(TabHeader, null, this.getToolbar()),
             React.createElement(TabContent, null,
                 this.renderHeader(),
-                React.createElement("div", { style: styles.tableDiv, ref: this.tableRef, onKeyDown: event => this.navigateKeyPress(event) }, items)),
+                React.createElement(Box, { style: styles.tableDiv, ref: this.tableRef, onKeyDown: event => this.navigateKeyPress(event) }, items)),
             this.renderContextMenu(),
             this.renderAliasMenu(),
             this.renderToast(),