@iobroker/adapter-react-v5 3.2.4 → 3.2.6

package/Components/TreeTable.js

@@ -255,6 +255,8 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
           return this.renderCellEditColor(item, col, val);
         } else if (col.type === 'oid') {
           return this.renderCellEditObjectID(item, col, val);
+        } else if (col.type === 'numeric') {
+          return this.renderCellEditNumber(item, col, val);
         } else {
           return this.renderCellEditString(item, col, val);
         }
@@ -278,8 +280,9 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
           });
         },
         value: this.state.editData && this.state.editData[col.field] || val
-      }, Object.keys(col.lookup).map(function (v) {
+      }, Object.keys(col.lookup).map(function (v, i) {
         return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          key: i,
           value: v
         }, col.lookup[v]);
       }));
@@ -306,10 +309,33 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
         }
       });
     }
+  }, {
+    key: "renderCellEditNumber",
+    value: function renderCellEditNumber(item, col, val) {
+      var _this4 = this;
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        variant: "standard",
+        className: this.props.classes.fieldEdit,
+        type: "number",
+        fullWidth: true,
+        value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val,
+        onChange: function onChange(e) {
+          var editData = _this4.state.editData ? _objectSpread({}, _this4.state.editData) : {};
+          if (e.target.value === val) {
+            delete editData[col.field];
+          } else {
+            editData[col.field] = e.target.value;
+          }
+          _this4.setState({
+            editData: editData
+          });
+        }
+      });
+    }
   }, {
     key: "renderCellEditCustom",
     value: function renderCellEditCustom(item, col, val) {
-      var _this4 = this;
+      var _this5 = this;
       var EditComponent = col.editComponent;
 
       // use new value if exists
@@ -322,13 +348,13 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
         value: val,
         rowData: item,
         onChange: function onChange(newVal) {
-          var editData = _this4.state.editData ? _objectSpread({}, _this4.state.editData) : {};
+          var editData = _this5.state.editData ? _objectSpread({}, _this5.state.editData) : {};
           if (newVal === val) {
             delete editData[col.field];
           } else {
             editData[col.field] = newVal;
           }
-          _this4.setState({
+          _this5.setState({
             editData: editData
           });
         }
@@ -337,17 +363,17 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderCellEditBoolean",
     value: function renderCellEditBoolean(item, col, val) {
-      var _this5 = this;
+      var _this6 = this;
       return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
         checked: this.state.editData && this.state.editData[col.field] !== undefined ? !!this.state.editData[col.field] : !!val,
         onChange: function onChange(e) {
-          var editData = _this5.state.editData ? _objectSpread({}, _this5.state.editData) : {};
+          var editData = _this6.state.editData ? _objectSpread({}, _this6.state.editData) : {};
           if (e.target.checked === !!val) {
             delete editData[col.field];
           } else {
             editData[col.field] = e.target.checked;
           }
-          _this5.setState({
+          _this6.setState({
             editData: editData
           });
         },
@@ -359,15 +385,15 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderSelectColorDialog",
     value: function renderSelectColorDialog() {
-      var _this6 = this;
+      var _this7 = this;
       return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
         classes: {
           root: this.props.classes.colorDialog,
           paper: this.props.classes.colorDialog
         },
         onClose: function onClose() {
-          _this6.selectCallback = null;
-          _this6.setState({
+          _this7.selectCallback = null;
+          _this7.setState({
             showSelectColor: false
           });
         },
@@ -375,10 +401,10 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_reactColorful.HexColorPicker, {
         color: this.state.selectIdValue,
         onChange: function onChange(color) {
-          _this6.setState({
+          _this7.setState({
             selectIdValue: color
           }, function () {
-            return _this6.selectCallback && _this6.selectCallback(color);
+            return _this7.selectCallback && _this7.selectCallback(color);
           });
         }
       }));
@@ -386,7 +412,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderCellEditColor",
     value: function renderCellEditColor(item, col, val) {
-      var _this7 = this;
+      var _this8 = this;
       var _val = this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: this.props.classes.fieldEdit
@@ -402,32 +428,31 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
           }
         },
         onChange: function onChange(e) {
-          var editData = _this7.state.editData ? _objectSpread({}, _this7.state.editData) : {};
+          var editData = _this8.state.editData ? _objectSpread({}, _this8.state.editData) : {};
           if (e.target.value === val) {
             delete editData[col.field];
           } else {
             editData[col.field] = e.target.value;
           }
-          _this7.setState({
+          _this8.setState({
             editData: editData
           });
         }
       }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         className: this.props.classes.fieldButton,
-        contained: true,
         onClick: function onClick() {
-          _this7.selectCallback = function (newColor) {
-            var editData = _this7.state.editData ? _objectSpread({}, _this7.state.editData) : {};
+          _this8.selectCallback = function (newColor) {
+            var editData = _this8.state.editData ? _objectSpread({}, _this8.state.editData) : {};
             if (newColor === val) {
               delete editData[col.field];
             } else {
               editData[col.field] = newColor;
             }
-            _this7.setState({
+            _this8.setState({
               editData: editData
             });
           };
-          _this7.setState({
+          _this8.setState({
             showSelectColor: true,
             selectIdValue: val
           });
@@ -438,7 +463,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderSelectIdDialog",
     value: function renderSelectIdDialog() {
-      var _this8 = this;
+      var _this9 = this;
       if (this.state.showSelectId) {
         return /*#__PURE__*/_react["default"].createElement(_SelectID["default"], {
           key: "tableSelect",
@@ -449,17 +474,17 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
           statesOnly: true,
           selected: this.state.selectIdValue,
           onClose: function onClose() {
-            return _this8.setState({
+            return _this9.setState({
               showSelectId: false
             });
           },
           onOk: function onOk(selected, name) {
-            _this8.setState({
+            _this9.setState({
               showSelectId: false,
               selectIdValue: null
             });
-            _this8.selectCallback && _this8.selectCallback(selected);
-            _this8.selectCallback = null;
+            _this9.selectCallback && _this9.selectCallback(selected);
+            _this9.selectCallback = null;
           }
         });
       } else {
@@ -469,7 +494,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderCellEditObjectID",
     value: function renderCellEditObjectID(item, col, val) {
-      var _this9 = this;
+      var _this10 = this;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: this.props.classes.fieldEdit
       }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
@@ -478,32 +503,31 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
         className: this.props.classes.fieldEditWithButton,
         value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val,
         onChange: function onChange(e) {
-          var editData = _this9.state.editData ? _objectSpread({}, _this9.state.editData) : {};
+          var editData = _this10.state.editData ? _objectSpread({}, _this10.state.editData) : {};
           if (e.target.value === val) {
             delete editData[col.field];
           } else {
             editData[col.field] = e.target.value;
           }
-          _this9.setState({
+          _this10.setState({
             editData: editData
           });
         }
       }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         className: this.props.classes.fieldButton,
-        contained: true,
         onClick: function onClick() {
-          _this9.selectCallback = function (selected) {
-            var editData = _this9.state.editData ? _objectSpread({}, _this9.state.editData) : {};
+          _this10.selectCallback = function (selected) {
+            var editData = _this10.state.editData ? _objectSpread({}, _this10.state.editData) : {};
             if (selected === val) {
               delete editData[col.field];
             } else {
               editData[col.field] = selected;
             }
-            _this9.setState({
+            _this10.setState({
               editData: editData
             });
           };
-          _this9.setState({
+          _this10.setState({
             showSelectId: true,
             selectIdValue: val
           });
@@ -564,7 +588,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderLine",
     value: function renderLine(item, level) {
-      var _this10 = this;
+      var _this11 = this;
       var levelShift = this.props.levelShift === undefined ? 24 : this.props.levelShift;
       level = level || 0;
       var i = this.props.data.indexOf(item);
@@ -588,7 +612,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
           className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellExpand, level && this.props.classes.cellSecondary)
         }, children.length ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           onClick: function onClick() {
-            var opened = (0, _toConsumableArray2["default"])(_this10.state.opened);
+            var opened = (0, _toConsumableArray2["default"])(_this11.state.opened);
             var pos = opened.indexOf(item.id);
             if (pos === -1) {
               opened.push(item.id);
@@ -596,8 +620,8 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
             } else {
               opened.splice(pos, 1);
             }
-            (window._localStorage || window.localStorage).setItem(_this10.props.name || 'iob-table', JSON.stringify(opened));
-            _this10.setState({
+            (window._localStorage || window.localStorage).setItem(_this11.props.name || 'iob-table', JSON.stringify(opened));
+            _this11.setState({
               opened: opened
             });
           },
@@ -609,27 +633,27 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
             paddingLeft: levelShift * level
           })
         }, this.props.columns[0].subField ? this.renderCellWithSubField(item, this.props.columns[0]) : getAttr(item, this.props.columns[0].field, this.props.columns[0].lookup)), this.props.columns.map(function (col, ii) {
-          return !ii && !col.hidden ? null : _this10.renderCell(item, col, level, i);
+          return !ii && !col.hidden ? null : _this11.renderCell(item, col, level, i);
         }), this.props.onUpdate ? /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
           className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellButton)
         }, this.state.editMode === i || this.state.deleteMode === i ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           disabled: this.state.editMode !== false && (!this.state.editData || !Object.keys(this.state.editData).length),
           onClick: function onClick() {
-            if (_this10.state.editMode !== false) {
+            if (_this11.state.editMode !== false) {
               var newData = JSON.parse(JSON.stringify(item));
-              Object.keys(_this10.state.editData).forEach(function (attr) {
-                return setAttr(newData, attr, _this10.state.editData[attr]);
+              Object.keys(_this11.state.editData).forEach(function (attr) {
+                return setAttr(newData, attr, _this11.state.editData[attr]);
               });
-              _this10.setState({
+              _this11.setState({
                 editMode: false
               }, function () {
-                return _this10.props.onUpdate(newData, item);
+                return _this11.props.onUpdate(newData, item);
               });
             } else {
-              _this10.setState({
+              _this11.setState({
                 deleteMode: false
               }, function () {
-                return _this10.props.onDelete(item);
+                return _this11.props.onDelete(item);
               });
             }
           },
@@ -637,17 +661,29 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)) : /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           disabled: this.state.editMode !== false,
           onClick: function onClick() {
-            return _this10.setState({
+            return _this11.setState({
               editMode: i,
               editData: null
             });
           },
           size: "large"
-        }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], null))) : null, this.props.onUpdate || this.props.onDelete ? /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], null))) : null, this.props.onDelete && !this.props.onUpdate ? /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+          className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellButton)
+        }, this.state.deleteMode === i ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+          disabled: this.state.editMode !== false && (!this.state.editData || !Object.keys(this.state.editData).length),
+          onClick: function onClick() {
+            return _this11.setState({
+              deleteMode: false
+            }, function () {
+              return _this11.props.onDelete(item);
+            });
+          },
+          size: "large"
+        }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)) : null) : null, this.props.onUpdate || this.props.onDelete ? /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
           className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellButton)
         }, this.state.editMode === i || this.state.deleteMode === i ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           onClick: function onClick() {
-            return _this10.setState({
+            return _this11.setState({
               editMode: false,
               deleteMode: false
             });
@@ -656,13 +692,13 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null)) : this.props.onDelete ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           disabled: this.state.deleteMode !== false,
           onClick: function onClick() {
-            return _this10.setState({
+            return _this11.setState({
               deleteMode: i
             });
           },
           size: "large"
         }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)) : null) : null), !level && opened ? children.map(function (item) {
-          return _this10.renderLine(item, level + 1);
+          return _this11.renderLine(item, level + 1);
         }) : null];
       }
     }
@@ -678,7 +714,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderHead",
     value: function renderHead() {
-      var _this11 = this;
+      var _this12 = this;
       return /*#__PURE__*/_react["default"].createElement(_TableHead["default"], null, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
         key: "headerRow"
       }, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
@@ -693,25 +729,25 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
         active: this.state.orderBy === this.props.columns[0].field,
         direction: this.state.orderBy === this.props.columns[0].field ? this.state.order : 'asc',
         onClick: function onClick() {
-          return _this11.handleRequestSort(_this11.props.columns[0].field);
+          return _this12.handleRequestSort(_this12.props.columns[0].field);
         }
       }, this.props.columns[0].title || this.props.columns[0].field, this.state.orderBy === this.props.columns[0].field ? /*#__PURE__*/_react["default"].createElement("span", {
         className: this.props.classes.visuallyHidden
       }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending') : null)), this.props.columns.map(function (col, i) {
         return !i && !col.hidden ? null : /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
           key: col.field,
-          className: _Utils["default"].clsx(_this11.props.classes.cell, _this11.props.classes.cellHeader, _this11.props.classes['width_' + col.field.replace(/\./g, '_')]),
+          className: _Utils["default"].clsx(_this12.props.classes.cell, _this12.props.classes.cellHeader, _this12.props.classes['width_' + col.field.replace(/\./g, '_')]),
           style: col.headerStyle || col.cellStyle,
           component: "th"
-        }, _this11.props.noSort ? null : /*#__PURE__*/_react["default"].createElement(_TableSortLabel["default"], {
-          active: _this11.state.orderBy === col.field,
-          direction: _this11.state.orderBy === col.field ? _this11.state.order : 'asc',
+        }, _this12.props.noSort ? null : /*#__PURE__*/_react["default"].createElement(_TableSortLabel["default"], {
+          active: _this12.state.orderBy === col.field,
+          direction: _this12.state.orderBy === col.field ? _this12.state.order : 'asc',
           onClick: function onClick() {
-            return _this11.handleRequestSort(col.field);
+            return _this12.handleRequestSort(col.field);
           }
-        }, col.title || col.field, _this11.state.orderBy === col.field ? /*#__PURE__*/_react["default"].createElement("span", {
-          className: _this11.props.classes.visuallyHidden
-        }, _this11.state.order === 'desc' ? 'sorted descending' : 'sorted ascending') : null));
+        }, col.title || col.field, _this12.state.orderBy === col.field ? /*#__PURE__*/_react["default"].createElement("span", {
+          className: _this12.props.classes.visuallyHidden
+        }, _this12.state.order === 'desc' ? 'sorted descending' : 'sorted ascending') : null));
       }), this.props.onUpdate ? /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
         component: "th",
         className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes.cellButton)
@@ -720,7 +756,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
         size: "small",
         disabled: this.state.editMode !== false,
         onClick: function onClick() {
-          return _this11.props.onUpdate(true);
+          return _this12.props.onUpdate(true);
         }
       }, /*#__PURE__*/_react["default"].createElement(_Add["default"], null)) : null) : null, this.props.onDelete || this.props.onUpdate ? /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
         component: "th",
@@ -730,16 +766,16 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this12 = this;
+      var _this13 = this;
       var lookup = this.props.columns.find(function (col) {
-        return col.field === _this12.state.orderBy;
+        return col.field === _this13.state.orderBy;
       }).lookup;
       var table = stableSort(this.props.data, getComparator(this.state.order, this.state.orderBy, lookup));
       if (this.state.update && this.state.update.length) {
         this.updateTimeout && clearTimeout(this.updateTimeout);
         this.updateTimeout = setTimeout(function () {
-          _this12.updateTimeout = null;
-          _this12.setState({
+          _this13.updateTimeout = null;
+          _this13.setState({
             update: null
           });
         }, 500);
@@ -752,7 +788,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
         size: "small",
         stickyHeader: true
       }, this.renderHead(), /*#__PURE__*/_react["default"].createElement(_TableBody["default"], null, table.map(function (item) {
-        return _this12.renderLine(item);
+        return _this13.renderLine(item);
       }))), this.renderSelectIdDialog(), this.renderSelectColorDialog());
     }
   }], [{