CommentsTitle.js 3.39 KB
'use strict';

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

const {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  Dimensions,
  TouchableOpacity,
} = ReactNative;


export default class CommentsTitle extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let {resource,total} = this.props;
        let data = resource?resource.toJS():null;
        let browseNum = data.browseNum?data.browseNum:0;
        let id = data.id?data.id:0;
        let isFavor = data.isFavor?data.isFavor:'N';
        let isPraise = data.isPraise?data.isPraise:'N';
        let praiseHeadIco = data.praiseHeadIco?data.praiseHeadIco:[];
        let praiseNum = data.praiseNum?data.praiseNum:0;
        let praiseText = praiseNum + '人点赞';
        let browseNumText = browseNum + '人看过';
        let title = '评论'+total;
        let url1 = praiseHeadIco.length>0? praiseHeadIco[0]:'';
        let url2 = praiseHeadIco.length>1? praiseHeadIco[1]:'';
        let url3 = praiseHeadIco.length>2? praiseHeadIco[2]:'';
        let textLeft = 45;
        textLeft = url1 ?  textLeft + 10 : textLeft;
        textLeft = url2 ?  textLeft + 20 : textLeft;
        textLeft = url3 ?  textLeft + 20 : textLeft;

		return (
			<View style={styles.container}>
				<View style={styles.contentContainer}>
					{url3 ? <YH_Image url={url3}  style={styles.icon3} radius={{'topLeft':'60','topRight':'60','bottomRight':'60','bottomLeft':'60'}} /> : null}
					{url2 ? <YH_Image url={url2}  style={styles.icon2} radius={{'topLeft':'60','topRight':'60','bottomRight':'60','bottomLeft':'60'}} /> : null}
					{url1 ? <YH_Image url={url1}  style={styles.icon1} radius={{'topLeft':'60','topRight':'60','bottomRight':'60','bottomLeft':'60'}} /> : null}
					<Text style={{marginLeft: textLeft,width: 120,textAlign: 'left',backgroundColor: 'white',}}>{praiseText}</Text>
					<Text style={styles.leftText}>{browseNumText}</Text>
				</View>
				<View style={{width: width,height: 1,backgroundColor: '#e5e5e5',}}/>
				<View style={styles.commentTitle}>
					<Text style={styles.commentTitleText}>{title}</Text>
				</View>
			</View>
		);
    }
};

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

let styles = StyleSheet.create({
	container: {
		height: 61 + 30,
		width:width,
	},
	contentContainer: {
		height: 60,
		width:width,
		flexDirection: 'row',
		backgroundColor: 'white',
		alignItems: 'center',
	},
	icon1: {
		height: 40,
		width: 40,
		borderRadius: 20,
		position: 'absolute',
		left: 10,
		borderWidth: 2,
		borderColor: 'white',
	    overflow: 'hidden',
	},
	icon2: {
		height: 40,
		width: 40,
		borderRadius: 20,
		position: 'absolute',
		left: 10 + 20,
		borderWidth: 2,
		borderColor: 'white',
	    overflow: 'hidden',
	},
	icon3: {
		height: 40,
		width: 40,
		borderRadius: 20,
		position: 'absolute',
		left: 10 + 20 + 20,
		borderWidth: 2,
		borderColor: 'white',
	    overflow: 'hidden',
	},
	leftText: {
        position: 'absolute',
		width: width - 120 - 105,
		textAlign: 'right',
		backgroundColor: 'white',
        right: 20,
	},
	commentTitle: {
		width: width,
		height: 30,
		backgroundColor: 'white',
		justifyContent: 'center',
	},
	commentTitleText: {
		marginLeft: 12,
		textAlign: 'left',
		color: 'gray'
	},
});