@iobroker/adapter-react-v5 7.0.1 → 7.1.0

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;