YohoCoinBanner.js 3.63 KB
'use strict';

import React from 'react';
import ReactNative from 'react-native';
import YH_Swiper from '../../../common/components/YH_Swiper';
import YH_Image from '../../../common/components/YH_Image';
import {getSlicedUrl} from '../../../classify/utils/Utils';

const {
    View,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
    Platform,
} = ReactNative;

import Immutable, {Map} from 'immutable';

export default class YohoCoinBanner extends React.Component {

    constructor(props) {
        super (props);
    }

    shouldComponentUpdate(nextProps){
        if (Immutable.is(nextProps.resource, this.props.resource)) {
            return false;
        } else {
            return true;
        }
    }

    render() {

		let resource = this.props.resource?this.props.resource.toJS():null;

        if (!resource) {
			return null;
		}
		let error = resource.error;
		let data = resource.list;

		if (error || data.length == 0) {
			return null;
		}

        if (data.length == 1) {
			let newSrc = getSlicedUrl(data[0].src, width, swiperHeight);
            return (
				<View style={styles.container}>
					<View style={{
						width: width,
						height: 20,
						backgroundColor: 'rgb(240,240,240)',
	        		}}/>
	                <TouchableOpacity
	                    activeOpacity={1}
	                    style={{width: width, height: swiperHeight}}
	                    onPress={() => {
                            this.props.onPressProduct && this.props.onPressProduct(data[0].url)
	                    }}
	                >
	                    <YH_Image
	                        url={newSrc}
	                        style={{ width: width, height: swiperHeight}}
	                    />
	                </TouchableOpacity>
					<View style={{
						width: width,
						height: 15,
						backgroundColor: 'rgb(240,240,240)',
	        		}}/>
				</View>
            );
        } else {
            return (
				<View style={styles.container}>
					<View style={{
						width: width,
						height: 20,
						backgroundColor: '#e0e0e0',
					}}/>
	                <YH_Swiper
	                    style={styles.banner}
	                    showsButtons={false}
	                    loop={true}
	                    autoplay={true}
	                    autoplayTimeout={2}
	                    paginationStyle={{bottom: 8}}
	                    width={width}
	                    height={swiperHeight}
	                >
	                    {data.map((item, i) => {
							let newSrc = getSlicedUrl(item.src, width, swiperHeight);
	                        return (
	                            <TouchableOpacity
	                                key={i}
	                                activeOpacity={1}
	                                onPress={() => {
                                        this.props.onPressProduct && this.props.onPressProduct(item.url,row_ID,1,template_name,template_id)
	                                }}
	                            >
	                                <YH_Image
	                                    url={newSrc}
	                                    style={{width: width, height: swiperHeight}}
	                                />
	                            </TouchableOpacity>
	                        );
	                    })}
	                </YH_Swiper>
					<View style={{
						width: width,
						height: 15,
						backgroundColor: '#e0e0e0',
					}}/>
				</View>
            );
        }
    }
}

let {width, height} = Dimensions.get('window');
let swiperHeight = Math.ceil((200 / 640) * width);

let styles = StyleSheet.create({
	container: {
		width: width,
		height: swiperHeight + 20 + 15,
		backgroundColor: 'white',
	},

});