@iobroker/gui-components 10.2.0 → 10.2.1

package/build/Components/ObjectBrowser/renderLeaf.js

@@ -823,9 +823,29 @@ export function renderLeaf(that, item, isExpanded, counter) {
     // In the narrow layout that used to remove the whole cell - and with it the only way to tap
     // the value and open the editor. Keep the (empty) cell for editable states.
     const showValueCell = that.columnsVisibility.val || (narrowStyleWithDetails && (!!columnValue || valueEditable));
+    /** Open the value editor - used by the value cell and by the edit button of the narrow details view */
+    const editValue = () => {
+        if (!obj || !that.states) {
+            return;
+        }
+        if (common?.type === 'file') {
+            that.setState({ viewFileDialog: id });
+            return;
+        }
+        that.edit = {
+            val: that.states[id] ? that.states[id].val : '',
+            q: that.states[id] ? that.states[id].q || 0 : 0,
+            ack: false,
+            id,
+        };
+        that.setState({ updateOpened: true });
+    };
     let colValue = showValueCell ? (React.createElement("div", { style: {
             ...styles.cellValue,
             width: that.width !== 'xs' ? colWidth('val') : 'calc(100% - 100px)',
+            // An empty inline-block has no height, so a state without a value would offer nothing
+            // to tap on in the narrow details view.
+            minHeight: narrowStyleWithDetails ? 20 : undefined,
             cursor: valueEditable
                 ? common?.type === 'file'
                     ? 'zoom-in'
@@ -839,7 +859,7 @@ export function renderLeaf(that, item, isExpanded, counter) {
                     // return;
                 }
                 else if (common?.type === 'file') {
-                    that.setState({ viewFileDialog: id });
+                    editValue();
                 }
                 else if (item.data.url && e.ctrlKey) {
                     if (that.states[id]?.val && typeof that.states[id].val === 'string') {
@@ -865,13 +885,7 @@ export function renderLeaf(that, item, isExpanded, counter) {
                         .catch(e => window.alert(`Cannot write state "${id}": ${e}`));
                 }
                 else {
-                    that.edit = {
-                        val: that.states[id] ? that.states[id].val : '',
-                        q: that.states[id] ? that.states[id].q || 0 : 0,
-                        ack: false,
-                        id,
-                    };
-                    that.setState({ updateOpened: true });
+                    editValue();
                 }
             }
             else if (common?.role === 'url' || (common?.role === 'url.blank' && e.ctrlKey)) {
@@ -917,7 +931,11 @@ export function renderLeaf(that, item, isExpanded, counter) {
         if (!colCustom.length) {
             colCustom = null;
         }
-        colDetails = (React.createElement(Paper, { style: {
+        colDetails = (React.createElement(Paper
+        // `renderItem` pushes this panel into the array of rows, so it needs its own key
+        , { 
+            // `renderItem` pushes this panel into the array of rows, so it needs its own key
+            key: `details_${id}`, style: {
                 width: '100%',
                 // the padding must be inside of the width, else the row is wider than the table
                 boxSizing: 'border-box',
@@ -957,7 +975,8 @@ export function renderLeaf(that, item, isExpanded, counter) {
                                 : that.props.isFloatComma,
                         });
                         that.onCopy(e, valText.c !== undefined ? valText.c : valText.v.toString());
-                    }, key: "cc" }))),
+                    }, key: "cc" }),
+                valueEditable ? (React.createElement(IconEdit, { style: styles.cellCopyButtonInDetails, onClick: editValue, key: "ce" })) : null)),
             colButtons && React.createElement("div", { style: { ...styles.cellDetailsLine, justifyContent: 'right' } }, colButtons)));
         colName = null;
         colMiddle = null;