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
|
import React, { Component } from 'react';
import {
TouchableOpacity,
StyleSheet,
Image,
View
} from 'react-native';
import ClearText from '../components/text'
const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
const isIpad = (navigator.userAgent.match(/iPad/i))
const isAndroid = (navigator.userAgent.match(/Android/i))
const isMobile = isIphone || isIpad || isAndroid
const isDesktop = ! isMobile
const imageHeight = isMobile ? 70 : 100
const imageWidth = isMobile ? 100 : 150
export default class TimelineEvent extends Component {
constructor() {
super()
}
render() {
const item = this.props.item
let image;
if (item.image && item.image.uri) {
const originalWidth = Number(item.image.width)
const originalHeight = Number(item.image.height)
let height = originalHeight > imageHeight ? imageHeight : originalHeight
let width = originalWidth * height / originalHeight
if (width > imageWidth) {
width = imageWidth
height = originalHeight * imageWidth / originalWidth
}
if (isNaN(width) || isNaN(height)) {
console.log(width, height, item.image.uri)
}
image = <img
src={item.image.uri}
style={{
width: width,
height: height,
}} />
} else {
image = <View></View>
}
return (
<TouchableOpacity style={styles.item} activeOpacity={0.8} onPress={() => this.props.onPress(this.props.item) }>
<div ref={(ref) => this.ref = ref} style={{flex: 0}}></div>
<View style={styles.item}>
<View style={styles.dateContainer}>
<ClearText style={styles.date}>{item.date}</ClearText>
</View>
<View style={styles.imageContainer}>{image}</View>
<View style={styles.titleContainer}>
<ClearText style={styles.title}>{item.title}</ClearText>
</View>
</View>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
item: {
flex: 1,
width: '80%',
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
padding: 10,
marginBottom: 10,
minHeight: 100,
},
dateContainer: {
width: '30%',
justifyContent: 'flex-start',
alignItems: 'center',
paddingRight: 10,
paddingLeft: 30,
},
imageContainer: {
width: '40%',
justifyContent: 'flex-start',
alignItems: 'center',
marginRight: 10,
},
titleContainer: {
width: '30%',
justifyContent: 'flex-start',
alignItems: 'center',
paddingLeft: 10,
},
title: {
textAlign: 'center',
fontWeight: 'bold',
},
date: {
textAlign: 'center',
},
})
|
