Fix scrollToRow, Add empty state

lib/frappe-datatable.js

@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 5);
+/******/ 	return __webpack_require__(__webpack_require__.s = 6);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -286,17 +286,10 @@ $.inViewport = function (el, parentEl) {
   return top >= pTop && left >= pLeft && bottom <= pBottom && right <= pRight;
 };
 
-$.scrollTop = function scrollTop(element, offset) {
+$.scrollTop = function scrollTop(element, pixels) {
-  var c = 0;
+  requestAnimationFrame(function () {
-  scroll();
+    element.scrollTop = pixels;
-
+  });
-  function scroll() {
-    if (c <= offset) {
-      c = c + offset / 8;
-      requestAnimationFrame(scroll);
-      element.scrollTop = c;
-    }
-  }
 };
 module.exports = exports['default'];
 
@@ -746,26 +739,28 @@ var RowManager = function () {
   }, {
     key: 'scrollToRow',
     value: function scrollToRow(rowIndex) {
+      rowIndex = +rowIndex;
+      this._lastScrollTo = this._lastScrollTo || 0;
       var $row = this.getRow$(rowIndex);
       if (_dom2.default.inViewport($row, this.bodyScrollable)) return;
 
       var _$row$getBoundingClie = $row.getBoundingClientRect(),
-          top = _$row$getBoundingClie.top,
           height = _$row$getBoundingClie.height;
 
       var _bodyScrollable$getBo = this.bodyScrollable.getBoundingClientRect(),
-          pTop = _bodyScrollable$getBo.top;
+          top = _bodyScrollable$getBo.top,
+          bottom = _bodyScrollable$getBo.bottom;
 
-      var offset = void 0;
+      var rowsInView = Math.floor((bottom - top) / height);
-      if (top < pTop) {
+
-        offset = this.bodyScrollable.scrollTop - (pTop - top) - height;
+      var offset = 0;
-        if (offset < 0) offset = 0;
+      if (rowIndex > this._lastScrollTo) {
+        offset = height * (rowIndex + 1 - rowsInView);
       } else {
-        offset = this.bodyScrollable.scrollTop + (top - this.bodyScrollable.clientHeight);
+        offset = height * (rowIndex + 1 - 1);
       }
 
-      console.log(rowIndex, offset);
+      this._lastScrollTo = rowIndex;
-
       _dom2.default.scrollTop(this.bodyScrollable, offset);
     }
   }, {
@@ -811,7 +806,7 @@ exports.getEditCellHTML = getEditCellHTML;
 
 var _utils = __webpack_require__(1);
 
-var _keyboard = __webpack_require__(8);
+var _keyboard = __webpack_require__(4);
 
 var _keyboard2 = _interopRequireDefault(_keyboard);
 
@@ -819,7 +814,7 @@ var _dom = __webpack_require__(0);
 
 var _dom2 = _interopRequireDefault(_dom);
 
-var _columnmanager = __webpack_require__(4);
+var _columnmanager = __webpack_require__(5);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -874,7 +869,7 @@ var CellManager = function () {
           _this.activateEditing(_this.$focusedCell);
         } else if (_this.$editingCell) {
           // enter keypress on editing cell
-          _this.submitEditing(_this.$editingCell);
+          _this.submitEditing();
           _this.deactivateEditing();
         }
       });
@@ -1300,9 +1295,12 @@ var CellManager = function () {
     }
   }, {
     key: 'submitEditing',
-    value: function submitEditing($cell) {
+    value: function submitEditing() {
       var _this7 = this;
 
+      if (!this.$editingCell) return;
+      var $cell = this.$editingCell;
+
       var _$$data8 = _dom2.default.data($cell),
           rowIndex = _$$data8.rowIndex,
           colIndex = _$$data8.colIndex;
@@ -1533,6 +1531,88 @@ function cellSelector(colIndex, rowIndex) {
 "use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _dom = __webpack_require__(0);
+
+var _dom2 = _interopRequireDefault(_dom);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var KEYCODES = {
+  13: 'enter',
+  91: 'meta',
+  16: 'shift',
+  17: 'ctrl',
+  18: 'alt',
+  37: 'left',
+  38: 'up',
+  39: 'right',
+  40: 'down',
+  9: 'tab',
+  27: 'esc',
+  67: 'c'
+};
+
+var initDone = false;
+var handlers = {};
+
+function bind(dom) {
+  if (initDone) return;
+  _dom2.default.on(dom, 'keydown', handler);
+  initDone = true;
+}
+
+function handler(e) {
+  var key = KEYCODES[e.keyCode];
+
+  if (e.shiftKey && key !== 'shift') {
+    key = 'shift+' + key;
+  }
+
+  if (e.ctrlKey && key !== 'ctrl' || e.metaKey && key !== 'meta') {
+    key = 'ctrl+' + key;
+  }
+
+  var _handlers = handlers[key];
+
+  if (_handlers && _handlers.length > 0) {
+    _handlers.map(function (handler) {
+      var preventBubbling = handler();
+
+      if (preventBubbling === undefined || preventBubbling === true) {
+        e.preventDefault();
+      }
+    });
+  }
+}
+
+exports.default = {
+  init: function init(dom) {
+    bind(dom);
+  },
+  on: function on(key, handler) {
+    var keys = key.split(',').map(function (k) {
+      return k.trim();
+    });
+
+    keys.map(function (key) {
+      handlers[key] = handlers[key] || [];
+      handlers[key].push(handler);
+    });
+  }
+};
+module.exports = exports['default'];
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -2123,7 +2203,7 @@ var getDropdownHTML = function getDropdownHTML() {
 exports.getDropdownHTML = getDropdownHTML;
 
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2133,7 +2213,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _datatable = __webpack_require__(6);
+var _datatable = __webpack_require__(7);
 
 var _datatable2 = _interopRequireDefault(_datatable);
 
@@ -2149,7 +2229,7 @@ exports.default = _datatable2.default;
 module.exports = exports['default'];
 
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2165,7 +2245,7 @@ var _dom = __webpack_require__(0);
 
 var _dom2 = _interopRequireDefault(_dom);
 
-var _datamanager = __webpack_require__(7);
+var _datamanager = __webpack_require__(8);
 
 var _datamanager2 = _interopRequireDefault(_datamanager);
 
@@ -2173,7 +2253,7 @@ var _cellmanager = __webpack_require__(3);
 
 var _cellmanager2 = _interopRequireDefault(_cellmanager);
 
-var _columnmanager = __webpack_require__(4);
+var _columnmanager = __webpack_require__(5);
 
 var _columnmanager2 = _interopRequireDefault(_columnmanager);
 
@@ -2189,7 +2269,7 @@ var _style = __webpack_require__(12);
 
 var _style2 = _interopRequireDefault(_style);
 
-var _keyboard = __webpack_require__(8);
+var _keyboard = __webpack_require__(4);
 
 var _keyboard2 = _interopRequireDefault(_keyboard);
 
@@ -2397,7 +2477,7 @@ exports.default = DataTable;
 module.exports = exports['default'];
 
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2948,88 +3028,6 @@ var DataError = exports.DataError = function (_extendableBuiltin2) {
 
 ;
 
-/***/ }),
-/* 8 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _dom = __webpack_require__(0);
-
-var _dom2 = _interopRequireDefault(_dom);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var KEYCODES = {
-  13: 'enter',
-  91: 'meta',
-  16: 'shift',
-  17: 'ctrl',
-  18: 'alt',
-  37: 'left',
-  38: 'up',
-  39: 'right',
-  40: 'down',
-  9: 'tab',
-  27: 'esc',
-  67: 'c'
-};
-
-var initDone = false;
-var handlers = {};
-
-function bind(dom) {
-  if (initDone) return;
-  _dom2.default.on(dom, 'keydown', handler);
-  initDone = true;
-}
-
-function handler(e) {
-  var key = KEYCODES[e.keyCode];
-
-  if (e.shiftKey && key !== 'shift') {
-    key = 'shift+' + key;
-  }
-
-  if (e.ctrlKey && key !== 'ctrl' || e.metaKey && key !== 'meta') {
-    key = 'ctrl+' + key;
-  }
-
-  var _handlers = handlers[key];
-
-  if (_handlers && _handlers.length > 0) {
-    _handlers.map(function (handler) {
-      var preventBubbling = handler();
-
-      if (preventBubbling === undefined || preventBubbling === true) {
-        e.preventDefault();
-      }
-    });
-  }
-}
-
-exports.default = {
-  init: function init(dom) {
-    bind(dom);
-  },
-  on: function on(key, handler) {
-    var keys = key.split(',').map(function (k) {
-      return k.trim();
-    });
-
-    keys.map(function (key) {
-      handlers[key] = handlers[key] || [];
-      handlers[key].push(handler);
-    });
-  }
-};
-module.exports = exports['default'];
-
 /***/ }),
 /* 9 */
 /***/ (function(module, exports) {
@@ -3102,23 +3100,31 @@ var BodyRenderer = function () {
     value: function renderBodyWithClusterize() {
       var _this = this;
 
-      // empty body
+      if (!this.clusterize) {
-      this.bodyScrollable.innerHTML = '\n      <table class="data-table-body">\n        ' + getBodyHTML([]) + '\n      </table>\n    ';
+        // empty body
+        this.bodyScrollable.innerHTML = '\n        <table class="data-table-body">\n          ' + getBodyHTML([]) + '\n        </table>\n      ';
 
-      // Rows will be appended as promises, so we don't block
+        // Rows will be appended as promises, so we don't block
-      // even for the first page render
+        // even for the first page render
-      this.clusterize = new _clusterize2.default({
+        this.clusterize = new _clusterize2.default({
-        rows: [],
+          rows: [],
-        scrollElem: this.bodyScrollable,
+          scrollElem: this.bodyScrollable,
-        contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
+          contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
-        callbacks: {
+          callbacks: {
-          clusterChanged: function clusterChanged() {
+            clusterChanged: function clusterChanged() {
-            _this.rowmanager.highlightCheckedRows();
+              _this.rowmanager.highlightCheckedRows();
-            _this.cellmanager.selectAreaOnClusterChanged();
+              _this.cellmanager.selectAreaOnClusterChanged();
-            _this.cellmanager.focusCellOnClusterChanged();
+              _this.cellmanager.focusCellOnClusterChanged();
-          }
+            }
-        }
+          },
-      });
+          /* eslint-disable */
+          no_data_text: 'Loading..',
+          no_data_class: 'empty-state'
+          /* eslint-enable */
+        });
+      } else {
+        this.clusterize.update([]);
+      }
 
       this.appendRemainingData();
       // setDimensions will work only if there is atleast one row appended

src/body-renderer.js

@@ -35,27 +35,35 @@ export default class BodyRenderer {
 
   renderBodyWithClusterize() {
 
-    // empty body
+    if (!this.clusterize) {
-    this.bodyScrollable.innerHTML = `
+      // empty body
-      <table class="data-table-body">
+      this.bodyScrollable.innerHTML = `
-        ${getBodyHTML([])}
+        <table class="data-table-body">
-      </table>
+          ${getBodyHTML([])}
-    `;
+        </table>
+      `;
 
-    // Rows will be appended as promises, so we don't block
+      // Rows will be appended as promises, so we don't block
-    // even for the first page render
+      // even for the first page render
-    this.clusterize = new Clusterize({
+      this.clusterize = new Clusterize({
-      rows: [],
+        rows: [],
-      scrollElem: this.bodyScrollable,
+        scrollElem: this.bodyScrollable,
-      contentElem: $('tbody', this.bodyScrollable),
+        contentElem: $('tbody', this.bodyScrollable),
-      callbacks: {
+        callbacks: {
-        clusterChanged: () => {
+          clusterChanged: () => {
-          this.rowmanager.highlightCheckedRows();
+            this.rowmanager.highlightCheckedRows();
-          this.cellmanager.selectAreaOnClusterChanged();
+            this.cellmanager.selectAreaOnClusterChanged();
-          this.cellmanager.focusCellOnClusterChanged();
+            this.cellmanager.focusCellOnClusterChanged();
-        }
+          }
-      }
+        },
-    });
+        /* eslint-disable */
+        no_data_text: 'Loading..',
+        no_data_class: 'empty-state'
+        /* eslint-enable */
+      });
+    } else {
+      this.clusterize.update([]);
+    }
 
     this.appendRemainingData();
     // setDimensions will work only if there is atleast one row appended

src/cellmanager.js

@@ -46,7 +46,7 @@ export default class CellManager {
         this.activateEditing(this.$focusedCell);
       } else if (this.$editingCell) {
         // enter keypress on editing cell
-        this.submitEditing(this.$editingCell);
+        this.submitEditing();
         this.deactivateEditing();
       }
     });
@@ -398,7 +398,9 @@ export default class CellManager {
     };
   }
 
-  submitEditing($cell) {
+  submitEditing() {
+    if (!this.$editingCell) return;
+    const $cell = this.$editingCell;
     const { rowIndex, colIndex } = $.data($cell);
 
     if ($cell) {

src/dom.js

@@ -165,15 +165,8 @@ $.inViewport = (el, parentEl) => {
   return top >= pTop && left >= pLeft && bottom <= pBottom && right <= pRight;
 };
 
-$.scrollTop = function scrollTop(element, offset) {
+$.scrollTop = function scrollTop(element, pixels) {
-  let c = 0;
+  requestAnimationFrame(() => {
-  scroll();
+    element.scrollTop = pixels;
-
+  });
-  function scroll() {
-    if (c <= offset) {
-      c = c + offset / 8;
-      requestAnimationFrame(scroll);
-      element.scrollTop = c;
-    }
-  }
 };

src/rowmanager.js

@@ -161,22 +161,23 @@ export default class RowManager {
   }
 
   scrollToRow(rowIndex) {
+    rowIndex = +rowIndex;
+    this._lastScrollTo = this._lastScrollTo || 0;
     const $row = this.getRow$(rowIndex);
     if ($.inViewport($row, this.bodyScrollable)) return;
 
-    const { top, height } = $row.getBoundingClientRect();
+    const { height } = $row.getBoundingClientRect();
-    const { top: pTop } = this.bodyScrollable.getBoundingClientRect();
+    const { top, bottom } = this.bodyScrollable.getBoundingClientRect();
+    const rowsInView = Math.floor((bottom - top) / height);
 
-    let offset;
+    let offset = 0;
-    if (top < pTop) {
+    if (rowIndex > this._lastScrollTo) {
-      offset = this.bodyScrollable.scrollTop - (pTop - top) - height;
+      offset = height * ((rowIndex + 1) - rowsInView);
-      if (offset < 0) offset = 0;
     } else {
-      offset = this.bodyScrollable.scrollTop + (top - this.bodyScrollable.clientHeight);
+      offset = height * ((rowIndex + 1) - 1);
     }
 
-    console.log(rowIndex, offset);
+    this._lastScrollTo = rowIndex;
-
     $.scrollTop(this.bodyScrollable, offset);
   }
 }