Merge pull request #117 from benhurott/version/1.10.0

Version/1.10.0
bhrott · Jan 6, 2019 · 3605bf7 · 3605bf7
2 parents db5faaf + 1b98de7
commit 3605bf7
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+## [1.10.0] - 2019-01-06
+
+### Added
+
+- Credit Card Mask: adding support for `diners` and `amex`. (Thanks to [Marin Bezhanov](https://github.com/mbezhanov))
+
+### Fix
+
+- [#107](https://github.com/benhurott/react-native-masked-text/issues/107): Props missing - TypeScript map out of date.
+- [#115](https://github.com/benhurott/react-native-masked-text/issues/115): setNativeProps is not a function
+
 ## [1.9.2] - 2018-10-06
 
 ### Fixed

diff --git a/README.md b/README.md
@@ -313,8 +313,13 @@ Some types accept options, use it like this: `<TextInputMask type={'money'} opti
 
 **For `type={'credit-card'}`** <br />
 
--   _options={...}_ \* `obfuscated` (Boolean, default false): if the mask must be `9999 **** **** 9999`
-
+-   _options={...}_
+    -   `obfuscated` (Boolean, default false): if the mask must be `9999 **** **** 9999`.
+    -   `issuer` (String, default 'visa-or-mastercard'): the credit card issuer.
+        - options:
+            - `visa-or-mastercard`: will apply the mask `9999 9999 9999 9999` / `9999 **** **** 9999`.
+            - `amex`: will apply the mask `9999 999999 99999` / `9999 ****** 99999`.
+            - `diners`: will apply the mask `9999 999999 9999` / `9999 ****** 9999`.
 ### Methods
 
 -   `getElement()`: return the instance of _TextInput_ component.

diff --git a/__tests__/mask/credit-card.mask.test.js b/__tests__/mask/credit-card.mask.test.js
@@ -88,3 +88,19 @@ test('getMask obfuscated returns 9999 **** **** 9999', () => {
 
     expect(received).toBe(expected)
 })
+
+test('get masked value with amex issuer must return 1234 123456 12345', () => {
+    var mask = new CreditCardMask()
+    var expected = '1234 123456 12345'
+    var received = mask.getValue('123412345612345', { issuer: 'amex' })
+
+    expect(received).toBe(expected)
+})
+
+test('getMask with diners issuer must return 1234 123456 1234', () => {
+    var mask = new CreditCardMask()
+    var expected = '1234 123456 1234'
+    var received = mask.getValue('12341234561234', { issuer: 'diners' })
+
+    expect(received).toBe(expected)
+})
diff --git a/dist/lib/masks/credit-card.mask.js b/dist/lib/masks/credit-card.mask.js
diff --git a/dist/lib/text-input-mask.js b/dist/lib/text-input-mask.js
diff --git a/index.d.ts b/index.d.ts
@@ -40,6 +40,7 @@ export interface TextInputMaskOptionProp {
 
     // Credit card type.
     obfuscated?: boolean
+    issuer: 'visa-or-mastercard' | 'diners' | 'amex'
 
     // Custom type.
     mask?: string
@@ -55,6 +56,8 @@ export interface TextInputMaskProps extends TextInputProps {
     checkText?: (previous: string, next: string) => boolean
     onChangeText?: (text: string) => void
     refInput?: (ref: any) => void
+    customTextInput?: any
+    customTextInputProps?: Object
 }
 
 // TextInputMask Component

diff --git a/lib/masks/credit-card.mask.js b/lib/masks/credit-card.mask.js
@@ -1,11 +1,24 @@
 import BaseMask from './_base.mask'
 import CustomMask from './custom.mask'
 
-const CREDIT_CARD_MASK = '9999 9999 9999 9999'
-const CREDIT_CARD_OBFUSCATED_MASK = '9999 **** **** 9999'
+const CREDIT_CARD_MASKS = {
+    'visa-or-mastercard': {
+        regular: '9999 9999 9999 9999',
+        obfuscated: '9999 **** **** 9999'
+    },
+    'amex': {
+        regular: '9999 999999 99999',
+        obfuscated: '9999 ****** 99999'
+    },
+    'diners': {
+        regular: '9999 999999 9999',
+        obfuscated: '9999 ****** 9999'
+    },
+}
 
 const CREDIT_CARD_SETTINGS = {
-    obfuscated: false
+    obfuscated: false,
+    issuer: 'visa-or-mastercard'
 }
 
 const MASK_TRANSLATION = {
@@ -46,9 +59,14 @@ export default class CreditCardMask extends BaseMask {
 
     getMask(value, settings) {
         let mergedSettings = super.mergeSettings(CREDIT_CARD_SETTINGS, settings)
-        let selectedMask = mergedSettings.obfuscated
-            ? CREDIT_CARD_OBFUSCATED_MASK
-            : CREDIT_CARD_MASK
+        const selectedMask = this._selectMask(mergedSettings.issuer, mergedSettings.obfuscated)
+
         return selectedMask
     }
+
+    _selectMask(issuer, obfuscated) {
+        const maskType = obfuscated ? 'obfuscated' : 'regular'
+
+        return CREDIT_CARD_MASKS[issuer][maskType]
+    }
 }
diff --git a/lib/text-input-mask.js b/lib/text-input-mask.js
@@ -17,12 +17,20 @@ export default class TextInputMask extends BaseTextComponent {
 
         self.updateValue(text).then(maskedText => {
             if (self.props.onChangeText) {
-                this.getElement().setNativeProps({ text: maskedText })
+                this._trySetNativeProps(maskedText)
                 self.props.onChangeText(maskedText)
             }
         })
     }
 
+    _trySetNativeProps(maskedText) {
+        try {
+            this.getElement().setNativeProps({ text: maskedText })
+        } catch (error) {
+            // silent
+        }
+    }
+
     _checkText(text) {
         if (this.props.checkText) {
             return this.props.checkText(this.state.value, text)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-native-masked-text",
-    "version": "1.9.2",
+    "version": "1.10.0",
     "description": "Text and TextInput with mask for React Native applications",
     "licenses": [
         {