Add editing API

index.html

@@ -507,12 +507,7 @@
 				wrapper: document.querySelector('section'),
 				addSerialNoColumn: true,
 				enableClusterize: true,
-				data,
+				data
-				editing: {
-					getInput() {
-						return $('<input type="text" style="background: yellow;" />').get(0)
-					}
-				}
 			});
 			performance.mark("ReGrid-end");
 

lib/ReGrid.js

@@ -111,7 +111,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _utils = __webpack_require__(2);
 
-__webpack_require__(5);
+__webpack_require__(3);
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -136,7 +136,7 @@ var ReGrid = function () {
     this.addSerialNoColumn = (0, _utils.getDefault)(addSerialNoColumn, false);
     this.enableClusterize = (0, _utils.getDefault)(enableClusterize, false);
     this.enableLogs = (0, _utils.getDefault)(enableLogs, true);
-    this.editing = (0, _utils.getDefault)(editing, {});
+    this.editing = (0, _utils.getDefault)(editing, null);
 
     if (data) {
       this.refresh(data);
@@ -266,12 +266,9 @@ var ReGrid = function () {
   }, {
     key: 'updateCell',
     value: function updateCell(rowIndex, colIndex, value) {
-      var row = this.getRow(rowIndex);
+      var cell = this.getCell(rowIndex, colIndex);
-      var cell = row.find(function (cell) {
-        return cell.col_index === colIndex;
-      });
 
-      cell.data = value;
+      cell.content = value;
       this.refreshCell(cell);
     }
   }, {
@@ -283,8 +280,8 @@ var ReGrid = function () {
   }, {
     key: 'refreshCell',
     value: function refreshCell(cell) {
-      var selector = '.data-table-col[data-row-index="' + cell.row_index + '"][data-col-index="' + cell.col_index + '"]';
+      var selector = '.data-table-col[data-row-index="' + cell.rowIndex + '"][data-col-index="' + cell.colIndex + '"]';
-      var $cell = this.body.find(selector);
+      var $cell = this.bodyScrollable.find(selector);
       var $newCell = $((0, _utils.getColumnHTML)(cell));
 
       $cell.replaceWith($newCell);
@@ -402,22 +399,32 @@ var ReGrid = function () {
       var self = this;
 
       this.$editingCell = null;
-      // if (!self.events.onCellEdit) return;
-
       this.bodyScrollable.on('dblclick', '.data-table-col', function () {
         self.activateEditing($(this));
       });
 
       $(document.body).on('keypress', function (e) {
         // enter keypress on focused cell
-        if (e.which === 13 && _this2.$focusedCell) {
+        if (e.which === 13 && _this2.$focusedCell && !_this2.$editingCell) {
-          self.activateEditing(_this2.$focusedCell);
+          _this2.log('editingCell');
+          _this2.activateEditing(_this2.$focusedCell);
+          e.stopImmediatePropagation();
+        }
+      });
+
+      $(document.body).on('keypress', function (e) {
+        // enter keypress on editing cell
+        if (e.which === 13 && _this2.$editingCell) {
+          _this2.log('submitCell');
+          _this2.submitEditing(_this2.$editingCell);
+          e.stopImmediatePropagation();
         }
       });
 
       $(document.body).on('click', function (e) {
         if ($(e.target).is('.edit-cell, .edit-cell *')) return;
         self.bodyScrollable.find('.edit-cell').hide();
+        _this2.$editingCell = null;
       });
     }
   }, {
@@ -441,34 +448,67 @@ var ReGrid = function () {
       this.$editingCell = $cell;
       var $editCell = $cell.find('.edit-cell').empty();
       var cell = this.getCell(rowIndex, colIndex);
+      var editing = this.getEditingObject(colIndex, rowIndex, cell.content, $editCell);
 
-      var render = this.renderEditingInput(colIndex, cell.content, $editCell);
+      if (editing) {
-
+        this.currentCellEditing = editing;
-      if (render) {
+        // initialize editing input with cell value
+        editing.initValue(cell.content);
         $editCell.show();
       }
-
-      // showing the popup is the responsibility of event handler
-      // self.events.onCellEdit(
-      //   $cell.get(0),
-      //   $editPopup,
-      //   rowIndex,
-      //   colIndex
-      // );
     }
   }, {
-    key: 'renderEditingInput',
+    key: 'getEditingObject',
-    value: function renderEditingInput(colIndex, value, parent) {
+    value: function getEditingObject(colIndex, rowIndex, value, parent) {
-      if (this.editing.renderInput) {
+      if (this.editing) {
-        return this.editing.renderInput(colIndex, value, parent);
+        return this.editing(colIndex, rowIndex, value, parent);
       }
-      // render fallback
+
+      // editing fallback
       var $input = $('<input type="text" />');
 
       parent.append($input);
-      $input.val(value);
+
-      $input.select();
+      return {
-      return true;
+        initValue: function initValue(value) {
+          return $input.val(value);
+        },
+        getValue: function getValue() {
+          return $input.val();
+        },
+        setValue: function setValue(value) {
+          return $input.val(value);
+        }
+      };
+    }
+  }, {
+    key: 'submitEditing',
+    value: function submitEditing($cell) {
+      var _this3 = this;
+
+      var _getCellAttr3 = this.getCellAttr($cell),
+          rowIndex = _getCellAttr3.rowIndex,
+          colIndex = _getCellAttr3.colIndex;
+
+      if ($cell) {
+        var editing = this.currentCellEditing;
+
+        if (editing) {
+          var value = editing.getValue();
+          var done = editing.setValue(value);
+
+          if (done && done.then) {
+            // wait for promise then update internal state
+            done.then(function () {
+              return _this3.updateCell(rowIndex, colIndex, value);
+            });
+          } else {
+            this.updateCell(rowIndex, colIndex, value);
+          }
+        }
+      }
+
+      this.currentCellEditing = null;
     }
   }, {
     key: 'bindResizeColumn',
@@ -619,7 +659,7 @@ var ReGrid = function () {
   }, {
     key: 'setColumnWidths',
     value: function setColumnWidths() {
-      var _this3 = this;
+      var _this4 = this;
 
       var availableWidth = this.wrapper.width();
       var headerWidth = this.header.width();
@@ -632,15 +672,15 @@ var ReGrid = function () {
       var deltaWidth = (availableWidth - headerWidth) / this.data.columns.length;
 
       this.data.columns.map(function (col) {
-        var width = _this3.getColumnHeaderElement(col.colIndex).width();
+        var width = _this4.getColumnHeaderElement(col.colIndex).width();
         var finalWidth = width + deltaWidth - 16;
 
-        if (_this3.addSerialNoColumn && col.colIndex === 0) {
+        if (_this4.addSerialNoColumn && col.colIndex === 0) {
           return;
         }
 
-        _this3.setColumnHeaderWidth(col.colIndex, finalWidth);
+        _this4.setColumnHeaderWidth(col.colIndex, finalWidth);
-        _this3.setColumnWidth(col.colIndex, finalWidth);
+        _this4.setColumnWidth(col.colIndex, finalWidth);
       });
       this.setBodyWidth();
     }
@@ -923,15 +963,13 @@ exports.default = {
 module.exports = exports['default'];
 
 /***/ }),
-/* 3 */,
+/* 3 */
-/* 4 */,
-/* 5 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(6);
+var content = __webpack_require__(4);
 if(typeof content === 'string') content = [[module.i, content, '']];
 // Prepare cssTransformation
 var transform;
@@ -939,7 +977,7 @@ var transform;
 var options = {}
 options.transform = transform
 // add the styles to the DOM
-var update = __webpack_require__(8)(content, options);
+var update = __webpack_require__(6)(content, options);
 if(content.locals) module.exports = content.locals;
 // Hot Module Replacement
 if(false) {
@@ -956,10 +994,10 @@ if(false) {
 }
 
 /***/ }),
-/* 6 */
+/* 4 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(7)(undefined);
+exports = module.exports = __webpack_require__(5)(undefined);
 // imports
 
 
@@ -970,7 +1008,7 @@ exports.push([module.i, ".table {\n  width: 100%;\n  max-width: 100%;\n  margin-
 
 
 /***/ }),
-/* 7 */
+/* 5 */
 /***/ (function(module, exports) {
 
 /*
@@ -1052,7 +1090,7 @@ function toComment(sourceMap) {
 
 
 /***/ }),
-/* 8 */
+/* 6 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /*
@@ -1098,7 +1136,7 @@ var singleton = null;
 var	singletonCounter = 0;
 var	stylesInsertedAtTop = [];
 
-var	fixUrls = __webpack_require__(9);
+var	fixUrls = __webpack_require__(7);
 
 module.exports = function(list, options) {
 	if (typeof DEBUG !== "undefined" && DEBUG) {
@@ -1411,7 +1449,7 @@ function updateLink (link, options, obj) {
 
 
 /***/ }),
-/* 9 */
+/* 7 */
 /***/ (function(module, exports) {
 
 

src/regrid.js

@@ -33,7 +33,7 @@ export default class ReGrid {
     this.addSerialNoColumn = getDefault(addSerialNoColumn, false);
     this.enableClusterize = getDefault(enableClusterize, false);
     this.enableLogs = getDefault(enableLogs, true);
-    this.editing = getDefault(editing, {});
+    this.editing = getDefault(editing, null);
 
     if (data) {
       this.refresh(data);
@@ -168,10 +168,9 @@ export default class ReGrid {
   }
 
   updateCell(rowIndex, colIndex, value) {
-    const row = this.getRow(rowIndex);
+    const cell = this.getCell(rowIndex, colIndex);
-    const cell = row.find(cell => cell.col_index === colIndex);
 
-    cell.data = value;
+    cell.content = value;
     this.refreshCell(cell);
   }
 
@@ -181,8 +180,8 @@ export default class ReGrid {
   }
 
   refreshCell(cell) {
-    const selector = `.data-table-col[data-row-index="${cell.row_index}"][data-col-index="${cell.col_index}"]`;
+    const selector = `.data-table-col[data-row-index="${cell.rowIndex}"][data-col-index="${cell.colIndex}"]`;
-    const $cell = this.body.find(selector);
+    const $cell = this.bodyScrollable.find(selector);
     const $newCell = $(getColumnHTML(cell));
 
     $cell.replaceWith($newCell);
@@ -289,22 +288,32 @@ export default class ReGrid {
     const self = this;
 
     this.$editingCell = null;
-    // if (!self.events.onCellEdit) return;
-
     this.bodyScrollable.on('dblclick', '.data-table-col', function () {
       self.activateEditing($(this));
     });
 
     $(document.body).on('keypress', (e) => {
       // enter keypress on focused cell
-      if (e.which === 13 && this.$focusedCell) {
+      if (e.which === 13 && this.$focusedCell && !this.$editingCell) {
-        self.activateEditing(this.$focusedCell);
+        this.log('editingCell');
+        this.activateEditing(this.$focusedCell);
+        e.stopImmediatePropagation();
+      }
+    });
+
+    $(document.body).on('keypress', (e) => {
+      // enter keypress on editing cell
+      if (e.which === 13 && this.$editingCell) {
+        this.log('submitCell');
+        this.submitEditing(this.$editingCell);
+        e.stopImmediatePropagation();
       }
     });
 
     $(document.body).on('click', e => {
       if ($(e.target).is('.edit-cell, .edit-cell *')) return;
       self.bodyScrollable.find('.edit-cell').hide();
+      this.$editingCell = null;
     });
   }
 
@@ -323,33 +332,61 @@ export default class ReGrid {
     this.$editingCell = $cell;
     const $editCell = $cell.find('.edit-cell').empty();
     const cell = this.getCell(rowIndex, colIndex);
+    const editing = this.getEditingObject(colIndex, rowIndex, cell.content, $editCell);
 
-    const render = this.renderEditingInput(colIndex, cell.content, $editCell);
+    if (editing) {
-
+      this.currentCellEditing = editing;
-    if (render) {
+      // initialize editing input with cell value
+      editing.initValue(cell.content);
       $editCell.show();
     }
-
-    // showing the popup is the responsibility of event handler
-    // self.events.onCellEdit(
-    //   $cell.get(0),
-    //   $editPopup,
-    //   rowIndex,
-    //   colIndex
-    // );
   }
 
-  renderEditingInput(colIndex, value, parent) {
+  getEditingObject(colIndex, rowIndex, value, parent) {
-    if (this.editing.renderInput) {
+    if (this.editing) {
-      return this.editing.renderInput(colIndex, value, parent);
+      return this.editing(colIndex, rowIndex, value, parent);
     }
-    // render fallback
+
+    // editing fallback
     const $input = $('<input type="text" />');
 
     parent.append($input);
-    $input.val(value);
+
-    $input.select();
+    return {
-    return true;
+      initValue(value) {
+        return $input.val(value);
+      },
+      getValue() {
+        return $input.val();
+      },
+      setValue(value) {
+        return $input.val(value);
+      }
+    };
+  }
+
+  submitEditing($cell) {
+    const { rowIndex, colIndex } = this.getCellAttr($cell);
+
+    if ($cell) {
+      const editing = this.currentCellEditing;
+
+      if (editing) {
+        const value = editing.getValue();
+        const done = editing.setValue(value);
+
+        if (done && done.then) {
+          // wait for promise then update internal state
+          done.then(
+            () => this.updateCell(rowIndex, colIndex, value)
+          );
+        } else {
+          this.updateCell(rowIndex, colIndex, value);
+        }
+      }
+    }
+
+    this.currentCellEditing = null;
   }
 
   bindResizeColumn() {