npm - @iobroker/adapter-react-v5 - Versions diffs - 4.13.4 → 4.13.6 - Mend

@iobroker/adapter-react-v5 4.13.4 → 4.13.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/Components/FileBrowser.js +162 -101
package/Components/TreeTable.d.ts +41 -2
package/Components/TreeTable.js +460 -751
package/LegacyConnection.js +6 -6
package/README.md +6 -2
package/package.json +5 -5
package/Components/TreeTable.js.map +0 -1

package/Components/TreeTable.js CHANGED Viewed

@@ -1,804 +1,543 @@
 "use strict";
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports["default"] = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/styles");
-var _reactColorful = require("react-colorful");
-var _material = require("@mui/material");
-var _iconsMaterial = require("@mui/icons-material");
-var _SelectID = _interopRequireDefault(require("../Dialogs/SelectID"));
-var _Utils = _interopRequireDefault(require("./Utils"));
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const styles_1 = require("@mui/styles");
+const react_colorful_1 = require("react-colorful");
+const material_1 = require("@mui/material");
+const icons_material_1 = require("@mui/icons-material");
+const SelectID_1 = __importDefault(require("../Dialogs/SelectID"));
+const Utils_1 = __importDefault(require("./Utils"));
 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]]];
+    if (typeof attr === 'string') {
+        attr = attr.split('.');
+    }
+    if (!obj) {
+        return null;
     }
-    return obj[attr[0]];
-  }
-  var name = attr.shift();
-  return getAttr(obj[name], attr);
+    if (attr.length === 1) {
+        if (lookup && lookup[obj[attr[0]]]) {
+            return lookup[obj[attr[0]]];
+        }
+        return obj[attr[0]];
+    }
+    const 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;
-  }
-  var name = attr.shift();
-  if (obj[name] === null || obj[name] === undefined) {
-    obj[name] = {};
-  }
-  return setAttr(obj[name], attr, value);
+    if (typeof attr === 'string') {
+        attr = attr.split('.');
+    }
+    if (attr.length === 1) {
+        return obj[attr[0]] = value;
+    }
+    const name = attr.shift();
+    if (obj[name] === null || obj[name] === undefined) {
+        obj[name] = {};
+    }
+    return setAttr(obj[name], attr, value);
 }
-var styles = function styles(theme) {
-  return {
+const styles = (theme) => ({
     tableContainer: {
-      width: '100%',
-      height: '100%',
-      overflow: 'auto'
+        width: '100%',
+        height: '100%',
+        overflow: 'auto',
     },
     table: {
-      width: '100%',
-      minWidth: 800,
-      maxWidth: 1920
+        width: '100%',
+        minWidth: 800,
+        maxWidth: 1920,
     },
     cell: {
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingLeft: 4,
-      paddingRight: 4
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 4,
+        paddingRight: 4,
     },
     rowMainWithChildren: {},
     rowMainWithoutChildren: {},
     rowNoEdit: {
-      opacity: 0.3
+        opacity: 0.3,
     },
     cellExpand: {
-      width: 30
+        width: 30,
     },
     cellButton: {
-      width: 30
+        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'
+        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
+        maxWidth: 150,
     },
     width_ioType: {
-      maxWidth: 100
+        maxWidth: 100,
     },
     width_type: {
-      maxWidth: 100
+        maxWidth: 100,
     },
     width_displayTraits: {
-      maxWidth: 100
+        maxWidth: 100,
     },
     width_roomHint: {
-      maxWidth: 100
+        maxWidth: 100,
     },
     rowSecondary: {
-      fontStyle: 'italic'
+        fontStyle: 'italic',
     },
     cellSecondary: {
-      fontSize: 10
+        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
+        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'
+        width: 'calc(100% - 33px)',
+        display: 'inline-block',
     },
     fieldEdit: {
-      width: '100%',
-      display: 'inline-block',
-      lineHeight: '50px',
-      verticalAlign: 'middle'
+        width: '100%',
+        display: 'inline-block',
+        lineHeight: '50px',
+        verticalAlign: 'middle',
     },
     fieldButton: {
-      width: 30,
-      display: 'inline-block'
+        width: 30,
+        display: 'inline-block',
     },
     colorDialog: {
-      overflow: 'hidden',
-      padding: 15
+        overflow: 'hidden',
+        padding: 15,
     },
     subText: {
-      fontSize: 10,
-      fontStyle: 'italic'
+        fontSize: 10,
+        fontStyle: 'italic',
     },
     glow: {
-      animation: 'glow 0.2s 2 alternate'
-    }
-  };
-};
+        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;
-  }
-  if (_b > _a) {
-    return 1;
-  }
-  return 0;
+    const _a = getAttr(a, orderBy, lookup) || '';
+    const _b = getAttr(b, orderBy, lookup) || '';
+    if (_b < _a) {
+        return -1;
+    }
+    if (_b > _a) {
+        return 1;
+    }
+    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);
-  };
+    return order === 'desc'
+        ? (a, b) => descendingComparator(a, b, orderBy, lookup)
+        : (a, b) => -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;
-    }
-    return a[1] - b[1];
-  });
-  return stabilizedThis.map(function (el) {
-    return el[0];
-  });
+    const stabilizedThis = array.map((el, index) => ({ e: el, i: index }));
+    stabilizedThis.sort((a, b) => {
+        const order = comparator(a.e, b.e);
+        if (order) {
+            return order;
+        }
+        return a.i - b.i;
+    });
+    return stabilizedThis.map(item => item.e);
 }
-var TreeTable = /*#__PURE__*/function (_React$Component) {
-  function TreeTable(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, TreeTable);
-    _this = _callSuper(this, TreeTable, [props]);
-    var opened = (window._localStorage || 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,
-      showSelectColor: false
-    };
-    return _this;
-  }
-  (0, _inherits2["default"])(TreeTable, _React$Component);
-  return (0, _createClass2["default"])(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);
-      }
-      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(_material.Select, {
-        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, i) {
-        return /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-          key: i,
-          value: v
-        }, col.lookup[v]);
-      }));
-    }
-  }, {
-    key: "renderCellEditString",
-    value: function renderCellEditString(item, col, val) {
-      var _this3 = this;
-      return /*#__PURE__*/_react["default"].createElement(_material.TextField, {
-        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
-          });
+class TreeTable extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.selectCallback = null;
+        this.updateTimeout = null;
+        let opened = (window._localStorage || window.localStorage).getItem(this.props.name || 'iob-table') || '[]';
+        try {
+            opened = JSON.parse(opened) || [];
         }
-      });
-    }
-  }, {
-    key: "renderCellEditNumber",
-    value: function renderCellEditNumber(item, col, val) {
-      var _this4 = this;
-      return /*#__PURE__*/_react["default"].createElement(_material.TextField, {
-        variant: "standard",
-        className: this.props.classes.fieldEdit,
-        type: "number",
-        fullWidth: true,
-        value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val,
-        onChange: function onChange(e) {
-          var editData = _this4.state.editData ? _objectSpread({}, _this4.state.editData) : {};
-          if (e.target.value === val) {
-            delete editData[col.field];
-          } else {
-            editData[col.field] = e.target.value;
-          }
-          _this4.setState({
-            editData: editData
-          });
+        catch (e) {
+            opened = [];
         }
-      });
-    }
-  }, {
-    key: "renderCellEditCustom",
-    value: function renderCellEditCustom(item, col, val) {
-      var _this5 = this;
-      var EditComponent = col.editComponent;
-      // use new value if exists
-      if (this.state.editData && this.state.editData[col.field] !== undefined) {
-        val = this.state.editData[col.field];
-        item = JSON.parse(JSON.stringify(item));
-        item[col.field] = val;
-      }
-      return /*#__PURE__*/_react["default"].createElement(EditComponent, {
-        value: val,
-        rowData: item,
-        onChange: function onChange(newVal) {
-          var editData = _this5.state.editData ? _objectSpread({}, _this5.state.editData) : {};
-          if (newVal === val) {
-            delete editData[col.field];
-          } else {
-            editData[col.field] = newVal;
-          }
-          _this5.setState({
-            editData: editData
-          });
+        if (!Array.isArray(opened)) {
+            opened = [];
         }
-      });
+        this.state = {
+            opened,
+            editMode: false,
+            deleteMode: false,
+            editData: null,
+            order: 'asc',
+            update: null,
+            orderBy: this.props.columns[0].field,
+            showSelectColor: false,
+        };
     }
-  }, {
-    key: "renderCellEditBoolean",
-    value: function renderCellEditBoolean(item, col, val) {
-      var _this6 = this;
-      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) : {};
-          if (e.target.checked === !!val) {
-            delete editData[col.field];
-          } else {
-            editData[col.field] = e.target.checked;
-          }
-          _this6.setState({
-            editData: editData
-          });
-        },
-        inputProps: {
-          'aria-label': 'checkbox'
+    static getDerivedStateFromProps(props, state) {
+        if (props.glowOnChange) {
+            const update = [];
+            let count = 0;
+            if (props.data && state.data) {
+                props.data.forEach(line => {
+                    var _c;
+                    count++;
+                    const oldLine = (_c = state.data) === null || _c === void 0 ? void 0 : _c.find(it => 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 };
+            }
+            return { data: props.data };
         }
-      });
+        return { data: props.data };
     }
-  }, {
-    key: "renderSelectColorDialog",
-    value: function renderSelectColorDialog() {
-      var _this7 = this;
-      return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
-        classes: {
-          root: this.props.classes.colorDialog,
-          paper: this.props.classes.colorDialog
-        },
-        onClose: function onClose() {
-          _this7.selectCallback = null;
-          _this7.setState({
-            showSelectColor: false
-          });
-        },
-        open: this.state.showSelectColor
-      }, /*#__PURE__*/_react["default"].createElement(_reactColorful.HexColorPicker, {
-        color: this.state.selectIdValue,
-        onChange: function onChange(color) {
-          return _this7.setState({
-            selectIdValue: color
-          }, function () {
-            return _this7.selectCallback && _this7.selectCallback(color);
-          });
+    renderCellEdit(item, col) {
+        let val = getAttr(item, col.field);
+        if (Array.isArray(val)) {
+            val = val[0];
         }
-      }));
-    }
-  }, {
-    key: "renderCellEditColor",
-    value: function renderCellEditColor(item, col, val) {
-      var _this8 = this;
-      var _val = this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.fieldEdit
-      }, /*#__PURE__*/_react["default"].createElement(_material.TextField, {
-        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 = _this8.state.editData ? _objectSpread({}, _this8.state.editData) : {};
-          if (e.target.value === val) {
-            delete editData[col.field];
-          } else {
-            editData[col.field] = e.target.value;
-          }
-          _this8.setState({
-            editData: editData
-          });
+        if (col.lookup) {
+            return this.renderCellEditSelect(item, col, val);
         }
-      }), /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
-        className: this.props.classes.fieldButton,
-        onClick: function onClick() {
-          _this8.selectCallback = function (newColor) {
-            var editData = _this8.state.editData ? _objectSpread({}, _this8.state.editData) : {};
-            if (newColor === val) {
-              delete editData[col.field];
-            } else {
-              editData[col.field] = newColor;
-            }
-            _this8.setState({
-              editData: editData
-            });
-          };
-          _this8.setState({
-            showSelectColor: true,
-            selectIdValue: val
-          });
-        },
-        size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Colorize, null)));
+        if (col.editComponent) {
+            return this.renderCellEditCustom(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: "renderSelectIdDialog",
-    value: function renderSelectIdDialog() {
-      var _this9 = 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 _this9.setState({
-              showSelectId: false
-            });
-          },
-          onOk: function onOk(selected /* , name*/) {
-            _this9.setState({
-              showSelectId: false,
-              selectIdValue: null
-            });
-            _this9.selectCallback && _this9.selectCallback(selected);
-            _this9.selectCallback = null;
-          }
-        });
-      }
-      return null;
+    renderCellEditSelect(item, col, val) {
+        return react_1.default.createElement(material_1.Select, { variant: "standard", onChange: e => {
+                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
+                if (e.target.value === val) {
+                    delete editData[col.field];
+                }
+                else {
+                    editData[col.field] = e.target.value;
+                }
+                this.setState({ editData });
+            }, value: (this.state.editData && this.state.editData[col.field]) || val }, col.lookup && Object.keys(col.lookup)
+            .map((v, i) => { var _c; return react_1.default.createElement(material_1.MenuItem, { key: i, value: v }, (_c = col.lookup) === null || _c === void 0 ? void 0 : _c[v]); }));
     }
-  }, {
-    key: "renderCellEditObjectID",
-    value: function renderCellEditObjectID(item, col, val) {
-      var _this10 = this;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.fieldEdit
-      }, /*#__PURE__*/_react["default"].createElement(_material.TextField, {
-        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 = _this10.state.editData ? _objectSpread({}, _this10.state.editData) : {};
-          if (e.target.value === val) {
-            delete editData[col.field];
-          } else {
-            editData[col.field] = e.target.value;
-          }
-          _this10.setState({
-            editData: editData
-          });
+    renderCellEditString(item, col, val) {
+        return react_1.default.createElement(material_1.TextField, { 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: e => {
+                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
+                if (e.target.value === val) {
+                    delete editData[col.field];
+                }
+                else {
+                    editData[col.field] = e.target.value;
+                }
+                this.setState({ editData });
+            } });
+    }
+    renderCellEditNumber(item, col, val) {
+        return react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.fieldEdit, type: "number", fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => {
+                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
+                if (e.target.value === val) {
+                    delete editData[col.field];
+                }
+                else {
+                    editData[col.field] = e.target.value;
+                }
+                this.setState({ editData });
+            } });
+    }
+    renderCellEditCustom(item, col, val) {
+        const EditComponent = col.editComponent;
+        // use new value if exists
+        if (this.state.editData && this.state.editData[col.field] !== undefined) {
+            val = this.state.editData[col.field];
+            item = JSON.parse(JSON.stringify(item));
+            item[col.field] = val;
         }
-      }), /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
-        className: this.props.classes.fieldButton,
-        onClick: function onClick() {
-          _this10.selectCallback = function (selected) {
-            var editData = _this10.state.editData ? _objectSpread({}, _this10.state.editData) : {};
-            if (selected === val) {
-              delete editData[col.field];
-            } else {
-              editData[col.field] = selected;
-            }
-            _this10.setState({
-              editData: editData
-            });
-          };
-          _this10.setState({
-            showSelectId: true,
-            selectIdValue: val
-          });
-        },
-        size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ViewHeadline, null)));
+        return react_1.default.createElement(EditComponent, { value: val, rowData: item, onChange: (newVal) => {
+                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
+                if (newVal === val) {
+                    delete editData[col.field];
+                }
+                else {
+                    editData[col.field] = newVal;
+                }
+                this.setState({ editData });
+            } });
     }
-  }, {
-    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(_material.Checkbox, {
-          checked: !!val,
-          disabled: true,
-          inputProps: {
-            'aria-label': 'checkbox'
-          }
-        });
-      }
-      return val;
+    renderCellEditBoolean(item, col, val) {
+        return react_1.default.createElement(material_1.Checkbox, { checked: this.state.editData && this.state.editData[col.field] !== undefined ? !!this.state.editData[col.field] : !!val, onChange: e => {
+                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
+                if (e.target.checked === !!val) {
+                    delete editData[col.field];
+                }
+                else {
+                    editData[col.field] = e.target.checked;
+                }
+                this.setState({ editData });
+            }, inputProps: { 'aria-label': 'checkbox' } });
     }
-  }, {
-    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(_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));
-      }
-      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));
+    renderSelectColorDialog() {
+        return react_1.default.createElement(material_1.Dialog, { classes: { root: this.props.classes.colorDialog, paper: this.props.classes.colorDialog }, onClose: () => {
+                this.selectCallback = null;
+                this.setState({ showSelectColor: false });
+            }, open: this.state.showSelectColor },
+            react_1.default.createElement(react_colorful_1.HexColorPicker, { color: this.state.selectIdValue, onChange: color => this.setState({ selectIdValue: color }, () => this.selectCallback && this.selectCallback(color)) }));
     }
-  }, {
-    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));
+    renderCellEditColor(item, col, val) {
+        const _val = this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val;
+        return react_1.default.createElement("div", { className: this.props.classes.fieldEdit },
+            react_1.default.createElement(material_1.TextField, { variant: "standard", fullWidth: true, className: this.props.classes.fieldEditWithButton, value: _val, inputProps: { style: { backgroundColor: _val, color: Utils_1.default.isUseBright(_val) ? '#FFF' : '#000' } }, onChange: e => {
+                    const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
+                    if (e.target.value === val) {
+                        delete editData[col.field];
+                    }
+                    else {
+                        editData[col.field] = e.target.value;
+                    }
+                    this.setState({ editData });
+                } }),
+            react_1.default.createElement(material_1.IconButton, { className: this.props.classes.fieldButton, onClick: () => {
+                    this.selectCallback = newColor => {
+                        const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
+                        if (newColor === val) {
+                            delete editData[col.field];
+                        }
+                        else {
+                            editData[col.field] = newColor;
+                        }
+                        this.setState({ editData });
+                    };
+                    this.setState({ showSelectColor: true, selectIdValue: val });
+                }, size: "large" },
+                react_1.default.createElement(icons_material_1.Colorize, null)));
     }
-  }, {
-    key: "renderLine",
-    value: function renderLine(item, level) {
-      var _this11 = this;
-      var levelShift = this.props.levelShift === undefined ? 24 : this.props.levelShift;
-      level = level || 0;
-      var i = this.props.data.indexOf(item);
-      if (!item) {
-        return null;
-      }
-      if (!level && item.parentId) {
+    renderSelectIdDialog() {
+        if (this.state.showSelectId && this.props.socket) {
+            return react_1.default.createElement(SelectID_1.default, { key: "tableSelect", imagePrefix: "../..", dialogName: this.props.adapterName, themeType: this.props.themeType, socket: this.props.socket, selected: this.state.selectIdValue, onClose: () => this.setState({ showSelectId: false }), onOk: (selected /* , name*/) => {
+                    this.setState({ showSelectId: false, selectIdValue: null });
+                    this.selectCallback && this.selectCallback(selected);
+                    this.selectCallback = null;
+                } });
+        }
         return null;
-      }
-      if (level && !item.parentId) {
-        return null; // should never happen
-      }
-      // 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]);
-            });
-            _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(_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",
-    value: function handleRequestSort(property) {
-      var isAsc = this.state.orderBy === property && this.state.order === 'asc';
-      this.setState({
-        order: isAsc ? 'desc' : 'asc',
-        orderBy: property
-      });
+    renderCellEditObjectID(item, col, val) {
+        return react_1.default.createElement("div", { className: this.props.classes.fieldEdit },
+            react_1.default.createElement(material_1.TextField, { 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: e => {
+                    const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
+                    if (e.target.value === val) {
+                        delete editData[col.field];
+                    }
+                    else {
+                        editData[col.field] = e.target.value;
+                    }
+                    this.setState({ editData });
+                } }),
+            react_1.default.createElement(material_1.IconButton, { className: this.props.classes.fieldButton, onClick: () => {
+                    this.selectCallback = selected => {
+                        const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
+                        if (selected === val) {
+                            delete editData[col.field];
+                        }
+                        else {
+                            editData[col.field] = selected;
+                        }
+                        this.setState({ editData });
+                    };
+                    this.setState({ showSelectId: true, selectIdValue: val });
+                }, size: "large" },
+                react_1.default.createElement(icons_material_1.ViewHeadline, null)));
     }
-  }, {
-    key: "renderHead",
-    value: function renderHead() {
-      var _this12 = this;
-      return /*#__PURE__*/_react["default"].createElement(_material.TableHead, null, /*#__PURE__*/_react["default"].createElement(_material.TableRow, {
-        key: "headerRow"
-      }, /*#__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(_material.TableCell, {
-        component: "th",
-        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(_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() {
-          return _this12.handleRequestSort(_this12.props.columns[0].field);
+    renderCellNonEdit(item, col) {
+        let val = getAttr(item, col.field, col.lookup);
+        if (Array.isArray(val)) {
+            val = val[0];
         }
-      }, 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(_material.TableCell, {
-          key: col.field,
-          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(_material.TableSortLabel, {
-          active: _this12.state.orderBy === col.field,
-          direction: _this12.state.orderBy === col.field ? _this12.state.order : 'asc',
-          onClick: function onClick() {
-            return _this12.handleRequestSort(col.field);
-          }
-        }, 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(_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(_material.Fab, {
-        color: "primary",
-        size: "small",
-        disabled: this.state.editMode !== false,
-        onClick: function onClick() {
-          return _this12.props.onUpdate(true);
+        if (col.type === 'boolean') {
+            return react_1.default.createElement(material_1.Checkbox, { checked: !!val, disabled: true, inputProps: { 'aria-label': 'checkbox' } });
         }
-      }, /*#__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));
+        return val;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this13 = this;
-      var lookup = this.props.columns.find(function (col) {
-        return col.field === _this13.state.orderBy;
-      }).lookup;
-      var table = stableSort(this.props.data, getComparator(this.state.order, this.state.orderBy, lookup));
-      if (this.state.update && this.state.update.length) {
-        this.updateTimeout && clearTimeout(this.updateTimeout);
-        this.updateTimeout = setTimeout(function () {
-          _this13.updateTimeout = null;
-          _this13.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(_material.Table, {
-        className: this.props.classes.table,
-        "aria-label": "simple table",
-        size: "small",
-        stickyHeader: true
-      }, this.renderHead(), /*#__PURE__*/_react["default"].createElement(_material.TableBody, null, table.map(function (it) {
-        return _this13.renderLine(it);
-      }))), this.renderSelectIdDialog(), this.renderSelectColorDialog());
+    renderCell(item, col, level, i) {
+        if (this.state.editMode === i && col.editable !== 'never' && col.editable !== false) {
+            return react_1.default.createElement(material_1.TableCell, { key: col.field, className: Utils_1.default.clsx(this.props.classes.cell, level && this.props.classes.cellSecondary), style: col.cellStyle, component: "th" }, this.renderCellEdit(item, col));
+        }
+        return react_1.default.createElement(material_1.TableCell, { key: col.field, className: Utils_1.default.clsx(this.props.classes.cell, level && this.props.classes.cellSecondary), style: col.cellStyle, component: "th" }, this.renderCellNonEdit(item, col));
     }
-  }], [{
-    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);
-            }
-          });
+    renderCellWithSubField(item, col) {
+        const main = getAttr(item, col.field, col.lookup);
+        if (col.subField) {
+            const sub = getAttr(item, col.subField, col.subLookup);
+            return react_1.default.createElement("div", null,
+                react_1.default.createElement("div", { className: this.props.classes.mainText }, main),
+                react_1.default.createElement("div", { className: this.props.classes.subText, style: col.subStyle || {} }, sub));
+        }
+        return react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: this.props.classes.mainText }, main));
+    }
+    renderLine(item, level) {
+        const levelShift = this.props.levelShift === undefined ? 24 : this.props.levelShift;
+        level = level || 0;
+        const i = this.props.data.indexOf(item);
+        if (!item) {
+            return null;
         }
-        if (update.length && update.length !== count) {
-          return {
-            data: props.data,
-            update: update
-          };
+        if (!level && item.parentId) {
+            return null;
         }
-        return {
-          data: props.data
-        };
-      }
-      return {
-        data: props.data
-      };
+        if (level && !item.parentId) {
+            return null; // should never happen
+        }
+        // try to find children
+        const opened = this.state.opened.includes(item.id);
+        const children = this.props.data.filter(it => it.parentId === item.id);
+        const row = react_1.default.createElement(material_1.TableRow, { key: item.id, className: Utils_1.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) },
+            react_1.default.createElement(material_1.TableCell, { className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellExpand, level && this.props.classes.cellSecondary) }, children.length ? react_1.default.createElement(material_1.IconButton, { onClick: () => {
+                    const _opened = [...this.state.opened];
+                    const pos = _opened.indexOf(item.id);
+                    if (pos === -1) {
+                        _opened.push(item.id);
+                        _opened.sort();
+                    }
+                    else {
+                        _opened.splice(pos, 1);
+                    }
+                    (window._localStorage || window.localStorage).setItem(this.props.name || 'iob-table', JSON.stringify(_opened));
+                    this.setState({ opened: _opened });
+                }, size: "small" }, opened ? react_1.default.createElement(icons_material_1.ExpandMore, null) : react_1.default.createElement(icons_material_1.NavigateNext, null)) : null),
+            react_1.default.createElement(material_1.TableCell, { scope: "row", className: Utils_1.default.clsx(this.props.classes.cell, level && this.props.classes.cellSecondary), style: Object.assign(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((col, ii) => (!ii && !col.hidden ? null : this.renderCell(item, col, level, i))),
+            this.props.onUpdate ? react_1.default.createElement(material_1.TableCell, { className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellButton) }, this.state.editMode === i || this.state.deleteMode === i ?
+                react_1.default.createElement(material_1.IconButton, { disabled: this.state.editMode !== false && (!this.state.editData || !Object.keys(this.state.editData).length), onClick: () => {
+                        if (this.state.editMode !== false) {
+                            const newData = JSON.parse(JSON.stringify(item));
+                            this.state.editData && Object.keys(this.state.editData).forEach(attr => { var _c; return setAttr(newData, attr, (_c = this.state.editData) === null || _c === void 0 ? void 0 : _c[attr]); });
+                            this.setState({ editMode: false }, () => this.props.onUpdate && this.props.onUpdate(newData, item));
+                        }
+                        else {
+                            this.setState({ deleteMode: false }, () => this.props.onDelete && this.props.onDelete(item));
+                        }
+                    }, size: "large" },
+                    react_1.default.createElement(icons_material_1.Check, null))
+                :
+                    react_1.default.createElement(material_1.IconButton, { disabled: this.state.editMode !== false, onClick: () => this.setState({ editMode: i, editData: null }), size: "large" },
+                        react_1.default.createElement(icons_material_1.Edit, null))) : null,
+            this.props.onDelete && !this.props.onUpdate ?
+                react_1.default.createElement(material_1.TableCell, { className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellButton) }, this.state.deleteMode === i ?
+                    react_1.default.createElement(material_1.IconButton, { disabled: this.state.editMode !== false && (!this.state.editData || !Object.keys(this.state.editData).length), onClick: () => this.setState({ deleteMode: false }, () => this.props.onDelete && this.props.onDelete(item)), size: "large" },
+                        react_1.default.createElement(icons_material_1.Check, null))
+                    :
+                        null) : null,
+            this.props.onUpdate || this.props.onDelete ? react_1.default.createElement(material_1.TableCell, { className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellButton) }, this.state.editMode === i || this.state.deleteMode === i ?
+                react_1.default.createElement(material_1.IconButton, { onClick: () => this.setState({ editMode: false, deleteMode: false }), size: "large" },
+                    react_1.default.createElement(icons_material_1.Close, null))
+                :
+                    (this.props.onDelete ? react_1.default.createElement(material_1.IconButton, { disabled: this.state.deleteMode !== false, onClick: () => this.setState({ deleteMode: i }), size: "large" },
+                        react_1.default.createElement(icons_material_1.Delete, null)) : null)) : null);
+        if (!level && opened) {
+            const items = children.map(it => this.renderLine(it, level + 1));
+            items.unshift(row);
+            return items;
+        }
+        return row;
+    }
+    handleRequestSort(property) {
+        const isAsc = this.state.orderBy === property && this.state.order === 'asc';
+        this.setState({ order: isAsc ? 'desc' : 'asc', orderBy: property });
     }
-  }]);
-}(_react["default"].Component);
+    renderHead() {
+        return react_1.default.createElement(material_1.TableHead, null,
+            react_1.default.createElement(material_1.TableRow, { key: "headerRow" },
+                react_1.default.createElement(material_1.TableCell, { component: "th", className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes.cellExpand) }),
+                react_1.default.createElement(material_1.TableCell, { component: "th", className: Utils_1.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 : react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === this.props.columns[0].field, direction: this.state.orderBy === this.props.columns[0].field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(this.props.columns[0].field) },
+                    this.props.columns[0].title || this.props.columns[0].field,
+                    this.state.orderBy === this.props.columns[0].field ?
+                        react_1.default.createElement("span", { className: this.props.classes.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending') : null)),
+                this.props.columns.map((col, i) => (!i && !col.hidden ? null : react_1.default.createElement(material_1.TableCell, { key: col.field, className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes[`width_${col.field.replace(/\./g, '_')}`]), style: col.headerStyle || col.cellStyle, component: "th" }, this.props.noSort ? null : react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === col.field, direction: this.state.orderBy === col.field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(col.field) },
+                    col.title || col.field,
+                    this.state.orderBy === col.field ?
+                        react_1.default.createElement("span", { className: this.props.classes.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending') : null)))),
+                this.props.onUpdate ? react_1.default.createElement(material_1.TableCell, { component: "th", className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes.cellButton) }, !this.props.noAdd ? react_1.default.createElement(material_1.Fab, { color: "primary", size: "small", disabled: this.state.editMode !== false, onClick: () => this.props.onUpdate && this.props.onUpdate(true) },
+                    react_1.default.createElement(icons_material_1.Add, null)) : null) : null,
+                this.props.onDelete || this.props.onUpdate ?
+                    react_1.default.createElement(material_1.TableCell, { component: "th", className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes.cellButton) }) : null));
+    }
+    render() {
+        const col = this.props.columns.find(col => col.field === this.state.orderBy);
+        if (col) {
+            const lookup = col.lookup;
+            const 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(() => {
+                    this.updateTimeout = null;
+                    this.setState({ update: null });
+                }, 500);
+            }
+            return react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes.tableContainer, this.props.className) },
+                react_1.default.createElement(material_1.Table, { className: this.props.classes.table, "aria-label": "simple table", size: "small", stickyHeader: true },
+                    this.renderHead(),
+                    react_1.default.createElement(material_1.TableBody, null, table.map(it => this.renderLine(it)))),
+                this.renderSelectIdDialog(),
+                this.renderSelectColorDialog());
+        }
+    }
+}
 /*
 const columns = [
     {
@@ -872,34 +611,4 @@ renderTable() {
     </div>;
 }
  */
-TreeTable.propTypes = {
-  data: _propTypes["default"].array.isRequired,
-  className: _propTypes["default"].string,
-  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"].func,
-    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,
-  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 an oid type is used
-  levelShift: _propTypes["default"].number // Shift in pixels for every level
-};
-var _default = exports["default"] = (0, _styles.withStyles)(styles)(TreeTable);
-//# sourceMappingURL=TreeTable.js.map
+exports.default = (0, styles_1.withStyles)(styles)(TreeTable);