@iobroker/adapter-react/Components/TreeTable.js

React classes to develop admin interfaces for ioBroker with react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styles = require("@material-ui/core/styles");

var _reactColorful = require("react-colorful");

var _Fab = _interopRequireDefault(require("@material-ui/core/Fab"));

var _Table = _interopRequireDefault(require("@material-ui/core/Table"));

var _TableBody = _interopRequireDefault(require("@material-ui/core/TableBody"));

var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));

var _TableHead = _interopRequireDefault(require("@material-ui/core/TableHead"));

var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));

var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSortLabel"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _Select = _interopRequireDefault(require("@material-ui/core/Select"));

var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));

var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));

var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));

var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));

var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));

var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));

var _NavigateNext = _interopRequireDefault(require("@material-ui/icons/NavigateNext"));

var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));

var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));

var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));

var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));

var _ViewHeadline = _interopRequireDefault(require("@material-ui/icons/ViewHeadline"));

var _Colorize = _interopRequireDefault(require("@material-ui/icons/Colorize"));

var _SelectID = _interopRequireDefault(require("../Dialogs/SelectID"));

var _Utils = _interopRequireDefault(require("./Utils"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

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) { (0, _defineProperty2["default"])(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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

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 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.type === 'dark' ? '#888' : '#888',
      color: theme.palette.type === '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) {
  (0, _inherits2["default"])(TreeTable, _React$Component);

  var _super = _createSuper(TreeTable);

  function TreeTable(props) {
    var _this;

    (0, _classCallCheck2["default"])(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;
  }

  (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);
      } 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"], {
        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"], {
        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; // 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 = _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"], {
        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
          });
        }
      }, /*#__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"], {
        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
          });
        }
      }, /*#__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;

      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) {
        return null;
      } else if (level && !item.parentId) {
        return null; // should never happen
      } else {
        // try to find children
        var opened = this.state.opened.includes(item.id);
        var children = this.props.data.filter(function (it) {
          return it.parentId === item.id;
        });
        return [/*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
          key: item.id,
          className: _Utils["default"].clsx('table-row-' + (item.id || '').toString().replace(/[.$]/g, '_'), this.state.update && this.state.update.includes(item.id) && this.props.classes.glow, this.props.classes.row, level && this.props.classes.rowSecondary, !level && children.length && this.props.classes.rowMainWithChildren, !level && !children.length && this.props.classes.rowMainWithoutChildren, this.state.editMode !== false && this.state.editMode !== i && this.props.classes.rowNoEdit, this.state.deleteMode !== false && this.state.deleteMode !== i && this.props.classes.rowNoEdit)
        }, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
          className: _Utils["default"].clsx(this.props.classes.cell, this.props.classes.cellExpand, level && this.props.classes.cellSecondary)
        }, children.length ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
          onClick: function onClick() {
            var opened = (0, _toConsumableArray2["default"])(_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
            });
          }
        }, opened ? /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null) : /*#__PURE__*/_react["default"].createElement(_NavigateNext["default"], null)) : null), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
          scope: "row",
          className: _Utils["default"].clsx(this.props.classes.cell, level && this.props.classes.cellSecondary),
          style: Object.assign({}, this.props.columns[0].cellStyle, {
            paddingLeft: levelShift * level
          })
        }, this.props.columns[0].subField ? this.renderCellWithSubField(item, this.props.columns[0]) : getAttr(item, this.props.columns[0].field, this.props.columns[0].lookup)), this.props.columns.map(function (col, ii) {
          return !ii && !col.hidden ? null : _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);
              });
            }
          }
        }, /*#__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
            });
          }
        }, /*#__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
            });
          }
        }, /*#__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
            });
          }
        }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)) : null) : null), !level && opened ? 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.props.noSort ? false : this.state.orderBy === this.props.columns[0].field ? this.state.order : false
      }, this.props.noSort ? null : /*#__PURE__*/_react["default"].createElement(_TableSortLabel["default"], {
        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"
        }, _this11.props.noSort ? null : /*#__PURE__*/_react["default"].createElement(_TableSortLabel["default"], {
          active: _this11.state.orderBy === col.field,
          direction: _this11.state.orderBy === col.field ? _this11.state.order : 'asc',
          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"].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 oid type is used
  levelShift: _propTypes["default"].number // Shift in pixels for every level

};

var _default = (0, _styles.withStyles)(styles)(TreeTable);

exports["default"] = _default;
//# sourceMappingURL=TreeTable.js.map