1 files changed, 102 insertions, 0 deletions
diff --git a/client/src/lib/timeline/timelineEvent.js b/client/src/lib/timeline/timelineEvent.js
new file mode 100644
index 0000000..903ceed
--- /dev/null
+++ b/client/src/lib/timeline/timelineEvent.js
@@ -0,0 +1,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',
+  },
+})