Merge pull request #1 from ramanandapanda/dev

added multiline to text input added multiline and input required feature added maxLength to input
rp01 · Aug 21, 2018 · 237085d · 237085d
2 parents c41cffd + c7aa039
commit 237085d
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -33,8 +33,10 @@ import DialogInput from 'react-native-dialog-input';
  isDialogVisible       | Condition to show or hide the DialogInput   |   Boolean
  title                 | Title to show in the DialogInput            |   String (OPTIONAL)
  message               | Message to show in the DialogInput          |   String (OPTIONAL)
+ multiline             | To make DialogInput multiline          |   Boolean (OPTIONAL)
+ maxLength             | Limits the maximum number of characters that can be entered  in the DialogInput<br> default values: if multiline, 200 else 50       |   Number (OPTIONAL)
  hintInput             | Text hint to show in the TextInput          |   String (OPTIONAL)
- textInputProps        | Additional properties to add to the TextInput in the form:<BR> `textInputProps={{autoCorrect:false}}`  Currently supports:<BR>autoCorrect<BR>autoCapitalize<BR>clearButtonMode<BR>clearTextOnFocus <BR>keyboardType          |    Object (OPTIONAL)
+ textInputProps        | Additional properties to add to the TextInput in the form:<BR> `textInputProps={{autoCorrect:false}}`  Currently supports:<BR>autoCorrect<BR>autoCapitalize<BR>clearButtonMode<BR>clearTextOnFocus <BR>keyboardType <BR>required           |    Object (OPTIONAL)
 modalStyle   | Styles for the blocking view behind the DialogInput             |   Object (OPTIONAL)
 dialogStyle             | Styles for the DialogInput main view                        |   Object (OPTIONAL)
 cancelText             | Replacement text for the Cancel button      |   String (OPTIONAL)

diff --git a/index.js b/index.js
@@ -5,7 +5,7 @@ import { StyleSheet, Text, View, Modal, TextInput, TouchableOpacity,
 class DialogInput extends React.Component{
   constructor(props){
     super(props);
-    this.state = {inputModal:''}
+    this.state = {inputModal:'',submitDisabled:true}
   }
   render(){
     let title = this.props.title || '';
@@ -16,6 +16,7 @@ class DialogInput extends React.Component{
     let dialogStyleProps = this.props.dialogStyle || {};
     var cancelText = this.props.cancelText || 'Cancel';
     var submitText = this.props.submitText || 'Submit';
+    var isInputRequired = (textProps && textProps.required )|| false;
     cancelText = (Platform.OS === 'ios')? cancelText:cancelText.toUpperCase();
     submitText = (Platform.OS === 'ios')? submitText:submitText.toUpperCase();
 
@@ -33,14 +34,25 @@ class DialogInput extends React.Component{
               <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) => this.setState({inputModal})}
+                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}>
@@ -51,11 +63,11 @@ class DialogInput extends React.Component{
                 <Text style={styles.btn_modal_left}>{cancelText}</Text>
               </TouchableOpacity>
 	            <View style={styles.divider_btn}></View>
-              <TouchableOpacity  style={styles.touch_modal}
+              <TouchableOpacity disabled={this.state.submitDisabled && isInputRequired} style={styles.touch_modal}
                 onPress={() => {
                   this.props.submitInput(this.state.inputModal);
                 }}>
-                <Text style={styles.btn_modal_right}>{submitText}</Text>
+                <Text style={this.state.submitDisabled && isInputRequired ?styles.btn_modal_right_disabled:styles.btn_modal_right}>{submitText}</Text>
               </TouchableOpacity>
             </View>
           </View>
@@ -214,6 +226,23 @@ const styles = StyleSheet.create({
       },
     }),
   },
+
+  btn_modal_right_disabled:{
+    fontWeight: 'bold',
+    ...Platform.select({
+      ios: {
+        fontSize:18,
+        color:'rgba(0,0,0,0.44)',
+        textAlign:'center',
+        padding: 10,
+      },
+      android: {
+        textAlign:'right',
+        color:'rgba(0,0,0,0.44)',
+        padding: 8
+      },
+    }),
+  },
   btn_modal_right:{
     fontWeight: 'bold',
     ...Platform.select({