@iobroker/adapter-react-v5 6.1.9 → 7.0.1

package/Components/ObjectBrowser.js

@@ -251,7 +251,7 @@ const styles = {
         // display: 'inline-block',
         // verticalAlign: 'top',
     },
-    // this style is used for simple div. Do not migrate it to "secondary.main"
+    // This style is used for simple div. Do not migrate it to "secondary.main"
     cellIdIconFolder: (theme) => ({
         marginRight: 8,
         width: ROW_HEIGHT - 4,
@@ -390,9 +390,6 @@ const styles = {
     },
     cellValueButton: {
         marginTop: 5,
-        '&:active': {
-            transform: 'scale(0.8)',
-        },
     },
     cellValueButtonFalse: {
         opacity: 0.3,
@@ -408,7 +405,7 @@ const styles = {
         width: '100%',
         height: ROW_HEIGHT,
         fontSize: 16,
-        display: 'inline-block',
+        display: 'flex',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         position: 'relative',
@@ -455,6 +452,7 @@ const styles = {
     cellValueTextUnit: {
         marginLeft: 4,
         opacity: 0.8,
+        display: 'inline-block',
     },
     cellValueTextState: {
         opacity: 0.7,
@@ -529,7 +527,7 @@ const styles = {
     cellDetailsName: {
         fontWeight: 'bold',
         marginRight: 8,
-        minWidth: 100,
+        minWidth: 80,
     },
     filteredOut: {
         opacity: 0.5,
@@ -750,6 +748,12 @@ const styles = {
         display: 'flex',
     },
 };
+function ButtonIcon(props) {
+    return react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 436 436", style: props === null || props === void 0 ? void 0 : props.style, width: "24", height: "24", className: "admin-button" },
+        react_1.default.createElement("g", { fill: "currentColor" },
+            react_1.default.createElement("path", { d: "m195.23077,24.30769c-36,3 -67,12 -96,26c-49,24 -82,61 -93,104l-3,11l-1,50c0,46 0,49 2,59l5,20c21,58 84,103 165,116c16,3 53,4 70,2c60,-6 111,-28 147,-64c21,-21 36,-49 40,-74a866,866 0 0 0 1,-104c-3,-18 -6,-28 -13,-43c-26,-52 -87,-90 -162,-101c-16,-2 -48,-3 -63,-2l1,0zm60,23c36,5 70,18 95,35c31,20 51,47 59,77c2,7 2,11 2,25c1,15 0,18 -2,26c-19,69 -104,117 -200,114c-47,-2 -90,-15 -124,-38c-31,-20 -51,-47 -59,-77c-3,-11 -4,-32 -2,-43c8,-42 41,-78 91,-101a260,260 0 0 1 140,-19l0,1zm-221,222c21,26 57,49 95,62c81,27 174,14 239,-32c14,-10 31,-27 41,-41c2,-2 2,-2 2,7c-1,23 -16,50 -38,72c-78,74 -233,74 -311,-1a121,121 0 0 1 -39,-76l0,-6l3,4l8,11z" }),
+            react_1.default.createElement("path", { d: "m201.23077,47.30769c-40,3 -79,19 -104,44c-55,55 -38,133 37,171c52,26 122,24 172,-5c30,-17 51,-42 58,-71c3,-11 3,-34 0,-45c-6,-23 -21,-44 -40,-60l-27,-16a184,184 0 0 0 -96,-18zm30,21c56,5 100,35 112,75c4,11 4,30 0,41c-8,25 -26,45 -54,59a166,166 0 0 1 -160,-8a98,98 0 0 1 -41,-53c-5,-18 -2,-39 8,-57c23,-39 79,-62 135,-57z" })));
+}
 /**
  * Function that walks through all keys of an object or array and applies a function to each key.
  */
@@ -1136,7 +1140,9 @@ function getVisibleItems(item, type, objects, _result) {
     _result = _result || [];
     const data = item.data;
     if (data.sumVisibility) {
-        data.id && objects[data.id] && (!type || objects[data.id].type === type) && _result.push(data.id);
+        if (data.id && objects[data.id] && (!type || objects[data.id].type === type)) {
+            _result.push(data.id);
+        }
         (_b = item.children) === null || _b === void 0 ? void 0 : _b.forEach(_item => getVisibleItems(_item, type, objects, _result));
     }
     return _result;
@@ -1197,7 +1203,7 @@ function getIdFieldTooltip(data, lang) {
     return react_1.default.createElement("span", { style: styles.cellIdTooltip }, tooltip || data.id || '');
 }
 function buildTree(objects, options) {
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
     const imagePrefix = options.imagePrefix || '.';
     let ids = Object.keys(objects);
     ids.sort((a, b) => {
@@ -1322,6 +1328,8 @@ function buildTree(objects, options) {
                             typeof obj.common.role === 'string' &&
                             obj.common.role.startsWith('button') &&
                             ((_f = obj.common) === null || _f === void 0 ? void 0 : _f.write) !== false,
+                        switch: obj.type === 'state' && ((_g = obj.common) === null || _g === void 0 ? void 0 : _g.type) === 'boolean' &&
+                            ((_h = obj.common) === null || _h === void 0 ? void 0 : _h.write) !== false && ((_j = obj.common) === null || _j === void 0 ? void 0 : _j.read) !== false,
                     },
                 };
                 cRoot.children = cRoot.children || [];
@@ -1625,7 +1633,7 @@ function formatValue(options) {
     };
 }
 /**
- * Get css style for given state value
+ * Get CSS style for given state value
  */
 function getValueStyle(options) {
     const { state, isExpertMode, isButton } = options;
@@ -1876,7 +1884,9 @@ class ObjectBrowserClass extends react_1.Component {
                         newState = newInnerState;
                     }
                 });
-                newState && this.setState(newState);
+                if (newState) {
+                    this.setState(newState);
+                }
                 this.afterObjectUpdated();
             }
         };
@@ -1885,7 +1895,9 @@ class ObjectBrowserClass extends react_1.Component {
             if (filtered) {
                 return;
             }
-            newInnerState && this.setState(newInnerState);
+            if (newInnerState) {
+                this.setState(newInnerState);
+            }
             this.afterObjectUpdated();
         };
         this.getEnumsForId = (id) => {
@@ -2121,7 +2133,9 @@ class ObjectBrowserClass extends react_1.Component {
                         this.resizerCurrentWidths.name = width - this.state.scrollBarWidth;
                     }
                     this.customWidth = true;
-                    this.resizeTimeout && clearTimeout(this.resizeTimeout);
+                    if (this.resizeTimeout) {
+                        clearTimeout(this.resizeTimeout);
+                    }
                     this.resizeTimeout = setTimeout(() => {
                         this.resizeTimeout = null;
                         this.forceUpdate();
@@ -2193,7 +2207,7 @@ class ObjectBrowserClass extends react_1.Component {
                 const lastSelectedItems = JSON.parse(lastSelectedItemStr);
                 this.selectFirst = lastSelectedItems[0] || '';
             }
-            catch (e) {
+            catch (_b) {
                 // ignore
             }
         }
@@ -2205,7 +2219,7 @@ class ObjectBrowserClass extends react_1.Component {
         try {
             expanded = JSON.parse(expandedStr);
         }
-        catch (e) {
+        catch (_c) {
             expanded = [];
         }
         let filter;
@@ -2216,7 +2230,7 @@ class ObjectBrowserClass extends react_1.Component {
             try {
                 filter = JSON.parse(filterStr);
             }
-            catch (e) {
+            catch (_d) {
                 filter = Object.assign({}, DEFAULT_FILTER);
             }
         }
@@ -2237,7 +2251,9 @@ class ObjectBrowserClass extends react_1.Component {
         // remove type column if only one type must be selected
         if (props.types && props.types.length === 1) {
             const pos = this.visibleCols.indexOf('type');
-            pos !== -1 && this.visibleCols.splice(pos, 1);
+            if (pos !== -1) {
+                this.visibleCols.splice(pos, 1);
+            }
         }
         this.possibleCols = SCREEN_WIDTHS.xl.fields;
         let customDialog = null;
@@ -2262,14 +2278,14 @@ class ObjectBrowserClass extends react_1.Component {
         try {
             columns = columnsStr ? JSON.parse(columnsStr) : null;
         }
-        catch (e) {
+        catch (_e) {
             columns = null;
         }
         let columnsWidths = null; // this.localStorage.getItem(`${props.dialogName || 'App'}.columnsWidths`);
         try {
             columnsWidths = columnsWidths ? JSON.parse(columnsWidths) : {};
         }
-        catch (e) {
+        catch (_f) {
             columnsWidths = {};
         }
         this.imagePrefix = props.imagePrefix || '.';
@@ -2290,7 +2306,7 @@ class ObjectBrowserClass extends react_1.Component {
                 ? JSON.parse(this.localStorage.getItem(`${props.dialogName || 'App'}.objectStatesView`) || '') || false
                 : false;
         }
-        catch (error) {
+        catch (_g) {
             // ignore
         }
         this.state = {
@@ -2410,7 +2426,7 @@ class ObjectBrowserClass extends react_1.Component {
                 });
                 this.customWidth = true;
             }
-            catch (e) {
+            catch (_h) {
                 // ignore
             }
         }
@@ -2510,7 +2526,9 @@ class ObjectBrowserClass extends react_1.Component {
             else {
                 this.objects = objects;
             }
-            props.setObjectsReference && props.setObjectsReference(this.objects);
+            if (props.setObjectsReference) {
+                props.setObjectsReference(this.objects);
+            }
             // read default history
             this.defaultHistory = this.systemConfig.common.defaultHistory;
             if (this.defaultHistory) {
@@ -2579,8 +2597,8 @@ class ObjectBrowserClass extends react_1.Component {
             this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectExpanded`, JSON.stringify(expanded));
             this.setState({ expanded }, cb);
         }
-        else {
-            cb && cb();
+        else if (cb) {
+            cb();
         }
     }
     /**
@@ -2596,7 +2614,9 @@ class ObjectBrowserClass extends react_1.Component {
             }
             if (this.state.selected.length === 1 && this.objects[this.state.selected[0]]) {
                 const name = Utils_1.default.getObjectName(this.objects, this.state.selected[0], null, { language: this.props.lang });
-                this.props.onSelect && this.props.onSelect(this.state.selected, name, isDouble);
+                if (this.props.onSelect) {
+                    this.props.onSelect(this.state.selected, name, isDouble);
+                }
             }
         }
         else {
@@ -2604,8 +2624,8 @@ class ObjectBrowserClass extends react_1.Component {
             if (this.state.selected.length) {
                 this.setState({ selected: [] }, () => this.props.onSelect && this.props.onSelect([], ''));
             }
-            else {
-                this.props.onSelect && this.props.onSelect([], '');
+            else if (this.props.onSelect) {
+                this.props.onSelect([], '');
             }
         }
     }
@@ -2637,8 +2657,10 @@ class ObjectBrowserClass extends react_1.Component {
      * Called when component is unmounted.
      */
     componentWillUnmount() {
-        this.filterTimer && clearTimeout(this.filterTimer);
-        this.filterTimer = null;
+        if (this.filterTimer) {
+            clearTimeout(this.filterTimer);
+            this.filterTimer = null;
+        }
         window.removeEventListener('contextmenu', this.onContextMenu, true);
         if (this.props.objectsWorker) {
             this.props.objectsWorker.unregisterHandler(this.onObjectChangeFromWorker, true);
@@ -2673,7 +2695,9 @@ class ObjectBrowserClass extends react_1.Component {
                 break;
             }
         }
-        this.props.onObjectDelete && this.props.onObjectDelete(id, !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length), !((_c = obj.common) === null || _c === void 0 ? void 0 : _c.dontDelete), count + 1);
+        if (this.props.onObjectDelete) {
+            this.props.onObjectDelete(id, !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length), !((_c = obj.common) === null || _c === void 0 ? void 0 : _c.dontDelete), count + 1);
+        }
     }
     /**
      * Called when component is mounted.
@@ -2722,7 +2746,9 @@ class ObjectBrowserClass extends react_1.Component {
                 if (this.state.selected[0] !== toggleItem) {
                     this.setState({ selected: [toggleItem], selectedNonObject: '', focused: toggleItem }, () => {
                         this.onAfterSelect(isDouble);
-                        cb && cb();
+                        if (cb) {
+                            cb();
+                        }
                     });
                 }
                 else if (isDouble && this.props.onSelect) {
@@ -2733,7 +2759,9 @@ class ObjectBrowserClass extends react_1.Component {
                 this.localStorage.setItem(`${this.props.dialogName || 'App'}.selectedNonObject`, toggleItem);
                 this.setState({ selected: [], selectedNonObject: toggleItem, focused: toggleItem }, () => {
                     this.onAfterSelect();
-                    cb && cb();
+                    if (cb) {
+                        cb();
+                    }
                 });
             }
         }
@@ -2751,7 +2779,9 @@ class ObjectBrowserClass extends react_1.Component {
             }
             this.setState({ selected, selectedNonObject: '', focused: toggleItem }, () => {
                 this.onAfterSelect(isDouble);
-                cb && cb();
+                if (cb) {
+                    cb();
+                }
             });
         }
     }
@@ -2878,7 +2908,9 @@ class ObjectBrowserClass extends react_1.Component {
     checkUnsubscribes() {
         // Remove unused subscriptions
         for (let i = this.subscribes.length - 1; i >= 0; i--) {
-            !this.recordStates.includes(this.subscribes[i]) && this.unsubscribe(this.subscribes[i]);
+            if (!this.recordStates.includes(this.subscribes[i])) {
+                this.unsubscribe(this.subscribes[i]);
+            }
         }
         this.recordStates = [];
     }
@@ -3029,7 +3061,9 @@ class ObjectBrowserClass extends react_1.Component {
         if (!this.subscribes.includes(id)) {
             this.subscribes.push(id);
             console.log(`+ subscribe ${id}`);
-            !this.pausedSubscribes && this.props.socket.subscribeState(id, this.onStateChange);
+            if (!this.pausedSubscribes) {
+                this.props.socket.subscribeState(id, this.onStateChange);
+            }
         }
     }
     unsubscribe(id) {
@@ -3112,7 +3146,9 @@ class ObjectBrowserClass extends react_1.Component {
             // style={{ marginTop: 0, marginBottom: 0 }}
             margin: "dense" },
             react_1.default.createElement(material_1.Input, { ref: this.filterRefs[filterName], classes: { underline: 'no-underline' }, id: filterName, placeholder: this.texts[`filter_${filterName}`], defaultValue: this.state.filter[filterName] || '', onChange: () => {
-                    this.filterTimer && clearTimeout(this.filterTimer);
+                    if (this.filterTimer) {
+                        clearTimeout(this.filterTimer);
+                    }
                     this.filterTimer = setTimeout(() => this.onFilter(), 400);
                 }, autoComplete: "off" }),
             ((_d = (_c = (_b = this.filterRefs[filterName]) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.firstChild) === null || _d === void 0 ? void 0 : _d.value) ? react_1.default.createElement("div", { style: {
@@ -3131,7 +3167,9 @@ class ObjectBrowserClass extends react_1.Component {
         const hasIcons = !!(values === null || values === void 0 ? void 0 : values.find(item => item.icon));
         return react_1.default.createElement("div", { style: { position: 'relative' } },
             react_1.default.createElement(material_1.Select, { variant: "standard", key: `${name}_${this.state.filterKey}`, ref: this.filterRefs[name], sx: styles.headerCellInput, className: "no-underline", onChange: () => {
-                    this.filterTimer && clearTimeout(this.filterTimer);
+                    if (this.filterTimer) {
+                        clearTimeout(this.filterTimer);
+                    }
                     this.filterTimer = setTimeout(() => this.onFilter(), 400);
                 }, defaultValue: this.state.filter[name] || '', inputProps: { name, id: name }, displayEmpty: true },
                 react_1.default.createElement(material_1.MenuItem, { key: "empty", value: "" },
@@ -3253,7 +3291,9 @@ class ObjectBrowserClass extends react_1.Component {
         if (this.state.depth < 9) {
             const depth = this.state.depth + 1;
             const expanded = [...this.state.expanded];
-            this.root && this.expandDepth(this.root, depth, expanded);
+            if (this.root) {
+                this.expandDepth(this.root, depth, expanded);
+            }
             this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectExpanded`, JSON.stringify(expanded));
             this.setState({ depth, expanded });
         }
@@ -3298,7 +3338,9 @@ class ObjectBrowserClass extends react_1.Component {
                 }
                 try {
                     await this.props.socket.setObject(id, obj);
-                    enums && (await this._createAllEnums(enums, obj._id));
+                    if (enums) {
+                        await this._createAllEnums(enums, obj._id);
+                    }
                     if (obj.type === 'state') {
                         if (val !== undefined && val !== null) {
                             try {
@@ -3678,7 +3720,9 @@ class ObjectBrowserClass extends react_1.Component {
                                 break;
                             }
                         }
-                        this.props.onObjectDelete && this.props.onObjectDelete(id, !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length), false, count + 1);
+                        if (this.props.onObjectDelete) {
+                            this.props.onObjectDelete(id, !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length), false, count + 1);
+                        }
                     } },
                     react_1.default.createElement(icons_material_1.Delete, { style: styles.cellButtonsButtonIcon })) : null) : null;
         }
@@ -3720,7 +3764,9 @@ class ObjectBrowserClass extends react_1.Component {
                             break;
                         }
                     }
-                    this.props.onObjectDelete && this.props.onObjectDelete(id, !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length), !((_d = (_c = item.data.obj) === null || _c === void 0 ? void 0 : _c.common) === null || _d === void 0 ? void 0 : _d.dontDelete), count);
+                    if (this.props.onObjectDelete) {
+                        this.props.onObjectDelete(id, !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length), !((_d = (_c = item.data.obj) === null || _c === void 0 ? void 0 : _c.common) === null || _d === void 0 ? void 0 : _d.dontDelete), count);
+                    }
                 }, title: this.texts.deleteObject },
                 react_1.default.createElement(icons_material_1.Delete, { style: styles.cellButtonsButtonIcon })) : null,
             this.props.objectCustomDialog &&
@@ -3811,14 +3857,18 @@ class ObjectBrowserClass extends react_1.Component {
                     ":\u00A0",
                     _item.v));
                 // <div style={styles.cellValueTooltipValue} key={item.t + '_v'}>{item.v}</div>,
-                !_item.nbr && valFullRx.push(react_1.default.createElement("br", { key: `${_item.t}_br` }));
+                if (!_item.nbr) {
+                    valFullRx.push(react_1.default.createElement("br", { key: `${_item.t}_br` }));
+                }
             }
             else {
                 valFullRx.push(react_1.default.createElement("div", { style: styles.cellValueTooltipTitle, key: _item.t },
                     _item.t,
                     ":\u00A0"));
                 valFullRx.push(react_1.default.createElement("div", { style: styles.cellValueTooltipValue, key: `${_item.t}_v` }, _item.v));
-                !_item.nbr && valFullRx.push(react_1.default.createElement("br", { key: `${_item.t}_br` }));
+                if (!_item.nbr) {
+                    valFullRx.push(react_1.default.createElement("br", { key: `${_item.t}_br` }));
+                }
             }
         });
         if (fileViewer === 'image') {
@@ -3843,13 +3893,17 @@ class ObjectBrowserClass extends react_1.Component {
         if (!this.states[id]) {
             if (obj.type === 'state') {
                 // we are waiting for state
-                !this.recordStates.includes(id) && this.recordStates.push(id);
+                if (!this.recordStates.includes(id)) {
+                    this.recordStates.push(id);
+                }
                 this.states[id] = { val: null };
                 this.subscribe(id);
             }
             return null;
         }
-        !this.recordStates.includes(id) && this.recordStates.push(id);
+        if (!this.recordStates.includes(id)) {
+            this.recordStates.push(id);
+        }
         const state = this.states[id];
         let info = item.data.state;
         if (!info) {
@@ -3863,31 +3917,55 @@ class ObjectBrowserClass extends react_1.Component {
             const valTextRx = [];
             item.data.state = { valTextRx };
             const copyText = valText.v || '';
-            valTextRx.push(react_1.default.createElement("span", { className: `newValueBrowser-${this.props.themeType || 'light'}`, key: `${valText.v.toString()}valText` }, valText.v.toString()));
-            valText.u && valTextRx.push(react_1.default.createElement("span", { className: `newValueBrowser-${this.props.themeType || 'light'}`, style: styles.cellValueTextUnit, key: `${valText.v.toString()}unit` }, valText.u));
-            valText.s !== undefined && valTextRx.push(react_1.default.createElement("span", { style: styles.cellValueTextState, className: `newValueBrowser-${this.props.themeType || 'light'}`, key: `${valText.v.toString()}states` },
-                "(",
-                valText.s,
-                ")"));
-            !narrowStyleWithDetails && valTextRx.push(react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: this.styles.iconCopy, onClick: e => this.onCopy(e, copyText), key: "cc" }));
+            valTextRx.push(react_1.default.createElement("span", { className: `newValueBrowser-${this.props.themeType || 'light'}`, key: `${valText.v.toString()}valText`, style: {
+                    whiteSpace: 'nowrap',
+                    display: 'inline-block',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                } }, valText.v.toString()));
+            if (valText.u) {
+                valTextRx.push(react_1.default.createElement("span", { className: `newValueBrowser-${this.props.themeType || 'light'}`, style: styles.cellValueTextUnit, key: `${valText.v.toString()}unit` }, valText.u));
+            }
+            if (valText.s !== undefined) {
+                valTextRx.push(react_1.default.createElement("span", { style: styles.cellValueTextState, className: `newValueBrowser-${this.props.themeType || 'light'}`, key: `${valText.v.toString()}states` },
+                    "(",
+                    valText.s,
+                    ")"));
+            }
+            if (!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;
         }
         info.style = getValueStyle({ state, isExpertMode: this.state.filter.expertMode, isButton: item.data.button });
         let val = info.valTextRx;
-        if (!this.state.filter.expertMode && item.data.button) {
-            val = [react_1.default.createElement(icons_material_1.RoomService, { style: styles.cellValueButton })];
+        if (!this.state.filter.expertMode) {
+            if (item.data.button) {
+                val = [react_1.default.createElement(ButtonIcon, { key: "button", style: Object.assign({ color: info.style.color }, styles.cellValueButton) })];
+            }
+            else if (item.data.switch) {
+                val = [react_1.default.createElement(material_1.Switch, { key: "switch", sx: {
+                            '& .MuiSwitch-thumb': { color: info.style.color },
+                            '& .MuiSwitch-track': !!this.states[id].val && this.state.selected.includes(id) ?
+                                { backgroundColor: this.props.themeType === 'dark' ? '#FFF !important' : '#111 !important' } : undefined,
+                        }, checked: !!this.states[id].val })];
+            }
         }
         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: Object.assign(Object.assign({}, styles.cellValueText), { height: narrowStyleWithDetails ? undefined : ROW_HEIGHT }) }, 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, '& .admin-button:active': {
+                        transform: 'translate(0, 2px)',
+                    } }) }, val));
     }
     _syncEnum(id, enumIds, newArray, cb) {
         var _b, _c, _d;
         if (!enumIds || !enumIds.length) {
-            cb && cb();
+            if (cb) {
+                cb();
+            }
             return;
         }
         const enumId = enumIds.pop() || '';
@@ -3896,7 +3974,7 @@ class ObjectBrowserClass extends react_1.Component {
             if ((_c = this.info.objects[enumId].common.members) === null || _c === void 0 ? void 0 : _c.length) {
                 const pos = this.info.objects[enumId].common.members.indexOf(id);
                 if (pos !== -1 && !newArray.includes(enumId)) {
-                    // delete from members
+                    // delete it from members
                     const obj = JSON.parse(JSON.stringify(this.info.objects[enumId]));
                     obj.common.members.splice(pos, 1);
                     promises.push(this.props.socket
@@ -4276,11 +4354,15 @@ class ObjectBrowserClass extends react_1.Component {
             }
         }
         if (obj) {
-            obj.from &&
+            if (obj.from) {
                 newValueTitle.push(`${this.texts.objectChangedFrom} ${obj.from.replace(/^system\.adapter\.|^system\./, '')}`);
-            obj.user && newValueTitle.push(`${this.texts.objectChangedBy} ${obj.user.replace(/^system\.user\./, '')}`);
-            obj.ts &&
+            }
+            if (obj.user) {
+                newValueTitle.push(`${this.texts.objectChangedBy} ${obj.user.replace(/^system\.user\./, '')}`);
+            }
+            if (obj.ts) {
                 newValueTitle.push(`${this.texts.objectChangedByUser} ${Utils_1.default.formatDate(new Date(obj.ts), this.props.dateFormat || this.systemConfig.common.dateFormat)}`);
+            }
         }
         const readWriteAlias = typeof ((_c = common === null || common === void 0 ? void 0 : common.alias) === null || _c === void 0 ? void 0 : _c.id) === 'object';
         const alias = id.startsWith('alias.') && ((_d = common === null || common === void 0 ? void 0 : common.alias) === null || _d === void 0 ? void 0 : _d.id) ? (readWriteAlias ?
@@ -4355,13 +4437,15 @@ class ObjectBrowserClass extends react_1.Component {
                 ids[name] = _id;
                 if (!this.states[_id]) {
                     if (((_b = this.objects[_id]) === null || _b === void 0 ? void 0 : _b.type) === 'state') {
-                        !this.recordStates.includes(_id) && this.recordStates.push(_id);
+                        if (!this.recordStates.includes(_id)) {
+                            this.recordStates.push(_id);
+                        }
                         this.states[_id] = { val: null };
                         this.subscribe(_id);
                     }
                 }
-                else {
-                    !this.recordStates.includes(_id) && this.recordStates.push(_id);
+                else if (!this.recordStates.includes(_id)) {
+                    this.recordStates.push(_id);
                 }
             });
             // calculate color
@@ -4566,7 +4650,7 @@ class ObjectBrowserClass extends react_1.Component {
         }
         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 ? () => {
+        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 : 'calc(100% - 100px)', 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;
                 }
@@ -4580,6 +4664,12 @@ class ObjectBrowserClass extends react_1.Component {
                         .setState(id, true)
                         .catch(e => window.alert(`Cannot write state "${id}": ${e}`));
                 }
+                else if (!this.state.filter.expertMode && item.data.switch) {
+                    // in non-expert mode control switch directly
+                    this.props.socket
+                        .setState(id, !this.states[id].val)
+                        .catch(e => window.alert(`Cannot write state "${id}": ${e}`));
+                }
                 else {
                     this.edit = {
                         val: this.states[id] ? this.states[id].val : '',
@@ -4712,26 +4802,30 @@ class ObjectBrowserClass extends react_1.Component {
         else {
             leaf = result.row;
         }
-        root.data.id && leaf && items.push(leaf);
+        if (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) {
-                root.children && items.push(root.children.map(item => {
-                    // do not render too many items in column editor mode
-                    if (!this.state.columnsSelectorShow || counter.count < 15) {
-                        if (item.data.sumVisibility) {
-                            return this.renderItem(item, undefined, counter);
+                if (root.children) {
+                    items.push(root.children.map(item => {
+                        // do not render too many items in column editor mode
+                        if (!this.state.columnsSelectorShow || counter.count < 15) {
+                            if (item.data.sumVisibility) {
+                                return this.renderItem(item, undefined, counter);
+                            }
                         }
-                    }
-                    return null;
-                }));
+                        return null;
+                    }));
+                }
             }
-            else {
+            else if (root.children) {
                 // first only folder
-                root.children && items.push(root.children.map(item => {
+                items.push(root.children.map(item => {
                     if (item.children) {
                         // do not render too many items in column editor mode
                         if (!this.state.columnsSelectorShow || counter.count < 15) {
@@ -4743,7 +4837,7 @@ class ObjectBrowserClass extends react_1.Component {
                     return null;
                 }));
                 // then items
-                root.children && items.push(root.children.map(item => {
+                items.push(root.children.map(item => {
                     if (!item.children) {
                         // do not render too many items in column editor mode
                         if (!this.state.columnsSelectorShow || counter.count < 15) {
@@ -5053,12 +5147,11 @@ class ObjectBrowserClass extends react_1.Component {
     scrollToItem(id) {
         this.selectFirst = '';
         const node = window.document.getElementById(id);
-        node &&
-            node.scrollIntoView({
-                behavior: 'auto',
-                block: 'center',
-                inline: 'center',
-            });
+        node === null || node === void 0 ? void 0 : node.scrollIntoView({
+            behavior: 'auto',
+            block: 'center',
+            inline: 'center',
+        });
     }
     renderCustomDialog() {
         if (this.state.customDialog && this.props.objectCustomDialog) {
@@ -5421,7 +5514,9 @@ class ObjectBrowserClass extends react_1.Component {
                             react_1.default.createElement(icons_material_1.ArrowRight, null))));
                     if (((_b = this.state.showContextMenu) === null || _b === void 0 ? void 0 : _b.subItem) === key) {
                         items.push(react_1.default.createElement(material_1.Menu, { key: "subContextMenu", open: !0, anchorEl: this.state.showContextMenu.subAnchor, onClose: () => {
-                                this.state.showContextMenu && this.setState({ showContextMenu: { item: this.state.showContextMenu.item } });
+                                if (this.state.showContextMenu) {
+                                    this.setState({ showContextMenu: { item: this.state.showContextMenu.item } });
+                                }
                                 this.contextMenu = null;
                             } }, (_c = ITEMS[key].subMenu) === null || _c === void 0 ? void 0 : _c.map(subItem => (subItem.visibility ? react_1.default.createElement(material_1.MenuItem, { key: subItem.label, onClick: subItem.onClick, style: subItem.style },
                             react_1.default.createElement(material_1.ListItemIcon, { style: Object.assign(Object.assign({}, subItem.iconStyle), (subItem.listItemIconStyle || undefined)) }, subItem.icon),
@@ -5445,8 +5540,8 @@ class ObjectBrowserClass extends react_1.Component {
                 e.preventDefault();
                 if (e.altKey) {
                     Object.keys(ITEMS).forEach(key => {
-                        if (e.key === ITEMS[key].key) {
-                            ITEMS[key].onClick && ITEMS[key].onClick();
+                        if (e.key === ITEMS[key].key && ITEMS[key].onClick) {
+                            ITEMS[key].onClick();
                         }
                     });
                 }
@@ -5475,7 +5570,9 @@ class ObjectBrowserClass extends react_1.Component {
         const ObjectBrowserValue = this.props.objectBrowserValue;
         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);
+                if (res) {
+                    this.onUpdate(res);
+                }
             }, width: this.props.width });
     }
     /**
@@ -5483,7 +5580,9 @@ class ObjectBrowserClass extends react_1.Component {
      */
     render() {
         this.recordStates = [];
-        this.unsubscribeTimer && clearTimeout(this.unsubscribeTimer);
+        if (this.unsubscribeTimer) {
+            clearTimeout(this.unsubscribeTimer);
+        }
         if (this.styleTheme !== this.props.themeType) {
             this.styles = {
                 cellIdIconFolder: Utils_1.default.getStyle(this.props.theme, styles.cellIdIconFolder),
@@ -5531,35 +5630,35 @@ class ObjectBrowserClass extends react_1.Component {
         }
         const items = this.root ? this.renderItem(this.root, undefined) : null;
         return react_1.default.createElement(TabContainer_1.default, { key: this.props.dialogName },
-            react_1.default.createElement("style", null, `
-@keyframes newValueAnimation-light {
-    0% {
-        color: #00f900;
-    }
-    80% {
-        color: #008000;
-    }
-    100% {
-        color: #000;
-    }
-}
-@keyframes newValueAnimation-dark {
-    0% {
-        color: #00f900;
-    }
-    80% {
-        color: #008000;
-    }
-    100% {
-        color: #fff;
-    }
-}
-.newValueBrowser-dark {
-    animation: newValueAnimation-dark 2s ease-in-out;
-}
-.newValueBrowser-light {
-    animation: newValueAnimation-light 2s ease-in-out;
-}
+            react_1.default.createElement("style", null, `
+@keyframes newValueAnimation-light {
+    0% {
+        color: #00f900;
+    }
+    80% {
+        color: #008000;
+    }
+    100% {
+        color: #000;
+    }
+}
+@keyframes newValueAnimation-dark {
+    0% {
+        color: #00f900;
+    }
+    80% {
+        color: #008000;
+    }
+    100% {
+        color: #fff;
+    }
+}
+.newValueBrowser-dark {
+    animation: newValueAnimation-dark 2s ease-in-out;
+}
+.newValueBrowser-light {
+    animation: newValueAnimation-light 2s ease-in-out;
+}
 `),
             react_1.default.createElement(TabHeader_1.default, null, this.getToolbar()),
             react_1.default.createElement(TabContent_1.default, null,