diff --git a/CHANGELOG.md b/CHANGELOG.md index d1fc7f80..aa64d285 100644 --- 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 index 37900f58..64196711 100644 --- a/README.md +++ b/README.md @@ -313,8 +313,13 @@ Some types accept options, use it like this: ` -- _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 index 86e3c57b..0760d828 100644 --- 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) +}) \ No newline at end of file diff --git a/dist/lib/masks/credit-card.mask.js b/dist/lib/masks/credit-card.mask.js index c3a2ef2d..d38ca78d 100644 --- a/dist/lib/masks/credit-card.mask.js +++ b/dist/lib/masks/credit-card.mask.js @@ -1 +1 @@ -Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i 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 index 0422863c..8db3fe7d 100644 --- 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 index f3a2363b..916c1f22 100644 --- 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 index c34571bd..7c224a97 100644 --- 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": [ {