From dffc7e7639a159b7ed6ee133b7f52fb8ae057a0c Mon Sep 17 00:00:00 2001 From: Steven Scaffidi Date: Fri, 6 Jan 2017 09:15:23 -0800 Subject: [PATCH] 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 | 19 +++++++++++++++++++ src/CCInput.js | 6 +++++- src/CreditCardInput.js | 7 +++++++ src/LiteCreditCardInput.js | 6 ++++++ 4 files changed, 37 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 513fead8..582b8daf 100644 --- a/readme.md +++ b/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
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 diff --git a/src/CCInput.js b/src/CCInput.js index 1c7cc77c..5ac05bfa 100644 --- a/src/CCInput.js +++ b/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 ( { !!label && {label}} 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], }; }; diff --git a/src/LiteCreditCardInput.js b/src/LiteCreditCardInput.js index 5c25f856..0810e40d 100644 --- a/src/LiteCreditCardInput.js +++ b/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], }; };