@iobroker/adapter-react-v5 0.0.2

package/GenericApp.js

@@ -0,0 +1,1022 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Connection = _interopRequireWildcard(require("./Connection"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var Sentry = _interopRequireWildcard(require("@sentry/browser"));
+
+var SentryIntegrations = _interopRequireWildcard(require("@sentry/integrations"));
+
+var _Error = _interopRequireDefault(require("./Dialogs/Error"));
+
+var _Snackbar = _interopRequireDefault(require("@mui/material/Snackbar"));
+
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _Prompt = _interopRequireDefault(require("./Prompt"));
+
+var _Theme = _interopRequireDefault(require("./Theme"));
+
+var _Loader = _interopRequireDefault(require("./Components/Loader"));
+
+var _Router2 = _interopRequireDefault(require("./Components/Router"));
+
+var _Utils = _interopRequireDefault(require("./Components/Utils"));
+
+var _SaveCloseButtons = _interopRequireDefault(require("./Components/SaveCloseButtons"));
+
+var _i18n = _interopRequireDefault(require("./i18n"));
+
+require("./index.css");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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) { _defineProperty(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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function getItem() {
+      return null;
+    },
+    setItem: function setItem() {
+      return null;
+    }
+  };
+}
+/**
+ * @extends {Router<import('./types').GenericAppProps, import('./types').GenericAppState>}
+ */
+
+
+var GenericApp = /*#__PURE__*/function (_Router) {
+  _inherits(GenericApp, _Router);
+
+  var _super = _createSuper(GenericApp);
+
+  /**
+   * @param {import('./types').GenericAppProps} props
+   * @param {import('./types').GenericAppSettings | undefined} settings
+   */
+  function GenericApp(props, settings) {
+    var _this;
+
+    _classCallCheck(this, GenericApp);
+
+    // Remove `!Connection.isWeb() && window.adapterName !== 'material'` when iobroker.socket will support native ws
+    if (!_Connection["default"].isWeb() && window.io && window.location.port === '3000') {
+      try {
+        var io = new window.SocketClient();
+        delete window.io;
+        window.io = io;
+      } catch (e) {// ignore
+      }
+    }
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "onSystemConfigChanged", function (id, obj) {
+      if (obj && id === 'system.config') {
+        var _obj$common;
+
+        if (_this.socket.systemLang !== (obj === null || obj === void 0 ? void 0 : obj.common.language)) {
+          _this.socket.systemLang = (obj === null || obj === void 0 ? void 0 : obj.common.language) || 'en';
+
+          _i18n["default"].setLanguage(_this.socket.systemLang);
+        }
+
+        if (_this._systemConfig.expertMode !== !!(obj !== null && obj !== void 0 && (_obj$common = obj.common) !== null && _obj$common !== void 0 && _obj$common.expertMode)) {
+          _this._systemConfig = (obj === null || obj === void 0 ? void 0 : obj.common) || {};
+
+          _this.setState({
+            expertMode: _this.getExpertMode()
+          });
+        } else {
+          _this._systemConfig = (obj === null || obj === void 0 ? void 0 : obj.common) || {};
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onReceiveMessage", function (message) {
+      if (message !== null && message !== void 0 && message.data) {
+        if (message.data === 'updateTheme') {
+          var newThemeName = _Utils["default"].getThemeName();
+
+          _Utils["default"].setThemeName(_Utils["default"].getThemeName());
+
+          var _theme = _this.createTheme(newThemeName);
+
+          _this.setState({
+            theme: _theme,
+            themeName: _this.getThemeName(_theme),
+            themeType: _this.getThemeType(_theme)
+          }, function () {
+            _this.props.onThemeChange && _this.props.onThemeChange(newThemeName);
+            _this.onThemeChanged && _this.onThemeChanged(newThemeName);
+          });
+        } else if (message.data === 'updateExpertMode') {
+          _this.onToggleExpertMode && _this.onToggleExpertMode(_this.getExpertMode());
+        } else {
+          console.warn('Received unknown message: ' + JSON.stringify(message.data));
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onResize", function () {
+      _this.resizeTimer && clearTimeout(_this.resizeTimer);
+      _this.resizeTimer = setTimeout(function () {
+        _this.resizeTimer = null;
+
+        _this.setState({
+          width: GenericApp.getWidth()
+        });
+      }, 200);
+    });
+
+    (0, _Prompt["default"])();
+    var query = (window.location.search || '').replace(/^\?/, '').replace(/#.*$/, '');
+    var args = {};
+    query.trim().split('&').filter(function (t) {
+      return t.trim();
+    }).forEach(function (b) {
+      var parts = b.split('=');
+      args[parts[0]] = parts.length === 2 ? parts[1] : true;
+
+      if (args[parts[0]] === 'true') {
+        args[parts[0]] = true;
+      } else if (args[parts[0]] === 'false') {
+        args[parts[0]] = false;
+      }
+    }); // extract instance from URL
+
+    _this.instance = args.instance !== undefined ? parseInt(args.instance, 10) || 0 : parseInt(window.location.search.slice(1), 10) || 0; // extract adapter name from URL
+
+    var tmp = window.location.pathname.split('/');
+    _this.adapterName = (settings === null || settings === void 0 ? void 0 : settings.adapterName) || props.adapterName || window.adapterName || tmp[tmp.length - 2] || 'iot';
+    _this.instanceId = "system.adapter.".concat(_this.adapterName, ".").concat(_this.instance);
+    _this.newReact = args.newReact === true; // it is admin5
+
+    var location = _Router2["default"].getLocation();
+
+    location.tab = location.tab || window.localStorage.getItem(_this.adapterName + '-adapter') || '';
+
+    var themeInstance = _this.createTheme();
+
+    _this.state = {
+      selectedTab: window.localStorage.getItem(_this.adapterName + '-adapter') || '',
+      selectedTabNum: -1,
+      "native": {},
+      errorText: '',
+      changed: false,
+      connected: false,
+      loaded: false,
+      isConfigurationError: '',
+      expertMode: false,
+      toast: '',
+      theme: themeInstance,
+      themeName: _this.getThemeName(themeInstance),
+      themeType: _this.getThemeType(themeInstance),
+      bottomButtons: (settings && settings.bottomButtons) === false ? false : (props && props.bottomButtons) === false ? false : true,
+      width: GenericApp.getWidth()
+    }; // init translations
+
+    var translations = {
+      'en': require('./i18n/en.json'),
+      'de': require('./i18n/de.json'),
+      'ru': require('./i18n/ru.json'),
+      'pt': require('./i18n/pt.json'),
+      'nl': require('./i18n/nl.json'),
+      'fr': require('./i18n/fr.json'),
+      'it': require('./i18n/it.json'),
+      'es': require('./i18n/es.json'),
+      'pl': require('./i18n/pl.json'),
+      'zh-cn': require('./i18n/zh-cn.json')
+    }; // merge together
+
+    if (settings && settings.translations) {
+      Object.keys(settings.translations).forEach(function (lang) {
+        return translations[lang] = Object.assign(translations[lang], settings.translations[lang]);
+      });
+    } else if (props.translations) {
+      Object.keys(props.translations).forEach(function (lang) {
+        return translations[lang] = Object.assign(translations[lang], props.translations[lang]);
+      });
+    }
+
+    _i18n["default"].setTranslations(translations);
+
+    _this.savedNative = {}; // to detect if the config changed
+
+    _this.encryptedFields = props.encryptedFields || (settings === null || settings === void 0 ? void 0 : settings.encryptedFields) || [];
+    _this.sentryDSN = settings && settings.sentryDSN || props.sentryDSN;
+    _this.socket = new _Connection["default"](_objectSpread(_objectSpread({}, (props === null || props === void 0 ? void 0 : props.socket) || (settings === null || settings === void 0 ? void 0 : settings.socket)), {}, {
+      name: _this.adapterName,
+      doNotLoadAllObjects: settings === null || settings === void 0 ? void 0 : settings.doNotLoadAllObjects,
+      onProgress: function onProgress(progress) {
+        if (progress === _Connection.PROGRESS.CONNECTING) {
+          _this.setState({
+            connected: false
+          });
+        } else if (progress === _Connection.PROGRESS.READY) {
+          _this.setState({
+            connected: true
+          });
+        } else {
+          _this.setState({
+            connected: true
+          });
+        }
+      },
+      onReady: function onReady(objects, scripts) {
+        _i18n["default"].setLanguage(_this.socket.systemLang); // subscribe because of language and expert mode
+
+
+        _this.socket.subscribeObject('system.config', _this.onSystemConfigChanged).then(function () {
+          return _this.getSystemConfig();
+        }).then(function (obj) {
+          _this._secret = typeof obj !== 'undefined' && obj["native"] && obj["native"].secret || 'Zgfr56gFe87jJOM';
+          _this._systemConfig = (obj === null || obj === void 0 ? void 0 : obj.common) || {};
+          return _this.socket.getObject(_this.instanceId);
+        }).then(function (instanceObj) {
+          var waitPromise;
+          var sentryEnabled = _this._systemConfig.diag !== 'none' && instanceObj && instanceObj.common && instanceObj.common.name && instanceObj.common.version && !instanceObj.common.disableDataReporting && window.location.host !== 'localhost:3000'; // activate sentry plugin
+
+          if (!_this.sentryStarted && _this.sentryDSN && sentryEnabled) {
+            _this.sentryStarted = true;
+            Sentry.init({
+              dsn: _this.sentryDSN,
+              release: "iobroker.".concat(instanceObj.common.name, "@").concat(instanceObj.common.version),
+              integrations: [new SentryIntegrations.Dedupe()]
+            });
+          } // read UUID and init sentry with it.
+          // for backward compatibility it will be processed separately from above logic: some adapters could still have this.sentryDSN as undefined
+
+
+          if (!_this.sentryInited && sentryEnabled) {
+            _this.sentryInited = true;
+            waitPromise = _this.socket.getObject('system.meta.uuid').then(function (uuidObj) {
+              if (uuidObj && uuidObj["native"] && uuidObj["native"].uuid) {
+                Sentry.configureScope(function (scope) {
+                  return scope.setUser({
+                    id: uuidObj["native"].uuid
+                  });
+                });
+              }
+            });
+          }
+
+          waitPromise = waitPromise || Promise.resolve();
+          waitPromise.then(function () {
+            if (instanceObj) {
+              _this.common = instanceObj === null || instanceObj === void 0 ? void 0 : instanceObj.common;
+
+              _this.onPrepareLoad(instanceObj["native"], instanceObj.encryptedNative); // decode all secrets
+
+
+              _this.savedNative = JSON.parse(JSON.stringify(instanceObj["native"]));
+
+              _this.setState({
+                "native": instanceObj["native"],
+                loaded: true,
+                expertMode: _this.getExpertMode()
+              }, function () {
+                return _this.onConnectionReady && _this.onConnectionReady();
+              });
+            } else {
+              console.warn('Cannot load instance settings');
+
+              _this.setState({
+                "native": {},
+                loaded: true,
+                expertMode: _this.getExpertMode()
+              }, function () {
+                return _this.onConnectionReady && _this.onConnectionReady();
+              });
+            }
+          });
+        });
+      },
+      onError: function onError(err) {
+        console.error(err);
+
+        _this.showError(err);
+      }
+    }));
+    return _this;
+  }
+
+  _createClass(GenericApp, [{
+    key: "componentDidMount",
+    value:
+    /**
+     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+     */
+    function componentDidMount() {
+      window.addEventListener('resize', this.onResize, true);
+      window.addEventListener('message', this.onReceiveMessage, false);
+
+      _get(_getPrototypeOf(GenericApp.prototype), "componentDidMount", this).call(this);
+    }
+    /**
+     * Called immediately before a component is destroyed.
+     */
+
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.onResize, true);
+      window.removeEventListener('message', this.onReceiveMessage, false);
+
+      _get(_getPrototypeOf(GenericApp.prototype), "componentWillUnmount", this).call(this);
+    }
+  }, {
+    key: "createTheme",
+    value:
+    /**
+     * Get a theme
+     * @param {string} name Theme name
+     * @returns {import('./types').Theme}
+     */
+    function createTheme() {
+      var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      return (0, _Theme["default"])(_Utils["default"].getThemeName(name));
+    }
+    /**
+     * Get the theme name
+     * @param {import('./types').Theme} theme Theme
+     * @returns {string} Theme name
+     */
+
+  }, {
+    key: "getThemeName",
+    value: function getThemeName(theme) {
+      return theme.name;
+    }
+    /**
+     * Get the theme type
+     * @param {import('./types').Theme} theme Theme
+     * @returns {string} Theme type
+     */
+
+  }, {
+    key: "getThemeType",
+    value: function getThemeType(theme) {
+      return theme.palette.mode;
+    }
+    /**
+     * Changes the current theme
+     */
+
+  }, {
+    key: "toggleTheme",
+    value: function toggleTheme() {
+      var _this2 = this;
+
+      var themeName = this.state.themeName; // dark => blue => colored => light => dark
+
+      var newThemeName = themeName === 'dark' ? 'blue' : themeName === 'blue' ? 'colored' : themeName === 'colored' ? 'light' : 'dark';
+
+      _Utils["default"].setThemeName(newThemeName);
+
+      var theme = this.createTheme(newThemeName);
+      this.setState({
+        theme: theme,
+        themeName: this.getThemeName(theme),
+        themeType: this.getThemeType(theme)
+      }, function () {
+        _this2.props.onThemeChange && _this2.props.onThemeChange(newThemeName);
+        _this2.onThemeChanged && _this2.onThemeChanged(newThemeName);
+      });
+    }
+    /**
+     * Gets the system configuration.
+     * @returns {Promise<ioBroker.OtherObject>}
+     */
+
+  }, {
+    key: "getSystemConfig",
+    value: function getSystemConfig() {
+      return this.socket.getSystemConfig();
+    }
+    /**
+     * Get current expert mode
+     * @returns {boolean}
+     */
+
+  }, {
+    key: "getExpertMode",
+    value: function getExpertMode() {
+      return window.sessionStorage.getItem('App.expertMode') === 'true' || !!this._systemConfig.expertMode;
+    }
+    /**
+     * Gets called when the socket.io connection is ready.
+     * You can overload this function to execute own commands.
+     */
+
+  }, {
+    key: "onConnectionReady",
+    value: function onConnectionReady() {}
+    /**
+     * Encrypts a string.
+     * @param {string} value
+     * @returns {string}
+     */
+
+  }, {
+    key: "encrypt",
+    value: function encrypt(value) {
+      var result = '';
+
+      for (var i = 0; i < value.length; i++) {
+        result += String.fromCharCode(this._secret[i % this._secret.length].charCodeAt(0) ^ value.charCodeAt(i));
+      }
+
+      return result;
+    }
+    /**
+     * Decrypts a string.
+     * @param {string} value
+     * @returns {string}
+     */
+
+  }, {
+    key: "decrypt",
+    value: function decrypt(value) {
+      var result = '';
+
+      for (var i = 0; i < value.length; i++) {
+        result += String.fromCharCode(this._secret[i % this._secret.length].charCodeAt(0) ^ value.charCodeAt(i));
+      }
+
+      return result;
+    }
+    /**
+     * Gets called when the navigation hash changes.
+     * You may override this if needed.
+     */
+
+  }, {
+    key: "onHashChanged",
+    value: function onHashChanged() {
+      var location = _Router2["default"].getLocation();
+
+      if (location.tab !== this.state.selectedTab) {
+        this.selectTab(location.tab);
+      }
+    }
+    /**
+     * Selects the given tab.
+     * @param {string} tab
+     * @param {number} [index]
+     */
+
+  }, {
+    key: "selectTab",
+    value: function selectTab(tab, index) {
+      window.localStorage[this.adapterName + '-adapter'] = tab;
+      this.setState({
+        selectedTab: tab,
+        selectedTabNum: index
+      });
+    }
+    /**
+     * Gets called before the settings are saved.
+     * You may override this if needed.
+     * @param {Record<string, any>} settings
+     */
+
+  }, {
+    key: "onPrepareSave",
+    value: function onPrepareSave(settings) {
+      var _this3 = this;
+
+      // here you can encode values
+      this.encryptedFields && this.encryptedFields.forEach(function (attr) {
+        if (settings[attr]) {
+          settings[attr] = _this3.encrypt(settings[attr]);
+        }
+      });
+      return true;
+    }
+    /**
+     * Gets called after the settings are loaded.
+     * You may override this if needed.
+     * @param {Record<string, any>} settings
+     * @param {string[]} encryptedNative optional list of fields to be decrypted
+     */
+
+  }, {
+    key: "onPrepareLoad",
+    value: function onPrepareLoad(settings, encryptedNative) {
+      var _this4 = this;
+
+      // here you can encode values
+      this.encryptedFields && this.encryptedFields.forEach(function (attr) {
+        if (settings[attr]) {
+          settings[attr] = _this4.decrypt(settings[attr]);
+        }
+      });
+      encryptedNative && encryptedNative.forEach(function (attr) {
+        _this4.encryptedFields = _this4.encryptedFields || [];
+        !_this4.encryptedFields.includes(attr) && _this4.encryptedFields.push(attr);
+
+        if (settings[attr]) {
+          settings[attr] = _this4.decrypt(settings[attr]);
+        }
+      });
+    }
+    /**
+     * Gets the extendable instances.
+     * @returns {Promise<any[]>}
+     */
+
+  }, {
+    key: "getExtendableInstances",
+    value: function getExtendableInstances() {
+      var _this5 = this;
+
+      return new Promise(function (resolve) {
+        _this5.socket._socket.emit('getObjectView', 'system', 'instance', null, function (err, doc) {
+          if (err) {
+            resolve([]);
+          } else {
+            resolve(doc.rows.filter(function (item) {
+              return item.value.common.webExtendable;
+            }).map(function (item) {
+              return item.value;
+            }));
+          }
+        });
+      });
+    }
+    /**
+     * Gets the IP addresses of the given host.
+     * @param {string} host
+     */
+
+  }, {
+    key: "getIpAddresses",
+    value: function getIpAddresses(host) {
+      var _this6 = this;
+
+      return new Promise(function (resolve, reject) {
+        _this6.socket._socket.emit('getHostByIp', host || _this6.common.host, function (ip, _host) {
+          var IPs4 = [{
+            name: '[IPv4] 0.0.0.0 - ' + _i18n["default"].t('ra_Listen on all IPs'),
+            address: '0.0.0.0',
+            family: 'ipv4'
+          }];
+          var IPs6 = [{
+            name: '[IPv6] ::',
+            address: '::',
+            family: 'ipv6'
+          }];
+
+          if (_host) {
+            host = _host;
+
+            if (host["native"].hardware && host["native"].hardware.networkInterfaces) {
+              Object.keys(host["native"].hardware.networkInterfaces).forEach(function (eth) {
+                return host["native"].hardware.networkInterfaces[eth].forEach(function (inter) {
+                  if (inter.family !== 'IPv6') {
+                    IPs4.push({
+                      name: '[' + inter.family + '] ' + inter.address + ' - ' + eth,
+                      address: inter.address,
+                      family: 'ipv4'
+                    });
+                  } else {
+                    IPs6.push({
+                      name: '[' + inter.family + '] ' + inter.address + ' - ' + eth,
+                      address: inter.address,
+                      family: 'ipv6'
+                    });
+                  }
+                });
+              });
+            }
+
+            IPs6.forEach(function (ip) {
+              return IPs4.push(ip);
+            });
+          }
+
+          resolve(IPs4);
+        });
+      });
+    }
+    /**
+     * Saves the settings to the server.
+     * @param {boolean} isClose True if the user is closing the dialog.
+     */
+
+  }, {
+    key: "onSave",
+    value: function onSave(isClose) {
+      var _this7 = this;
+
+      var oldObj;
+
+      if (this.state.isConfigurationError) {
+        this.setState({
+          errorText: this.state.isConfigurationError
+        });
+        return;
+      }
+
+      this.socket.getObject(this.instanceId).then(function (_oldObj) {
+        oldObj = _oldObj || {};
+
+        for (var a in _this7.state["native"]) {
+          if (_this7.state["native"].hasOwnProperty(a)) {
+            if (_this7.state["native"][a] === null) {
+              oldObj["native"][a] = null;
+            } else if (_this7.state["native"][a] !== undefined) {
+              oldObj["native"][a] = JSON.parse(JSON.stringify(_this7.state["native"][a]));
+            } else {
+              delete oldObj["native"][a];
+            }
+          }
+        }
+
+        if (_this7.state.common) {
+          for (var b in _this7.state.common) {
+            if (_this7.state.common[b] === null) {
+              oldObj.common[b] = null;
+            } else if (_this7.state.common[b] !== undefined) {
+              oldObj.common[b] = JSON.parse(JSON.stringify(_this7.state.common[b]));
+            } else {
+              delete oldObj.common[b];
+            }
+          }
+        }
+
+        if (_this7.onPrepareSave(oldObj["native"]) !== false) {
+          return _this7.socket.setObject(_this7.instanceId, oldObj);
+        } else {
+          return Promise.reject('Invalid configuration');
+        }
+      }).then(function () {
+        _this7.savedNative = oldObj["native"];
+        globalThis.changed = false;
+
+        _this7.setState({
+          changed: false
+        });
+
+        isClose && GenericApp.onClose();
+      })["catch"](function (e) {
+        console.error("Cannot save configuration: ".concat(e));
+      });
+    }
+    /**
+     * Renders the toast.
+     * @returns {JSX.Element | null} The JSX element.
+     */
+
+  }, {
+    key: "renderToast",
+    value: function renderToast() {
+      var _this8 = this;
+
+      if (!this.state.toast) return null;
+      return /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'left'
+        },
+        open: true,
+        autoHideDuration: 6000,
+        onClose: function onClose() {
+          return _this8.setState({
+            toast: ''
+          });
+        },
+        ContentProps: {
+          'aria-describedby': 'message-id'
+        },
+        message: /*#__PURE__*/_react["default"].createElement("span", {
+          id: "message-id"
+        }, this.state.toast),
+        action: [/*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+          key: "close",
+          "aria-label": "Close",
+          color: "inherit",
+          className: this.props.classes.close,
+          onClick: function onClick() {
+            return _this8.setState({
+              toast: ''
+            });
+          },
+          size: "large"
+        }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null))]
+      });
+    }
+    /**
+     * Closes the dialog.
+     * @private
+     */
+
+  }, {
+    key: "renderError",
+    value:
+    /**
+     * Renders the error dialog.
+     * @returns {JSX.Element | null} The JSX element.
+     */
+    function renderError() {
+      var _this9 = this;
+
+      if (!this.state.errorText) {
+        return null;
+      } else {
+        return /*#__PURE__*/_react["default"].createElement(_Error["default"], {
+          text: this.state.errorText,
+          onClose: function onClose() {
+            return _this9.setState({
+              errorText: ''
+            });
+          }
+        });
+      }
+    }
+    /**
+     * Checks if the configuration has changed.
+     * @param {Record<string, any>} [native] the new state
+     */
+
+  }, {
+    key: "getIsChanged",
+    value: function getIsChanged(_native) {
+      _native = _native || this.state["native"];
+      var isChanged = JSON.stringify(_native) !== JSON.stringify(this.savedNative);
+
+      if (isChanged) {
+        globalThis.changed = true;
+      } else {
+        globalThis.changed = false;
+      }
+
+      return isChanged;
+    }
+    /**
+     * Gets called when loading the configuration.
+     * @param {Record<string, any>} newNative The new configuration object.
+     */
+
+  }, {
+    key: "onLoadConfig",
+    value: function onLoadConfig(newNative) {
+      if (JSON.stringify(newNative) !== JSON.stringify(this.state["native"])) {
+        this.setState({
+          "native": newNative,
+          changed: this.getIsChanged(newNative)
+        });
+      }
+    }
+    /**
+     * Sets the configuration error.
+     * @param {string} errorText
+     */
+
+  }, {
+    key: "setConfigurationError",
+    value: function setConfigurationError(errorText) {
+      if (this.state.isConfigurationError !== errorText) {
+        this.setState({
+          isConfigurationError: errorText
+        });
+      }
+    }
+    /**
+     * Renders the save and close buttons.
+     * @returns {JSX.Element | undefined} The JSX element.
+     */
+
+  }, {
+    key: "renderSaveCloseButtons",
+    value: function renderSaveCloseButtons() {
+      var _this10 = this;
+
+      if (this.state.bottomButtons) {
+        return /*#__PURE__*/_react["default"].createElement(_SaveCloseButtons["default"], {
+          theme: this.state.theme,
+          newReact: this.newReact,
+          noTextOnButtons: this.state.width === 'xs' || this.state.width === 'sm' || this.state.width === 'md',
+          changed: this.state.changed,
+          onSave: function onSave(isClose) {
+            return _this10.onSave(isClose);
+          },
+          onClose: function onClose() {
+            return GenericApp.onClose();
+          }
+        });
+      } else {
+        return null;
+      }
+    }
+    /**
+     * @private
+     * @param {Record<string, any>} obj
+     * @param {any} attrs
+     * @param {any} value
+     * @returns {boolean | undefined}
+     */
+
+  }, {
+    key: "_updateNativeValue",
+    value: function _updateNativeValue(obj, attrs, value) {
+      if (_typeof(attrs) !== 'object') {
+        attrs = attrs.split('.');
+      }
+
+      var attr = attrs.shift();
+
+      if (!attrs.length) {
+        if (value && _typeof(value) === 'object') {
+          if (JSON.stringify(obj[attr]) !== JSON.stringify(value)) {
+            obj[attr] = value;
+            return true;
+          }
+        } else if (obj[attr] !== value) {
+          obj[attr] = value;
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        obj[attr] = obj[attr] || {};
+
+        if (_typeof(obj[attr]) !== 'object') {
+          throw new Error('attribute ' + attr + ' is no object, but ' + _typeof(obj[attr]));
+        }
+
+        return this._updateNativeValue(obj[attr], attrs, value);
+      }
+    }
+    /**
+     * Update the native value
+     * @param {string} attr The attribute name with dots as delimiter.
+     * @param {any} value The new value.
+     * @param {(() => void)} [cb] Callback which will be called upon completion.
+     */
+
+  }, {
+    key: "updateNativeValue",
+    value: function updateNativeValue(attr, value, cb) {
+      var _native2 = JSON.parse(JSON.stringify(this.state["native"]));
+
+      if (this._updateNativeValue(_native2, attr, value)) {
+        var changed = this.getIsChanged(_native2);
+        this.setState({
+          "native": _native2,
+          changed: changed
+        }, cb);
+      }
+    }
+    /**
+     * Set the error text to be shown.
+     * @param {string | JSX.Element} text
+     */
+
+  }, {
+    key: "showError",
+    value: function showError(text) {
+      this.setState({
+        errorText: text
+      });
+    }
+    /**
+     * Sets the toast to be shown.
+     * @param {string} toast
+     */
+
+  }, {
+    key: "showToast",
+    value: function showToast(toast) {
+      this.setState({
+        toast: toast
+      });
+    }
+    /**
+     * Renders this component.
+     * @returns {JSX.Element} The JSX element.
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.state.loaded) {
+        return /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
+          theme: this.state.themeType
+        });
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "App"
+      }, this.renderError(), this.renderToast(), this.renderSaveCloseButtons());
+    }
+  }], [{
+    key: "getWidth",
+    value:
+    /**
+     * Gets the width depending on the window inner width.
+     * @returns {import('./types').Width}
+     */
+    function getWidth() {
+      /**
+       * innerWidth |xs      sm      md      lg      xl
+       *            |-------|-------|-------|-------|------>
+       * width      |  xs   |  sm   |  md   |  lg   |  xl
+       */
+      var SIZES = {
+        xs: 0,
+        sm: 600,
+        md: 960,
+        lg: 1280,
+        xl: 1920
+      };
+      var width = window.innerWidth;
+      var keys = Object.keys(SIZES).reverse();
+      var widthComputed = keys.find(function (key) {
+        return width >= SIZES[key];
+      });
+      return widthComputed || 'xs';
+    }
+  }, {
+    key: "onClose",
+    value: function onClose() {
+      if (typeof window.parent !== 'undefined' && window.parent) {
+        try {
+          if (window.parent.$iframeDialog && typeof window.parent.$iframeDialog.close === 'function') {
+            window.parent.$iframeDialog.close();
+          } else {
+            window.parent.postMessage('close', '*');
+          }
+        } catch (e) {
+          window.parent.postMessage('close', '*');
+        }
+      }
+    }
+  }]);
+
+  return GenericApp;
+}(_Router2["default"]);
+
+GenericApp.propTypes = {
+  adapterName: _propTypes["default"].string,
+  // (optional) name of adapter
+  onThemeChange: _propTypes["default"].func,
+  // (optional) called by theme change
+  socket: _propTypes["default"].object,
+  // (optional) socket information (host, port)
+  encryptedFields: _propTypes["default"].array,
+  // (optional) list of native attributes, that must be encrypted
+  bottomButtons: _propTypes["default"].bool // If the bottom buttons (Save/Close) must be shown
+
+};
+var _default = GenericApp;
+exports["default"] = _default;
+//# sourceMappingURL=GenericApp.js.map