schedule

aerain · Mar 19, 2019 · 0bb4b9d · 0bb4b9d
1 parent 34cc1f8
commit 0bb4b9d
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 30 deletions.
diff --git a/activity/css/haksaStyle.js b/activity/css/haksaStyle.js
@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { normalize } from 'react-native-elements';
+
+export default StyleSheet.create({
+    container: {
+        paddingHorizontal: 5,
+        paddingBottom: 16,
+        height: '100%',
+        backgroundColor: '#ffffff',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent:'flex-start',
+        alignItems: 'center'
+    },
+    listContainer: {
+        backgroundColor:'#ffffff'
+    },
+    onLoading: {
+        alignItems: 'center', paddingTop:20, flex:1, backgroundColor:'#ffffff'
+    },
+    calendarBlock: {
+        paddingVertical: 15,
+        marginHorizontal: '1%',
+        marginBottom: 20,
+        borderWidth: 0.5,
+        borderColor: '#e7e7e7',
+        borderRadius: 4,
+        justifyContent:'flex-start',
+        alignItems:'center',
+        flexDirection:'column',
+        flexGrow: 0,
+        flexShrink: 1,
+        flexBasis: '31.3%'
+    },
+    calendarMonth: {
+        fontSize: normalize(24),
+        fontWeight: 'bold'
+    }
+})
diff --git a/activity/drawer/schedule/Schedule.js b/activity/drawer/schedule/Schedule.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import { Text, View, ScrollView, StyleSheet, ActivityIndicator } from 'react-native';
+import { Text, View, ScrollView, StyleSheet, ActivityIndicator, FlatList, TouchableOpacity } from 'react-native';
 import { createStackNavigator } from 'react-navigation';
 import { ListItem, normalize } from 'react-native-elements';
-
+import haksaStyles from '../../css/haksaStyle'
 import { stackNavigationOptions } from '../../jedaeroCSS';
 
 import HaksaAPI from '../../JedaeroAPI/HaksaAPI';
@@ -29,46 +29,66 @@ class Schedule extends Component {
         });
     }
 
+    _renderItem = (item, index) => {
+        let isNextYear = parseInt(index / 12) ? true : false;
+        let month = index % 12 + 1;
+        return (
+            <TouchableOpacity 
+                key={index} 
+                style={haksaStyles.calendarBlock}
+                onPress={() => this.props.navigation.navigate('ScheduleDetail', item)}
+            >
+                <Text style={haksaStyles.calendarMonth}>{month}</Text>
+                <Text>월</Text>
+                {(isNextYear) ? (<Text>{new Date().getFullYear() + 1}</Text>) : null}
+            </TouchableOpacity>
+            // <ListItem 
+            //     key={item['month_title']}
+            //     title={item['month_title']}
+            //     containerStyle={haksaStyles.listContainer}
+            //     titleStyle={{textAlign:'center', fontSize: normalize(20)}}
+            //     chevron
+            //     onPress={() => this.props.navigation.navigate('ScheduleDetail', item)}
+            // />
+        )
+    }
     render() {
         return (!this.state.dataSource) 
         ? (
         <View style={haksaStyles.onLoading}>
             <ActivityIndicator size='large' color='#344955'/>
         </View>
         ) : (
-        <View style={{backgroundColor:'#ffffff', flex: 1}}>
-            <ScrollView contentContainerStyle={haksaStyles.container}>
-                {
-                    this.state.dataSource.month.map(item => (
-                        <ListItem 
-                            key={item['month_title']}
-                            title={item['month_title']}
-                            containerStyle={haksaStyles.listContainer}
-                            titleStyle={{textAlign:'center', fontSize: normalize(20)}}
-                            chevron
-                            onPress={() => this.props.navigation.navigate('ScheduleDetail', item)}
-                        />
-                    ))
-                }
+        <ScrollView contentContainerStyle={haksaStyles.container}>
+            {
+                this.state.dataSource.month.map(this._renderItem)
+                // this.state.dataSource.month.map(item => (
+                //     <ListItem 
+                //         key={item['month_title']}
+                //         title={item['month_title']}
+                //         containerStyle={haksaStyles.listContainer}
+                //         titleStyle={{textAlign:'center', fontSize: normalize(20)}}
+                //         chevron
+                //         onPress={() => this.props.navigation.navigate('ScheduleDetail', item)}
+                //     />
+                // ))
+            }
         </ScrollView>
-        </View>
-
-
         )
     }
 }
 
-let haksaStyles = StyleSheet.create({
-    container: {
-        paddingBottom: 56,
-    },
-    listContainer: {
-        backgroundColor:'#ffffff'
-    },
-    onLoading: {
-        alignItems: 'center', paddingTop:20, flex:1, backgroundColor:'#ffffff'
-    }
-})
+// let haksaStyles = StyleSheet.create({
+//     container: {
+//         paddingBottom: 56,
+//     },
+//     listContainer: {
+//         backgroundColor:'#ffffff'
+//     },
+//     onLoading: {
+//         alignItems: 'center', paddingTop:20, flex:1, backgroundColor:'#ffffff'
+//     }
+// })
 export default ScheduleStackNavigator = createStackNavigator({
     Schedule: {
         screen: Schedule,