Allow dev to modify the return key type for each field and the submit…

… action

This will allow you to have a name and billing zip code field present on the page and on submit from the name field go to the zip code field for a better user experience. Currently, the form blurs and you have to click the billing zip code.

minor fix

Allow the developer to pass down additional input props

This should probably change more of the code than the above.

Generalizing so the developer can pass whatever to the inputs

in the form of:
```javascript
additionalInputProps = {
  name: { returnKeyType: 'next' },
};
```

Same thing on the lite inputs

clean up lint error

fix linting errors

clearning up prop names

Update Readme for the additionalInputsProps

fixing typo

fixing propTypes

readme.md

@@ -89,6 +89,7 @@ _onChange => form => console.log(form);
 |validColor | PropTypes.string | Color that will be applied for valid text input. Defaults to: "{inputStyle.color}" |
 |invalidColor | PropTypes.string | Color that will be applied for invalid text input. Defaults to: "red" |
 |placeholderColor | PropTypes.string | Color that will be applied for text input placeholder. Defaults to: "gray" |
+| additionalInputsProps | PropTypes.objectOf(TextInput.propTypes) | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in [RN TextInput](https://facebook.github.io/react-native/docs/textinput.html).
 
 #### NOTES
 LiteCreditCardInput does not support `requiresName`, `requiresCVC`, and `requiresPostalCode` at the moment, PRs are welcome :party:
@@ -118,6 +119,7 @@ LiteCreditCardInput does not support `requiresName`, `requiresCVC`, and `require
 |validatePostalCode | PropTypes.func | Function to validate postalCode, expects `incomplete`, `valid`, or `invalid` as return values|
 |allowScroll | PropTypes.bool | enables horizontal scrolling on CreditCardInput <br/> Defaults to `false` |
 |cardBrandIcons | PropTypes.object | brand icons for CardView. see `./src/Icons.js` for details |
+| additionalInputsProps | PropTypes.objectOf(TextInput.propTypes) | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in [RN TextInput](https://facebook.github.io/react-native/docs/textinput.html).
 
 ##CardView
 
@@ -136,6 +138,23 @@ LiteCreditCardInput does not support `requiresName`, `requiresCVC`, and `require
 |imageBack | PropTypes.number | Image for the credit-card |
 |customIcons | PropTypes.object | brand icons for CardView. see `./src/Icons.js` for details |
 
+#### Note on additionalInputsProps
+
+additionalInputsProps gives you more control over the inputs in LiteCreditCardInput and CreditCardInput. An example object is as follows:
+```javascript
+addtionalInputProps = {
+  name: {
+    defaultValue: 'my name',
+    maxLength: 40,
+  },
+  postalCode: {
+    returnKeyType: 'go',
+  },
+};
+```
+
+The above would set the default value of the name field to `my name` and limit the input to a maximum of 40 character. In addition, it would set the returnKeyType of the postalcode field to `go`.
+
 # Methods
 ## setValues
 Set values into credit card form

src/CCInput.js

@@ -34,6 +34,7 @@ export default class CCInput extends Component {
     onChange: PropTypes.func,
     onBecomeEmpty: PropTypes.func,
     onBecomeValid: PropTypes.func,
+    additionalInputProps: PropTypes.shape(TextInput.propTypes),
   };
 
   static defaultProps = {
@@ -48,6 +49,7 @@ export default class CCInput extends Component {
     onChange: () => {},
     onBecomeEmpty: () => {},
     onBecomeValid: () => {},
+    additionalInputProps: {},
   };
 
   componentWillReceiveProps = newProps => {
@@ -66,13 +68,15 @@ export default class CCInput extends Component {
   render() {
     const { label, value, placeholder, status, keyboardType,
             containerStyle, inputStyle, labelStyle,
-            validColor, invalidColor, placeholderColor } = this.props;
+            validColor, invalidColor, placeholderColor,
+            additionalInputProps } = this.props;
     return (
       <TouchableOpacity onPress={this.focus}
           activeOpacity={0.99}>
         <View style={[containerStyle]}>
           { !!label && <Text style={[labelStyle]}>{label}</Text>}
           <TextInput ref="input"
+              {...additionalInputProps}
               keyboardType={keyboardType}
               autoCapitalise="words"
               autoCorrect={false}

src/CreditCardInput.js

@@ -6,6 +6,7 @@ import ReactNative, {
   StyleSheet,
   ScrollView,
   Dimensions,
+  TextInput,
 } from "react-native";
 
 import CreditCard from "./CardView";
@@ -60,6 +61,8 @@ export default class CreditCardInput extends Component {
     cardBrandIcons: PropTypes.object,
 
     allowScroll: PropTypes.bool,
+
+    additionalInputsProps: PropTypes.objectOf(PropTypes.shape(TextInput.propTypes)),
   };
 
   static defaultProps = {
@@ -86,6 +89,7 @@ export default class CreditCardInput extends Component {
     invalidColor: "red",
     placeholderColor: "gray",
     allowScroll: false,
+    additionalInputsProps: {},
   };
 
   componentDidMount = () => this._focus(this.props.focused);
@@ -113,6 +117,7 @@ export default class CreditCardInput extends Component {
       inputStyle, labelStyle, validColor, invalidColor, placeholderColor,
       placeholders, labels, values, status,
       onFocus, onChange, onBecomeEmpty, onBecomeValid,
+      additionalInputsProps,
     } = this.props;
 
     return {
@@ -127,6 +132,8 @@ export default class CreditCardInput extends Component {
       status: status[field],
 
       onFocus, onChange, onBecomeEmpty, onBecomeValid,
+
+      additionalInputProps: additionalInputsProps[field],
     };
   };
 

src/LiteCreditCardInput.js

@@ -6,6 +6,7 @@ import {
   Image,
   LayoutAnimation,
   TouchableOpacity,
+  TextInput,
 } from "react-native";
 
 import Icons from "./Icons";
@@ -75,6 +76,8 @@ export default class LiteCreditCardInput extends Component {
     validColor: PropTypes.string,
     invalidColor: PropTypes.string,
     placeholderColor: PropTypes.string,
+
+    additionalInputsProps: PropTypes.objectOf(PropTypes.shape(TextInput.propTypes)),
   };
 
   static defaultProps = {
@@ -86,6 +89,7 @@ export default class LiteCreditCardInput extends Component {
     validColor: "",
     invalidColor: "red",
     placeholderColor: "gray",
+    additionalInputsProps: {},
   };
 
   componentDidMount = () => this._focus(this.props.focused);
@@ -108,6 +112,7 @@ export default class LiteCreditCardInput extends Component {
       inputStyle, validColor, invalidColor, placeholderColor,
       placeholders, values, status,
       onFocus, onChange, onBecomeEmpty, onBecomeValid,
+      additionalInputsProps,
     } = this.props;
 
     return {
@@ -120,6 +125,7 @@ export default class LiteCreditCardInput extends Component {
       status: status[field],
 
       onFocus, onChange, onBecomeEmpty, onBecomeValid,
+      additionalInputProps: additionalInputsProps[field],
     };
   };