hcmobile-sdk/components/rowLayout/index.js

mobile-sdk

import React,{Component} from 'react';
import {
    View,
    StyleSheet,
    Text,
    Image,
    Platform,
    TouchableOpacity
} from 'react-native';
import IconArrow from '../../images/arrow_right.png';
import PropTypes from 'prop-types';

export default class RowLayout extends Component {

    static propTypes = {
        tag : PropTypes.string,
        tagImage : PropTypes.number,
        tagImageStyle : PropTypes.object,
        tagFontSize : PropTypes.number,
        tagColor : PropTypes.string,
        content : PropTypes.string,
        arrowImg : PropTypes.number,
        arrowImgStyle : PropTypes.object,
        lineColor : PropTypes.string,
        activeOpacity : PropTypes.number,
        style : PropTypes.object,
        isTop : PropTypes.bool,
        showArrow : PropTypes.bool,
        onPress : PropTypes.func,
    }
    
    render(){
        const {
            tag,
            tagImage,
            tagImageStyle,
            tagFontSize,
            tagColor,
            content,
            onPress,
            showArrow,
            arrowImg,
            arrowImgStyle,
            style,
            lineColor,
            activeOpacity,
            isTop,
        } = this.props;
        let arrow = arrowImg ? arrowImg : IconArrow;
        let lineStyle = lineColor ? [styles.lineView,{backgroundColor: lineColor}]
                                : styles.lineView;
        return(
            <View style = {[styles.container,style]}>
            {
                isTop ?<View style = {lineStyle}/> : null
            }
                <TouchableOpacity 
                    activeOpacity = {activeOpacity? activeOpacity : 0.5}
                    style = {styles.rowView}
                    onPress = {() => {
                        if(onPress){
                            onPress();
                        }
                    }}
                >
                {
                    tagImage?
                    <Image style = {tagImageStyle? tagImageStyle :{height:20,width:20,marginLeft:15}} source = {tagImage}/>
                    : null
                }
                    <Text style = {[styles.tag,{fontSize:tagFontSize?tagFontSize : 14,color:tagColor? tagColor : '#252525'}]}>
                        {tag}
                    </Text>
                    <Text style = {styles.content} numberOfLines = {1}>
                        {content ? content : ''}
                    </Text>
                    {
                        showArrow ? 
                            <Image 
                                source = {arrow} 
                                resizeMode = 'contain' 
                                style = {arrowImgStyle? arrowImgStyle : styles.img}/>
                            : <View />

                    }
                </TouchableOpacity>
                <View style = {lineStyle}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        height:50,
        width:'100%',
        backgroundColor:'white',
    },
    rowView:{
        flex: 1,
        flexDirection:'row',
        alignItems:'center',
    },
    tag:{
        fontSize:14,
        color:'#252525',
        marginLeft:15,
    },
    content:{
        fontSize:14,
        color:'#252525',
        marginRight:15,
        marginLeft:15,
        flex:1,
        textAlign:'right',
    },
    img:{
        height:15,
        width:15,
        marginRight:15,
    },
    lineView:{
        height:1,
        width:'100%',
        backgroundColor:'#f0f0f0',
    }

});