nuke-list-view - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

docs/reset.md

@@ -13,6 +13,7 @@ # listview
 import {createElement, Component,render} from 'rax';
-import { View, Text, TouchableHighlight , RefreshControl} from 'nuke-components';
+import { View, Text, TouchableHighlight ,ScrollView, RefreshControl} from 'nuke-components';
 import Icon from 'nuke-icon';
 import ListView from 'nuke-list-view';
-import Modal from "nuke-modal"
+import Modal from "nuke-modal";
+import Button from "nuke-button"
 
@@ -54,6 +55,5 @@
     handleLoadMore() {
-        Modal.toast(`加载更多,次数${this.index}`);
-        this.refs.mylist.resetLoadmore();
+        Modal.toast(`LoadMore triggered`);
         var self = this;
-        // 这里进行异步操作
+        
         if (self.index == 1) {
@@ -65,6 +65,5 @@ self.setState({showLoading:false})
 
-                self.state.data.push({key: 'l1',text:'loadmore1'}, {key: 'l2',text:'loadmore2'}, {key: 'l3',text:'loadmore3'},{key: 'l4',text:'loadmore4'}, {key: 'l5',text:'loadmore5'});
-                self.setState(self.state);
+                // 这里进行异步操作 但数据没有新增（或减少）
                 self.index++;
-            }, 2000);
+            }, 1000);
 
@@ -94,16 +93,28 @@ }
     }
-
+    scroll=()=>{
+        this.refs.mylist.scrollTo({x:0,y:100})
+    }
+    reset = ()=>{
+        
+        this.refs.mylist.resetLoadmore();
+        Modal.toast('reset loadmore success');
+    }
     render(){
         var self=this;
         return (
-           <ListView
-            renderHeader={this.renderHeader}
-            renderFooter={this.renderFooter}
-            renderRow={this.renderItem.bind(this)}
-            dataSource={this.state.data}
-            ref = "mylist"
-            style={app.listContainer}
-            onEndReached={this.handleLoadMore.bind(this)}
-          />
-
+            <ScrollView>
+               <ListView
+                renderHeader={this.renderHeader}
+                renderFooter={this.renderFooter}
+                renderRow={this.renderItem.bind(this)}
+                dataSource={this.state.data}
+                ref = "mylist"
+                style={app.listContainer}
+                onEndReached={this.handleLoadMore.bind(this)}
+              />
+                <Button.Group style={{marginTop:'30rem'}}>
+                    <Button type="primary" onPress={this.scroll}>滑动到100rem 位置</Button>
+                    <Button type="primary" onPress={this.reset}>reset load more</Button>
+                </Button.Group>
+            </ScrollView>
         )
@@ -114,3 +125,3 @@ }
     listContainer:{
-        flex:1
+        height:'900rem',
     },
@@ -117,0 +128,0 @@ cellItemList:{

HISTORY.md

 # Changelog 
 
 
+## 0.2.4 / 2017-03-01 
+
+  * [[978c772](http://gitlab.alibaba-inc.com/nuke/list-view/commit/978c7726ead519a1dc36e73d53815ac9f06ef75f)] - `feat` add loadmore retry to fix resetloadmore bug 
+
 ## 0.2.3 / 2017-02-20 
 
   * [[40be9a7](http://gitlab.alibaba-inc.com/nuke/list-view/commit/40be9a76bcaf7d3c52d5a6eb455ff97c2c34c290)] - `docs` update docs 
+
+## 0.2.1 / 2017-02-20 
+
   * [[6c04ca3](http://gitlab.alibaba-inc.com/nuke/list-view/commit/6c04ca354b46bec32a00e6fa6a3b15ae0f9797c1)] - `feat` add demo 
@@ -8,0 +15,0 @@

lib/index.js

@@ -7,3 +7,2 @@ /** @jsx createElement */
  *
- * @providesModule rx-listview
  */
@@ -14,3 +13,3 @@ 'use strict';
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
@@ -30,76 +29,79 @@
 
-var SCROLLVIEW_REF = 'scrollview';
+var List_REF = '_nuke_list';
 
 var ListView = function (_Component) {
-  _inherits(ListView, _Component);
+    _inherits(ListView, _Component);
 
-  function ListView() {
-    var _ref;
+    function ListView() {
+        var _ref;
 
-    var _temp, _this, _ret;
+        var _temp, _this, _ret;
 
-    _classCallCheck(this, ListView);
+        _classCallCheck(this, ListView);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListView.__proto__ || Object.getPrototypeOf(ListView)).call.apply(_ref, [this].concat(args))), _this), _this.scrollTo = function (options) {
+            if (_this.refs[List_REF]) {
+                _this.refs[List_REF].scrollTo(options);
+            }
+        }, _this.resetLoadmore = function () {
+            _this.refs[List_REF].resetLoadmore();
+        }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListView.__proto__ || Object.getPrototypeOf(ListView)).call.apply(_ref, [this].concat(args))), _this), _this.scrollTo = function (options) {
-      if (_this.refs[SCROLLVIEW_REF]) {
-        _this.refs[SCROLLVIEW_REF].scrollTo(options);
-      }
-    }, _this.resetLoadmore = function () {
-      _this.refs[SCROLLVIEW_REF].resetLoadmore();
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
+    _createClass(ListView, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                renderScrollComponent = _props.renderScrollComponent,
+                renderHeader = _props.renderHeader,
+                renderFooter = _props.renderFooter,
+                renderRow = _props.renderRow,
+                dataSource = _props.dataSource,
+                onEndReached = _props.onEndReached,
+                onEndReachedThreshold = _props.onEndReachedThreshold,
+                _props$loadmoreretry = _props.loadmoreretry,
+                loadmoreretry = _props$loadmoreretry === undefined ? true : _props$loadmoreretry,
+                id = _props.id,
+                className = _props.className,
+                style = _props.style,
+                showScrollbar = _props.showScrollbar;
 
-  _createClass(ListView, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          renderScrollComponent = _props.renderScrollComponent,
-          renderHeader = _props.renderHeader,
-          renderFooter = _props.renderFooter,
-          renderRow = _props.renderRow,
-          dataSource = _props.dataSource,
-          onEndReached = _props.onEndReached,
-          onEndReachedThreshold = _props.onEndReachedThreshold,
-          id = _props.id,
-          className = _props.className,
-          style = _props.style,
-          showScrollbar = _props.showScrollbar;
 
+            var header = typeof renderHeader == 'function' ? renderHeader() : null;
+            var footer = typeof renderFooter == 'function' ? renderFooter() : null;
+            var body = dataSource.map(function (i, index) {
+                return renderRow(i, index);
+            });
 
-      var header = typeof renderHeader == 'function' ? renderHeader() : null;
-      var footer = typeof renderFooter == 'function' ? renderFooter() : null;
-      var body = dataSource.map(function (i, index) {
-        return renderRow(i, index);
-      });
+            var props = {
+                id: id,
+                className: className,
+                ref: List_REF,
+                style: style,
+                loadmoreretry: loadmoreretry,
+                children: [].concat(header, body, footer),
+                onEndReached: onEndReached,
+                onEndReachedThreshold: onEndReachedThreshold,
+                _autoWrapCell: true,
+                showScrollbar: showScrollbar
+            };
 
-      var props = {
-        id: id,
-        className: className,
-        ref: SCROLLVIEW_REF,
-        style: style,
-        children: [].concat(header, body, footer),
-        onEndReached: onEndReached,
-        onEndReachedThreshold: onEndReachedThreshold,
-        _autoWrapCell: true,
-        showScrollbar: showScrollbar
-      };
+            return renderScrollComponent(props);
+        }
+    }]);
 
-      return renderScrollComponent(props);
-    }
-  }]);
-
-  return ListView;
+    return ListView;
 }(_rax.Component);
 
 ListView.defaultProps = {
-  renderScrollComponent: function renderScrollComponent(props) {
-    return (0, _rax.createElement)(_nukeComponents.RecyclerView, props);
-  },
-  dataSource: []
+    renderScrollComponent: function renderScrollComponent(props) {
+        return (0, _rax.createElement)(_nukeComponents.RecyclerView, props);
+    },
+    dataSource: []
 };
 exports.default = ListView;
 module.exports = exports['default'];

package.json

 {
   "name": "nuke-list-view",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "列表",
@@ -37,2 +37,3 @@ "main": "lib/index",
   "devDependencies": {
+    "nuke-button": "^0.x.x",
     "nuke-icon": "0.x.x",
@@ -39,0 +40,0 @@ "nuke-modal": "^0.x.x"

README.md

@@ -26,4 +26,6 @@ # Listview
 showScrollbar | 是否显示滚动条 | bool | 无
+resetLoadmore | 重设loadmore计数 [以下单独说明] | function | 无
 
 
+
 ### 关于ListView的子组件
@@ -33,6 +35,13 @@ - `RefreshControl` 用于控制下拉刷新，可以在renderHeader 方法中使用，用于控制下拉刷新。**此组件只能在客户端生效**
 
-### 实例方法
-- resetLoadmore  相关[ISSUE](https://github.com/alibaba/weex/issues/1664)
-> 有业务自行控制的是否触发loadmore事件
+### resetLoadmore 实例方法
 
+> 由业务自行控制的是否触发loadmore事件
+
+resetLoadmore api 的调用，发生在 **onEndReached 触发，但是数据没有变化或者数组变短，此时 native 设置为不再触发 onEndReached 事件了。**
+
+如果你不需要这个<del>看起来聪明的</del>设定，可以调用 resetLoadmore 清除标记位。
+
+resetLoadmore  相关[ISSUE](https://github.com/alibaba/weex/issues/1664)
+
+
 ```
@@ -39,0 +48,0 @@ //reset事件可以有button或其他方式控制，实现无限下拉的节流

src/index.js

@@ -7,3 +7,2 @@ /** @jsx createElement */
  *
- * @providesModule rx-listview
  */
@@ -15,3 +14,3 @@ 'use strict';
 import {View,RecyclerView} from 'nuke-components';
-const SCROLLVIEW_REF = 'scrollview';
+const List_REF = '_nuke_list';
 
@@ -21,55 +20,57 @@
 
-  static defaultProps = {
-    renderScrollComponent: props => <RecyclerView {...props} />,
-    dataSource: [],
-  };
+    static defaultProps = {
+        renderScrollComponent: props => <RecyclerView {...props} />,
+        dataSource: [],
+    };
 
-  scrollTo = (options) => {
-    if (this.refs[SCROLLVIEW_REF]) {
-      this.refs[SCROLLVIEW_REF].scrollTo(options);
+    scrollTo = (options) => {
+        if (this.refs[List_REF]) {
+            this.refs[List_REF].scrollTo(options);
+        }
     }
-  }
 
-  resetLoadmore =() =>{
-      this.refs[SCROLLVIEW_REF].resetLoadmore();
-  }
+    resetLoadmore =() =>{
+        this.refs[List_REF].resetLoadmore();
+    }
 
 
-  render() {
-    let {
-      renderScrollComponent,
-      renderHeader,
-      renderFooter,
-      renderRow,
-      dataSource,
-      onEndReached,
-      onEndReachedThreshold,
-      id,
-      className,
-      style,
-      showScrollbar
-    } = this.props;
+    render() {
+        let {
+            renderScrollComponent,
+            renderHeader,
+            renderFooter,
+            renderRow,
+            dataSource,
+            onEndReached,
+            onEndReachedThreshold,
+            loadmoreretry = true,
+            id,
+            className,
+            style,
+            showScrollbar
+        } = this.props;
 
-    let header = typeof renderHeader == 'function' ? renderHeader() : null;
-    let footer = typeof renderFooter == 'function' ? renderFooter() : null;
-    let body = dataSource.map((i, index) => {
-      return renderRow(i, index);
-    });
+        let header = typeof renderHeader == 'function' ? renderHeader() : null;
+        let footer = typeof renderFooter == 'function' ? renderFooter() : null;
+        let body = dataSource.map((i, index) => {
+            return renderRow(i, index);
+        });
 
-    let props = {
-      id,
-      className,
-      ref: SCROLLVIEW_REF,
-      style,
-      children: [].concat(header, body, footer),
-      onEndReached,
-      onEndReachedThreshold,
-      _autoWrapCell: true,
-      showScrollbar
-    };
+        let props = {
+            id,
+            className,
+            ref: List_REF,
+            style,
+            loadmoreretry: loadmoreretry,
+            children : [].concat(header, body, footer),
+            onEndReached,
+            onEndReachedThreshold,
+            _autoWrapCell: true,
+            showScrollbar
+        };
 
-    return renderScrollComponent(props);
-  }
+        return renderScrollComponent(props);
+    }
 }
 
 export default ListView;

theme/index.jsx

@@ -30,2 +30,3 @@ /** @jsx createElement */
         });
+        this.refs.mylist.resetLoadmore();
         setTimeout(() => {
@@ -88,2 +89,3 @@ // prepend 10 items
            <ListView
+           ref="mylist"
             renderHeader={this.renderHeader}
@@ -90,0 +92,0 @@ renderFooter={this.renderFooter}

No alert changes

Improved metrics

Total package byte prevSize

22450

increased by8.28%

Lines of code

275

increased by1.85%

Number of lines in readme file

62

increased by16.98%

Worsened metrics

Dev dependency count

3

increased by50%

No dependency changes