ListContainer.js 7.55 KB
'use strict'

import React, {Component} from 'react';
import ReactNative, {
    StyleSheet,
    Dimensions,
    Platform,
    View,
    Text,
    NativeModules,
    InteractionManager,
    NativeAppEventEmitter,
} from 'react-native'

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map, Record} from 'immutable';
import * as listActions from '../reducers/list/listActions';

import ScrollableTabView,{DefaultTabBar} from 'react-native-scrollable-tab-view';

import OrderList from '../components/list/OrderList'
import {urlAddParamOfType} from '../../common/utils/urlHandler';

const actions = [
    listActions,
];

function mapStateToProps(state) {
    return {
        ...state
    };
}

function mapDispatchToProps(dispatch) {

    const creators = Map()
        .merge(...actions)
        .filter(value => typeof value === 'function')
        .toObject();

    return {
        actions: bindActionCreators(creators, dispatch),
        dispatch
    };
}

class ListContainer extends Component {
    constructor(props) {
        super(props);
        this._onRefresh = this._onRefresh.bind(this);
        this._onLoadMore = this._onLoadMore.bind(this);
        this._orderAction = this._orderAction.bind(this);
        this._showDelayDeliveryNotice = this._showDelayDeliveryNotice.bind(this);
        this._goDetail = this._goDetail.bind(this);
        this._onPressEmptyItem = this._onPressEmptyItem.bind(this);

        this.subscription = NativeAppEventEmitter.addListener(
            'PaySuccessEvent',
            (reminder) => {
                this._onRefresh('all');
                this._onRefresh('onPay');
                this._onRefresh('onDelivery');
            }
        );
        this.subscription1 = NativeAppEventEmitter.addListener(
            'CancelSuccessEvent',
            (reminder) => {
                this._onRefresh('all');
                this._onRefresh('onPay');
            }
        );
        this.subscription2 = NativeAppEventEmitter.addListener(
            'RefundSuccessEvent',
            (reminder) => {
                this._onRefresh('all');
                this._onRefresh('onDelivery');
            }
        );
        this.subscription3 = NativeAppEventEmitter.addListener(
            'ConfirmSuccessEvent',
            (reminder) => {
                this._onRefresh('all');
                this._onRefresh('onReceive');
            }
        );
        this.subscription4 = NativeAppEventEmitter.addListener(
            'EditAddressEvent',
            (reminder) => {
                this._onRefresh('all');
                this._onRefresh('onDelivery');
            }
        );
        this.subscription5 = NativeAppEventEmitter.addListener(
            'DeleteSuccessEvent',
            (reminder) => {
                this._onRefresh('all');
                this._onRefresh('onDelivery');
            }
        );
        this.subscription6 = NativeAppEventEmitter.addListener(
            'ChangePayWaySuccessEvent',
            (reminder) => {
                this._onRefresh('all');
                this._onRefresh('onPay');
            }
        )
    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this.subscription && this.subscription.remove();
        this.subscription1 && this.subscription1.remove();
        this.subscription2 && this.subscription2.remove();
        this.subscription3 && this.subscription3.remove();
        this.subscription4 && this.subscription4.remove();
        this.subscription5 && this.subscription4.remove();
        this.subscription6 && this.subscription4.remove();
    }

    _onRefresh(type) {
        InteractionManager.runAfterInteractions(() => {
            this.props.actions.resetStateWhenRefresh(type);
            this.props.actions.getOrderListByType(type);
        });
    }

    _onLoadMore(type){
        InteractionManager.runAfterInteractions(() => {
            this.props.actions.getOrderListByType(type);
        });
    }

    _onPressEmptyItem() {
        let jumpUrl = `http://m.yohobuy.com?openby:yohobuy={"action":"go.new"}`;
        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(jumpUrl);
    }

    _showDelayDeliveryNotice(noticeString){
        NativeModules.YH_OrderHelper.deliveryDelayNotice(noticeString);
    }

    _goDetail(orderData){
        let orderCode = orderData.get('order_code',0);
        let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.orderDetail","params":{"orderCode":"${orderCode}"}}`;
        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
    }

    _orderAction(type,orderData,link){
        switch (link) {
            case 'afterService':
            case 'buyNow':
            case 'closeOrder':
            case 'confirm':
            case 'delOrder':
            case 'getExpress':
            case 'lookQrcode':
            case 'modifyAddress':
            case 'readd':
            case 'refundApply':
            case 'shareOrder':
            {
                let {list}=this.props;
                let index = 1;
                if (type == 'all'){
                    index = 1;
                } else if (type == 'onPay') {
                    index = 2;
                }else if (type == 'onDelivery') {
                    index = 3;
                }else if (type == 'onReceive') {
                    index = 4;
                }
                let param = {
                    index: index,
                    type: link,
                    data: orderData.toJS(),
                }
                NativeModules.YH_OrderHelper.rnOrderListActionWithParam(param);
            }
                break;
        }
    }

    render() {
        let {list}=this.props;
        let initialPage = list.get('defaultPageIndex');

        let types = [];
        types.push({type: 'all',name: '全部'});
        types.push({type: 'onPay',name: '待付款'});
        types.push({type: 'onDelivery',name: '待发货'});
        types.push({type: 'onReceive',name: '待收货'});

        return (
            <View style={styles.container}>
                <ScrollableTabView
                    initialPage={initialPage}
                    renderTabBar={() => <DefaultTabBar
                        style={{height:38}}
                        textStyle={{paddingTop:10}}
                        underlineHeight={0}
                        activeTextColor={'black'}
                        inactiveTextColor={'#b0b0b0'} />
                    }
                    onChangeTab={(obj) => {

                    }}
                >

                {types.map((item, i) => {
                    let type = item.type;
                    let name = item.name;
                    return (
                        <OrderList
                            tabLabel={name}
                            key={i}
                            dataSource={list.get(type)}
                            type={type}
                            onPressEmptyItem={this._onPressEmptyItem}
                            onRefresh={this._onRefresh}
                            onLoadMore={this._onLoadMore}
                            orderAction={this._orderAction}
                            onGoDetail={this._goDetail}
                            onPressDelayNotice={this._showDelayDeliveryNotice}
                        />
                    );
                })}

                </ScrollableTabView>

            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
    },
});

export default connect(mapStateToProps, mapDispatchToProps)(ListContainer);