react-virtualized - npm Package Compare versions

Comparing version 6.0.8 to 6.1.0

CHANGELOG.md

 Changelog
 ------------
 
+#### 6.1.0
+`Grid` supports a new `renderCellRanges` property for customizing the rendering of a window of cells.
+This function should implement the following signature:
+```js
+function renderCellRanges ({
+  columnMetadata:Array<Object>,
+  columnStartIndex: number,
+  columnStopIndex: number,
+  renderCell: Function,
+  rowMetadata:Array<Object>,
+  rowStartIndex: number,
+  rowStopIndex: number
+}): Array<PropTypes.node>
+```
+
 #### 6.0.8
@@ -5,0 +20,0 @@ Fixed dependency ranges for `react-addons-shallow-compare` and `react-dom`.

dist/commonjs/Grid/Grid.js

@@ -286,2 +286,3 @@ 'use strict';
       var renderCell = _props3.renderCell;
+      var renderCellRanges = _props3.renderCellRanges;
       var rowsCount = _props3.rowsCount;
@@ -339,34 +340,11 @@ var width = _props3.width;
 
-        for (var rowIndex = this._rowStartIndex; rowIndex <= this._rowStopIndex; rowIndex++) {
-          var rowDatum = this._rowMetadata[rowIndex];
-
-          for (var columnIndex = this._columnStartIndex; columnIndex <= this._columnStopIndex; columnIndex++) {
-            var columnDatum = this._columnMetadata[columnIndex];
-            var renderedCell = renderCell({ columnIndex: columnIndex, rowIndex: rowIndex });
-            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(
-              'div',
-              {
-                key: key,
-                className: 'Grid__cell',
-                style: {
-                  height: rowDatum.size,
-                  left: columnDatum.offset,
-                  top: rowDatum.offset,
-                  width: columnDatum.size
-                }
-              },
-              renderedCell
-            );
-
-            childrenToDisplay.push(child);
-          }
-        }
+        childrenToDisplay = renderCellRanges({
+          columnMetadata: this._columnMetadata,
+          columnStartIndex: this._columnStartIndex,
+          columnStopIndex: this._columnStopIndex,
+          renderCell: renderCell,
+          rowMetadata: this._rowMetadata,
+          rowStartIndex: this._rowStartIndex,
+          rowStopIndex: this._rowStopIndex
+        });
       }
@@ -760,2 +738,16 @@
   /**
+   * Responsible for rendering a group of cells given their index ranges.
+   * Should implement the following interface: ({
+   *   columnMetadata:Array<Object>,
+   *   columnStartIndex: number,
+   *   columnStopIndex: number,
+   *   renderCell: Function,
+   *   rowMetadata:Array<Object>,
+   *   rowStartIndex: number,
+   *   rowStopIndex: number
+   * }): Array<PropTypes.node>
+   */
+  renderCellRanges: _react.PropTypes.func.isRequired,
+
+  /**
    * Either a fixed row height (number) or a function that returns the height of a row given its index.
@@ -804,4 +796,53 @@ * Should implement the following interface: (index: number): number
   overscanColumnsCount: 0,
-  overscanRowsCount: 10
+  overscanRowsCount: 10,
+  renderCellRanges: defaultRenderCellRanges
 };
-exports.default = Grid;
+exports.default = Grid;
+
+
+function defaultRenderCellRanges(_ref4) {
+  var columnMetadata = _ref4.columnMetadata;
+  var columnStartIndex = _ref4.columnStartIndex;
+  var columnStopIndex = _ref4.columnStopIndex;
+  var renderCell = _ref4.renderCell;
+  var rowMetadata = _ref4.rowMetadata;
+  var rowStartIndex = _ref4.rowStartIndex;
+  var rowStopIndex = _ref4.rowStopIndex;
+
+  var renderedCells = [];
+
+  for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
+    var rowDatum = rowMetadata[rowIndex];
+
+    for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+      var columnDatum = columnMetadata[columnIndex];
+      var renderedCell = renderCell({ columnIndex: columnIndex, rowIndex: rowIndex });
+      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(
+        'div',
+        {
+          key: key,
+          className: 'Grid__cell',
+          style: {
+            height: rowDatum.size,
+            left: columnDatum.offset,
+            top: rowDatum.offset,
+            width: columnDatum.size
+          }
+        },
+        renderedCell
+      );
+
+      renderedCells.push(child);
+    }
+  }
+
+  return renderedCells;
+}

dist/es/Grid/Grid.js

@@ -256,2 +256,3 @@
       var renderCell = _props3.renderCell;
+      var renderCellRanges = _props3.renderCellRanges;
       var rowsCount = _props3.rowsCount;
@@ -309,34 +310,11 @@ var width = _props3.width;
 
-        for (var rowIndex = this._rowStartIndex; rowIndex <= this._rowStopIndex; rowIndex++) {
-          var rowDatum = this._rowMetadata[rowIndex];
-
-          for (var columnIndex = this._columnStartIndex; columnIndex <= this._columnStopIndex; columnIndex++) {
-            var columnDatum = this._columnMetadata[columnIndex];
-            var renderedCell = renderCell({ columnIndex: columnIndex, rowIndex: rowIndex });
-            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(
-              'div',
-              {
-                key: key,
-                className: 'Grid__cell',
-                style: {
-                  height: rowDatum.size,
-                  left: columnDatum.offset,
-                  top: rowDatum.offset,
-                  width: columnDatum.size
-                }
-              },
-              renderedCell
-            );
-
-            childrenToDisplay.push(child);
-          }
-        }
+        childrenToDisplay = renderCellRanges({
+          columnMetadata: this._columnMetadata,
+          columnStartIndex: this._columnStartIndex,
+          columnStopIndex: this._columnStopIndex,
+          renderCell: renderCell,
+          rowMetadata: this._rowMetadata,
+          rowStartIndex: this._rowStartIndex,
+          rowStopIndex: this._rowStopIndex
+        });
       }
@@ -729,2 +707,16 @@
   /**
+   * Responsible for rendering a group of cells given their index ranges.
+   * Should implement the following interface: ({
+   *   columnMetadata:Array<Object>,
+   *   columnStartIndex: number,
+   *   columnStopIndex: number,
+   *   renderCell: Function,
+   *   rowMetadata:Array<Object>,
+   *   rowStartIndex: number,
+   *   rowStopIndex: number
+   * }): Array<PropTypes.node>
+   */
+  renderCellRanges: PropTypes.func.isRequired,
+
+  /**
    * Either a fixed row height (number) or a function that returns the height of a row given its index.
@@ -773,4 +765,53 @@ * Should implement the following interface: (index: number): number
   overscanColumnsCount: 0,
-  overscanRowsCount: 10
+  overscanRowsCount: 10,
+  renderCellRanges: defaultRenderCellRanges
 };
-export default Grid;
+export default Grid;
+
+
+function defaultRenderCellRanges(_ref4) {
+  var columnMetadata = _ref4.columnMetadata;
+  var columnStartIndex = _ref4.columnStartIndex;
+  var columnStopIndex = _ref4.columnStopIndex;
+  var renderCell = _ref4.renderCell;
+  var rowMetadata = _ref4.rowMetadata;
+  var rowStartIndex = _ref4.rowStartIndex;
+  var rowStopIndex = _ref4.rowStopIndex;
+
+  var renderedCells = [];
+
+  for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
+    var rowDatum = rowMetadata[rowIndex];
+
+    for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+      var columnDatum = columnMetadata[columnIndex];
+      var renderedCell = renderCell({ columnIndex: columnIndex, rowIndex: rowIndex });
+      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(
+        'div',
+        {
+          key: key,
+          className: 'Grid__cell',
+          style: {
+            height: rowDatum.size,
+            left: columnDatum.offset,
+            top: rowDatum.offset,
+            width: columnDatum.size
+          }
+        },
+        renderedCell
+      );
+
+      renderedCells.push(child);
+    }
+  }
+
+  return renderedCells;
+}

package.json

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

659682

increased by0.88%

Lines of code

7667

increased by1.12%

No dependency changes