From db30a7774c86fac016e94f71f558e70be479d4bd Mon Sep 17 00:00:00 2001 From: Marin Bezhanov Date: Mon, 5 Nov 2018 19:27:08 +0200 Subject: [PATCH 1/6] add masks for American Express and Diners Club credit cards --- README.md | 5 ++-- dist/lib/masks/credit-card.mask.js | 2 +- lib/masks/credit-card.mask.js | 43 +++++++++++++++++++++++++----- 3 files changed, 41 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 1d382b14..a04f5e9f 100644 --- a/README.md +++ b/README.md @@ -313,8 +313,9 @@ 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 ''): the credit card issuer. Ex: `visa`, `mastercard`, `amex`, `diners` ### Methods - `getElement()`: return the instance of _TextInput_ component. diff --git a/dist/lib/masks/credit-card.mask.js b/dist/lib/masks/credit-card.mask.js index c3a2ef2d..196d08ed 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 Date: Sun, 6 Jan 2019 21:23:15 -0200 Subject: [PATCH 2/6] feat(credit-card): merging PR #108 to add amex and diners --- CHANGELOG.md | 6 ++++++ README.md | 8 ++++++-- __tests__/mask/credit-card.mask.test.js | 16 ++++++++++++++++ lib/masks/credit-card.mask.js | 17 ++--------------- package.json | 2 +- 5 files changed, 31 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d1fc7f80..0100f242 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ ## 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)) + ## [1.9.2] - 2018-10-06 ### Fixed diff --git a/README.md b/README.md index a04f5e9f..dd5d8d19 100644 --- a/README.md +++ b/README.md @@ -314,8 +314,12 @@ Some types accept options, use it like this: ` - _options={...}_ - - `obfuscated` (Boolean, default false): if the mask must be `9999 **** **** 9999` - - `issuer` (String, default ''): the credit card issuer. Ex: `visa`, `mastercard`, `amex`, `diners` + - `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/lib/masks/credit-card.mask.js b/lib/masks/credit-card.mask.js index 86ad3733..8db3fe7d 100644 --- a/lib/masks/credit-card.mask.js +++ b/lib/masks/credit-card.mask.js @@ -18,7 +18,7 @@ const CREDIT_CARD_MASKS = { const CREDIT_CARD_SETTINGS = { obfuscated: false, - issuer: '' + issuer: 'visa-or-mastercard' } const MASK_TRANSLATION = { @@ -59,24 +59,11 @@ export default class CreditCardMask extends BaseMask { getMask(value, settings) { let mergedSettings = super.mergeSettings(CREDIT_CARD_SETTINGS, settings) - const issuer = this._validateIssuer(mergedSettings.issuer) - const selectedMask = this._selectMask(issuer, mergedSettings.obfuscated) + const selectedMask = this._selectMask(mergedSettings.issuer, mergedSettings.obfuscated) return selectedMask } - _validateIssuer(issuer) { - switch (issuer) { - case 'amex': - case 'diners': - return issuer - case 'visa': - case 'mastercard': - default: - return 'visa-or-mastercard' - } - } - _selectMask(issuer, obfuscated) { const maskType = obfuscated ? 'obfuscated' : 'regular' 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": [ { From bdd899b1db5ce24bd71ab23f366eb7c5b7e75974 Mon Sep 17 00:00:00 2001 From: Ben-hur Santos Ott Date: Sun, 6 Jan 2019 21:27:21 -0200 Subject: [PATCH 3/6] feat(TS): adding ts definition for credit card issuer --- index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/index.d.ts b/index.d.ts index 6f937ea1..0b7c4c1d 100644 --- 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 From 5a8a2334161be5db76b9128c5dbe4bef02cc7020 Mon Sep 17 00:00:00 2001 From: Ben-hur Santos Ott Date: Sun, 6 Jan 2019 21:31:35 -0200 Subject: [PATCH 4/6] fix(#107): fixing missing props in ts definition --- index.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.d.ts b/index.d.ts index 0b7c4c1d..125a7d2e 100644 --- a/index.d.ts +++ b/index.d.ts @@ -56,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 From 6beec1c178dc277402321e0b120885f7f79b4dcd Mon Sep 17 00:00:00 2001 From: Ben-hur Santos Ott Date: Sun, 6 Jan 2019 21:38:35 -0200 Subject: [PATCH 5/6] fix(#115): fixing setNativeProps error --- CHANGELOG.md | 5 +++++ lib/text-input-mask.js | 10 +++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0100f242..aa64d285 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,11 @@ - 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/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) From 1b98de733a0f8da8a0a0f4d185206f0233703f19 Mon Sep 17 00:00:00 2001 From: Ben-hur Santos Ott Date: Sun, 6 Jan 2019 21:49:30 -0200 Subject: [PATCH 6/6] chore(build): updating dist --- dist/lib/masks/credit-card.mask.js | 2 +- dist/lib/text-input-mask.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/lib/masks/credit-card.mask.js b/dist/lib/masks/credit-card.mask.js index 196d08ed..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