nuke-list-view - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

docs/basic.md

@@ -1,6 +0,6 @@
-# listview
+# ListView demo
 
 - order: 0
 
-普通用法
+包含无限下拉，resetLoadmore等
 
@@ -13,12 +13,18 @@ ---
 import {createElement, Component,render} from 'rax';
-import { View, Text, TouchableHighlight , RefreshControl} from 'nuke-components';
+import { View, Text, TouchableHighlight , Image,RefreshControl} from 'nuke-components';
 import Icon from 'nuke-icon';
+import Button from "nuke-button";
 import ListView from 'nuke-list-view';
+import Modal from "nuke-modal";
+import BizPage from 'nuke-biz-page';
+let originalData = [
+    {key: 'b0',text:'所有类别',icon:'//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'},
+    {key: 'b1',text:'所有类别',icon:'//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'},
+    {key: 'b2',text:'所有类别',icon:'//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'},
+    {key: 'b3',text:'所有类别',icon:'//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'},
+    {key: 'b4',text:'所有类别',icon:'//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'},
+    {key: 'b5',text:'所有类别',icon:'//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'}
+]
 
 
-let listData = [];
-for (var i = 0; i < 30; i++) {
-    listData.push({key: i,text:'第'+i+'条数据'});
-}
-
 class ListViewDemo extends Component {
@@ -28,13 +34,100 @@ constructor() {
         this.state = {
-            data: listData,
-            stop: false,
-            isRefreshing: false,
-            showLoading:true,
-            refreshText: '↓ 下拉刷新',
+            list1:{
+                data: [...originalData],
+                isRefreshing: false,
+                showLoading:true,
+                refreshText: '↓ 下拉刷新',
+            },
+            list2:{
+                data: [...originalData],
+                isRefreshing: false,
+                showLoading:true,
+                refreshText: '↓ 下拉刷新',
+            }
         };
         this.index = 0;
+        this.index2 = 0;
 
     }
-    handleRefresh = (e) => {
-        this.setState({
+    setListState(list,data){
+        let newState = Object.assign(this.state[list],data);
+        this.setState(newState);
+    }
+    
+    linkTo(item,e) {
+        console.log(e);
+    }
+    renderInner(length , item, index){
+        const wrapStyle = index === length - 1 ? [styles.cellItem,styles.cellItemLast] : styles.cellInner;
+        return (
+            <TouchableHighlight style={wrapStyle} onPress={this.linkTo.bind(this,item)}>
+            {
+                item.icon ? <Image style={styles.icon} source={{uri:item.icon}}></Image> : null
+            }
+                <Text style={styles.itemTextList}>{item.text}</Text>
+            {
+                item.sub ? <Text style={styles.sub}>{item.sub}</Text> : null
+            }
+            {
+                item.arrow ? <Icon name="arrowRight" style={styles.arrow}></Icon> : null
+            }
+        </TouchableHighlight>
+        );
+        
+    }
+    renderItem(length , item, index){
+        
+        if(index == length - 1){
+            return this.renderInner(length, item, index);
+        }else{
+            return (<View style={styles.cellItem}>
+                {this.renderInner(length, item, index)}
+            </View>
+            );
+        }
+    }
+    handleRefreshList1(e) {
+        var self = this;
+        self.setListState('list1',{
+            isRefreshing: true,
+            refreshText: '加载中',
+        });
+        setTimeout(() => {
+            self.setListState('list1',{
+                isRefreshing: false,
+                data: [...originalData],
+                refreshText: '↓ 下拉刷新',
+            });
+
+        }, 1000);
+    }
+
+    handleLoadMoreList1=()=>{
+        var self = this;
+        setTimeout(function() {
+            // 这里进行异步操作
+            self.state.list1.data.push({key: 'b100',text:'新数据',icon:'//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'});
+            self.setListState('list1',self.state.list1);
+        }, 1000);
+
+    }
+    headerList1=()=>{
+        return <RefreshControl style={styles.refresh} refreshing={this.state.list1.isRefreshing} onRefresh={this.handleRefreshList1.bind(this)}><Text style={styles.loadingText}>{this.state.list1.refreshText}</Text></RefreshControl>;
+    }
+    footerList1=()=>{
+        return this.state.list1.showLoading ?
+        <View style={[styles.loading]}><Text style={styles.loadingText}>加载中...</Text></View>
+        :null
+    }
+    headerList2=()=>{
+        return <RefreshControl style={styles.refresh} refreshing={this.state.list2.isRefreshing} onRefresh={this.handleRefreshList2.bind(this)}><Text style={styles.loadingText}>{this.state.list2.refreshText}</Text></RefreshControl>;
+    }
+    footerList2=()=>{
+        return this.state.list2.showLoading ?
+        <View style={[styles.loading]}><Text style={styles.loadingText}>加载中...</Text></View>
+        :null
+    }
+    handleRefreshList2=()=>{
+        var self = this;
+        self.setListState('list2',{
           isRefreshing: true,
@@ -44,75 +137,102 @@ refreshText: '加载中',
         setTimeout(() => {
-          this.setState({
-            isRefreshing: false,
-            data: listData,
-            refreshText: '↓ 下拉刷新',
-          });
+            self.index2 = 0;
+            self.setListState('list2',{
+                isRefreshing: false,
+                data: [...originalData],
+                refreshText: '↓ 下拉刷新',
+            });
 
-        }, 3000);
-      };
-
-    handleLoadMore() {
+        }, 1000);
+    }
+    handleLoadMoreList2=()=> {
         var self = this;
-        // 这里进行异步操作
-        if (self.index == 5) {
-            self.setState({showLoading:false})
-            return;
+        if (self.index2 == 1) {
+            setTimeout(function() {
+                
+                // 这里进行异步操作 但数据没有新增（或减少）
+                self.setListState('list2',{ showLoading : false })
+                Modal.toast('没有更多了');
+            }, 1000);
         }else{
             setTimeout(function() {
+                //数据增加一次
+                self.state.list2.data.push({key: 'c100',text:'新数据cc',icon:'//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'});
+                self.setListState('list2',self.state.list2);
+                
+                self.index2 ++;
+            }, 1000);
 
-                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);
-
         }
 
     }
-    linkTo(item,e) {
-        console.log(e);
+    headerList2=()=>{
+        return <RefreshControl style={styles.refresh} refreshing={this.state.list2.isRefreshing} onRefresh={this.handleRefreshList2}><Text style={styles.loadingText}>{this.state.list2.refreshText}</Text></RefreshControl>;
     }
-    componentDidMount() {
-
+    footerList2=()=>{
+        return this.state.list2.showLoading ?
+        <View style={[styles.loading]}><Text style={styles.loadingText}>加载中...</Text></View>
+        :null
     }
-    renderItem (item, index){
-        return <TouchableHighlight style={app.cellItemList} onPress={this.linkTo.bind(this,item)}>
-                <Text style={app.itemTextList}>{item.text}</Text>
-            </TouchableHighlight>;
-
+    scroll=()=>{
+        this.refs.list2.scrollTo({ x : 0 ,y : 20 })
     }
-    renderHeader=()=>{
-        return <RefreshControl style={app.refresh} refreshing={this.state.isRefreshing} onRefresh={this.handleRefresh}><Text style={app.loadingText}>{this.state.refreshText}</Text></RefreshControl>;
+    reset = ()=>{
+        this.refs.list2.resetLoadmore();
+        Modal.toast('reset loadmore success');
     }
-    renderFooter=()=>{
-        return this.state.showLoading ?
-        <View style={[app.loading]}><Text style={app.loadingText}>加载中...</Text></View>
-        :null
-    }
-
     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)}
-          />
-
+            <BizPage title="ListView">
+                <BizPage.Intro main="无限下拉"></BizPage.Intro>
+                <ListView
+                    renderHeader={this.headerList1}
+                    renderFooter={this.footerList1}
+                    renderRow={this.renderItem.bind(this,this.state.list1.data.length)}
+                    dataSource={this.state.list1.data}
+                    style={styles.listContainer}
+                    onEndReached={this.handleLoadMoreList1}
+                />
+                <BizPage.Intro main="resetLoadmore"></BizPage.Intro>
+                <ListView ref="list2"
+                    renderHeader={this.headerList2}
+                    renderFooter={this.footerList2}
+                    renderRow={this.renderItem.bind(this,this.state.list2.data.length)}
+                    dataSource={this.state.list2.data}
+                    style={styles.listContainer}
+                    onEndReached={this.handleLoadMoreList2}
+                />
+                <Button.Group style={{marginTop:'30rem'}}>
+                    <Button type="primary" onPress={this.scroll}>滑动到20rem 位置</Button>
+                    <Button type="primary" onPress={this.reset}>reset loadMore</Button>
+                </Button.Group>
+          </BizPage>
         )
     }
 }
-const app = {
+const styles = {
     listContainer:{
-        flex:1
+        height:'300rem',
+        marginTop:'40rem'
     },
-    cellItemList:{
+    cellItem:{
         backgroundColor:"#ffffff",
-        height:"110rem",
+        [`backgroundColor:active`]:'#f2f3f7',
+        height:"96rem",
+        paddingLeft:"30rem",
+        
+    },
+    cellInner:{
+        flex:1,
         borderBottomWidth:"2rem",
         borderBottomStyle:"solid",
-        borderBottomColor:"#e8e8e8",
+        borderBottomColor:"#e6e7eb",
+        alignItems:"center",
+        flexDirection:"row"
+    },
+    cellItemLast:{
+        backgroundColor:"#ffffff",
+        height:"96rem",
+        borderBottomWidth:"2rem",
+        borderBottomStyle:"solid",
+        borderBottomColor:"#e6e7eb",
         paddingLeft:"30rem",
@@ -122,4 +242,13 @@ alignItems:"center",
     },
+    icon:{
+        color:'#c7c7cc',
+        width:'72rem',
+        height:'72rem',
+        marginRight:'26rem',
+        //position:'absolute',
+        //top:'34rem',
+        //right:'24rem' 
+    },
     itemTextList:{
-        fontSize:"30rem",
+        fontSize:"32rem",
         color:"#5F646E"
@@ -126,0 +255,0 @@ },

HISTORY.md

 # Changelog 
 
 
+## 0.2.5 / 2017-03-07 
+
+  * [[f466abe](http://gitlab.alibaba-inc.com/nuke/list-view/commit/f466abe5e7d41a47e7310e1f8408c6c4d25eec72)] - `docs` update docs 
+  * [[7ecbb3a](http://gitlab.alibaba-inc.com/nuke/list-view/commit/7ecbb3a8c0690d703e2c8e55bb906ea73b292d32)] - `docs` docs style beautify 
+
 ## 0.2.4 / 2017-03-01 
@@ -5,0 +10,0 @@

package.json

 {
   "name": "nuke-list-view",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "列表",
@@ -39,3 +39,4 @@ "main": "lib/index",
     "nuke-icon": "0.x.x",
-    "nuke-modal": "^0.x.x"
+    "nuke-modal": "^0.x.x",
+    "nuke-biz-page": "^0.x.x"
   },
@@ -42,0 +43,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

35979

increased by60.26%

Lines of code

619

increased by125.09%

Worsened metrics

Dev dependency count

4

increased by33.33%

No dependency changes