@iobroker/adapter-react-v5 0.0.2

package/Components/TreeTable.js

@@ -0,0 +1,1030 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+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 _SelectID = _interopRequireDefault(require("../Dialogs/SelectID"));
+
+var _Utils = _interopRequireDefault(require("./Utils"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function getAttr(obj, attr, lookup) {
+  if (typeof attr === 'string') {
+    attr = attr.split('.');
+  }
+
+  if (!obj) {
+    return null;
+  }
+
+  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);
+  }
+}
+
+function setAttr(obj, attr, value) {
+  if (typeof attr === 'string') {
+    attr = attr.split('.');
+  }
+
+  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 styles = function styles(theme) {
+  return {
+    tableContainer: {
+      width: '100%',
+      height: '100%',
+      overflow: 'auto'
+    },
+    table: {
+      width: '100%',
+      minWidth: 800,
+      maxWidth: 1920
+    },
+    cell: {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 4,
+      paddingRight: 4
+    },
+    rowMainWithChildren: {},
+    rowMainWithoutChildren: {},
+    rowNoEdit: {
+      opacity: 0.3
+    },
+    cellExpand: {
+      width: 30
+    },
+    cellButton: {
+      width: 30
+    },
+    cellHeader: {
+      fontWeight: 'bold',
+      background: theme.palette.mode === 'dark' ? '#888' : '#888',
+      color: theme.palette.mode === 'dark' ? '#EEE' : '#111',
+      height: 48,
+      wordBreak: 'break-word',
+      whiteSpace: 'pre'
+    },
+    width_name_nicknames: {
+      maxWidth: 150
+    },
+    width_ioType: {
+      maxWidth: 100
+    },
+    width_type: {
+      maxWidth: 100
+    },
+    width_displayTraits: {
+      maxWidth: 100
+    },
+    width_roomHint: {
+      maxWidth: 100
+    },
+    rowSecondary: {
+      fontStyle: 'italic'
+    },
+    cellSecondary: {
+      fontSize: 10
+    },
+    visuallyHidden: {
+      border: 0,
+      clip: 'rect(0 0 0 0)',
+      height: 1,
+      margin: -1,
+      overflow: 'hidden',
+      padding: 0,
+      position: 'absolute',
+      top: 20,
+      width: 1
+    },
+    fieldEditWithButton: {
+      width: "calc(100% - 33px)",
+      display: 'inline-block'
+    },
+    fieldEdit: {
+      width: "100%",
+      display: 'inline-block',
+      lineHeight: '50px',
+      verticalAlign: 'middle'
+    },
+    fieldButton: {
+      width: 30,
+      display: 'inline-block'
+    },
+    colorDialog: {
+      overflow: 'hidden',
+      padding: 15
+    },
+    subText: {
+      fontSize: 10,
+      fontStyle: 'italic'
+    },
+    glow: {
+      animation: 'glow 0.2s 2 alternate'
+    }
+  };
+};
+
+function descendingComparator(a, b, orderBy, lookup) {
+  var _a = getAttr(a, orderBy, lookup) || '';
+
+  var _b = getAttr(b, orderBy, lookup) || '';
+
+  if (_b < _a) {
+    return -1;
+  } else if (_b > _a) {
+    return 1;
+  } else {
+    return 0;
+  }
+}
+
+function getComparator(order, orderBy, lookup) {
+  return order === 'desc' ? function (a, b) {
+    return descendingComparator(a, b, orderBy, lookup);
+  } : function (a, b) {
+    return -descendingComparator(a, b, orderBy, lookup);
+  };
+}
+
+function stableSort(array, comparator) {
+  var stabilizedThis = array.map(function (el, index) {
+    return [el, index];
+  });
+  stabilizedThis.sort(function (a, b) {
+    var order = comparator(a[0], b[0]);
+
+    if (order) {
+      return order;
+    } else {
+      return a[1] - b[1];
+    }
+  });
+  return stabilizedThis.map(function (el) {
+    return el[0];
+  });
+}
+
+var TreeTable = /*#__PURE__*/function (_React$Component) {
+  _inherits(TreeTable, _React$Component);
+
+  var _super = _createSuper(TreeTable);
+
+  function TreeTable(props) {
+    var _this;
+
+    _classCallCheck(this, TreeTable);
+
+    _this = _super.call(this, props);
+    var opened = window.localStorage.getItem(_this.props.name || 'iob-table') || '[]';
+
+    try {
+      opened = JSON.parse(opened) || [];
+    } catch (e) {
+      opened = [];
+    }
+
+    if (!Array.isArray(opened)) {
+      opened = [];
+    }
+
+    _this.state = {
+      opened: opened,
+      editMode: false,
+      deleteMode: false,
+      editData: null,
+      order: 'asc',
+      update: null,
+      orderBy: _this.props.columns[0].field,
+      useTable: false,
+      showSelectColor: false,
+      glowOnChange: props.glowOnChange
+    };
+    return _this;
+  }
+
+  _createClass(TreeTable, [{
+    key: "renderCellEdit",
+    value: function renderCellEdit(item, col) {
+      var val = getAttr(item, col.field);
+
+      if (Array.isArray(val)) {
+        val = val[0];
+      }
+
+      if (col.lookup) {
+        return this.renderCellEditSelect(item, col, val);
+      }
+
+      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 {
+          return this.renderCellEditString(item, col, val);
+        }
+      }
+    }
+  }, {
+    key: "renderCellEditSelect",
+    value: function renderCellEditSelect(item, col, val) {
+      var _this2 = this;
+
+      return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        variant: "standard",
+        onChange: function onChange(e) {
+          var editData = _this2.state.editData ? _objectSpread({}, _this2.state.editData) : {};
+
+          if (e.target.value === val) {
+            delete editData[col.field];
+          } else {
+            editData[col.field] = e.target.value;
+          }
+
+          _this2.setState({
+            editData: editData
+          });
+        },
+        value: this.state.editData && this.state.editData[col.field] || val
+      }, Object.keys(col.lookup).map(function (v) {
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          value: v
+        }, col.lookup[v]);
+      }));
+    }
+  }, {
+    key: "renderCellEditString",
+    value: function renderCellEditString(item, col, val) {
+      var _this3 = this;
+
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        variant: "standard",
+        className: this.props.classes.fieldEdit,
+        fullWidth: true,
+        value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val,
+        onChange: function onChange(e) {
+          var editData = _this3.state.editData ? _objectSpread({}, _this3.state.editData) : {};
+
+          if (e.target.value === val) {
+            delete editData[col.field];
+          } else {
+            editData[col.field] = e.target.value;
+          }
+
+          _this3.setState({
+            editData: editData
+          });
+        }
+      });
+    }
+  }, {
+    key: "renderCellEditCustom",
+    value: function renderCellEditCustom(item, col, val) {
+      var _this4 = this;
+
+      var EditComponent = col.editComponent;
+      return /*#__PURE__*/_react["default"].createElement(EditComponent, {
+        value: val,
+        rowData: item,
+        onChange: function onChange(newVal) {
+          var editData = _this4.state.editData ? _objectSpread({}, _this4.state.editData) : {};
+
+          if (newVal === val) {
+            delete editData[col.field];
+          } else {
+            editData[col.field] = newVal;
+          }
+
+          _this4.setState({
+            editData: editData
+          });
+        }
+      });
+    }
+  }, {
+    key: "renderCellEditBoolean",
+    value: function renderCellEditBoolean(item, col, val) {
+      var _this5 = 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) : {};
+
+          if (e.target.checked === !!val) {
+            delete editData[col.field];
+          } else {
+            editData[col.field] = e.target.checked;
+          }
+
+          _this5.setState({
+            editData: editData
+          });
+        },
+        inputProps: {
+          'aria-label': 'checkbox'
+        }
+      });
+    }
+  }, {
+    key: "renderSelectColorDialog",
+    value: function renderSelectColorDialog() {
+      var _this6 = 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({
+            showSelectColor: false
+          });
+        },
+        open: this.state.showSelectColor
+      }, /*#__PURE__*/_react["default"].createElement(_reactColorful.HexColorPicker, {
+        color: this.state.selectIdValue,
+        onChange: function onChange(color) {
+          _this6.setState({
+            selectIdValue: color
+          }, function () {
+            return _this6.selectCallback && _this6.selectCallback(color);
+          });
+        }
+      }));
+    }
+  }, {
+    key: "renderCellEditColor",
+    value: function renderCellEditColor(item, col, val) {
+      var _this7 = 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
+      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        variant: "standard",
+        fullWidth: true,
+        className: this.props.classes.fieldEditWithButton,
+        value: _val,
+        inputProps: {
+          style: {
+            backgroundColor: _val,
+            color: _Utils["default"].isUseBright(_val, null) ? '#FFF' : '#000'
+          }
+        },
+        onChange: function onChange(e) {
+          var editData = _this7.state.editData ? _objectSpread({}, _this7.state.editData) : {};
+
+          if (e.target.value === val) {
+            delete editData[col.field];
+          } else {
+            editData[col.field] = e.target.value;
+          }
+
+          _this7.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) : {};
+
+            if (newColor === val) {
+              delete editData[col.field];
+            } else {
+              editData[col.field] = newColor;
+            }
+
+            _this7.setState({
+              editData: editData
+            });
+          };
+
+          _this7.setState({
+            showSelectColor: true,
+            selectIdValue: val
+          });
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_Colorize["default"], null)));
+    }
+  }, {
+    key: "renderSelectIdDialog",
+    value: function renderSelectIdDialog() {
+      var _this8 = this;
+
+      if (this.state.showSelectId) {
+        return /*#__PURE__*/_react["default"].createElement(_SelectID["default"], {
+          key: "tableSelect",
+          imagePrefix: "../..",
+          dialogName: this.props.adapterName,
+          themeType: this.props.themeType,
+          socket: this.props.socket,
+          statesOnly: true,
+          selected: this.state.selectIdValue,
+          onClose: function onClose() {
+            return _this8.setState({
+              showSelectId: false
+            });
+          },
+          onOk: function onOk(selected, name) {
+            _this8.setState({
+              showSelectId: false,
+              selectIdValue: null
+            });
+
+            _this8.selectCallback && _this8.selectCallback(selected);
+            _this8.selectCallback = null;
+          }
+        });
+      } else {
+        return null;
+      }
+    }
+  }, {
+    key: "renderCellEditObjectID",
+    value: function renderCellEditObjectID(item, col, val) {
+      var _this9 = this;
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.fieldEdit
+      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        variant: "standard",
+        fullWidth: true,
+        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) : {};
+
+          if (e.target.value === val) {
+            delete editData[col.field];
+          } else {
+            editData[col.field] = e.target.value;
+          }
+
+          _this9.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) : {};
+
+            if (selected === val) {
+              delete editData[col.field];
+            } else {
+              editData[col.field] = selected;
+            }
+
+            _this9.setState({
+              editData: editData
+            });
+          };
+
+          _this9.setState({
+            showSelectId: true,
+            selectIdValue: val
+          });
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_ViewHeadline["default"], null)));
+    }
+  }, {
+    key: "renderCellNonEdit",
+    value: function renderCellNonEdit(item, col) {
+      var val = getAttr(item, col.field, col.lookup);
+
+      if (Array.isArray(val)) {
+        val = val[0];
+      }
+
+      if (col.type === 'boolean') {
+        return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+          checked: !!val,
+          disabled: true,
+          inputProps: {
+            'aria-label': 'checkbox'
+          }
+        });
+      } else {
+        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"], {
+          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));
+      }
+    }
+  }, {
+    key: "renderCellWithSubField",
+    value: function renderCellWithSubField(item, col) {
+      var main = getAttr(item, col.field, col.lookup);
+      var sub = getAttr(item, col.subField, col.subLookup);
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.mainText
+      }, main), /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.subText,
+        style: col.subStyle || {}
+      }, sub));
+    }
+  }, {
+    key: "renderLine",
+    value: function renderLine(item, level) {
+      var _this10 = this;
+
+      level = level || 0;
+      var i = this.props.data.indexOf(item);
+
+      if (!item) {
+        return null;
+      }
+
+      if (!level && item.parentId) {
+        return null;
+      } else if (level && !item.parentId) {
+        return null; // should never happens
+      } else {
+        // try to find children
+        var children = this.props.data.filter(function (it) {
+          return it.parentId === item.id;
+        });
+        var opened = this.state.opened.includes(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 = _toConsumableArray(_this10.state.opened);
+
+            var pos = opened.indexOf(item.id);
+
+            if (pos === -1) {
+              opened.push(item.id);
+              opened.sort();
+            } else {
+              opened.splice(pos, 1);
+            }
+
+            window.localStorage.setItem(_this10.props.name || 'iob-table', JSON.stringify(opened));
+
+            _this10.setState({
+              opened: opened
+            });
+          },
+          size: "large"
+        }, 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: this.props.columns[0].cellStyle
+        }, 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);
+        }), 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) {
+              var newData = JSON.parse(JSON.stringify(item));
+              Object.keys(_this10.state.editData).forEach(function (attr) {
+                return setAttr(newData, attr, _this10.state.editData[attr]);
+              });
+
+              _this10.setState({
+                editMode: false
+              }, function () {
+                return _this10.props.onUpdate(newData, item);
+              });
+            } else {
+              _this10.setState({
+                deleteMode: false
+              }, function () {
+                return _this10.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 _this10.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"], {
+          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({
+              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 _this10.setState({
+              deleteMode: i
+            });
+          },
+          size: "large"
+        }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)) : null) : null), !level && this.state.opened.includes(item.id) ? children.map(function (item) {
+          return _this10.renderLine(item, level + 1);
+        }) : null];
+      }
+    }
+  }, {
+    key: "handleRequestSort",
+    value: function handleRequestSort(property) {
+      var isAsc = this.state.orderBy === property && this.state.order === 'asc';
+      this.setState({
+        order: isAsc ? 'desc' : 'asc',
+        orderBy: property
+      });
+    }
+  }, {
+    key: "renderHead",
+    value: function renderHead() {
+      var _this11 = this;
+
+      return /*#__PURE__*/_react["default"].createElement(_TableHead["default"], null, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
+        key: "headerRow"
+      }, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+        component: "th",
+        className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes.cellExpand)
+      }), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+        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.state.orderBy === this.props.columns[0].field ? this.state.order : false
+      }, /*#__PURE__*/_react["default"].createElement(_TableSortLabel["default"], {
+        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);
+        }
+      }, 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, '_')]),
+          style: col.headerStyle || col.cellStyle,
+          component: "th"
+        }, /*#__PURE__*/_react["default"].createElement(_TableSortLabel["default"], {
+          active: _this11.state.orderBy === col.field,
+          direction: _this11.state.orderBy === col.field ? _this11.state.order : 'asc',
+          onClick: function onClick() {
+            return _this11.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));
+      }), 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)
+      }, !this.props.noAdd ? /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+        color: "primary",
+        size: "small",
+        disabled: this.state.editMode !== false,
+        onClick: function onClick() {
+          return _this11.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",
+        className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes.cellButton)
+      }) : null));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this12 = this;
+
+      var lookup = this.props.columns.find(function (col) {
+        return col.field === _this12.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({
+            update: null
+          });
+        }, 500);
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: _Utils["default"].clsx(this.props.classes.tableContainer, this.props.className)
+      }, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+        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 _this12.renderLine(item);
+      }))), this.renderSelectIdDialog(), this.renderSelectColorDialog());
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (props.glowOnChange) {
+        var update = [];
+        var count = 0;
+
+        if (props.data && state.data) {
+          props.data.forEach(function (line) {
+            count++;
+            var oldLine = state.data.find(function (it) {
+              return it.id === line.id;
+            });
+
+            if (oldLine) {
+              if (JSON.stringify(oldLine) !== JSON.stringify(line)) {
+                update.push(line.id);
+              }
+            } else {
+              update.push(line.id);
+            }
+          });
+        }
+
+        if (update.length && update.length !== count) {
+          return {
+            data: props.data,
+            update: update
+          };
+        } else {
+          return {
+            data: props.data
+          };
+        }
+      } else {
+        return {
+          data: props.data
+        };
+      }
+    }
+  }]);
+
+  return TreeTable;
+}(_react["default"].Component);
+/*
+const columns = [
+    {
+        title: 'Name of field', // required, else it will be "field"
+        field: 'fieldIdInData', // required
+        editable: false,        // or true [default - true]
+        cellStyle: {            // CSS style - // optional
+            maxWidth: '12rem',
+            overflow: 'hidden',
+            wordBreak: 'break-word'
+        },
+        lookup: {               // optional => edit will be automatically "SELECT"
+            'value1': 'text1',
+            'value2': 'text2',
+        }
+    },
+    {
+        title: 'Type',          // required, else it will be "field"
+        field: 'myType',        // required
+        editable: true,         // or true [default - true]
+        lookup: {               // optional => edit will be automatically "SELECT"
+            'number': 'Number',
+            'string': 'String',
+            'boolean': 'Boolean',
+        },
+        type: 'number/string/color/oid/icon/boolean', // oid=ObjectID,icon=base64-icon
+        editComponent: props =>
+            <div>Prefix&#123; <br/>
+                <textarea
+                    rows={4}
+                    style={{width: '100%', resize: 'vertical'}}
+                    value={props.value}
+                    onChange={e => props.onChange(e.target.value)}
+                />
+                Suffix
+            </div>,
+    },
+];
+*/
+
+/* const data = [
+    {
+        id: 'UniqueID1' // required
+        fieldIdInData: 'Name1',
+        myType: 'number',
+    },
+    {
+        id: 'UniqueID2' // required
+        fieldIdInData: 'Name12',
+        myType: 'string',
+    },
+];
+ */
+
+/*
+// STYLES
+const styles = theme => ({
+    tableDiv: {
+        width: '100%',
+        overflow: 'hidden',
+        height: 'calc(100% - 48px)',
+    },
+});
+// renderTable
+renderTable() {
+    return <div className={this.props.classes.tableDiv}>
+        <TreeTable
+            columns={this.columns}
+            data={lines}
+            onUpdate={(newData, oldData) => console.log('Update: ' + JSON.stringify(newData))}
+            onDelete={oldData => console.log('Delete: ' + JSON.stringify(oldData))}
+        />
+    </div>;
+}
+ */
+
+
+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({
+    cellStyle: _propTypes["default"].object,
+    editComponent: _propTypes["default"].element,
+    field: _propTypes["default"].string,
+    headerStyle: _propTypes["default"].object,
+    hidden: _propTypes["default"].bool,
+    lookup: _propTypes["default"].object,
+    editable: _propTypes["default"].bool,
+    title: _propTypes["default"].string,
+    type: _propTypes["default"].oneOf(['string', 'boolean', 'numeric', 'icon', // todo: not yet implemented
+    'oid', 'color'])
+  })).isRequired,
+  noSort: _propTypes["default"].bool,
+  // todo
+  onUpdate: _propTypes["default"].func,
+  onDelete: _propTypes["default"].func,
+  noAdd: _propTypes["default"].bool,
+  // hide add button
+  themeType: _propTypes["default"].string,
+  glowOnChange: _propTypes["default"].bool,
+  socket: _propTypes["default"].object // only if oid type is used
+
+};
+
+var _default = (0, _withStyles["default"])(styles)(TreeTable);
+
+exports["default"] = _default;
+//# sourceMappingURL=TreeTable.js.map