reseting state on closeDialog

rp01 · Aug 24, 2018 · 6e33fd8 · 6e33fd8
1 parent e5c5c0e
commit 6e33fd8
Showing 1 changed file with 51 additions and 43 deletions.
diff --git 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,60 +25,62 @@ 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();
       	}}>
         <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>
     );