fixed-data-table-2 - npm Package Compare versions

Comparing version 0.0.7-experimental-column-virtualization to 0.0.8-experimental-column-virtualization

internal/FixedDataTable.js

@@ -188,2 +188,29 @@ "use strict";
 
+    _defineProperty(_assertThisInitialized(_this), "_reportViewportInfo", function (prevProps) {
+      var _this$props3 = _this.props,
+          firstColumnIndex = _this$props3.firstColumnIndex,
+          firstRowIndex = _this$props3.firstRowIndex,
+          lastColumnIndex = _this$props3.endColumnIndex,
+          lastRowIndex = _this$props3.endRowIndex,
+          onViewportChange = _this$props3.onViewportChange;
+      var oldFirstColumnIndex = prevProps.firstColumnIndex,
+          oldFirstRowIndex = prevProps.firstRowIndex,
+          oldLastColumnIndex = prevProps.endColumnIndex,
+          oldLastRowIndex = prevProps.endRowIndex;
+
+      if (!onViewportChange) {
+        return;
+      } // check if any of the visible set of columns/rows have changed
+
+
+      if (firstColumnIndex !== oldFirstColumnIndex || firstRowIndex !== oldFirstRowIndex || lastColumnIndex !== oldLastColumnIndex || lastRowIndex !== oldLastRowIndex) {
+        onViewportChange({
+          firstRowIndex: firstRowIndex,
+          lastRowIndex: lastRowIndex,
+          firstColumnIndex: firstColumnIndex,
+          lastColumnIndex: lastColumnIndex
+        });
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "_reportContentHeight", function () {
@@ -273,12 +300,12 @@ var _tableHeightsSelector = (0, _tableHeights["default"])(_this.props),
     deltaY) {
-      var _this$props3 = _this.props,
-          maxScrollX = _this$props3.maxScrollX,
-          maxScrollY = _this$props3.maxScrollY,
-          onHorizontalScroll = _this$props3.onHorizontalScroll,
-          onVerticalScroll = _this$props3.onVerticalScroll,
-          scrollActions = _this$props3.scrollActions,
-          scrollFlags = _this$props3.scrollFlags,
-          scrollX = _this$props3.scrollX,
-          scrollY = _this$props3.scrollY,
-          scrolling = _this$props3.scrolling;
+      var _this$props4 = _this.props,
+          maxScrollX = _this$props4.maxScrollX,
+          maxScrollY = _this$props4.maxScrollY,
+          onHorizontalScroll = _this$props4.onHorizontalScroll,
+          onVerticalScroll = _this$props4.onVerticalScroll,
+          scrollActions = _this$props4.scrollActions,
+          scrollFlags = _this$props4.scrollFlags,
+          scrollX = _this$props4.scrollX,
+          scrollY = _this$props4.scrollY,
+          scrolling = _this$props4.scrolling;
       var overflowX = scrollFlags.overflowX,
@@ -324,12 +351,14 @@ overflowY = scrollFlags.overflowY;
     prevProps) {
-      var _this$props4 = _this.props,
-          onScrollStart = _this$props4.onScrollStart,
-          scrollX = _this$props4.scrollX,
-          scrollY = _this$props4.scrollY,
-          onHorizontalScroll = _this$props4.onHorizontalScroll,
-          onVerticalScroll = _this$props4.onVerticalScroll,
-          ownerHeight = _this$props4.tableSize.ownerHeight,
-          scrolling = _this$props4.scrolling;
-      var oldEndRowIndex = prevProps.endRowIndex,
-          oldFirstRowIndex = prevProps.firstRowIndex,
+      var _this$props5 = _this.props,
+          onScrollStart = _this$props5.onScrollStart,
+          scrollX = _this$props5.scrollX,
+          scrollY = _this$props5.scrollY,
+          onHorizontalScroll = _this$props5.onHorizontalScroll,
+          onVerticalScroll = _this$props5.onVerticalScroll,
+          ownerHeight = _this$props5.tableSize.ownerHeight,
+          scrolling = _this$props5.scrolling;
+      var oldFirstRowIndex = prevProps.firstRowIndex,
+          oldFirstColumnIndex = prevProps.firstColumnIndex,
+          oldLastRowIndex = prevProps.endRowIndex,
+          oldLastColumnIndex = prevProps.endColumnIndex,
           oldScrollX = prevProps.scrollX,
@@ -350,3 +379,3 @@ oldScrollY = prevProps.scrollY,
       if (!oldScrolling && scrolling && onScrollStart) {
-        onScrollStart(oldScrollX, oldScrollY, oldFirstRowIndex, oldEndRowIndex);
+        onScrollStart(oldScrollX, oldScrollY, oldFirstRowIndex, oldLastRowIndex, oldFirstColumnIndex, oldLastColumnIndex);
       }
@@ -367,12 +396,12 @@
     _defineProperty(_assertThisInitialized(_this), "_didScrollStopSync", function () {
-      var _this$props5 = _this.props,
-          endColumnIndex = _this$props5.endColumnIndex,
-          endRowIndex = _this$props5.endRowIndex,
-          firstColumnIndex = _this$props5.firstColumnIndex,
-          firstRowIndex = _this$props5.firstRowIndex,
-          onScrollEnd = _this$props5.onScrollEnd,
-          scrollActions = _this$props5.scrollActions,
-          scrollX = _this$props5.scrollX,
-          scrollY = _this$props5.scrollY,
-          scrolling = _this$props5.scrolling;
+      var _this$props6 = _this.props,
+          endColumnIndex = _this$props6.endColumnIndex,
+          endRowIndex = _this$props6.endRowIndex,
+          firstColumnIndex = _this$props6.firstColumnIndex,
+          firstRowIndex = _this$props6.firstRowIndex,
+          onScrollEnd = _this$props6.onScrollEnd,
+          scrollActions = _this$props6.scrollActions,
+          scrollX = _this$props6.scrollX,
+          scrollY = _this$props6.scrollY,
+          scrolling = _this$props6.scrolling;
 
@@ -489,2 +518,4 @@ if (!scrolling) {
 
+      this._reportViewportInfo({});
+
       this._reportContentHeight();
@@ -501,2 +532,4 @@
 
+      this._reportViewportInfo(prevProps);
+
       this._reportContentHeight();
@@ -519,7 +552,7 @@
 
-      var _this$props6 = this.props,
-          width = _this$props6.tableSize.width,
-          scrollContentHeight = _this$props6.scrollContentHeight,
-          scrollY = _this$props6.scrollY,
-          scrollX = _this$props6.scrollX;
+      var _this$props7 = this.props,
+          width = _this$props7.tableSize.width,
+          scrollContentHeight = _this$props7.scrollContentHeight,
+          scrollY = _this$props7.scrollY,
+          scrollX = _this$props7.scrollX;
       var newScrollState = {
@@ -556,9 +589,9 @@ viewportHeight: visibleRowsHeight,
 
-      var _this$props7 = this.props,
-          fixedColumnGroups = _this$props7.fixedColumnGroups,
-          fixedColumns = _this$props7.fixedColumns,
-          fixedRightColumnGroups = _this$props7.fixedRightColumnGroups,
-          fixedRightColumns = _this$props7.fixedRightColumns,
-          scrollableColumnGroups = _this$props7.scrollableColumnGroups,
-          scrollableColumns = _this$props7.scrollableColumns;
+      var _this$props8 = this.props,
+          fixedColumnGroups = _this$props8.fixedColumnGroups,
+          fixedColumns = _this$props8.fixedColumns,
+          fixedRightColumnGroups = _this$props8.fixedRightColumnGroups,
+          fixedRightColumns = _this$props8.fixedRightColumns,
+          scrollableColumnGroups = _this$props8.scrollableColumnGroups,
+          scrollableColumns = _this$props8.scrollableColumns;
 
@@ -573,17 +606,17 @@ var _tableHeightsSelector4 = (0, _tableHeights["default"])(this.props),
 
-      var _this$props8 = this.props,
-          className = _this$props8.className,
-          elementHeights = _this$props8.elementHeights,
-          gridAttributesGetter = _this$props8.gridAttributesGetter,
-          maxScrollX = _this$props8.maxScrollX,
-          maxScrollY = _this$props8.maxScrollY,
-          onColumnReorderEndCallback = _this$props8.onColumnReorderEndCallback,
-          onColumnResizeEndCallback = _this$props8.onColumnResizeEndCallback,
-          scrollContentHeight = _this$props8.scrollContentHeight,
-          scrollX = _this$props8.scrollX,
-          scrollY = _this$props8.scrollY,
-          scrolling = _this$props8.scrolling,
-          tableSize = _this$props8.tableSize,
-          touchScrollEnabled = _this$props8.touchScrollEnabled,
-          scrollbarYWidth = _this$props8.scrollbarYWidth;
+      var _this$props9 = this.props,
+          className = _this$props9.className,
+          elementHeights = _this$props9.elementHeights,
+          gridAttributesGetter = _this$props9.gridAttributesGetter,
+          maxScrollX = _this$props9.maxScrollX,
+          maxScrollY = _this$props9.maxScrollY,
+          onColumnReorderEndCallback = _this$props9.onColumnReorderEndCallback,
+          onColumnResizeEndCallback = _this$props9.onColumnResizeEndCallback,
+          scrollContentHeight = _this$props9.scrollContentHeight,
+          scrollX = _this$props9.scrollX,
+          scrollY = _this$props9.scrollY,
+          scrolling = _this$props9.scrolling,
+          tableSize = _this$props9.tableSize,
+          touchScrollEnabled = _this$props9.touchScrollEnabled,
+          scrollbarYWidth = _this$props9.scrollbarYWidth;
       var ownerHeight = tableSize.ownerHeight,
@@ -1042,3 +1075,15 @@ width = tableSize.width;
    * Callback that is called when scrolling starts. The current horizontal and vertical scroll values,
-   * and the current first and last row indexes will be provided to the callback.
+   * the current first and last row indexes, and the current first and last column indexes
+   * will be provided to the callback.
+   *
+   * ```
+   * function(
+   *   scrollX, // the current horizontal scroll value
+   *   scrollY, // the current vertical scroll value
+   *   firstRowIndex: number, // the first visible row in the viewport
+   *   lastRowIndex: number, // the last visible row in the viewport
+   *   firstColumnIndex: number, // the first visible column in the viewport
+   *   lastColumnIndex: number, // the last visible column in the viewport
+   * )
+   * ```
    */
@@ -1049,3 +1094,15 @@ onScrollStart: _propTypes["default"].func,
    * Callback that is called when scrolling ends. The new horizontal and vertical scroll values,
-   * and the new first and last row indexes will be provided to the callback.
+   * the new first and last row indexes, and the new first and last column indexes
+   * will be provided to the callback.
+   *
+   * ```
+   * function(
+   *   scrollX, // the new horizontal scroll value
+   *   scrollY, // the new vertical scroll value
+   *   firstRowIndex: number, // the first visible row in the viewport
+   *   lastRowIndex: number, // the last visible row in the viewport
+   *   firstColumnIndex: number, // the first visible column in the viewport
+   *   lastColumnIndex: number, // the last visible column in the viewport
+   * )
+   * ```
    */
@@ -1055,2 +1112,16 @@ onScrollEnd: _propTypes["default"].func,
   /**
+   * Callback that is called when the set of visible columns/rows inside the viewport changes.
+   *
+   * ```
+   * function({
+   *   firstRowIndex: number, // the first visible row in the viewport
+   *   lastRowIndex: number, // the last visible row in the viewport
+   *   firstColumnIndex: number, // the first visible column in the viewport
+   *   lastColumnIndex: number, // the last visible column in the viewport
+   * })
+   * ```
+   */
+  onViewportChange: _propTypes["default"].func,
+
+  /**
    * If enabled scroll events will not be propagated outside of the table.
@@ -1057,0 +1128,0 @@ */

internal/FixedDataTableRoot.js

@@ -73,3 +73,3 @@ /**
 
-var version = '0.0.7-experimental-column-virtualization';
+var version = '0.0.8-experimental-column-virtualization';
 exports.version = version;
@@ -76,0 +76,0 @@ var Plugins = {

package.json

 {
   "name": "fixed-data-table-2",
-  "version": "0.0.7-experimental-column-virtualization",
+  "version": "0.0.8-experimental-column-virtualization",
   "description": "A React table component designed to allow presenting thousands of rows of data.",
@@ -5,0 +5,0 @@ "main": "main.js",

No alert changes

Improved metrics

Total package byte prevSize

4014744

increased by0.9%

Lines of code

33377

increased by0.25%

No dependency changes