react-infinite-list - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/react-infinite-list.js

 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("React"));
+		module.exports = factory(require("react"));
 	else if(typeof define === 'function' && define.amd)
-		define(["React"], factory);
+		define(["react"], factory);
 	else if(typeof exports === 'object')
-		exports["react-infinite-list"] = factory(require("React"));
+		exports["react-infinite-list"] = factory(require("react"));
 	else
@@ -99,2 +99,7 @@ root["react-infinite-list"] = factory(root["React"]);
 
+	InfiniteListItem.propTypes = {
+	    height: React.PropTypes.number.isRequired,
+	    title: React.PropTypes.string.isRequired
+	};
+
 	var InfiniteList = (function (_React$Component2) {
@@ -106,6 +111,3 @@ function InfiniteList(props) {
 
-	        this.state = {
-	            renderedStart: 0,
-	            renderedEnd: this.props.numOfVisibleItems
-	        };
+	        this.state = { renderedStart: 0 };
 	    }
@@ -118,60 +120,59 @@
 	            value: function onScroll() {
+	                this._calculateVisibleItems();
+	            }
+	        },
+	        _calculateVisibleItems: {
+	            value: function _calculateVisibleItems() {
 	                var scrolledPx = React.findDOMNode(this).scrollTop;
 
 	                var visibleStart = parseInt(scrolledPx / this.props.itemHeight);
-	                var visibleEnd = Math.min(visibleStart + this.props.numOfVisibleItems, this.props.items.length - 1);
 
 	                if (visibleStart !== this.state.renderedStart) {
-	                    this._showItems(visibleStart, visibleEnd);
+	                    this.setState({ renderedStart: visibleStart });
 	                }
 	            }
 	        },
-	        renderFromStart: {
-	            value: function renderFromStart() {
-	                this.getDOMNode().scrollTop = 0;
+	        componentWillReceiveProps: {
+	            value: function componentWillReceiveProps(nextProps) {
+	                var itemsChanged = this.props.items.length !== nextProps.items.length,
+	                    visibleItemsChanged = this.props.numOfVisibleItems !== nextProps.numOfVisibleItems;
 
-	                this.setState({
-	                    renderedStart: 0,
-	                    renderedEnd: this.props.numOfVisibleItems
-	                });
+	                // scroll to the top when searching
+	                if (itemsChanged) {
+	                    React.findDOMNode(this).scrollTop = 0;
+	                }
+
+	                if (itemsChanged || visibleItemsChanged) {
+	                    this._calculateVisibleItems();
+	                }
 	            }
 	        },
-	        _showItems: {
-	            value: function _showItems(visibleStart, visibleEnd) {
-	                this.setState({
-	                    renderedStart: visibleStart,
-	                    renderedEnd: visibleEnd
-	                });
+	        _getItemComponent: {
+	            value: function _getItemComponent(item) {
+	                var ListItemComponent = this.props.listItemClass || InfiniteListItem;
+	                return React.createElement(ListItemComponent, _extends({ key: item.id }, item, { height: this.props.itemHeight }));
 	            }
 	        },
-	        _getListItemClass: {
-	            value: function _getListItemClass(item, height) {
-	                if (this.props.listItemClass) {
-	                    return React.createElement(this.props.listItemClass, _extends({ key: item.id }, item, { height: height }));
-	                }
-
-	                return React.createElement(InfiniteListItem, _extends({ key: item.id }, item, { height: height }));
-	            }
-	        },
 	        render: {
 	            value: function render() {
-	                var itemsToRender = {};
+	                var renderedStart = this.state.renderedStart;var _props = this.props;
+	                var items = _props.items;
+	                var itemHeight = _props.itemHeight;
 
-	                itemsToRender.top = React.createElement("div", { className: "topitem",
-	                    style: { height: this.state.renderedStart * this.props.itemHeight } });
+	                var numOfVisibleItems = _props.numOfVisibleItems;
+	                var paddingHeight = renderedStart * itemHeight;
+	                var visibleHeight = numOfVisibleItems * itemHeight;
+	                var listHeight = items.length * itemHeight;
 
-	                for (var i = this.state.renderedStart; i <= this.state.renderedEnd; i++) {
-	                    var item = this.props.items[i];
-	                    itemsToRender["item " + i] = this._getListItemClass(item, this.props.itemHeight);
-	                }
+	                var visibleItems = items.slice(renderedStart, renderedStart + numOfVisibleItems);
+	                var listItems = visibleItems.map(this._getItemComponent, this);
 
 	                return React.createElement(
 	                    "div",
-	                    { className: "infinite-list", onScroll: this.onScroll.bind(this),
-	                        style: { height: this.props.itemHeight * this.props.numOfVisibleItems } },
+	                    { className: "infinite-list", onScroll: this.onScroll.bind(this), style: { height: visibleHeight } },
 	                    React.createElement(
 	                        "div",
-	                        { className: "infinite-list-content",
-	                            style: { height: this.props.items.length * this.props.itemHeight } },
-	                        React.addons.createFragment(itemsToRender)
+	                        { className: "infinite-list-content", style: { height: listHeight } },
+	                        React.createElement("div", { className: "topitem", style: { height: paddingHeight }, key: "top" }),
+	                        listItems
 	                    )
@@ -188,2 +189,8 @@ );
 
+	InfiniteList.propTypes = {
+	    items: React.PropTypes.array.isRequired,
+	    itemHeight: React.PropTypes.number.isRequired,
+	    numOfVisibleItems: React.PropTypes.number.isRequired
+	};
+
 /***/ },
@@ -190,0 +197,0 @@ /* 1 */

dist/react-infinite-list.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React")):"function"==typeof define&&define.amd?define(["React"],e):"object"==typeof exports?exports["react-infinite-list"]=e(require("React")):t["react-infinite-list"]=e(t.React)}(this,function(t){return function(t){function e(i){if(r[i])return r[i].exports;var n=r[i]={exports:{},id:i,loaded:!1};return t[i].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";var i=function(t){return t&&t.__esModule?t["default"]:t},n=function h(t,e,r){var i=Object.getOwnPropertyDescriptor(t,e);if(void 0===i){var n=Object.getPrototypeOf(t);return null===n?void 0:h(n,e,r)}if("value"in i&&i.writable)return i.value;var s=i.get;return void 0===s?void 0:s.call(r)},s=function(){function t(t,e){for(var r in e){var i=e[r];i.configurable=!0,i.value&&(i.writable=!0)}Object.defineProperties(t,e)}return function(e,r,i){return r&&t(e.prototype,r),i&&t(e,i),e}}(),o=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(t.__proto__=e)},a=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(t[i]=r[i])}return t},p=i(r(1)),u=function(t){function e(){a(this,e),null!=t&&t.apply(this,arguments)}return o(e,t),s(e,{render:{value:function(){return p.createElement("div",{className:"infinite-list-item",style:{height:this.props.height}},this.props.title)}}}),e}(p.Component),c=function(t){function e(t){a(this,e),n(Object.getPrototypeOf(e.prototype),"constructor",this).call(this,t),this.state={renderedStart:0,renderedEnd:this.props.numOfVisibleItems}}return o(e,t),s(e,{onScroll:{value:function(){var t=p.findDOMNode(this).scrollTop,e=parseInt(t/this.props.itemHeight),r=Math.min(e+this.props.numOfVisibleItems,this.props.items.length-1);e!==this.state.renderedStart&&this._showItems(e,r)}},renderFromStart:{value:function(){this.getDOMNode().scrollTop=0,this.setState({renderedStart:0,renderedEnd:this.props.numOfVisibleItems})}},_showItems:{value:function(t,e){this.setState({renderedStart:t,renderedEnd:e})}},_getListItemClass:{value:function(t,e){return this.props.listItemClass?p.createElement(this.props.listItemClass,l({key:t.id},t,{height:e})):p.createElement(u,l({key:t.id},t,{height:e}))}},render:{value:function(){var t={};t.top=p.createElement("div",{className:"topitem",style:{height:this.state.renderedStart*this.props.itemHeight}});for(var e=this.state.renderedStart;e<=this.state.renderedEnd;e++){var r=this.props.items[e];t["item "+e]=this._getListItemClass(r,this.props.itemHeight)}return p.createElement("div",{className:"infinite-list",onScroll:this.onScroll.bind(this),style:{height:this.props.itemHeight*this.props.numOfVisibleItems}},p.createElement("div",{className:"infinite-list-content",style:{height:this.props.items.length*this.props.itemHeight}},p.addons.createFragment(t)))}}}),e}(p.Component);t.exports=c},function(e,r,i){e.exports=t}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["react-infinite-list"]=t(require("react")):e["react-infinite-list"]=t(e.React)}(this,function(e){return function(e){function t(i){if(r[i])return r[i].exports;var n=r[i]={exports:{},id:i,loaded:!1};return e[i].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";var i=function(e){return e&&e.__esModule?e["default"]:e},n=function f(e,t,r){var i=Object.getOwnPropertyDescriptor(e,t);if(void 0===i){var n=Object.getPrototypeOf(e);return null===n?void 0:f(n,t,r)}if("value"in i&&i.writable)return i.value;var o=i.get;return void 0===o?void 0:o.call(r)},o=function(){function e(e,t){for(var r in t){var i=t[r];i.configurable=!0,i.value&&(i.writable=!0)}Object.defineProperties(e,t)}return function(t,r,i){return r&&e(t.prototype,r),i&&e(t,i),t}}(),s=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},l=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},u=i(r(1)),c=function(e){function t(){l(this,t),null!=e&&e.apply(this,arguments)}return s(t,e),o(t,{render:{value:function(){return u.createElement("div",{className:"infinite-list-item",style:{height:this.props.height}},this.props.title)}}}),t}(u.Component);c.propTypes={height:u.PropTypes.number.isRequired,title:u.PropTypes.string.isRequired};var p=function(e){function t(e){l(this,t),n(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={renderedStart:0}}return s(t,e),o(t,{onScroll:{value:function(){this._calculateVisibleItems()}},_calculateVisibleItems:{value:function(){var e=u.findDOMNode(this).scrollTop,t=parseInt(e/this.props.itemHeight);t!==this.state.renderedStart&&this.setState({renderedStart:t})}},componentWillReceiveProps:{value:function(e){var t=this.props.items.length!==e.items.length,r=this.props.numOfVisibleItems!==e.numOfVisibleItems;t&&(u.findDOMNode(this).scrollTop=0),(t||r)&&this._calculateVisibleItems()}},_getItemComponent:{value:function(e){var t=this.props.listItemClass||c;return u.createElement(t,a({key:e.id},e,{height:this.props.itemHeight}))}},render:{value:function(){var e=this.state.renderedStart,t=this.props,r=t.items,i=t.itemHeight,n=t.numOfVisibleItems,o=e*i,s=n*i,l=r.length*i,a=r.slice(e,e+n),c=a.map(this._getItemComponent,this);return u.createElement("div",{className:"infinite-list",onScroll:this.onScroll.bind(this),style:{height:s}},u.createElement("div",{className:"infinite-list-content",style:{height:l}},u.createElement("div",{className:"topitem",style:{height:o},key:"top"}),c))}}}),t}(u.Component);e.exports=p,p.propTypes={items:u.PropTypes.array.isRequired,itemHeight:u.PropTypes.number.isRequired,numOfVisibleItems:u.PropTypes.number.isRequired}},function(t,r,i){t.exports=e}])});

lib/react-infinite-list.js

@@ -1,4 +0,4 @@
-'use strict';
+"use strict";
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
     value: true
@@ -9,15 +9,15 @@ });
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
 
-var _reactAddons = require('react/addons');
+var _react = require("react");
 
-var _reactAddons2 = _interopRequireDefault(_reactAddons);
+var _react2 = _interopRequireDefault(_react);
 
@@ -36,7 +36,7 @@ var InfiniteListItem = (function (_React$Component) {
     _createClass(InfiniteListItem, [{
-        key: 'render',
+        key: "render",
         value: function render() {
-            return _reactAddons2['default'].createElement(
-                'div',
-                { className: 'infinite-list-item', style: { height: this.props.height } },
+            return _react2["default"].createElement(
+                "div",
+                { className: "infinite-list-item", style: { height: this.props.height } },
                 this.props.title
@@ -48,4 +48,9 @@ );
     return InfiniteListItem;
-})(_reactAddons2['default'].Component);
+})(_react2["default"].Component);
 
+InfiniteListItem.propTypes = {
+    height: _react2["default"].PropTypes.number.isRequired,
+    title: _react2["default"].PropTypes.string.isRequired
+};
+
 var InfiniteList = (function (_React$Component2) {
@@ -55,8 +60,5 @@ function InfiniteList(props) {
 
-        _get(Object.getPrototypeOf(InfiniteList.prototype), 'constructor', this).call(this, props);
+        _get(Object.getPrototypeOf(InfiniteList.prototype), "constructor", this).call(this, props);
 
-        this.state = {
-            renderedStart: 0,
-            renderedEnd: this.props.numOfVisibleItems
-        };
+        this.state = { renderedStart: 0 };
     }
@@ -67,62 +69,61 @@
     _createClass(InfiniteList, [{
-        key: 'onScroll',
+        key: "onScroll",
         value: function onScroll() {
-            var scrolledPx = _reactAddons2['default'].findDOMNode(this).scrollTop;
+            this._calculateVisibleItems();
+        }
+    }, {
+        key: "_calculateVisibleItems",
+        value: function _calculateVisibleItems() {
+            var scrolledPx = _react2["default"].findDOMNode(this).scrollTop;
 
             var visibleStart = parseInt(scrolledPx / this.props.itemHeight);
-            var visibleEnd = Math.min(visibleStart + this.props.numOfVisibleItems, this.props.items.length - 1);
 
             if (visibleStart !== this.state.renderedStart) {
-                this._showItems(visibleStart, visibleEnd);
+                this.setState({ renderedStart: visibleStart });
             }
         }
     }, {
-        key: 'renderFromStart',
-        value: function renderFromStart() {
-            this.getDOMNode().scrollTop = 0;
+        key: "componentWillReceiveProps",
+        value: function componentWillReceiveProps(nextProps) {
+            var itemsChanged = this.props.items.length !== nextProps.items.length,
+                visibleItemsChanged = this.props.numOfVisibleItems !== nextProps.numOfVisibleItems;
 
-            this.setState({
-                renderedStart: 0,
-                renderedEnd: this.props.numOfVisibleItems
-            });
+            // scroll to the top when searching
+            if (itemsChanged) {
+                _react2["default"].findDOMNode(this).scrollTop = 0;
+            }
+
+            if (itemsChanged || visibleItemsChanged) {
+                this._calculateVisibleItems();
+            }
         }
     }, {
-        key: '_showItems',
-        value: function _showItems(visibleStart, visibleEnd) {
-            this.setState({
-                renderedStart: visibleStart,
-                renderedEnd: visibleEnd
-            });
+        key: "_getItemComponent",
+        value: function _getItemComponent(item) {
+            var ListItemComponent = this.props.listItemClass || InfiniteListItem;
+            return _react2["default"].createElement(ListItemComponent, _extends({ key: item.id }, item, { height: this.props.itemHeight }));
         }
     }, {
-        key: '_getListItemClass',
-        value: function _getListItemClass(item, height) {
-            if (this.props.listItemClass) {
-                return _reactAddons2['default'].createElement(this.props.listItemClass, _extends({ key: item.id }, item, { height: height }));
-            }
-
-            return _reactAddons2['default'].createElement(InfiniteListItem, _extends({ key: item.id }, item, { height: height }));
-        }
-    }, {
-        key: 'render',
+        key: "render",
         value: function render() {
-            var itemsToRender = {};
+            var renderedStart = this.state.renderedStart;var _props = this.props;
+            var items = _props.items;
+            var itemHeight = _props.itemHeight;
 
-            itemsToRender['top'] = _reactAddons2['default'].createElement('div', { className: 'topitem',
-                style: { height: this.state.renderedStart * this.props.itemHeight } });
+            var numOfVisibleItems = _props.numOfVisibleItems;
+            var paddingHeight = renderedStart * itemHeight;
+            var visibleHeight = numOfVisibleItems * itemHeight;
+            var listHeight = items.length * itemHeight;
 
-            for (var i = this.state.renderedStart; i <= this.state.renderedEnd; i++) {
-                var item = this.props.items[i];
-                itemsToRender['item ' + i] = this._getListItemClass(item, this.props.itemHeight);
-            }
+            var visibleItems = items.slice(renderedStart, renderedStart + numOfVisibleItems);
+            var listItems = visibleItems.map(this._getItemComponent, this);
 
-            return _reactAddons2['default'].createElement(
-                'div',
-                { className: 'infinite-list', onScroll: this.onScroll.bind(this),
-                    style: { height: this.props.itemHeight * this.props.numOfVisibleItems } },
-                _reactAddons2['default'].createElement(
-                    'div',
-                    { className: 'infinite-list-content',
-                        style: { height: this.props.items.length * this.props.itemHeight } },
-                    _reactAddons2['default'].addons.createFragment(itemsToRender)
+            return _react2["default"].createElement(
+                "div",
+                { className: "infinite-list", onScroll: this.onScroll.bind(this), style: { height: visibleHeight } },
+                _react2["default"].createElement(
+                    "div",
+                    { className: "infinite-list-content", style: { height: listHeight } },
+                    _react2["default"].createElement("div", { className: "topitem", style: { height: paddingHeight }, key: "top" }),
+                    listItems
                 )
@@ -134,5 +135,12 @@ );
     return InfiniteList;
-})(_reactAddons2['default'].Component);
+})(_react2["default"].Component);
 
-exports['default'] = InfiniteList;
-module.exports = exports['default'];
+exports["default"] = InfiniteList;
+
+InfiniteList.propTypes = {
+    items: _react2["default"].PropTypes.array.isRequired,
+    itemHeight: _react2["default"].PropTypes.number.isRequired,
+    numOfVisibleItems: _react2["default"].PropTypes.number.isRequired,
+    listItemClass: _react2["default"].PropTypes.element
+};
+module.exports = exports["default"];

package.json

 {
   "name": "react-infinite-list",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/react-infinite-list.js",

README.md

@@ -12,5 +12,5 @@ React Infinite List
 ```sh
-npm install react-infinite-list --save
+npm install react-infinite-list --save-dev
 # or
-bower install react-infinite-list --save
+bower install react-infinite-list --save-dev
 ```
@@ -48,5 +48,8 @@
 
-See [example.js](example/example.js) for more details.
-
-
-
+Example
+-------
+Clone this repo and run `npm i`. After the dependencies are installed, just issue:
+```
+npm start
+```
+and wait till webpack builds the bundel. Brower shall be opened on port 3000.

Fixed alerts

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

66652

increased by1.3%

Lines of code

285

increased by4.01%

Number of lines in readme file

54

increased by5.88%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes