Merge pull request #3 from ramanandapanda/dev

fixed some more bugs and visual changes
rp01 · Aug 24, 2018 · 5696fb8 · 5696fb8
2 parents 061532e + 6e33fd8
commit 5696fb8
Showing 1 changed file with 59 additions and 46 deletions.
diff --git a/index.js b/index.js
@@ -1,11 +1,17 @@
 import React from 'react';
-import { StyleSheet, Text, View, Modal, TextInput, TouchableOpacity,
+import { StyleSheet, Text, View, Modal, TextInput, TouchableOpacity,TouchableWithoutFeedback,Keyboard,
           ActivityIndicator, Platform } from 'react-native';
 
 class DialogInput extends React.Component{
   constructor(props){
     super(props);
     this.state = {inputModal:'',submitDisabled:true}
+    this.baseState = this.state;
+  }
+  closeDialog(){
+    this.setState(this.baseState,()=>{
+      this.props.closeDialog();
+    })
   }
   render(){
     let title = this.props.title || '';
@@ -19,59 +25,63 @@ class DialogInput extends React.Component{
     var isInputRequired = (textProps && textProps.required )|| false;
     cancelText = (Platform.OS === 'ios')? cancelText:cancelText.toUpperCase();
     submitText = (Platform.OS === 'ios')? submitText:submitText.toUpperCase();
+
 
     return(
       <Modal
         animationType="fade"
         transparent={true}
         visible={this.props.isDialogVisible}
       	onRequestClose={() => {
-      	  this.props.closeDialog();
+      	  this.closeDialog();
       	}}>
-        <View style={[styles.container, {...modalStyleProps}]}>
-          <View style={[styles.modal_container, {...dialogStyleProps}]}>
-            <View style={styles.modal_body}>
-              <Text style={styles.title_modal}>{title}</Text>
-              <Text style={[this.props.message ? styles.message_modal : {height:0} ]}>{this.props.message}</Text>
-              <TextInput style={styles.input_container}
-                multiline={(textProps && textProps.multiline)?true:false}
-                maxLength = {(textProps && textProps.maxLength) ? textProps.maxLength : (textProps.multiline ? 200 : 50)}
-                autoCorrect={(textProps && textProps.autoCorrect==false)?false:true}
-                autoCapitalize={(textProps && textProps.autoCapitalize)?textProps.autoCapitalize:'none'}
-                clearButtonMode={(textProps && textProps.clearButtonMode)?textProps.clearButtonMode:'never'}
-                clearTextOnFocus={(textProps && textProps.clearTextOnFocus==true)?textProps.clearTextOnFocus:false}
-                keyboardType={(textProps && textProps.keyboardType)?textProps.keyboardType:'default'}
-                underlineColorAndroid='transparent'
-                placeholder={hintInput}
-                onChangeText={(inputModal) =>{
-                  if(inputModal.trim()){
-                    this.setState({inputModal:inputModal,submitDisabled:false})
-                  }else{
-                    if(isInputRequired)
-                    this.setState({inputModal:inputModal,submitDisabled:true})
-                    else
-                    this.setState({inputModal});
-                  }
-                }}
-                />
-            </View>
-            <View style={styles.btn_container}>
-              <TouchableOpacity style={styles.touch_modal}
-                onPress={() => {
-                  this.props.closeDialog();
-                }}>
-                <Text style={styles.btn_modal_left}>{cancelText}</Text>
-              </TouchableOpacity>
-	            <View style={styles.divider_btn}></View>
-              <TouchableOpacity disabled={this.state.submitDisabled && isInputRequired} style={styles.touch_modal}
-                onPress={() => {
-                  this.props.submitInput(this.state.inputModal);
-                }}>
-                <Text style={this.state.submitDisabled && isInputRequired ?styles.btn_modal_right_disabled:styles.btn_modal_right}>{submitText}</Text>
-              </TouchableOpacity>
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <View style={[styles.container, {...modalStyleProps}]}>
+            <View style={[styles.modal_container, {...dialogStyleProps}]}>
+              <View style={styles.modal_body}>
+                <Text style={styles.title_modal}>{title}</Text>
+                <Text style={[this.props.message ? styles.message_modal : {height:0} ]}>{this.props.message}</Text>
+                <TextInput style={styles.input_container}
+                  multiline={(textProps && textProps.multiline)?true:false}
+                  maxLength = {(textProps && textProps.maxLength) ? textProps.maxLength : (textProps.multiline ? 200 : 50)}
+                  autoCorrect={(textProps && textProps.autoCorrect==false)?false:true}
+                  autoCapitalize={(textProps && textProps.autoCapitalize)?textProps.autoCapitalize:'none'}
+                  clearButtonMode={(textProps && textProps.clearButtonMode)?textProps.clearButtonMode:'never'}
+                  clearTextOnFocus={(textProps && textProps.clearTextOnFocus==true)?textProps.clearTextOnFocus:false}
+                  keyboardType={(textProps && textProps.keyboardType)?textProps.keyboardType:'default'}
+                  underlineColorAndroid='transparent'
+                  placeholder={hintInput}
+                  onChangeText={(inputModal) =>{
+                    let trimmedInput = inputModal.trim();
+                    if(trimmedInput){
+                      this.setState({inputModal:trimmedInput,submitDisabled:false})
+                    }else{
+                      if(isInputRequired)
+                        this.setState({inputModal:trimmedInput,submitDisabled:true})
+                      else
+                        this.setState({inputModal});
+                    }
+                  }}
+                  />
+              </View>
+              <View style={styles.btn_container}>
+                <TouchableOpacity style={styles.touch_modal}
+                  onPress={() => {
+                    this.closeDialog();
+                  }}>
+                  <Text style={styles.btn_modal_left}>{cancelText}</Text>
+                </TouchableOpacity>
+                <View style={styles.divider_btn}></View>
+                <TouchableOpacity disabled={this.state.submitDisabled && isInputRequired} style={styles.touch_modal}
+                  onPress={() => {
+                    this.props.submitInput(this.state.inputModal);
+                  }}>
+                  <Text style={this.state.submitDisabled && isInputRequired ?styles.btn_modal_right_disabled:styles.btn_modal_right}>{submitText}</Text>
+                </TouchableOpacity>
+              </View>
             </View>
           </View>
-        </View>
+        </TouchableWithoutFeedback>        
       </Modal>
     );
   }
@@ -85,6 +95,9 @@ const styles = StyleSheet.create({
     ...Platform.select({
       android:{
         backgroundColor: 'rgba(0,0,0,0.62)'
+      },
+      ios:{
+        backgroundColor: 'rgba(0,0,0,0.52)'
       }
     }),
   },
@@ -93,7 +106,7 @@ const styles = StyleSheet.create({
     marginRight: 30,
     ...Platform.select({
       ios: {
-        backgroundColor:'rgba(220,220,220, 0.9)',
+        backgroundColor:'rgba(220,220,220, 0.98)',
         borderRadius: 10,
         minWidth: 300,
       },
@@ -131,7 +144,7 @@ const styles = StyleSheet.create({
     }),
   },
   message_modal:{
-    fontSize: 16,
+    fontSize: 14,
     ...Platform.select({
       ios: {
         textAlign:'center',