diff --git a/README.md b/README.md index 1c42e18..60f5f02 100644 --- 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
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:
`textInputProps={{autoCorrect:false}}` Currently supports:
autoCorrect
autoCapitalize
clearButtonMode
clearTextOnFocus
keyboardType | Object (OPTIONAL) + textInputProps | Additional properties to add to the TextInput in the form:
`textInputProps={{autoCorrect:false}}` Currently supports:
autoCorrect
autoCapitalize
clearButtonMode
clearTextOnFocus
keyboardType
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 index cef9738..72996bd 100644 --- 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,6 +34,8 @@ class DialogInput extends React.Component{ {title} {this.props.message} 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}); + } + }} /> @@ -51,11 +63,11 @@ class DialogInput extends React.Component{ {cancelText} - { this.props.submitInput(this.state.inputModal); }}> - {submitText} + {submitText} @@ -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({