From 6583ce21aa4362a6daae154cbe30b45c2acd7f10 Mon Sep 17 00:00:00 2001
From: Roman Fomin <rnf@Romans-MacBook.local>
Date: Sat, 7 Oct 2017 00:36:21 +0300
Subject: [PATCH] added cancel button at the bottom

---
 Calendar.js      | 33 ++++++++++++++++++++++++---------
 CalendarStyle.js |  7 ++++---
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/Calendar.js b/Calendar.js
index 8eff679..12d1937 100644
--- a/Calendar.js
+++ b/Calendar.js
@@ -43,7 +43,8 @@ export default class Calendar extends Component {
         'end': '结 束',
         'date': '日 期',
         'save': '保 存',
-        'clear': '清除'
+        'clear': '清除',
+        'cancel':'取消'
       },
       'date': 'M月D日'
     },
@@ -55,7 +56,8 @@ export default class Calendar extends Component {
         'end': 'End',
         'date': 'Date',
         'save': 'Save',
-        'clear': 'Reset'
+        'clear': 'Reset',
+        'cancel': 'Cancel'
       },
       'date': 'DD / MM'
     },
@@ -67,7 +69,8 @@ export default class Calendar extends Component {
         'end': 'エンド',
         'date': '時　間',
         'save': '確　認',
-        'clear': 'クリア'
+        'clear': 'クリア',
+        'cancel':'キャンセル'
       },
       'date': 'M月D日'
     }
@@ -293,26 +296,38 @@ export default class Calendar extends Component {
             {isValid ?
               <TouchableHighlight
                 underlayColor="rgba(255, 255, 255, 0.45)"
-                style={styles.confirmContainer}
+                style={styles.buttonContainer}
                 onPress={this.confirm}>
-                <View style={styles.confirmBtn}>
+                <View style={styles.buttonTextContainer}>
                   <Text
                     ellipsisMode="tail" numberOfLines={1}
-                    style={[styles.confirmText, subFontColor]}>
+                    style={[styles.buttonText, subFontColor]}>
                     {this._i18n('save', 'text')}
                   </Text>
                 </View>
               </TouchableHighlight> :
-              <View style={[styles.confirmContainer, styles.confirmContainerDisabled]}>
-                <View style={styles.confirmBtn}>
+              <View style={[styles.buttonContainer, styles.confirmContainerDisabled]}>
+                <View style={styles.buttonTextContainer}>
                   <Text
                     ellipsisMode="tail" numberOfLines={1}
-                    style={[styles.confirmText, styles.confirmTextDisabled]}>
+                    style={[styles.buttonText, styles.confirmTextDisabled]}>
                     {this._i18n('save', 'text')}
                   </Text>
                 </View>
               </View>
             }
+            <TouchableHighlight
+                underlayColor="rgba(255, 255, 255, 0.45)"
+                style={styles.buttonContainer}
+                onPress={this.cancel}>
+                <View style={styles.buttonTextContainer}>
+                  <Text
+                    ellipsisMode="tail" numberOfLines={1}
+                    style={[styles.buttonText, subFontColor]}>
+                    {this._i18n('cancel', 'text')}
+                  </Text>
+                </View>
+              </TouchableHighlight>
           </View>
         </View>
       </Modal>
diff --git a/CalendarStyle.js b/CalendarStyle.js
index acba202..5f52df7 100644
--- a/CalendarStyle.js
+++ b/CalendarStyle.js
@@ -81,9 +81,10 @@ export default StyleSheet.create({
   btn: {
     flex: 1.5,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    flexDirection:'row'
   },
-  confirmContainer: {
+  buttonContainer: {
     overflow: 'hidden',
     backgroundColor: 'rgba(255, 255, 255, 0.40)',
     borderRadius: 4,
@@ -95,7 +96,7 @@ export default StyleSheet.create({
   confirmContainerDisabled: {
     backgroundColor: 'rgba(255, 255, 255, 0.20)'
   },
-  confirmText: {
+  buttonText: {
     fontSize: 16,
     fontWeight: 'bold',
     textAlign: 'center'