@iobroker/adapter-react-v5 4.0.4 → 4.0.5

package/Components/ObjectBrowser.js

@@ -19,7 +19,6 @@ 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 _copyToClipboard = _interopRequireDefault(require("./copy-to-clipboard"));
 var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 var _reactInlinesvg = _interopRequireDefault(require("react-inlinesvg"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -294,6 +293,18 @@ var styles = function styles(theme) {
       height: SMALL_BUTTON_SIZE
     },
     cellIdIconOwn: {},
+    cellIdTooltip: {
+      fontSize: 14
+    },
+    cellIdTooltipLink: {
+      color: "#7ec2fd",
+      "&:hover": {
+        color: "#7ec2fd"
+      },
+      "&:visited": {
+        color: "#7ec2fd"
+      }
+    },
     cellCopyButton: {
       width: SMALL_BUTTON_SIZE,
       height: SMALL_BUTTON_SIZE,
@@ -788,17 +799,17 @@ function getSelectIdIcon(objects, id, imagePrefix) {
       } else {
         return null; // '<i class="material-icons iob-list-icon">' + objects[_id_].common.icon + '</i>';
       }
-    }
-
-    if (aIcon.startsWith('data:image/svg')) {
-      src = /*#__PURE__*/_react["default"].createElement(_reactInlinesvg["default"], {
-        className: "iconOwn",
-        src: aIcon,
-        width: 28,
-        height: 28
-      });
     } else {
-      src = aIcon;
+      if (aIcon.startsWith('data:image/svg')) {
+        src = /*#__PURE__*/_react["default"].createElement(_reactInlinesvg["default"], {
+          className: "iconOwn",
+          src: aIcon,
+          width: 28,
+          height: 28
+        });
+      } else {
+        src = aIcon;
+      }
     }
   } else {
     var common = objects[id] && objects[id].common;
@@ -1079,6 +1090,34 @@ function getSystemIcon(objects, id, k, imagePrefix) {
   }
   return icon || null;
 }
+function getIdFieldTooltip(data, classes, lang) {
+  var _data$obj2, _data$obj2$common;
+  if (data !== null && data !== void 0 && (_data$obj2 = data.obj) !== null && _data$obj2 !== void 0 && (_data$obj2$common = _data$obj2.common) !== null && _data$obj2$common !== void 0 && _data$obj2$common.desc && data.obj.common.desc !== '') {
+    var _data$obj3, _data$obj3$common, _data$obj4, _data$obj4$common, _data$obj5, _data$obj5$common, _tooltip;
+    var tooltip = '';
+    if ((0, _typeof2["default"])(data === null || data === void 0 ? void 0 : (_data$obj3 = data.obj) === null || _data$obj3 === void 0 ? void 0 : (_data$obj3$common = _data$obj3.common) === null || _data$obj3$common === void 0 ? void 0 : _data$obj3$common.desc) === 'object' && data.obj.common.desc[lang] !== undefined) {
+      tooltip = data.obj.common.desc[lang];
+    } else if ((0, _typeof2["default"])(data === null || data === void 0 ? void 0 : (_data$obj4 = data.obj) === null || _data$obj4 === void 0 ? void 0 : (_data$obj4$common = _data$obj4.common) === null || _data$obj4$common === void 0 ? void 0 : _data$obj4$common.desc) === 'object' && data.obj.common.desc['en'] !== undefined) {
+      tooltip = data.obj.common.desc['en'];
+    } else if ((0, _typeof2["default"])(data === null || data === void 0 ? void 0 : (_data$obj5 = data.obj) === null || _data$obj5 === void 0 ? void 0 : (_data$obj5$common = _data$obj5.common) === null || _data$obj5$common === void 0 ? void 0 : _data$obj5$common.desc) === 'object' && data.obj.common.desc[lang] === undefined) {
+      return data.id;
+    } else {
+      tooltip = data.obj.common.desc;
+    }
+    if ((_tooltip = tooltip) !== null && _tooltip !== void 0 && _tooltip.startsWith('http')) {
+      return /*#__PURE__*/_react["default"].createElement("a", {
+        className: _Utils["default"].clsx(classes.cellIdTooltipLink),
+        href: tooltip,
+        target: "_blank",
+        rel: "noreferrer"
+      }, tooltip);
+    }
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: _Utils["default"].clsx(classes.cellIdTooltip)
+    }, tooltip);
+  }
+  return data.id;
+}
 function buildTree(objects, options) {
   options = options || {};
   var imagePrefix = options.imagePrefix || '.';
@@ -3952,7 +3991,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     value: function onCopy(e, text) {
       e.stopPropagation();
       e.preventDefault();
-      (0, _copyToClipboard["default"])(text, null);
+      _Utils["default"].copyToClipboard(text, null);
       if (text.length < 50) {
         this.setState({
           toast: this.props.t('ra_Copied %s', text)
@@ -3994,7 +4033,19 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           "aria-label": "delete",
           title: this.texts.deleteObject,
           onClick: function onClick() {
-            return _this27.props.onObjectDelete(id, !!(item.children && item.children.length), false);
+            // calculate number of children
+            var keys = Object.keys(_this27.objects);
+            keys.sort();
+            var count = 0;
+            var start = "".concat(id, ".");
+            for (var i = 0; i < keys.length; i++) {
+              if (keys[i].startsWith(start)) {
+                count++;
+              } else if (keys[i] > start) {
+                break;
+              }
+            }
+            _this27.props.onObjectDelete(id, !!(item.children && item.children.length), false, count + 1);
           }
         }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
           className: classes.cellButtonsButtonIcon
@@ -4041,7 +4092,18 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         "aria-label": "delete",
         onClick: function onClick() {
           var _item$children3, _item$data$obj$common2;
-          return _this27.props.onObjectDelete(id, !!((_item$children3 = item.children) !== null && _item$children3 !== void 0 && _item$children3.length), !((_item$data$obj$common2 = item.data.obj.common) !== null && _item$data$obj$common2 !== void 0 && _item$data$obj$common2.dontDelete));
+          var keys = Object.keys(_this27.objects);
+          keys.sort();
+          var count = 0;
+          var start = "".concat(id, ".");
+          for (var i = 0; i < keys.length; i++) {
+            if (keys[i].startsWith(start)) {
+              count++;
+            } else if (keys[i] > start) {
+              break;
+            }
+          }
+          _this27.props.onObjectDelete(id, !!((_item$children3 = item.children) !== null && _item$children3 !== void 0 && _item$children3.length), !((_item$data$obj$common2 = item.data.obj.common) !== null && _item$data$obj$common2 !== void 0 && _item$data$obj$common2.dontDelete), count);
         },
         title: this.texts.deleteObject
       }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
@@ -4774,7 +4836,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           invertBackground = this.props.themeType === 'dark' ? '#9a9a9a' : '#565656';
         }
       }
-      if (!checkColor || this.state.selected.includes(id)) {
+      if (id === 'system') {
+        checkColor = COLOR_NAME_SYSTEM;
+      } else if (id === 'system.adapter') {
+        checkColor = COLOR_NAME_SYSTEM_ADAPTER;
+      } else if (!checkColor || this.state.selected.includes(id)) {
         checkColor = 'inherit';
       }
       var icons = [];
@@ -4910,12 +4976,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }
       }, checkbox, iconFolder), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
-        title: id,
-        className: _Utils["default"].clsx(classes.cellIdSpan, invertBackground && classes.invertedBackground),
         style: {
-          color: id === 'system' ? COLOR_NAME_SYSTEM : id === 'system.adapter' ? COLOR_NAME_SYSTEM_ADAPTER : checkColor
-        }
-      }, item.data.name, alias, icons), /*#__PURE__*/_react["default"].createElement("div", {
+          color: checkColor
+        },
+        className: _Utils["default"].clsx(classes.cellIdSpan, invertBackground && classes.invertedBackground)
+      }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+        title: getIdFieldTooltip(item.data, this.props.classes, this.props.lang)
+      }, /*#__PURE__*/_react["default"].createElement("div", null, item.data.name)), alias, icons), /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.grow, invertBackground && classes.invertedBackgroundFlex)
       }), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
@@ -5874,7 +5941,7 @@ ObjectBrowser.propTypes = {
   modalEditOfAccessControl: _propTypes["default"].func,
   // modal Edit Of Access Control
   onObjectDelete: _propTypes["default"].func,
-  // optional function (id, hasChildren, objectExists) {  }
+  // optional function (id, hasChildren, objectExists, childrenCount+1) {  }
   customFilter: _propTypes["default"].object,
   // optional
   // `{common: {custom: true}}` - show only objects with some custom settings