RN

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';


var React = require('react-native');
var TimerMixin = require('react-timer-mixin');


var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  ActivityIndicatorIOS,
  ProgressBarAndroid,
  Platform,
} = React;


var demoDatas = {
  'datas1': [{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'}, {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
  ],


  'datas2': [{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'}, {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
  ],


  'datas3': [{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'}, {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
  ],


  'datas4': [{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'}, {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
      {'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},{'date': '2010.11.23', 'type': '转出', 'acount': '100.00'},
  ],
};






var ListViewDemo = React.createClass({


  mixins: [TimerMixin],


  timeoutID: (null: any),


  startX: 0,
  startY: 0,
  endX: 0,
  endY: 0,


  resultsCache: [],
  page: 1,


  getInitialState: function() {
    return {
        isLoading: true,
        dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        }),
        footerText: '向上滑动看更多',
    };
  },
  
  componentDidMount: function(){
    this.timeoutID =  this.setTimeout(() =>{
      this.timeoutID = null;
      this.resultsCache = this.resultsCache.concat(demoDatas.datas1);
      this.setState({dataSource:this.state.dataSource.cloneWithRows(this.resultsCache), isLoading: false});
    },1000);
  },


  _renderRow: function(
    data: Object,
    sectionID: number | string,
    rowID: number | string,
    highlightRowFunc: (sectionID: ?number | string, rowID: ?number | string) => void,
  ) {


      return (<View style={styles.rowCell}>
         <Text style={styles.rowCellItem}>{data.date}</Text>
         <Text style={[styles.rowCellItem, styles.alignCenter]}>{data.type}</Text>
         <Text style={[styles.rowCellItem, styles.alignRight]}>{data.acount}元</Text>
      </View>);
  },


  _renderFooter: function() {
    if(!this.state.isLoading)
      return (<View style={styles.lvFooter}>
               <Text ref='lvFooterText' style={[styles.text18,styles.textBlue]}>{this.state.footerText}</Text>
             </View>);
    else if(Platform.OS === 'ios'){
      return (<View style={styles.lvFooter}>
               <ActivityIndicatorIOS />
             </View>);
    }else if(Platform.OS === 'android'){
      return (<View style={styles.lvFooter}>
               <ProgressBarAndroid styleAttr='Small' />
             </View>);
    }


  },


  _onEndReached: function() {


    if(this.state.footerText === '没有更多了')
      return;


    if(this.refs.recordListView._getDistanceFromEnd(this.refs.recordListView.scrollProperties) < -50)
      return ;


    this.page++;
    var dataUri = 'datas'+this.page;
    
    this.setState({isLoading: true});
    if(!demoDatas[dataUri]){
      this.timeoutID =  this.setTimeout(() =>{
        this.timeoutID = null;
        this.setState({isLoading: false, footerText: '没有更多了'});
      }, 500);
      return;
    }


    this.timeoutID =  this.setTimeout(() =>{
      this.timeoutID = null;
      this.resultsCache = this.resultsCache.concat(demoDatas[dataUri]);
      this.setState({dataSource:this.state.dataSource.cloneWithRows(this.resultsCache),isLoading: false});
    }, 500);
  },


  handleTouchStart: function(event: Object){
    this.startX = event.nativeEvent.pageX;
    this.startY = event.nativeEvent.pageY;
  },


  handleTouchEnd: function(event: Object){
    this.endX = event.nativeEvent.pageX;
    this.endY = event.nativeEvent.pageY;


    if(this.state.footerText === '没有更多了')
      return;


    if(this.refs.recordListView._getDistanceFromEnd(this.refs.recordListView.scrollProperties) > -50 )
      return ;


    if((this.startY - this.endY) > 1.5 * Math.abs(this.endX - this.startX) && (this.startY - this.endY) > 30 ){


      this.page++;
      var dataUri = 'datas'+this.page;


      this.setState({isLoading: true});
      if(!demoDatas[dataUri]){
          this.timeoutID =  this.setTimeout(() =>{
            this.timeoutID = null;
            this.setState({isLoading: false, footerText: '没有更多了'});
          }, 500);
          return;
      }


      this.timeoutID =  this.setTimeout(() =>{
        this.timeoutID = null;
        this.resultsCache = this.resultsCache.concat(demoDatas[dataUri]);
        this.setState({dataSource:this.state.dataSource.cloneWithRows(this.resultsCache),isLoading: false});
      }, 500);
    }


  },


  getThresholdValue: function() {
    return Platform.OS === 'ios'? -50 : 0;
  },


  render: function() {
    return (
      <View style={styles.container}>
          <View style={styles.rowCell}>
             <Text style={[styles.rowCellItem, styles.textPurple, styles.text18]}>日期</Text>
             <Text style={[styles.rowCellItem, styles.alignCenter, styles.textPurple, styles.text18]}>转出\入</Text>
             <Text style={[styles.rowCellItem, styles.alignRight, styles.textPurple, styles.text18]}>金额</Text>
          </View>
          <View style={styles.separatorLine} />
          <ListView
            ref='recordListView'
            style={styles.lv}
            pageSize={20}
            dataSource={this.state.dataSource}
            renderRow={this._renderRow} 
            renderFooter={this._renderFooter}
            onEndReached={this._onEndReached}
            onEndReachedThreshold={this.getThresholdValue()}
            showsVerticalScrollIndicator={false}
            onTouchStart={(event) => this.handleTouchStart(event)}
            onTouchEnd={(event) => this.handleTouchEnd(event)}
            />
          
      </View>
    );
  }
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    paddingHorizontal: 50,
  },
  textPurple: {
    color: '#5f3372',
  },
  textBlue: {
    color: '#0080fc',
  },
  text18: {
    fontSize: 18,
  },
  separatorLine: {
    height: 1,
    backgroundColor: '#68228B',
    marginVertical: 8,           
  },
  rowCell: {
    flexDirection: 'row',
  },
  rowCellItem: {
    flex: 1,
    fontSize: 16,
    color: '#9b9b9b',
  },
  alignCenter: {
    textAlign: 'center',
  },
  alignRight: {
    textAlign: 'right',
  },
  lvFooter: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 30,
  },
});


AppRegistry.registerComponent('ListViewDemo', () => ListViewDemo);