@iobroker/adapter-react-v5 6.0.9 → 6.0.10

package/Components/ObjectBrowser.d.ts

@@ -181,6 +181,7 @@ interface ObjectBrowserValueProps {
     isFloatComma: boolean;
     t: Translate;
     lang: ioBroker.Languages;
+    width: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 }
 interface ObjectBrowserEditObjectProps {
     socket: Connection;
@@ -285,6 +286,7 @@ interface ObjectBrowserState {
     loaded: boolean;
     foldersFirst: boolean;
     selected: string[];
+    focused: string;
     selectedNonObject: string;
     filter: ObjectBrowserFilter;
     filterKey: number;
@@ -538,7 +540,10 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
      */
     renderLeaf(item: TreeItem, isExpanded: boolean | undefined, counter: {
         count: number;
-    }): React.JSX.Element;
+    }): {
+        row: React.JSX.Element;
+        details: React.JSX.Element | null;
+    };
     /**
      * Renders an item.
      */

package/Components/ObjectBrowser.js

@@ -179,6 +179,7 @@ const styles = {
         lineHeight: `${ROW_HEIGHT}px`,
         verticalAlign: 'top',
         userSelect: 'none',
+        position: 'relative',
         width: '100%',
         '&:hover': {
             background: `${theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light} !important`,
@@ -202,6 +203,17 @@ const styles = {
     tableRowAliasReadWrite: {
         height: ROW_HEIGHT + 22,
     },
+    tableRowFocused: (theme) => ({
+        '&:after': {
+            content: '""',
+            position: 'absolute',
+            top: 1,
+            left: 1,
+            right: 1,
+            bottom: 1,
+            border: theme.palette.mode ? '1px dotted #000' : '1px dotted #FFF',
+        },
+    }),
     checkBox: {
         padding: 0,
     },
@@ -276,6 +288,12 @@ const styles = {
         position: 'absolute',
         right: 3,
     },
+    cellCopyButtonInDetails: {
+        width: SMALL_BUTTON_SIZE,
+        height: SMALL_BUTTON_SIZE,
+        top: (ROW_HEIGHT - SMALL_BUTTON_SIZE) / 2,
+        opacity: 0.8,
+    },
     cellEditButton: {
         width: SMALL_BUTTON_SIZE,
         height: SMALL_BUTTON_SIZE,
@@ -501,6 +519,18 @@ const styles = {
     cellButtonsValueButtonEdit: {
         right: (SMALL_BUTTON_SIZE / 2) + 16,
     },
+    cellDetailsLine: {
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        height: 32,
+        fontSize: 16,
+    },
+    cellDetailsName: {
+        fontWeight: 'bold',
+        marginRight: 8,
+        minWidth: 100,
+    },
     filteredOut: {
         opacity: 0.5,
     },
@@ -2270,6 +2300,7 @@ class ObjectBrowserClass extends react_1.Component {
             selectedNonObject: this.localStorage.getItem(`${props.dialogName || 'App'}.selectedNonObject`) || '',
             filter,
             filterKey: 0,
+            focused: this.localStorage.getItem(`${props.dialogName || 'App'}.focused`) || '',
             depth: 0,
             expandAllVisible: false,
             expanded,
@@ -2303,6 +2334,8 @@ class ObjectBrowserClass extends react_1.Component {
             tooltipInfo: null,
         };
         this.texts = {
+            name: props.t('ra_Name'),
+            categories: props.t('ra_Categories'),
             value: props.t('ra_tooltip_value'),
             ack: props.t('ra_tooltip_ack'),
             ts: props.t('ra_tooltip_ts'),
@@ -2679,12 +2712,13 @@ class ObjectBrowserClass extends react_1.Component {
      * Called when an item is selected/deselected.
      */
     onSelect(toggleItem, isDouble, cb) {
+        this.localStorage.setItem(`${this.props.dialogName || 'App'}.focused`, toggleItem);
         if (!this.props.multiSelect) {
             if (this.objects[toggleItem] &&
                 (!this.props.types || this.props.types.includes(this.objects[toggleItem].type))) {
                 this.localStorage.removeItem(`${this.props.dialogName || 'App'}.selectedNonObject`);
                 if (this.state.selected[0] !== toggleItem) {
-                    this.setState({ selected: [toggleItem], selectedNonObject: '' }, () => {
+                    this.setState({ selected: [toggleItem], selectedNonObject: '', focused: toggleItem }, () => {
                         this.onAfterSelect(isDouble);
                         cb && cb();
                     });
@@ -2695,7 +2729,7 @@ class ObjectBrowserClass extends react_1.Component {
             }
             else {
                 this.localStorage.setItem(`${this.props.dialogName || 'App'}.selectedNonObject`, toggleItem);
-                this.setState({ selected: [], selectedNonObject: toggleItem }, () => {
+                this.setState({ selected: [], selectedNonObject: toggleItem, focused: toggleItem }, () => {
                     this.onAfterSelect();
                     cb && cb();
                 });
@@ -2713,7 +2747,7 @@ class ObjectBrowserClass extends react_1.Component {
             else if (!isDouble) {
                 selected.splice(pos, 1);
             }
-            this.setState({ selected, selectedNonObject: '' }, () => {
+            this.setState({ selected, selectedNonObject: '', focused: toggleItem }, () => {
                 this.onAfterSelect(isDouble);
                 cb && cb();
             });
@@ -3500,6 +3534,7 @@ class ObjectBrowserClass extends react_1.Component {
                 display: 'flex',
                 width: '100%',
                 alignItems: 'center',
+                overflowX: 'auto',
             } },
             react_1.default.createElement("div", { style: {
                     display: 'flex',
@@ -3510,19 +3545,19 @@ class ObjectBrowserClass extends react_1.Component {
                     react_1.default.createElement("div", null,
                         react_1.default.createElement(material_1.IconButton, { onClick: () => this.refreshComponent(), disabled: this.state.updating, size: "large" },
                             react_1.default.createElement(icons_material_1.Refresh, null)))),
-                this.props.showExpertButton && !this.props.expertMode && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_expertMode'), componentsProps: { popper: { sx: styles.tooltip } } },
+                this.props.showExpertButton && !this.props.expertMode && react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_expertMode'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { key: "expertMode", color: this.state.filter.expertMode ? 'secondary' : 'default', onClick: () => this.onFilter('expertMode', !this.state.filter.expertMode), size: "large" },
-                        react_1.default.createElement(IconExpert_1.default, null)))),
-                !this.props.disableColumnSelector && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Configure'), componentsProps: { popper: { sx: styles.tooltip } } },
+                        react_1.default.createElement(IconExpert_1.default, null))),
+                !this.props.disableColumnSelector && this.props.width !== 'xs' && react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Configure'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { key: "columnSelector", color: this.state.columnsAuto ? 'primary' : 'default', onClick: () => this.setState({ columnsSelectorShow: true }), size: "large" },
-                        react_1.default.createElement(icons_material_1.ViewColumn, null)))),
-                this.state.expandAllVisible && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Expand all nodes'), componentsProps: { popper: { sx: styles.tooltip } } },
+                        react_1.default.createElement(icons_material_1.ViewColumn, null))),
+                this.props.width !== 'xs' && this.state.expandAllVisible && react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Expand all nodes'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { key: "expandAll", onClick: () => this.onExpandAll(), size: "large" },
-                        react_1.default.createElement(IconOpen_1.default, null)))),
+                        react_1.default.createElement(IconOpen_1.default, null))),
                 react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Collapse all nodes'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { key: "collapseAll", onClick: () => this.onCollapseAll(), size: "large" },
                         react_1.default.createElement(IconClosed_1.default, null))),
-                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Expand one step node'), componentsProps: { popper: { sx: styles.tooltip } } },
+                this.props.width !== 'xs' && react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Expand one step node'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { key: "expandVisible", color: "primary", onClick: () => this.onExpandVisible(), size: "large" },
                         react_1.default.createElement(material_1.Badge, { badgeContent: this.state.depth, color: "secondary", sx: (theme) => ({
                                 badge: {
@@ -3533,7 +3568,7 @@ class ObjectBrowserClass extends react_1.Component {
                                 },
                             }) },
                             react_1.default.createElement(IconOpen_1.default, null)))),
-                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Collapse one step node'), componentsProps: { popper: { sx: styles.tooltip } } },
+                this.props.width !== 'xs' && react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Collapse one step node'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { key: "collapseVisible", color: "primary", onClick: () => this.onCollapseVisible(), size: "large" },
                         react_1.default.createElement(material_1.Badge, { sx: (theme) => ({
                                 badge: {
@@ -3544,9 +3579,9 @@ class ObjectBrowserClass extends react_1.Component {
                                 },
                             }), badgeContent: this.state.depth, color: "secondary" },
                             react_1.default.createElement(IconClosed_1.default, null)))),
-                this.props.objectStatesView && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Toggle the states view'), componentsProps: { popper: { sx: styles.tooltip } } },
+                this.props.objectStatesView && react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Toggle the states view'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { onClick: () => this.onStatesViewVisible(), size: "large" },
-                        react_1.default.createElement(icons_material_1.LooksOne, { color: this.state.statesView ? 'primary' : 'inherit' })))),
+                        react_1.default.createElement(icons_material_1.LooksOne, { color: this.state.statesView ? 'primary' : 'inherit' }))),
                 react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Show/Hide object descriptions'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { onClick: () => {
                             this.localStorage.setItem(`${this.props.dialogName || 'App'}.desc`, this.state.showDescription ? 'false' : 'true');
@@ -3576,7 +3611,7 @@ class ObjectBrowserClass extends react_1.Component {
                     react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Save objects tree as JSON file'), componentsProps: { popper: { sx: styles.tooltip } } },
                         react_1.default.createElement(material_1.IconButton, { onClick: () => this.setState({ showExportDialog: this._getSelectedIdsForExport().length }), size: "large" },
                             react_1.default.createElement(icons_material_1.Publish, { style: { transform: 'rotate(180deg)' } })))),
-            !!this.props.objectBrowserEditObject && (react_1.default.createElement("div", { style: { display: 'flex', whiteSpace: 'nowrap' } }, `${this.props.t('ra_Objects')}: ${Object.keys(this.info.objects).length}, ${this.props.t('ra_States')}: ${Object.keys(this.info.objects).filter(el => this.info.objects[el].type === 'state').length}`)),
+            !!this.props.objectBrowserEditObject && this.props.width !== 'xs' && react_1.default.createElement("div", { style: { display: 'flex', whiteSpace: 'nowrap' } }, `${this.props.t('ra_Objects')}: ${Object.keys(this.info.objects).length}, ${this.props.t('ra_States')}: ${Object.keys(this.info.objects).filter(el => this.info.objects[el].type === 'state').length}`),
             this.props.objectEditBoolean && react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Edit custom config'), componentsProps: { popper: { sx: styles.tooltip } } },
                 react_1.default.createElement(material_1.IconButton, { onClick: () => {
                         var _b;
@@ -3794,7 +3829,7 @@ class ObjectBrowserClass extends react_1.Component {
         }
         this.setState({ tooltipInfo: { el: valFullRx, id } }, () => cb && cb());
     }
-    renderColumnValue(id, item) {
+    renderColumnValue(id, item, narrowStyleWithDetails) {
         var _b, _c;
         const obj = item.data.obj;
         if (!obj || !this.states) {
@@ -3832,7 +3867,7 @@ class ObjectBrowserClass extends react_1.Component {
                 "(",
                 valText.s,
                 ")"));
-            valTextRx.push(react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: this.styles.iconCopy, onClick: e => this.onCopy(e, copyText), key: "cc" }));
+            !narrowStyleWithDetails && valTextRx.push(react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: this.styles.iconCopy, onClick: e => this.onCopy(e, copyText), key: "cc" }));
             // <IconEdit className="copyButton" style={{{ ...styles.cellButtonsValueButton, styles.cellButtonsValueButtonEdit)} key="ce" />
             info = item.data.state;
         }
@@ -3841,11 +3876,11 @@ class ObjectBrowserClass extends react_1.Component {
         if (!this.state.filter.expertMode && item.data.button) {
             val = [react_1.default.createElement(icons_material_1.RoomService, { style: styles.cellValueButton })];
         }
-        return react_1.default.createElement(material_1.Tooltip, { key: "value", title: ((_c = this.state.tooltipInfo) === null || _c === void 0 ? void 0 : _c.el) || 'Calculating...', componentsProps: {
+        return react_1.default.createElement(material_1.Tooltip, { key: "value", title: (_c = this.state.tooltipInfo) === null || _c === void 0 ? void 0 : _c.el, componentsProps: {
                 popper: { sx: styles.cellValueTooltipBox },
                 tooltip: { sx: styles.cellValueTooltip },
             }, onOpen: () => this.getTooltipInfo(id, () => this.readHistory(id)), onClose: () => { var _b; return ((_b = this.state.tooltipInfo) === null || _b === void 0 ? void 0 : _b.id) === id && this.setState({ tooltipInfo: null }); } },
-            react_1.default.createElement(material_1.Box, { component: "div", style: info.style, sx: styles.cellValueText }, val));
+            react_1.default.createElement(material_1.Box, { component: "div", style: info.style, sx: Object.assign(Object.assign({}, styles.cellValueText), { height: narrowStyleWithDetails ? undefined : ROW_HEIGHT }) }, val));
     }
     _syncEnum(id, enumIds, newArray, cb) {
         var _b, _c, _d;
@@ -4157,7 +4192,7 @@ class ObjectBrowserClass extends react_1.Component {
      * Renders a leaf.
      */
     renderLeaf(item, isExpanded, counter) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const id = item.data.id;
         counter.count++;
         isExpanded = isExpanded === undefined ? this.state.expanded.includes(id) : isExpanded;
@@ -4411,7 +4446,208 @@ class ObjectBrowserClass extends react_1.Component {
                 useDesc = !!oTooltip;
             }
         }
-        return react_1.default.createElement(material_1.Grid, { container: true, direction: "row", wrap: "nowrap", sx: Utils_1.default.getStyle(this.props.theme, styles.tableRow, this.state.linesEnabled && styles.tableRowLines, !this.props.dragEnabled && styles.tableRowNoDragging, alias && styles.tableRowAlias, readWriteAlias && styles.tableRowAliasReadWrite, !item.data.visible && styles.filteredOut, item.data.hasVisibleParent &&
+        const narrowStyleWithDetails = this.props.width === 'xs' && this.state.focused === id;
+        const colID = react_1.default.createElement(material_1.Grid, { container: true, wrap: "nowrap", direction: "row", sx: styles.cellId, style: { width: this.columnsVisibility.id, paddingLeft } },
+            react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" },
+                checkbox,
+                iconFolder),
+            react_1.default.createElement(material_1.Grid, { item: true, style: Object.assign(Object.assign(Object.assign({}, styles.cellIdSpan), (invertBackground ? this.styles.invertedBackground : undefined)), { color: checkColor, fontWeight: bold ? 'bold' : undefined }) },
+                react_1.default.createElement(material_1.Tooltip, { title: getIdFieldTooltip(item.data, this.props.lang), componentsProps: { popper: { sx: styles.tooltip } } },
+                    react_1.default.createElement("div", null, item.data.name)),
+                alias,
+                icons),
+            react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.grow), (invertBackground ? this.styles.invertedBackgroundFlex : {})) }),
+            react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" }, iconItem),
+            this.props.width !== 'xs' || narrowStyleWithDetails ? react_1.default.createElement("div", null,
+                react_1.default.createElement(IconCopy_1.default, { className: narrowStyleWithDetails ? '' : 'copyButton', style: styles.cellCopyButton, onClick: e => this.onCopy(e, id) })) : null);
+        let colName = (narrowStyleWithDetails && name) || this.columnsVisibility.name ? react_1.default.createElement(material_1.Box, { component: "div", sx: Object.assign(Object.assign(Object.assign({}, styles.cellName), (useDesc ? styles.cellNameWithDesc : undefined)), { width: this.props.width !== 'xs' ? this.columnsVisibility.name : undefined, ml: narrowStyleWithDetails ? 0 : '5px' }) },
+            name,
+            !narrowStyleWithDetails && ((_g = item.data) === null || _g === void 0 ? void 0 : _g.title) ? react_1.default.createElement(material_1.Box, { style: { color: checkColor } },
+                react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: styles.cellCopyButton, onClick: e => { var _b; return this.onCopy(e, (_b = item.data) === null || _b === void 0 ? void 0 : _b.title); } })) : null) : null;
+        let colMiddle;
+        if (!this.state.statesView) {
+            colMiddle = [
+                (narrowStyleWithDetails && (obj === null || obj === void 0 ? void 0 : obj.type)) || this.columnsVisibility.type ? {
+                    el: react_1.default.createElement("div", { key: "type", style: Object.assign(Object.assign({}, styles.cellType), { width: this.props.width !== 'xs' ? this.columnsVisibility.type : undefined }) },
+                        typeImg,
+                        "\u00A0", obj === null || obj === void 0 ? void 0 :
+                        obj.type),
+                    type: 'filter_type',
+                } : null,
+                (narrowStyleWithDetails && common) || this.columnsVisibility.role ? {
+                    el: react_1.default.createElement("div", { key: "role", style: Object.assign(Object.assign({}, styles.cellRole), { width: this.props.width !== 'xs' ? this.columnsVisibility.role : '100%', cursor: this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole
+                                ? 'text'
+                                : 'default' }), onClick: !narrowStyleWithDetails && this.state.filter.expertMode &&
+                            enumEditable && this.props.objectBrowserEditRole
+                            ? () => this.setState({ roleDialog: item.data.id })
+                            : undefined }, common === null || common === void 0 ? void 0 : common.role),
+                    type: 'filter_role',
+                    onClick: narrowStyleWithDetails && this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole
+                        ? () => this.setState({ roleDialog: item.data.id })
+                        : undefined,
+                } : null,
+                (narrowStyleWithDetails && common) || this.columnsVisibility.room ? {
+                    el: react_1.default.createElement("div", { key: "room", style: Object.assign(Object.assign(Object.assign({}, styles.cellRoom), (item.data.per ? styles.cellEnumParent : {})), { width: this.props.width !== 'xs' ? this.columnsVisibility.room : '100%', cursor: enumEditable ? 'text' : 'default' }), onClick: !narrowStyleWithDetails && enumEditable ? () => {
+                            const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'roomEnums');
+                            this.setState({
+                                enumDialogEnums: enums,
+                                enumDialog: {
+                                    item,
+                                    type: 'room',
+                                    enumsOriginal: JSON.stringify(enums),
+                                },
+                            });
+                        } : undefined }, item.data.rooms),
+                    type: 'filter_room',
+                    onClick: narrowStyleWithDetails && enumEditable ? () => {
+                        const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'roomEnums');
+                        this.setState({
+                            enumDialogEnums: enums,
+                            enumDialog: {
+                                item,
+                                type: 'room',
+                                enumsOriginal: JSON.stringify(enums),
+                            },
+                        });
+                    } : undefined,
+                } : null,
+                (narrowStyleWithDetails && common) || this.columnsVisibility.func ? {
+                    el: react_1.default.createElement("div", { key: "func", style: Object.assign(Object.assign(Object.assign({}, styles.cellFunc), (item.data.pef ? styles.cellEnumParent : {})), { width: this.props.width !== 'xs' ? this.columnsVisibility.func : '100%', cursor: enumEditable ? 'text' : 'default' }), onClick: !narrowStyleWithDetails && enumEditable ? () => {
+                            const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'funcEnums');
+                            this.setState({
+                                enumDialogEnums: enums,
+                                enumDialog: {
+                                    item,
+                                    type: 'func',
+                                    enumsOriginal: JSON.stringify(enums),
+                                },
+                            });
+                        } : undefined }, item.data.funcs),
+                    type: 'filter_func',
+                    onClick: narrowStyleWithDetails && enumEditable ? () => {
+                        const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'funcEnums');
+                        this.setState({
+                            enumDialogEnums: enums,
+                            enumDialog: {
+                                item,
+                                type: 'func',
+                                enumsOriginal: JSON.stringify(enums),
+                            },
+                        });
+                    } : undefined,
+                } : null,
+            ];
+        }
+        else {
+            colMiddle = [
+                (narrowStyleWithDetails && checkVisibleObjectType && ((_h = this.states[id]) === null || _h === void 0 ? void 0 : _h.from)) || this.columnsVisibility.changedFrom ? {
+                    el: react_1.default.createElement("div", { key: "from", style: Object.assign(Object.assign({}, styles.cellRole), { width: this.props.width !== 'xs' ? this.columnsVisibility.changedFrom : undefined }), title: newValueTitle.join('\n') }, checkVisibleObjectType && ((_j = this.states[id]) === null || _j === void 0 ? void 0 : _j.from) ? newValue : null),
+                    type: 'from',
+                } : null,
+                (narrowStyleWithDetails && q) || this.columnsVisibility.qualityCode ? {
+                    el: react_1.default.createElement("div", { key: "q", style: Object.assign(Object.assign({}, styles.cellRole), { width: this.props.width !== 'xs' ? this.columnsVisibility.qualityCode : undefined }), title: q || '' }, q),
+                    type: 'quality',
+                } : null,
+                (narrowStyleWithDetails && checkVisibleObjectType && ((_k = this.states[id]) === null || _k === void 0 ? void 0 : _k.ts)) || this.columnsVisibility.timestamp ? {
+                    el: react_1.default.createElement("div", { key: "ts", style: Object.assign(Object.assign({}, styles.cellRole), { width: this.props.width !== 'xs' ? this.columnsVisibility.timestamp : undefined }) }, checkVisibleObjectType && ((_l = this.states[id]) === null || _l === void 0 ? void 0 : _l.ts)
+                        ? Utils_1.default.formatDate(new Date(this.states[id].ts), this.props.dateFormat || this.systemConfig.common.dateFormat)
+                        : null),
+                    type: 'ts',
+                } : null,
+                (narrowStyleWithDetails && checkVisibleObjectType && ((_m = this.states[id]) === null || _m === void 0 ? void 0 : _m.lc)) || this.columnsVisibility.lastChange ? {
+                    el: react_1.default.createElement("div", { key: "lc", style: Object.assign(Object.assign({}, styles.cellRole), { width: this.props.width !== 'xs' ? this.columnsVisibility.lastChange : undefined }) }, checkVisibleObjectType && ((_o = this.states[id]) === null || _o === void 0 ? void 0 : _o.lc)
+                        ? Utils_1.default.formatDate(new Date(this.states[id].lc), this.props.dateFormat || this.systemConfig.common.dateFormat)
+                        : null),
+                    type: 'lc',
+                } : null,
+            ];
+        }
+        let colCustom = ((_p = this.adapterColumns) === null || _p === void 0 ? void 0 : _p.map(it => react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellAdapter), { width: this.props.width !== 'xs' ? this.columnsVisibility[it.id] : undefined }), key: it.id, title: `${it.adapter} => ${it.pathText}` }, obj ? this.renderCustomValue(obj, it, item) : null))) || null;
+        const columnValue = narrowStyleWithDetails || this.columnsVisibility.val ? this.renderColumnValue(id, item, narrowStyleWithDetails) : null;
+        let colValue = (narrowStyleWithDetails && columnValue) || this.columnsVisibility.val ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellValue), { width: this.props.width !== 'xs' ? this.columnsVisibility.val : undefined, cursor: valueEditable ? ((common === null || common === void 0 ? void 0 : common.type) === 'file' ? 'zoom-in' : (item.data.button ? 'grab' : 'text')) : 'default' }), onClick: valueEditable ? () => {
+                if (!obj || !this.states) {
+                    // return;
+                }
+                else if ((common === null || common === void 0 ? void 0 : common.type) === 'file') {
+                    this.setState({ viewFileDialog: id });
+                    // eslint-disable-next-line brace-style
+                }
+                else if (!this.state.filter.expertMode && item.data.button) {
+                    // in non-expert mode control button directly
+                    this.props.socket
+                        .setState(id, true)
+                        .catch(e => window.alert(`Cannot write state "${id}": ${e}`));
+                }
+                else {
+                    this.edit = {
+                        val: this.states[id] ? this.states[id].val : '',
+                        q: this.states[id] ? this.states[id].q || 0 : 0,
+                        ack: false,
+                        id,
+                    };
+                    this.setState({ updateOpened: true });
+                }
+            } : undefined }, columnValue) : null;
+        let colButtons = narrowStyleWithDetails || this.columnsVisibility.buttons ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellButtons), { width: this.props.width !== 'xs' ? this.columnsVisibility.buttons : undefined }) }, this.renderColumnButtons(id, item)) : null;
+        let colDetails = null;
+        if (this.props.width === 'xs' && this.state.focused === id) {
+            colMiddle = colMiddle.filter(a => a);
+            let renderedMiddle;
+            if (!colMiddle.length) {
+                renderedMiddle = null;
+            }
+            else {
+                renderedMiddle = colMiddle.map(it => react_1.default.createElement("div", { style: styles.cellDetailsLine },
+                    react_1.default.createElement("span", { style: styles.cellDetailsName },
+                        this.texts[it.type],
+                        ":"),
+                    it.el,
+                    react_1.default.createElement("div", { style: { flexGrow: 1 } }),
+                    it.onClick ? react_1.default.createElement(icons_material_1.Edit, { style: styles.cellCopyButtonInDetails, onClick: () => it.onClick() }) : null));
+            }
+            if (!colCustom.length) {
+                colCustom = null;
+            }
+            colDetails = react_1.default.createElement(material_1.Paper, { style: {
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    padding: 10,
+                    backgroundColor: this.props.theme.palette.mode === 'dark' ? '#333' : '#ccc',
+                } },
+                colName && react_1.default.createElement("div", { style: styles.cellDetailsLine },
+                    react_1.default.createElement("span", { style: styles.cellDetailsName },
+                        this.texts.name,
+                        ":"),
+                    colName,
+                    react_1.default.createElement("div", { style: { flexGrow: 1 } }),
+                    ((_q = item.data) === null || _q === void 0 ? void 0 : _q.title) ? react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: styles.cellCopyButtonInDetails, onClick: e => { var _b; return this.onCopy(e, (_b = item.data) === null || _b === void 0 ? void 0 : _b.title); } }) : null),
+                renderedMiddle,
+                colCustom && react_1.default.createElement("div", { style: styles.cellDetailsLine }, colCustom),
+                ((_r = this.objects[id]) === null || _r === void 0 ? void 0 : _r.type) === 'state' && react_1.default.createElement("div", { style: styles.cellDetailsLine },
+                    react_1.default.createElement("span", { style: styles.cellDetailsName },
+                        this.texts.value,
+                        ":"),
+                    colValue,
+                    react_1.default.createElement("div", { style: { flexGrow: 1 } }),
+                    react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: styles.cellCopyButtonInDetails, onClick: e => {
+                            const { valText } = formatValue({
+                                state: this.states[id],
+                                obj: this.objects[id],
+                                texts: this.texts,
+                                dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat,
+                                isFloatComma: this.props.isFloatComma === undefined ? this.systemConfig.common.isFloatComma : this.props.isFloatComma,
+                            });
+                            this.onCopy(e, valText.v.toString());
+                        }, key: "cc" })),
+                colButtons && react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellDetailsLine), { justifyContent: 'right' }) }, colButtons));
+            colName = null;
+            colMiddle = null;
+            colCustom = null;
+            colValue = null;
+            colButtons = null;
+        }
+        const row = react_1.default.createElement(material_1.Grid, { container: true, direction: "row", wrap: "nowrap", sx: Utils_1.default.getStyle(this.props.theme, styles.tableRow, this.state.linesEnabled && styles.tableRowLines, !this.props.dragEnabled && styles.tableRowNoDragging, alias && styles.tableRowAlias, readWriteAlias && styles.tableRowAliasReadWrite, this.state.focused === id && this.props.multiSelect && styles.tableRowFocused, !item.data.visible && styles.filteredOut, item.data.hasVisibleParent &&
                 !item.data.visible &&
                 !item.data.hasVisibleChildren &&
                 styles.filteredParentOut, this.state.selected.includes(id) && styles.itemSelected, this.state.selectedNonObject === id && styles.itemSelected), key: id, id: id, onMouseDown: e => {
@@ -4442,89 +4678,13 @@ class ObjectBrowserClass extends react_1.Component {
                     this.toggleExpanded(id);
                 }
             } },
-            react_1.default.createElement(material_1.Grid, { container: true, wrap: "nowrap", direction: "row", sx: styles.cellId, style: { width: this.columnsVisibility.id, paddingLeft } },
-                react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" },
-                    checkbox,
-                    iconFolder),
-                react_1.default.createElement(material_1.Grid, { item: true, style: Object.assign(Object.assign(Object.assign({}, styles.cellIdSpan), (invertBackground ? this.styles.invertedBackground : undefined)), { color: checkColor, fontWeight: bold ? 'bold' : undefined }) },
-                    react_1.default.createElement(material_1.Tooltip, { title: getIdFieldTooltip(item.data, this.props.lang), componentsProps: { popper: { sx: styles.tooltip } } },
-                        react_1.default.createElement("div", null, item.data.name)),
-                    alias,
-                    icons),
-                react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.grow), (invertBackground ? this.styles.invertedBackgroundFlex : {})) }),
-                react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" }, iconItem),
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: styles.cellCopyButton, onClick: e => this.onCopy(e, id) }))),
-            this.columnsVisibility.name ? react_1.default.createElement(material_1.Box, { component: "div", sx: Object.assign(Object.assign(Object.assign({}, styles.cellName), (useDesc ? styles.cellNameWithDesc : undefined)), { width: this.columnsVisibility.name }) },
-                name,
-                ((_g = item.data) === null || _g === void 0 ? void 0 : _g.title) ? react_1.default.createElement(material_1.Box, { style: { color: checkColor } },
-                    react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: styles.cellCopyButton, onClick: e => { var _b; return this.onCopy(e, (_b = item.data) === null || _b === void 0 ? void 0 : _b.title); } })) : null) : null,
-            !this.state.statesView ? react_1.default.createElement(react_1.default.Fragment, null,
-                this.columnsVisibility.type ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellType), { width: this.columnsVisibility.type }) },
-                    typeImg,
-                    "\u00A0",
-                    obj && obj.type) : null,
-                this.columnsVisibility.role ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellRole), { width: this.columnsVisibility.role, cursor: this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole
-                            ? 'text'
-                            : 'default' }), onClick: this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole
-                        ? () => this.setState({ roleDialog: item.data.id })
-                        : undefined }, common === null || common === void 0 ? void 0 : common.role) : null,
-                this.columnsVisibility.room ? react_1.default.createElement("div", { style: Object.assign(Object.assign(Object.assign({}, styles.cellRoom), (item.data.per ? styles.cellEnumParent : {})), { width: this.columnsVisibility.room, cursor: enumEditable ? 'text' : 'default' }), onClick: enumEditable ? () => {
-                        const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'roomEnums');
-                        this.setState({
-                            enumDialogEnums: enums,
-                            enumDialog: {
-                                item,
-                                type: 'room',
-                                enumsOriginal: JSON.stringify(enums),
-                            },
-                        });
-                    } : undefined }, item.data.rooms) : null,
-                this.columnsVisibility.func ? react_1.default.createElement("div", { style: Object.assign(Object.assign(Object.assign({}, styles.cellFunc), (item.data.pef ? styles.cellEnumParent : {})), { width: this.columnsVisibility.func, cursor: enumEditable ? 'text' : 'default' }), onClick: enumEditable ? () => {
-                        const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'funcEnums');
-                        this.setState({
-                            enumDialogEnums: enums,
-                            enumDialog: {
-                                item,
-                                type: 'func',
-                                enumsOriginal: JSON.stringify(enums),
-                            },
-                        });
-                    } : undefined }, item.data.funcs) : null) : react_1.default.createElement(react_1.default.Fragment, null,
-                this.columnsVisibility.changedFrom ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellRole), { width: this.columnsVisibility.changedFrom }), title: newValueTitle.join('\n') }, checkVisibleObjectType && ((_h = this.states[id]) === null || _h === void 0 ? void 0 : _h.from) ? newValue : null) : null,
-                this.columnsVisibility.qualityCode ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellRole), { width: this.columnsVisibility.qualityCode }), title: q || '' }, q) : null,
-                this.columnsVisibility.timestamp ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellRole), { width: this.columnsVisibility.timestamp }) }, checkVisibleObjectType && ((_j = this.states[id]) === null || _j === void 0 ? void 0 : _j.ts)
-                    ? Utils_1.default.formatDate(new Date(this.states[id].ts), this.props.dateFormat || this.systemConfig.common.dateFormat)
-                    : null) : null,
-                this.columnsVisibility.lastChange ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellRole), { width: this.columnsVisibility.lastChange }) }, checkVisibleObjectType && ((_k = this.states[id]) === null || _k === void 0 ? void 0 : _k.lc)
-                    ? Utils_1.default.formatDate(new Date(this.states[id].lc), this.props.dateFormat || this.systemConfig.common.dateFormat)
-                    : null) : null),
-            this.adapterColumns.map(it => react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellAdapter), { width: this.columnsVisibility[it.id] }), key: it.id, title: `${it.adapter} => ${it.pathText}` }, obj ? this.renderCustomValue(obj, it, item) : null)),
-            this.columnsVisibility.val ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellValue), { width: this.columnsVisibility.val, cursor: valueEditable ? ((common === null || common === void 0 ? void 0 : common.type) === 'file' ? 'zoom-in' : (item.data.button ? 'grab' : 'text')) : 'default' }), onClick: valueEditable ? () => {
-                    if (!obj || !this.states) {
-                        // return;
-                    }
-                    else if ((common === null || common === void 0 ? void 0 : common.type) === 'file') {
-                        this.setState({ viewFileDialog: id });
-                        // eslint-disable-next-line brace-style
-                    }
-                    else if (!this.state.filter.expertMode && item.data.button) {
-                        // in non-expert mode control button directly
-                        this.props.socket
-                            .setState(id, true)
-                            .catch(e => window.alert(`Cannot write state "${id}": ${e}`));
-                    }
-                    else {
-                        this.edit = {
-                            val: this.states[id] ? this.states[id].val : '',
-                            q: this.states[id] ? this.states[id].q || 0 : 0,
-                            ack: false,
-                            id,
-                        };
-                        this.setState({ updateOpened: true });
-                    }
-                } : undefined }, this.renderColumnValue(id, item)) : null,
-            this.columnsVisibility.buttons ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellButtons), { width: this.columnsVisibility.buttons }) }, this.renderColumnButtons(id, item)) : null);
+            colID,
+            colName, colMiddle === null || colMiddle === void 0 ? void 0 :
+            colMiddle.map(it => it === null || it === void 0 ? void 0 : it.el),
+            colCustom,
+            colValue,
+            colButtons);
+        return { row, details: colDetails };
     }
     /**
      * Renders an item.
@@ -4532,18 +4692,25 @@ class ObjectBrowserClass extends react_1.Component {
     renderItem(root, isExpanded, counter) {
         const items = [];
         counter = counter || { count: 0 };
-        let leaf = this.renderLeaf(root, isExpanded, counter);
+        const result = this.renderLeaf(root, isExpanded, counter);
+        let leaf;
         const DragWrapper = this.props.DragWrapper;
         if (this.props.dragEnabled && DragWrapper) {
             if (root.data.sumVisibility) {
-                leaf = react_1.default.createElement(DragWrapper, { key: root.data.id, item: root, style: styles.draggable }, leaf);
+                leaf = react_1.default.createElement(DragWrapper, { key: root.data.id, item: root, style: styles.draggable }, result.row);
             }
             else {
                 // change cursor
-                leaf = react_1.default.createElement("div", { key: root.data.id, style: styles.nonDraggable }, leaf);
+                leaf = react_1.default.createElement("div", { key: root.data.id, style: styles.nonDraggable }, result.row);
             }
         }
+        else {
+            leaf = result.row;
+        }
         root.data.id && leaf && items.push(leaf);
+        if (result.details) {
+            items.push(result.details);
+        }
         isExpanded = isExpanded === undefined ? binarySearch(this.state.expanded, root.data.id) : isExpanded;
         if (!root.data.id || isExpanded) {
             if (!this.state.foldersFirst) {
@@ -4815,6 +4982,10 @@ class ObjectBrowserClass extends react_1.Component {
                 react_1.default.createElement(IconClearFilter_1.default, null),
                 react_1.default.createElement(icons_material_1.Close, { style: styles.buttonClearFilterIcon }));
         }
+        if (this.props.width === 'xs') {
+            return react_1.default.createElement("div", { style: styles.headerRow },
+                react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: '100%' }) }, this.getFilterInput('id')));
+        }
         return react_1.default.createElement("div", { style: styles.headerRow },
             react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.id, position: 'relative' }), "data-min": 240, "data-name": "id" },
                 this.getFilterInput('id'),
@@ -5302,7 +5473,7 @@ class ObjectBrowserClass extends react_1.Component {
         return react_1.default.createElement(ObjectBrowserValue, { t: this.props.t, lang: this.props.lang, type: type, role: role || '', states: Utils_1.default.getStates(this.objects[this.edit.id]), themeType: this.props.themeType, theme: this.props.theme, expertMode: !!this.state.filter.expertMode, value: this.edit.val, socket: this.props.socket, object: this.objects[this.edit.id], defaultHistory: this.defaultHistory, dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat, isFloatComma: this.props.isFloatComma === undefined ? this.systemConfig.common.isFloatComma : this.props.isFloatComma, onClose: (res) => {
                 this.setState({ updateOpened: false });
                 res && this.onUpdate(res);
-            } });
+            }, width: this.props.width });
     }
     /**
      * The rendering method of this component.

package/README.md

@@ -771,6 +771,10 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
 -->
 
 ## Changelog
+### 6.0.10 (2024-06-27)
+* (bluefox) Added translation
+* (bluefox) Mobile object browser improved
+
 ### 6.0.9 (2024-06-26)
 * (bluefox) Corrected Icons
 

package/i18n/de.json

@@ -425,5 +425,6 @@
   "ra_Advanced options": "Erweiterte Optionen",
   "sc_everyN_dow": "jeden x-ten Tag der Woche",
   "sc_every_dow": "jeden Tag der Woche",
-  "sc_specific_dow": "bestimmte(r) Tag(e) der Woche"
+  "sc_specific_dow": "bestimmte(r) Tag(e) der Woche",
+  "ra_Name": "Name"
 }

package/i18n/en.json

@@ -425,5 +425,6 @@
   "ra_create_boolean_state": "Create boolean state",
   "ra_Select color": "Select color",
   "ra_Cannot read licenses: %s": "Cannot read licenses: %s",
-  "ra_Advanced options": "Advanced options"
+  "ra_Advanced options": "Advanced options",
+  "ra_Name": "Name"
 }

package/i18n/es.json

@@ -425,5 +425,6 @@
   "ra_Advanced options": "Opciones avanzadas",
   "sc_everyN_dow": "cada enésimo día de la semana",
   "sc_every_dow": "Cada día de la semana",
-  "sc_specific_dow": "día(s) específico(s) de la semana"
+  "sc_specific_dow": "día(s) específico(s) de la semana",
+  "ra_Name": "Nombre"
 }

package/i18n/fr.json

@@ -425,5 +425,6 @@
   "ra_Advanced options": "Options avancées",
   "sc_everyN_dow": "chaque Nième jour de la semaine",
   "sc_every_dow": "Chaque jour de la semaine",
-  "sc_specific_dow": "jour(s) spécifique(s) de la semaine"
+  "sc_specific_dow": "jour(s) spécifique(s) de la semaine",
+  "ra_Name": "Nom"
 }

package/i18n/it.json

@@ -425,5 +425,6 @@
   "ra_Advanced options": "Opzioni avanzate",
   "sc_everyN_dow": "ogni Nesimo giorno della settimana",
   "sc_every_dow": "Tutti i giorni della settimana",
-  "sc_specific_dow": "giorno/i specifico/i della settimana"
+  "sc_specific_dow": "giorno/i specifico/i della settimana",
+  "ra_Name": "Nome"
 }

package/i18n/nl.json

@@ -425,5 +425,6 @@
   "ra_Advanced options": "Geavanceerde mogelijkheden",
   "sc_everyN_dow": "elke N-de dag van de week",
   "sc_every_dow": "elke dag van de week",
-  "sc_specific_dow": "specifieke dag(en) van de week"
+  "sc_specific_dow": "specifieke dag(en) van de week",
+  "ra_Name": "Naam"
 }

package/i18n/pl.json

@@ -425,5 +425,6 @@
   "ra_Advanced options": "Zaawansowane opcje",
   "sc_everyN_dow": "w każdy N-ty dzień tygodnia",
   "sc_every_dow": "każdy dzień tygodnia",
-  "sc_specific_dow": "określone dni tygodnia"
+  "sc_specific_dow": "określone dni tygodnia",
+  "ra_Name": "Nazwa"
 }

package/i18n/pt.json

@@ -425,5 +425,6 @@
   "ra_Advanced options": "Opções avançadas",
   "sc_everyN_dow": "todo enésimo dia da semana",
   "sc_every_dow": "todos os dias da semana",
-  "sc_specific_dow": "dia(s) específico(s) da semana"
+  "sc_specific_dow": "dia(s) específico(s) da semana",
+  "ra_Name": "Nome"
 }

package/i18n/ru.json

@@ -425,5 +425,6 @@
   "ra_Advanced options": "Расширенные настройки",
   "sc_everyN_dow": "каждый N-й день недели",
   "sc_every_dow": "Каждый день недели",
-  "sc_specific_dow": "конкретный день(а) недели"
+  "sc_specific_dow": "конкретный день(а) недели",
+  "ra_Name": "Имя"
 }

package/i18n/uk.json

@@ -425,5 +425,6 @@
   "ra_Advanced options": "Розширені опції",
   "sc_everyN_dow": "кожен N-й день тижня",
   "sc_every_dow": "кожен день тижня",
-  "sc_specific_dow": "конкретний день (дні) тижня"
+  "sc_specific_dow": "конкретний день (дні) тижня",
+  "ra_Name": "Ім'я"
 }

package/i18n/zh-cn.json

@@ -425,5 +425,6 @@
   "ra_Advanced options": "高级选项",
   "sc_everyN_dow": "每周的第 N 天",
   "sc_every_dow": "一周的每一天",
-  "sc_specific_dow": "一周中的特定日子"
+  "sc_specific_dow": "一周中的特定日子",
+  "ra_Name": "姓名"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "6.0.9",
+  "version": "6.0.10",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",