react-native-masked-text - npm Package Compare versions

Comparing version 1.9.2 to 1.10.0

__tests__/mask/credit-card.mask.test.js

@@ -91,1 +91,17 @@ import { CreditCardMask } from '../../lib/masks'
 })
+
+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)
+})

CHANGELOG.md

@@ -5,2 +5,13 @@ # Changelog
 
+## [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
@@ -7,0 +18,0 @@

dist/lib/masks/credit-card.mask.js

@@ -1,1 +0,1 @@
-Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _get=function get(object,property,receiver){if(object===null)object=Function.prototype;var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent===null){return undefined;}else{return get(parent,property,receiver);}}else if("value"in desc){return desc.value;}else{var getter=desc.get;if(getter===undefined){return undefined;}return getter.call(receiver);}};var _base=require('./_base.mask');var _base2=_interopRequireDefault(_base);var _custom=require('./custom.mask');var _custom2=_interopRequireDefault(_custom);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var CREDIT_CARD_MASK='9999 9999 9999 9999';var CREDIT_CARD_OBFUSCATED_MASK='9999 **** **** 9999';var CREDIT_CARD_SETTINGS={obfuscated:false};var MASK_TRANSLATION={'*':function _(val){return null;}};var CreditCardMask=function(_BaseMask){_inherits(CreditCardMask,_BaseMask);function CreditCardMask(){_classCallCheck(this,CreditCardMask);return _possibleConstructorReturn(this,(CreditCardMask.__proto__||Object.getPrototypeOf(CreditCardMask)).apply(this,arguments));}_createClass(CreditCardMask,[{key:'getValue',value:function getValue(value,settings){var selectedMask=this.getMask(value,settings);return _custom2.default.shared.getValue(value,{mask:selectedMask,translation:MASK_TRANSLATION});}},{key:'validate',value:function validate(value,settings){if(!!value){var selectedMask=this.getMask(value,settings);return value.length===selectedMask.length;}return true;}},{key:'getRawValue',value:function getRawValue(maskedValue,settings){if(!maskedValue)return[];return maskedValue.split(' ').map(function(val){if(!val)return'';return val.trim();});}},{key:'getMask',value:function getMask(value,settings){var mergedSettings=_get(CreditCardMask.prototype.__proto__||Object.getPrototypeOf(CreditCardMask.prototype),'mergeSettings',this).call(this,CREDIT_CARD_SETTINGS,settings);var selectedMask=mergedSettings.obfuscated?CREDIT_CARD_OBFUSCATED_MASK:CREDIT_CARD_MASK;return selectedMask;}}],[{key:'getType',value:function getType(){return'credit-card';}}]);return CreditCardMask;}(_base2.default);exports.default=CreditCardMask;
+Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _get=function get(object,property,receiver){if(object===null)object=Function.prototype;var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent===null){return undefined;}else{return get(parent,property,receiver);}}else if("value"in desc){return desc.value;}else{var getter=desc.get;if(getter===undefined){return undefined;}return getter.call(receiver);}};var _base=require('./_base.mask');var _base2=_interopRequireDefault(_base);var _custom=require('./custom.mask');var _custom2=_interopRequireDefault(_custom);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var 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'}};var CREDIT_CARD_SETTINGS={obfuscated:false,issuer:'visa-or-mastercard'};var MASK_TRANSLATION={'*':function _(val){return null;}};var CreditCardMask=function(_BaseMask){_inherits(CreditCardMask,_BaseMask);function CreditCardMask(){_classCallCheck(this,CreditCardMask);return _possibleConstructorReturn(this,(CreditCardMask.__proto__||Object.getPrototypeOf(CreditCardMask)).apply(this,arguments));}_createClass(CreditCardMask,[{key:'getValue',value:function getValue(value,settings){var selectedMask=this.getMask(value,settings);return _custom2.default.shared.getValue(value,{mask:selectedMask,translation:MASK_TRANSLATION});}},{key:'validate',value:function validate(value,settings){if(!!value){var selectedMask=this.getMask(value,settings);return value.length===selectedMask.length;}return true;}},{key:'getRawValue',value:function getRawValue(maskedValue,settings){if(!maskedValue)return[];return maskedValue.split(' ').map(function(val){if(!val)return'';return val.trim();});}},{key:'getMask',value:function getMask(value,settings){var mergedSettings=_get(CreditCardMask.prototype.__proto__||Object.getPrototypeOf(CreditCardMask.prototype),'mergeSettings',this).call(this,CREDIT_CARD_SETTINGS,settings);var selectedMask=this._selectMask(mergedSettings.issuer,mergedSettings.obfuscated);return selectedMask;}},{key:'_selectMask',value:function _selectMask(issuer,obfuscated){var maskType=obfuscated?'obfuscated':'regular';return CREDIT_CARD_MASKS[issuer][maskType];}}],[{key:'getType',value:function getType(){return'credit-card';}}]);return CreditCardMask;}(_base2.default);exports.default=CreditCardMask;

dist/lib/text-input-mask.js

@@ -1,1 +0,1 @@
-Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='./lib/text-input-mask.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _baseTextComponent=require('./base-text-component');var _baseTextComponent2=_interopRequireDefault(_baseTextComponent);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var TextInputMask=function(_BaseTextComponent){_inherits(TextInputMask,_BaseTextComponent);function TextInputMask(){_classCallCheck(this,TextInputMask);return _possibleConstructorReturn(this,(TextInputMask.__proto__||Object.getPrototypeOf(TextInputMask)).apply(this,arguments));}_createClass(TextInputMask,[{key:'getElement',value:function getElement(){return this._inputElement;}},{key:'_onChangeText',value:function _onChangeText(text){var _this2=this;var self=this;if(!this._checkText(text)){return;}self.updateValue(text).then(function(maskedText){if(self.props.onChangeText){_this2.getElement().setNativeProps({text:maskedText});self.props.onChangeText(maskedText);}});}},{key:'_checkText',value:function _checkText(text){if(this.props.checkText){return this.props.checkText(this.state.value,text);}return true;}},{key:'_getKeyboardType',value:function _getKeyboardType(){return this.props.keyboardType||this._maskHandler.getKeyboardType();}},{key:'render',value:function render(){var _this3=this;var Input=_reactNative.TextInput;var customTextInputProps={};if(this.props.customTextInput){Input=this.props.customTextInput;customTextInputProps=this.props.customTextInputProps||{};}return _react2.default.createElement(Input,_extends({ref:function ref(_ref){if(_ref){_this3._inputElement=_ref;if(typeof _this3.props.refInput==='function'){_this3.props.refInput(_ref);}}},keyboardType:this._getKeyboardType()},this.props,customTextInputProps,{onChangeText:function onChangeText(text){return _this3._onChangeText(text);},value:this.state.value,__source:{fileName:_jsxFileName,lineNumber:48}}));}}]);return TextInputMask;}(_baseTextComponent2.default);exports.default=TextInputMask;
+Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='./lib/text-input-mask.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _baseTextComponent=require('./base-text-component');var _baseTextComponent2=_interopRequireDefault(_baseTextComponent);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var TextInputMask=function(_BaseTextComponent){_inherits(TextInputMask,_BaseTextComponent);function TextInputMask(){_classCallCheck(this,TextInputMask);return _possibleConstructorReturn(this,(TextInputMask.__proto__||Object.getPrototypeOf(TextInputMask)).apply(this,arguments));}_createClass(TextInputMask,[{key:'getElement',value:function getElement(){return this._inputElement;}},{key:'_onChangeText',value:function _onChangeText(text){var _this2=this;var self=this;if(!this._checkText(text)){return;}self.updateValue(text).then(function(maskedText){if(self.props.onChangeText){_this2._trySetNativeProps(maskedText);self.props.onChangeText(maskedText);}});}},{key:'_trySetNativeProps',value:function _trySetNativeProps(maskedText){try{this.getElement().setNativeProps({text:maskedText});}catch(error){}}},{key:'_checkText',value:function _checkText(text){if(this.props.checkText){return this.props.checkText(this.state.value,text);}return true;}},{key:'_getKeyboardType',value:function _getKeyboardType(){return this.props.keyboardType||this._maskHandler.getKeyboardType();}},{key:'render',value:function render(){var _this3=this;var Input=_reactNative.TextInput;var customTextInputProps={};if(this.props.customTextInput){Input=this.props.customTextInput;customTextInputProps=this.props.customTextInputProps||{};}return _react2.default.createElement(Input,_extends({ref:function ref(_ref){if(_ref){_this3._inputElement=_ref;if(typeof _this3.props.refInput==='function'){_this3.props.refInput(_ref);}}},keyboardType:this._getKeyboardType()},this.props,customTextInputProps,{onChangeText:function onChangeText(text){return _this3._onChangeText(text);},value:this.state.value,__source:{fileName:_jsxFileName,lineNumber:56}}));}}]);return TextInputMask;}(_baseTextComponent2.default);exports.default=TextInputMask;

index.d.ts

@@ -43,2 +43,3 @@ /**
     obfuscated?: boolean
+    issuer: 'visa-or-mastercard' | 'diners' | 'amex'
 
@@ -59,2 +60,4 @@ // Custom type.
     refInput?: (ref: any) => void
+    customTextInput?: any
+    customTextInputProps?: Object
 }
@@ -61,0 +64,0 @@

lib/masks/credit-card.mask.js

 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'
 }
@@ -49,7 +62,12 @@
         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]
+    }
 }

lib/text-input-mask.js

@@ -20,3 +20,3 @@ // @flow
             if (self.props.onChangeText) {
-                this.getElement().setNativeProps({ text: maskedText })
+                this._trySetNativeProps(maskedText)
                 self.props.onChangeText(maskedText)
@@ -27,2 +27,10 @@ }
 
+    _trySetNativeProps(maskedText) {
+        try {
+            this.getElement().setNativeProps({ text: maskedText })
+        } catch (error) {
+            // silent
+        }
+    }
+
     _checkText(text) {
@@ -29,0 +37,0 @@ if (this.props.checkText) {

package.json

 {
     "name": "react-native-masked-text",
-    "version": "1.9.2",
+    "version": "1.10.0",
     "description": "Text and TextInput with mask for React Native applications",
@@ -5,0 +5,0 @@ "licenses": [

README.md

@@ -46,3 +46,3 @@ # react-native-masked-text
 			<TextInputMask
-				refInput={(ref) => this.myDateText = ref;}
+				ref={(ref) => this.myDateText = ref}
 				type={'datetime'}
@@ -120,3 +120,3 @@ options={{
 <TextInputMask
-	refInput={(ref) => this.myDateText = ref;}
+	ref={(ref) => this.myDateText = ref}
 	type={'money'}
@@ -153,3 +153,3 @@ style={styles.input}
         <TextInputMask
-          refInput={(ref) => this.myDateText = ref;}
+          ref={(ref) => this.myDateText = ref}
           // here we set the custom component and their props.
@@ -319,4 +319,9 @@ customTextInput={Kaede}
 
--   _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
@@ -323,0 +328,0 @@

No alert changes

Improved metrics

Total package byte prevSize

453989

increased by0.54%

Lines of code

1826

increased by2.01%

Number of lines in readme file

491

increased by1.03%

No dependency changes