@iobroker/adapter-react-v5 4.2.1 → 4.3.0

package/Components/TreeTable.js

@@ -16,28 +16,8 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 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; }
@@ -266,7 +246,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
     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 +261,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 +271,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 +293,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 +344,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 +366,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 +396,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 +418,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 +438,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",
@@ -497,7 +477,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 +493,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 +513,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,7 +523,7 @@ 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: {
@@ -558,14 +538,14 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
     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"], {
+        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,
@@ -605,12 +585,12 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
         var children = this.props.data.filter(function (it) {
           return it.parentId === item.id;
         });
-        return [/*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
+        return [/*#__PURE__*/_react["default"].createElement(_material.TableRow, {
           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("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(_IconButton["default"], {
+        }, 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);
@@ -626,7 +606,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
             });
           },
           size: "small"
-        }, opened ? /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null) : /*#__PURE__*/_react["default"].createElement(_NavigateNext["default"], null)) : null), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+        }, 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: Object.assign({}, this.props.columns[0].cellStyle, {
@@ -634,9 +614,9 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
           })
         }, 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"], {
+        }), 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(_IconButton["default"], {
+        }, 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) {
@@ -658,7 +638,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
             }
           },
           size: "large"
-        }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)) : /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Check, null)) : /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           disabled: this.state.editMode !== false,
           onClick: function onClick() {
             return _this11.setState({
@@ -667,9 +647,9 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
             });
           },
           size: "large"
-        }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], null))) : null, this.props.onDelete && !this.props.onUpdate ? /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+        }, /*#__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(_IconButton["default"], {
+        }, 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({
@@ -679,9 +659,9 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
             });
           },
           size: "large"
-        }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)) : null) : null, this.props.onUpdate || this.props.onDelete ? /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+        }, /*#__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(_IconButton["default"], {
+        }, this.state.editMode === i || this.state.deleteMode === i ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           onClick: function onClick() {
             return _this11.setState({
               editMode: false,
@@ -689,7 +669,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
             });
           },
           size: "large"
-        }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null)) : this.props.onDelete ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        }, /*#__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({
@@ -697,7 +677,7 @@ var TreeTable = /*#__PURE__*/function (_React$Component) {
             });
           },
           size: "large"
-        }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)) : null) : null), !level && opened ? children.map(function (item) {
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, null)) : null) : null), !level && opened ? children.map(function (item) {
           return _this11.renderLine(item, level + 1);
         }) : null];
       }
@@ -715,17 +695,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, '_')]),
         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 +714,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 +728,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,12 +762,12 @@ 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) {
+      }, this.renderHead(), /*#__PURE__*/_react["default"].createElement(_material.TableBody, null, table.map(function (item) {
         return _this13.renderLine(item);
       }))), this.renderSelectIdDialog(), this.renderSelectColorDialog());
     }
@@ -931,7 +911,7 @@ 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);