Add schedule items component.

src/components/schedule-item.js

@@ -1,17 +1,17 @@
 /* @flow */
 /*eslint-disable prefer-const */
 
-import React from "react-native";
+import React from "react";
 
 import TalkDetail from "./talk-detail";
 
-let {
+import {
   Image,
   Text,
   View,
   StyleSheet,
   TouchableHighlight
-} = React;
+} from 'react-native';
 
 const styles = StyleSheet.create({
   item: {
@@ -23,8 +23,9 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    padding: 10,
-    backgroundColor: "#efefef"
+    padding: 8,
+    marginTop: 30,
+    backgroundColor: "#efefef",
   },
   content: {
     backgroundColor: "white",
@@ -101,27 +102,42 @@ const styles = StyleSheet.create({
 
 class ScheduleItem extends React.Component {
   _goToItem(item) {
-    this.props.navigator.push({
-      component: TalkDetail,
-      title: item.title.length > 25 ? item.title.substr(0,25) +"..." : item.title,
-      passProps: {...item}
-    });
+    this.props.onSelect(item);
+  }
+
+  getHeader(categoryId) {
+    const texts = [
+      (
+        <Text
+          style={styles.time}
+          key="time"
+        >
+          {this.props.time}
+        </Text>
+      ),
+      (
+        <Text
+          style={[styles.category,categoryId ? styles[categoryId] : {}]}
+          key="header"
+        >
+          {this.props.category}
+        </Text>
+      )
+    ];
+
+    return (
+      <View style={styles.header}>
+        {this.props.noHeader === true? null : texts }
+      </View>
+    );
   }
+
   render() {
     const categoryId = this.props.category ?
       this.props.category.replace(/\s/g, "") : null;
     return (
       <View style={[styles.item, this.props.style]}>
-        <View style={styles.header}>
-          <Text
-            style={styles.time}>
-            {this.props.time}
-          </Text>
-          <Text
-            style={[styles.category,categoryId ? styles[categoryId] : {}]}>
-            {this.props.category}
-          </Text>
-        </View>
+        {this.getHeader(categoryId)}
         {this.props.talk ?
           <TouchableHighlight
               onPress={this._goToItem.bind(this, this.props)}>
@@ -172,4 +188,4 @@ ScheduleItem.propTypes = {
   title: React.PropTypes.string
 };
 
-export default ScheduleItem;
+export default ScheduleItem;

src/components/schedule-list.js

@@ -1,16 +1,15 @@
 /* @flow */
 /*eslint-disable prefer-const */
 
-import React from "react-native";
-
-import ScheduleItem from "./schedule-item";
-
-let {
+import React from "react";
+import {
   Text,
   View,
   ScrollView,
   TouchableHighlight
-} = React;
+} from 'react-native';
+
+import ScheduleItem from "./schedule-item";
 
 class ScheduleList extends React.Component {
   render() {
@@ -50,4 +49,4 @@ ScheduleList.defaultProps = {
   speakers: []
 };
 
-export default ScheduleList;
+export default ScheduleList;

src/components/stories/index.js

@@ -1,2 +1,3 @@
 import './speaker';
 import './tweet';
+import './schedule-item';

src/components/stories/schedule-item.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { storiesOf, action } from '@kadira/react-native-storybook';
+import ScheduleItem from "../schedule-item";
+import data from '../../data';
+
+const stories = storiesOf('ScheduleItem');
+stories.addDecorator((fn) => (
+  <ScrollView
+    style={{flex: 1}}
+    contentContainerStyle={{
+      justifyContent: "center",
+      alignItems: "stretch",
+      flexDirection: "column"
+    }}
+  >
+    {fn()}
+  </ScrollView>
+));
+
+const talkData = {
+  "category" : "Data Flow",
+  "company" : "VacuumLabs",
+  "speaker" : "Daniel Steigerwald",
+  "photo" : "https://reactive2015.com/assets/img/team/daniel_steigerwald.jpg",
+  "summary" : "As programs get bigger, they also become more complex and harder to understand. We all think ourselves pretty clever, of course, but we are mere human beings, and even a moderate amount of chaos tends to baffle us. And then it all goes downhill. Working on something you do not really understand is a bit like cutting random wires on those time-activated bombs they always have in movies. If you are lucky, you might get the right one ― especially if you are the hero of the movie and strike a suitably dramatic pose ― but there is always the possibility of blowing everything up.",
+  "talk" : true,
+  "time" : "11:15–11:45",
+  "title" : "Functional Programming in JavaScript. What, why, and how.",
+};
+
+stories.add('default view', () => {
+  const props = {
+    ...talkData,
+    onSelect: action('onSelect'),
+  };
+
+  return (
+    <ScheduleItem {...props}/>
+  );
+});
+
+stories.add('no header', () => {
+  const props = {
+    ...talkData,
+    onSelect: action('onSelect'),
+    noHeader: true,
+  };
+
+  return (
+    <ScheduleItem {...props}/>
+  );
+});

src/components/talk-detail.js

@@ -1,15 +1,15 @@
 /* @flow */
 /*eslint-disable prefer-const */
 
-import React from "react-native";
+import React from "react";
 
-let {
+import {
   Image,
   Text,
   View,
   ScrollView,
   StyleSheet
-} = React;
+} from 'react-native';
 
 const styles = StyleSheet.create({
   title: {
@@ -105,4 +105,4 @@ TalkDetail.propTypes = {
   title: React.PropTypes.string
 };
 
-export default TalkDetail;
+export default TalkDetail;