react-virtualized - npm Package Compare versions

Comparing version 9.12.0 to 9.13.0

CHANGELOG.md

 Changelog
 ------------
 
+##### 9.13.0
+* 🎉 Added `headerStyle` support for `Table` columns ([@mucsi96](https://github.com/mucsi96) - [#877](https://github.com/bvaughn/react-virtualized/pull/877))
+* 🐛 Fixed `Masonry` bug that caused cells to be unnecessarily destroyed and then recreated when new cells were measured - d561d9c
+
 ##### 9.12.0
@@ -5,0 +9,0 @@ * 🎉 Added `defaultWidth` and `defaultHeight` props to `AutoSizer` to better support server-side rendering.

dist/commonjs/AutoSizer/AutoSizer.js

@@ -27,8 +27,2 @@ 'use strict';
 
-/**
- * Decorator component that automatically adjusts the width and height of a single child.
- * Child component should not be declared as a child but should rather be specified by a `ChildComponent` property.
- * All other properties will be passed through to the child component.
- */
-
 var AutoSizer = function (_React$PureComponent) {
@@ -35,0 +29,0 @@ _inherits(AutoSizer, _React$PureComponent);

dist/commonjs/Masonry/Masonry.jest.js

@@ -175,6 +175,36 @@ 'use strict';
       expect(cellMeasurerCache.has(10)).toBe(false);
+    });
 
-      // The first batch-measured cell in the new block should be the 10th one
-      // Verify that we measured the correct cell...
-      expect(renderCallback.mock.calls[0][0]).toBe(9);
+    // Masonry used to do a render pass for only unmeasured cells,
+    // But this resulting in removing (and later re-adding) measured cells from the DOM,
+    // Which was bad for performance. See GitHub issue #875
+    it('should not remove previously-measured cells when measuring new ones', function () {
+      var log = [];
+
+      var cellMeasurerCache = createCellMeasurerCache();
+      var renderCallback = function renderCallback(index) {
+        log.push(index);
+      };
+      var cellRenderer = createCellRenderer(cellMeasurerCache, renderCallback);
+
+      var rendered = (0, _reactDom.findDOMNode)((0, _TestUtils.render)(getMarkup({
+        cellMeasurerCache: cellMeasurerCache,
+        cellRenderer: cellRenderer
+      })));
+
+      // Expected to have rendered twice:
+      // 1st time to measure 9 cells (b'c of esimated size)
+      // 2nd time to render and position 9 cells (b'c of actual size)
+      expect(log).toHaveLength(18);
+
+      log.splice(0);
+
+      simulateScroll(rendered, 101);
+
+      // Expected to have rendered twice:
+      // 1st time to measure additional cells (based on estimated size)
+      // 2nd time to render and position with new cells
+      // The 1st render should also have included the pre-measured cells,
+      // To prevent them from being removed, recreated, and re-added to the DOM.
+      expect(log).toHaveLength(18);
     });
@@ -181,0 +211,0 @@

dist/commonjs/Masonry/Masonry.js

@@ -200,3 +200,30 @@ 'use strict';
 
-      // We need to measure more cells before layout
+      var startIndex = 0;
+      var stopIndex = void 0;
+
+      this._positionCache.range(Math.max(0, scrollTop - overscanByPixels), height + overscanByPixels * 2, function (index, left, top) {
+        if (typeof stopIndex === 'undefined') {
+          startIndex = index;
+          stopIndex = index;
+        } else {
+          startIndex = Math.min(startIndex, index);
+          stopIndex = Math.max(stopIndex, index);
+        }
+
+        children.push(cellRenderer({
+          index: index,
+          isScrolling: isScrolling,
+          key: keyMapper(index),
+          parent: _this2,
+          style: {
+            height: cellMeasurerCache.getHeight(index),
+            left: left,
+            position: 'absolute',
+            top: top,
+            width: cellMeasurerCache.getWidth(index)
+          }
+        }));
+      });
+
+      // We need to measure additional cells for this layout
       if (shortestColumnSize < scrollTop + height + overscanByPixels && measuredCellCount < cellCount) {
@@ -206,2 +233,4 @@ var batchSize = Math.min(cellCount - measuredCellCount, Math.ceil((scrollTop + height + overscanByPixels - shortestColumnSize) / cellMeasurerCache.defaultHeight * width / cellMeasurerCache.defaultWidth));
         for (var _index = measuredCellCount; _index < measuredCellCount + batchSize; _index++) {
+          stopIndex = _index;
+
           children.push(cellRenderer({
@@ -217,34 +246,7 @@ index: _index,
         }
-      } else {
-        var _stopIndex = void 0;
-        var _startIndex = void 0;
+      }
 
-        this._positionCache.range(Math.max(0, scrollTop - overscanByPixels), height + overscanByPixels * 2, function (index, left, top) {
-          if (typeof _startIndex === 'undefined') {
-            _startIndex = index;
-            _stopIndex = index;
-          } else {
-            _startIndex = Math.min(_startIndex, index);
-            _stopIndex = Math.max(_stopIndex, index);
-          }
+      this._startIndex = startIndex;
+      this._stopIndex = stopIndex;
 
-          children.push(cellRenderer({
-            index: index,
-            isScrolling: isScrolling,
-            key: keyMapper(index),
-            parent: _this2,
-            style: {
-              height: cellMeasurerCache.getHeight(index),
-              left: left,
-              position: 'absolute',
-              top: top,
-              width: cellMeasurerCache.getWidth(index)
-            }
-          }));
-
-          _this2._startIndex = _startIndex;
-          _this2._stopIndex = _stopIndex;
-        });
-      }
-
       return _react2.default.createElement(
@@ -292,4 +294,4 @@ 'div',
       if (typeof this._invalidateOnUpdateStartIndex === 'number') {
-        var _startIndex2 = this._invalidateOnUpdateStartIndex;
-        var _stopIndex2 = this._invalidateOnUpdateStopIndex;
+        var _startIndex = this._invalidateOnUpdateStartIndex;
+        var _stopIndex = this._invalidateOnUpdateStopIndex;
 
@@ -300,3 +302,3 @@ this._invalidateOnUpdateStartIndex = null;
         // Query external layout logic for position of newly-measured cells
-        this._populatePositionCache(_startIndex2, _stopIndex2);
+        this._populatePositionCache(_startIndex, _stopIndex);
 
@@ -303,0 +305,0 @@ this.forceUpdate();

dist/commonjs/Table/Column.js

@@ -108,2 +108,5 @@ 'use strict';
 
+  /** Optional inline style to apply to this column's header */
+  headerStyle: _propTypes2.default.object,
+
   /** Optional id to set on the column header */
@@ -110,0 +113,0 @@ id: _propTypes2.default.string,

dist/commonjs/Table/Table.jest.js

@@ -91,2 +91,3 @@ 'use strict';
         columnStyle = _ref4.columnStyle,
+        columnHeaderStyle = _ref4.columnHeaderStyle,
         _ref4$disableSort = _ref4.disableSort,
@@ -98,3 +99,3 @@ disableSort = _ref4$disableSort === undefined ? false : _ref4$disableSort,
         defaultSortDirection = _ref4.defaultSortDirection,
-        flexTableProps = _objectWithoutProperties(_ref4, ['cellDataGetter', 'cellRenderer', 'columnData', 'columnID', 'columnStyle', 'disableSort', 'headerRenderer', 'maxWidth', 'minWidth', 'defaultSortDirection']);
+        flexTableProps = _objectWithoutProperties(_ref4, ['cellDataGetter', 'cellRenderer', 'columnData', 'columnID', 'columnStyle', 'columnHeaderStyle', 'disableSort', 'headerRenderer', 'maxWidth', 'minWidth', 'defaultSortDirection']);
 
@@ -124,2 +125,3 @@ return _react2.default.createElement(
         style: columnStyle,
+        headerStyle: columnHeaderStyle,
         id: columnID
@@ -960,2 +962,3 @@ }),
       var headerStyle = { backgroundColor: 'blue' };
+      var columnHeaderStyle = { color: 'yellow' };
       var rowStyle = { backgroundColor: 'green' };
@@ -966,2 +969,3 @@ var style = { backgroundColor: 'orange' };
         headerStyle: headerStyle,
+        columnHeaderStyle: columnHeaderStyle,
         rowStyle: rowStyle,
@@ -972,2 +976,3 @@ style: style
       expect(node.querySelector('.ReactVirtualized__Table__headerColumn').style.backgroundColor).toEqual('blue');
+      expect(node.querySelector('.ReactVirtualized__Table__headerColumn').style.color).toEqual('yellow');
       expect(node.querySelector('.ReactVirtualized__Table__row').style.backgroundColor).toEqual('green');
@@ -974,0 +979,0 @@ expect(node.style.backgroundColor).toEqual('orange');

dist/commonjs/Table/Table.js

@@ -360,3 +360,3 @@ 'use strict';
       });
-      var style = this._getFlexStyleForColumn(column, headerStyle);
+      var style = this._getFlexStyleForColumn(column, _extends({}, headerStyle, column.props.headerStyle));
 
@@ -363,0 +363,0 @@ var renderedHeader = headerRenderer({

dist/es/AutoSizer/AutoSizer.js

@@ -12,8 +12,2 @@ import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
 
-/**
- * Decorator component that automatically adjusts the width and height of a single child.
- * Child component should not be declared as a child but should rather be specified by a `ChildComponent` property.
- * All other properties will be passed through to the child component.
- */
-
 var AutoSizer = function (_React$PureComponent) {
@@ -20,0 +14,0 @@ _inherits(AutoSizer, _React$PureComponent);

dist/es/Masonry/Masonry.jest.js

@@ -159,6 +159,36 @@ import _extends from 'babel-runtime/helpers/extends';
       expect(cellMeasurerCache.has(10)).toBe(false);
+    });
 
-      // The first batch-measured cell in the new block should be the 10th one
-      // Verify that we measured the correct cell...
-      expect(renderCallback.mock.calls[0][0]).toBe(9);
+    // Masonry used to do a render pass for only unmeasured cells,
+    // But this resulting in removing (and later re-adding) measured cells from the DOM,
+    // Which was bad for performance. See GitHub issue #875
+    it('should not remove previously-measured cells when measuring new ones', function () {
+      var log = [];
+
+      var cellMeasurerCache = createCellMeasurerCache();
+      var renderCallback = function renderCallback(index) {
+        log.push(index);
+      };
+      var cellRenderer = createCellRenderer(cellMeasurerCache, renderCallback);
+
+      var rendered = findDOMNode(render(getMarkup({
+        cellMeasurerCache: cellMeasurerCache,
+        cellRenderer: cellRenderer
+      })));
+
+      // Expected to have rendered twice:
+      // 1st time to measure 9 cells (b'c of esimated size)
+      // 2nd time to render and position 9 cells (b'c of actual size)
+      expect(log).toHaveLength(18);
+
+      log.splice(0);
+
+      simulateScroll(rendered, 101);
+
+      // Expected to have rendered twice:
+      // 1st time to measure additional cells (based on estimated size)
+      // 2nd time to render and position with new cells
+      // The 1st render should also have included the pre-measured cells,
+      // To prevent them from being removed, recreated, and re-added to the DOM.
+      expect(log).toHaveLength(18);
     });
@@ -165,0 +195,0 @@

dist/es/Masonry/Masonry.js

@@ -178,3 +178,30 @@ import _extends from 'babel-runtime/helpers/extends';
 
-      // We need to measure more cells before layout
+      var startIndex = 0;
+      var stopIndex = void 0;
+
+      this._positionCache.range(Math.max(0, scrollTop - overscanByPixels), height + overscanByPixels * 2, function (index, left, top) {
+        if (typeof stopIndex === 'undefined') {
+          startIndex = index;
+          stopIndex = index;
+        } else {
+          startIndex = Math.min(startIndex, index);
+          stopIndex = Math.max(stopIndex, index);
+        }
+
+        children.push(cellRenderer({
+          index: index,
+          isScrolling: isScrolling,
+          key: keyMapper(index),
+          parent: _this2,
+          style: {
+            height: cellMeasurerCache.getHeight(index),
+            left: left,
+            position: 'absolute',
+            top: top,
+            width: cellMeasurerCache.getWidth(index)
+          }
+        }));
+      });
+
+      // We need to measure additional cells for this layout
       if (shortestColumnSize < scrollTop + height + overscanByPixels && measuredCellCount < cellCount) {
@@ -184,2 +211,4 @@ var batchSize = Math.min(cellCount - measuredCellCount, Math.ceil((scrollTop + height + overscanByPixels - shortestColumnSize) / cellMeasurerCache.defaultHeight * width / cellMeasurerCache.defaultWidth));
         for (var _index = measuredCellCount; _index < measuredCellCount + batchSize; _index++) {
+          stopIndex = _index;
+
           children.push(cellRenderer({
@@ -195,36 +224,7 @@ index: _index,
         }
-      } else {
-        (function () {
-          var stopIndex = void 0;
-          var startIndex = void 0;
+      }
 
-          _this2._positionCache.range(Math.max(0, scrollTop - overscanByPixels), height + overscanByPixels * 2, function (index, left, top) {
-            if (typeof startIndex === 'undefined') {
-              startIndex = index;
-              stopIndex = index;
-            } else {
-              startIndex = Math.min(startIndex, index);
-              stopIndex = Math.max(stopIndex, index);
-            }
+      this._startIndex = startIndex;
+      this._stopIndex = stopIndex;
 
-            children.push(cellRenderer({
-              index: index,
-              isScrolling: isScrolling,
-              key: keyMapper(index),
-              parent: _this2,
-              style: {
-                height: cellMeasurerCache.getHeight(index),
-                left: left,
-                position: 'absolute',
-                top: top,
-                width: cellMeasurerCache.getWidth(index)
-              }
-            }));
-
-            _this2._startIndex = startIndex;
-            _this2._stopIndex = stopIndex;
-          });
-        })();
-      }
-
       return React.createElement(
@@ -231,0 +231,0 @@ 'div',

dist/es/Table/Column.js

@@ -84,2 +84,5 @@ import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
 
+  /** Optional inline style to apply to this column's header */
+  headerStyle: PropTypes.object,
+
   /** Optional id to set on the column header */
@@ -86,0 +89,0 @@ id: PropTypes.string,

dist/es/Table/Table.jest.js

@@ -67,2 +67,3 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty';
         columnStyle = _ref4.columnStyle,
+        columnHeaderStyle = _ref4.columnHeaderStyle,
         _ref4$disableSort = _ref4.disableSort,
@@ -74,3 +75,3 @@ disableSort = _ref4$disableSort === undefined ? false : _ref4$disableSort,
         defaultSortDirection = _ref4.defaultSortDirection,
-        flexTableProps = _objectWithoutProperties(_ref4, ['cellDataGetter', 'cellRenderer', 'columnData', 'columnID', 'columnStyle', 'disableSort', 'headerRenderer', 'maxWidth', 'minWidth', 'defaultSortDirection']);
+        flexTableProps = _objectWithoutProperties(_ref4, ['cellDataGetter', 'cellRenderer', 'columnData', 'columnID', 'columnStyle', 'columnHeaderStyle', 'disableSort', 'headerRenderer', 'maxWidth', 'minWidth', 'defaultSortDirection']);
 
@@ -100,2 +101,3 @@ return React.createElement(
         style: columnStyle,
+        headerStyle: columnHeaderStyle,
         id: columnID
@@ -936,2 +938,3 @@ }),
       var headerStyle = { backgroundColor: 'blue' };
+      var columnHeaderStyle = { color: 'yellow' };
       var rowStyle = { backgroundColor: 'green' };
@@ -942,2 +945,3 @@ var style = { backgroundColor: 'orange' };
         headerStyle: headerStyle,
+        columnHeaderStyle: columnHeaderStyle,
         rowStyle: rowStyle,
@@ -948,2 +952,3 @@ style: style
       expect(node.querySelector('.ReactVirtualized__Table__headerColumn').style.backgroundColor).toEqual('blue');
+      expect(node.querySelector('.ReactVirtualized__Table__headerColumn').style.color).toEqual('yellow');
       expect(node.querySelector('.ReactVirtualized__Table__row').style.backgroundColor).toEqual('green');
@@ -950,0 +955,0 @@ expect(node.style.backgroundColor).toEqual('orange');

dist/es/Table/Table.js

@@ -326,3 +326,3 @@ import _extends from 'babel-runtime/helpers/extends';
       });
-      var style = this._getFlexStyleForColumn(column, headerStyle);
+      var style = this._getFlexStyleForColumn(column, _extends({}, headerStyle, column.props.headerStyle));
 
@@ -329,0 +329,0 @@ var renderedHeader = headerRenderer({

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2896487

increased by0.1%

Lines of code

40905

increased by0.12%

No dependency changes