edit menu screen

Author: Inbal-Tish

example/src/screens/menu.tsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Platform, StyleSheet, View, ScrollView, TouchableOpacity, Text, Image} from 'react-native';
+import {Platform, StyleSheet, View, ScrollView, TouchableOpacity, Text, Image, I18nManager} from 'react-native';
 import {Navigation} from 'react-native-navigation';
 import testIDs from '../testIDs';
 
@@ -11,52 +11,30 @@ interface Props {
 }
 
 export default class MenuScreen extends Component<Props> {
+  renderEntry(testID: string, title: string, screen: string, options?: any) {
+    return (
+      <TouchableOpacity
+        testID={testID}
+        style={styles.menu}
+        onPress={() => this.openScreen(screen, options)}
+      >
+        <Text style={styles.menuText}>{title}</Text>
+      </TouchableOpacity>
+    );
+  }
+
   render() {
     return (
       <ScrollView>
         <View style={styles.container} testID={testIDs.menu.CONTAINER}>
-          <Image source={appIcon} style={styles.image} />
-          <TouchableOpacity
-            testID={testIDs.menu.CALENDARS}
-            style={styles.menu}
-            onPress={this.onCalendarsPress.bind(this)}
-          >
-            <Text style={styles.menuText}>Calendars</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            testID={testIDs.menu.CALENDAR_LIST}
-            style={styles.menu}
-            onPress={this.onCalendarListPress.bind(this)}
-          >
-            <Text style={styles.menuText}>Calendar List</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            testID={testIDs.menu.HORIZONTAL_LIST}
-            style={styles.menu}
-            onPress={this.onHorizontalCalendarListPress.bind(this)}
-          >
-            <Text style={styles.menuText}>Horizontal Calendar List</Text>
-          </TouchableOpacity>
-          <TouchableOpacity testID={testIDs.menu.AGENDA} style={styles.menu} onPress={this.onAgendaPress.bind(this)}>
-            <Text style={styles.menuText}>Agenda</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            testID={testIDs.menu.EXPANDABLE_CALENDAR}
-            style={styles.menu}
-            onPress={this.onExpandablePress.bind(this)}
-          >
-            <Text style={styles.menuText}>Expandable Calendar</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.menu} onPress={this.onTimelinePress.bind(this)}>
-            <Text style={styles.menuText}>Timeline Calendar</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            testID={testIDs.menu.WEEK_CALENDAR}
-            style={styles.menu}
-            onPress={this.onWeekPress.bind(this)}
-          >
-            <Text style={styles.menuText}>Week Calendar</Text>
-          </TouchableOpacity>
+          <Image source={appIcon} style={styles.image}/>
+          {this.renderEntry(testIDs.menu.CALENDARS, 'Calendars', 'Calendars')}
+          {this.renderEntry(testIDs.menu.CALENDAR_LIST, 'Calendar List', 'CalendarsList')}
+          {this.renderEntry(testIDs.menu.HORIZONTAL_LIST, 'Horizontal Calendar List', 'HorizontalCalendarList')}
+          {this.renderEntry(testIDs.menu.AGENDA, 'Agenda', 'Agenda')}
+          {this.renderEntry(testIDs.menu.EXPANDABLE_CALENDAR, 'Expandable Calendar', 'ExpandableCalendar')}
+          {this.renderEntry(testIDs.menu.TIMELINE_CALENDAR, 'Timeline Calendar', 'TimelineCalendar')}
+          {this.renderEntry(testIDs.menu.WEEK_CALENDAR, 'Week Calendar', 'ExpandableCalendar', {weekView: true})}
         </View>
       </ScrollView>
     );
@@ -83,32 +61,8 @@ export default class MenuScreen extends Component<Props> {
     });
   }
 
-  onCalendarsPress() {
-    this.pushScreen('Calendars');
-  }
-
-  onCalendarListPress() {
-    this.pushScreen('CalendarsList');
-  }
-
-  onHorizontalCalendarListPress() {
-    this.pushScreen('HorizontalCalendarList');
-  }
-
-  onAgendaPress() {
-    this.pushScreen('Agenda');
-  }
-
-  onExpandablePress() {
-    this.pushScreen('ExpandableCalendar');
-  }
-
-  onTimelinePress() {
-    this.pushScreen('TimelineCalendar');
-  }
-
-  onWeekPress() {
-    this.pushScreen('ExpandableCalendar', {weekView: true});
+  openScreen = (screen: string, options: any) => {
+    this.pushScreen(screen, options);
   }
 }
 

example/src/testIDs.ts

@@ -6,7 +6,8 @@ export default {
     HORIZONTAL_LIST: 'horizontal_list_btn',
     AGENDA: 'agenda_btn',
     EXPANDABLE_CALENDAR: 'expandable_calendar_btn',
-    WEEK_CALENDAR: 'week_calendar_btn'
+    WEEK_CALENDAR: 'week_calendar_btn',
+    TIMELINE_CALENDAR: 'timeline_calendar_btn'
   },
   calendars: {
     CONTAINER: 'calendars',