wangshuotest/lib/JDBRNContactCellFriendTrendingTypeView.js

tihis is my first test project

/**
 * JDBReactNativeCode
 * @author 王硕
 * @date  2016/2/6:上午10:38
 * @version
 * @moduname
 * @router
 * @desc 好友tab页面 好友动态卡片
 */

/*
 eslint class-methods-use-this:
 ["error", { "exceptMethods": ["_renderSeparatorLine"] }]
 */

import React, { Component, PropTypes } from 'react';
import { StyleSheet, View, Text, Image, Dimensions, PixelRatio } from 'react-native';
import {
    JDBRNRouter,
} from 'NativeModules';
import Color from '../../../../JDBRNKit/Utils/Color';
import JDBRNContactCellTypeHeaderView from './JDBRNContactCellTypeHeaderView';
import JDBRNLikeAndCommentView from '../../../../JDBRNKit/Components/JDBRNLikeAndCommentView';
import JDBRNContactFeedsImagesView from './JDBTabImagesView';
import RDFTouchable from '../../../../RDF/Components/RDFTouchable';
import TrackEvent from '../../../../JDBRNKit/Utils/TrackEvent';

export const CellFriendTrendingStatus = {
    FriendTrendingImage: 1, // 带图片
    FriendTrendingText: 2, // 文字
    FriendTrendingLink: 3, //超连接
};
const windowWidth = Dimensions.get('window').width;
const defaultPortraitIcon = require('/js/JDBRNKit/images/default_portrait_m@2x.png');

export default class JDBRNContactCellFriendTrendingTypeView extends Component {

    static propTypes = {
        myMemberID: PropTypes.string,
        memberID: PropTypes.string.isRequired,
        userName: PropTypes.string.isRequired,
        imageUri: PropTypes.string.isRequired,
        time: PropTypes.string.isRequired,
        headerOnPress: PropTypes.func,
        content: PropTypes.arrayOf(
            PropTypes.shape({
                type: React.PropTypes.number, // 类型
                text: React.PropTypes.string, // 文案
                color: React.PropTypes.string, // 颜色
                fontSize: React.PropTypes.number, // 字号
                action: React.PropTypes.string, // action
                icon: React.PropTypes.string, // 图片地址
            })),
        CellFriendTrendingStatus: PropTypes.number.isRequired,
        topicImg: PropTypes.array.isRequired,
        likeStatus: PropTypes.bool.isRequired,
        likeNumber: PropTypes.number.isRequired,
        likeOnPress: PropTypes.func.isRequired,
        commentNumber: PropTypes.number.isRequired,
        isRDFTouchable: PropTypes.bool,
        uniqueWithLikeNumber: PropTypes.string.isRequired,
        browseImages: PropTypes.bool,
        commentOnPress: PropTypes.func.isRequired,
        uniqueWithCommentNumber: PropTypes.string,
        urlContent: PropTypes.shape({
            text: React.PropTypes.string,
            action: React.PropTypes.string,
            icon: React.PropTypes.string,
            color: React.PropTypes.string,
            type: PropTypes.oneOfType([
                React.PropTypes.number,
                React.PropTypes.string,
            ]),
            fontSize: React.PropTypes.string,
        }),
        textHeight: React.PropTypes.number,
    };

    static defaultProps = {
        myMemberID: '',
        headerOnPress: null,
        isRDFTouchable: true,
        browseImages: true,
        uniqueWithCommentNumber: null,
        urlContent: null,
        content: [],
        textHeight: 0,
    };

    constructor(props) {
        super(props);
        this.state = {};
    }

    getIsLike() {
        return this.likeView && this.likeView.getIsLike();
    }

    getLikeNumber() {
        return this.likeView && this.likeView.getLikeNumber();
    }

    /**
     * 改变点赞控件
     * @param likeStatus
     * @param likeNumber
     * @private
     */
    _likeAnimated() {
        if (this.likeView) {
            this.likeView._likeAnimated();
        }
    }

    /**
     * 头像姓名时间View
     */
    _renderUserNameUri() {
        return (
            <JDBRNContactCellTypeHeaderView
                userName={this.props.userName}
                imageUri={this.props.imageUri}
                time={this.props.time}
                headerOnPress={this.props.headerOnPress}
            />
        );
    }

    /**
     * 好友动态文字View
     * @returns {XML}
     * @private
     */
    _renderFriendTrendingMsg() {
        if (this.props.content.length) {
            return (
                <Text
                    style={[styles.FriendTrendingMsgText, this.props.textHeight > 0 ? { height: parseInt(this.props.textHeight, 10) + 10 } : {}]}
                    numberOfLines={3}
                >
                    {
                        this.props.content.map(item => (
                            <Text
                                style={{
                                    color: item.color ? item.color : Color.c_cont_a,
                                    fontSize: item.fontSize ? item.fontSize : 16,
                                    lineHeight: 21,
                                }}
                            >
                                {item.text}
                            </Text>
                        ))
                    }
                </Text>
            );
        }
        return null;
    }

    /**
     * 超链接绝对坐标
     * @returns {XML}
     * @private
     */
    _renderFriendTrendingMsgAbsolute() {
        if (this.props.content.length) {
            return (
                this.props.content.map((item) => {
                    if (item.action) {
                        return (
                            <RDFTouchable
                                style={{
                                    backgroundColor: 'transparent',
                                    position: 'absolute',
                                    top: 61,
                                    left: 15,
                                }}
                                onPress={() => {
                                    TrackEvent.make(TrackEvent.JDB_CONTACT_CARD_THEME);
                                    JDBRNRouter.rnOpenUrl(item.action);
                                }}
                            >
                                <Text
                                    style={{
                                        color: 'transparent',
                                        fontSize: item.fontSize,
                                        lineHeight: 21,
                                    }}
                                >
                                    {item.text}
                                </Text>
                            </RDFTouchable>
                        );
                    }
                    return null;
                })
            );
        }
    }

    /**
     * 好友动态图片View
     * @returns {XML}
     * @private
     */
    _renderFriendTrendingImage() {
        if (this.props.CellFriendTrendingStatus &&
            this.props.CellFriendTrendingStatus == CellFriendTrendingStatus.FriendTrendingImage) {
            return (
                <View style={[{ marginHorizontal: 15 },this.props.content.length?{}:{marginTop:5}]}>
                    <JDBRNContactFeedsImagesView
                        isFBListViewChildren={false}
                        style={{ width: Dimensions.get('window').width - 30 }}
                        imgs={this.props.topicImg}
                        browseImages={this.props.browseImages}
                    />
                </View>
            );
        }
        return null;
    }

    /**
     * 好友动态文字View
     * @returns {XML}
     * @private
     */
    _renderFriendTrendingText() {
        if ((!this.props.urlContent) && (!(this.props.topicImg && this.props.topicImg.length > 0))) {
            return (
                <View style={styles.FriendTrendingText} />
            );
        }
        return null;
    }

    /**
     * 好友动态超链接View
     * 一期暂时不做带扩展
     * @returns {XML}
     * @private
     */
    _renderFriendTrendingLink() {
        let gap = 0;
        // 有图片加15间距
        if (this.props.CellFriendTrendingStatus &&
            this.props.CellFriendTrendingStatus == CellFriendTrendingStatus.FriendTrendingImage) {
            gap = 15;
        }

        if (this.props.urlContent) {
            let queryStr;
            if (this.props.urlContent.type == 3) {
                const findIndex = this.props.urlContent.action.indexOf('?', 0);
                if (findIndex > 0) {
                    queryStr = this.props.urlContent.action.substring(findIndex);
                }
            }

            return (
                <RDFTouchable
                    onPress={() => {
                        TrackEvent.make(TrackEvent.JDB_CONTACT_CARD_URL);
                        if (this.props.myMemberID == this.props.memberID && queryStr) {
                            JDBRNRouter.rnOpenUrl(`jdbclient://user/transaction/borrow${queryStr}`);
                        } else {
                            JDBRNRouter.rnOpenUrl(this.props.urlContent.action);
                        }
                    }}
                >
                    <View style={{ backgroundColor: 'transparent' }}>
                        <View style={[styles.FriendTrendingLink, { marginTop: gap }]}>
                            <Image
                                style={styles.FriendTrendingLinkUri}
                                source={this.props.urlContent.icon ? { uri: this.props.urlContent.icon } : defaultPortraitIcon}
                            />
                            <Text
                                style={styles.FriendTrendingLinkText}
                                numberOfLines={2}
                            >
                                {this.props.urlContent.text ? this.props.urlContent.text : ''}
                            </Text>
                        </View>
                    </View>
                </RDFTouchable>
            );
        }
        return null;
    }

    /**
     * 点赞评论View
     * @returns {XML}
     * @private
     */
    _renderLikeAndComment() {
        return (
            <JDBRNLikeAndCommentView
                ref={(likeView) => {
                    this.likeView = likeView;
                }}
                likeStatus={this.props.likeStatus}
                likeNumber={this.props.likeNumber}
                likeOnPress={this.props.likeOnPress}
                commentNumber={typeof (this.props.commentNumber) == 'number' ? this.props.commentNumber : 0}
                commentOnPress={this.props.commentOnPress}
                isRDFTouchable={this.props.isRDFTouchable}
                uniqueWithLikeNumber={this.props.uniqueWithLikeNumber}
                uniqueWithCommentNumber={this.props.uniqueWithCommentNumber}
            />
        );
    }

    /**
     * 模拟分割线
     * @returns {XML}
     * @private
     */
    _renderSeparatorLine() {
        return (
            <View style={{ width: windowWidth, height: 7, backgroundColor: Color.c_bg_line_g }} />
        );
    }

    render() {
        return (
            <View style={[styles.container]}>
                {this._renderUserNameUri()}
                {this._renderFriendTrendingMsg()}
                {this._renderFriendTrendingMsgAbsolute()}
                {this._renderFriendTrendingImage()}
                {this._renderFriendTrendingLink()}
                {this._renderFriendTrendingText()}
                {this._renderLikeAndComment()}
                {this._renderSeparatorLine()}
            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        width: windowWidth,
        backgroundColor: Color.c_bg_line_e,
    },
    FriendTrendingMsgBox: {
        marginLeft: 15,
        width: windowWidth - 30,
        marginRight: 15,
    },
    FriendTrendingMsgText: {
        marginLeft: 15,
        width: windowWidth - 30,
        marginRight: 15,
        color: Color.c_cont_a,
        textAlign: 'left',
        fontSize: 16,
        paddingTop: 2,
        paddingBottom: 10,
        lineHeight: 21,
    },
    FriendTrendingText: {
        backgroundColor: Color.c_bg_line_b,
        marginLeft: 15,
        width: windowWidth - 30,
        marginRight: 15,
        height: 1 / PixelRatio.get(),
    },
    FriendTrendingLink: {
        marginLeft: 15,
        width: windowWidth - 30,
        marginRight: 15,
        backgroundColor: Color.c_bg_line_g,
        height: 64,
        borderRadius: 4,
        alignItems: 'center',
        flexDirection: 'row',
    },
    FriendTrendingLinkUri: {
        width: 50,
        height: 50,
        borderRadius: 2,
        marginLeft: 8,
    },
    FriendTrendingLinkText: {
        color: Color.c_cont_a,
        fontSize: 14,
        marginLeft: 10,
        marginRight: 10,
        width: windowWidth - 108,
    },

});