@iobroker/adapter-react-v5 7.0.1 → 7.1.0

package/Components/FileViewer.js

@@ -87,7 +87,7 @@ class FileViewer extends react_1.Component {
     constructor(props) {
         super(props);
         this.timeout = null;
-        this.onFileChanged = (id, fileName, size) => {
+        this.onFileChanged = (_id, _fileName, size) => {
             if (!this.state.changed) {
                 if (this.timeout) {
                     clearTimeout(this.timeout);
@@ -140,13 +140,17 @@ class FileViewer extends react_1.Component {
             parts.splice(0, 2);
             const adapter = parts[0];
             const name = parts.splice(1).join('/');
-            this.props.socket.readFile(adapter, name)
+            this.props.socket
+                .readFile(adapter, name)
                 .then((data) => {
                 let fileData = '';
                 if (data.file !== undefined) {
                     fileData = data.file;
                 }
-                const newState = { copyPossible: this.state.copyPossible, ext: this.state.ext };
+                const newState = {
+                    copyPossible: this.state.copyPossible,
+                    ext: this.state.ext,
+                };
                 // try to detect valid extension
                 if (data.type === 'Buffer') {
                     if (name.toLowerCase().endsWith('.json5')) {
@@ -190,7 +194,9 @@ class FileViewer extends react_1.Component {
         const adapter = parts[0];
         const name = parts.splice(1).join('/');
         if (this.props.supportSubscribes) {
-            this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);
+            this.props.socket
+                .subscribeFiles(adapter, name, this.onFileChanged)
+                .catch(e => window.alert(`Cannot subscribe on file: ${e}`));
         }
     }
     componentWillUnmount() {
@@ -203,7 +209,9 @@ class FileViewer extends react_1.Component {
         const adapter = parts[0];
         const name = parts.splice(1).join('/');
         if (this.props.supportSubscribes) {
-            this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);
+            this.props.socket
+                .subscribeFiles(adapter, name, this.onFileChanged)
+                .catch(e => window.alert(`Cannot subscribe on file: ${e}`));
         }
     }
     static getEditFile(ext) {
@@ -228,20 +236,20 @@ class FileViewer extends react_1.Component {
             if (this.state.imgError) {
                 return react_1.default.createElement(IconNoIcon_1.default, { style: Object.assign(Object.assign({}, styles.img), this.props.getStyleBackgroundImage()) });
             }
-            return react_1.default.createElement(Icon_1.default, { onError: e => {
+            return (react_1.default.createElement(Icon_1.default, { onError: e => {
                     e.target.onerror = null;
                     this.setState({ imgError: true });
-                }, style: Object.assign(Object.assign({}, styles.img), this.props.getStyleBackgroundImage()), src: `${this.props.href}?ts=${this.state.forceUpdate}`, alt: this.props.href });
+                }, style: Object.assign(Object.assign({}, styles.img), this.props.getStyleBackgroundImage()), src: `${this.props.href}?ts=${this.state.forceUpdate}`, alt: this.props.href }));
         }
         if (this.state.ext && exports.EXTENSIONS.audio.includes(this.state.ext)) {
-            return react_1.default.createElement("div", { style: {
+            return (react_1.default.createElement("div", { style: {
                     width: '100%',
                     height: '100%',
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
                 } },
-                react_1.default.createElement("audio", { style: { width: '100%' }, src: this.props.href, controls: true }));
+                react_1.default.createElement("audio", { style: { width: '100%' }, src: this.props.href, controls: true })));
         }
         if (this.state.ext && exports.EXTENSIONS.video.includes(this.state.ext)) {
             return (react_1.default.createElement("div", { style: {
@@ -262,33 +270,36 @@ class FileViewer extends react_1.Component {
             //     value={this.state.editingValue || this.state.code || this.state.text}
             //     onChange={this.state.editing ? newValue => this.setState({ editingValue: newValue, changed: true }) : undefined}
             // />;
-            return react_1.default.createElement(material_1.TextField, { variant: "standard", style: styles.textarea, multiline: true, value: this.state.editingValue || this.state.code || this.state.text, 
+            return (react_1.default.createElement(material_1.TextField, { variant: "standard", style: styles.textarea, multiline: true, value: this.state.editingValue || this.state.code || this.state.text, 
                 // onChange={newValue => this.setState({ editingValue: newValue, changed: true })}
-                InputProps: { readOnly: !this.state.editing } });
+                slotProps: {
+                    htmlInput: {
+                        readOnly: !this.state.editing,
+                    },
+                } }));
         }
         return null;
     }
     render() {
-        return react_1.default.createElement(material_1.Dialog, { sx: {
+        return (react_1.default.createElement(material_1.Dialog, { sx: {
                 '&.MuiDialog-scrollPaper': styles.dialog,
                 '& .MuiDialog-paper': styles.paper,
             }, scroll: "paper", open: !!this.props.href, onClose: () => this.props.onClose(), fullWidth: true, maxWidth: "xl", "aria-labelledby": "ar_dialog_file_view_title" },
             react_1.default.createElement("div", { style: styles.dialogTitle },
                 react_1.default.createElement(material_1.DialogTitle, { id: "ar_dialog_file_view_title" }, `${this.props.t(this.state.editing ? 'Edit' : 'View')}: ${this.props.href}`),
-                this.state.ext && exports.EXTENSIONS.images.includes(this.state.ext) && react_1.default.createElement("div", null,
+                this.state.ext && exports.EXTENSIONS.images.includes(this.state.ext) && (react_1.default.createElement("div", null,
                     react_1.default.createElement(material_1.IconButton, { size: "large", color: "inherit", onClick: this.props.setStateBackgroundImage },
-                        react_1.default.createElement(icons_material_1.Brightness6, null)))),
+                        react_1.default.createElement(icons_material_1.Brightness6, null))))),
             react_1.default.createElement(material_1.DialogContent, { style: styles.content }, this.getContent()),
             react_1.default.createElement(material_1.DialogActions, null,
-                this.state.copyPossible ?
-                    react_1.default.createElement(material_1.Button, { color: "grey", onClick: e => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            Utils_1.default.copyToClipboard(this.state.text || this.state.code || '');
-                        }, startIcon: react_1.default.createElement(fa_1.FaCopy, null) }, this.props.t('Copy content')) : null,
-                this.state.editing ?
-                    react_1.default.createElement(material_1.Button, { color: "grey", disabled: this.state.editingValue === this.state.code || this.state.editingValue === this.state.text, variant: "contained", onClick: this.writeFile64, startIcon: react_1.default.createElement(icons_material_1.Save, null) }, this.props.t('Save')) : null,
-                react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.props.onClose(), color: "primary", startIcon: react_1.default.createElement(icons_material_1.Close, null) }, this.props.t('Close'))));
+                this.state.copyPossible ? (react_1.default.createElement(material_1.Button, { color: "grey", onClick: e => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        Utils_1.default.copyToClipboard(this.state.text || this.state.code || '');
+                    }, startIcon: react_1.default.createElement(fa_1.FaCopy, null) }, this.props.t('Copy content'))) : null,
+                this.state.editing ? (react_1.default.createElement(material_1.Button, { color: "grey", disabled: this.state.editingValue === this.state.code ||
+                        this.state.editingValue === this.state.text, variant: "contained", onClick: this.writeFile64, startIcon: react_1.default.createElement(icons_material_1.Save, null) }, this.props.t('Save'))) : null,
+                react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.props.onClose(), color: "primary", startIcon: react_1.default.createElement(icons_material_1.Close, null) }, this.props.t('Close')))));
     }
 }
 exports.default = (0, withWidth_1.default)()(FileViewer);

package/Components/Icon.d.ts

@@ -1,5 +1,16 @@
-import React, { ReactEventHandler } from 'react';
+import React, { type ReactEventHandler } from 'react';
+/**
+ * Get icon by object type (state, channel, device, ...).
+ *
+ * @param obj Object
+ */
 export declare function getSystemIcon(obj: ioBroker.Object | null): React.JSX.Element | null;
+/**
+ * Get icon from the object.
+ *
+ * @param obj Object
+ * @param imagePrefix Prefix for image
+ */
 export declare function getSelectIdIcon(obj: ioBroker.Object | null, imagePrefix?: string): string | null;
 interface IconProps {
     /** URL, UTF-8 character, or svg code (data:image/svg...) */
@@ -8,15 +19,18 @@ interface IconProps {
     className?: string;
     /** Style for image */
     style?: React.CSSProperties;
+    /** Styles for mui */
     sx?: Record<string, any>;
     /** Tooltip */
     title?: string;
     /** Styles for utf-8 characters */
     styleUTF8?: React.CSSProperties;
+    /** On error handler */
     onError?: ReactEventHandler<HTMLImageElement>;
+    /** Reference to image */
     ref?: React.RefObject<HTMLImageElement>;
     /** Alternative text for image */
     alt?: string;
 }
-export default function Icon(props: IconProps): React.JSX.Element;
+export default function Icon(props: IconProps): React.JSX.Element | null;
 export {};

package/Components/Icon.js

@@ -12,6 +12,11 @@ const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
 const IconAlias_1 = __importDefault(require("../icons/IconAlias"));
 const Utils_1 = __importDefault(require("./Utils"));
+/**
+ * Get icon by object type (state, channel, device, ...).
+ *
+ * @param obj Object
+ */
 function getSystemIcon(obj) {
     let icon;
     const id = obj === null || obj === void 0 ? void 0 : obj._id;
@@ -19,7 +24,7 @@ function getSystemIcon(obj) {
         return null;
     }
     // system or design has special icons
-    if (id.startsWith('_design/') || (id === 'system')) {
+    if (id.startsWith('_design/') || id === 'system') {
         icon = react_1.default.createElement(icons_material_1.SettingsApplications, { className: "iconOwn" });
     }
     else if (id === '0_userdata' || id === '0_userdata.0') {
@@ -51,6 +56,12 @@ function getSystemIcon(obj) {
     }
     return icon || null;
 }
+/**
+ * Get icon from the object.
+ *
+ * @param obj Object
+ * @param imagePrefix Prefix for image
+ */
 function getSelectIdIcon(obj, imagePrefix) {
     imagePrefix = imagePrefix || '.'; // http://localhost:8081';
     let src = '';
@@ -106,12 +117,12 @@ function Icon(props) {
             if (props.src.length < 3) {
                 // utf-8 char
                 if (props.sx) {
-                    return react_1.default.createElement(material_1.Box, { component: "span", sx: props.sx, title: props.title || undefined, style: Object.assign({ height: 27, marginTop: -8 }, (props.styleUTF8 || props.style)), className: Utils_1.default.clsx(props.className, 'iconOwn') }, props.src);
+                    return (react_1.default.createElement(material_1.Box, { component: "span", sx: props.sx, title: props.title || undefined, style: Object.assign({ height: 27, marginTop: -8 }, (props.styleUTF8 || props.style)), className: Utils_1.default.clsx(props.className, 'iconOwn') }, props.src));
                 }
-                return react_1.default.createElement("span", { title: props.title || undefined, style: Object.assign({ height: 27, marginTop: -8 }, (props.styleUTF8 || props.style)), className: Utils_1.default.clsx(props.className, 'iconOwn') }, props.src);
+                return (react_1.default.createElement("span", { title: props.title || undefined, style: Object.assign({ height: 27, marginTop: -8 }, (props.styleUTF8 || props.style)), className: Utils_1.default.clsx(props.className, 'iconOwn') }, props.src));
             }
             if (props.src.startsWith('data:image/svg')) {
-                return react_1.default.createElement(react_inlinesvg_1.default, { title: props.title || undefined, src: props.src, className: Utils_1.default.clsx(props.className, 'iconOwn'), width: ((_a = props.style) === null || _a === void 0 ? void 0 : _a.width) || 28, height: ((_b = props.style) === null || _b === void 0 ? void 0 : _b.height) || ((_c = props.style) === null || _c === void 0 ? void 0 : _c.width) || 28, style: props.style || {} });
+                return (react_1.default.createElement(react_inlinesvg_1.default, { title: props.title || undefined, src: props.src, className: Utils_1.default.clsx(props.className, 'iconOwn'), width: ((_a = props.style) === null || _a === void 0 ? void 0 : _a.width) || 28, height: ((_b = props.style) === null || _b === void 0 ? void 0 : _b.height) || ((_c = props.style) === null || _c === void 0 ? void 0 : _c.width) || 28, style: props.style || {} }));
             }
             if (REMOTE_SERVER && !props.src.startsWith('http://') && !props.src.startsWith('https://')) {
                 let src = props.src;
@@ -122,14 +133,14 @@ function Icon(props) {
                     src = REMOTE_PREFIX + src;
                 }
                 if (props.sx) {
-                    return react_1.default.createElement(material_1.Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: props.ref, onError: e => props.onError && props.onError(e) });
+                    return (react_1.default.createElement(material_1.Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: props.ref, onError: e => props.onError && props.onError(e) }));
                 }
-                return react_1.default.createElement("img", { title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: props.ref, onError: e => props.onError && props.onError(e) });
+                return (react_1.default.createElement("img", { title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: props.ref, onError: e => props.onError && props.onError(e) }));
             }
             if (props.sx) {
-                return react_1.default.createElement(material_1.Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: props.src, alt: props.alt || undefined, ref: props.ref, onError: props.onError });
+                return (react_1.default.createElement(material_1.Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: props.src, alt: props.alt || undefined, ref: props.ref, onError: props.onError }));
             }
-            return react_1.default.createElement("img", { title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: props.src, alt: props.alt || undefined, ref: props.ref, onError: props.onError });
+            return (react_1.default.createElement("img", { title: props.title || undefined, style: props.style || {}, className: Utils_1.default.clsx(props.className, 'iconOwn'), src: props.src, alt: props.alt || undefined, ref: props.ref, onError: props.onError }));
         }
         return props.src;
     }

package/Components/IconPicker.js

@@ -73,30 +73,26 @@ const styles = {
 const IconPicker = (props) => {
     var _a, _b, _c, _d;
     const IconCustom = props.icon;
+    const onChange = props.onChange;
     const onDrop = (0, react_1.useCallback)((acceptedFiles) => {
         const reader = new FileReader();
-        reader.addEventListener('load', () => props.onChange(reader.result), false);
+        reader.addEventListener('load', () => onChange(reader.result), false);
         if (acceptedFiles[0]) {
             reader.readAsDataURL(acceptedFiles[0]);
         }
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [onChange]);
     const { getRootProps, getInputProps, isDragActive } = (0, react_dropzone_1.useDropzone)({ onDrop });
-    return react_1.default.createElement("div", { style: styles.formContainer },
+    return (react_1.default.createElement("div", { style: styles.formContainer },
         IconCustom ? react_1.default.createElement(IconCustom, { style: styles.formIcon }) : null,
         react_1.default.createElement(material_1.FormControl, { variant: "standard", style: Object.assign(Object.assign({}, styles.formControl), { padding: 3 }) },
             react_1.default.createElement(material_1.InputLabel, { shrink: true, sx: ((_a = props.customStyles) === null || _a === void 0 ? void 0 : _a.label) ? { '&.MuiInputLabel-root': props.customStyles.label } : undefined, classes: { root: (_b = props.customClasses) === null || _b === void 0 ? void 0 : _b.label } }, props.label),
             react_1.default.createElement("div", { style: styles.formContainer },
-                props.value ?
-                    react_1.default.createElement("div", { style: styles.divContainer },
-                        react_1.default.createElement(Icon_1.default, { style: Object.assign(Object.assign({}, props.previewStyle), (((_c = props.customStyles) === null || _c === void 0 ? void 0 : _c.icon) || undefined)), src: props.value, className: Utils_1.default.clsx(props.previewClassName, (_d = props.customClasses) === null || _d === void 0 ? void 0 : _d.icon) }),
-                        !props.disabled && react_1.default.createElement(material_1.IconButton, { style: { verticalAlign: 'top' }, title: i18n_1.default.t('ra_Clear icon'), size: "small", onClick: () => props.onChange('') },
-                            react_1.default.createElement(icons_material_1.Clear, null)))
-                    :
-                        (!props.disabled && react_1.default.createElement(IconSelector_1.default, { icons: props.icons, onlyRooms: props.onlyRooms, onlyDevices: props.onlyDevices, onSelect: (base64) => props.onChange(base64), t: i18n_1.default.t, lang: i18n_1.default.getLanguage() })),
-                !props.disabled && react_1.default.createElement("div", Object.assign({}, getRootProps(), { style: Object.assign(Object.assign({}, styles.dragField), (isDragActive ? { backgroundColor: 'rgba(0, 255, 0, 0.1)' } : { cursor: 'pointer' })) }),
+                props.value ? (react_1.default.createElement("div", { style: styles.divContainer },
+                    react_1.default.createElement(Icon_1.default, { style: Object.assign(Object.assign({}, props.previewStyle), (((_c = props.customStyles) === null || _c === void 0 ? void 0 : _c.icon) || undefined)), src: props.value, className: Utils_1.default.clsx(props.previewClassName, (_d = props.customClasses) === null || _d === void 0 ? void 0 : _d.icon) }),
+                    !props.disabled && (react_1.default.createElement(material_1.IconButton, { style: { verticalAlign: 'top' }, title: i18n_1.default.t('ra_Clear icon'), size: "small", onClick: () => props.onChange('') },
+                        react_1.default.createElement(icons_material_1.Clear, null))))) : (!props.disabled && (react_1.default.createElement(IconSelector_1.default, { icons: props.icons, onlyRooms: props.onlyRooms, onlyDevices: props.onlyDevices, onSelect: (base64) => props.onChange(base64), t: i18n_1.default.t, lang: i18n_1.default.getLanguage() }))),
+                !props.disabled && (react_1.default.createElement("div", Object.assign({}, getRootProps(), { style: Object.assign(Object.assign({}, styles.dragField), (isDragActive ? { backgroundColor: 'rgba(0, 255, 0, 0.1)' } : { cursor: 'pointer' })) }),
                     react_1.default.createElement("input", Object.assign({}, getInputProps())),
-                    isDragActive ?
-                        react_1.default.createElement("span", { style: styles.text }, i18n_1.default.t('ra_Drop the files here...')) :
-                        react_1.default.createElement("span", { style: styles.text }, i18n_1.default.t('ra_Drag \'n\' drop some files here, or click to select files'))))));
+                    isDragActive ? (react_1.default.createElement("span", { style: styles.text }, i18n_1.default.t('ra_Drop the files here...'))) : (react_1.default.createElement("span", { style: styles.text }, i18n_1.default.t("ra_Drag 'n' drop some files here, or click to select files")))))))));
 };
 exports.default = IconPicker;

package/Components/IconSelector.d.ts

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Translate } from '../types';
+import { type Translate } from '../types';
 interface IconSelectorProps {
     icons?: {
         icon?: string;

package/Components/IconSelector.js

@@ -31,6 +31,8 @@ const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
 const Icon_1 = __importDefault(require("./Icon"));
 const Utils_1 = __importDefault(require("./Utils"));
+const devices_json_1 = __importDefault(require("../assets/devices.json"));
+const rooms_json_1 = __importDefault(require("../assets/rooms.json"));
 // import devices from '../assets/devices/list.json';
 const devices = [
     {
@@ -55,7 +57,7 @@ const devices = [
             en: 'Alarm System',
             ru: 'Сигнализация',
             de: 'Alarmanlage',
-            fr: 'Systèmes D\'Alarme',
+            fr: "Systèmes D'Alarme",
             it: 'Sistemi Di Allarme',
             nl: 'Alarm Systems',
             pl: 'Systemy Alarmowe',
@@ -151,7 +153,7 @@ const devices = [
             en: 'Computer',
             ru: 'Компьютер',
             de: 'Rechner',
-            fr: 'L\'Ordinateur',
+            fr: "L'Ordinateur",
             it: 'Computer',
             nl: 'Computer',
             pl: 'Komputer',
@@ -199,7 +201,7 @@ const devices = [
             en: 'Power Consumption',
             ru: 'Потребляемая мощность',
             de: 'Stromverbrauch',
-            fr: 'Consommation D\'Énergie',
+            fr: "Consommation D'Énergie",
             it: 'Consumo Di Energia',
             nl: 'Energieverbruik',
             pl: 'Pobór Energii',
@@ -775,7 +777,7 @@ const devices = [
             en: 'Power Consumption',
             ru: 'Потребляемая мощность',
             de: 'Stromverbrauch',
-            fr: 'Consommation D\'Énergie',
+            fr: "Consommation D'Énergie",
             it: 'Consumo Di Energia',
             nl: 'Energieverbruik',
             pl: 'Pobór Energii',
@@ -967,7 +969,7 @@ const devices = [
             en: 'Water',
             ru: 'Вода',
             de: 'Wasser',
-            fr: 'L\'Eau',
+            fr: "L'Eau",
             it: 'Acqua',
             nl: 'Water',
             pl: 'Woda',
@@ -999,8 +1001,8 @@ const devices = [
             en: 'Water Consumption',
             ru: 'Потребление воды',
             de: 'Wasserverbrauch',
-            fr: 'Consommation D\'Eau',
-            it: 'Consumo D\'Acqua',
+            fr: "Consommation D'Eau",
+            it: "Consumo D'Acqua",
             nl: 'Waterverbruik',
             pl: 'Konsumpcja Wody',
             pt: 'Consumo De Água',
@@ -1115,7 +1117,7 @@ const rooms = [
             ru: 'На Улице',
             de: 'Außenbereich',
             fr: 'En Plein Air',
-            it: 'All\'Aperto',
+            it: "All'Aperto",
             nl: 'Buitenshuis',
             pl: 'Na Dworze',
             pt: 'Ao Ar Livre',
@@ -1370,7 +1372,7 @@ const rooms = [
             en: 'Summer House',
             ru: 'Дача',
             de: 'Gartenhaus',
-            fr: 'Maison D\'Été',
+            fr: "Maison D'Été",
             it: 'Casa Estiva',
             nl: 'Zomerhuis',
             pl: 'Domek Letniskowy',
@@ -1402,7 +1404,7 @@ const rooms = [
             en: 'Guest Room',
             ru: 'Гостевая Комната',
             de: 'Gästezimmer',
-            fr: 'Chambre D\'Amis',
+            fr: "Chambre D'Amis",
             it: 'Stanza Degli Ospiti',
             nl: 'Guest Room',
             pl: 'Pokój Gościnny',
@@ -1738,7 +1740,7 @@ const rooms = [
             en: 'Equipment Room',
             ru: 'Оборудование Номера',
             de: 'Technikraum',
-            fr: 'Salle D\'Équipement',
+            fr: "Salle D'Équipement",
             it: 'Stanza Degli Attrezzi',
             nl: 'Technische Ruimte',
             pl: 'Wyposażenie Pokoi',
@@ -1786,7 +1788,7 @@ const rooms = [
             en: 'Stairwell',
             ru: 'Лестничная клетка',
             de: 'Treppenhaus',
-            fr: 'Cage D\'Escalier',
+            fr: "Cage D'Escalier",
             it: 'Tromba Delle Scale',
             nl: 'Trappenhuis',
             pl: 'Klatka Schodowa',
@@ -1993,8 +1995,8 @@ class IconSelector extends react_1.Component {
             const icons = [];
             const names = [];
             if (!this.props.icons) {
+                // load rooms
                 let templates = this.props.onlyRooms || (!this.props.onlyRooms && !this.props.onlyDevices) ? rooms : null;
-                const promises = [];
                 if (templates) {
                     templates.forEach(item => {
                         if (item.name && typeof item.name === 'object') {
@@ -2004,59 +2006,46 @@ class IconSelector extends react_1.Component {
                     });
                     templates = templates.filter((item, i) => !(templates === null || templates === void 0 ? void 0 : templates.find((_item, _i) => i !== _i && _item.icon === item.icon && _item.name === item.name)));
                     templates.forEach((template, i) => {
-                        let image;
-                        try {
-                            image = require(`../assets/rooms/${template.icon}`);
-                        }
-                        catch (e) {
-                            return;
-                        }
                         names[i] = template.name;
-                        promises.push(Utils_1.default.getSvg(image)
-                            .then(icon => {
-                            icons[i] = icon;
-                        }));
+                        icons[i] =
+                            `data:image/svg+xml;base64,${rooms_json_1.default[template.icon.replace(/\.svg$/, '')]}`;
                     });
                 }
-                templates = this.props.onlyDevices || (!this.props.onlyRooms && !this.props.onlyDevices) ? devices : null;
+                // load devices
+                templates =
+                    this.props.onlyDevices || (!this.props.onlyRooms && !this.props.onlyDevices) ? devices : null;
                 if (templates) {
-                    const offset = promises.length;
-                    templates && templates.forEach(item => {
-                        if (item.name && typeof item.name === 'object') {
-                            item.name = item.name[this.props.lang] || item.name.en || item._id;
-                        }
-                        item.name = item.name || item._id;
-                    });
+                    const offset = icons.length;
+                    templates &&
+                        templates.forEach(item => {
+                            if (item.name && typeof item.name === 'object') {
+                                item.name = item.name[this.props.lang] || item.name.en || item._id;
+                            }
+                            item.name = item.name || item._id;
+                        });
                     templates = templates.filter((item, i) => !(templates === null || templates === void 0 ? void 0 : templates.find((_item, _i) => i !== _i && _item.icon === item.icon && _item.name === item.name)));
                     templates.forEach((template, i) => {
-                        let image;
-                        try {
-                            image = require(`../assets/devices/${template.icon}`);
-                        }
-                        catch (e) {
-                            return;
-                        }
                         names[i + offset] = template.name;
-                        promises.push(Utils_1.default.getSvg(image)
-                            .then(icon => {
-                            icons[i + offset] = icon;
-                        }));
+                        icons[i + offset] =
+                            `data:image/svg+xml;base64,${devices_json_1.default[template.icon.replace(/\.svg$/, '')]}`;
                     });
                 }
-                Promise.all(promises)
-                    .then(() => this.setState({
+                this.setState({
                     icons,
                     loading: false,
                     names,
                     isAnyName: !!names.find(i => i),
-                }));
+                });
             }
             else {
                 const promises = this.props.icons.map((item, i) => {
                     let href;
                     if (typeof item === 'object') {
                         href = item.icon || item.src || item.href || '';
-                        names[i] = typeof item.name === 'object' ? item.name[this.props.lang] || item.name.en || item._id || '' : (item.name || '');
+                        names[i] =
+                            typeof item.name === 'object'
+                                ? item.name[this.props.lang] || item.name.en || item._id || ''
+                                : item.name || '';
                         if (!names[i]) {
                             const parts = href.split('.');
                             parts.pop();
@@ -2071,12 +2060,12 @@ class IconSelector extends react_1.Component {
                             icons[i] = href;
                             return Promise.resolve();
                         }
-                        return Utils_1.default.getSvg(href)
-                            .then(icon => icons[i] = icon);
+                        return Utils_1.default.getSvg(href).then(icon => (icons[i] = icon));
                     }
                     return Promise.resolve();
                 });
-                Promise.all(promises)
+                void Promise.all(promises)
+                    .catch((e) => console.error(e))
                     .then(() => this.setState({
                     icons,
                     loading: false,
@@ -2090,35 +2079,36 @@ class IconSelector extends react_1.Component {
         if (this.state.loading) {
             return react_1.default.createElement(material_1.CircularProgress, null);
         }
-        return react_1.default.createElement(react_1.default.Fragment, null,
+        return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(material_1.Button, { color: "grey", variant: "outlined", title: this.props.t('ra_Select predefined icon'), onClick: () => this.setState({ opened: true }, () => this.loadAllIcons()), style: { minWidth: 40, marginRight: 8 } }, "..."),
-            this.state.opened ? react_1.default.createElement(material_1.Dialog, { onClose: () => this.setState({ opened: false }), open: !0 },
+            this.state.opened ? (react_1.default.createElement(material_1.Dialog, { onClose: () => this.setState({ opened: false }), open: !0 },
                 react_1.default.createElement(material_1.DialogTitle, null,
                     this.props.t('ra_Select predefined icon'),
-                    this.state.isAnyName ? react_1.default.createElement(material_1.TextField, { variant: "standard", margin: "dense", style: { marginLeft: 20 }, value: this.state.filter, onChange: e => this.setState({ filter: e.target.value.toLowerCase() }), placeholder: this.props.t('ra_Filter'), InputProps: {
-                            endAdornment: this.state.filter
-                                ?
-                                    react_1.default.createElement(material_1.IconButton, { size: "small", onClick: () => this.setState({ filter: '' }) },
-                                        react_1.default.createElement(icons_material_1.Clear, null))
-                                :
-                                    undefined,
-                        } }) : null),
+                    this.state.isAnyName ? (react_1.default.createElement(material_1.TextField, { variant: "standard", margin: "dense", style: { marginLeft: 20 }, value: this.state.filter, onChange: e => this.setState({ filter: e.target.value.toLowerCase() }), placeholder: this.props.t('ra_Filter'), slotProps: {
+                            input: {
+                                endAdornment: this.state.filter ? (react_1.default.createElement(material_1.IconButton, { size: "small", onClick: () => this.setState({ filter: '' }) },
+                                    react_1.default.createElement(icons_material_1.Clear, null))) : undefined,
+                            },
+                        } })) : null),
                 react_1.default.createElement(material_1.DialogContent, null,
-                    react_1.default.createElement("div", { style: { width: '100%', textAlign: 'center' } }, this.state.icons && this.state.icons.map((icon, i) => {
-                        if (!this.state.filter || (this.state.names[i] && this.state.names[i].toLowerCase().includes(this.state.filter))) {
-                            return react_1.default.createElement(material_1.Tooltip, { title: this.state.names[i] || '', key: i, componentsProps: { popper: { sx: { pointerEvents: 'none' } } } },
-                                react_1.default.createElement(material_1.IconButton, { onClick: () => this.setState({ opened: false }, () => {
-                                        const onApply = this.props.onSelect || this.props.onChange;
-                                        if (onApply) {
-                                            onApply(icon);
-                                        }
-                                    }), size: "large" },
-                                    react_1.default.createElement(Icon_1.default, { src: icon, alt: i.toString(), style: { width: 32, height: 32, borderRadius: 5 } })));
-                        }
-                        return null;
-                    }))),
+                    react_1.default.createElement("div", { style: { width: '100%', textAlign: 'center' } }, this.state.icons &&
+                        this.state.icons.map((icon, i) => {
+                            if (!this.state.filter ||
+                                (this.state.names[i] &&
+                                    this.state.names[i].toLowerCase().includes(this.state.filter))) {
+                                return (react_1.default.createElement(material_1.Tooltip, { title: this.state.names[i] || '', key: i, slotProps: { popper: { sx: { pointerEvents: 'none' } } } },
+                                    react_1.default.createElement(material_1.IconButton, { onClick: () => this.setState({ opened: false }, () => {
+                                            const onApply = this.props.onSelect || this.props.onChange;
+                                            if (onApply) {
+                                                onApply(icon);
+                                            }
+                                        }), size: "large" },
+                                        react_1.default.createElement(Icon_1.default, { src: icon, alt: i.toString(), style: { width: 32, height: 32, borderRadius: 5 } }))));
+                            }
+                            return null;
+                        }))),
                 react_1.default.createElement(material_1.DialogActions, null,
-                    react_1.default.createElement(material_1.Button, { color: "grey", variant: "contained", onClick: () => this.setState({ opened: false }), startIcon: react_1.default.createElement(icons_material_1.Close, null) }, this.props.t('ra_Close')))) : null);
+                    react_1.default.createElement(material_1.Button, { color: "grey", variant: "contained", onClick: () => this.setState({ opened: false }), startIcon: react_1.default.createElement(icons_material_1.Close, null) }, this.props.t('ra_Close'))))) : null));
     }
 }
 exports.default = IconSelector;

package/Components/Image.d.ts

@@ -1,4 +1,5 @@
-import React, { Component } from 'react';
+import { type JSX } from 'react';
+import { Component } from 'react';
 interface ImageProps {
     color?: string;
     src?: string;
@@ -14,13 +15,16 @@ interface ImageState {
     imgError?: boolean;
     showError?: boolean;
 }
+/**
+ * A component for displaying an image.
+ */
 declare class Image extends Component<ImageProps, ImageState> {
     private svg;
     static REMOTE_SERVER: boolean;
     static REMOTE_PREFIX: string;
     constructor(props: ImageProps);
-    static getDerivedStateFromProps(props: ImageProps, state: ImageState): ImageState;
-    getSvgFromData(src: string): React.JSX.Element | null;
-    render(): React.JSX.Element;
+    static getDerivedStateFromProps(props: ImageProps, state: ImageState): Partial<ImageState> | null;
+    getSvgFromData(src: string): JSX.Element | null;
+    render(): JSX.Element | null;
 }
 export default Image;