@iobroker/adapter-react-v5 6.1.9 → 6.1.10

package/src/Components/ObjectBrowser.tsx

@@ -67,7 +67,6 @@ import {
     PersonOutlined as IconUser,
     Publish as PublishIcon,
     Refresh as RefreshIcon,
-    RoomService as PressButtonIcon,
     Router as IconHost,
     Settings as IconConfig,
     SettingsApplications as IconSystem,
@@ -201,6 +200,8 @@ export interface TreeItemData {
     title?: string;
     /** if the item has "write" button (value=true, ack=false) */
     button?: boolean;
+    /** If the item has read and write and is boolean */
+    switch?: boolean;
     /** if the item has custom settings in `common.custom` */
     hasCustoms?: boolean;
     /** If this item is visible */
@@ -457,7 +458,7 @@ const styles: Record<string, any> = {
         // 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: IobTheme) => ({
         marginRight: 8,
         width: ROW_HEIGHT - 4,
@@ -600,9 +601,6 @@ const styles: Record<string, any> = {
     },
     cellValueButton: {
         marginTop: 5,
-        '&:active': {
-            transform: 'scale(0.8)',
-        },
     },
     cellValueButtonFalse: {
         opacity: 0.3,
@@ -618,7 +616,7 @@ const styles: Record<string, any> = {
         width: '100%',
         height: ROW_HEIGHT,
         fontSize: 16,
-        display: 'inline-block',
+        display: 'flex',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         position: 'relative',
@@ -665,6 +663,7 @@ const styles: Record<string, any> = {
     cellValueTextUnit: {
         marginLeft: 4,
         opacity: 0.8,
+        display: 'inline-block',
     },
     cellValueTextState: {
         opacity: 0.7,
@@ -739,7 +738,7 @@ const styles: Record<string, any> = {
     cellDetailsName: {
         fontWeight: 'bold',
         marginRight: 8,
-        minWidth: 100,
+        minWidth: 80,
     },
 
     filteredOut: {
@@ -962,6 +961,15 @@ const styles: Record<string, any> = {
     },
 };
 
+function ButtonIcon(props?: { style?: React.CSSProperties }) {
+    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 436 436" style={props?.style} width="24" height="24" className="admin-button">
+        <g fill="currentColor">
+            <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" />
+            <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" />
+        </g>
+    </svg>;
+}
+
 /**
  * Function that walks through all keys of an object or array and applies a function to each key.
  */
@@ -972,10 +980,14 @@ function walkThroughArray(object: any[], iteratee: (result: any[], value: any, k
     }
     return copiedObject;
 }
+
 /**
  * Function that walks through all keys of an object or array and applies a function to each key.
  */
-function walkThroughObject(object: Record<string, any>, iteratee: (result: Record<string, any>, value: any, key: string) => void): Record<string, any> {
+function walkThroughObject(
+    object: Record<string, any>,
+    iteratee: (result: Record<string, any>, value: any, key: string) => void
+): Record<string, any> {
     const copiedObject: Record<string, any> = {};
     for (const key in object) {
         if (Object.prototype.hasOwnProperty.call(object, key)) {
@@ -1397,7 +1409,9 @@ function getVisibleItems(
     _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);
+        }
         item.children?.forEach(_item =>
             getVisibleItems(_item, type, objects, _result));
     }
@@ -1618,6 +1632,8 @@ function buildTree(
                                     typeof obj.common.role === 'string' &&
                                     obj.common.role.startsWith('button') &&
                                     obj.common?.write !== false,
+                        switch:     obj.type === 'state' && obj.common?.type === 'boolean' &&
+                                    obj.common?.write !== false && obj.common?.read !== false,
                     },
                 };
 
@@ -1997,7 +2013,7 @@ function formatValue(
 }
 
 /**
- * Get css style for given state value
+ * Get CSS style for given state value
  */
 function getValueStyle(options: GetValueStyleOptions): { color: string } {
     const { state, isExpertMode, isButton } = options;
@@ -2599,7 +2615,7 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
             try {
                 const lastSelectedItems = JSON.parse(lastSelectedItemStr) as string[];
                 this.selectFirst = lastSelectedItems[0] || '';
-            } catch (e) {
+            } catch {
                 // ignore
             }
         } else {
@@ -2610,7 +2626,7 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         const expandedStr = this.localStorage.getItem(`${props.dialogName || 'App'}.objectExpanded`) || '[]';
         try {
             expanded = JSON.parse(expandedStr);
-        } catch (e) {
+        } catch {
             expanded = [];
         }
 
@@ -2621,7 +2637,7 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         if (filterStr) {
             try {
                 filter = JSON.parse(filterStr);
-            } catch (e) {
+            } catch {
                 filter = { ...DEFAULT_FILTER };
             }
         } else if (props.defaultFilters && typeof props.defaultFilters === 'object') {
@@ -2643,7 +2659,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         // 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;
@@ -2672,14 +2690,14 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         let columns: string[] | null;
         try {
             columns = columnsStr ? JSON.parse(columnsStr) : null;
-        } catch (e) {
+        } catch {
             columns = null;
         }
 
         let columnsWidths = null; // this.localStorage.getItem(`${props.dialogName || 'App'}.columnsWidths`);
         try {
             columnsWidths = columnsWidths ? JSON.parse(columnsWidths) : {};
-        } catch (e) {
+        } catch {
             columnsWidths = {};
         }
 
@@ -2700,7 +2718,7 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
             statesView = this.props.objectStatesView
                 ? JSON.parse(this.localStorage.getItem(`${props.dialogName || 'App'}.objectStatesView`) || '') || false
                 : false;
-        } catch (error) {
+        } catch {
             // ignore
         }
 
@@ -2824,7 +2842,7 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                 });
 
                 this.customWidth = true;
-            } catch (e) {
+            } catch {
                 // ignore
             }
         }
@@ -2935,7 +2953,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                 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;
@@ -3024,8 +3044,8 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
             expanded.sort();
             this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectExpanded`, JSON.stringify(expanded));
             this.setState({ expanded }, cb);
-        } else {
-            cb && cb();
+        } else if (cb) {
+            cb();
         }
     }
 
@@ -3047,15 +3067,17 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
             if (this.state.selected.length === 1 && this.objects[this.state.selected[0]]) {
                 const name =
                     Utils.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 {
             this.localStorage.removeItem(`${this.props.dialogName || 'App'}.objectSelected`);
 
             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([], '');
             }
         }
     }
@@ -3091,8 +3113,10 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
      * 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) {
@@ -3130,7 +3154,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
             }
         }
 
-        this.props.onObjectDelete && this.props.onObjectDelete(id, !!item.children?.length, !obj.common?.dontDelete, count + 1);
+        if (this.props.onObjectDelete) {
+            this.props.onObjectDelete(id, !!item.children?.length, !obj.common?.dontDelete, count + 1);
+        }
     }
 
     /**
@@ -3222,7 +3248,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                 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) {
                     this.onAfterSelect(isDouble);
@@ -3231,7 +3259,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                 this.localStorage.setItem(`${this.props.dialogName || 'App'}.selectedNonObject`, toggleItem);
                 this.setState({ selected: [], selectedNonObject: toggleItem, focused: toggleItem }, () => {
                     this.onAfterSelect();
-                    cb && cb();
+                    if (cb) {
+                        cb();
+                    }
                 });
             }
         } else if (
@@ -3251,7 +3281,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
 
             this.setState({ selected, selectedNonObject: '', focused: toggleItem }, () => {
                 this.onAfterSelect(isDouble);
-                cb && cb();
+                if (cb) {
+                    cb();
+                }
             });
         }
     }
@@ -3512,7 +3544,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
     private 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 = [];
     }
@@ -3659,7 +3693,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                 }
             });
 
-            newState && this.setState(newState);
+            if (newState) {
+                this.setState(newState);
+            }
             this.afterObjectUpdated();
         }
     };
@@ -3670,7 +3706,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
             return;
         }
 
-        newInnerState && this.setState(newInnerState);
+        if (newInnerState) {
+            this.setState(newInnerState);
+        }
         this.afterObjectUpdated();
     };
 
@@ -3748,7 +3786,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         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);
+            }
         }
     }
 
@@ -3856,7 +3896,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                 placeholder={this.texts[`filter_${filterName}`]}
                 defaultValue={(this.state.filter as Record<string, string>)[filterName] || ''}
                 onChange={() => {
-                    this.filterTimer && clearTimeout(this.filterTimer);
+                    if (this.filterTimer) {
+                        clearTimeout(this.filterTimer);
+                    }
                     this.filterTimer = setTimeout(() => this.onFilter(), 400);
                 }}
                 autoComplete="off"
@@ -3895,7 +3937,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                 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 as Record<string, string>)[name] || ''}
@@ -4052,7 +4096,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         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 });
         }
@@ -4168,7 +4214,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                 }
                 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 {
@@ -4972,7 +5020,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                             }
                         }
 
-                        this.props.onObjectDelete && this.props.onObjectDelete(id, !!item.children?.length, false, count + 1);
+                        if (this.props.onObjectDelete) {
+                            this.props.onObjectDelete(id, !!item.children?.length, false, count + 1);
+                        }
                     }}
                 >
                     <IconDelete style={styles.cellButtonsButtonIcon} />
@@ -5054,12 +5104,14 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                             break;
                         }
                     }
-                    this.props.onObjectDelete && this.props.onObjectDelete(
-                        id,
-                        !!item.children?.length,
-                        !item.data.obj?.common?.dontDelete,
-                        count,
-                    );
+                    if (this.props.onObjectDelete) {
+                        this.props.onObjectDelete(
+                            id,
+                            !!item.children?.length,
+                            !item.data.obj?.common?.dontDelete,
+                            count,
+                        );
+                    }
                 }}
                 title={this.texts.deleteObject}
             >
@@ -5174,7 +5226,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                     {_item.v}
                 </div>);
                 // <div style={styles.cellValueTooltipValue} key={item.t + '_v'}>{item.v}</div>,
-                !_item.nbr && valFullRx.push(<br key={`${_item.t}_br`} />);
+                if (!_item.nbr) {
+                    valFullRx.push(<br key={`${_item.t}_br`} />);
+                }
             } else {
                 valFullRx.push(<div style={styles.cellValueTooltipTitle} key={_item.t}>
                     {_item.t}
@@ -5183,7 +5237,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                 valFullRx.push(<div style={styles.cellValueTooltipValue} key={`${_item.t}_v`}>
                     {_item.v}
                 </div>);
-                !_item.nbr && valFullRx.push(<br key={`${_item.t}_br`} />);
+                if (!_item.nbr) {
+                    valFullRx.push(<br key={`${_item.t}_br`} />);
+                }
             }
         });
 
@@ -5228,13 +5284,17 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         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 } as ioBroker.State;
                 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];
 
@@ -5251,31 +5311,46 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
             item.data.state = { valTextRx };
 
             const copyText = valText.v || '';
-            valTextRx.push(<span className={`newValueBrowser-${this.props.themeType || 'light'}`} key={`${valText.v.toString()}valText`}>
-                {valText.v.toString()}
-            </span>);
-            valText.u && valTextRx.push(<span
+            valTextRx.push(<span
                 className={`newValueBrowser-${this.props.themeType || 'light'}`}
-                style={styles.cellValueTextUnit}
-                key={`${valText.v.toString()}unit`}
-            >
-                {valText.u}
-            </span>);
-            valText.s !== undefined && valTextRx.push(<span
-                style={styles.cellValueTextState}
-                className={`newValueBrowser-${this.props.themeType || 'light'}`}
-                key={`${valText.v.toString()}states`}
+                key={`${valText.v.toString()}valText`}
+                style={{
+                    whiteSpace: 'nowrap',
+                    display: 'inline-block',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                }}
             >
-                (
-                {valText.s}
-                )
+                {valText.v.toString()}
             </span>);
-            !narrowStyleWithDetails && valTextRx.push(<IconCopy
-                className="copyButton"
-                style={this.styles.iconCopy}
-                onClick={e => this.onCopy(e, copyText)}
-                key="cc"
-            />);
+            if (valText.u) {
+                valTextRx.push(<span
+                    className={`newValueBrowser-${this.props.themeType || 'light'}`}
+                    style={styles.cellValueTextUnit}
+                    key={`${valText.v.toString()}unit`}
+                >
+                    {valText.u}
+                </span>);
+            }
+            if (valText.s !== undefined) {
+                valTextRx.push(<span
+                    style={styles.cellValueTextState}
+                    className={`newValueBrowser-${this.props.themeType || 'light'}`}
+                    key={`${valText.v.toString()}states`}
+                >
+                    (
+                    {valText.s}
+                    )
+                </span>);
+            }
+            if (!narrowStyleWithDetails) {
+                valTextRx.push(<IconCopy
+                    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;
@@ -5284,8 +5359,20 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         info.style = getValueStyle({ state, isExpertMode: this.state.filter.expertMode, isButton: item.data.button });
 
         let val: React.JSX.Element[] = info.valTextRx as React.JSX.Element[];
-        if (!this.state.filter.expertMode && item.data.button) {
-            val = [<PressButtonIcon style={styles.cellValueButton} />];
+        if (!this.state.filter.expertMode) {
+            if (item.data.button) {
+                val = [<ButtonIcon key="button" style={{ color: info.style.color, ...styles.cellValueButton }} />];
+            } else if (item.data.switch) {
+                val = [<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 <Tooltip
@@ -5301,7 +5388,13 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
             <Box
                 component="div"
                 style={info.style}
-                sx={{ ...styles.cellValueText, height: narrowStyleWithDetails ? undefined : ROW_HEIGHT }}
+                sx={{
+                    ...styles.cellValueText,
+                    height: narrowStyleWithDetails ? undefined : ROW_HEIGHT,
+                    '& .admin-button:active': {
+                        transform: 'translate(0, 2px)',
+                    },
+                }}
             >
                 {val}
             </Box>
@@ -5315,7 +5408,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         cb: () => void,
     ): void {
         if (!enumIds || !enumIds.length) {
-            cb && cb();
+            if (cb) {
+                cb();
+            }
             return;
         }
         const enumId = enumIds.pop() || '';
@@ -5324,7 +5419,7 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
             if (this.info.objects[enumId].common.members?.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(
@@ -5886,15 +5981,19 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         }
 
         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.formatDate(new Date(obj.ts), this.props.dateFormat || this.systemConfig.common.dateFormat)}`,
                 );
+            }
         }
 
         const readWriteAlias = typeof common?.alias?.id === 'object';
@@ -5995,12 +6094,14 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
 
                 if (!this.states[_id]) {
                     if (this.objects[_id]?.type === 'state') {
-                        !this.recordStates.includes(_id) && this.recordStates.push(_id);
+                        if (!this.recordStates.includes(_id)) {
+                            this.recordStates.push(_id);
+                        }
                         this.states[_id] = { val: null } as ioBroker.State;
                         this.subscribe(_id);
                     }
-                } else {
-                    !this.recordStates.includes(_id) && this.recordStates.push(_id);
+                } else if (!this.recordStates.includes(_id)) {
+                    this.recordStates.push(_id);
                 }
             });
             // calculate color
@@ -6365,7 +6466,7 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         let colValue = (narrowStyleWithDetails && columnValue) || this.columnsVisibility.val ? <div
             style={{
                 ...styles.cellValue,
-                width: this.props.width !== 'xs' ? this.columnsVisibility.val : undefined,
+                width: this.props.width !== 'xs' ? this.columnsVisibility.val : 'calc(100% - 100px)',
                 cursor: valueEditable ? (common?.type === 'file' ? 'zoom-in' : (item.data.button ? 'grab' : 'text')) : 'default',
             }}
             onClick={valueEditable ? () => {
@@ -6379,6 +6480,11 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                     this.props.socket
                         .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 : '',
@@ -6579,7 +6685,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         } 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);
         }
@@ -6588,18 +6696,20 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
 
         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;
-                }) as any as React.JSX.Element);
-            } else {
+                        return null;
+                    }) as any as React.JSX.Element);
+                }
+            } 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) {
@@ -6613,7 +6723,7 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                 }) as any as React.JSX.Element);
 
                 // 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) {
@@ -6839,7 +6949,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                     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();
@@ -7189,12 +7301,11 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         this.selectFirst = '';
 
         const node = window.document.getElementById(id);
-        node &&
-            node.scrollIntoView({
-                behavior: 'auto',
-                block: 'center',
-                inline: 'center',
-            });
+        node?.scrollIntoView({
+            behavior: 'auto',
+            block: 'center',
+            inline: 'center',
+        });
     }
 
     private renderCustomDialog(): React.JSX.Element | null {
@@ -7665,7 +7776,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                             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;
                             }}
                         >
@@ -7715,8 +7828,8 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                 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();
                         }
                     });
                 }
@@ -7771,7 +7884,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
             isFloatComma={this.props.isFloatComma === undefined ? this.systemConfig.common.isFloatComma : this.props.isFloatComma}
             onClose={(res?: { val: ioBroker.StateValue; ack: boolean; q: ioBroker.STATE_QUALITY[keyof ioBroker.STATE_QUALITY]; expire: number | undefined }) => {
                 this.setState({ updateOpened: false });
-                res && this.onUpdate(res);
+                if (res) {
+                    this.onUpdate(res);
+                }
             }}
             width={this.props.width}
         />;
@@ -7782,7 +7897,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
      */
     render(): React.JSX.Element {
         this.recordStates = [];
-        this.unsubscribeTimer && clearTimeout(this.unsubscribeTimer);
+        if (this.unsubscribeTimer) {
+            clearTimeout(this.unsubscribeTimer);
+        }
 
         if (this.styleTheme !== this.props.themeType) {
             this.styles = {