@iobroker/adapter-react-v5 4.13.1 → 4.13.3

package/Components/JsonConfigComponent/DeviceManager/DeviceList.js

@@ -0,0 +1,226 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const icons_material_1 = require("@mui/icons-material");
+const i18n_1 = __importDefault(require("../../../i18n"));
+const DeviceCard_1 = __importDefault(require("./DeviceCard"));
+const Utils_1 = require("./Utils");
+const Communication_1 = __importDefault(require("./Communication"));
+const InstanceActionButton_1 = __importDefault(require("./InstanceActionButton"));
+const de_json_1 = __importDefault(require("./i18n/de.json"));
+const en_json_1 = __importDefault(require("./i18n/en.json"));
+const ru_json_1 = __importDefault(require("./i18n/ru.json"));
+const pt_json_1 = __importDefault(require("./i18n/pt.json"));
+const nl_json_1 = __importDefault(require("./i18n/nl.json"));
+const fr_json_1 = __importDefault(require("./i18n/fr.json"));
+const it_json_1 = __importDefault(require("./i18n/it.json"));
+const es_json_1 = __importDefault(require("./i18n/es.json"));
+const pl_json_1 = __importDefault(require("./i18n/pl.json"));
+const uk_json_1 = __importDefault(require("./i18n/uk.json"));
+const zh_cn_json_1 = __importDefault(require("./i18n/zh-cn.json"));
+/**
+ * Device List Component
+ * @param {object} params - Component parameters
+ * @param {object} params.socket - socket object
+ * @param {string} params.selectedInstance - Selected instance
+ * @param {string} params.uploadImagesToInstance - Instance to upload images to
+ * @param {string} params.filter - Filter
+ * @param {string} params.empbedded - true if this list used with multiple instances and false if only with one
+ * @param {string} params.title - Title in appbar (only in non-embedded mode)
+ * @param {string} params.style - Style of devices list
+ * @returns {*[]} - Array of device cards
+ */
+class DeviceList extends Communication_1.default {
+    constructor(props) {
+        super(props);
+        this.aliveHandler = (id, state) => {
+            if (id === `system.adapter.${this.props.selectedInstance}.alive`) {
+                const alive = !!(state === null || state === void 0 ? void 0 : state.val);
+                if (alive !== this.state.alive) {
+                    this.setState({ alive }, () => {
+                        if (alive) {
+                            this.componentDidMount().catch(console.error);
+                        }
+                    });
+                }
+            }
+        };
+        if (!DeviceList.i18nInitialized) {
+            DeviceList.i18nInitialized = true;
+            // @ts-expect-error
+            i18n_1.default.extendTranslations({
+                en: en_json_1.default,
+                de: de_json_1.default,
+                ru: ru_json_1.default,
+                pt: pt_json_1.default,
+                nl: nl_json_1.default,
+                fr: fr_json_1.default,
+                it: it_json_1.default,
+                es: es_json_1.default,
+                pl: pl_json_1.default,
+                uk: uk_json_1.default,
+                'zh-cn': zh_cn_json_1.default,
+            });
+        }
+        Object.assign(this.state, {
+            devices: [],
+            filteredDevices: [],
+            filter: '',
+            instanceInfo: null,
+            loading: null,
+            alive: null,
+        });
+        this.lastPropsFilter = this.props.filter;
+        this.lastInstance = this.props.selectedInstance;
+        this.filterTimeout = null;
+        this.language = i18n_1.default.getLanguage();
+    }
+    async componentDidMount() {
+        let alive = false;
+        if (this.state.alive === null) {
+            try {
+                // check if instance is alive
+                const stateAlive = await this.props.socket.getState(`system.adapter.${this.props.selectedInstance}.alive`);
+                if (stateAlive === null || stateAlive === void 0 ? void 0 : stateAlive.val) {
+                    alive = true;
+                }
+            }
+            catch (error) {
+                console.error(error);
+            }
+            this.setState({ alive }, () => this.props.socket.subscribeState(`system.adapter.${this.props.selectedInstance}.alive`, this.aliveHandler));
+            if (!alive) {
+                return;
+            }
+        }
+        else {
+            alive = this.state.alive;
+        }
+        if (!this.props.embedded && alive) {
+            try {
+                const instanceInfo = await this.loadInstanceInfos();
+                this.setState({ instanceInfo });
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        if (alive) {
+            this.loadData();
+        }
+    }
+    componentWillUnmount() {
+        this.props.socket.unsubscribeState(`system.adapter.${this.props.selectedInstance}.alive`, this.aliveHandler);
+    }
+    /**
+    * Load devices
+    */
+    loadData() {
+        this.setState({ loading: true }, async () => {
+            console.log(`Loading devices for ${this.props.selectedInstance}...`);
+            let devices;
+            try {
+                devices = await this.loadDevices();
+                if (!devices || !Array.isArray(devices)) {
+                    console.error(`Message returned from sendTo() doesn't look like one from DeviceManagement, did you accidentally handle the message in your adapter? ${JSON.stringify(devices)}`);
+                    devices = [];
+                }
+            }
+            catch (error) {
+                console.error(error);
+                devices = [];
+            }
+            this.setState({ devices, loading: false }, () => this.applyFilter());
+        });
+    }
+    getText(text) {
+        if (typeof text === 'object') {
+            return text[this.language] || text.en;
+        }
+        return text;
+    }
+    applyFilter() {
+        const filter = this.props.embedded ? this.props.filter : this.state.filter;
+        // filter devices name
+        if (filter) {
+            const filteredDevices = this.state.devices.filter(device => this.getText(device.name).toLowerCase().includes(filter.toLowerCase()));
+            this.setState({ filteredDevices });
+        }
+        else {
+            this.setState({ filteredDevices: this.state.devices });
+        }
+    }
+    handleFilterChange(filter) {
+        this.setState({ filter }, () => {
+            this.filterTimeout && clearTimeout(this.filterTimeout);
+            this.filterTimeout = setTimeout(() => {
+                this.filterTimeout = null;
+                this.applyFilter();
+            }, 250);
+        });
+    }
+    renderContent() {
+        var _a, _b;
+        /** @type {object} */
+        const emptyStyle = {
+            padding: 25,
+        };
+        if (this.props.embedded && this.lastPropsFilter !== this.props.filter) {
+            this.lastPropsFilter = this.props.filter;
+            setTimeout(() => this.applyFilter(), 50);
+        }
+        if (this.props.embedded && this.lastInstance !== this.props.selectedInstance) {
+            this.lastInstance = this.props.selectedInstance;
+            setTimeout(() => this.loadData(), 50);
+        }
+        let list;
+        if (!this.props.embedded && !this.state.alive) {
+            list = react_1.default.createElement("div", { style: emptyStyle },
+                react_1.default.createElement("span", null, (0, Utils_1.getTranslation)('instanceNotAlive')));
+        }
+        else if (!this.state.devices.length && this.props.selectedInstance) {
+            list = react_1.default.createElement("div", { style: emptyStyle },
+                react_1.default.createElement("span", null, (0, Utils_1.getTranslation)('noDevicesFoundText')));
+        }
+        else if (this.state.devices.length && !this.state.filteredDevices.length) {
+            list = react_1.default.createElement("div", { style: emptyStyle },
+                react_1.default.createElement("span", null, (0, Utils_1.getTranslation)('allDevicesFilteredOut')));
+        }
+        else {
+            list = this.state.filteredDevices.map(device => react_1.default.createElement(DeviceCard_1.default, { alive: !!this.state.alive, key: device.id, id: device.id, title: this.getText(device.name), device: device, instanceId: this.props.selectedInstance, uploadImagesToInstance: this.props.uploadImagesToInstance, deviceHandler: this.deviceHandler, controlHandler: this.controlHandler, controlStateHandler: this.controlStateHandler, socket: this.props.socket }));
+        }
+        if (this.props.embedded) {
+            return react_1.default.createElement(react_1.default.Fragment, null,
+                this.state.loading ? react_1.default.createElement(material_1.LinearProgress, { style: { width: '100%' } }) : null,
+                list);
+        }
+        return react_1.default.createElement("div", { style: { width: '100%', height: '100%', overflow: 'hidden' } },
+            react_1.default.createElement(material_1.Toolbar, { variant: "dense", style: { backgroundColor: '#777', display: 'flex' } },
+                this.props.title,
+                this.props.selectedInstance ? react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)('refreshTooltip') },
+                    react_1.default.createElement("span", null,
+                        react_1.default.createElement(material_1.IconButton, { onClick: () => this.loadData(), disabled: !this.state.alive, size: "small" },
+                            react_1.default.createElement(icons_material_1.Refresh, null)))) : null,
+                this.state.alive && ((_b = (_a = this.state.instanceInfo) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.length) ? react_1.default.createElement("div", { style: { marginLeft: 20 } }, this.state.instanceInfo.actions.map(action => react_1.default.createElement(InstanceActionButton_1.default, { key: action.id, action: action, instanceHandler: this.instanceHandler }))) : null,
+                react_1.default.createElement("div", { style: { flexGrow: 1 } }),
+                this.state.alive ? react_1.default.createElement(material_1.TextField, { variant: "standard", style: { width: 200 }, size: "small", label: (0, Utils_1.getTranslation)('filterLabelText'), onChange: e => this.handleFilterChange(e.target.value), value: this.state.filter, autoComplete: "off", inputProps: {
+                        autoComplete: 'new-password',
+                        form: { autoComplete: 'off' },
+                    }, 
+                    // eslint-disable-next-line react/jsx-no-duplicate-props
+                    InputProps: {
+                        endAdornment: this.state.filter ? react_1.default.createElement(material_1.InputAdornment, { position: "end" },
+                            react_1.default.createElement(material_1.IconButton, { onClick: () => this.handleFilterChange(''), edge: "end" },
+                                react_1.default.createElement(icons_material_1.Clear, null))) : null,
+                    } }) : null),
+            react_1.default.createElement("div", { style: Object.assign({ width: '100%', height: 'calc(100% - 56px)', marginTop: 8, overflow: 'auto' }, this.props.style) },
+                this.state.loading ? react_1.default.createElement(material_1.LinearProgress, { style: { width: '100%' } }) : null,
+                list));
+    }
+}
+DeviceList.i18nInitialized = false;
+exports.default = DeviceList;

package/Components/JsonConfigComponent/DeviceManager/DeviceStatus.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface DeviceStatusProps {
+    status: any;
+}
+/**
+ * Device Status component
+ * @param {object} params - Parameters
+ * @param {object} params.status - Status object, e.g. { connection: 'connected', battery: 100, rssi: -50 }
+ * @returns {React.JSX.Element|null}
+ * @constructor
+ */
+export default function DeviceStatus(params: DeviceStatusProps): React.JSX.Element | null;
+export {};

package/Components/JsonConfigComponent/DeviceManager/DeviceStatus.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const icons_material_1 = require("@mui/icons-material");
+const Utils_1 = require("./Utils");
+/**
+ * Device Status component
+ * @param {object} params - Parameters
+ * @param {object} params.status - Status object, e.g. { connection: 'connected', battery: 100, rssi: -50 }
+ * @returns {React.JSX.Element|null}
+ * @constructor
+ */
+function DeviceStatus(params) {
+    if (!params.status) {
+        return null;
+    }
+    let status;
+    if (typeof params.status === 'string') {
+        status = {
+            connection: params.status,
+        };
+    }
+    else {
+        status = params.status;
+    }
+    /** @type {object} */
+    const iconStyleOK = {
+        fill: '#00ac00',
+    };
+    /** @type {object} */
+    const iconStyleNotOK = {
+        fill: '#ff0000',
+    };
+    /** @type {object} */
+    const iconStyleWarning = {
+        fill: '#ff9900',
+    };
+    /** @type {object} */
+    let batteryIconTooltip;
+    if (typeof status.battery === 'number') {
+        if (status.battery >= 96 && status.battery <= 100) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.BatteryFull, { style: iconStyleOK });
+        }
+        else if (status.battery >= 90 && status.battery <= 95) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.Battery90, { style: iconStyleOK });
+        }
+        else if (status.battery >= 80 && status.battery <= 89) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.Battery80, { style: iconStyleOK });
+        }
+        else if (status.battery >= 60 && status.battery <= 79) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.Battery60, { style: iconStyleOK });
+        }
+        else if (status.battery >= 50 && status.battery <= 59) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.Battery50, { style: iconStyleOK });
+        }
+        else if (status.battery >= 30 && status.battery <= 49) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.Battery30, { style: iconStyleOK });
+        }
+        else if (status.battery >= 20 && status.battery <= 29) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.Battery20, { style: iconStyleNotOK });
+        }
+        else {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.BatteryAlert, { style: iconStyleNotOK });
+        }
+    }
+    return react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+        status.connection === 'connected' && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)('connectedIconTooltip') },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                    react_1.default.createElement(icons_material_1.Link, { style: iconStyleOK })))),
+        status.connection === 'disconnected' && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)('disconnectedIconTooltip') },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                    react_1.default.createElement(icons_material_1.LinkOff, { style: iconStyleNotOK })))),
+        status.rssi && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement(material_1.Tooltip, { title: "RSSI" },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                    react_1.default.createElement(icons_material_1.NetworkCheck, null),
+                    react_1.default.createElement("p", { style: { fontSize: 'small', margin: 0 } }, status.rssi)))),
+        typeof status.battery === 'number' && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)('batteryTooltip') },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                    batteryIconTooltip,
+                    react_1.default.createElement("p", { style: { fontSize: 'small', margin: 0 } },
+                        status.battery,
+                        "%")))),
+        typeof status.battery === 'string' && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)('batteryTooltip') },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                    status.battery === 'charging' ? react_1.default.createElement(icons_material_1.BatteryCharging50, null) : react_1.default.createElement(icons_material_1.BatteryFull, null),
+                    status.battery !== 'charging' ? (status.battery.includes('V') || status.battery.includes('mV') ?
+                        react_1.default.createElement("p", { style: { fontSize: 'small', margin: 0 } }, status.battery) :
+                        react_1.default.createElement("p", { style: { fontSize: 'small', margin: 0 } },
+                            react_1.default.createElement("span", { style: { marginRight: 4 } }, status.battery),
+                            "mV")) : null))),
+        typeof status.battery === 'boolean' && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)('batteryTooltip') },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, status.battery ? react_1.default.createElement(icons_material_1.BatteryFull, { style: iconStyleOK }) :
+                    react_1.default.createElement(icons_material_1.BatteryAlert, { style: iconStyleNotOK })))),
+        status.warning && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, typeof status.warning === 'string' || typeof status.warning === 'object' ?
+            react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)(status.warning) },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                    react_1.default.createElement(icons_material_1.Warning, { style: iconStyleWarning }))) :
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                react_1.default.createElement(icons_material_1.Warning, { style: iconStyleWarning }))));
+}
+exports.default = DeviceStatus;

package/Components/JsonConfigComponent/DeviceManager/InstanceActionButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface InstanceActionButtonProps {
+    action: any;
+    instanceHandler: (action: any) => () => void;
+}
+export default function InstanceActionButton(params: InstanceActionButtonProps): React.JSX.Element | null;
+export {};

package/Components/JsonConfigComponent/DeviceManager/InstanceActionButton.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const TooltipButton_1 = __importDefault(require("./TooltipButton"));
+const Utils_1 = require("./Utils");
+function InstanceActionButton(params) {
+    const { action, instanceHandler } = params;
+    const tooltip = (0, Utils_1.getTranslation)((action === null || action === void 0 ? void 0 : action.description) ? action.description : '');
+    const title = (0, Utils_1.getTranslation)((action === null || action === void 0 ? void 0 : action.title) ? action.title : '');
+    const icon = (0, Utils_1.renderIcon)(action);
+    return react_1.default.createElement(TooltipButton_1.default, { tooltip: tooltip, label: title, disabled: action.disabled, Icon: icon, onClick: instanceHandler(action) });
+}
+exports.default = InstanceActionButton;

package/Components/JsonConfigComponent/DeviceManager/JsonConfig.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Connection } from '@iobroker/socket-client';
+interface JsonConfigProps {
+    instanceId: string;
+    socket: Connection;
+    schema: Record<string, any>;
+    data: Record<string, any>;
+    onChange: (data: Record<string, any>) => void;
+}
+export default function JsonConfig(props: JsonConfigProps): React.JSX.Element | null;
+export {};

package/Components/JsonConfigComponent/DeviceManager/JsonConfig.js

@@ -0,0 +1,94 @@
+"use strict";
+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;
+});
+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 JsonConfigComponent_1 = __importDefault(require("../../JsonConfigComponent"));
+function JsonConfig(props) {
+    const { instanceId, socket, schema, data, onChange, } = props;
+    console.log('JsonConfig', props);
+    const [error, setError] = (0, react_1.useState)();
+    if (schema === undefined) {
+        return null;
+    }
+    const [adapterName, instance] = instanceId.split('.', 2);
+    return react_1.default.createElement(react_1.default.Fragment, null,
+        error && react_1.default.createElement("div", null, error),
+        react_1.default.createElement(JsonConfigComponent_1.default, { socket: socket, adapterName: adapterName, instance: parseInt(instance), schema: schema, data: data, onError: setError, onChange: _data => onChange(_data), embedded: true }));
+    /*
+    JSON adapter config:
+            className={classes.scroll}
+            socket={socket}
+            theme={this.props.theme}
+            themeName={this.props.themeName}
+            themeType={this.props.themeType}
+            adapterName={this.props.adapterName}
+            instance={this.props.instance}
+            isFloatComma={this.props.isFloatComma}
+            dateFormat={this.props.dateFormat}
+            schema={this.state.schema}
+            common={this.state.common}
+            data={this.state.data}
+            updateData={this.state.updateData}
+            onError={(error) => this.setState({ error })}
+            onChange={(data, changed) => this.setState({ data, changed })}
+            customs={{ configCustomEasyAccess: ConfigCustomEasyAccess }}
+    Object custom:
+            instanceObj={instanceObj}
+            customObj={customObj}
+            custom={true}
+            className={ '' }
+            adapterName={adapter}
+            instance={parseInt(instance.split('.').pop(), 10) || 0}
+            socket={this.props.socket}
+            theme={this.props.theme}
+            themeName={this.props.themeName}
+            themeType={this.props.themeType}
+            multiEdit={this.props.objectIDs.length > 1}
+
+            schema={this.jsonConfigs[adapter].json}
+            data={data}
+            onError={error =>
+                this.setState({error}, () => this.props.onError && this.props.onError(error))}
+            onValueChange={(attr, value) => {
+                console.log(attr + ' => ' + value);
+                const newValues = JSON.parse(JSON.stringify(this.state.newValues));
+                newValues[instance] = newValues[instance] || {};
+                if (this.commonConfig[instance][attr] === value) {
+                    delete newValues[instance][attr];
+                    if (!Object.keys(newValues[instance]).length) {
+                        delete newValues[instance];
+                    }
+                } else {
+                    newValues[instance][attr] = value;
+                }
+                this.setState({newValues, hasChanges: this.isChanged(newValues)}, () =>
+                    this.props.onChange && this.props.onChange(this.state.hasChanges));
+            }}
+    */
+}
+exports.default = JsonConfig;

package/Components/JsonConfigComponent/DeviceManager/TooltipButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface TooltipButtonProps {
+    tooltip?: string;
+    label?: string;
+    disabled?: boolean;
+    Icon: React.JSX.Element | null;
+    onClick?: () => void;
+}
+export default function TooltipButton(props: TooltipButtonProps): React.JSX.Element;
+export {};

package/Components/JsonConfigComponent/DeviceManager/TooltipButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+function TooltipButton(props) {
+    const { tooltip, label, disabled, Icon, onClick } = props;
+    const text = !!label && react_1.default.createElement(material_1.Typography, { variant: "button", style: { marginLeft: 4 } }, label);
+    if (tooltip) {
+        return react_1.default.createElement(material_1.Tooltip, { title: tooltip },
+            react_1.default.createElement("span", null,
+                react_1.default.createElement(material_1.IconButton, { onClick: onClick, disabled: disabled, size: "small" },
+                    Icon,
+                    text)));
+    }
+    return react_1.default.createElement(material_1.IconButton, { onClick: onClick, disabled: disabled, size: "small" },
+        Icon,
+        text);
+}
+exports.default = TooltipButton;

package/Components/JsonConfigComponent/DeviceManager/Utils.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ControlBase } from '@iobroker/dm-utils/build/types/base';
+export declare function renderIcon(action: ControlBase, colors?: {
+    primary: string;
+    secondary: string;
+}, value?: string | number | boolean | null): React.JSX.Element | null;
+/**
+ * Get Translation
+ * @param {string | object} text - Text to translate
+ * @returns {string}
+ */
+export declare function getTranslation(text: ioBroker.StringOrTranslated): string;