@iobroker/adapter-react-v5 4.10.2 → 4.10.4

package/Components/Loader.d.ts

@@ -5,6 +5,7 @@
  *
  **/
 import React from 'react';
+import { ThemeName, ThemeType } from '../types';
 declare global {
     interface Window {
         loadingBackgroundImage: undefined | string;
@@ -16,11 +17,15 @@ interface LoaderProps {
     /** The size in pixels of this loader. */
     size?: number;
     /** The chosen theme type. */
-    themeType?: 'dark' | 'light';
+    themeType?: ThemeType;
     /** Theme name*/
-    themeName?: 'dark' | 'light' | 'colored' | 'blue';
+    themeName?: ThemeName;
     /** @deprecated Theme name. use themeName instead */
-    theme?: 'dark' | 'light' | 'colored' | 'blue';
+    theme?: ThemeName;
+    /** Background color */
+    backgroundColor?: string;
+    /** Background image URL */
+    backgroundImage?: string;
 }
 declare function Loader(props: LoaderProps): React.JSX.Element;
 export default Loader;

package/Components/Loader.js

@@ -266,8 +266,10 @@ function Loader(props) {
     const size = props.size || 234;
     const theme = props.themeName || props.theme || props.themeType || 'light';
     return react_1.default.createElement("div", { className: `logo-back logo-background-${theme}`, style: {
-            backgroundImage: window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@' ? `url(${window.loadingBackgroundImage})` : undefined,
-            backgroundColor: window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@' ? window.loadingBackgroundColor : undefined,
+            backgroundImage: (props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@') ? props.backgroundImage :
+                (window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@' ? `url(${window.loadingBackgroundImage})` : undefined),
+            backgroundColor: (props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@') ? props.backgroundColor :
+                (window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@' ? window.loadingBackgroundColor : undefined),
             backgroundSize: 'cover',
         } }, window.loadingHideLogo === 'true' ?
         null

package/Components/Loaders/MV.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
+import { ThemeType } from '../../types';
 interface LogoProps {
-    themeType?: 'dark' | 'light';
+    themeType?: ThemeType;
     size?: number;
+    /** Background color */
+    backgroundColor?: string;
+    /** Background image URL */
+    backgroundImage?: string;
 }
 declare function LoaderMV(props: LogoProps): React.JSX.Element;
 export default LoaderMV;

package/Components/Loaders/MV.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 function LoaderMV(props) {
-    const themeName = props.themeType || 'light';
+    const themeType = props.themeType || 'light';
     const size = props.size || 200;
     return react_1.default.createElement("div", { style: {
             width: '100%',
@@ -13,7 +13,11 @@ function LoaderMV(props) {
             position: 'absolute',
             top: 0,
             left: 0,
-            backgroundColor: themeName === 'dark' ? '#000' : '#FFF',
+            backgroundImage: (props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@') ? props.backgroundImage :
+                (window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@' ? `url(${window.loadingBackgroundImage})` : undefined),
+            backgroundColor: (props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@') ? props.backgroundColor :
+                (window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@' ? window.loadingBackgroundColor : (themeType === 'dark' ? '#000' : '#FFF')),
+            backgroundSize: 'cover',
         } },
         react_1.default.createElement("div", { style: {
                 width: size,

package/Components/Loaders/PT.d.ts

@@ -5,13 +5,18 @@
  *
  **/
 import React from 'react';
+import { ThemeType, ThemeName } from '../../types';
 interface LoaderPTProps {
     /** The size in pixels of this loader. */
     size?: number;
     /** The chosen theme type. */
-    themeType?: 'dark' | 'light';
+    themeType?: ThemeType;
     /** The chosen theme name. */
-    themeName?: string;
+    themeName?: ThemeName;
+    /** Background color */
+    backgroundColor?: string;
+    /** Background image URL */
+    backgroundImage?: string;
 }
 declare function LoaderPT(props: LoaderPTProps): React.JSX.Element;
 export default LoaderPT;

package/Components/Loaders/PT.js

@@ -146,7 +146,13 @@ function LoaderPT(props) {
         }
     }, []);
     const themeName = props.themeType || props.themeName || 'light';
-    return react_1.default.createElement("div", { className: `pt-logo-back logo-background-${themeName}` },
+    return react_1.default.createElement("div", { className: `pt-logo-back logo-background-${themeName}`, style: {
+            backgroundImage: (props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@') ? props.backgroundImage :
+                (window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@' ? `url(${window.loadingBackgroundImage})` : undefined),
+            backgroundColor: (props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@') ? props.backgroundColor :
+                (window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@' ? window.loadingBackgroundColor : (props.themeType === 'dark' ? '#000' : '#FFF')),
+            backgroundSize: 'cover',
+        } },
         react_1.default.createElement("div", { className: "pt-logo-div", style: { width: size, height: size } },
             react_1.default.createElement("div", { style: { width: 200, height: 200 } },
                 react_1.default.createElement("div", { className: "pt-loader-blue pt-loader-block" }),

package/Components/Loaders/Vendor.d.ts

@@ -5,13 +5,18 @@
  *
  **/
 import React from 'react';
+import { ThemeType, ThemeName } from '../../types';
 interface LoaderVendorProps {
     /** The size in pixels of this loader. */
     size?: number;
     /** The chosen theme type. */
-    themeType?: 'dark' | 'light';
+    themeType?: ThemeType;
     /** The chosen theme name. */
-    themeName?: string;
+    themeName?: ThemeName;
+    /** Background color */
+    backgroundColor?: string;
+    /** Background image URL */
+    backgroundImage?: string;
 }
 declare function LoaderVendor(props: LoaderVendorProps): React.JSX.Element;
 export default LoaderVendor;

package/Components/Loaders/Vendor.js

@@ -56,6 +56,11 @@ function LoaderVendor(props) {
             height: '100%',
             width: '10%',
             margin: 'auto',
+            backgroundImage: (props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@') ? props.backgroundImage :
+                (window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@' ? `url(${window.loadingBackgroundImage})` : undefined),
+            backgroundColor: (props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@') ? props.backgroundColor :
+                (window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@' ? window.loadingBackgroundColor : (props.themeType === 'dark' ? '#000' : '#FFF')),
+            backgroundSize: 'cover',
         } },
         react_1.default.createElement("div", { style: { flexGrow: 1 } }),
         react_1.default.createElement(material_1.CircularProgress, { color: "secondary", size: 200, thickness: 5 }),

package/Components/SelectWithIcon.d.ts

@@ -1,21 +1,24 @@
-declare const _default: React.JSXElementConstructor<Omit<PropTypes.InferProps<{
-    t: PropTypes.Validator<(...args: any[]) => any>;
-    lang: PropTypes.Validator<string>;
-    themeType: PropTypes.Requireable<string>;
-    value: PropTypes.Requireable<string>;
-    onChange: PropTypes.Validator<(...args: any[]) => any>;
-    disabled: PropTypes.Requireable<boolean>;
-    list: PropTypes.Requireable<object>;
-    options: PropTypes.Requireable<object>;
-    different: PropTypes.Requireable<NonNullable<string | boolean>>;
-    label: PropTypes.Requireable<string>;
-    fullWidth: PropTypes.Requireable<boolean>;
-    className: PropTypes.Requireable<string>;
-    style: PropTypes.Requireable<object>;
-    removePrefix: PropTypes.Requireable<string>;
-    allowNone: PropTypes.Requireable<boolean>;
-    inputProps: PropTypes.Requireable<object>;
-}>, "classes"> & import("@mui/styles").StyledComponentProps<"icon" | "different"> & object>;
-export default _default;
-import PropTypes from 'prop-types';
 import React from 'react';
+import { ThemeType, Translator } from '../types';
+interface SelectWithIconProps {
+    t: Translator;
+    lang: ioBroker.Languages;
+    themeType: ThemeType;
+    value?: string;
+    onChange: (id: string) => void;
+    disabled?: boolean;
+    list?: ioBroker.Object[] | Record<string, ioBroker.Object>;
+    options?: Record<string, any>;
+    different?: string | boolean;
+    label?: string;
+    fullWidth?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    removePrefix?: string;
+    allowNone?: boolean;
+    inputProps: any;
+    classes: Record<string, string>;
+    dense?: boolean;
+}
+declare const _default: React.JSXElementConstructor<Omit<SelectWithIconProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
+export default _default;

package/Components/SelectWithIcon.js

@@ -1,214 +1,153 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports["default"] = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/styles");
-var _material = require("@mui/material");
-var _Icon = _interopRequireDefault(require("./Icon"));
-var _Utils = _interopRequireDefault(require("./Utils"));
-var _i18n = _interopRequireDefault(require("../i18n"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var styles = function styles() {
-  return {
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const styles_1 = require("@mui/styles");
+const material_1 = require("@mui/material");
+const Icon_1 = __importDefault(require("./Icon"));
+const Utils_1 = __importDefault(require("./Utils"));
+const i18n_1 = __importDefault(require("../i18n"));
+const styles = {
     different: {
-      opacity: 0.5
+        opacity: 0.5,
     },
     icon: {
-      width: 16,
-      height: 16,
-      marginRight: 8
-    }
-  };
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },
 };
-var SelectWithIcon = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(SelectWithIcon, _Component);
-  function SelectWithIcon(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, SelectWithIcon);
-    _this = _callSuper(this, SelectWithIcon, [props]);
-    if (_this.props.different) {
-      _this.wordDifferent = _this.props.t(_this.props.different);
-    }
-    var list;
-    if (Array.isArray(_this.props.list || _this.props.options)) {
-      list = _this.props.list.map(function (obj) {
-        var _obj$common, _obj$common2;
-        return {
-          name: _Utils["default"].getObjectNameFromObj(obj, _this.props.lang).replace('system.group.', '').replace('system.user.', '').replace('enum.rooms.', '').replace('enum.functions.', ''),
-          value: obj._id,
-          icon: (_obj$common = obj.common) === null || _obj$common === void 0 ? void 0 : _obj$common.icon,
-          color: (_obj$common2 = obj.common) === null || _obj$common2 === void 0 ? void 0 : _obj$common2.color
-        };
-      });
-    } else {
-      list = Object.values(_this.props.list || _this.props.options).map(function (obj) {
-        var _obj$common3, _obj$common4;
-        return {
-          name: _Utils["default"].getObjectNameFromObj(obj, _this.props.lang).replace('system.group.', '').replace('system.user.', '').replace('enum.rooms.', '').replace('enum.functions.', ''),
-          value: obj._id,
-          icon: (_obj$common3 = obj.common) === null || _obj$common3 === void 0 ? void 0 : _obj$common3.icon,
-          color: (_obj$common4 = obj.common) === null || _obj$common4 === void 0 ? void 0 : _obj$common4.color
+class SelectWithIcon extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.timeout = null;
+        if (props.different) {
+            this.wordDifferent = props.t('ra___different__');
+        }
+        let list;
+        if (Array.isArray(props.list || props.options)) {
+            list = (props.list || props.options)
+                .map(obj => {
+                var _a, _b;
+                return ({
+                    name: Utils_1.default.getObjectNameFromObj(obj, props.lang)
+                        .replace('system.group.', '')
+                        .replace('system.user.', '')
+                        .replace('enum.rooms.', '')
+                        .replace('enum.functions.', ''),
+                    value: obj._id,
+                    icon: (_a = obj.common) === null || _a === void 0 ? void 0 : _a.icon,
+                    color: (_b = obj.common) === null || _b === void 0 ? void 0 : _b.color,
+                });
+            });
+        }
+        else {
+            list = Object.values((props.list || props.options))
+                .map(obj => {
+                var _a, _b;
+                return ({
+                    name: Utils_1.default.getObjectNameFromObj(obj, props.lang)
+                        .replace('system.group.', '')
+                        .replace('system.user.', '')
+                        .replace('enum.rooms.', '')
+                        .replace('enum.functions.', ''),
+                    value: obj._id,
+                    icon: (_a = obj.common) === null || _a === void 0 ? void 0 : _a.icon,
+                    color: (_b = obj.common) === null || _b === void 0 ? void 0 : _b.color,
+                });
+            });
+        }
+        if (props.different && props.value === props.different) {
+            list.unshift({ value: props.different, name: this.wordDifferent || '' });
+        }
+        if (props.allowNone) {
+            list.unshift({ value: '', name: i18n_1.default.t('ra_none') });
+        }
+        this.state = {
+            list,
         };
-      });
-    }
-    if (_this.props.different && _this.props.value === _this.props.different) {
-      list.unshift({
-        value: _this.props.different,
-        name: _this.wordDifferent
-      });
     }
-    if (_this.props.allowNone) {
-      list.unshift({
-        value: '',
-        name: _i18n["default"].t('ra_none')
-      });
-    }
-    _this.state = {
-      list: list
-    };
-    return _this;
-  }
-  (0, _createClass2["default"])(SelectWithIcon, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      if (this.props.allowNone && !this.state.list.find(function (obj) {
-        return obj.value === '';
-      })) {
-        this.timeout = this.timeout || setTimeout(function () {
-          _this2.timeout = null;
-          var list = JSON.parse(JSON.stringify(_this2.state.list));
-          list.unshift({
-            value: '',
-            name: _i18n["default"].t('ra_none')
-          });
-          _this2.setState({
-            list: list
-          });
-        }, 100);
-      } else if (!this.props.allowNone && this.state.list.find(function (obj) {
-        return obj.value === '';
-      })) {
-        this.timeout = this.timeout || setTimeout(function () {
-          _this2.timeout = null;
-          var list = JSON.parse(JSON.stringify(_this2.state.list));
-          var i = _this2.state.list.findIndex(function (obj) {
-            return obj.value === '';
-          });
-          list.splice(i, 1);
-          _this2.setState({
-            list: list
-          });
-        }, 100);
-      }
-      var item = this.state.list.find(function (it) {
-        return it.value === _this2.props.value || _this2.props.removePrefix && it.value.replace(_this2.props.removePrefix, '') === _this2.props.value;
-      });
-      var style = this.props.value === this.props.different ? {} : {
-        color: (item === null || item === void 0 ? void 0 : item.color) || undefined,
-        backgroundColor: _Utils["default"].getInvertedColor(item === null || item === void 0 ? void 0 : item.color, this.props.themeType)
-      };
-      if (this.props.dense && this.props.style) {
-        Object.assign(style, this.props.style);
-      }
-      var select = /*#__PURE__*/_react["default"].createElement(_material.Select, {
-        variant: "standard",
-        disabled: this.props.disabled,
-        value: this.props.value,
-        inputProps: this.props.inputProps,
-        renderValue: function renderValue( /* value */
-        ) {
-          return /*#__PURE__*/_react["default"].createElement("span", null, item !== null && item !== void 0 && item.icon ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-            src: item === null || item === void 0 ? void 0 : item.icon,
-            className: _this2.props.classes.icon
-          }) : null, item === null || item === void 0 ? void 0 : item.name);
-        },
-        classes: {
-          root: _Utils["default"].clsx(this.props.value === this.props.different ? this.props.classes.different : '', this.props.dense ? this.props.className : '')
-        },
-        style: style,
-        onChange: function onChange(el) {
-          if (_this2.props.different && el.target.value !== _this2.props.different) {
-            var pos = null;
-            for (var i = 0; i < _this2.state.list.length; i++) {
-              if (_this2.state.list[i].value === _this2.props.different) {
-                pos = i;
-                break;
-              }
-            }
-            if (pos !== null) {
-              var list = _Utils["default"].clone(_this2.state.list);
-              list.splice(pos, 1);
-              _this2.setState({
-                list: list
-              }, function () {
-                return _this2.props.onChange(el.target.value);
-              });
-              return;
-            }
-          }
-          _this2.props.onChange(_this2.props.removePrefix ? el.target.value.replace(_this2.props.removePrefix, '') : el.target.value);
+    render() {
+        if (this.props.allowNone && !this.state.list.find(obj => obj.value === '')) {
+            this.timeout = this.timeout || setTimeout(() => {
+                this.timeout = null;
+                const list = JSON.parse(JSON.stringify(this.state.list));
+                list.unshift({ value: '', name: i18n_1.default.t('ra_none') });
+                this.setState({ list });
+            }, 100);
+        }
+        else if (!this.props.allowNone && this.state.list.find(obj => obj.value === '')) {
+            this.timeout = this.timeout || setTimeout(() => {
+                this.timeout = null;
+                const list = JSON.parse(JSON.stringify(this.state.list));
+                const i = this.state.list.findIndex(obj => obj.value === '');
+                list.splice(i, 1);
+                this.setState({ list });
+            }, 100);
         }
-      }, this.state.list.map(function (el) {
-        return /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-          className: _this2.props.different && el.value === _this2.props.different ? _this2.props.classes.different : '',
-          style: _this2.props.different && el.value === _this2.props.different ? {} : {
-            color: el.color || undefined,
-            backgroundColor: _Utils["default"].getInvertedColor(el.color, _this2.props.themeType)
-          },
-          key: el.value,
-          value: el.value
-        }, el.icon ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-          src: el.icon,
-          className: _this2.props.classes.icon
-        }) : null, el.name);
-      }));
-      if (this.props.dense) {
-        return select;
-      }
-      return /*#__PURE__*/_react["default"].createElement(_material.FormControl, {
-        variant: "standard",
-        fullWidth: !!this.props.fullWidth,
-        style: this.props.style,
-        className: this.props.className
-      }, /*#__PURE__*/_react["default"].createElement(_material.InputLabel, null, this.props.label), select);
+        const item = this.state.list.find(it => it.value === this.props.value || (this.props.removePrefix && it.value.replace(this.props.removePrefix, '') === this.props.value));
+        const style = this.props.value === this.props.different ? {} : {
+            color: (item === null || item === void 0 ? void 0 : item.color) || undefined,
+            backgroundColor: Utils_1.default.getInvertedColor((item === null || item === void 0 ? void 0 : item.color) || '', this.props.themeType),
+        };
+        if (this.props.dense && this.props.style) {
+            Object.assign(style, this.props.style);
+        }
+        const select = react_1.default.createElement(material_1.Select, { variant: "standard", disabled: this.props.disabled, value: this.props.value, inputProps: this.props.inputProps, renderValue: ( /* value */) => react_1.default.createElement("span", null,
+                (item === null || item === void 0 ? void 0 : item.icon) ? react_1.default.createElement(Icon_1.default, { src: item === null || item === void 0 ? void 0 : item.icon, className: this.props.classes.icon }) : null, item === null || item === void 0 ? void 0 :
+                item.name), classes: {
+                root: Utils_1.default.clsx(this.props.value === this.props.different ? this.props.classes.different : '', this.props.dense ? this.props.className : ''),
+            }, style: style, onChange: el => {
+                if (this.props.different && el.target.value !== this.props.different) {
+                    let pos = null;
+                    for (let i = 0; i < this.state.list.length; i++) {
+                        if (this.state.list[i].value === this.props.different) {
+                            pos = i;
+                            break;
+                        }
+                    }
+                    if (pos !== null) {
+                        const list = Utils_1.default.clone(this.state.list);
+                        list.splice(pos, 1);
+                        this.setState({ list }, () => this.props.onChange(el.target.value));
+                        return;
+                    }
+                }
+                this.props.onChange(this.props.removePrefix ? el.target.value.replace(this.props.removePrefix, '') : el.target.value);
+            } }, this.state.list.map(el => react_1.default.createElement(material_1.MenuItem, { className: this.props.different && el.value === this.props.different ? this.props.classes.different : '', style: this.props.different && el.value === this.props.different ? {} : { color: el.color || undefined, backgroundColor: Utils_1.default.getInvertedColor(el.color || '', this.props.themeType) }, key: el.value, value: el.value },
+            el.icon ? react_1.default.createElement(Icon_1.default, { src: el.icon, className: this.props.classes.icon }) : null,
+            el.name)));
+        if (this.props.dense) {
+            return select;
+        }
+        return react_1.default.createElement(material_1.FormControl, { variant: "standard", fullWidth: !!this.props.fullWidth, style: this.props.style, className: this.props.className },
+            react_1.default.createElement(material_1.InputLabel, null, this.props.label),
+            select);
     }
-  }]);
-  return SelectWithIcon;
-}(_react.Component);
-SelectWithIcon.propTypes = {
-  t: _propTypes["default"].func.isRequired,
-  lang: _propTypes["default"].string.isRequired,
-  themeType: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  onChange: _propTypes["default"].func.isRequired,
-  disabled: _propTypes["default"].bool,
-  list: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object]),
-  // one of "list"(Array) or "options"(object) is required
-  options: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object]),
-  // one of "list"(Array) or "options"(object) is required
-  different: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].bool]),
-  label: _propTypes["default"].string,
-  fullWidth: _propTypes["default"].bool,
-  className: _propTypes["default"].string,
-  style: _propTypes["default"].object,
-  removePrefix: _propTypes["default"].string,
-  allowNone: _propTypes["default"].bool,
-  inputProps: _propTypes["default"].object
-};
-var _default = exports["default"] = (0, _styles.withStyles)(styles)(SelectWithIcon);
-//# sourceMappingURL=SelectWithIcon.js.map
+}
+exports.default = (0, styles_1.withStyles)(styles)(SelectWithIcon);

package/Components/types.d.ts

@@ -2,59 +2,6 @@ import { Translator, Width } from '../types';
 import Connection from '../Connection';
 import Router from './Router';
 
-export interface FileBrowserProps {
-    /** The key to identify this component. */
-    key?: string;
-    /** Additional styling for this component. */
-    style?: React.CSSProperties;
-    /** The CSS class name. */
-    className?: string;
-    /** Translation function. */
-    t: Translator;
-    /** The selected language. */
-    lang: ioBroker.Languages;
-    /** The socket connection. */
-    socket: Connection;
-    /** Is the component data ready. */
-    ready?: boolean;
-    /** Is expert mode enabled? (default: false) */
-    expertMode?: boolean;
-    /** Show the toolbar? (default: false) */
-    showToolbar?: boolean;
-    /** If defined, allow selecting only files from this folder and subfolders */
-    limitPath?: string;
-    /** Allow upload of new files? (default: false) */
-    allowUpload?: boolean;
-    /** Allow download of files? (default: false) */
-    allowDownload?: boolean;
-    /** Allow creation of new folders? (default: false) */
-    allowCreateFolder?: boolean;
-    /** Allow deleting files? (default: false) */
-    allowDelete?: boolean;
-    /** Allow viewing files? (default: false) */
-    allowView?: boolean;
-    /** Prefix (default: '.') */
-    imagePrefix?: string;
-    /** Show the expert button? */
-    showExpertButton?: boolean;
-    /** Type of view */
-    viewType?: 'Table' | 'Tile';
-    /** Show the buttons to switch the view from table to tile? (default: false) */
-    showViewTypeButton?: boolean;
-    /** The ID of the selected file. */
-    selected?: string | string[];
-    /** The file extensions to show, like ['png', 'svg', 'bmp', 'jpg', 'jpeg', 'gif']. */
-    filterFiles?: string[];
-    /** The file extension categories to show. */
-    filterByType?: 'images' | 'code' | 'txt';
-    /** Callback for file selection. */
-    onSelect?: (id: string | string[], isDoubleClick?: boolean, isFolder?: boolean) => void;
-    /** Theme name */
-    themeName?: string;
-    /** Theme type. */
-    themeType?: 'dark' | 'light';
-}
-
 export interface ObjectBrowserTableFilter {
     id?: string;
     name?: string;

package/README.md

@@ -670,7 +670,7 @@ socket.getObjectViewCustom('custom', 'state', 'startKey', 'endKey')
 -->
 
 ## Changelog
-### 4.10.2 (2024-03-16)
+### 4.10.4 (2024-03-16)
 * (bluefox) Migrated some components to typescript
 
 ### 4.10.1 (2024-03-11)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "4.10.2",
+  "version": "4.10.4",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",