Update readme

sbycrosz · Sep 17, 2016 · bb06ead · bb06ead
1 parent af7e9b1
commit bb06ead
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/example/Example.js b/example/Example.js
@@ -21,7 +21,7 @@ const s = StyleSheet.create({
   },
 });
 
-const SCREEN_IS_TOO_SMALL = false;
+const USE_LITE_CREDIT_CARD_INPUT = false;
 
 export default class Example extends Component {
   _onChange = formData => {
@@ -37,7 +37,7 @@ export default class Example extends Component {
   render() {
     return (
       <View style={s.container}>
-        { SCREEN_IS_TOO_SMALL ?
+        { USE_LITE_CREDIT_CARD_INPUT ?
           (<LiteCreditCardInput
               autoFocus
               inputStyle={s.input}
@@ -52,6 +52,8 @@ export default class Example extends Component {
                 autoFocus
 
                 requiresName
+                requiresCVC
+                requiresPostalCode
                 imageFront={require("./images/card.png")}
                 imageBack={require("./images/card.png")}
 

diff --git a/readme.md b/readme.md
@@ -54,19 +54,25 @@ _onChange => form => console.log(form);
 // will print:
 {
   valid: true, // will be true once all fields are "valid" (time to enable the submit button)
-  focused: "number", // will be one of [null, "number", "expiry", and "cvc"]
   values: { // will be in the sanitized and formatted form
   	number: "4242 4242",
   	expiry: "06/19",
   	cvc: "300",
   	type: "visa", // will be one of [null, "visa", "master-card", "american-express", "diners-club", "discover", "jcb", "unionpay", "maestro"]
+  	name: "Sam",
+  	postalCode: "34567",
   },
   status: {  // will be one of ["incomplete", "invalid", and "valid"]
 	number: "incomplete",
-	expiry: "incomplete"
-	cvc: "incomplete"
+	expiry: "incomplete",
+	cvc: "incomplete",
+	name: "incomplete", 
+	postalCode: "incomplete",
   },
 };
+
+// Notes: 
+// cvc, name, & postalCode will only be available when the respective props is enabled (e.g. requiresName, requiresCVC)
 ```
 
 # Props
@@ -76,17 +82,23 @@ _onChange => form => console.log(form);
 | --- | --- | --- | --- |
 |autoFocus | PropTypes.bool | Automatically focus Card Number field on render|
 |onChange | PropTypes.func | Receives a `formData` object every time the form changes |
+|onFocus | PropTypes.func | Receives the name of currently focused field |
 |placeholders | PropTypes.object | Defaults to <br/>`{ number: "1234 5678 1234 5678", expiry: "MM/YY", cvc: "CVC" }` |
 |inputStyle | Text.propTypes.style | Style for credit-card form's textInput |
 |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" |
 
+#### NOTES
+LiteCreditCardInput does not support `requiresName`, `requiresCVC`, and `requiresPostalCode` at the moment, PRs are welcome :party:
+
+
 ## CreditCardInput
 | Property | Type | Description |
 | --- | --- | --- | --- |
 |autoFocus | PropTypes.bool | Automatically focus Card Number field on render|
 |onChange | PropTypes.func | Receives a `formData` object every time the form changes |
+|onFocus | PropTypes.func | Receives the name of currently focused field |
 |labels | PropTypes.object | Defaults to <br/>`{ number: "CARD NUMBER", expiry: "EXPIRY", cvc: "CVC/CCV" }` |
 |placeholders | PropTypes.object | Defaults to <br/>`{ number: "1234 5678 1234 5678", expiry: "MM/YY", cvc: "CVC" }` |
 |cardViewSize | PropTypes.object | Size of the credit-card view.<br/>Defaults to `{ width: 300, height: 180 }` (managed by [react-native-credit-card](https://github.com/sonnylazuardi/react-native-credit-card))  |
@@ -98,6 +110,10 @@ _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" |
+|requiresName | PropTypes.bool | Shows cardholder's name field<br/> Default to `false` |
+|requiresCVC | PropTypes.bool | Shows CVC field<br/> Default to `true` |
+|requiresPostalCode | PropTypes.bool | Shows postalCode field<br/> Default to `false` |
+|validatePostalCode | PropTypes.func | Function to validate postalCode, expects `incomplete`, `valid`, or `invalid` as return values|
 
 
 # Example
@@ -120,7 +136,8 @@ react-native run-android
 # Future Improvement
 * Add unit tests
 * Accept initialValues
-* Accept name / postalCode fields
+* Accept name / postalCode fields for LiteCreditCardInput
+* Create example with [react-native-awesome-card-io](https://github.com/Kerumen/react-native-awesome-card-io)
 
 # Production App using react-native-credit-card-input
 * Grain.com.sg ([iOS](https://itunes.apple.com/us/app/grain-never-worry-about-food/id1088932420)) – Gourmet food delivery in Singapore