@iobroker/adapter-react-v5 4.4.8 → 4.5.0

package/Components/ObjectBrowser.js

@@ -48,7 +48,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /**
-                                                                                                                                                                                                                                                                                                                                           * Copyright 2020-2023, bluefox <dogafox@gmail.com>
+                                                                                                                                                                                                                                                                                                                                           * Copyright 2020-2023, Denis Haev <dogafox@gmail.com>
                                                                                                                                                                                                                                                                                                                                            *
                                                                                                                                                                                                                                                                                                                                            * MIT License
                                                                                                                                                                                                                                                                                                                                            *
@@ -710,6 +710,38 @@ var styles = function styles(theme) {
     invertedBackgroundFlex: {
       backgroundColor: theme.palette.mode === 'dark' ? '#9a9a9a' : '#565656',
       borderRadius: '0 2px 2px 0'
+    },
+    contextMenuEdit: {
+      color: theme.palette.mode === 'dark' ? '#ffee48' : '#cbb801'
+    },
+    contextMenuEditValue: {
+      color: theme.palette.mode === 'dark' ? '#5dff45' : '#1cd301'
+    },
+    contextMenuView: {
+      color: theme.palette.mode === 'dark' ? '#FFF' : '#000'
+    },
+    contextMenuCustom: {
+      color: theme.palette.mode === 'dark' ? '#42eaff' : '#01bbc2'
+    },
+    contextMenuACL: {
+      color: theme.palette.mode === 'dark' ? '#e079ff' : '#500070'
+    },
+    contextMenuRoom: {
+      color: theme.palette.mode === 'dark' ? '#ff9a33' : '#642a00'
+    },
+    contextMenuRole: {
+      color: theme.palette.mode === 'dark' ? '#ffdb43' : '#562d00'
+    },
+    contextMenuAlias: {
+      color: theme.palette.mode === 'dark' ? '#5cabfb' : '#011ed0'
+    },
+    contextMenuDelete: {
+      color: theme.palette.mode === 'dark' ? '#ff4f4f' : '#cf0000'
+    },
+    contextMenuKeys: {
+      marginLeft: theme.spacing(1),
+      opacity: 0.7,
+      fontSize: 'smaller'
     }
   };
 };
@@ -747,6 +779,25 @@ function binarySearch(list, find, _start, _end) {
   }
   return false;
 }
+
+/**
+ * Check if browser is running on iOS
+ *
+ * @return {boolean}
+ */
+// function isIOS() {
+//     return [
+//         'iPad Simulator',
+//         'iPhone Simulator',
+//         'iPod Simulator',
+//         'iPad',
+//         'iPhone',
+//         'iPod',
+//     ].includes(navigator.platform)
+//     // iPad on iOS 13 detection
+//     || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
+// }
+
 function getName(name, lang) {
   if (name && (0, _typeof2["default"])(name) === 'object') {
     return (name[lang] || name.en || '').toString();
@@ -1755,6 +1806,19 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     var _this;
     (0, _classCallCheck2["default"])(this, ObjectBrowser);
     _this = _super.call(this, props);
+    /**
+     * Context menu handler.
+     */
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onContextMenu", function (e) {
+      // console.log(`CONTEXT MENU: ${this.contextMenu ? Date.now() - this.contextMenu.ts : 'false'}`);
+      if (_this.contextMenu && Date.now() - _this.contextMenu.ts < 2000) {
+        e.preventDefault();
+        _this.setState({
+          showContextMenu: _this.contextMenu.item
+        });
+      }
+      _this.contextMenu = null;
+    });
     /**
      * Called when a state changes.
      * @param {string} id
@@ -2522,7 +2586,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       scrollBarWidth: 16,
       customDialog: customDialog,
       editObjectDialog: '',
+      editObjectAlias: false,
+      // open the edit object dialog on alias tab
       viewFileDialog: '',
+      showAliasEditor: '',
       enumDialog: null,
       roleDialog: null,
       statesView: statesView,
@@ -2536,7 +2603,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       customColumnDialogValueChanged: false,
       showExportDialog: false,
       linesEnabled: (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".lines")) === 'true',
-      showDescription: (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".desc")) !== 'false'
+      showDescription: (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".desc")) !== 'false',
+      showContextMenu: null
     };
     _this.edit = {};
     _this.texts = {
@@ -2827,7 +2895,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
                 this.props.socket.subscribeObject('*', this.onObjectChange);
               }
               objectsAlreadyLoaded = true;
-            case 4:
+              window.addEventListener('contextmenu', this.onContextMenu, true);
+            case 5:
             case "end":
               return _context4.stop();
           }
@@ -2847,6 +2916,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       var _this4 = this;
       this.filterTimer && clearTimeout(this.filterTimer);
       this.filterTimer = null;
+      window.removeEventListener('contextmenu', this.onContextMenu, true);
       if (this.props.objectsWorker) {
         this.props.objectsWorker.unregisterHandler(this.onObjectChange, true);
       } else {
@@ -2861,13 +2931,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       this.subscribes = [];
       this.objects = {};
     }
-
+  }, {
+    key: "refreshComponent",
+    value:
     /**
      * Called when component is mounted.
      */
-  }, {
-    key: "refreshComponent",
-    value: function refreshComponent() {
+    function refreshComponent() {
       var _this5 = this;
       // remove all subscribes
       this.subscribes.forEach(function (pattern) {
@@ -2935,7 +3005,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      */
   }, {
     key: "onSelect",
-    value: function onSelect(toggleItem, isDouble) {
+    value: function onSelect(toggleItem, isDouble, cb) {
       var _this7 = this;
       if (!this.props.multiSelect) {
         if (this.objects[toggleItem] && (!this.props.types || this.props.types.includes(this.objects[toggleItem].type))) {
@@ -2945,7 +3015,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
               selected: [toggleItem],
               selectedNonObject: ''
             }, function () {
-              return _this7.onAfterSelect(isDouble);
+              _this7.onAfterSelect(isDouble);
+              cb && cb();
             });
           } else if (isDouble && this.props.onSelect) {
             this.onAfterSelect(isDouble);
@@ -2956,7 +3027,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             selected: [],
             selectedNonObject: toggleItem
           }, function () {
-            return _this7.onAfterSelect();
+            _this7.onAfterSelect();
+            cb && cb();
           });
         }
       } else if (this.objects[toggleItem] && (!this.props.types || this.props.types.includes(this.objects[toggleItem].type))) {
@@ -2973,7 +3045,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           selected: selected,
           selectedNonObject: ''
         }, function () {
-          return _this7.onAfterSelect(isDouble);
+          _this7.onAfterSelect(isDouble);
+          cb && cb();
         });
       }
     }
@@ -4122,7 +4195,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      */
     function renderColumnButtons(id, item, classes) {
       var _this27 = this,
-        _item$children2,
+        _item$children3,
         _item$data$obj$common,
         _item$data$obj$common3;
       if (!item.data.obj) {
@@ -4143,6 +4216,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           "aria-label": "delete",
           title: this.texts.deleteObject,
           onClick: function onClick() {
+            var _item$children2;
             // calculate number of children
             var keys = Object.keys(_this27.objects);
             keys.sort();
@@ -4155,7 +4229,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
                 break;
               }
             }
-            _this27.props.onObjectDelete(id, !!(item.children && item.children.length), false, count + 1);
+            _this27.props.onObjectDelete(id, !!((_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length), false, count + 1);
           }
         }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, {
           className: classes.cellButtonsButtonIcon
@@ -4193,18 +4267,19 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           (window._localStorage || window.localStorage).setItem("".concat(_this27.props.dialogName || 'App', ".objectSelected"), id);
           _this27.setState({
-            editObjectDialog: id
+            editObjectDialog: id,
+            editObjectAlias: false
           });
         }
       }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Edit, {
         className: classes.cellButtonsButtonIcon
-      })), this.props.onObjectDelete && ((_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length || !((_item$data$obj$common = item.data.obj.common) !== null && _item$data$obj$common !== void 0 && _item$data$obj$common.dontDelete)) ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+      })), this.props.onObjectDelete && ((_item$children3 = item.children) !== null && _item$children3 !== void 0 && _item$children3.length || !((_item$data$obj$common = item.data.obj.common) !== null && _item$data$obj$common !== void 0 && _item$data$obj$common.dontDelete)) ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         key: "delete",
         className: classes.cellButtonsButton,
         size: "small",
         "aria-label": "delete",
         onClick: function onClick() {
-          var _item$children3, _item$data$obj$common2;
+          var _item$children4, _item$data$obj$common2;
           var keys = Object.keys(_this27.objects);
           keys.sort();
           var count = 0;
@@ -4216,7 +4291,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
               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);
+          _this27.props.onObjectDelete(id, !!((_item$children4 = item.children) !== null && _item$children4 !== void 0 && _item$children4.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(_iconsMaterial.Delete, {
@@ -5086,8 +5161,25 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         className: _Utils["default"].clsx(classes.tableRow, this.state.linesEnabled && classes.tableRowLines, !this.props.dragEnabled && classes.tableRowNoDragging, alias && classes.tableRowAlias, readWriteAlias && classes.tableRowAliasReadWrite, !item.data.visible && classes.filteredOut, item.data.hasVisibleParent && !item.data.visible && !item.data.hasVisibleChildren && classes.filteredParentOut, this.state.selected.includes(id) && classes.itemSelected, this.state.selectedNonObject === id && classes.itemSelected),
         key: id,
         id: id,
-        onClick: function onClick() {
-          return _this36.onSelect(id);
+        onMouseDown: function onMouseDown(e) {
+          e.preventDefault();
+          _this36.onSelect(id);
+          var isRightMB;
+          if ('which' in e) {
+            // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
+            isRightMB = e.which === 3;
+          } else if ('button' in e) {
+            // IE, Opera
+            isRightMB = e.button === 2;
+          }
+          if (isRightMB) {
+            _this36.contextMenu = {
+              item: item,
+              ts: Date.now()
+            };
+          } else {
+            _this36.contextMenu = null;
+          }
         },
         onDoubleClick: function onDoubleClick() {
           if (!item.children) {
@@ -5801,12 +5893,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         themeName: this.props.themeName,
         socket: this.props.socket,
         dialogName: this.props.dialogName,
+        aliasTab: this.state.editObjectAlias,
         t: this.props.t,
         expertMode: this.state.filter.expertMode,
         onNewObject: function onNewObject(obj) {
           return _this44.props.socket.setObject(obj._id, obj).then(function () {
             return _this44.setState({
-              editObjectDialog: obj._id
+              editObjectDialog: obj._id,
+              editObjectAlias: false
             }, function () {
               return _this44.onSelect(obj._id);
             });
@@ -5835,7 +5929,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             });
           }
           _this44.setState({
-            editObjectDialog: ''
+            editObjectDialog: '',
+            editObjectAlias: false
           });
         }
       });
@@ -5869,6 +5964,327 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       });
     }
 
+    /**
+     * @private
+     * @returns {JSX.Element | null}
+     */
+  }, {
+    key: "renderAliasEditorDialog",
+    value: function renderAliasEditorDialog() {
+      var _this46 = this;
+      if (!this.props.objectBrowserAliasEditor || !this.state.showAliasEditor) {
+        return null;
+      }
+      var ObjectBrowserAliasEditor = this.props.objectBrowserAliasEditor;
+      return /*#__PURE__*/_react["default"].createElement(ObjectBrowserAliasEditor, {
+        key: "editAlias",
+        obj: this.objects[this.state.showAliasEditor],
+        objects: this.objects,
+        themeType: this.props.themeType,
+        socket: this.props.socket,
+        dialogName: this.props.dialogName,
+        t: this.props.t,
+        expertMode: this.state.filter.expertMode,
+        onClose: function onClose() {
+          return _this46.setState({
+            showAliasEditor: ''
+          });
+        },
+        onRedirect: function onRedirect(id) {
+          return _this46.setState({
+            editObjectDialog: id,
+            showAliasEditor: false,
+            editObjectAlias: true
+          });
+        }
+      });
+    }
+
+    /**
+     * @private
+     * @returns {JSX.Element | null}
+     */
+  }, {
+    key: "renderContextMenu",
+    value: function renderContextMenu() {
+      var _this47 = this,
+        _obj$common6,
+        _obj$common7,
+        _obj$common8,
+        _obj$common9,
+        _obj$common10,
+        _item$children5,
+        _obj$common12;
+      if (!this.state.showContextMenu) {
+        return null;
+      }
+      var item = this.state.showContextMenu;
+      var id = item.data.id;
+      var items = [];
+      // const ctrl = isIOS() ? '⌘' : (this.props.lang === 'de' ? 'Strg+' : 'Ctrl+');
+
+      var obj = item.data.obj;
+      var showACL = '';
+      if (this.props.objectEditOfAccessControl && this.state.filter.expertMode) {
+        if (!obj) {
+          showACL = '---';
+        } else {
+          var acl = obj.acl ? obj.type === 'state' ? obj.acl.state : obj.acl.object : 0;
+          var aclSystemConfig = obj.acl && (obj.type === 'state' ? this.systemConfig.common.defaultNewAcl.state : this.systemConfig.common.defaultNewAcl.object);
+          showACL = Number.isNaN(Number(acl)) ? Number(aclSystemConfig).toString(16) : Number(acl).toString(16);
+        }
+      }
+      var enumEditable = !this.props.notEditable && obj && (this.state.filter.expertMode || obj.type === 'state' || obj.type === 'channel' || obj.type === 'device');
+      var ITEMS = {
+        EDIT: {
+          key: '0',
+          visibility: this.props.objectBrowserEditObject && obj,
+          icon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Edit, {
+            fontSize: "small",
+            className: this.props.classes.contextMenuEdit
+          }),
+          label: this.texts.editObject,
+          onClick: function onClick() {
+            return _this47.setState({
+              editObjectDialog: item.data.id,
+              showContextMenu: null,
+              editObjectAlias: false
+            });
+          }
+        },
+        EDIT_VALUE: {
+          key: '1',
+          visibility: this.states && !this.props.notEditable && obj && obj.type === 'state' && ((_obj$common6 = obj.common) === null || _obj$common6 === void 0 ? void 0 : _obj$common6.type) !== 'file' && (this.state.filter.expertMode || obj.common.write !== false),
+          icon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.FormatItalic, {
+            fontSize: "small",
+            className: this.props.classes.contextMenuEditValue
+          }),
+          label: this.props.t('ra_Edit value'),
+          onClick: function onClick() {
+            _this47.edit = {
+              val: _this47.states[id] ? _this47.states[id].val : '',
+              q: _this47.states[id] ? _this47.states[id].q || 0 : 0,
+              ack: false,
+              id: id
+            };
+            _this47.setState({
+              updateOpened: true,
+              showContextMenu: null
+            });
+          }
+        },
+        VIEW: {
+          visibility: this.props.objectBrowserViewFile && obj && obj.type === 'state' && ((_obj$common7 = obj.common) === null || _obj$common7 === void 0 ? void 0 : _obj$common7.type) === 'file',
+          icon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.FindInPage, {
+            fontSize: "small",
+            className: this.props.classes.contextMenuView
+          }),
+          className: '',
+          label: this.props.t('ra_View file'),
+          onClick: function onClick() {
+            return _this47.setState({
+              viewFileDialog: obj._id,
+              showContextMenu: null
+            });
+          }
+        },
+        CUSTOM: {
+          key: '2',
+          visibility: this.props.objectCustomDialog && this.info.hasSomeCustoms && obj && obj.type === 'state' && ((_obj$common8 = obj.common) === null || _obj$common8 === void 0 ? void 0 : _obj$common8.type) !== 'file',
+          icon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Settings, {
+            fontSize: "small",
+            className: item.data.hasCustoms ? this.props.classes.cellButtonsButtonWithCustoms : this.props.classes.cellButtonsButtonWithoutCustoms
+          }),
+          className: this.props.classes.contextMenuCustom,
+          label: this.texts.customConfig,
+          onClick: function onClick() {
+            _this47.pauseSubscribe(true);
+            _this47.props.router && _this47.props.router.doNavigate(null, 'customs', id);
+            _this47.setState({
+              customDialog: [id],
+              showContextMenu: null
+            });
+          }
+        },
+        ACL: {
+          key: '3',
+          visibility: !!showACL,
+          icon: showACL,
+          iconStyle: {
+            fontSize: 'smaller'
+          },
+          listItemIconClass: this.props.classes.contextMenuACL,
+          className: this.props.classes.contextMenuACL,
+          label: this.props.t('ra_Edit ACL'),
+          onClick: function onClick() {
+            return _this47.setState({
+              showContextMenu: null,
+              modalEditOfAccess: true,
+              modalEditOfAccessObjData: item.data
+            });
+          }
+        },
+        ROLE: {
+          key: '4',
+          visibility: this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole,
+          icon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.BorderColor, {
+            fontSize: "small",
+            className: this.props.classes.contextMenuRole
+          }),
+          className: '',
+          label: this.props.t('ra_Edit role'),
+          onClick: function onClick() {
+            return _this47.setState({
+              roleDialog: item.data.id,
+              showContextMenu: null
+            });
+          }
+        },
+        FUNCTION: {
+          key: '5',
+          visibility: enumEditable,
+          icon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.BedroomParent, {
+            fontSize: "small",
+            className: this.props.classes.contextMenuRole
+          }),
+          className: '',
+          label: this.props.t('ra_Edit function'),
+          onClick: function onClick() {
+            var enums = findEnumsForObjectAsIds(_this47.info, item.data.id, 'funcEnums');
+            _this47.setState({
+              enumDialogEnums: enums,
+              enumDialog: {
+                item: item,
+                type: 'func',
+                enumsOriginal: JSON.parse(JSON.stringify(enums))
+              },
+              showContextMenu: null
+            });
+          }
+        },
+        ROOM: {
+          key: '6',
+          visibility: enumEditable,
+          icon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Construction, {
+            fontSize: "small",
+            className: this.props.classes.contextMenuRoom
+          }),
+          className: '',
+          label: this.props.t('ra_Edit room'),
+          onClick: function onClick() {
+            var enums = findEnumsForObjectAsIds(_this47.info, item.data.id, 'roomEnums');
+            _this47.setState({
+              enumDialogEnums: enums,
+              enumDialog: {
+                item: item,
+                type: 'room',
+                enumsOriginal: JSON.parse(JSON.stringify(enums))
+              },
+              showContextMenu: null
+            });
+          }
+        },
+        ALIAS: {
+          key: '7',
+          visibility: !this.props.notEditable && this.props.objectBrowserAliasEditor && this.props.objectBrowserEditObject && this.state.filter.expertMode && obj && obj.type === 'state' && ((_obj$common9 = obj.common) === null || _obj$common9 === void 0 ? void 0 : _obj$common9.type) !== 'file',
+          icon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Link, {
+            className: obj !== null && obj !== void 0 && (_obj$common10 = obj.common) !== null && _obj$common10 !== void 0 && _obj$common10.alias ? this.props.classes.cellButtonsButtonWithCustoms : this.props.classes.cellButtonsButtonWithoutCustoms
+          }),
+          className: '',
+          label: this.props.t('ra_Edit alias'),
+          onClick: function onClick() {
+            var _obj$common11;
+            if ((_obj$common11 = obj.common) !== null && _obj$common11 !== void 0 && _obj$common11.alias) {
+              _this47.setState({
+                editObjectDialog: item.data.id,
+                showContextMenu: null,
+                editObjectAlias: true
+              });
+            } else {
+              _this47.setState({
+                showContextMenu: null,
+                showAliasEditor: item.data.id
+              });
+            }
+          }
+        },
+        DELETE: {
+          key: 'Delete',
+          visibility: this.props.onObjectDelete && (((_item$children5 = item.children) === null || _item$children5 === void 0 ? void 0 : _item$children5.length) || obj && !((_obj$common12 = obj.common) !== null && _obj$common12 !== void 0 && _obj$common12.dontDelete)),
+          icon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, {
+            fontSize: "small",
+            className: this.props.classes.contextMenuDelete
+          }),
+          className: this.props.classes.contextMenuDelete,
+          label: this.texts.deleteObject,
+          onClick: function onClick() {
+            _this47.setState({
+              showContextMenu: null
+            }, function () {
+              var _item$children6, _obj$common13;
+              // calculate number of children
+              var keys = Object.keys(_this47.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;
+                }
+              }
+              _this47.props.onObjectDelete(id, !!((_item$children6 = item.children) !== null && _item$children6 !== void 0 && _item$children6.length), !((_obj$common13 = obj.common) !== null && _obj$common13 !== void 0 && _obj$common13.dontDelete), count + 1);
+            });
+          }
+        }
+      };
+      Object.keys(ITEMS).forEach(function (key) {
+        if (ITEMS[key].visibility) {
+          items.push( /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
+            key: key,
+            onClick: ITEMS[key].onClick,
+            className: ITEMS[key].className
+          }, /*#__PURE__*/_react["default"].createElement(_material.ListItemIcon, {
+            style: ITEMS[key].iconStyle,
+            className: ITEMS[key].listItemIconClass
+          }, ITEMS[key].icon), /*#__PURE__*/_react["default"].createElement(_material.ListItemText, null, ITEMS[key].label), ITEMS[key].key ? /*#__PURE__*/_react["default"].createElement("div", {
+            className: _this47.props.classes.contextMenuKeys
+          }, "Alt+".concat(ITEMS[key].key === 'Delete' ? _this47.props.t('ra_Del') : ITEMS[key].key)) : null));
+        }
+      });
+      if (!items.length) {
+        setTimeout(function () {
+          return _this47.setState({
+            showContextMenu: null
+          });
+        }, 100);
+        return null;
+      }
+      var el = document.getElementById(id);
+      return /*#__PURE__*/_react["default"].createElement(_material.Menu, {
+        key: "contextMenu",
+        open: !0,
+        onKeyUp: function onKeyUp(e) {
+          e.preventDefault();
+          if (e.altKey) {
+            Object.keys(ITEMS).forEach(function (key) {
+              if (e.key === ITEMS[key].key) {
+                ITEMS[key].onClick();
+              }
+            });
+          }
+        },
+        anchorEl: el,
+        onClose: function onClose() {
+          _this47.setState({
+            showContextMenu: null
+          });
+          _this47.contextMenu = null;
+        }
+      }, items);
+    }
+
     /**
      * @private
      * @returns {JSX.Element | null}
@@ -5877,7 +6293,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     key: "renderEditValueDialog",
     value: function renderEditValueDialog() {
       var _this$objects$this$ed,
-        _this46 = this;
+        _this48 = this;
       if (!this.state.updateOpened || !this.props.objectBrowserValue) {
         return null;
       }
@@ -5904,22 +6320,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         defaultHistory: this.defaultHistory,
         dateFormat: this.props.dateFormat,
         onClose: function onClose(res) {
-          _this46.setState({
+          _this48.setState({
             updateOpened: false
           });
-          res && _this46.onUpdate(res);
+          res && _this48.onUpdate(res);
         }
       });
     }
 
-    // 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}
@@ -5927,7 +6335,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this47 = this;
+      var _this49 = this;
       this.recordStates = [];
       this.unsubscribeTimer && clearTimeout(this.unsubscribeTimer);
 
@@ -5940,13 +6348,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         applyFilter(this.root, this.state.filter, this.props.lang, this.objects, null, counter, this.props.customFilter, this.props.types);
         if (counter.count < 500 && !this.state.expandAllVisible) {
           setTimeout(function () {
-            return _this47.setState({
+            return _this49.setState({
               expandAllVisible: true
             });
           });
         } else if (counter.count >= 500 && this.state.expandAllVisible) {
           setTimeout(function () {
-            return _this47.setState({
+            return _this49.setState({
               expandAllVisible: false
             });
           });
@@ -5954,8 +6362,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         this.lastAppliedFilter = jsonFilter;
       }
       this.unsubscribeTimer = setTimeout(function () {
-        _this47.unsubscribeTimer = null;
-        _this47.checkUnsubscribes();
+        _this49.unsubscribeTimer = null;
+        _this49.checkUnsubscribes();
       }, 200);
       if (!this.state.loaded) {
         return /*#__PURE__*/_react["default"].createElement(_material.CircularProgress, {
@@ -5968,7 +6376,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         key: this.props.dialogName,
         classes: {},
         onKeyDown: function onKeyDown(event) {
-          return _this47.navigateKeyPress(event);
+          return _this49.navigateKeyPress(event);
         },
         tabIndex: 0
       }, /*#__PURE__*/_react["default"].createElement(_TabHeader["default"], null, this.getToolbar()), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
@@ -5976,7 +6384,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, this.renderHeader(), /*#__PURE__*/_react["default"].createElement("div", {
         className: this.props.classes.tableDiv,
         ref: this.tableRef
-      }, items)), this.renderToast(), this.renderColumnsEditCustomDialog(), this.renderColumnsSelectorDialog(), this.renderCustomDialog(), this.renderEditValueDialog(), this.renderEditObjectDialog(), this.renderViewObjectFileDialog(), this.renderEditRoleDialog(), this.renderEnumDialog(), this.renderErrorDialog(), this.renderExportDialog(), this.state.modalNewObj && this.props.modalNewObject && this.props.modalNewObject(this), this.state.modalEditOfAccess && this.props.modalEditOfAccessControl && this.props.modalEditOfAccessControl(this, this.state.modalEditOfAccessObjData));
+      }, items)), this.renderContextMenu(), this.renderToast(), this.renderColumnsEditCustomDialog(), this.renderColumnsSelectorDialog(), this.renderCustomDialog(), this.renderEditValueDialog(), this.renderEditObjectDialog(), this.renderViewObjectFileDialog(), this.renderAliasEditorDialog(), this.renderEditRoleDialog(), this.renderEnumDialog(), this.renderErrorDialog(), this.renderExportDialog(), this.state.modalNewObj && this.props.modalNewObject && this.props.modalNewObject(this), this.state.modalEditOfAccess && this.props.modalEditOfAccessControl && this.props.modalEditOfAccessControl(this, this.state.modalEditOfAccessObjData));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -6123,18 +6531,20 @@ ObjectBrowser.propTypes = {
   // optional function (id, hasChildren, objectExists, childrenCount+1) {  }
   customFilter: _propTypes["default"].object,
   // optional
-  // `{common: {custom: true}}` - show only objects with some custom settings
-  // `{common: {custom: 'sql.0'}}` - show only objects with sql.0 custom settings (only of the specific instance)
-  // `{common: {custom: '_dataSources'}}` - show only objects of adapters `influxdb' or 'sql' or 'history'
-  // `{common: {custom: 'adapterName.'}}` - show only objects of custom settings of specific adapter (all instances)
-  // `{type: 'channel'}` - show only channels
-  // `{type: ['channel', 'device']}` - show only channels and devices
-  // `{common: {type: 'number'}` - show only states of type 'number
-  // `{common: {type: ['number', 'string']}` - show only states of type 'number and string
-  // `{common: {role: 'switch']}` - show only states with roles starting from switch
-  // `{common: {role: ['switch', 'button]}` - show only states with roles starting from `switch` and `button`
+  //                                    `{common: {custom: true}}` - show only objects with some custom settings
+  //                                    `{common: {custom: 'sql.0'}}` - show only objects with sql.0 custom settings (only of the specific instance)
+  //                                    `{common: {custom: '_dataSources'}}` - show only objects of adapters `influxdb' or 'sql' or 'history'
+  //                                    `{common: {custom: 'adapterName.'}}` - show only objects of custom settings of specific adapter (all instances)
+  //                                    `{type: 'channel'}` - show only channels
+  //                                    `{type: ['channel', 'device']}` - show only channels and devices
+  //                                    `{common: {type: 'number'}` - show only states of type 'number
+  //                                    `{common: {type: ['number', 'string']}` - show only states of type 'number and string
+  //                                    `{common: {role: 'switch']}` - show only states with roles starting from switch
+  //                                    `{common: {role: ['switch', 'button]}` - show only states with roles starting from `switch` and `button`
   objectBrowserValue: _propTypes["default"].object,
   objectBrowserEditObject: _propTypes["default"].object,
+  objectBrowserAliasEditor: _propTypes["default"].func,
+  // on edit alias
   objectBrowserEditRole: _propTypes["default"].object,
   // on Edit role
   objectBrowserViewFile: _propTypes["default"].func,
@@ -6152,7 +6562,7 @@ ObjectBrowser.propTypes = {
   // optional cache of objects
   filterFunc: _propTypes["default"].func,
   // 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
+  //                                     Example for function: `obj => obj.common && obj.common.type === 'boolean'` to show only boolean states
 
   DragWrapper: _propTypes["default"].func,
   dragEnabled: _propTypes["default"].bool