From 6f236555ddeaa478f91f7742aa652194246a7a6a Mon Sep 17 00:00:00 2001
From: Ramananda Panda <rampanda@us.ibm.com>
Date: Fri, 24 Aug 2018 15:49:20 +0530
Subject: [PATCH 1/3] fixed offfocus out hide keyboard

---
 index.js | 88 +++++++++++++++++++++++++++++---------------------------
 1 file changed, 45 insertions(+), 43 deletions(-)

diff --git a/index.js b/index.js
index 0001eea..b5518e7 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,5 @@
 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{
@@ -28,50 +28,52 @@ class DialogInput extends React.Component{
       	onRequestClose={() => {
       	  this.props.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) =>{
+                    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>
+              </View>
             </View>
           </View>
-        </View>
+        </TouchableWithoutFeedback>        
       </Modal>
     );
   }

From e5c5c0eae044aa7c2437f61d1864513bf0549818 Mon Sep 17 00:00:00 2001
From: Ramananda Panda <rampanda@us.ibm.com>
Date: Fri, 24 Aug 2018 15:50:10 +0530
Subject: [PATCH 2/3] some visual fixes

---
 index.js | 91 +++++++++++++++++++++++++++++---------------------------
 1 file changed, 47 insertions(+), 44 deletions(-)

diff --git a/index.js b/index.js
index b5518e7..b805e64 100644
--- a/index.js
+++ b/index.js
@@ -29,50 +29,50 @@ class DialogInput extends React.Component{
       	  this.props.closeDialog();
       	}}>
         <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) =>{
-                    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>
-              </View>
+        <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>
             </View>
           </View>
+        </View>
         </TouchableWithoutFeedback>        
       </Modal>
     );
@@ -87,6 +87,9 @@ const styles = StyleSheet.create({
     ...Platform.select({
       android:{
         backgroundColor: 'rgba(0,0,0,0.62)'
+      },
+      ios:{
+        backgroundColor: 'rgba(0,0,0,0.52)'
       }
     }),
   },
@@ -95,7 +98,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,
       },
@@ -133,7 +136,7 @@ const styles = StyleSheet.create({
     }),
   },
   message_modal:{
-    fontSize: 16,
+    fontSize: 14,
     ...Platform.select({
       ios: {
         textAlign:'center',

From 6e33fd85573c728806992b457acf151451a6440b Mon Sep 17 00:00:00 2001
From: Ramananda Panda <rampanda@us.ibm.com>
Date: Fri, 24 Aug 2018 16:25:05 +0530
Subject: [PATCH 3/3] reseting state on closeDialog

---
 index.js | 94 ++++++++++++++++++++++++++++++--------------------------
 1 file changed, 51 insertions(+), 43 deletions(-)

diff --git a/index.js b/index.js
index b805e64..6d87150 100644
--- a/index.js
+++ b/index.js
@@ -6,6 +6,12 @@ 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,6 +25,7 @@ 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
@@ -26,53 +33,54 @@ class DialogInput extends React.Component{
         transparent={true}
         visible={this.props.isDialogVisible}
       	onRequestClose={() => {
-      	  this.props.closeDialog();
+      	  this.closeDialog();
       	}}>
         <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) =>{
-                  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>
+          <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>
     );