react-virtual-list - npm Package Compare versions

Comparing version 2.0.0 to 2.2.0

lib/utils/getVisibleItemBounds.js

@@ -40,4 +40,4 @@ 'use strict';
   // visible list inside view
-  var listViewTop = Math.max(0, Math.min(viewTop - listTop)); // top y-coordinate of list that is visible inside container
-  var listViewBottom = Math.max(0, Math.min(listHeight, viewBottom - listTop)); // bottom y-coordinate of list that is visible inside container
+  var listViewTop = Math.max(0, viewTop - listTop); // top y-coordinate of list that is visible inside view
+  var listViewBottom = Math.max(0, Math.min(listHeight, viewBottom - listTop)); // bottom y-coordinate of list that is visible inside view
 
@@ -44,0 +44,0 @@ // visible item indexes

lib/VirtualList.js

@@ -23,2 +23,10 @@ 'use strict';
 
+var _throttleWithRAF = require('./utils/throttleWithRAF');
+
+var _throttleWithRAF2 = _interopRequireDefault(_throttleWithRAF);
+
+var _defaultMapVirtualToProps = require('./utils/defaultMapVirtualToProps');
+
+var _defaultMapVirtualToProps2 = _interopRequireDefault(_defaultMapVirtualToProps);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,2 +41,3 @@
 var VirtualList = function VirtualList(options) {
+  var mapVirtualToProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultMapVirtualToProps2.default;
   return function (InnerComponent) {
@@ -63,17 +72,3 @@ var _class, _temp;
         if (window && 'requestAnimationFrame' in window) {
-          (function () {
-            var refreshState = _this.refreshState;
-
-            _this.refreshState = function () {
-              if (_this.isRefreshingState) return;
-
-              _this.isRefreshingState = true;
-
-              window.requestAnimationFrame(function () {
-                refreshState();
-
-                _this.isRefreshingState = false;
-              });
-            };
-          })();
+          _this.refreshState = (0, _throttleWithRAF2.default)(_this.refreshState);
         }
@@ -123,5 +118,2 @@ return _this;
           this.options.container.removeEventListener('resize', this.refreshState);
-
-          // remove DOM node cache (is this necessary?)
-          delete this.domNode;
         }
@@ -144,29 +136,3 @@ }, {
         value: function render() {
-          var _state = this.state,
-              firstItemIndex = _state.firstItemIndex,
-              lastItemIndex = _state.lastItemIndex;
-          var _props2 = this.props,
-              items = _props2.items,
-              itemHeight = _props2.itemHeight;
-
-
-          var visibleItems = lastItemIndex > -1 ? items.slice(firstItemIndex, lastItemIndex + 1) : [];
-          // would be nice to make this not break shallowCompare with items.slice
-          // but theoretically we're only rendering if we need to
-
-          // style
-          var height = items.length * itemHeight;
-          var paddingTop = firstItemIndex * itemHeight;
-
-          var virtual = {
-            items: visibleItems,
-            style: {
-              height: height,
-              paddingTop: paddingTop
-            }
-          };
-
-          return _react2.default.createElement(InnerComponent, _extends({}, this.props, {
-            virtual: virtual
-          }));
+          return _react2.default.createElement(InnerComponent, _extends({}, this.props, mapVirtualToProps(this.props, this.state)));
         }
@@ -173,0 +139,0 @@ }]);

package.json

 {
   "name": "react-virtual-list",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Super simple virtualized list React higher-order component",
-  "main": "dist/VirtualList.js",
+  "main": "lib/VirtualList.js",
   "directories": {
@@ -7,0 +7,0 @@ "test": "test"

README.md

@@ -96,2 +96,13 @@ # [react-virtual-list](http://developerdizzle.github.io/react-virtual-list/) [![Build Status](https://travis-ci.org/developerdizzle/react-virtual-list.svg?branch=master)](https://travis-ci.org/developerdizzle/react-virtual-list)
 
+#### Mapping
+
+`VirtualList` allows a second, optional, parameter, named `mapVirtualToProps`, which functions similarly to [Redux's `mapStateToProps`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options).  This function can be provided to change the properties passed to `MyList`.  Its arguments are:
+
+Name | Description
+--- | ---
+`props` | Includes all properties passed to `MyVirtualList`
+`state` | Includes `firstItemIndex` and `lastItemIndex`; array indexes of the visible bounds of `items`
+
+The default `mapVirtualToProps` can be found [here](/src/utils/defaultMapVirtualToProps.js).
+
 #### Example Usage
@@ -98,0 +109,0 @@

src/__tests__/VirtualList.js

@@ -55,3 +55,3 @@ import ReactTestUtils from 'react-addons-test-utils'
     expect(result.props.virtual).not.toBe(undefined);
-  });  
+  });
 
@@ -73,3 +73,3 @@ it('provides the items prop', () => {
     expect(result.props.virtual.items).not.toBe(undefined);
-  });  
+  });
 
@@ -146,3 +146,3 @@ it('provides the style prop', () => {
         itemHeight={100}
-        />
+      />
       )
@@ -155,2 +155,67 @@ );
   });
+
+  it('has default mapVirtualToProps', () => {
+    const container = {
+      clientHeight: 500,
+      offsetTop: 0,
+    };
+
+    const options = {
+      container,
+      initialState: {
+        firstItemIndex: 0,
+        lastItemIndex: 4,
+      },
+    };
+
+    const MyVirtualList = VirtualList(options)(MyList);
+
+    const renderer = ReactTestUtils.createRenderer();
+    renderer.render(
+      (
+      <MyVirtualList
+        items={items}
+        itemHeight={100}
+      />
+      )
+    );
+
+    const result = renderer.getRenderOutput();
+
+    expect(result.props.virtual).toBeDefined();
+  });
+
+  it('allows custom mapVirtualToProps', () => {
+    const container = {
+      clientHeight: 500,
+      offsetTop: 0,
+    };
+
+    const options = {
+      container,
+      initialState: {
+        firstItemIndex: 0,
+        lastItemIndex: 4,
+      },
+    };
+
+    const mapVirtualToProps = ({ items }) => ({ customItemsRef: items })
+
+    const MyVirtualList = VirtualList(options, mapVirtualToProps)(MyList);
+
+    const renderer = ReactTestUtils.createRenderer();
+    renderer.render(
+      (
+      <MyVirtualList
+        items={items}
+        itemHeight={100}
+      />
+      )
+    );
+
+    const result = renderer.getRenderOutput();
+
+    expect(result.props.virtual).toBeUndefined();
+    expect(result.props.customItemsRef).toBeDefined();
+  });
 });

src/VirtualList.js

@@ -5,4 +5,6 @@ import React, { PureComponent, PropTypes } from 'react';
 import getVisibleItemBounds from './utils/getVisibleItemBounds';
+import throttleWithRAF from './utils/throttleWithRAF';
+import defaultMapToVirtualProps from './utils/defaultMapVirtualToProps';
 
-const VirtualList = (options) => (InnerComponent) => {
+const VirtualList = (options, mapVirtualToProps = defaultMapToVirtualProps) => (InnerComponent) => {
   return class vlist extends PureComponent {
@@ -44,15 +46,3 @@ static propTypes = {
       if (window && 'requestAnimationFrame' in window) {
-        const refreshState = this.refreshState;
-
-        this.refreshState = () => {
-          if (this.isRefreshingState) return;
-
-          this.isRefreshingState = true;
-
-          window.requestAnimationFrame(() => {
-            refreshState();
-
-            this.isRefreshingState = false;
-          });
-        };
+        this.refreshState = throttleWithRAF(this.refreshState);
       }
@@ -69,3 +59,3 @@ };
     }
-    
+
     refreshState() {
@@ -76,3 +66,3 @@ const { itemHeight, items, itemBuffer } = this.props;
     };
-    
+
     componentDidMount() {
@@ -89,3 +79,3 @@ // cache the DOM node
     };
-    
+
     componentWillUnmount() {
@@ -103,27 +93,5 @@ // remove events
     };
-    
+
     render() {
-      const { firstItemIndex, lastItemIndex } = this.state;
-      const { items, itemHeight } = this.props;
-
-      const visibleItems = lastItemIndex > -1 ? items.slice(firstItemIndex, lastItemIndex + 1) : [];
-      // would be nice to make this not break shallowCompare with items.slice
-      // but theoretically we're only rendering if we need to
-
-      // style
-      const height = items.length * itemHeight;
-      const paddingTop = firstItemIndex * itemHeight;
-
-      const virtual = {
-        items: visibleItems,
-        style: {
-          height,
-          paddingTop,
-        },
-      };
-
-      return (<InnerComponent
-        {...this.props}
-        virtual={virtual}
-      />);
+      return (<InnerComponent {...this.props} {...mapVirtualToProps(this.props, this.state)} />);
     };
@@ -130,0 +98,0 @@ };

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

213246

increased by362.21%

Number of package files

34

increased by36%

Lines of code

1459

increased by77.28%

Number of lines in readme file

114

increased by10.68%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes