maimaimai

maimaimai

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

var React = require('react-native');
var ScrollableMixin = require('react-native-scrollable-mixin');
var TimerMixin = require('react-timer-mixin');
var TaoshijieView =require('./TaoshijieView');
var CategoryView =require('./CategoryView');
var FastFashionView =require('./FastFashionView');
var MarketsEntryView =require('./MarketsEntryView');
var BrandsView =require('./BrandView');
var HotManView =require('./Hotman');
var LoadingView =require('../common/Loading');
//var RefreshIndicator =require('../common/RefreshIndicator');

var MGRctBridge=require('NativeModules').MGRctBridge;

var {
  RefreshableScrollView,
} = require('../common/react-native-refresh-control');

var {
  AppRegistry,
  ActivityIndicatorIOS,
  StyleSheet,
  Image,
  Text,
  View,
  ScrollView,
  TouchableHighlight,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Navigator,
  DeviceEventEmitter
} = React;


var Maimaimai = React.createClass({

  mixins: [ScrollableMixin, TimerMixin],

  getInitialState: function() {
    return {
      marketsEntry: null,
      contents: null,
      reload: true,
      //isDrag: false,
      //refreshProgress: 1,
      shouldScrollsToTop: true,
      scrollEnabled:true
    };
  },

  componentDidMount:function(){
    var subscription = DeviceEventEmitter.addListener(
      'action_maimaimai_refresh', (dic) => {

        //this._scrollView.scrollTo(-51, 0);
        //this.setState({refreshProgress: 3});
        //请求数据
        this.fetchData();
      }
    );

    var viewWilApearSubscription = DeviceEventEmitter.addListener(
      'action_maimaimai_will_appear', (dic) => {
        this.setState({shouldScrollsToTop: true});
      }
      );

    var viewWilDisapearSubscription = DeviceEventEmitter.addListener(
      'action_maimaimai_will_disappear', (dic) => {
        this.setState({shouldScrollsToTop: false});
      }
      );
  },

  componentDidUnmount:function(){
    subscription.remove();
    viewWilApearSubscription.remove();
    viewWilDisapearSubscription.remove();
  },

  fetchData:function(){
    MGRctBridge.trackEvent('33000',null);
    MGRctBridge.getDataWithUrl('http://lotus.f2e.mogujie.org/mock/nmapi/market/v1/home', null,
      (successResult)=>{
      // console.log(".........get data succeed.........");
      this.setState({
        marketsEntry: successResult.marketsEntry,
        contents: successResult.content,
        reload: false
      });

      //this._scrollToTop(); 
      //this.setState({"contentInset": {top: 0}});
    },
    // console.log(".........get data failure.........");
    (failureResult)=>{
      //this._scrollToTop(); 
      //this.setState({"contentInset": {top: 0}});
    }
    );
    console.log(11111111);
  },

  render: function() {
    if (!this.state.marketsEntry||this.state.reload) {
      this.fetchData();
      return this.renderLoadingView();
    }

    var marketsEntry=this.state.marketsEntry;
    var contents=this.state.contents;
    return this.renderAll(marketsEntry,contents);
  },

  renderLoadingView: function() {
    return (
      <LoadingView />
    );
  },

  renderAll: function(marketsEntry,contents) {
            // scrollEnabled = {(this.state.refreshProgress == 2)? false:true}
    return (
      <RefreshableScrollView
            ref={(ref) => this._scrollView = ref}
            alwaysBounceVertical={true}
            bounces={true}
            scrollEventThrottle = {100}
            //contentInset = {this.state.contentInset}
            scrollsToTop = {this.state.shouldScrollsToTop}
            //scrollEnabled = {(this.state.refreshProgress==3)?false:true}
            automaticallyAdjustContentInsets = {false}
            //onTouchStart = {this._handleScrollBeginDrag}
            //onScrollBeginDrag = {this._handleScrollBeginDrag}
            //onTouchEnd = {this._handleScrollEndDrag}
            //onScroll = {this._handleScroll}
            onRefresh = { () => {
              return new Promise((resolve, reject) => {
                this.fetchData();
                setTimeout(resolve, 2000);
              })
            }}
            style={styles.scrollview}>


            <MarketsEntryView marketsEntry={marketsEntry}/>
            <View style={styles.div}/>
            <FastFashionView content={contents[0]} />
            <View style={styles.div}/>
            <TaoshijieView data= {contents[1]}/>
            <View style={styles.div}/>
            <BrandsView data={contents[2]}/>
            <View style={styles.div}/>
            <HotManView data={contents[3]}/>
        </RefreshableScrollView>

    );
  },

  // _handleScrollBeginDrag: function(e){
  //   this.setState({
  //     isDrag: true,
  //     refreshProgress: 1
  //   });
  //   // console.log('.........scrolling start.........');
  // },

  // _handleScrollEndDrag: function(e){

  //   this.setState({isDrag: false});

  //   if (this.state.refreshProgress == 2) {

  //     this.setState({"contentInset": {top: 50}});
  //   }
  //   // console.log('.........scrolling end.........');
  // },

  // _handleScroll: function(e){
  //   var offsetY = e.nativeEvent.contentOffset.y,
  //       progress = this.state.refreshProgress;

  //   if (this.state.isDrag) {
  //       if((offsetY > -50 && offsetY < 0) && progress != 1) {
  //           this.setState({
  //               refreshProgress: 1
  //           });
  //       }else if(offsetY < -50 && progress == 1) {
  //           this.setState({
  //               refreshProgress: 2
  //           });
  //       }
  //   } else {
  //       if(offsetY < -50 && progress == 2){
  //           this.setState({
  //             refreshProgress: 3
  //           });
  //           //请求数据
  //           this.fetchData();
  //       }
  //   }
  // },

  // _scrollToTop: function() {

  //   clearTimeout(this._timer)
  //   this._timer = this.setTimeout(() => {
  //     this._scrollView && this._scrollView.scrollTo(0, 0);
      
  //     this.setState({
  //       refreshProgress: 1
  //     });
  //   }, 500);
  // }

});

var styles = StyleSheet.create({
  scrollview:{
    position: 'relative',
    backgroundColor:'#f6f6f6',
  },
  div:{
    backgroundColor:'#f6f6f6',
    height:20,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

module.exports = Maimaimai;