@iobroker/adapter-react-v5 7.0.2 → 7.1.1

package/Components/TreeTable.js

@@ -53,7 +53,7 @@ function setAttr(obj, attr, value) {
         attr = attr.split('.');
     }
     if (attr.length === 1) {
-        return obj[attr[0]] = value;
+        return (obj[attr[0]] = value);
     }
     const name = attr.shift();
     if (obj[name] === null || obj[name] === undefined) {
@@ -191,7 +191,7 @@ class TreeTable extends react_1.Component {
         try {
             opened = JSON.parse(opened) || [];
         }
-        catch (e) {
+        catch (_c) {
             opened = [];
         }
         if (!Array.isArray(opened)) {
@@ -270,14 +270,21 @@ class TreeTable extends react_1.Component {
         this.setState({ editData });
     }
     renderCellEditSelect(col, val) {
-        return react_1.default.createElement(material_1.Select, { variant: "standard", onChange: e => this.onChange(col, val, e.target.value), value: (this.state.editData && this.state.editData[col.field]) || val }, col.lookup && Object.keys(col.lookup)
-            .map((v, i) => { var _c; return react_1.default.createElement(material_1.MenuItem, { key: i, value: v }, (_c = col.lookup) === null || _c === void 0 ? void 0 : _c[v]); }));
+        return (react_1.default.createElement(material_1.Select, { variant: "standard", onChange: e => this.onChange(col, val, e.target.value), value: (this.state.editData && this.state.editData[col.field]) || val }, col.lookup &&
+            Object.keys(col.lookup).map((v, i) => {
+                var _c;
+                return (react_1.default.createElement(material_1.MenuItem, { key: i, value: v }, (_c = col.lookup) === null || _c === void 0 ? void 0 : _c[v]));
+            })));
     }
     renderCellEditString(col, val) {
-        return react_1.default.createElement(material_1.TextField, { variant: "standard", style: styles.fieldEdit, fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => this.onChange(col, val, e.target.value) });
+        return (react_1.default.createElement(material_1.TextField, { variant: "standard", style: styles.fieldEdit, fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined
+                ? this.state.editData[col.field]
+                : val, onChange: e => this.onChange(col, val, e.target.value) }));
     }
     renderCellEditNumber(col, val) {
-        return react_1.default.createElement(material_1.TextField, { variant: "standard", style: styles.fieldEdit, type: "number", fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => this.onChange(col, val, e.target.value) });
+        return (react_1.default.createElement(material_1.TextField, { variant: "standard", style: styles.fieldEdit, type: "number", fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined
+                ? this.state.editData[col.field]
+                : val, onChange: e => this.onChange(col, val, e.target.value) }));
     }
     renderCellEditCustom(col, val, item) {
         const EditComponent = col.editComponent;
@@ -287,49 +294,53 @@ class TreeTable extends react_1.Component {
             item = JSON.parse(JSON.stringify(item));
             item[col.field] = val;
         }
-        return EditComponent ? react_1.default.createElement(EditComponent, { value: val, rowData: item, onChange: (newVal) => this.onChange(col, val, newVal) }) : null;
+        return EditComponent ? (react_1.default.createElement(EditComponent, { value: val, rowData: item, onChange: (newVal) => this.onChange(col, val, newVal) })) : null;
     }
     renderCellEditBoolean(col, val) {
-        return react_1.default.createElement(material_1.Checkbox, { checked: this.state.editData && this.state.editData[col.field] !== undefined ? !!this.state.editData[col.field] : !!val, onChange: e => this.onChange(col, !!val, e.target.checked), inputProps: { 'aria-label': 'checkbox' } });
+        return (react_1.default.createElement(material_1.Checkbox, { checked: this.state.editData && this.state.editData[col.field] !== undefined
+                ? !!this.state.editData[col.field]
+                : !!val, onChange: e => this.onChange(col, !!val, e.target.checked), inputProps: { 'aria-label': 'checkbox' } }));
     }
     renderSelectColorDialog() {
-        return react_1.default.createElement(material_1.Dialog, { sx: {
+        return (react_1.default.createElement(material_1.Dialog, { sx: {
                 '& .MuiPaper-root': styles.root,
                 '& .MuiPaper-paper': styles.paper,
             }, onClose: () => {
                 this.selectCallback = null;
                 this.setState({ showSelectColor: false });
             }, open: this.state.showSelectColor },
-            react_1.default.createElement(react_colorful_1.HexColorPicker, { color: this.state.selectIdValue, onChange: color => this.setState({ selectIdValue: color }, () => this.selectCallback && this.selectCallback(color)) }));
+            react_1.default.createElement(react_colorful_1.HexColorPicker, { color: this.state.selectIdValue, onChange: color => this.setState({ selectIdValue: color }, () => this.selectCallback && this.selectCallback(color)) })));
     }
     renderCellEditColor(col, val) {
         const _val = this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val;
-        return react_1.default.createElement("div", { style: styles.fieldEdit },
+        return (react_1.default.createElement("div", { style: styles.fieldEdit },
             react_1.default.createElement(material_1.TextField, { variant: "standard", fullWidth: true, style: styles.fieldEditWithButton, value: _val, inputProps: { style: { backgroundColor: _val, color: Utils_1.default.isUseBright(_val) ? '#FFF' : '#000' } }, onChange: e => this.onChange(col, !!val, e.target.value) }),
             react_1.default.createElement(material_1.IconButton, { style: styles.fieldButton, onClick: () => {
                     this.selectCallback = newColor => this.onChange(col, val, newColor);
                     this.setState({ showSelectColor: true, selectIdValue: val });
                 }, size: "large" },
-                react_1.default.createElement(icons_material_1.Colorize, null)));
+                react_1.default.createElement(icons_material_1.Colorize, null))));
     }
     renderSelectIdDialog() {
         if (this.state.showSelectId && this.props.socket) {
-            return react_1.default.createElement(SelectID_1.default, { key: "tableSelect", imagePrefix: "../..", dialogName: this.props.adapterName, themeType: this.props.themeType, theme: this.props.theme, socket: this.props.socket, selected: this.state.selectIdValue, onClose: () => this.setState({ showSelectId: false }), onOk: (selected /* , name */) => {
+            return (react_1.default.createElement(SelectID_1.default, { key: "tableSelect", imagePrefix: "../..", dialogName: this.props.adapterName, themeType: this.props.themeType, theme: this.props.theme, socket: this.props.socket, selected: this.state.selectIdValue, onClose: () => this.setState({ showSelectId: false }), onOk: (selected /* , name */) => {
                     this.setState({ showSelectId: false, selectIdValue: null });
                     this.selectCallback && this.selectCallback(selected);
                     this.selectCallback = null;
-                } });
+                } }));
         }
         return null;
     }
     renderCellEditObjectID(col, val) {
-        return react_1.default.createElement("div", { style: styles.fieldEdit },
-            react_1.default.createElement(material_1.TextField, { variant: "standard", fullWidth: true, style: styles.fieldEditWithButton, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => this.onChange(col, val, e.target.value) }),
+        return (react_1.default.createElement("div", { style: styles.fieldEdit },
+            react_1.default.createElement(material_1.TextField, { variant: "standard", fullWidth: true, style: styles.fieldEditWithButton, value: this.state.editData && this.state.editData[col.field] !== undefined
+                    ? this.state.editData[col.field]
+                    : val, onChange: e => this.onChange(col, val, e.target.value) }),
             react_1.default.createElement(material_1.IconButton, { style: styles.fieldButton, onClick: () => {
                     this.selectCallback = selected => this.onChange(col, val, selected);
                     this.setState({ showSelectId: true, selectIdValue: val });
                 }, size: "large" },
-                react_1.default.createElement(icons_material_1.ViewHeadline, null)));
+                react_1.default.createElement(icons_material_1.ViewHeadline, null))));
     }
     static renderCellNonEdit(item, col) {
         let val = getAttr(item, col.field, col.lookup);
@@ -337,26 +348,26 @@ class TreeTable extends react_1.Component {
             val = val[0];
         }
         if (col.type === 'boolean') {
-            return react_1.default.createElement(material_1.Checkbox, { checked: !!val, disabled: true, inputProps: { 'aria-label': 'checkbox' } });
+            return (react_1.default.createElement(material_1.Checkbox, { checked: !!val, disabled: true, inputProps: { 'aria-label': 'checkbox' } }));
         }
         return val;
     }
     renderCell(item, col, level, i) {
         if (this.state.editMode === i && col.editable !== 'never' && col.editable !== false) {
-            return react_1.default.createElement(material_1.TableCell, { key: col.field, style: Object.assign(Object.assign(Object.assign({}, styles.cell), (level ? styles.cellSecondary : undefined)), col.cellStyle), component: "th" }, this.renderCellEdit(item, col));
+            return (react_1.default.createElement(material_1.TableCell, { key: col.field, style: Object.assign(Object.assign(Object.assign({}, styles.cell), (level ? styles.cellSecondary : undefined)), col.cellStyle), component: "th" }, this.renderCellEdit(item, col)));
         }
-        return react_1.default.createElement(material_1.TableCell, { key: col.field, style: Object.assign(Object.assign(Object.assign({}, styles.cell), (level ? styles.cellSecondary : undefined)), col.cellStyle), component: "th" }, TreeTable.renderCellNonEdit(item, col));
+        return (react_1.default.createElement(material_1.TableCell, { key: col.field, style: Object.assign(Object.assign(Object.assign({}, styles.cell), (level ? styles.cellSecondary : undefined)), col.cellStyle), component: "th" }, TreeTable.renderCellNonEdit(item, col)));
     }
     static renderCellWithSubField(item, col) {
         const main = getAttr(item, col.field, col.lookup);
         if (col.subField) {
             const sub = getAttr(item, col.subField, col.subLookup);
-            return react_1.default.createElement("div", null,
+            return (react_1.default.createElement("div", null,
                 react_1.default.createElement("div", { style: styles.mainText }, main),
-                react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.subText), (col.subStyle || undefined)) }, sub));
+                react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.subText), (col.subStyle || undefined)) }, sub)));
         }
-        return react_1.default.createElement("div", null,
-            react_1.default.createElement("div", { style: styles.mainText }, main));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { style: styles.mainText }, main)));
     }
     renderLine(item, level) {
         const levelShift = this.props.levelShift === undefined ? 24 : this.props.levelShift;
@@ -374,8 +385,8 @@ class TreeTable extends react_1.Component {
         // try to find children
         const opened = this.state.opened.includes(item.id);
         const children = this.props.data.filter(it => it.parentId === item.id);
-        const row = react_1.default.createElement(material_1.TableRow, { key: item.id, className: `table-row-${(item.id || '').toString().replace(/[.$]/g, '_')}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, ((this.state.update && this.state.update.includes(item.id) && styles.glow) || undefined)), styles.row), (level ? styles.rowSecondary : undefined)), (!level && children.length ? styles.rowMainWithChildren : undefined)), (!level && !children.length ? styles.rowMainWithoutChildren : undefined)), (this.state.editMode !== false && this.state.editMode !== i ? styles.rowNoEdit : undefined)), (this.state.deleteMode !== false && this.state.deleteMode !== i ? styles.rowNoEdit : undefined)) },
-            react_1.default.createElement(material_1.TableCell, { style: Object.assign(Object.assign(Object.assign({}, styles.cell), styles.cellExpand), (level ? styles.cellSecondary : undefined)) }, children.length ? react_1.default.createElement(material_1.IconButton, { onClick: () => {
+        const row = (react_1.default.createElement(material_1.TableRow, { key: item.id, className: `table-row-${(item.id || '').toString().replace(/[.$]/g, '_')}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, ((this.state.update && this.state.update.includes(item.id) && styles.glow) || undefined)), styles.row), (level ? styles.rowSecondary : undefined)), (!level && children.length ? styles.rowMainWithChildren : undefined)), (!level && !children.length ? styles.rowMainWithoutChildren : undefined)), (this.state.editMode !== false && this.state.editMode !== i ? styles.rowNoEdit : undefined)), (this.state.deleteMode !== false && this.state.deleteMode !== i ? styles.rowNoEdit : undefined)) },
+            react_1.default.createElement(material_1.TableCell, { style: Object.assign(Object.assign(Object.assign({}, styles.cell), styles.cellExpand), (level ? styles.cellSecondary : undefined)) }, children.length ? (react_1.default.createElement(material_1.IconButton, { onClick: () => {
                     const _opened = [...this.state.opened];
                     const pos = _opened.indexOf(item.id);
                     if (pos === -1) {
@@ -387,39 +398,31 @@ class TreeTable extends react_1.Component {
                     }
                     (window._localStorage || window.localStorage).setItem(this.props.name || 'iob-table', JSON.stringify(_opened));
                     this.setState({ opened: _opened });
-                }, size: "small" }, opened ? react_1.default.createElement(icons_material_1.ExpandMore, null) : react_1.default.createElement(icons_material_1.NavigateNext, null)) : null),
-            react_1.default.createElement(material_1.TableCell, { scope: "row", style: Object.assign(Object.assign(Object.assign(Object.assign({}, styles.cell), (level ? styles.cellSecondary : undefined)), this.props.columns[0].cellStyle), { paddingLeft: levelShift * level }) }, this.props.columns[0].subField ?
-                TreeTable.renderCellWithSubField(item, this.props.columns[0])
-                :
-                    getAttr(item, this.props.columns[0].field, this.props.columns[0].lookup)),
-            this.props.columns.map((col, ii) => (!ii && !col.hidden ? null : this.renderCell(item, col, level, i))),
-            this.props.onUpdate ? react_1.default.createElement(material_1.TableCell, { style: Object.assign(Object.assign({}, styles.cell), styles.cellButton) }, this.state.editMode === i || this.state.deleteMode === i ?
-                react_1.default.createElement(material_1.IconButton, { disabled: this.state.editMode !== false && (!this.state.editData || !Object.keys(this.state.editData).length), onClick: () => {
-                        if (this.state.editMode !== false) {
-                            const newData = JSON.parse(JSON.stringify(item));
-                            this.state.editData && Object.keys(this.state.editData).forEach(attr => { var _c; return setAttr(newData, attr, (_c = this.state.editData) === null || _c === void 0 ? void 0 : _c[attr]); });
-                            this.setState({ editMode: false }, () => this.props.onUpdate && this.props.onUpdate(newData, item));
-                        }
-                        else {
-                            this.setState({ deleteMode: false }, () => this.props.onDelete && this.props.onDelete(item));
-                        }
-                    }, size: "large" },
-                    react_1.default.createElement(icons_material_1.Check, null))
-                :
-                    react_1.default.createElement(material_1.IconButton, { disabled: this.state.editMode !== false, onClick: () => this.setState({ editMode: i, editData: null }), size: "large" },
-                        react_1.default.createElement(icons_material_1.Edit, null))) : null,
-            this.props.onDelete && !this.props.onUpdate ?
-                react_1.default.createElement(material_1.TableCell, { style: Object.assign(Object.assign({}, styles.cell), styles.cellButton) }, this.state.deleteMode === i ?
-                    react_1.default.createElement(material_1.IconButton, { disabled: this.state.editMode !== false && (!this.state.editData || !Object.keys(this.state.editData).length), onClick: () => this.setState({ deleteMode: false }, () => this.props.onDelete && this.props.onDelete(item)), size: "large" },
-                        react_1.default.createElement(icons_material_1.Check, null))
-                    :
-                        null) : null,
-            this.props.onUpdate || this.props.onDelete ? react_1.default.createElement(material_1.TableCell, { style: Object.assign(Object.assign({}, styles.cell), styles.cellButton) }, this.state.editMode === i || this.state.deleteMode === i ?
-                react_1.default.createElement(material_1.IconButton, { onClick: () => this.setState({ editMode: false, deleteMode: false }), size: "large" },
-                    react_1.default.createElement(icons_material_1.Close, null))
-                :
-                    (this.props.onDelete ? react_1.default.createElement(material_1.IconButton, { disabled: this.state.deleteMode !== false, onClick: () => this.setState({ deleteMode: i }), size: "large" },
-                        react_1.default.createElement(icons_material_1.Delete, null)) : null)) : null);
+                }, size: "small" }, opened ? react_1.default.createElement(icons_material_1.ExpandMore, null) : react_1.default.createElement(icons_material_1.NavigateNext, null))) : null),
+            react_1.default.createElement(material_1.TableCell, { scope: "row", style: Object.assign(Object.assign(Object.assign(Object.assign({}, styles.cell), (level ? styles.cellSecondary : undefined)), this.props.columns[0].cellStyle), { paddingLeft: levelShift * level }) }, this.props.columns[0].subField
+                ? TreeTable.renderCellWithSubField(item, this.props.columns[0])
+                : getAttr(item, this.props.columns[0].field, this.props.columns[0].lookup)),
+            this.props.columns.map((col, ii) => !ii && !col.hidden ? null : this.renderCell(item, col, level, i)),
+            this.props.onUpdate ? (react_1.default.createElement(material_1.TableCell, { style: Object.assign(Object.assign({}, styles.cell), styles.cellButton) }, this.state.editMode === i || this.state.deleteMode === i ? (react_1.default.createElement(material_1.IconButton, { disabled: this.state.editMode !== false &&
+                    (!this.state.editData || !Object.keys(this.state.editData).length), onClick: () => {
+                    if (this.state.editMode !== false) {
+                        const newData = JSON.parse(JSON.stringify(item));
+                        this.state.editData &&
+                            Object.keys(this.state.editData).forEach(attr => { var _c; return setAttr(newData, attr, (_c = this.state.editData) === null || _c === void 0 ? void 0 : _c[attr]); });
+                        this.setState({ editMode: false }, () => this.props.onUpdate && this.props.onUpdate(newData, item));
+                    }
+                    else {
+                        this.setState({ deleteMode: false }, () => this.props.onDelete && this.props.onDelete(item));
+                    }
+                }, size: "large" },
+                react_1.default.createElement(icons_material_1.Check, null))) : (react_1.default.createElement(material_1.IconButton, { disabled: this.state.editMode !== false, onClick: () => this.setState({ editMode: i, editData: null }), size: "large" },
+                react_1.default.createElement(icons_material_1.Edit, null))))) : null,
+            this.props.onDelete && !this.props.onUpdate ? (react_1.default.createElement(material_1.TableCell, { style: Object.assign(Object.assign({}, styles.cell), styles.cellButton) }, this.state.deleteMode === i ? (react_1.default.createElement(material_1.IconButton, { disabled: this.state.editMode !== false &&
+                    (!this.state.editData || !Object.keys(this.state.editData).length), onClick: () => this.setState({ deleteMode: false }, () => this.props.onDelete && this.props.onDelete(item)), size: "large" },
+                react_1.default.createElement(icons_material_1.Check, null))) : null)) : null,
+            this.props.onUpdate || this.props.onDelete ? (react_1.default.createElement(material_1.TableCell, { style: Object.assign(Object.assign({}, styles.cell), styles.cellButton) }, this.state.editMode === i || this.state.deleteMode === i ? (react_1.default.createElement(material_1.IconButton, { onClick: () => this.setState({ editMode: false, deleteMode: false }), size: "large" },
+                react_1.default.createElement(icons_material_1.Close, null))) : this.props.onDelete ? (react_1.default.createElement(material_1.IconButton, { disabled: this.state.deleteMode !== false, onClick: () => this.setState({ deleteMode: i }), size: "large" },
+                react_1.default.createElement(icons_material_1.Delete, null))) : null)) : null));
         if (!level && opened) {
             const items = children.map(it => this.renderLine(it, level + 1));
             items.unshift(row);
@@ -432,21 +435,22 @@ class TreeTable extends react_1.Component {
         this.setState({ order: isAsc ? 'desc' : 'asc', orderBy: property });
     }
     renderHead() {
-        return react_1.default.createElement(material_1.TableHead, null,
+        return (react_1.default.createElement(material_1.TableHead, null,
             react_1.default.createElement(material_1.TableRow, { key: "headerRow" },
                 react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellExpand) }),
-                react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles[`width_${this.props.columns[0].field.replace(/\./g, '_')}`]), style: this.props.columns[0].headerStyle || this.props.columns[0].cellStyle, sortDirection: this.props.noSort ? false : (this.state.orderBy === this.props.columns[0].field ? this.state.order : false) }, this.props.noSort ? null : react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === this.props.columns[0].field, direction: this.state.orderBy === this.props.columns[0].field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(this.props.columns[0].field) },
+                react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles[`width_${this.props.columns[0].field.replace(/\./g, '_')}`]), style: this.props.columns[0].headerStyle || this.props.columns[0].cellStyle, sortDirection: this.props.noSort
+                        ? false
+                        : this.state.orderBy === this.props.columns[0].field
+                            ? this.state.order
+                            : false }, this.props.noSort ? null : (react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === this.props.columns[0].field, direction: this.state.orderBy === this.props.columns[0].field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(this.props.columns[0].field) },
                     this.props.columns[0].title || this.props.columns[0].field,
-                    this.state.orderBy === this.props.columns[0].field ?
-                        react_1.default.createElement("span", { style: styles.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending') : null)),
-                this.props.columns.map((col, i) => (!i && !col.hidden ? null : react_1.default.createElement(material_1.TableCell, { key: col.field, sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles[`width_${col.field.replace(/\./g, '_')}`]), style: col.headerStyle || col.cellStyle, component: "th" }, this.props.noSort ? null : react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === col.field, direction: this.state.orderBy === col.field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(col.field) },
+                    this.state.orderBy === this.props.columns[0].field ? (react_1.default.createElement("span", { style: styles.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null))),
+                this.props.columns.map((col, i) => !i && !col.hidden ? null : (react_1.default.createElement(material_1.TableCell, { key: col.field, sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles[`width_${col.field.replace(/\./g, '_')}`]), style: col.headerStyle || col.cellStyle, component: "th" }, this.props.noSort ? null : (react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === col.field, direction: this.state.orderBy === col.field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(col.field) },
                     col.title || col.field,
-                    this.state.orderBy === col.field ?
-                        react_1.default.createElement("span", { style: styles.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending') : null)))),
-                this.props.onUpdate ? react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) }, !this.props.noAdd ? react_1.default.createElement(material_1.Fab, { color: "primary", size: "small", disabled: this.state.editMode !== false, onClick: () => this.props.onUpdate && this.props.onUpdate(true) },
-                    react_1.default.createElement(icons_material_1.Add, null)) : null) : null,
-                this.props.onDelete || this.props.onUpdate ?
-                    react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) }) : null));
+                    this.state.orderBy === col.field ? (react_1.default.createElement("span", { style: styles.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null))))),
+                this.props.onUpdate ? (react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) }, !this.props.noAdd ? (react_1.default.createElement(material_1.Fab, { color: "primary", size: "small", disabled: this.state.editMode !== false, onClick: () => this.props.onUpdate && this.props.onUpdate(true) },
+                    react_1.default.createElement(icons_material_1.Add, null))) : null)) : null,
+                this.props.onDelete || this.props.onUpdate ? (react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) })) : null)));
     }
     render() {
         const col = this.props.columns.find(_col => _col.field === this.state.orderBy);
@@ -460,12 +464,12 @@ class TreeTable extends react_1.Component {
                     this.setState({ update: null });
                 }, 500);
             }
-            return react_1.default.createElement("div", { style: styles.tableContainer, className: this.props.className },
+            return (react_1.default.createElement("div", { style: styles.tableContainer, className: this.props.className },
                 react_1.default.createElement(material_1.Table, { style: styles.table, "aria-label": "simple table", size: "small", stickyHeader: true },
                     this.renderHead(),
                     react_1.default.createElement(material_1.TableBody, null, table.map(it => this.renderLine(it)))),
                 this.renderSelectIdDialog(),
-                this.renderSelectColorDialog());
+                this.renderSelectColorDialog()));
         }
         return null;
     }

package/Components/UploadImage.d.ts

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component, type JSX } from 'react';
 interface UploadImageProps {
     maxSize?: number;
     disabled?: boolean;
@@ -18,6 +18,6 @@ declare class UploadImage extends Component<UploadImageProps, UploadImageState>
     private readonly cropperRef;
     constructor(props: UploadImageProps);
     onDrop(acceptedFiles: File[]): void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default UploadImage;

package/Components/UploadImage.js

@@ -457,8 +457,7 @@ class UploadImage extends react_1.Component {
                 window.alert(i18n_1.default.t('ra_File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));
             }
             else {
-                const base64 = `data:${ext};base64,${btoa(new Uint8Array(reader.result)
-                    .reduce((data, byte) => data + String.fromCharCode(byte), ''))}`;
+                const base64 = `data:${ext};base64,${btoa(new Uint8Array(reader.result).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`;
                 if (onChange) {
                     onChange(base64);
                 }
@@ -470,34 +469,39 @@ class UploadImage extends react_1.Component {
         reader.readAsArrayBuffer(file);
     }
     render() {
-        const { disabled, icon, removeIconFunc, error, crop, onChange, } = this.props;
+        const { disabled, icon, removeIconFunc, error, crop, onChange } = this.props;
         const maxSize = this.props.maxSize || 10 * 1024;
         const accept = this.props.accept || { 'image/*': [] };
         const { uploadFile, anchorEl, cropHandler } = this.state;
-        return react_1.default.createElement(react_dropzone_1.default, { disabled: !!disabled || cropHandler, key: "dropzone", multiple: false, accept: accept, maxSize: maxSize, onDragEnter: () => this.setState({ uploadFile: 'dragging' }), onDragLeave: () => this.setState({ uploadFile: true }), onDrop: (acceptedFiles, errors) => {
+        return (react_1.default.createElement(react_dropzone_1.default, { disabled: !!disabled || cropHandler, key: "dropzone", multiple: false, accept: accept, maxSize: maxSize, onDragEnter: () => this.setState({ uploadFile: 'dragging' }), onDragLeave: () => this.setState({ uploadFile: true }), onDrop: (acceptedFiles, errors) => {
                 this.setState({ uploadFile: false });
                 if (!acceptedFiles.length) {
-                    window.alert((errors && errors[0] && errors[0].errors && errors[0].errors[0] && errors[0].errors[0].message) || i18n_1.default.t('ra_Cannot upload'));
+                    window.alert((errors &&
+                        errors[0] &&
+                        errors[0].errors &&
+                        errors[0].errors[0] &&
+                        errors[0].errors[0].message) ||
+                        i18n_1.default.t('ra_Cannot upload'));
                 }
                 else {
                     this.onDrop(acceptedFiles);
                 }
-            } }, ({ getRootProps, getInputProps }) => react_1.default.createElement("div", Object.assign({ style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, styles.uploadDiv), (uploadFile === 'dragging' ? styles.uploadDivDragging : undefined)), styles.dropZone), (disabled ? styles.disabledOpacity : undefined)), (!icon ? styles.dropZoneEmpty : undefined)) }, getRootProps()),
+            } }, ({ getRootProps, getInputProps }) => (react_1.default.createElement("div", Object.assign({ style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, styles.uploadDiv), (uploadFile === 'dragging' ? styles.uploadDivDragging : undefined)), styles.dropZone), (disabled ? styles.disabledOpacity : undefined)), (!icon ? styles.dropZoneEmpty : undefined)) }, getRootProps()),
             react_1.default.createElement("input", Object.assign({}, getInputProps())),
             react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.uploadCenterDiv), (error ? styles.error : undefined)) },
-                !icon ? react_1.default.createElement("div", { style: styles.uploadCenterTextAndIcon },
+                !icon ? (react_1.default.createElement("div", { style: styles.uploadCenterTextAndIcon },
                     react_1.default.createElement(fa_1.FaFileUpload, { style: styles.uploadCenterIcon }),
-                    react_1.default.createElement("div", { style: styles.uploadCenterText }, uploadFile === 'dragging' ? i18n_1.default.t('ra_Drop file here') :
-                        i18n_1.default.t('ra_Place your files here or click here to open the browse dialog')))
-                    :
-                        removeIconFunc && !cropHandler && react_1.default.createElement("div", { style: styles.buttonRemoveWrapper },
-                            react_1.default.createElement(material_1.Tooltip, { title: i18n_1.default.t('ra_Clear'), componentsProps: { popper: { sx: { pointerEvents: 'none' } } } },
-                                react_1.default.createElement(material_1.IconButton, { size: "large", onClick: e => {
-                                        removeIconFunc && removeIconFunc();
-                                        e.stopPropagation();
-                                    } },
-                                    react_1.default.createElement(icons_material_1.Close, null)))),
-                icon && crop && react_1.default.createElement("div", { style: styles.buttonCropWrapper },
+                    react_1.default.createElement("div", { style: styles.uploadCenterText }, uploadFile === 'dragging'
+                        ? i18n_1.default.t('ra_Drop file here')
+                        : i18n_1.default.t('ra_Place your files here or click here to open the browse dialog')))) : (removeIconFunc &&
+                    !cropHandler && (react_1.default.createElement("div", { style: styles.buttonRemoveWrapper },
+                    react_1.default.createElement(material_1.Tooltip, { title: i18n_1.default.t('ra_Clear'), componentsProps: { popper: { sx: { pointerEvents: 'none' } } } },
+                        react_1.default.createElement(material_1.IconButton, { size: "large", onClick: e => {
+                                removeIconFunc && removeIconFunc();
+                                e.stopPropagation();
+                            } },
+                            react_1.default.createElement(icons_material_1.Close, null)))))),
+                icon && crop && (react_1.default.createElement("div", { style: styles.buttonCropWrapper },
                     react_1.default.createElement(material_1.Tooltip, { title: i18n_1.default.t('ra_Crop'), componentsProps: { popper: { sx: { pointerEvents: 'none' } } } },
                         react_1.default.createElement(material_1.IconButton, { size: "large", onClick: e => {
                                 if (!cropHandler) {
@@ -522,9 +526,9 @@ class UploadImage extends react_1.Component {
                                     }
                                 }
                             }) }, i18n_1.default.t('ra_Save')),
-                        react_1.default.createElement(material_1.MenuItem, { onClick: () => this.setState({ anchorEl: null, cropHandler: false }) }, i18n_1.default.t('ra_Close')))),
-                icon && !cropHandler ? react_1.default.createElement(Icon_1.default, { src: icon, style: styles.image, alt: "icon" }) : null,
-                icon && crop && cropHandler ? react_1.default.createElement(react_cropper_1.Cropper, { ref: this.cropperRef, style: styles.image, src: icon, initialAspectRatio: 1, viewMode: 1, guides: false, minCropBoxHeight: 10, minCropBoxWidth: 10, background: false, checkOrientation: false }) : null)));
+                        react_1.default.createElement(material_1.MenuItem, { onClick: () => this.setState({ anchorEl: null, cropHandler: false }) }, i18n_1.default.t('ra_Close'))))),
+                icon && !cropHandler ? (react_1.default.createElement(Icon_1.default, { src: icon, style: styles.image, alt: "icon" })) : null,
+                icon && crop && cropHandler ? (react_1.default.createElement(react_cropper_1.Cropper, { ref: this.cropperRef, style: styles.image, src: icon, initialAspectRatio: 1, viewMode: 1, guides: false, minCropBoxHeight: 10, minCropBoxWidth: 10, background: false, checkOrientation: false })) : null)))));
     }
 }
 exports.default = UploadImage;

package/Components/Utils.d.ts

@@ -3,9 +3,9 @@
  *
  * MIT License
  *
- * */
+ */
 import React from 'react';
-import { IobTheme, ThemeName, ThemeType } from '../types';
+import type { IobTheme, ThemeName, ThemeType } from '../types';
 type SmartName = null | false | string | ({
     [lang in ioBroker.Languages]?: string;
 } & {
@@ -77,7 +77,13 @@ declare class Utils {
         icon?: string;
         color?: string;
         language?: ioBroker.Languages;
-    }, defaultEnabling?: boolean): any;
+    }, defaultEnabling?: boolean): {
+        name: string;
+        enabled?: boolean;
+        useCustom?: boolean;
+        icon?: string;
+        color?: string;
+    };
     /**
         Sets smartName settings for the given object.
      */
@@ -162,6 +168,7 @@ declare class Utils {
     static copyToClipboard(text: string, e?: Event): boolean;
     /**
      * Gets the extension of a file name.
+     *
      * @param fileName the file name.
      * @returns The extension in lower case.
      */
@@ -169,52 +176,52 @@ declare class Utils {
     /**
      * Format number of bytes as a string with B, KB, MB or GB.
      * The base for all calculations is 1024.
+     *
+     * @param bytes The number of bytes.
      * @returns The formatted string (e.g. '723.5 KB')
      */
-    static formatBytes(
-    /** The number of bytes. */
-    bytes: number): string;
+    static formatBytes(bytes: number): string;
     /**
      * Invert the given color according to a theme type to get the inverted text color for background
+     *
+     * @param color Color in the format '#rrggbb' or '#rgb' (or without a hash)
+     * @param themeType 'light' or 'dark'
+     * @param invert If true, the dark theme has a light color in the control, or the dark theme has a light color in the control
      */
-    static getInvertedColor(
-    /** Color in the format '#rrggbb' or '#rgb' (or without a hash) */
-    color: string, themeType: ThemeType, 
-    /** dark theme has light color in control, or light theme has light color in control */
-    invert?: boolean): string | undefined;
+    static getInvertedColor(color: string, themeType: ThemeType, invert?: boolean): string | undefined;
     /**
      * Invert the given color
-     * @param hex Color in the format '#rrggbb' or '#rgb' (or without hash)
+     *
+     * @param hex Color in the format '#rrggbb' or '#rgb' (or without a hash)
      * @param bw Set to black or white.
      */
     static invertColor(hex: string, bw?: boolean): string;
     /**
      * Convert RGB to array [r, g, b]
+     *
      * @param hex Color in the format '#rrggbb' or '#rgb' (or without hash) or rgb(r,g,b) or rgba(r,g,b,a)
      * @returns Array with 3 elements [r, g, b]
      */
     static color2rgb(hex: string): false | [number, number, number] | '';
     /**
      * Convert RGB to LAB
-     * @param {Array<number>} rgb color in format [r,g,b]
-     * @returns {Array<number>} lab color in format [l,a,b]
+     *
+     * @param rgb color in format [r,g,b]
+     * @returns lab color in format [l,a,b]
      */
     static rgb2lab(rgb: [number, number, number]): [number, number, number];
     /**
      * Calculate the distance between two colors in LAB color space in the range 0-100^2
-     * If distance is less than 1000, the colors are similar
+     * If the distance is less than 1000, the colors are similar
+     *
      * @param color1 Color in the format '#rrggbb' or '#rgb' (or without hash) or rgb(r,g,b) or rgba(r,g,b,a)
      * @param color2 Color in the format '#rrggbb' or '#rgb' (or without hash) or rgb(r,g,b) or rgba(r,g,b,a)
      * @returns distance in the range 0-100^2
      */
     static colorDistance(color1: string, color2: string): number;
-    /**
-     * @private
-     */
-    static _toVal(mix: ClassValue): string;
+    private static _toVal;
     /**
      * Convert any object to a string with its values.
-     * @returns {string}
      */
     static clsx(...inputs: ClassValue[]): string;
     /**
@@ -231,11 +238,13 @@ declare class Utils {
     static setThemeName(themeName: ThemeName): void;
     /**
      * Toggle the theme name between 'dark' and 'colored'.
+     *
      * @returns the new theme name.
      */
     static toggleTheme(themeName?: ThemeName | null): ThemeName;
     /**
      * Get the list of themes
+     *
      * @returns list of possible themes
      */
     static getThemeNames(): ThemeName[];
@@ -245,12 +254,19 @@ declare class Utils {
     static parseQuery(query: string): Record<string, string | number | boolean>;
     /**
      * Returns parent ID.
+     *
      * @returns parent ID or null if no parent
      */
     static getParentId(id: string): string | null;
     static formatDate(dateObj: Date, dateFormat: string): string;
+    /**
+     *  Format seconds to string like 'h:mm:ss' or 'd.hh:mm:ss'
+     */
     static formatTime(seconds: number): string;
     static MDtext2link(text: string): string;
+    /**
+     * Open url link in the new target window
+     */
     static openLink(url: string, target?: string): void;
     static MDgetTitle(text: string): string;
     static MDextractHeader(text: string): {
@@ -266,6 +282,7 @@ declare class Utils {
     json: Record<string, any>): void;
     /**
      * Convert quality code into text
+     *
      * @returns lines that decode quality
      */
     static quality2text(quality: ioBroker.STATE_QUALITY[keyof ioBroker.STATE_QUALITY]): string[];
@@ -275,18 +292,21 @@ declare class Utils {
     static clone(object: Record<string, any>): Record<string, any>;
     /**
      * Get states of object
+     *
      * @returns states as an object in form {"value1": "label1", "value2": "label2"} or null
      */
     static getStates(obj: ioBroker.StateObject | null | undefined): Record<string, string> | null;
     /**
      * Get svg file as text
+     *
      * @param url URL of SVG file
      * @returns Promise with "data:image..."
      */
     static getSvg(url: string): Promise<string>;
     /**
-     * Detect file extension by its content
-     * @returns Detected extension, like 'jpg'
+     * Detect a file extension by its content
+     *
+     * @returns The detected extension, like 'jpg'
      */
     static detectMimeType(
     /** Base64 encoded binary file */