@iobroker/adapter-react-v5 4.3.0 → 4.3.2

package/Components/ObjectBrowser.js

@@ -19,7 +19,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _styles = require("@mui/styles");
 var _reactInlinesvg = _interopRequireDefault(require("react-inlinesvg"));
 var _material = require("@mui/material");
 var _iconsMaterial = require("@mui/icons-material");
@@ -768,17 +768,15 @@ function getSelectIdIcon(objects, id, imagePrefix) {
       } else {
         return null; // '<i class="material-icons iob-list-icon">' + objects[_id_].common.icon + '</i>';
       }
+    } else if (aIcon.startsWith('data:image/svg')) {
+      src = /*#__PURE__*/_react["default"].createElement(_reactInlinesvg["default"], {
+        className: "iconOwn",
+        src: aIcon,
+        width: 28,
+        height: 28
+      });
     } else {
-      if (aIcon.startsWith('data:image/svg')) {
-        src = /*#__PURE__*/_react["default"].createElement(_reactInlinesvg["default"], {
-          className: "iconOwn",
-          src: aIcon,
-          width: 28,
-          height: 28
-        });
-      } else {
-        src = aIcon;
-      }
+      src = aIcon;
     }
   } else {
     var common = objects[id] && objects[id].common;
@@ -1094,11 +1092,10 @@ function getIdFieldTooltip(data, classes, lang) {
       target: "_blank",
       rel: "noreferrer"
     }, tooltip);
-  } else {
-    return /*#__PURE__*/_react["default"].createElement("span", {
-      className: _Utils["default"].clsx(classes.cellIdTooltip)
-    }, tooltip || data.id || '');
   }
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: _Utils["default"].clsx(classes.cellIdTooltip)
+  }, tooltip || data.id || '');
 }
 function buildTree(objects, options) {
   options = options || {};
@@ -1555,7 +1552,7 @@ function formatValue(options) {
   };
 }
 
-/** @typedef {{ state: ioBroker.State, isExpertMode: boolean, obj: ioBroker.StateObject }} GetValueStyleOptions */
+/** @typedef {{ state: ioBroker.State, isExpertMode: boolean, isButton: boolean }} GetValueStyleOptions */
 
 /**
  * Get css style for given state value
@@ -1566,9 +1563,9 @@ function formatValue(options) {
 function getValueStyle(options) {
   var state = options.state,
     isExpertMode = options.isExpertMode,
-    obj = options.obj;
+    isButton = options.isButton;
   var color = state !== null && state !== void 0 && state.ack ? state.q ? '#ffa500' : '' : '#ff2222c9';
-  if (!isExpertMode && obj.common.role === 'button') {
+  if (!isExpertMode && isButton) {
     color = '';
   }
   return {
@@ -1668,7 +1665,7 @@ var ITEM_IMAGES = {
     className: "itemIcon itemIconFolder"
   })
 };
-var StyledBadge = (0, _withStyles["default"])(function (theme) {
+var StyledBadge = (0, _styles.withStyles)(function (theme) {
   return {
     badge: {
       right: 3,
@@ -2421,16 +2418,6 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       (window._localStorage || window.localStorage).removeItem("".concat(_this.props.dialogName || 'App', ".table"));
       _this.forceUpdate();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "extendObject", function (id, data) {
-      return _this.props.socket.extendObject(id, data)["catch"](function (error) {
-        return window.alert(error);
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setObject", function (id, data) {
-      return _this.props.socket.setObject(id, data)["catch"](function (error) {
-        return window.alert(error);
-      });
-    });
     _this.lastSelectedItems = (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".objectSelected")) || '[]';
     try {
       _this.lastSelectedItems = JSON.parse(_this.lastSelectedItems);
@@ -2758,7 +2745,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
     /**
      * @private
-     * @param {ioBroker.EmptyCallback} cb
+     * @param {ioBroker.EmptyCallback?} cb
      */
   }, {
     key: "expandAllSelected",
@@ -3022,7 +3009,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
               } else {
                 columns.splice(_pos, 1);
               }
-              (window._localStorage || window.localStorage).setItem((_this8.props.dialogName || 'App') + '.columns', JSON.stringify(columns));
+              (window._localStorage || window.localStorage).setItem("".concat(_this8.props.dialogName || 'App', ".columns"), JSON.stringify(columns));
               _this8.calculateColumnsVisibility(null, columns);
               _this8.setState({
                 columns: columns
@@ -3036,7 +3023,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           checked: id === 'id' || (_this8.state.columnsAuto ? _this8.visibleCols.includes(id) : _this8.state.columns && _this8.state.columns.includes(id)),
           disableRipple: true
         }), /*#__PURE__*/_react["default"].createElement(_material.ListItemText, {
-          primary: _this8.texts['filter_' + id] || _this8.props.t('ra_' + id)
+          primary: _this8.texts["filter_".concat(id)] || _this8.props.t("ra_".concat(id))
         }));
       });
     }
@@ -3095,25 +3082,23 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         control: /*#__PURE__*/_react["default"].createElement(_material.Switch, {
           checked: this.state.columnsAuto,
           onChange: function onChange() {
-            (window._localStorage || window.localStorage).setItem((_this9.props.dialogName || 'App') + '.columnsAuto', _this9.state.columnsAuto ? 'false' : 'true');
+            (window._localStorage || window.localStorage).setItem("".concat(_this9.props.dialogName || 'App', ".columnsAuto"), _this9.state.columnsAuto ? 'false' : 'true');
             if (!_this9.state.columnsAuto) {
               _this9.calculateColumnsVisibility(true);
               _this9.setState({
                 columnsAuto: true
               });
+            } else if (!_this9.state.columns) {
+              _this9.calculateColumnsVisibility(false, (0, _toConsumableArray2["default"])(_this9.visibleCols));
+              _this9.setState({
+                columnsAuto: false,
+                columns: (0, _toConsumableArray2["default"])(_this9.visibleCols)
+              });
             } else {
-              if (!_this9.state.columns) {
-                _this9.calculateColumnsVisibility(false, (0, _toConsumableArray2["default"])(_this9.visibleCols));
-                _this9.setState({
-                  columnsAuto: false,
-                  columns: (0, _toConsumableArray2["default"])(_this9.visibleCols)
-                });
-              } else {
-                _this9.calculateColumnsVisibility(false);
-                _this9.setState({
-                  columnsAuto: false
-                });
-              }
+              _this9.calculateColumnsVisibility(false);
+              _this9.setState({
+                columnsAuto: false
+              });
             }
           }
         }),
@@ -3835,7 +3820,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             return _this25._exportObjects(true);
           });
         }
-      }, this.props.t('ra_All objects'), " (", Object.keys(this.objects).length, ")"), /*#__PURE__*/_react["default"].createElement(_material.Button, {
+      }, this.props.t('ra_All objects'), ' ', "(", Object.keys(this.objects).length, ")"), /*#__PURE__*/_react["default"].createElement(_material.Button, {
         color: "primary",
         variant: "contained",
         autoFocus: true,
@@ -3846,7 +3831,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             return _this25._exportObjects(false);
           });
         }
-      }, this.props.t('ra_Only selected'), " (", this.state.showExportDialog, ")"), /*#__PURE__*/_react["default"].createElement(_material.Button, {
+      }, this.props.t('ra_Only selected'), ' ', "(", this.state.showExportDialog, ")"), /*#__PURE__*/_react["default"].createElement(_material.Button, {
         color: "grey",
         variant: "contained",
         onClick: function onClick() {
@@ -4410,9 +4395,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }
 
       info.style = getValueStyle({
-        isExpertMode: this.state.filter.expertMode,
         state: state,
-        obj: obj
+        isExpertMode: this.state.filter.expertMode,
+        isButton: item.data.button
       });
       var val = info.valText;
       if (!this.state.filter.expertMode && item.data.button) {
@@ -4967,7 +4952,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         className: _Utils["default"].clsx(classes.cellIdAlias, classes.cellIdAliasAlone)
       }, "\u2192", common.alias.id) : null;
       var checkColor = common === null || common === void 0 ? void 0 : common.color;
-      var invertBackground = undefined;
+      var invertBackground;
       if (checkColor && !this.state.selected.includes(id)) {
         var background = this.props.themeName === 'dark' ? '#1f1f1f' : this.props.themeName === 'blue' ? '#222a2e' : '#FFFFFF';
         var distance = _Utils["default"].colorDistance(checkColor, background);
@@ -5255,9 +5240,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             _this36.setState({
               viewFileDialog: id
             });
-          }
-          // in non-expert mode control button directly
-          else if (!_this36.state.filter.expertMode && item.data.button) {
+            // eslint-disable-next-line brace-style
+          } else if (!_this36.state.filter.expertMode && item.data.button) {
+            // in non-expert mode control button directly
             _this36.props.socket.setState(id, true)["catch"](function (e) {
               return window.alert("Cannot write state \"".concat(id, "\": ").concat(e));
             });
@@ -5503,6 +5488,35 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }
       }
     }
+  }, {
+    key: "navigateKeyPress",
+    value:
+    /**
+     * Handle keyboard events for navigation
+     *
+     * @param {KeyboardEvent} event
+     */
+    function navigateKeyPress(event) {
+      var selectedId = this.state.selectedNonObject || this.state.selected[0];
+      if (!selectedId) {
+        return;
+      }
+      if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
+        event.preventDefault();
+        var ids = [];
+        this.tableRef.current.childNodes.forEach(function (node) {
+          return ids.push(node.id);
+        });
+        var idx = ids.indexOf(selectedId);
+        var newIdx = event.code === 'ArrowDown' ? idx + 1 : idx - 1;
+        var newId = ids[newIdx] || selectedId;
+        this.onSelect(newId);
+        this.scrollToItem(newId);
+      }
+      if (event.code === 'ArrowRight' || event.code === 'ArrowLeft') {
+        this.toggleExpanded(selectedId);
+      }
+    }
   }, {
     key: "renderHeader",
     value:
@@ -5898,14 +5912,22 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }
       });
     }
-  }, {
-    key: "render",
-    value:
+
+    // extendObject = (id, data) =>
+    //     this.props.socket.extendObject(id, data)
+    //         .catch(error => window.alert(error));
+
+    // setObject = (id, data) =>
+    //     this.props.socket.setObject(id, data)
+    //         .catch(error => window.alert(error));
+
     /**
      * The rendering method of this component.
      * @returns {JSX.Element}
      */
-    function render() {
+  }, {
+    key: "render",
+    value: function render() {
       var _this47 = this;
       this.recordStates = [];
       this.unsubscribeTimer && clearTimeout(this.unsubscribeTimer);
@@ -5945,7 +5967,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       var items = this.renderItem(this.root, undefined, classes);
       return /*#__PURE__*/_react["default"].createElement(_TabContainer["default"], {
         key: this.props.dialogName,
-        classes: {}
+        classes: {},
+        onKeyDown: function onKeyDown(event) {
+          return _this47.navigateKeyPress(event);
+        },
+        tabIndex: 0
       }, /*#__PURE__*/_react["default"].createElement(_TabHeader["default"], null, this.getToolbar()), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
         classes: {}
       }, this.renderHeader(), /*#__PURE__*/_react["default"].createElement("div", {
@@ -6119,6 +6145,7 @@ ObjectBrowser.propTypes = {
   // optional ['state', 'instance', 'channel']
   columns: _propTypes["default"].array,
   // optional ['name', 'type', 'role', 'room', 'func', 'val', 'buttons']
+  // eslint-disable-next-line react/no-unused-prop-types
   root: _propTypes["default"].string,
   // optional, shows only elements of this root
 
@@ -6128,14 +6155,12 @@ ObjectBrowser.propTypes = {
   // function to filter out all unnecessary objects. It cannot be used together with "types"
   // Example for function: `obj => obj.common && obj.common.type === 'boolean'` to show only boolean states
 
-  dragSettings: _propTypes["default"].object,
   DragWrapper: _propTypes["default"].func,
-  dragEnabled: _propTypes["default"].bool,
-  useDrag: _propTypes["default"].func
+  dragEnabled: _propTypes["default"].bool
 };
 
 /** @type {typeof ObjectBrowser} */
-var _export = (0, _withWidth["default"])()((0, _withStyles["default"])(styles)(ObjectBrowser));
+var _export = (0, _withWidth["default"])()((0, _styles.withStyles)(styles)(ObjectBrowser));
 var _default = _export;
 exports["default"] = _default;
 //# sourceMappingURL=ObjectBrowser.js.map