react-virtualized - npm Package Compare versions

Comparing version 5.4.0 to 5.5.0

CHANGELOG.md

 Changelog
 ------------
 
+### 5.5.0
+`ScrollSync` passes additional parameters to child function in order to enable more complex scroll-driven UI changes.
+
 ### 5.4.0
@@ -5,0 +8,0 @@ Added optional `headerRenderer` property to `FlexColumn` to enable custom `FlexTable` header cells.

dist/commonjs/Grid/Grid.js

@@ -174,2 +174,10 @@ 'use strict';
       this._invokeOnGridRenderedHelper();
+
+      // Initialize onScroll callback
+      this._invokeOnScrollMemoizer({
+        scrollLeft: scrollLeft || 0,
+        scrollTop: scrollTop || 0,
+        totalColumnsWidth: this._getTotalColumnsWidth(),
+        totalRowsHeight: this._getTotalRowsHeight()
+      });
     }
@@ -577,3 +585,36 @@ }, {
     }
+  }, {
+    key: '_invokeOnScrollMemoizer',
+    value: function _invokeOnScrollMemoizer(_ref3) {
+      var scrollLeft = _ref3.scrollLeft;
+      var scrollTop = _ref3.scrollTop;
+      var totalColumnsWidth = _ref3.totalColumnsWidth;
+      var totalRowsHeight = _ref3.totalRowsHeight;
+      var _props5 = this.props;
+      var height = _props5.height;
+      var onScroll = _props5.onScroll;
+      var width = _props5.width;
 
+
+      this._onScrollMemoizer({
+        callback: function callback(_ref4) {
+          var scrollLeft = _ref4.scrollLeft;
+          var scrollTop = _ref4.scrollTop;
+
+          onScroll({
+            clientHeight: height,
+            clientWidth: width,
+            scrollHeight: totalRowsHeight,
+            scrollLeft: scrollLeft,
+            scrollTop: scrollTop,
+            scrollWidth: totalColumnsWidth
+          });
+        },
+        indices: {
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop
+        }
+      });
+    }
+
     /**
@@ -658,7 +699,7 @@ * Updates the state during the next animation frame.
     value: function _onKeyPress(event) {
-      var _props5 = this.props;
-      var columnsCount = _props5.columnsCount;
-      var height = _props5.height;
-      var rowsCount = _props5.rowsCount;
-      var width = _props5.width;
+      var _props6 = this.props;
+      var columnsCount = _props6.columnsCount;
+      var height = _props6.height;
+      var rowsCount = _props6.rowsCount;
+      var width = _props6.width;
       var _state3 = this.state;
@@ -760,6 +801,5 @@ var scrollLeft = _state3.scrollLeft;
       // We can avoid that by doing some simple bounds checking to ensure that scrollTop never exceeds the total height.
-      var _props6 = this.props;
-      var height = _props6.height;
-      var onScroll = _props6.onScroll;
-      var width = _props6.width;
+      var _props7 = this.props;
+      var height = _props7.height;
+      var width = _props7.width;
 
@@ -796,21 +836,3 @@ var totalRowsHeight = this._getTotalRowsHeight();
 
-      this._onScrollMemoizer({
-        callback: function callback(_ref3) {
-          var scrollLeft = _ref3.scrollLeft;
-          var scrollTop = _ref3.scrollTop;
-
-          onScroll({
-            clientHeight: height,
-            clientWidth: width,
-            scrollHeight: totalRowsHeight,
-            scrollLeft: scrollLeft,
-            scrollTop: scrollTop,
-            scrollWidth: totalColumnsWidth
-          });
-        },
-        indices: {
-          scrollLeft: scrollLeft,
-          scrollTop: scrollTop
-        }
-      });
+      this._invokeOnScrollMemoizer({ scrollLeft: scrollLeft, scrollTop: scrollTop, totalColumnsWidth: totalColumnsWidth, totalRowsHeight: totalRowsHeight });
     }
@@ -817,0 +839,0 @@ }]);

dist/commonjs/ScrollSync/ScrollSync.js

@@ -39,4 +39,8 @@ 'use strict';
     _this.state = {
+      clientHeight: 0,
+      clientWidth: 0,
+      scrollHeight: 0,
       scrollLeft: 0,
-      scrollTop: 0
+      scrollTop: 0,
+      scrollWidth: 0
     };
@@ -53,10 +57,18 @@
       var _state = this.state;
+      var clientHeight = _state.clientHeight;
+      var clientWidth = _state.clientWidth;
+      var scrollHeight = _state.scrollHeight;
       var scrollLeft = _state.scrollLeft;
       var scrollTop = _state.scrollTop;
+      var scrollWidth = _state.scrollWidth;
 
 
       return children({
+        clientHeight: clientHeight,
+        clientWidth: clientWidth,
         onScroll: this._onScroll,
+        scrollHeight: scrollHeight,
         scrollLeft: scrollLeft,
-        scrollTop: scrollTop
+        scrollTop: scrollTop,
+        scrollWidth: scrollWidth
       });
@@ -67,6 +79,10 @@ }
     value: function _onScroll(_ref) {
+      var clientHeight = _ref.clientHeight;
+      var clientWidth = _ref.clientWidth;
+      var scrollHeight = _ref.scrollHeight;
       var scrollLeft = _ref.scrollLeft;
       var scrollTop = _ref.scrollTop;
+      var scrollWidth = _ref.scrollWidth;
 
-      this.setState({ scrollLeft: scrollLeft, scrollTop: scrollTop });
+      this.setState({ clientHeight: clientHeight, clientWidth: clientWidth, scrollHeight: scrollHeight, scrollLeft: scrollLeft, scrollTop: scrollTop, scrollWidth: scrollWidth });
     }
@@ -73,0 +89,0 @@ }]);

dist/es/Grid/Grid.js

@@ -147,2 +147,10 @@
       this._invokeOnGridRenderedHelper();
+
+      // Initialize onScroll callback
+      this._invokeOnScrollMemoizer({
+        scrollLeft: scrollLeft || 0,
+        scrollTop: scrollTop || 0,
+        totalColumnsWidth: this._getTotalColumnsWidth(),
+        totalRowsHeight: this._getTotalRowsHeight()
+      });
     }
@@ -550,3 +558,36 @@ }, {
     }
+  }, {
+    key: '_invokeOnScrollMemoizer',
+    value: function _invokeOnScrollMemoizer(_ref3) {
+      var scrollLeft = _ref3.scrollLeft;
+      var scrollTop = _ref3.scrollTop;
+      var totalColumnsWidth = _ref3.totalColumnsWidth;
+      var totalRowsHeight = _ref3.totalRowsHeight;
+      var _props5 = this.props;
+      var height = _props5.height;
+      var onScroll = _props5.onScroll;
+      var width = _props5.width;
 
+
+      this._onScrollMemoizer({
+        callback: function callback(_ref4) {
+          var scrollLeft = _ref4.scrollLeft;
+          var scrollTop = _ref4.scrollTop;
+
+          onScroll({
+            clientHeight: height,
+            clientWidth: width,
+            scrollHeight: totalRowsHeight,
+            scrollLeft: scrollLeft,
+            scrollTop: scrollTop,
+            scrollWidth: totalColumnsWidth
+          });
+        },
+        indices: {
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop
+        }
+      });
+    }
+
     /**
@@ -631,7 +672,7 @@ * Updates the state during the next animation frame.
     value: function _onKeyPress(event) {
-      var _props5 = this.props;
-      var columnsCount = _props5.columnsCount;
-      var height = _props5.height;
-      var rowsCount = _props5.rowsCount;
-      var width = _props5.width;
+      var _props6 = this.props;
+      var columnsCount = _props6.columnsCount;
+      var height = _props6.height;
+      var rowsCount = _props6.rowsCount;
+      var width = _props6.width;
       var _state3 = this.state;
@@ -733,6 +774,5 @@ var scrollLeft = _state3.scrollLeft;
       // We can avoid that by doing some simple bounds checking to ensure that scrollTop never exceeds the total height.
-      var _props6 = this.props;
-      var height = _props6.height;
-      var onScroll = _props6.onScroll;
-      var width = _props6.width;
+      var _props7 = this.props;
+      var height = _props7.height;
+      var width = _props7.width;
 
@@ -769,21 +809,3 @@ var totalRowsHeight = this._getTotalRowsHeight();
 
-      this._onScrollMemoizer({
-        callback: function callback(_ref3) {
-          var scrollLeft = _ref3.scrollLeft;
-          var scrollTop = _ref3.scrollTop;
-
-          onScroll({
-            clientHeight: height,
-            clientWidth: width,
-            scrollHeight: totalRowsHeight,
-            scrollLeft: scrollLeft,
-            scrollTop: scrollTop,
-            scrollWidth: totalColumnsWidth
-          });
-        },
-        indices: {
-          scrollLeft: scrollLeft,
-          scrollTop: scrollTop
-        }
-      });
+      this._invokeOnScrollMemoizer({ scrollLeft: scrollLeft, scrollTop: scrollTop, totalColumnsWidth: totalColumnsWidth, totalRowsHeight: totalRowsHeight });
     }
@@ -790,0 +812,0 @@ }]);

dist/es/ScrollSync/ScrollSync.js

@@ -20,4 +20,8 @@ import { Component, PropTypes } from 'react';
     _this.state = {
+      clientHeight: 0,
+      clientWidth: 0,
+      scrollHeight: 0,
       scrollLeft: 0,
-      scrollTop: 0
+      scrollTop: 0,
+      scrollWidth: 0
     };
@@ -34,10 +38,18 @@
       var _state = this.state;
+      var clientHeight = _state.clientHeight;
+      var clientWidth = _state.clientWidth;
+      var scrollHeight = _state.scrollHeight;
       var scrollLeft = _state.scrollLeft;
       var scrollTop = _state.scrollTop;
+      var scrollWidth = _state.scrollWidth;
 
 
       return children({
+        clientHeight: clientHeight,
+        clientWidth: clientWidth,
         onScroll: this._onScroll,
+        scrollHeight: scrollHeight,
         scrollLeft: scrollLeft,
-        scrollTop: scrollTop
+        scrollTop: scrollTop,
+        scrollWidth: scrollWidth
       });
@@ -48,6 +60,10 @@ }
     value: function _onScroll(_ref) {
+      var clientHeight = _ref.clientHeight;
+      var clientWidth = _ref.clientWidth;
+      var scrollHeight = _ref.scrollHeight;
       var scrollLeft = _ref.scrollLeft;
       var scrollTop = _ref.scrollTop;
+      var scrollWidth = _ref.scrollWidth;
 
-      this.setState({ scrollLeft: scrollLeft, scrollTop: scrollTop });
+      this.setState({ clientHeight: clientHeight, clientWidth: clientWidth, scrollHeight: scrollHeight, scrollLeft: scrollLeft, scrollTop: scrollTop, scrollWidth: scrollWidth });
     }
@@ -54,0 +70,0 @@ }]);

package.json

@@ -6,3 +6,3 @@ {
   "user": "bvaughn",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "homepage": "https://github.com/bvaughn/react-virtualized",
@@ -9,0 +9,0 @@ "main": "dist/commonjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

632766

increased by1.29%

Lines of code

7377

increased by1.35%

No dependency changes