react-infinite-list - npm Package Compare versions

Comparing version 0.2.5 to 0.3.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+## v0.3.0 (2015-08-19)
+Paging support. See `src/example` for details. List view can also start rendering
+from specified index. Default is 0.
+
 ## v0.2.5 (2015-07-9)
@@ -2,0 +6,0 @@ Fixed library build. Removed item from module to main file, due to the babel transpile issues.

dist/react-infinite-list.js

@@ -81,5 +81,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-	var InfiniteListItem = (function (_React$Component) {
-	    function InfiniteListItem() {
-	        _classCallCheck(this, InfiniteListItem);
+	var EmptyListItem = (function (_React$Component) {
+	    function EmptyListItem() {
+	        _classCallCheck(this, EmptyListItem);
 
@@ -91,4 +91,30 @@ if (_React$Component != null) {
 
-	    _inherits(InfiniteListItem, _React$Component);
+	    _inherits(EmptyListItem, _React$Component);
 
+	    _createClass(EmptyListItem, {
+	        render: {
+	            value: function render() {
+	                return React.createElement(
+	                    "div",
+	                    { key: this.props.id, className: "infinite-list-item empty-item" },
+	                    "Loading..."
+	                );
+	            }
+	        }
+	    });
+
+	    return EmptyListItem;
+	})(React.Component);
+
+	var InfiniteListItem = (function (_React$Component2) {
+	    function InfiniteListItem() {
+	        _classCallCheck(this, InfiniteListItem);
+
+	        if (_React$Component2 != null) {
+	            _React$Component2.apply(this, arguments);
+	        }
+	    }
+
+	    _inherits(InfiniteListItem, _React$Component2);
+
 	    _createClass(InfiniteListItem, {
@@ -114,3 +140,3 @@ render: {
 
-	var InfiniteList = (function (_React$Component2) {
+	var InfiniteList = (function (_React$Component3) {
 	    function InfiniteList(props) {
@@ -122,6 +148,6 @@ _classCallCheck(this, InfiniteList);
 	        this._scrollTimer = null;
-	        this.state = { renderedStart: 0 };
+	        this.state = { renderedStart: 0, items: props.items };
 	    }
 
-	    _inherits(InfiniteList, _React$Component2);
+	    _inherits(InfiniteList, _React$Component3);
 
@@ -183,3 +209,7 @@ _createClass(InfiniteList, {
 	            value: function _getItemComponent(item) {
-	                var ListItemComponent = this.props.listItemClass || InfiniteListItem;
+	                var ListItemComponent = this.props.listItemClass;
+	                if (this.props.isItemEmpty(item)) {
+	                    ListItemComponent = this.props.emptyListItemClass;
+	                }
+
 	                return React.createElement(ListItemComponent, _extends({ key: item.id }, item));
@@ -193,2 +223,28 @@ }
 	        },
+	        componentDidMount: {
+	            value: function componentDidMount() {
+	                var _this = this;
+
+	                this.state.isInitialRender = false;
+
+	                var node = React.findDOMNode(this);
+	                setTimeout(function () {
+	                    node.scrollTop = _this.props.firstVisibleItemIndex * _this.props.itemHeight;
+	                }, 0);
+	            }
+	        },
+	        _notifyWhenDataIsNeeded: {
+	            value: function _notifyWhenDataIsNeeded(start, end) {
+	                var items = this.state.items;
+
+	                // Do not go over the end of the array
+	                if (end >= items.length) end = items.length - 1;
+
+	                var isItemEmpty = this.props.isItemEmpty;
+
+	                if (_.any(items.slice(start, end + 1), isItemEmpty)) {
+	                    this.props.onRangeChange(start, end);
+	                }
+	            }
+	        },
 	        render: {
@@ -208,2 +264,5 @@ value: function render() {
 
+	                var dataRangeEnd = Math.min(renderedStart + listItems.length, this.state.items.length);
+	                this.props.paging && this._notifyWhenDataIsNeeded(renderedStart, dataRangeEnd);
+
 	                var padding = this.state.renderedStart * itemHeight;
@@ -238,5 +297,20 @@ // if maximum number of items on page is larger than actual number of items, maxPadding can be < 0
 	    height: React.PropTypes.number.isRequired,
-	    itemHeight: React.PropTypes.number.isRequired
+	    itemHeight: React.PropTypes.number.isRequired,
+	    isItemEmpty: React.PropTypes.func,
+	    listItemClass: React.PropTypes.func,
+	    emptyListItemClass: React.PropTypes.func,
+	    firstVisibleItemIndex: React.PropTypes.number
+
 	};
 
+	InfiniteList.defaultProps = {
+	    firstVisibleItemIndex: 0,
+	    isItemEmpty: function () {
+	        return false;
+	    },
+	    paging: false,
+	    listItemClass: InfiniteListItem,
+	    emptyListItemClass: EmptyListItem
+	};
+
 /***/ },
@@ -243,0 +317,0 @@ /* 1 */

dist/react-infinite-list.min.js

@@ -1,2 +0,2 @@
-!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(r){if(i[r])return i[r].exports;var n=i[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){"use strict";function r(){return window.matchMedia&&(window.matchMedia("only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)").matches||window.matchMedia("only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)").matches)||window.devicePixelRatio&&window.devicePixelRatio>1.3}var n=function(e){return e&&e.__esModule?e["default"]:e},o=function m(e,t,i){var r=Object.getOwnPropertyDescriptor(e,t);if(void 0===r){var n=Object.getPrototypeOf(e);return null===n?void 0:m(n,t,i)}if("value"in r&&r.writable)return r.value;var o=r.get;return void 0===o?void 0:o.call(i)},s=function(){function e(e,t){for(var i in t){var r=t[i];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,i,r){return i&&e(t.prototype,i),r&&e(t,r),t}}(),a=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")},c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},u=n(i(1)),p=n(i(2)),d=/WebKit/.test(navigator&&navigator.userAgent||""),h=function(e){function t(){l(this,t),null!=e&&e.apply(this,arguments)}return a(t,e),s(t,{render:{value:function(){return u.createElement("div",{key:this.props.id,className:"infinite-list-item"},this.props.title)}}}),t}(u.Component);h.propTypes={title:u.PropTypes.string.isRequired,id:u.PropTypes.oneOfType([u.PropTypes.number,u.PropTypes.string]).isRequired};var f=function(e){function t(e){l(this,t),o(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this._scrollTimer=null,this.state={renderedStart:0}}return a(t,e),s(t,{onWheel:{value:function(){this._scrolledByWheel=!0}},onScroll:{value:function(e){return e.stopPropagation(),d&&this._scrolledByWheel&&!r()?(this._scrolledByWheel=!1,void(this._scrollTimer||(this._scrollTimer=setTimeout(function(){this._scrollTimer=null,this._calculateVisibleItems()}.bind(this),150)))):void this._calculateVisibleItems()}},_calculateVisibleItems:{value:function(){var e=u.findDOMNode(this).scrollTop,t=Math.floor(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,i=this.props.height!==e.height;t&&(u.findDOMNode(this).scrollTop=0),(t||i)&&this._calculateVisibleItems()}},_getItemComponent:{value:function(e){var t=this.props.listItemClass||h;return u.createElement(t,c({key:e.id},e))}},_getClassNames:{value:function(){return p("infinite-list",this.props.className)}},render:{value:function(){var e=this.state.renderedStart,t=this.props,i=t.items,r=t.height,n=t.itemHeight,o=Math.ceil(r/n)+1,s=i.length*n,a=i.slice(e,e+o),l=a.map(this._getItemComponent,this),c=this.state.renderedStart*n,p=Math.max(0,s-o*n+n),d=Math.min(p,c);return u.createElement("div",{className:this._getClassNames(),onWheel:this.onWheel.bind(this),onScroll:this.onScroll.bind(this),style:{height:this.props.height}},u.createElement("div",{className:"infinite-list-content",style:{height:s-d,paddingTop:d}},l))}}}),t}(u.Component);e.exports=f,f.propTypes={items:u.PropTypes.array.isRequired,height:u.PropTypes.number.isRequired,itemHeight:u.PropTypes.number.isRequired}},function(t,i,r){t.exports=e},function(e,t,i){var r;/*!
+!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(n){if(i[n])return i[n].exports;var r=i[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){"use strict";function n(){return window.matchMedia&&(window.matchMedia("only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)").matches||window.matchMedia("only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)").matches)||window.devicePixelRatio&&window.devicePixelRatio>1.3}var r=function(e){return e&&e.__esModule?e["default"]:e},s=function y(e,t,i){var n=Object.getOwnPropertyDescriptor(e,t);if(void 0===n){var r=Object.getPrototypeOf(e);return null===r?void 0:y(r,t,i)}if("value"in n&&n.writable)return n.value;var s=n.get;return void 0===s?void 0:s.call(i)},o=function(){function e(e,t){for(var i in t){var n=t[i];n.configurable=!0,n.value&&(n.writable=!0)}Object.defineProperties(e,t)}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),a=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")},p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},c=r(i(1)),u=r(i(2)),h=/WebKit/.test(navigator&&navigator.userAgent||""),m=function(e){function t(){l(this,t),null!=e&&e.apply(this,arguments)}return a(t,e),o(t,{render:{value:function(){return c.createElement("div",{key:this.props.id,className:"infinite-list-item empty-item"},"Loading...")}}}),t}(c.Component),d=function(e){function t(){l(this,t),null!=e&&e.apply(this,arguments)}return a(t,e),o(t,{render:{value:function(){return c.createElement("div",{key:this.props.id,className:"infinite-list-item"},this.props.title)}}}),t}(c.Component);d.propTypes={title:c.PropTypes.string.isRequired,id:c.PropTypes.oneOfType([c.PropTypes.number,c.PropTypes.string]).isRequired};var f=function(e){function t(e){l(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this._scrollTimer=null,this.state={renderedStart:0,items:e.items}}return a(t,e),o(t,{onWheel:{value:function(){this._scrolledByWheel=!0}},onScroll:{value:function(e){return e.stopPropagation(),h&&this._scrolledByWheel&&!n()?(this._scrolledByWheel=!1,void(this._scrollTimer||(this._scrollTimer=setTimeout(function(){this._scrollTimer=null,this._calculateVisibleItems()}.bind(this),150)))):void this._calculateVisibleItems()}},_calculateVisibleItems:{value:function(){var e=c.findDOMNode(this).scrollTop,t=Math.floor(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,i=this.props.height!==e.height;t&&(c.findDOMNode(this).scrollTop=0),(t||i)&&this._calculateVisibleItems()}},_getItemComponent:{value:function(e){var t=this.props.listItemClass;return this.props.isItemEmpty(e)&&(t=this.props.emptyListItemClass),c.createElement(t,p({key:e.id},e))}},_getClassNames:{value:function(){return u("infinite-list",this.props.className)}},componentDidMount:{value:function(){var e=this;this.state.isInitialRender=!1;var t=c.findDOMNode(this);setTimeout(function(){t.scrollTop=e.props.firstVisibleItemIndex*e.props.itemHeight},0)}},_notifyWhenDataIsNeeded:{value:function(e,t){var i=this.state.items;t>=i.length&&(t=i.length-1);var n=this.props.isItemEmpty;_.any(i.slice(e,t+1),n)&&this.props.onRangeChange(e,t)}},render:{value:function(){var e=this.state.renderedStart,t=this.props,i=t.items,n=t.height,r=t.itemHeight,s=Math.ceil(n/r)+1,o=i.length*r,a=i.slice(e,e+s),l=a.map(this._getItemComponent,this),p=Math.min(e+l.length,this.state.items.length);this.props.paging&&this._notifyWhenDataIsNeeded(e,p);var u=this.state.renderedStart*r,h=Math.max(0,o-s*r+r),m=Math.min(h,u);return c.createElement("div",{className:this._getClassNames(),onWheel:this.onWheel.bind(this),onScroll:this.onScroll.bind(this),style:{height:this.props.height}},c.createElement("div",{className:"infinite-list-content",style:{height:o-m,paddingTop:m}},l))}}}),t}(c.Component);e.exports=f,f.propTypes={items:c.PropTypes.array.isRequired,height:c.PropTypes.number.isRequired,itemHeight:c.PropTypes.number.isRequired,isItemEmpty:c.PropTypes.func,listItemClass:c.PropTypes.func,emptyListItemClass:c.PropTypes.func,firstVisibleItemIndex:c.PropTypes.number},f.defaultProps={firstVisibleItemIndex:0,isItemEmpty:function(){return!1},paging:!1,listItemClass:d,emptyListItemClass:m}},function(t,i,n){t.exports=e},function(e,t,i){var n;/*!
 	  Copyright (c) 2015 Jed Watson.
@@ -6,2 +6,2 @@ Licensed under the MIT License (MIT), see
 	*/
-!function(){"use strict";function n(){for(var e="",t=0;t<arguments.length;t++){var i=arguments[t];if(i){var r=typeof i;if("string"===r||"number"===r)e+=" "+i;else if(Array.isArray(i))e+=" "+n.apply(null,i);else if("object"===r)for(var o in i)i.hasOwnProperty(o)&&i[o]&&(e+=" "+o)}}return e.substr(1)}"undefined"!=typeof e&&e.exports?e.exports=n:(r=function(){return n}.call(t,i,t,e),!(void 0!==r&&(e.exports=r)))}()}])});
+!function(){"use strict";function r(){for(var e="",t=0;t<arguments.length;t++){var i=arguments[t];if(i){var n=typeof i;if("string"===n||"number"===n)e+=" "+i;else if(Array.isArray(i))e+=" "+r.apply(null,i);else if("object"===n)for(var s in i)i.hasOwnProperty(s)&&i[s]&&(e+=" "+s)}}return e.substr(1)}"undefined"!=typeof e&&e.exports?e.exports=r:(n=function(){return r}.call(t,i,t,e),!(void 0!==n&&(e.exports=n)))}()}])});

lib/react-infinite-list.js

@@ -33,5 +33,5 @@ 'use strict';
 
-var InfiniteListItem = (function (_React$Component) {
-    function InfiniteListItem() {
-        _classCallCheck(this, InfiniteListItem);
+var EmptyListItem = (function (_React$Component) {
+    function EmptyListItem() {
+        _classCallCheck(this, EmptyListItem);
 
@@ -43,4 +43,29 @@ if (_React$Component != null) {
 
-    _inherits(InfiniteListItem, _React$Component);
+    _inherits(EmptyListItem, _React$Component);
 
+    _createClass(EmptyListItem, [{
+        key: 'render',
+        value: function render() {
+            return _react2['default'].createElement(
+                'div',
+                { key: this.props.id, className: 'infinite-list-item empty-item' },
+                'Loading...'
+            );
+        }
+    }]);
+
+    return EmptyListItem;
+})(_react2['default'].Component);
+
+var InfiniteListItem = (function (_React$Component2) {
+    function InfiniteListItem() {
+        _classCallCheck(this, InfiniteListItem);
+
+        if (_React$Component2 != null) {
+            _React$Component2.apply(this, arguments);
+        }
+    }
+
+    _inherits(InfiniteListItem, _React$Component2);
+
     _createClass(InfiniteListItem, [{
@@ -65,3 +90,3 @@ key: 'render',
 
-var InfiniteList = (function (_React$Component2) {
+var InfiniteList = (function (_React$Component3) {
     function InfiniteList(props) {
@@ -73,6 +98,6 @@ _classCallCheck(this, InfiniteList);
         this._scrollTimer = null;
-        this.state = { renderedStart: 0 };
+        this.state = { renderedStart: 0, items: props.items };
     }
 
-    _inherits(InfiniteList, _React$Component2);
+    _inherits(InfiniteList, _React$Component3);
 
@@ -134,3 +159,7 @@ _createClass(InfiniteList, [{
         value: function _getItemComponent(item) {
-            var ListItemComponent = this.props.listItemClass || InfiniteListItem;
+            var ListItemComponent = this.props.listItemClass;
+            if (this.props.isItemEmpty(item)) {
+                ListItemComponent = this.props.emptyListItemClass;
+            }
+
             return _react2['default'].createElement(ListItemComponent, _extends({ key: item.id }, item));
@@ -144,2 +173,28 @@ }
     }, {
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            var _this = this;
+
+            this.state.isInitialRender = false;
+
+            var node = _react2['default'].findDOMNode(this);
+            setTimeout(function () {
+                node.scrollTop = _this.props.firstVisibleItemIndex * _this.props.itemHeight;
+            }, 0);
+        }
+    }, {
+        key: '_notifyWhenDataIsNeeded',
+        value: function _notifyWhenDataIsNeeded(start, end) {
+            var items = this.state.items;
+
+            // Do not go over the end of the array
+            if (end >= items.length) end = items.length - 1;
+
+            var isItemEmpty = this.props.isItemEmpty;
+
+            if (_.any(items.slice(start, end + 1), isItemEmpty)) {
+                this.props.onRangeChange(start, end);
+            }
+        }
+    }, {
         key: 'render',
@@ -159,2 +214,5 @@ value: function render() {
 
+            var dataRangeEnd = Math.min(renderedStart + listItems.length, this.state.items.length);
+            this.props.paging && this._notifyWhenDataIsNeeded(renderedStart, dataRangeEnd);
+
             var padding = this.state.renderedStart * itemHeight;
@@ -188,4 +246,19 @@ // if maximum number of items on page is larger than actual number of items, maxPadding can be < 0
     height: _react2['default'].PropTypes.number.isRequired,
-    itemHeight: _react2['default'].PropTypes.number.isRequired
+    itemHeight: _react2['default'].PropTypes.number.isRequired,
+    isItemEmpty: _react2['default'].PropTypes.func,
+    listItemClass: _react2['default'].PropTypes.func,
+    emptyListItemClass: _react2['default'].PropTypes.func,
+    firstVisibleItemIndex: _react2['default'].PropTypes.number
+
 };
+
+InfiniteList.defaultProps = {
+    firstVisibleItemIndex: 0,
+    isItemEmpty: function isItemEmpty() {
+        return false;
+    },
+    paging: false,
+    listItemClass: InfiniteListItem,
+    emptyListItemClass: EmptyListItem
+};
 module.exports = exports['default'];

package.json

 {
   "name": "react-infinite-list",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "",
@@ -59,3 +59,3 @@ "main": "lib/react-infinite-list.js",
     "url-loader": "0.5.5",
-    "webpack": "1.5.3",
+    "webpack": "1.10.1",
     "webpack-dev-server": "1.7.0"
@@ -62,0 +62,0 @@ },

README.md

@@ -32,2 +32,14 @@ React Infinite List
 
+Infinite List supports paging as well. Just set `paging={true}` when using
+the component. When particular list item has no data instance of default
+`emptyListItemClass` will be rendered. You can pass your own class using
+`emptyListItemClass` property.
+
+By default, list item is empty when title property of item model is not defined.
+If you are using different rules, you need to define your own helper that can
+distinguish empty item from non-empty one. Pass the helper in `isItemEmpty` property.
+
+In `firstVisibleItemIndex`, you can specify which index rendering can start from.
+Default is 0.
+
 There are also some mandatory css rules:
@@ -34,0 +46,0 @@ ```css

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

82352

increased by8.53%

Lines of code

540

increased by29.5%

Number of lines in readme file

71

increased by20.34%

No dependency changes