@agilemotion/oui-react-js 1.3.1 → 1.3.3

package/dist/components/TemplateItemEventHandler.js

@@ -0,0 +1,440 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _TemplateTable = _interopRequireDefault(require("./TemplateTable"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const parse = val => {
+  return parseFloat(val.replace('px', ''));
+};
+
+const boundCheck = (pos, mousePos) => {
+  return pos - 8 < mousePos && pos + 8 > mousePos;
+};
+
+class TemplateItemEventHandler {
+  constructor() {
+    _defineProperty(this, "dragStart", event => {
+      if (this.selectedNode === event.target) {
+        if (document.body.style.cursor !== "move" || this.resizingTableColumn) {
+          if (!this.resizingTableColumn || this.resizingBoundaryTableColumn) {
+            this.currentResizeNode = event.target;
+          }
+
+          event.preventDefault();
+        }
+
+        let parentLeft = event.target.parentElement.offsetLeft;
+        let parentTop = event.target.parentElement.offsetTop;
+        this.dragOffset.x = event.clientX - (parentLeft + parseFloat(event.target.style.left.replace('px', '')));
+        this.dragOffset.y = event.clientY - (parentTop + parseFloat(event.target.style.top.replace('px', '')));
+      }
+    });
+
+    _defineProperty(this, "dragOver", event => {
+      event.preventDefault();
+    });
+
+    _defineProperty(this, "initDragAndDrop", () => {
+      this.dragOffset = {};
+      setTimeout(() => {
+        let elements = document.getElementsByClassName("dropTarget");
+
+        var _iterator = _createForOfIteratorHelper(elements),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            const element = _step.value;
+            element.addEventListener("dragstart", this.dragStart, false);
+            element.addEventListener("dragover", this.dragOver, false);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }, 2000);
+      document.addEventListener("mousedown", this.handleMouseDown);
+      document.addEventListener("mouseup", this.handleMouseUp);
+      document.addEventListener("mousemove", this.handleMouseMove);
+    });
+
+    _defineProperty(this, "handleMouseMove", event => {
+      this.resizeNode(event, this.currentResizeNode);
+    });
+
+    _defineProperty(this, "handleMouseDown", event => {
+      this.mouseDown = true;
+    });
+
+    _defineProperty(this, "handleMouseUp", event => {
+      this.mouseDown = false;
+      this.currentResizeNode = null;
+      document.body.style.cursor = "default";
+
+      if (typeof event.target.className === 'string' && event.target.className !== '_draggable_' && !event.target.className.startsWith('_item_table')) {
+        this.resetBorders();
+        this.selectedNode = null;
+        this.selectedNodeInitPosition = null;
+      }
+
+      this.tableItemPreResizeWidth = null;
+      this.tableItemPreResizeHeight = null;
+      this.lastColItemPreResizeWidth = null;
+      this.firstColItemPreResizeWidth = null;
+      this.firstRowItemPreResizeHeight = null;
+      this.resizingTableColumn = false;
+    });
+
+    _defineProperty(this, "handleGrabRelease", (event, props, selectionHandler) => {
+      let width = props.width;
+      let height = props.height;
+      let parent = event.target;
+      let dropTarget = null;
+
+      while (parent) {
+        if (parent.className === 'dropTarget') {
+          dropTarget = parent;
+          break;
+        }
+
+        parent = parent.parentElement;
+      }
+
+      if (dropTarget) {
+        let container = document.getElementById('templateContainer');
+        let node = document.createElement("div");
+        node.id = props.id;
+        node.style.lineHeight = event.target.style.lineHeight;
+        node.style.left = event.clientX - dropTarget.offsetLeft + 'px';
+        node.style.top = container.scrollTop + event.clientY - dropTarget.offsetTop + 'px';
+        node.style.border = '2px dashed green';
+        node.className = "_draggable_";
+        node.setAttribute("draggable", true);
+
+        if (props.type === 'TABLE') {
+          let table = new _TemplateTable.default(props.table, node).build((resizing, boundary) => {
+            this.resizingTableColumn = resizing;
+            this.resizingBoundaryTableColumn = boundary;
+          }, parent => {
+            return this.selectedNode === parent;
+          });
+          node.appendChild(table);
+          node.style.padding = '1px';
+          node.style.width = parse(table.style.width) + 2 + 'px';
+          node.style.height = parse(table.style.height) + 2 + 'px';
+        } else {
+          node.style.height = height + 'px';
+          node.style.width = width + 'px';
+          node.innerText = props.description;
+        }
+
+        node.addEventListener('dragend', event => this.handleItemDrop(event, dropTarget), false);
+        let placeHolders = dropTarget.getElementsByClassName('__sys_placeholders')[0];
+        node.addEventListener('mousemove', event => this.handleItemMouseMove(event, placeHolders), false);
+        node.addEventListener('mouseout', this.handleItemMouseOut, false);
+        node.addEventListener('mouseup', event => this.handleItemMouseClick(node, props.id, selectionHandler), false);
+        placeHolders.appendChild(node);
+        this.selectedNode = node;
+        this.setSelectedInitNodePos();
+      }
+
+      if (typeof event.target.className === 'string' && !event.target.className.includes("paletteButton") && !event.target.className.includes("paletteButtonLabel") && !event.target.className.includes("paletteButtonSelected")) {
+        document.getElementsByTagName("body")[0].style.cursor = 'default';
+      }
+    });
+
+    _defineProperty(this, "handleItemDrop", (event, target) => {
+      event.target.style.left = event.clientX - target.offsetLeft - this.dragOffset.x + 'px';
+      event.target.style.top = event.clientY - target.offsetTop - this.dragOffset.y + 'px';
+      event.preventDefault();
+      this.currentResizeNode = null;
+      this.mouseDown = false;
+      document.body.style.cursor = "default";
+      this.resetBorders();
+      event.target.style.border = '2px dashed green';
+    });
+
+    _defineProperty(this, "resizeNode", (event, node) => {
+      //console.log(this.mouseDown + " : " + node + " : " + this.resizingTableColumn);
+      if (this.mouseDown && node) {
+        let container = document.getElementById('templateContainer');
+        let mouseX = event.clientX - this.resizingItemParent.offsetLeft + container.scrollLeft;
+        let mouseY = event.clientY - this.resizingItemParent.offsetTop + container.scrollTop;
+        let resizeSpec = {
+          leftOffset: 0,
+          rightOffset: 0,
+          topOffset: 0,
+          bottomOffset: 0
+        };
+
+        if (this.boundCheckLeft) {
+          let widthDiff = mouseX - parse(node.style.left);
+          let newWidth = parse(node.style.width) - widthDiff; //console.log("\n\n\n SETTING SPEC LEFT : " + this.selectedNodeInitPosition.left);
+
+          resizeSpec.leftOffset = mouseX - this.selectedNodeInitPosition.left;
+
+          if (newWidth >= 20) {
+            node.style.width = newWidth + 'px';
+            node.style.left = mouseX + 'px';
+          }
+        }
+
+        if (this.boundCheckRight) {
+          let newWidth = mouseX - parse(node.style.left);
+          resizeSpec.rightOffset = newWidth - this.selectedNodeInitPosition.width;
+
+          if (newWidth >= 20) {
+            node.style.width = newWidth + 'px';
+          }
+        }
+
+        if (this.boundCheckTop) {
+          let heightDiff = mouseY - parse(node.style.top);
+          let newHeight = parse(node.style.height) - heightDiff;
+          resizeSpec.topOffset = mouseY - this.selectedNodeInitPosition.top;
+
+          if (newHeight >= 20) {
+            node.style.height = newHeight + 'px';
+            node.style.top = mouseY + 'px';
+          }
+
+          resizeSpec.topResized = true;
+        }
+
+        if (this.boundCheckBottom) {
+          let newHeight = mouseY - parse(node.style.top);
+          resizeSpec.bottomOffset = newHeight - this.selectedNodeInitPosition.height;
+
+          if (newHeight >= 20) {
+            node.style.height = newHeight + 'px';
+          }
+
+          resizeSpec.bottomResized = true;
+        }
+
+        this.resizeTables(node, resizeSpec);
+      }
+    });
+
+    _defineProperty(this, "updateCursor", (node, event, itemParent) => {
+      if (!this.mouseDown && this.selectedNode) {
+        let container = document.getElementById('templateContainer');
+        let left = parse(node.style.left) + container.offsetLeft;
+        let right = left + parse(node.style.width);
+        let top = parse(node.style.top) + itemParent.offsetTop;
+        let bottom = top + parse(node.style.height);
+        let mouseX = event.clientX + container.scrollLeft;
+        let mouseY = event.clientY + container.scrollTop;
+        this.boundCheckTop = boundCheck(top, mouseY);
+        this.boundCheckLeft = boundCheck(left, mouseX);
+        this.boundCheckRight = boundCheck(right, mouseX);
+        this.boundCheckBottom = boundCheck(bottom, mouseY);
+
+        if (this.boundCheckTop && this.boundCheckLeft || this.boundCheckBottom && this.boundCheckRight) {
+          document.body.style.cursor = "nwse-resize";
+        } else if (this.boundCheckTop && this.boundCheckRight || this.boundCheckBottom && this.boundCheckLeft) {
+          document.body.style.cursor = "nesw-resize";
+        } else if (this.boundCheckTop || this.boundCheckBottom) {
+          document.body.style.cursor = "ns-resize";
+        } else if (this.boundCheckLeft || this.boundCheckRight) {
+          document.body.style.cursor = "ew-resize";
+        } else {
+          document.body.style.cursor = "move";
+        }
+
+        this.resizingItemParent = itemParent;
+      }
+    });
+
+    _defineProperty(this, "resetBorders", () => {
+      let items = document.getElementsByClassName("_draggable_");
+
+      var _iterator2 = _createForOfIteratorHelper(items),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          const item = _step2.value;
+          item.style.border = 'none';
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    });
+
+    _defineProperty(this, "handleItemMouseOut", event => {
+      if (!this.currentResizeNode) {
+        document.body.style.cursor = "default";
+      }
+    });
+
+    _defineProperty(this, "handleItemMouseMove", (event, itemParent) => {
+      let node = event.target;
+      this.updateCursor(node, event, itemParent);
+    });
+
+    _defineProperty(this, "handleItemMouseClick", (node, id, selectionHandler) => {
+      this.resetBorders();
+      node.style.border = '2px dashed green';
+      this.selectedNode = node;
+      this.setSelectedInitNodePos();
+      selectionHandler(id);
+    });
+  }
+
+  resizeTables(node, spec) {
+    let tables = node.getElementsByClassName('_item_table');
+    let table = tables && tables.length > 0 ? tables[0] : null;
+
+    if (!this.tableItemPreResizeWidth && table) {
+      this.tableItemPreResizeWidth = parse(table.style.width);
+    }
+
+    if (!this.tableItemPreResizeHeight && table) {
+      this.tableItemPreResizeHeight = parse(table.style.height);
+    }
+
+    if (table) {
+      if (spec.rightOffset !== 0) {
+        let numCols = table['data-num-cols'];
+        let lastCols = node.getElementsByClassName("_item_table_col_".concat(numCols - 1));
+        let newWidth;
+        let resized = true;
+
+        var _iterator3 = _createForOfIteratorHelper(lastCols),
+            _step3;
+
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            const lastCol = _step3.value;
+
+            if (!this.lastColItemPreResizeWidth) {
+              this.lastColItemPreResizeWidth = parse(lastCol.style.width);
+            }
+
+            newWidth = this.lastColItemPreResizeWidth + spec.rightOffset; //console.log(spec.leftOffset + " : " + spec.rightOffset + " : " + this.lastColItemPreResizeWidth);
+
+            if (newWidth >= 32) {
+              lastCol.style.width = newWidth + 'px';
+            } else {
+              resized = false;
+              break;
+            }
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+
+        if (resized) {
+          table.style.width = this.tableItemPreResizeWidth + spec.rightOffset + 'px';
+        }
+      }
+
+      if (spec.leftOffset !== 0) {
+        let newWidth;
+        let firstCols = node.getElementsByClassName('_item_table_col_0');
+        let resized = true;
+
+        var _iterator4 = _createForOfIteratorHelper(firstCols),
+            _step4;
+
+        try {
+          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+            const firstCol = _step4.value;
+
+            if (!this.firstColItemPreResizeWidth) {
+              this.firstColItemPreResizeWidth = parse(firstCol.style.width);
+            }
+
+            newWidth = this.firstColItemPreResizeWidth + spec.leftOffset * -1;
+
+            if (newWidth >= 32) {
+              firstCol.style.width = newWidth + 'px';
+            } else {
+              resized = false;
+              break;
+            }
+          }
+        } catch (err) {
+          _iterator4.e(err);
+        } finally {
+          _iterator4.f();
+        }
+
+        if (resized) {
+          table.style.width = this.tableItemPreResizeWidth + spec.leftOffset * -1 + 'px';
+        }
+      }
+
+      if (spec.topOffset !== 0 || spec.bottomOffset !== 0) {
+        let newHeight;
+        let rows = node.getElementsByClassName('_item_table_tr');
+
+        if (!this.firstRowItemPreResizeHeight) {
+          this.firstRowItemPreResizeHeight = parse(rows[0].style.height);
+        }
+
+        if (spec.topOffset !== 0) {
+          newHeight = this.firstRowItemPreResizeHeight - spec.topOffset / rows.length;
+        } else if (spec.bottomOffset !== 0) {
+          newHeight = this.firstRowItemPreResizeHeight + spec.bottomOffset / rows.length;
+        }
+
+        var _iterator5 = _createForOfIteratorHelper(rows),
+            _step5;
+
+        try {
+          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+            const row = _step5.value;
+            row.style.height = newHeight + 'px';
+          }
+        } catch (err) {
+          _iterator5.e(err);
+        } finally {
+          _iterator5.f();
+        }
+
+        if (spec.topOffset !== 0) {
+          table.style.height = this.tableItemPreResizeHeight - spec.topOffset + 'px';
+        }
+
+        if (spec.bottomOffset !== 0) {
+          table.style.height = this.tableItemPreResizeHeight + spec.bottomOffset + 'px';
+        }
+
+        table.style.height = this.tableItemPreResizeHeight + (spec.topOffset !== 0 ? spec.topOffset : spec.bottomOffset) + 'px';
+      }
+    }
+  }
+
+  setSelectedInitNodePos() {
+    this.selectedNodeInitPosition = {
+      top: parse(this.selectedNode.style.top),
+      left: parse(this.selectedNode.style.left),
+      width: parse(this.selectedNode.style.width),
+      height: parse(this.selectedNode.style.height)
+    };
+  }
+
+}
+
+exports.default = TemplateItemEventHandler;

package/dist/components/TemplateTable.js

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const boundCheck = (pos, mousePos) => {
+  return pos - 8 < mousePos && pos + 8 > mousePos;
+};
+
+const parse = val => {
+  return parseFloat(val.replace('px', ''));
+};
+
+const DEFAULT_COL_WIDTH = 32;
+
+class TemplateTable {
+  constructor(config, parent) {
+    _defineProperty(this, "handleMouseMove", event => {
+      if (this.currentResizeCol && this.mouseDown) {}
+    });
+
+    _defineProperty(this, "getElementWidth", el => {
+      return el ? parseFloat(el.style.width.replace("px", "")) : null;
+    });
+
+    _defineProperty(this, "build", (colResizeHandler, parentSelectionChecker) => {
+      let tableConfig = this.config;
+      let tableHeight = tableConfig.defaultRowHeight * tableConfig.defaultNumRows;
+      let tableWidth = 0;
+
+      var _iterator = _createForOfIteratorHelper(tableConfig.columns),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          const column = _step.value;
+          tableWidth += column.defaultWidth;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      let table = document.createElement("div");
+      table['data-num-cols'] = tableConfig.columns.length;
+      table.className = '_item_table';
+      table.style.border = '1px solid #aaa';
+      table.style.width = tableWidth + 'px';
+      table.style.height = tableHeight + 'px';
+      let sortedCols = tableConfig.columns.sort((a, b) => a.id - b.id);
+
+      for (let i = 0; i < tableConfig.defaultNumRows; i++) {
+        table.appendChild(this.createRow(tableConfig, sortedCols, tableWidth, i, colResizeHandler, parentSelectionChecker));
+      }
+
+      return table;
+    });
+
+    this.config = config;
+    this.parent = parent;
+
+    const _this = this;
+
+    document.addEventListener("mousemove", this.handleMouseMove);
+    document.addEventListener("mousedown", e => this.mouseDown = true);
+    document.addEventListener('mouseup', function (e) {
+      _this.currentClientX = null;
+      _this.curResizeColWidth = null;
+      _this.curResizeNxtColWidth = null;
+      _this.mouseDown = false;
+
+      _this.setResizingBorderWidth('1px');
+    });
+  }
+
+  addColMouseMoveEvent(col, colResizeHandler, parentSelectionChecker, first, last) {
+    col.addEventListener("mousemove", e => {
+      const _this = this;
+
+      let parentOffset = this.parent.offsetLeft + this.parent.parentElement.offsetLeft;
+
+      if (boundCheck(parentOffset + e.target.offsetLeft + parse(e.target.style.width), e.clientX)) {
+        if (parentSelectionChecker(this.parent)) {
+          e.target.style.cursor = 'ew-resize';
+          this.currentResizeCol = e.target;
+          colResizeHandler(true, last || first);
+        }
+      } else {
+        if (!this.mouseDown) {
+          e.target.style.cursor = 'default';
+          this.currentResizeCol = null;
+          colResizeHandler(false, last || first);
+        }
+      } //console.log(this.currentResizeCol + " : " + this.mouseDown + " : " + this.currentClientX + " : " + this.curResizeNxtColWidth);
+
+
+      if (this.currentResizeCol && this.mouseDown && this.currentClientX && this.curResizeNxtColWidth) {
+        let diffX = e.clientX - _this.currentClientX;
+        let width = _this.curResizeColWidth + diffX;
+        let nextWidth = _this.curResizeNxtColWidth - diffX;
+        let index = this.currentResizeCol['data-index'];
+
+        if (width >= DEFAULT_COL_WIDTH && nextWidth >= DEFAULT_COL_WIDTH) {
+          //console.log(width + " : " + nextWidth + " : " + DEFAULT_COL_WIDTH);
+          this.resizeColumn(index, width);
+          this.resizeColumn(index + 1, nextWidth);
+        }
+      }
+    });
+  }
+
+  resizeColumn(index, width) {
+    let elements = this.currentResizeCol.parentElement.parentElement.getElementsByClassName("_item_table_col_".concat(index));
+
+    if (elements && elements.length > 0) {
+      var _iterator2 = _createForOfIteratorHelper(elements),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          const element = _step2.value;
+          element.style.width = width + 'px';
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+  }
+
+  setResizingBorderWidth(width) {
+    if (this.currentResizeCol) {
+      this.currentResizeCol.style.borderWidth = width;
+      let index = this.currentResizeCol['data-index'];
+      let elements = this.currentResizeCol.parentElement.parentElement.getElementsByClassName("_item_table_col_".concat(index));
+
+      if (elements && elements.length > 0) {
+        var _iterator3 = _createForOfIteratorHelper(elements),
+            _step3;
+
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            const element = _step3.value;
+            element.style.borderWidth = width;
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+      }
+    }
+  }
+
+  createRow(tableConfig, cols, tableWidth, index, colResizeHandler, parentSelectionChecker) {
+    let row = document.createElement("div");
+    row.className = '_item_table_tr row';
+    row.style.width = '100%';
+    row.style.margin = '0';
+    row.style.height = tableConfig.defaultRowHeight + 'px';
+    let last = tableConfig.defaultNumRows.length - 1 === index;
+
+    if (!last) {
+      row.style.borderBottom = '1px solid #aaa';
+    }
+
+    for (let i = 0; i < cols.length; i++) {
+      let col = cols[i];
+      let colEl = document.createElement("div");
+      colEl.style.width = col.defaultWidth - 1 + 'px';
+
+      if (i !== cols.length - 1) {
+        colEl.style.borderRight = '1px solid #aaa';
+      }
+
+      colEl.className = "_item_table_td _item_table_col_".concat(i, " col-*-*");
+      colEl['data-index'] = i;
+      colEl.style.minWidth = DEFAULT_COL_WIDTH + 'px';
+      colEl.style.height = '100%';
+      colEl.style.whiteSpace = 'nowrap';
+      colEl.style.overflow = 'hidden';
+      colEl.style.textOverflow = 'ellipsis';
+      colEl.style.display = 'inline-block';
+      colEl.style.float = 'none';
+      colEl.innerText = col.columnId;
+      this.addColMouseMoveEvent(colEl, colResizeHandler, parentSelectionChecker, i === 0, i === cols.length - 1);
+
+      const _this = this;
+
+      colEl.addEventListener('mousedown', function (e) {
+        _this.currentClientX = e.clientX;
+        _this.curResizeColWidth = _this.getElementWidth(colEl);
+        let index = e.target['data-index'];
+        let elements = row.parentElement.getElementsByClassName("_item_table_col_".concat(index + 1));
+
+        if (elements && elements.length > 0) {
+          _this.curResizeNxtColWidth = _this.getElementWidth(elements[0]);
+        }
+
+        _this.setResizingBorderWidth('2px');
+      });
+      row.appendChild(colEl);
+    }
+
+    return row;
+  }
+
+}
+
+exports.default = TemplateTable;