react-virtualized - npm Package Compare versions

Comparing version 8.3.1 to 8.4.0

CHANGELOG.md

 Changelog
 ------------
 
+##### 8.4.0
+`ArrowKeyStepper` incrementing behavior can now be further customized via new `mode` prop.
+Default behavior will remain the same (eg `mode='edges'`).
+Use `mode='cells'` to prefer smaller increments.
+
 ##### 8.3.1
@@ -5,0 +10,0 @@ Fixed `scrollToAlignment` bug in `Collection` that caused cells not to render under certain conditions.

dist/commonjs/ArrowKeyStepper/ArrowKeyStepper.js

@@ -37,4 +37,4 @@ 'use strict';
     _this.state = {
-      scrollToColumn: 0,
-      scrollToRow: 0
+      scrollToColumn: props.scrollToColumn,
+      scrollToRow: props.scrollToRow
     };
@@ -53,2 +53,17 @@
   _createClass(ArrowKeyStepper, [{
+    key: 'componentWillUpdate',
+    value: function componentWillUpdate(nextProps, nextState) {
+      var scrollToColumn = nextProps.scrollToColumn;
+      var scrollToRow = nextProps.scrollToRow;
+
+
+      if (this.props.scrollToColumn !== scrollToColumn) {
+        this.setState({ scrollToColumn: scrollToColumn });
+      }
+
+      if (this.props.scrollToRow !== scrollToRow) {
+        this.setState({ scrollToRow: scrollToRow });
+      }
+    }
+  }, {
     key: 'render',
@@ -87,3 +102,10 @@ value: function render() {
       var columnCount = _props2.columnCount;
+      var mode = _props2.mode;
       var rowCount = _props2.rowCount;
+      var _state2 = this.state;
+      var scrollToColumnPrevious = _state2.scrollToColumn;
+      var scrollToRowPrevious = _state2.scrollToRow;
+      var _state3 = this.state;
+      var scrollToColumn = _state3.scrollToColumn;
+      var scrollToRow = _state3.scrollToRow;
 
@@ -95,26 +117,20 @@ // The above cases all prevent default event event behavior.
         case 'ArrowDown':
-          event.preventDefault();
-          this.setState({
-            scrollToRow: Math.min(this._rowStopIndex + 1, rowCount - 1)
-          });
+          scrollToRow = mode === 'cells' ? Math.min(scrollToRow + 1, rowCount - 1) : Math.min(this._rowStopIndex + 1, rowCount - 1);
           break;
         case 'ArrowLeft':
-          event.preventDefault();
-          this.setState({
-            scrollToColumn: Math.max(this._columnStartIndex - 1, 0)
-          });
+          scrollToColumn = mode === 'cells' ? Math.max(scrollToColumn - 1, 0) : Math.max(this._columnStartIndex - 1, 0);
           break;
         case 'ArrowRight':
-          event.preventDefault();
-          this.setState({
-            scrollToColumn: Math.min(this._columnStopIndex + 1, columnCount - 1)
-          });
+          scrollToColumn = mode === 'cells' ? Math.min(scrollToColumn + 1, columnCount - 1) : Math.min(this._columnStopIndex + 1, columnCount - 1);
           break;
         case 'ArrowUp':
-          event.preventDefault();
-          this.setState({
-            scrollToRow: Math.max(this._rowStartIndex - 1, 0)
-          });
+          scrollToRow = mode === 'cells' ? Math.max(scrollToRow - 1, 0) : Math.max(this._rowStartIndex - 1, 0);
           break;
       }
+
+      if (scrollToColumn !== scrollToColumnPrevious || scrollToRow !== scrollToRowPrevious) {
+        event.preventDefault();
+
+        this.setState({ scrollToColumn: scrollToColumn, scrollToRow: scrollToRow });
+      }
     }
@@ -139,2 +155,7 @@ }, {
 
+ArrowKeyStepper.defaultProps = {
+  mode: 'edges',
+  scrollToColumn: 0,
+  scrollToRow: 0
+};
 exports.default = ArrowKeyStepper;
@@ -145,3 +166,6 @@ process.env.NODE_ENV !== "production" ? ArrowKeyStepper.propTypes = {
   columnCount: _react.PropTypes.number.isRequired,
-  rowCount: _react.PropTypes.number.isRequired
+  mode: _react.PropTypes.oneOf(['cells', 'edges']),
+  rowCount: _react.PropTypes.number.isRequired,
+  scrollToColumn: _react.PropTypes.number.isRequired,
+  scrollToRow: _react.PropTypes.number.isRequired
 } : void 0;

dist/es/ArrowKeyStepper/ArrowKeyStepper.js

@@ -22,4 +22,4 @@ import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
     _this.state = {
-      scrollToColumn: 0,
-      scrollToRow: 0
+      scrollToColumn: props.scrollToColumn,
+      scrollToRow: props.scrollToRow
     };
@@ -38,2 +38,17 @@
   _createClass(ArrowKeyStepper, [{
+    key: 'componentWillUpdate',
+    value: function componentWillUpdate(nextProps, nextState) {
+      var scrollToColumn = nextProps.scrollToColumn;
+      var scrollToRow = nextProps.scrollToRow;
+
+
+      if (this.props.scrollToColumn !== scrollToColumn) {
+        this.setState({ scrollToColumn: scrollToColumn });
+      }
+
+      if (this.props.scrollToRow !== scrollToRow) {
+        this.setState({ scrollToRow: scrollToRow });
+      }
+    }
+  }, {
     key: 'render',
@@ -72,3 +87,10 @@ value: function render() {
       var columnCount = _props2.columnCount;
+      var mode = _props2.mode;
       var rowCount = _props2.rowCount;
+      var _state2 = this.state;
+      var scrollToColumnPrevious = _state2.scrollToColumn;
+      var scrollToRowPrevious = _state2.scrollToRow;
+      var _state3 = this.state;
+      var scrollToColumn = _state3.scrollToColumn;
+      var scrollToRow = _state3.scrollToRow;
 
@@ -80,26 +102,20 @@ // The above cases all prevent default event event behavior.
         case 'ArrowDown':
-          event.preventDefault();
-          this.setState({
-            scrollToRow: Math.min(this._rowStopIndex + 1, rowCount - 1)
-          });
+          scrollToRow = mode === 'cells' ? Math.min(scrollToRow + 1, rowCount - 1) : Math.min(this._rowStopIndex + 1, rowCount - 1);
           break;
         case 'ArrowLeft':
-          event.preventDefault();
-          this.setState({
-            scrollToColumn: Math.max(this._columnStartIndex - 1, 0)
-          });
+          scrollToColumn = mode === 'cells' ? Math.max(scrollToColumn - 1, 0) : Math.max(this._columnStartIndex - 1, 0);
           break;
         case 'ArrowRight':
-          event.preventDefault();
-          this.setState({
-            scrollToColumn: Math.min(this._columnStopIndex + 1, columnCount - 1)
-          });
+          scrollToColumn = mode === 'cells' ? Math.min(scrollToColumn + 1, columnCount - 1) : Math.min(this._columnStopIndex + 1, columnCount - 1);
           break;
         case 'ArrowUp':
-          event.preventDefault();
-          this.setState({
-            scrollToRow: Math.max(this._rowStartIndex - 1, 0)
-          });
+          scrollToRow = mode === 'cells' ? Math.max(scrollToRow - 1, 0) : Math.max(this._rowStartIndex - 1, 0);
           break;
       }
+
+      if (scrollToColumn !== scrollToColumnPrevious || scrollToRow !== scrollToRowPrevious) {
+        event.preventDefault();
+
+        this.setState({ scrollToColumn: scrollToColumn, scrollToRow: scrollToRow });
+      }
     }
@@ -124,2 +140,7 @@ }, {
 
+ArrowKeyStepper.defaultProps = {
+  mode: 'edges',
+  scrollToColumn: 0,
+  scrollToRow: 0
+};
 export default ArrowKeyStepper;
@@ -130,3 +151,6 @@ process.env.NODE_ENV !== "production" ? ArrowKeyStepper.propTypes = {
   columnCount: PropTypes.number.isRequired,
-  rowCount: PropTypes.number.isRequired
+  mode: PropTypes.oneOf(['cells', 'edges']),
+  rowCount: PropTypes.number.isRequired,
+  scrollToColumn: PropTypes.number.isRequired,
+  scrollToRow: PropTypes.number.isRequired
 } : void 0;

package.json

@@ -6,3 +6,3 @@ {
   "user": "bvaughn",
-  "version": "8.3.1",
+  "version": "8.4.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

1353602

0.48%

Lines of code

14566

0.34%

No dependency changes