91 lines
2.4 KiB
JavaScript
Executable File
91 lines
2.4 KiB
JavaScript
Executable File
import React from 'react'
|
|
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
|
|
import {Icon} from 'react-native-elements'
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
marginBottom: 25,
|
|
marginTop: 25,
|
|
},
|
|
iconRow: {
|
|
flex: 2,
|
|
justifyContent: 'center',
|
|
},
|
|
smsIcon: {
|
|
color: 'gray',
|
|
fontSize: 30,
|
|
},
|
|
smsRow: {
|
|
flex: 2,
|
|
justifyContent: 'flex-start',
|
|
},
|
|
telIcon: {
|
|
color: '#CC6666',
|
|
fontSize: 30,
|
|
},
|
|
telNameColumn: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
},
|
|
telNameText: {
|
|
color: 'gray',
|
|
fontSize: 14,
|
|
fontWeight: '200',
|
|
},
|
|
telNumberColumn: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
marginBottom: 5,
|
|
},
|
|
telNumberText: {
|
|
fontSize: 16,
|
|
},
|
|
telRow: {
|
|
flex: 6,
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
},
|
|
})
|
|
|
|
const Tel = ({
|
|
containerStyle,
|
|
name,
|
|
number,
|
|
onPressSms,
|
|
onPressTel,
|
|
}) => {
|
|
return (
|
|
<TouchableOpacity onPress={() => onPressTel(number)}>
|
|
<View style={[styles.container, containerStyle]}>
|
|
<View style={styles.iconRow}>
|
|
<Icon
|
|
name="call"
|
|
underlayColor="transparent"
|
|
iconStyle={styles.telIcon}
|
|
onPress={() => onPressTel(number)}
|
|
/>
|
|
</View>
|
|
<View style={styles.telRow}>
|
|
<View style={styles.telNumberColumn}>
|
|
<Text style={styles.telNumberText}>{number}</Text>
|
|
</View>
|
|
|
|
</View>
|
|
<View style={styles.smsRow}>
|
|
<Icon
|
|
name="textsms"
|
|
underlayColor="transparent"
|
|
iconStyle={styles.smsIcon}
|
|
onPress={() => onPressSms(number)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
)
|
|
};
|
|
|
|
|
|
export default Tel |