forked from osdio/noder-react-native
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathTopicRow.js
More file actions
113 lines (94 loc) · 1.91 KB
/
TopicRow.js
File metadata and controls
113 lines (94 loc) · 1.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import React, {
View,
StyleSheet,
Component,
Text,
Image,
TouchableHighlight,
Dimensions,
PropTypes
} from 'react-native';
import { parseImgUrl, strlen, substring } from '../utils';
const { width } = Dimensions.get('window');
class TopicRow extends Component {
static propTypes = {
topic: PropTypes.object,
footer: PropTypes.node,
onPress: PropTypes.func
};
static defaultProps = {
onPress: ()=>null
};
subStr(title) {
const titleLength = Math.floor((width - 100) / 15) * 2;
if (strlen(title) > titleLength) {
return substring(title, 0, titleLength - 3) + '...';
}
return title
}
render() {
const { topic } = this.props;
return (
<TouchableHighlight
onPress={()=>{this.props.onPress(topic)}}
underlayColor='#3498DB'
key={topic.id}>
<View style={ styles.row }>
<View style={styles.imgWrapper}>
<Image
ref={view => this.imgView=view}
style={styles.img}
source={{uri: parseImgUrl(topic.author.avatar_url) }}>
</Image>
</View>
<View style={[styles.topic]}>
<Text
ref={view => this.titleText=view}
style={[styles.title]}>
{ this.subStr(topic.title) }
</Text>
<View style={[styles.topicFooter]}>
{ this.props.footer }
</View>
</View>
</View>
</TouchableHighlight>
)
}
}
var styles = StyleSheet.create({
"row": {
"height": 90,
"flexDirection": "row",
"borderBottomColor": "rgba(0, 0, 0, 0.02)",
"borderBottomWidth": 1,
"paddingTop": 25,
"paddingRight": 0,
"paddingBottom": 25,
"paddingLeft": 20
},
"imgWrapper": {
"width": 90,
"position": "absolute",
"left": 20,
"top": 25,
"height": 65
},
"img": {
"height": 40,
"width": 40,
"borderRadius": 20
},
"topic": {
"marginLeft": 60,
width: width - 100
},
"title": {
"fontSize": 15
},
"topicFooter": {
"marginTop": 12,
"flexDirection": "row"
}
});
export default TopicRow;