@iobroker/adapter-react-v5 4.2.1 → 4.3.1

package/Components/TreeTable.js

@@ -14,30 +14,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _styles = require("@mui/styles");
 var _reactColorful = require("react-colorful");
-var _Fab = _interopRequireDefault(require("@mui/material/Fab"));
-var _Table = _interopRequireDefault(require("@mui/material/Table"));
-var _TableBody = _interopRequireDefault(require("@mui/material/TableBody"));
-var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
-var _TableHead = _interopRequireDefault(require("@mui/material/TableHead"));
-var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
-var _TableSortLabel = _interopRequireDefault(require("@mui/material/TableSortLabel"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _Select = _interopRequireDefault(require("@mui/material/Select"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
-var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
-var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
-var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
-var _NavigateNext = _interopRequireDefault(require("@mui/icons-material/NavigateNext"));
-var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
-var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
-var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
-var _ViewHeadline = _interopRequireDefault(require("@mui/icons-material/ViewHeadline"));
-var _Colorize = _interopRequireDefault(require("@mui/icons-material/Colorize"));
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
 var _SelectID = _interopRequireDefault(require("../Dialogs/SelectID"));
 var _Utils = _interopRequireDefault(require("./Utils"));
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -54,13 +34,11 @@ function getAttr(obj, attr, lookup) {
   if (attr.length === 1) {
     if (lookup && lookup[obj[attr[0]]]) {
       return lookup[obj[attr[0]]];
-    } else {
-      return obj[attr[0]];
     }
-  } else {
-    var name = attr.shift();
-    return getAttr(obj[name], attr);
+    return obj[attr[0]];
   }
+  var name = attr.shift();
+  return getAttr(obj[name], attr);
 }
 function setAttr(obj, attr, value) {
   if (typeof attr === 'string') {
@@ -68,13 +46,12 @@ function setAttr(obj, attr, value) {
   }
   if (attr.length === 1) {
     return obj[attr[0]] = value;
-  } else {
-    var name = attr.shift();
-    if (obj[name] === null || obj[name] === undefined) {
-      obj[name] = {};
-    }
-    return setAttr(obj[name], attr, value);
   }
+  var name = attr.shift();
+  if (obj[name] === null || obj[name] === undefined) {
+    obj[name] = {};
+  }
+  return setAttr(obj[name], attr, value);
 }
 var styles = function styles(theme) {
   return {
@@ -146,11 +123,11 @@ var styles = function styles(theme) {
       width: 1
     },
     fieldEditWithButton: {
-      width: "calc(100% - 33px)",
+      width: 'calc(100% - 33px)',
       display: 'inline-block'
     },
     fieldEdit: {
-      width: "100%",
+      width: '100%',
       display: 'inline-block',
       lineHeight: '50px',
       verticalAlign: 'middle'
@@ -177,11 +154,11 @@ function descendingComparator(a, b, orderBy, lookup) {
   var _b = getAttr(b, orderBy, lookup) || '';
   if (_b < _a) {
     return -1;
-  } else if (_b > _a) {
+  }
+  if (_b > _a) {
     return 1;
-  } else {
-    return 0;
   }
+  return 0;
 }
 function getComparator(order, orderBy, lookup) {
   return order === 'desc' ? function (a, b) {
@@ -198,9 +175,8 @@ function stableSort(array, comparator) {
     var order = comparator(a[0], b[0]);
     if (order) {
       return order;
-    } else {
-      return a[1] - b[1];
     }
+    return a[1] - b[1];
   });
   return stabilizedThis.map(function (el) {
     return el[0];
@@ -230,9 +206,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
       order: 'asc',
       update: null,
       orderBy: _this.props.columns[0].field,
-      useTable: false,
-      showSelectColor: false,
-      glowOnChange: props.glowOnChange
+      showSelectColor: false
     };
     return _this;
   }
@@ -248,25 +222,26 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
       }
       if (col.editComponent) {
         return this.renderCellEditCustom(item, col, val);
-      } else {
-        if (col.type === 'boolean' || !col.type && typeof val === 'boolean') {
-          return this.renderCellEditBoolean(item, col, val);
-        } else if (col.type === 'color') {
-          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);
-        }
       }
+      if (col.type === 'boolean' || !col.type && typeof val === 'boolean') {
+        return this.renderCellEditBoolean(item, col, val);
+      }
+      if (col.type === 'color') {
+        return this.renderCellEditColor(item, col, val);
+      }
+      if (col.type === 'oid') {
+        return this.renderCellEditObjectID(item, col, val);
+      }
+      if (col.type === 'numeric') {
+        return this.renderCellEditNumber(item, col, val);
+      }
+      return this.renderCellEditString(item, col, val);
     }
   }, {
     key: "renderCellEditSelect",
     value: function renderCellEditSelect(item, col, val) {
       var _this2 = this;
-      return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_material.Select, {
         variant: "standard",
         onChange: function onChange(e) {
           var editData = _this2.state.editData ? _objectSpread({}, _this2.state.editData) : {};
@@ -281,7 +256,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
         },
         value: this.state.editData && this.state.editData[col.field] || val
       }, Object.keys(col.lookup).map(function (v, i) {
-        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
           key: i,
           value: v
         }, col.lookup[v]);
@@ -291,7 +266,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
     key: "renderCellEditString",
     value: function renderCellEditString(item, col, val) {
       var _this3 = this;
-      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_material.TextField, {
         variant: "standard",
         className: this.props.classes.fieldEdit,
         fullWidth: true,
@@ -313,7 +288,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
     key: "renderCellEditNumber",
     value: function renderCellEditNumber(item, col, val) {
       var _this4 = this;
-      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_material.TextField, {
         variant: "standard",
         className: this.props.classes.fieldEdit,
         type: "number",
@@ -364,7 +339,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
     key: "renderCellEditBoolean",
     value: function renderCellEditBoolean(item, col, val) {
       var _this6 = this;
-      return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
         checked: this.state.editData && this.state.editData[col.field] !== undefined ? !!this.state.editData[col.field] : !!val,
         onChange: function onChange(e) {
           var editData = _this6.state.editData ? _objectSpread({}, _this6.state.editData) : {};
@@ -386,7 +361,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
     key: "renderSelectColorDialog",
     value: function renderSelectColorDialog() {
       var _this7 = this;
-      return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
         classes: {
           root: this.props.classes.colorDialog,
           paper: this.props.classes.colorDialog
@@ -416,7 +391,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
       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
-      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.TextField, {
         variant: "standard",
         fullWidth: true,
         className: this.props.classes.fieldEditWithButton,
@@ -438,7 +413,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
             editData: editData
           });
         }
-      }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         className: this.props.classes.fieldButton,
         onClick: function onClick() {
           _this8.selectCallback = function (newColor) {
@@ -458,7 +433,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
           });
         },
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Colorize["default"], null)));
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Colorize, null)));
     }
   }, {
     key: "renderSelectIdDialog",
@@ -478,7 +453,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
               showSelectId: false
             });
           },
-          onOk: function onOk(selected, name) {
+          onOk: function onOk(selected /* , name*/) {
             _this9.setState({
               showSelectId: false,
               selectIdValue: null
@@ -487,9 +462,8 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
             _this9.selectCallback = null;
           }
         });
-      } else {
-        return null;
       }
+      return null;
     }
   }, {
     key: "renderCellEditObjectID",
@@ -497,7 +471,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
       var _this10 = this;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: this.props.classes.fieldEdit
-      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.TextField, {
         variant: "standard",
         fullWidth: true,
         className: this.props.classes.fieldEditWithButton,
@@ -513,7 +487,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
             editData: editData
           });
         }
-      }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         className: this.props.classes.fieldButton,
         onClick: function onClick() {
           _this10.selectCallback = function (selected) {
@@ -533,7 +507,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
           });
         },
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_ViewHeadline["default"], null)));
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ViewHeadline, null)));
     }
   }, {
     key: "renderCellNonEdit",
@@ -543,35 +517,33 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
         val = val[0];
       }
       if (col.type === 'boolean') {
-        return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
           checked: !!val,
           disabled: true,
           inputProps: {
             'aria-label': 'checkbox'
           }
         });
-      } else {
-        return val;
       }
+      return val;
     }
   }, {
     key: "renderCell",
     value: function renderCell(item, col, level, i) {
       if (this.state.editMode === i && col.editable !== 'never' && col.editable !== false) {
-        return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
           key: col.field,
           className: _Utils["default"].clsx(this.props.classes.cell, level && this.props.classes.cellSecondary),
           style: col.cellStyle,
           component: "th"
         }, this.renderCellEdit(item, col));
-      } else {
-        return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
-          key: col.field,
-          className: _Utils["default"].clsx(this.props.classes.cell, level && this.props.classes.cellSecondary),
-          style: col.cellStyle,
-          component: "th"
-        }, this.renderCellNonEdit(item, col));
       }
+      return /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
+        key: col.field,
+        className: _Utils["default"].clsx(this.props.classes.cell, level && this.props.classes.cellSecondary),
+        style: col.cellStyle,
+        component: "th"
+      }, this.renderCellNonEdit(item, col));
     }
   }, {
     key: "renderCellWithSubField",
@@ -597,110 +569,110 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
       }
       if (!level && item.parentId) {
         return null;
-      } else if (level && !item.parentId) {
+      }
+      if (level && !item.parentId) {
         return null; // should never happen
-      } else {
-        // try to find children
-        var opened = this.state.opened.includes(item.id);
-        var children = this.props.data.filter(function (it) {
-          return it.parentId === item.id;
-        });
-        return [/*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
-          key: item.id,
-          className: _Utils["default"].clsx('table-row-' + (item.id || '').toString().replace(/[.$]/g, '_'), this.state.update && this.state.update.includes(item.id) && this.props.classes.glow, this.props.classes.row, level && this.props.classes.rowSecondary, !level && children.length && this.props.classes.rowMainWithChildren, !level && !children.length && this.props.classes.rowMainWithoutChildren, this.state.editMode !== false && this.state.editMode !== i && this.props.classes.rowNoEdit, this.state.deleteMode !== false && this.state.deleteMode !== i && this.props.classes.rowNoEdit)
-        }, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
-          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"])(_this11.state.opened);
-            var pos = opened.indexOf(item.id);
-            if (pos === -1) {
-              opened.push(item.id);
-              opened.sort();
-            } else {
-              opened.splice(pos, 1);
-            }
-            (window._localStorage || window.localStorage).setItem(_this11.props.name || 'iob-table', JSON.stringify(opened));
-            _this11.setState({
-              opened: opened
+      }
+      // try to find children
+      var opened = this.state.opened.includes(item.id);
+      var children = this.props.data.filter(function (it) {
+        return it.parentId === item.id;
+      });
+      return [/*#__PURE__*/_react["default"].createElement(_material.TableRow, {
+        key: item.id,
+        className: _Utils["default"].clsx("table-row-".concat((item.id || '').toString().replace(/[.$]/g, '_')), this.state.update && this.state.update.includes(item.id) && this.props.classes.glow, this.props.classes.row, level && this.props.classes.rowSecondary, !level && children.length && this.props.classes.rowMainWithChildren, !level && !children.length && this.props.classes.rowMainWithoutChildren, this.state.editMode !== false && this.state.editMode !== i && this.props.classes.rowNoEdit, this.state.deleteMode !== false && this.state.deleteMode !== i && this.props.classes.rowNoEdit)
+      }, /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
+        className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellExpand, level && this.props.classes.cellSecondary)
+      }, children.length ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+        onClick: function onClick() {
+          var _opened = (0, _toConsumableArray2["default"])(_this11.state.opened);
+          var pos = _opened.indexOf(item.id);
+          if (pos === -1) {
+            _opened.push(item.id);
+            _opened.sort();
+          } else {
+            _opened.splice(pos, 1);
+          }
+          (window._localStorage || window.localStorage).setItem(_this11.props.name || 'iob-table', JSON.stringify(_opened));
+          _this11.setState({
+            opened: _opened
+          });
+        },
+        size: "small"
+      }, opened ? /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ExpandMore, null) : /*#__PURE__*/_react["default"].createElement(_iconsMaterial.NavigateNext, null)) : null), /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
+        scope: "row",
+        className: _Utils["default"].clsx(this.props.classes.cell, level && this.props.classes.cellSecondary),
+        style: _objectSpread(_objectSpread({}, this.props.columns[0].cellStyle), {
+          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 : _this11.renderCell(item, col, level, i);
+      }), this.props.onUpdate ? /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
+        className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellButton)
+      }, this.state.editMode === i || this.state.deleteMode === i ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+        disabled: this.state.editMode !== false && (!this.state.editData || !Object.keys(this.state.editData).length),
+        onClick: function onClick() {
+          if (_this11.state.editMode !== false) {
+            var newData = JSON.parse(JSON.stringify(item));
+            Object.keys(_this11.state.editData).forEach(function (attr) {
+              return setAttr(newData, attr, _this11.state.editData[attr]);
             });
-          },
-          size: "small"
-        }, opened ? /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null) : /*#__PURE__*/_react["default"].createElement(_NavigateNext["default"], null)) : null), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
-          scope: "row",
-          className: _Utils["default"].clsx(this.props.classes.cell, level && this.props.classes.cellSecondary),
-          style: Object.assign({}, this.props.columns[0].cellStyle, {
-            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 : _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 (_this11.state.editMode !== false) {
-              var newData = JSON.parse(JSON.stringify(item));
-              Object.keys(_this11.state.editData).forEach(function (attr) {
-                return setAttr(newData, attr, _this11.state.editData[attr]);
-              });
-              _this11.setState({
-                editMode: false
-              }, function () {
-                return _this11.props.onUpdate(newData, item);
-              });
-            } else {
-              _this11.setState({
-                deleteMode: false
-              }, function () {
-                return _this11.props.onDelete(item);
-              });
-            }
-          },
-          size: "large"
-        }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)) : /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-          disabled: this.state.editMode !== false,
-          onClick: function onClick() {
-            return _this11.setState({
-              editMode: i,
-              editData: null
+            _this11.setState({
+              editMode: false
+            }, function () {
+              return _this11.props.onUpdate(newData, item);
             });
-          },
-          size: "large"
-        }, /*#__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({
+          } else {
+            _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 _this11.setState({
-              editMode: false,
-              deleteMode: false
-            });
-          },
-          size: "large"
-        }, /*#__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 _this11.setState({
-              deleteMode: i
-            });
-          },
-          size: "large"
-        }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)) : null) : null), !level && opened ? children.map(function (item) {
-          return _this11.renderLine(item, level + 1);
-        }) : null];
-      }
+          }
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Check, null)) : /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+        disabled: this.state.editMode !== false,
+        onClick: function onClick() {
+          return _this11.setState({
+            editMode: i,
+            editData: null
+          });
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Edit, null))) : null, this.props.onDelete && !this.props.onUpdate ? /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
+        className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellButton)
+      }, this.state.deleteMode === i ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+        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(_iconsMaterial.Check, null)) : null) : null, this.props.onUpdate || this.props.onDelete ? /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
+        className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellButton)
+      }, this.state.editMode === i || this.state.deleteMode === i ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+        onClick: function onClick() {
+          return _this11.setState({
+            editMode: false,
+            deleteMode: false
+          });
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null)) : this.props.onDelete ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+        disabled: this.state.deleteMode !== false,
+        onClick: function onClick() {
+          return _this11.setState({
+            deleteMode: i
+          });
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, null)) : null) : null), !level && opened ? children.map(function (it) {
+        return _this11.renderLine(it, level + 1);
+      }) : null];
     }
   }, {
     key: "handleRequestSort",
@@ -715,17 +687,17 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
     key: "renderHead",
     value: function renderHead() {
       var _this12 = this;
-      return /*#__PURE__*/_react["default"].createElement(_TableHead["default"], null, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_material.TableHead, null, /*#__PURE__*/_react["default"].createElement(_material.TableRow, {
         key: "headerRow"
-      }, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
         component: "th",
         className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes.cellExpand)
-      }), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
         component: "th",
-        className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes['width_' + this.props.columns[0].field.replace(/\./g, '_')]),
+        className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes["width_".concat(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 : /*#__PURE__*/_react["default"].createElement(_TableSortLabel["default"], {
+      }, this.props.noSort ? null : /*#__PURE__*/_react["default"].createElement(_material.TableSortLabel, {
         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() {
@@ -734,12 +706,12 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
       }, 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"], {
+        return !i && !col.hidden ? null : /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
           key: col.field,
-          className: _Utils["default"].clsx(_this12.props.classes.cell, _this12.props.classes.cellHeader, _this12.props.classes['width_' + col.field.replace(/\./g, '_')]),
+          className: _Utils["default"].clsx(_this12.props.classes.cell, _this12.props.classes.cellHeader, _this12.props.classes["width_".concat(col.field.replace(/\./g, '_'))]),
           style: col.headerStyle || col.cellStyle,
           component: "th"
-        }, _this12.props.noSort ? null : /*#__PURE__*/_react["default"].createElement(_TableSortLabel["default"], {
+        }, _this12.props.noSort ? null : /*#__PURE__*/_react["default"].createElement(_material.TableSortLabel, {
           active: _this12.state.orderBy === col.field,
           direction: _this12.state.orderBy === col.field ? _this12.state.order : 'asc',
           onClick: function onClick() {
@@ -748,17 +720,17 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
         }, 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"], {
+      }), this.props.onUpdate ? /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
         component: "th",
         className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes.cellButton)
-      }, !this.props.noAdd ? /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+      }, !this.props.noAdd ? /*#__PURE__*/_react["default"].createElement(_material.Fab, {
         color: "primary",
         size: "small",
         disabled: this.state.editMode !== false,
         onClick: function onClick() {
           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"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Add, null)) : null) : null, this.props.onDelete || this.props.onUpdate ? /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
         component: "th",
         className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes.cellButton)
       }) : null));
@@ -782,13 +754,13 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(this.props.classes.tableContainer, this.props.className)
-      }, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.Table, {
         className: this.props.classes.table,
         "aria-label": "simple table",
         size: "small",
         stickyHeader: true
-      }, this.renderHead(), /*#__PURE__*/_react["default"].createElement(_TableBody["default"], null, table.map(function (item) {
-        return _this13.renderLine(item);
+      }, this.renderHead(), /*#__PURE__*/_react["default"].createElement(_material.TableBody, null, table.map(function (it) {
+        return _this13.renderLine(it);
       }))), this.renderSelectIdDialog(), this.renderSelectColorDialog());
     }
   }], [{
@@ -817,16 +789,14 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
             data: props.data,
             update: update
           };
-        } else {
-          return {
-            data: props.data
-          };
         }
-      } else {
         return {
           data: props.data
         };
       }
+      return {
+        data: props.data
+      };
     }
   }]);
   return TreeTable;
@@ -907,7 +877,6 @@ renderTable() {
 TreeTable.propTypes = {
   data: _propTypes["default"].array.isRequired,
   className: _propTypes["default"].string,
-  loading: _propTypes["default"].bool,
   name: _propTypes["default"].string,
   // name of table to save settings in localStorage
   columns: _propTypes["default"].arrayOf(_propTypes["default"].shape({
@@ -931,9 +900,9 @@ TreeTable.propTypes = {
   themeType: _propTypes["default"].string,
   glowOnChange: _propTypes["default"].bool,
   socket: _propTypes["default"].object,
-  // only if oid type is used
+  // only if an oid type is used
   levelShift: _propTypes["default"].number // Shift in pixels for every level
 };
-var _default = (0, _withStyles["default"])(styles)(TreeTable);
+var _default = (0, _styles.withStyles)(styles)(TreeTable);
 exports["default"] = _default;
 //# sourceMappingURL=TreeTable.js.map