BrandContainer.js 11 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} from 'immutable';
import * as brandActions from '../reducers/brand/brandActions';

import Brand from '../components/brand/Brand';


const actions = [
    brandActions,
];

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 BrandContainer extends Component {
    constructor(props) {
        super(props);

        this._onPressSlideItem = this._onPressSlideItem.bind(this);
        this._onPressRecommendItem = this._onPressRecommendItem.bind(this);
        this._onPressFilter = this._onPressFilter.bind(this);
        this._onSelectChannel = this._onSelectChannel.bind(this);
        this._onPressSearch = this._onPressSearch.bind(this);
        this._onPressClearHistory = this._onPressClearHistory.bind(this);
        this._onClickCancelSearch = this._onClickCancelSearch.bind(this);
        this._onSearchTextChange = this._onSearchTextChange.bind(this);
        this._onPressKeyword = this._onPressKeyword.bind(this);
        this._onPressBrandSearchItem = this._onPressBrandSearchItem.bind(this);
        this._setBrandData = this._setBrandData.bind(this);
        this._setInitialListSize = this._setInitialListSize.bind(this);
        this._onPressBrandItem = this._onPressBrandItem.bind(this);
        this._onPressSearchHistoryItem = this._onPressSearchHistoryItem.bind(this);


        this.subscription = NativeAppEventEmitter.addListener(
            'ChannelDidChangeEvent',
            (reminder) => {
                this._onSelectChannel({id: reminder.channel});
            }
        );

    }

    componentDidMount() {
        this.props.actions.getBrandList(1);
        this.props.actions.getBrandResource(1);
        this.props.actions.searchHistory();
        this.props.actions.hotKeyword();
    }

    componentWillUnmount() {
        this.subscription && this.subscription.remove();
    }

    //原生跳转
    _onPressBrandItem(data, fromSearch=false){
        ReactNative.NativeModules.YH_CommonHelper.pushBrandVC(data);

        let eventName = '';
        let params = {};

        if (this.props.brand.brandFliter == 1 || this.props.brand.brandFliter == 2) {
            eventName = 'YB_CATEGORY_BRAND_LIST_IMAGE';
        } else {
            eventName = 'YB_CATEGORY_BRAND_LIST_TEXT';   
        }

        if (fromSearch) {
            eventName = 'YB_CATEGORY_BRAND_LIST_TEXT';
        }

        let brandId = data.shop_id ? data.shop_id : '';
        if (!brandId) {
            brandId = data.id ? data.id : '';
        }
        params = {
            BR_ID: brandId,
            GDER: this.props.brand.selectedChannelId + '',
        };
        // console.log(eventName)
        // console.log(params)
        NativeModules.YH_CommonHelper.logEvent(eventName, params);
    }

    //URL 拼装跳转规则跳转
    _onPressSlideItem(url, index=0) {
        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);

        let params = {
            BAN_NUM: parseInt(index) + 1 + '',
            TOURL: url,
            GDER: this.props.brand.selectedChannelId + '',
        };

        NativeModules.YH_CommonHelper.logEvent('YB_CATEGORY_BRAND_LIST_BAN', params);
    }

    _onPressRecommendItem(data, index=0) {
        let url = data.url;
        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);

        let brandId = brandId = data.id ? data.id : '';
        let params = {
            BAN_NUM: parseInt(index) + 1 + '',
            BR_ID: brandId,
            GDER: this.props.brand.selectedChannelId + '',
        };

        NativeModules.YH_CommonHelper.logEvent('YB_CATEGORY_BRAND_LIST_BR', params);
    }

    _onPressFilter(value) {
        this.props.actions.setBrandFilter(value);

        let params = {
            CAT_NUM: parseInt(value) + 1 + '',
        };

        NativeModules.YH_CommonHelper.logEvent('YB_CATEGORY_BRAND_LIST_SG', params);
    }

    _setInitialListSize(count){
        this.props.actions.setInitialListSize(count);
    }

    _onSelectChannel(channel){
        let {
            brandListForBoy,
            brandListForGirl,
            brandListForKid,
            brandListForLifeStyle,
            reourceForBoy,
            reourceForGirl,
            reourceForKid,
            reourceForLifeStyle,
        } = this.props.brand;

        let channelId = channel.id;
        let brandListNeedRequest;
        let reourceNeedRequest;
        if (channelId == 1) {
            brandListNeedRequest = brandListForBoy.get('hasSuccess');
            reourceNeedRequest = reourceForBoy.get('hasSuccess');
        }else if (channelId == 2) {
            brandListNeedRequest = brandListForGirl.get('hasSuccess');
            reourceNeedRequest = reourceForGirl.get('hasSuccess');
        }else if (channelId == 3) {
            brandListNeedRequest = brandListForKid.get('hasSuccess');
            reourceNeedRequest = reourceForKid.get('hasSuccess');
        }else if (channelId == 4) {
            brandListNeedRequest = brandListForLifeStyle.get('hasSuccess');
            reourceNeedRequest = reourceForLifeStyle.get('hasSuccess');
        }

        if (!brandListNeedRequest) {
            this.props.actions.getBrandList(channelId);
        }
        if (!reourceNeedRequest) {
            this.props.actions.getBrandResource(channelId);
        }
        this.props.actions.setInitialListSize(0);
        this.props.actions.setBrandSelectedChannel(channelId);

        let params = {
            CAT_NUM: channelId + '',
        };

        NativeModules.YH_CommonHelper.logEvent('YB_CATEGORY_BRAND_LIST_CH', params);
    }

    _onPressSearch() {
        this.props.actions.setShowSearch(!this.props.brand.showSearch);

        if (!this.props.brand.showSearch) {
            let params = {
                SEARCH_POS: '2',
            };

            NativeModules.YH_CommonHelper.logEvent('YB_SEARCH_CLICK', params);
        }
    }

    _onPressClearHistory() {
        this.props.actions.clearSearchHistory();
    }

    _onClickCancelSearch() {
        this.props.actions.setShowSearch(!this.props.brand.showSearch);
        this.props.actions.setBrandKeyword('');
        this.props.actions.filteBrandForKeyword('');
    }

    _onSearchTextChange(text) {
        this.props.actions.setBrandKeyword(text);
        this.props.actions.filteBrandForKeyword(text);
    }

    _setBrandData(data, selectedChannelId) {
        this.props.actions.setBrandData(data, selectedChannelId);
    }

    _onPressKeyword(keyword) {
        this._onSearchTextChange(keyword);
    }

    _onPressBrandSearchItem(data) {
        this._onPressBrandItem(data, true);
        this.props.actions.insertSearchHistory(data);
        this._onClickCancelSearch();

        let keyword = this.props.brand.search.keyword ? this.props.brand.search.keyword : '';
        let params = {
            KEYWORD: keyword,
            POS_ID: '0',
            FLR_INDEX: '0',
        };
        // console.log('YB_BRAND_KEYWORD_SEARCH_C')
        // console.log(params)
        NativeModules.YH_CommonHelper.logEvent('YB_BRAND_KEYWORD_SEARCH_C', params);
        NativeModules.YH_CommonHelper.logEvent('YB_CATEGORY_BRAND_LIST_SC', {});
    }

    _onPressSearchHistoryItem(keyword, androiddata, index, section){
        // 关闭了android点击搜索历史直接跳转至相关页面,现调整为与IOS效果一致   by chenlin 2016.12.19
        this._onSearchTextChange(keyword);


        // //兼容IOS只需要搜索关键字,IOS设置搜索框内容为keyword即可,android需要点击直接跳转至相关页面
        // if (Platform.OS === 'ios') {
        //     this._onSearchTextChange(keyword);
        // }
        // else{
            // //先判断是否有androiddata数据,若有则直接调用原生方法,若无则可能是热门搜索信息,设置搜索框文字内容
            // if(androiddata){
            //     this._onPressBrandItem(androiddata);
            //     this.props.actions.insertSearchHistory(androiddata);
            // }
            // else
            //     this._onSearchTextChange(keyword);
        // }

        let params = {
            KEYWORD: keyword,
            POS_ID: parseInt(section) + 1 + '',
            FLR_INDEX: parseInt(index) + 1 + '',
        };
        // console.log('YB_BRAND_KEYWORD_SEARCH_C')
        // console.log(params)
        NativeModules.YH_CommonHelper.logEvent('YB_BRAND_KEYWORD_SEARCH_C', params);
    }

    render() {
        let {
            showSearch,
            initialListSize,
            isFetching,
            selectedChannelId,
            brandFliter,
            brandListForBoy,
            brandListForGirl,
            brandListForKid,
            brandListForLifeStyle,
            reourceForBoy,
            reourceForGirl,
            reourceForKid,
            reourceForLifeStyle,
            search,
        } = this.props.brand;

        return (
            <View style={styles.container}>
                <Brand
                    isFetching={isFetching}
                    initialListSize={initialListSize}
                    selectedChannelId={selectedChannelId}
                    brandFliter={brandFliter}
                    brandListForBoy={brandListForBoy}
                    brandListForGirl={brandListForGirl}
                    brandListForKid={brandListForKid}
                    brandListForLifeStyle={brandListForLifeStyle}
                    reourceForBoy={reourceForBoy}
                    reourceForGirl={reourceForGirl}
                    reourceForKid={reourceForKid}
                    reourceForLifeStyle={reourceForLifeStyle}
                    onPressFilter={this._onPressFilter}
                    onPressSlideItem={this._onPressSlideItem}
                    onPressRecommendItem={this._onPressRecommendItem}
                    onSelectChannel={this._onSelectChannel}
                    showSearch={showSearch}
                    search={search}
                    onPressSearch={this._onPressSearch}
                    onPressClearHistory={this._onPressClearHistory}
                    onClickCancel={this._onClickCancelSearch}
                    onTextChange={this._onSearchTextChange}
                    onPressBrandSearchItem={this._onPressBrandSearchItem}
                    setBrandData={this._setBrandData}
                    setInitialListSize={this._setInitialListSize}
                    onPressBrandItem={this._onPressBrandItem}
                    onPressSearchHistoryItem={this._onPressSearchHistoryItem}
                />
            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },

});

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