react-virtualized - npm Package Compare versions

Comparing version 5.5.5 to 5.5.6

CHANGELOG.md

 Changelog
 ------------
 
+##### 5.5.6
+Max scroll position logic in `Grid` now takes scrollbar size into consideration.
+Also includes a small `render` optimization for null cells.
+This release made possible by @jquense!
+
 ##### 5.5.5
@@ -5,0 +10,0 @@ Updated `package.json` to support React `^0.14.0` as well as `^15.0.0-rc.1`.

dist/commonjs/Grid/Grid.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _scrollbarSize = require('dom-helpers/util/scrollbarSize');
+
+var _scrollbarSize2 = _interopRequireDefault(_scrollbarSize);
+
 var _react = require('react');
@@ -158,2 +162,4 @@
 
+      this._scrollbarSize = (0, _scrollbarSize2.default)();
+
       if (scrollLeft >= 0 || scrollTop >= 0) {
@@ -379,2 +385,9 @@ this.setScrollPosition({ scrollLeft: scrollLeft, scrollTop: scrollTop });
             var key = rowIndex + '-' + columnIndex;
+
+            // any other falsey value will be rendered
+            // as a text node by React
+            if (renderedCell == null || renderedCell === false) {
+              continue;
+            }
+
             var child = _react2.default.createElement(
@@ -724,6 +737,7 @@ 'div',
 
+      var scrollbarSize = this._scrollbarSize;
       var totalRowsHeight = this._getTotalRowsHeight();
       var totalColumnsWidth = this._getTotalColumnsWidth();
-      var scrollLeft = Math.min(totalColumnsWidth - width, event.target.scrollLeft);
-      var scrollTop = Math.min(totalRowsHeight - height, event.target.scrollTop);
+      var scrollLeft = Math.min(totalColumnsWidth - width + scrollbarSize, event.target.scrollLeft);
+      var scrollTop = Math.min(totalRowsHeight - height + scrollbarSize, event.target.scrollTop);
 
@@ -730,0 +744,0 @@ // Certain devices (like Apple touchpad) rapid-fire duplicate events.

dist/es/Grid/Grid.js

@@ -5,2 +5,3 @@
 import raf from 'raf';
+import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
 import React, { Component, PropTypes } from 'react';
@@ -131,2 +132,4 @@ import shouldPureComponentUpdate from 'react-pure-render/function';
 
+      this._scrollbarSize = getScrollbarSize();
+
       if (scrollLeft >= 0 || scrollTop >= 0) {
@@ -352,2 +355,9 @@ this.setScrollPosition({ scrollLeft: scrollLeft, scrollTop: scrollTop });
             var key = rowIndex + '-' + columnIndex;
+
+            // any other falsey value will be rendered
+            // as a text node by React
+            if (renderedCell == null || renderedCell === false) {
+              continue;
+            }
+
             var child = React.createElement(
@@ -697,6 +707,7 @@ 'div',
 
+      var scrollbarSize = this._scrollbarSize;
       var totalRowsHeight = this._getTotalRowsHeight();
       var totalColumnsWidth = this._getTotalColumnsWidth();
-      var scrollLeft = Math.min(totalColumnsWidth - width, event.target.scrollLeft);
-      var scrollTop = Math.min(totalRowsHeight - height, event.target.scrollTop);
+      var scrollLeft = Math.min(totalColumnsWidth - width + scrollbarSize, event.target.scrollLeft);
+      var scrollTop = Math.min(totalRowsHeight - height + scrollbarSize, event.target.scrollTop);
 
@@ -703,0 +714,0 @@ // Certain devices (like Apple touchpad) rapid-fire duplicate events.

package.json

@@ -6,3 +6,3 @@ {
   "user": "bvaughn",
-  "version": "5.5.5",
+  "version": "5.5.6",
   "homepage": "https://github.com/bvaughn/react-virtualized",
@@ -29,3 +29,3 @@ "main": "dist/commonjs/index.js",
     "prepublish": "npm run build",
-    "start": "webpack-dev-server --hot --inline --config webpack.config.dev.js",
+    "start": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --config webpack.config.dev.js",
     "test": "npm run lint && npm run test:unit",
@@ -130,2 +130,3 @@ "test:unit": "cross-env NODE_ENV=test karma start",
     "classnames": "^2.2.3",
+    "dom-helpers": "^2.4.0",
     "raf": "^3.1.0",
@@ -132,0 +133,0 @@ "react-pure-render": "^1.0.2"

README.md

@@ -22,2 +22,22 @@ <img src="https://cloud.githubusercontent.com/assets/29597/11737732/0ca1e55e-9f91-11e5-97f3-098f2f8ed866.png" alt="React virtualized" data-canonical-src="https://cloud.githubusercontent.com/assets/29597/11737732/0ca1e55e-9f91-11e5-97f3-098f2f8ed866.png" width="330" height="100" />
 
+ES6, CommonJS, and UMD builds are available with each distribution.
+For example:
+
+```js
+// Make sure to import default styles.
+// This only needs to be done once; probably during your application's bootstrapping process.
+import 'react-virtualized/styles.css';
+
+// Then you can import any react-virtualized components you need.
+// Tree-shaking is supported with ES6 or CommonJS usage.
+import { Grid } from 'react-virtualized'
+```
+
+Alternately you can load a global-friendly UMD build:
+
+```html
+<link rel="stylesheet" href="path-to-react-virtualized/styles.css">
+<script src="path-to-react-virtualized/dist/umd/react-virtualized.js"></script>
+```
+
 Documentation
@@ -24,0 +44,0 @@ ---------------

No alert changes

Improved metrics

Total package byte prevSize

613971

increased by1.09%

Lines of code

7247

increased by0.54%

Number of lines in readme file

88

increased by29.41%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addeddom-helpers@^2.4.0

• + Addeddom-helpers@2.4.0(transitive)