merge

1 files changed, 164 insertions, 0 deletions

diff --git a/client/src/lib/timeline/index.js b/client/src/lib/timeline/index.js
new file mode 100644
index 0000000..3fde6df
--- /dev/null
+++ b/client/src/lib/timeline/index.js
@@ -0,0 +1,164 @@
+import React, { Component } from 'react';
+import {
+  FlatList,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ScrollView,
+} from 'react-native';
+
+import ScrollableContainer from '../components/scrollableContainer'
+import Modal from '../components/modal'
+import Container from '../components/container'
+import ClearText from '../components/text'
+import TimelineEvent from './timelineEvent'
+import TimelineFull from './timelineFull'
+import TimelineHeader from './timelineHeader'
+import TimelineFilter from './timelineFilter'
+import TickMarks from './tickMarks'
+
+export default class Timeline extends Component {
+  constructor(props) {
+    super()
+    this.state = {
+      events: props.events,
+      tag: props.tag,
+      introVisible: props.firstTime,
+      modalVisible: false,
+      filterVisible: false,
+      item: null,
+
+      introVisible: false,
+//       modalVisible: true,
+//       item: props.events[2],
+    }
+    this.onPress = this.onPress.bind(this)
+    this.onFilter = this.onFilter.bind(this)
+    this.scrollToIndex = this.scrollToIndex.bind(this)
+    this.items = []
+  }
+  onPress(item) {
+    this.setState({
+      modalVisible: true,
+      item: item,
+    })
+  }
+  onFilter(tag) {
+    let events;
+    if (!! tag && tag !== this.state.tag) {
+      events = this.props.events.filter((e) => e && e.keywords.includes(tag))
+    }
+    else {
+      events = this.props.events
+    }
+    this.setState({ events, tag, modalVisible: false, filterVisible: false })
+  }
+  scrollToIndex(index) {
+    // this.flatList._listRef.scrollToIndex(index)
+    // this.scrollable.scrollToIndex({index: index})
+    const offset = this.items[index].ref.parentNode.offsetTop
+    this.scrollable.scrollView.scrollTo({
+      y: offset,
+      x: 0,
+      animated: true,
+    })
+  }
+  render() {
+    const heading = this.state.tag || 'History of Surveillance'
+    const items = this.state.events.map((item, i) => (
+      <TimelineEvent ref={(ref) => this.items[i] = ref} key={item.id} onPress={this.onPress} item={item} />
+    ))
+
+    return (
+      <View>
+        <ScrollableContainer ref={(ref) => this.scrollable = ref} heading={heading} headingOnPress={() => this.onFilter("")}>
+          {items}
+        </ScrollableContainer>
+        <TickMarks events={this.state.events} scrollToIndex={this.scrollToIndex} />
+        <Modal isVisible={this.state.introVisible} style={[styles.modal, styles.headerModal]}>
+          <TimelineHeader
+            content={this.props.content}
+            onLinkPress={this.props.onLinkPress}
+            onClose={() => this.setState({ introVisible: false })}
+          />
+        </Modal>
+        <Modal isVisible={this.state.modalVisible} style={styles.modal}>
+          <TimelineFull
+            item={this.state.item}
+            onLinkPress={this.props.onLinkPress}
+            onFilter={this.onFilter}
+            onClose={() => this.setState({ modalVisible: false })}
+          />
+        </Modal>
+      </View>
+    )
+  }
+}
+
+
+
+//         <View style={styles.body}>
+//           <View style={styles.sidebar}>
+//             <TouchableOpacity onPress={() => this.setState({ filterVisible: true })}>
+//               <ClearText style={[styles.filterText, !! this.state.tag ? styles.filterActive : styles.filterInactive ]}>
+//                 { !! this.state.tag ? 'FILTER' : '' }
+//               </ClearText>
+//             </TouchableOpacity>
+//           </View>
+//         </View>
+
+//         <Modal isVisible={this.state.filterVisible} style={styles.modal}>
+//           <TimelineFilter
+//             events={this.props.events}
+//             tag={this.state.tag}
+//             onFilter={this.onFilter}
+//             onClose={() => this.setState({ filterVisible: false })}
+//           />
+//         </Modal>
+
+const styles = StyleSheet.create({
+  wrapper: {
+  },
+  modal: {
+    margin: 0,
+    padding: 0,
+  },
+  headerModal: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    backgroundColor: 'rgb(0,0,0)',
+    margin: 0,
+    padding: 0,
+  },
+  body: {
+    flexDirection: 'row',
+    height: 840,
+  },
+  flatList: {
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  sidebar: {
+    flex: 0,
+  },
+  filterText: {
+    color: '#bbb',
+    textAlign: 'left',
+    fontSize: 12,
+    marginLeft: 4,
+  },
+  filterActive: {
+    color: '#fff',
+    textDecorationLine: 'underline',
+  },
+  filterInactive: {
+    color: '#bbb',
+  },
+  tickMarks: {
+    flex: 0,
+  },
+})