@iobroker/adapter-react-v5 7.0.2 → 7.1.0

package/src/Components/IconPicker.tsx

@@ -1,11 +1,7 @@
 import React, { useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 
-import {
-    InputLabel,
-    FormControl,
-    IconButton,
-} from '@mui/material';
+import { InputLabel, FormControl, IconButton } from '@mui/material';
 import { Clear as ClearIcon } from '@mui/icons-material';
 
 import IconSelector from './IconSelector';
@@ -14,12 +10,12 @@ import I18n from '../i18n';
 import Utils from './Utils';
 
 const styles: Record<string, React.CSSProperties> = {
-    formContainer : {
+    formContainer: {
         display: 'flex',
         justifyContent: 'left',
         alignItems: 'center',
     },
-    formControl : {
+    formControl: {
         display: 'flex',
         padding: 24,
         flexGrow: 1000,
@@ -40,7 +36,7 @@ const styles: Record<string, React.CSSProperties> = {
         borderRadius: 10,
         padding: 4,
     },
-    formIcon : {
+    formIcon: {
         margin: 10,
         opacity: 0.6,
     },
@@ -76,74 +72,94 @@ interface IconPickerProps {
     onlyDevices?: boolean;
 }
 
-const IconPicker = (props: IconPickerProps) => {
+const IconPicker = (props: IconPickerProps): React.JSX.Element => {
     const IconCustom = props.icon;
 
-    const onDrop = useCallback((acceptedFiles: File[]) => {
-        const reader = new FileReader();
+    const onChange = props.onChange;
 
-        reader.addEventListener('load', () =>
-            props.onChange(reader.result as string), false);
+    const onDrop = useCallback(
+        (acceptedFiles: File[]) => {
+            const reader = new FileReader();
 
-        if (acceptedFiles[0]) {
-            reader.readAsDataURL(acceptedFiles[0]);
-        }
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+            reader.addEventListener('load', () => onChange(reader.result as string), false);
+
+            if (acceptedFiles[0]) {
+                reader.readAsDataURL(acceptedFiles[0]);
+            }
+        },
+        [onChange],
+    );
 
     const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
-    return <div style={styles.formContainer}>
-        {IconCustom ? <IconCustom style={styles.formIcon} /> : null}
-        <FormControl variant="standard" style={{ ...styles.formControl, padding: 3 }}>
-            <InputLabel
-                shrink
-                sx={props.customStyles?.label ? { '&.MuiInputLabel-root': props.customStyles.label } : undefined}
-                classes={{ root: props.customClasses?.label }}
+    return (
+        <div style={styles.formContainer}>
+            {IconCustom ? <IconCustom style={styles.formIcon} /> : null}
+            <FormControl
+                variant="standard"
+                style={{ ...styles.formControl, padding: 3 }}
             >
-                {props.label}
-            </InputLabel>
-            <div style={styles.formContainer}>
-                {props.value ?
-                    <div style={styles.divContainer}>
-                        <Icon
-                            style={{ ...props.previewStyle, ...(props.customStyles?.icon || undefined) }}
-                            src={props.value}
-                            className={Utils.clsx(props.previewClassName, props.customClasses?.icon)}
-                        />
-                        {!props.disabled && <IconButton
-                            style={{ verticalAlign: 'top' }}
-                            title={I18n.t('ra_Clear icon')}
-                            size="small"
-                            onClick={() => props.onChange('')}
-                        >
-                            <ClearIcon />
-                        </IconButton>}
-                    </div>
-                    :
-                    (!props.disabled && <IconSelector
-                        icons={props.icons}
-                        onlyRooms={props.onlyRooms}
-                        onlyDevices={props.onlyDevices}
-                        onSelect={(base64: string) => props.onChange(base64)}
-                        t={I18n.t}
-                        lang={I18n.getLanguage()}
-                    />)}
-
-                {!props.disabled && <div
-                    {...getRootProps()}
-                    style={{
-                        ...styles.dragField,
-                        ...(isDragActive ? { backgroundColor: 'rgba(0, 255, 0, 0.1)' } : { cursor: 'pointer' }),
-                    }}
+                <InputLabel
+                    shrink
+                    sx={props.customStyles?.label ? { '&.MuiInputLabel-root': props.customStyles.label } : undefined}
+                    classes={{ root: props.customClasses?.label }}
                 >
-                    <input {...getInputProps()} />
-                    {isDragActive ?
-                        <span style={styles.text}>{I18n.t('ra_Drop the files here...')}</span> :
-                        <span style={styles.text}>{I18n.t('ra_Drag \'n\' drop some files here, or click to select files')}</span>}
-                </div>}
-            </div>
-        </FormControl>
-    </div>;
+                    {props.label}
+                </InputLabel>
+                <div style={styles.formContainer}>
+                    {props.value ? (
+                        <div style={styles.divContainer}>
+                            <Icon
+                                style={{ ...props.previewStyle, ...(props.customStyles?.icon || undefined) }}
+                                src={props.value}
+                                className={Utils.clsx(props.previewClassName, props.customClasses?.icon)}
+                            />
+                            {!props.disabled && (
+                                <IconButton
+                                    style={{ verticalAlign: 'top' }}
+                                    title={I18n.t('ra_Clear icon')}
+                                    size="small"
+                                    onClick={() => props.onChange('')}
+                                >
+                                    <ClearIcon />
+                                </IconButton>
+                            )}
+                        </div>
+                    ) : (
+                        !props.disabled && (
+                            <IconSelector
+                                icons={props.icons}
+                                onlyRooms={props.onlyRooms}
+                                onlyDevices={props.onlyDevices}
+                                onSelect={(base64: string) => props.onChange(base64)}
+                                t={I18n.t}
+                                lang={I18n.getLanguage()}
+                            />
+                        )
+                    )}
+
+                    {!props.disabled && (
+                        <div
+                            {...getRootProps()}
+                            style={{
+                                ...styles.dragField,
+                                ...(isDragActive ? { backgroundColor: 'rgba(0, 255, 0, 0.1)' } : { cursor: 'pointer' }),
+                            }}
+                        >
+                            <input {...getInputProps()} />
+                            {isDragActive ? (
+                                <span style={styles.text}>{I18n.t('ra_Drop the files here...')}</span>
+                            ) : (
+                                <span style={styles.text}>
+                                    {I18n.t("ra_Drag 'n' drop some files here, or click to select files")}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </FormControl>
+        </div>
+    );
 };
 
 export default IconPicker;

package/src/Components/IconSelector.tsx

@@ -12,14 +12,13 @@ import {
     CircularProgress,
 } from '@mui/material';
 
-import {
-    Close as CloseIcon,
-    Clear as ClearIcon,
-} from '@mui/icons-material';
+import { Close as CloseIcon, Clear as ClearIcon } from '@mui/icons-material';
 
 import Icon from './Icon';
 import Utils from './Utils';
-import { Translate } from '../types';
+import devicesIcons from '../assets/devices.json';
+import roomsIcons from '../assets/rooms.json';
+import { type Translate } from '../types';
 
 // import devices from '../assets/devices/list.json';
 const devices: { _id: string; name: ioBroker.StringOrTranslated; icon: string }[] = [
@@ -45,7 +44,7 @@ const devices: { _id: string; name: ioBroker.StringOrTranslated; icon: string }[
             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',
@@ -141,7 +140,7 @@ const devices: { _id: string; name: ioBroker.StringOrTranslated; icon: string }[
             en: 'Computer',
             ru: 'Компьютер',
             de: 'Rechner',
-            fr: 'L\'Ordinateur',
+            fr: "L'Ordinateur",
             it: 'Computer',
             nl: 'Computer',
             pl: 'Komputer',
@@ -189,7 +188,7 @@ const devices: { _id: string; name: ioBroker.StringOrTranslated; icon: string }[
             en: 'Power Consumption',
             ru: 'Потребляемая мощность',
             de: 'Stromverbrauch',
-            fr: 'Consommation D\'Énergie',
+            fr: "Consommation D'Énergie",
             it: 'Consumo Di Energia',
             nl: 'Energieverbruik',
             pl: 'Pobór Energii',
@@ -765,7 +764,7 @@ const devices: { _id: string; name: ioBroker.StringOrTranslated; icon: string }[
             en: 'Power Consumption',
             ru: 'Потребляемая мощность',
             de: 'Stromverbrauch',
-            fr: 'Consommation D\'Énergie',
+            fr: "Consommation D'Énergie",
             it: 'Consumo Di Energia',
             nl: 'Energieverbruik',
             pl: 'Pobór Energii',
@@ -957,7 +956,7 @@ const devices: { _id: string; name: ioBroker.StringOrTranslated; icon: string }[
             en: 'Water',
             ru: 'Вода',
             de: 'Wasser',
-            fr: 'L\'Eau',
+            fr: "L'Eau",
             it: 'Acqua',
             nl: 'Water',
             pl: 'Woda',
@@ -989,8 +988,8 @@ const devices: { _id: string; name: ioBroker.StringOrTranslated; icon: string }[
             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',
@@ -1106,7 +1105,7 @@ const rooms: { _id: string; name: ioBroker.StringOrTranslated; icon: string }[]
             ru: 'На Улице',
             de: 'Außenbereich',
             fr: 'En Plein Air',
-            it: 'All\'Aperto',
+            it: "All'Aperto",
             nl: 'Buitenshuis',
             pl: 'Na Dworze',
             pt: 'Ao Ar Livre',
@@ -1361,7 +1360,7 @@ const rooms: { _id: string; name: ioBroker.StringOrTranslated; icon: string }[]
             en: 'Summer House',
             ru: 'Дача',
             de: 'Gartenhaus',
-            fr: 'Maison D\'Été',
+            fr: "Maison D'Été",
             it: 'Casa Estiva',
             nl: 'Zomerhuis',
             pl: 'Domek Letniskowy',
@@ -1393,7 +1392,7 @@ const rooms: { _id: string; name: ioBroker.StringOrTranslated; icon: string }[]
             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',
@@ -1729,7 +1728,7 @@ const rooms: { _id: string; name: ioBroker.StringOrTranslated; icon: string }[]
             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',
@@ -1777,7 +1776,7 @@ const rooms: { _id: string; name: ioBroker.StringOrTranslated; icon: string }[]
             en: 'Stairwell',
             ru: 'Лестничная клетка',
             de: 'Treppenhaus',
-            fr: 'Cage D\'Escalier',
+            fr: "Cage D'Escalier",
             it: 'Tromba Delle Scale',
             nl: 'Trappenhuis',
             pl: 'Klatka Schodowa',
@@ -1993,6 +1992,7 @@ interface IconSelectorState {
 class IconSelector extends Component<IconSelectorProps, IconSelectorState> {
     constructor(props: IconSelectorProps) {
         super(props);
+
         this.state = {
             opened: false,
             names: [],
@@ -2003,7 +2003,7 @@ class IconSelector extends Component<IconSelectorProps, IconSelectorState> {
         };
     }
 
-    loadAllIcons() {
+    loadAllIcons(): void {
         if (this.state.loading || this.state.icons) {
             return;
         }
@@ -2012,9 +2012,10 @@ class IconSelector extends Component<IconSelectorProps, IconSelectorState> {
             const names: string[] = [];
 
             if (!this.props.icons) {
-                let templates = this.props.onlyRooms || (!this.props.onlyRooms && !this.props.onlyDevices) ? rooms : null;
+                // load rooms
+                let templates =
+                    this.props.onlyRooms || (!this.props.onlyRooms && !this.props.onlyDevices) ? rooms : null;
 
-                const promises: Promise<void>[] = [];
                 if (templates) {
                     templates.forEach(item => {
                         if (item.name && typeof item.name === 'object') {
@@ -2023,67 +2024,61 @@ class IconSelector extends Component<IconSelectorProps, IconSelectorState> {
                         item.name = item.name || item._id;
                     });
 
-                    templates = templates.filter((item, i) => !templates?.find((_item, _i) => i !== _i && _item.icon === item.icon && _item.name === item.name));
+                    templates = templates.filter(
+                        (item, i) =>
+                            !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 as string;
-
-                        promises.push(Utils.getSvg(image)
-                            .then(icon => {
-                                icons[i] = icon;
-                            }));
+                        icons[i] =
+                            `data:image/svg+xml;base64,${(roomsIcons as Record<string, string>)[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?.find((_item, _i) => i !== _i && _item.icon === item.icon && _item.name === item.name));
+                    templates = templates.filter(
+                        (item, i) =>
+                            !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 as string;
-
-                        promises.push(Utils.getSvg(image)
-                            .then(icon => {
-                                icons[i + offset] = icon;
-                            }));
+                        icons[i + offset] =
+                            `data:image/svg+xml;base64,${(devicesIcons as Record<string, string>)[template.icon.replace(/\.svg$/, '')]}`;
                     });
                 }
-                Promise.all(promises)
-                    .then(() =>
-                        this.setState({
-                            icons,
-                            loading: false,
-                            names,
-                            isAnyName: !!names.find(i => i),
-                        }));
+                this.setState({
+                    icons,
+                    loading: false,
+                    names,
+                    isAnyName: !!names.find(i => i),
+                });
             } else {
                 const promises = this.props.icons.map((item, i) => {
                     let href: string;
                     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();
@@ -2098,104 +2093,127 @@ class IconSelector extends Component<IconSelectorProps, IconSelectorState> {
                             icons[i] = href;
                             return Promise.resolve();
                         }
-                        return Utils.getSvg(href)
-                            .then(icon =>
-                                icons[i] = icon);
+                        return Utils.getSvg(href).then(icon => (icons[i] = icon));
                     }
 
                     return Promise.resolve();
                 });
 
-                Promise.all(promises)
+                void Promise.all(promises)
+                    .catch((e: Error) => console.error(e))
                     .then(() =>
                         this.setState({
                             icons,
                             loading: false,
                             names,
                             isAnyName: !!names.find(i => i),
-                        }));
+                        }),
+                    );
             }
         });
     }
 
-    render() {
+    render(): React.JSX.Element {
         if (this.state.loading) {
             return <CircularProgress />;
         }
 
-        return <>
-            <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 }}
-            >
-                ...
-            </Button>
-            {this.state.opened ? <Dialog onClose={() => this.setState({ opened: false })} open={!0}>
-                <DialogTitle>
-                    {this.props.t('ra_Select predefined icon')}
-                    {this.state.isAnyName ? <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
-                                ?
-                                <IconButton
-                                    size="small"
-                                    onClick={() => this.setState({ filter: '' })}
-                                >
-                                    <ClearIcon />
-                                </IconButton>
-                                :
-                                undefined,
-                        }}
-                    /> : null}
-                </DialogTitle>
-                <DialogContent>
-                    <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 <Tooltip
-                                    title={this.state.names[i] || ''}
-                                    key={i}
-                                    componentsProps={{ popper: { sx: { pointerEvents: 'none' } } }}
-                                >
-                                    <IconButton
-                                        onClick={() => this.setState({ opened: false }, () => {
-                                            const onApply: ((_icon: string) => void) | undefined = this.props.onSelect || this.props.onChange;
-                                            if (onApply) {
-                                                onApply(icon);
-                                            }
-                                        })}
-                                        size="large"
-                                    >
-                                        <Icon src={icon} alt={i.toString()} style={{ width: 32, height: 32, borderRadius: 5 }} />
-                                    </IconButton>
-                                </Tooltip>;
-                            }
-
-                            return null;
-                        })}
-                    </div>
-                </DialogContent>
-                <DialogActions>
-                    <Button
-                        color="grey"
-                        variant="contained"
-                        onClick={() => this.setState({ opened: false })}
-                        startIcon={<CloseIcon />}
+        return (
+            <>
+                <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 }}
+                >
+                    ...
+                </Button>
+                {this.state.opened ? (
+                    <Dialog
+                        onClose={() => this.setState({ opened: false })}
+                        open={!0}
                     >
-                        {this.props.t('ra_Close')}
-                    </Button>
-                </DialogActions>
-            </Dialog> : null}
-        </>;
+                        <DialogTitle>
+                            {this.props.t('ra_Select predefined icon')}
+                            {this.state.isAnyName ? (
+                                <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 ? (
+                                                <IconButton
+                                                    size="small"
+                                                    onClick={() => this.setState({ filter: '' })}
+                                                >
+                                                    <ClearIcon />
+                                                </IconButton>
+                                            ) : undefined,
+                                        },
+                                    }}
+                                />
+                            ) : null}
+                        </DialogTitle>
+                        <DialogContent>
+                            <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 (
+                                                <Tooltip
+                                                    title={this.state.names[i] || ''}
+                                                    key={i}
+                                                    slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}
+                                                >
+                                                    <IconButton
+                                                        onClick={() =>
+                                                            this.setState({ opened: false }, () => {
+                                                                const onApply: ((_icon: string) => void) | undefined =
+                                                                    this.props.onSelect || this.props.onChange;
+                                                                if (onApply) {
+                                                                    onApply(icon);
+                                                                }
+                                                            })
+                                                        }
+                                                        size="large"
+                                                    >
+                                                        <Icon
+                                                            src={icon}
+                                                            alt={i.toString()}
+                                                            style={{ width: 32, height: 32, borderRadius: 5 }}
+                                                        />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            );
+                                        }
+
+                                        return null;
+                                    })}
+                            </div>
+                        </DialogContent>
+                        <DialogActions>
+                            <Button
+                                color="grey"
+                                variant="contained"
+                                onClick={() => this.setState({ opened: false })}
+                                startIcon={<CloseIcon />}
+                            >
+                                {this.props.t('ra_Close')}
+                            </Button>
+                        </DialogActions>
+                    </Dialog>
+                ) : null}
+            </>
+        );
     }
 }