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

Comparing version 1.4.0 to 1.5.0

__tests__/custom.mask.test.js

@@ -133,2 +133,53 @@ import { CustomMask } from '../lib/masks';
     expect(receivedRawValue).toBe(expectedRawValue);
-});
+});
+
+test('mask with custom translation and match', () => {
+	var mask = new CustomMask();
+	var options = {
+		mask: '999&AAA',
+		translation: {
+			'&': function(val) {
+				return ['#', '.', ':'].indexOf(val) >= 0 ? val : null;
+			}
+		}
+	}
+
+	var expected = '123#ABC';
+	var received = mask.getValue('123#ABC', options);
+
+	expect(received).toBe(expected);
+});
+
+test('mask with custom translation and not match', () => {
+	var mask = new CustomMask();
+	var options = {
+		mask: '999&AAA',
+		translation: {
+			'&': function(val) {
+				return ['#', '.', ':'].indexOf(val) >= 0 ? val : null;
+			}
+		}
+	}
+
+	var expected = '123';
+	var received = mask.getValue('123|ABC', options);
+
+	expect(received).toBe(expected);
+});
+
+test('mask with custom translation and optionals and matching', () => {
+	var mask = new CustomMask();
+	var options = {
+		mask: '999***AAA&',
+		translation: {
+			'&': function(val) {
+				return ['#', '.', ':'].indexOf(val) >= 0 ? val : null;
+			}
+		}
+	}
+
+	var expected = '123|% ABC.';
+	var received = mask.getValue('123|% ABC.', options);
+
+	expect(received).toBe(expected);
+});

lib/masks/custom.mask.js

 import BaseMask from './_base.mask';
 
+const DEFAULT_TRANSLATION = {
+	'9': function (val) {
+		return val.replace(/[^0-9]+/g, '');
+	},
+	'A': function (val) {
+		return val.replace(/[^a-zA-Z]+/g, '');
+	},
+	'S': function (val) {
+		return val.replace(/[^a-zA-Z0-9]+/g, '');
+	},
+	'*': function (val) {
+		return val
+	}
+}
+
+var invalidValues = [null, undefined, ''];
+
 export default class CustomMask extends BaseMask {
-    static getType() {
-        return 'custom';
-    }
+	static getType() {
+		return 'custom';
+	}
 
-    getKeyboardType() {
-        return "default";
-    }
+	getKeyboardType() {
+		return "default";
+	}
 
-    getValue(value, settings) {
-        return this.getVMasker().toPattern(value, settings.mask);
-    }
+	getValue(value, settings) {
+		let { mask } = settings;
+		let translation = this.mergeSettings(DEFAULT_TRANSLATION, settings.translation);
 
-    getRawValue(maskedValue, settings) {
-        if(!!settings && settings.getRawValue) {
-            return settings.getRawValue(maskedValue, settings);
-        }
+		var result = '';
 
-        return maskedValue;
-    }
+		const maskSize = mask.length;
+		const valueSize = value.length;
 
-    validate(value, settings) {
-        if(!!settings && settings.validator) {
-            return settings.validator(value, settings);
-        }
+		var maskResolved = 0;
+		var valueResolved = 0;
 
-        return true;
-    }
-}
+		while (maskResolved < maskSize && valueResolved < valueSize) {
+			const valueChar = value[valueResolved];
+			const maskChar = mask[maskResolved];
+
+			if (valueChar === maskChar) {
+				result += valueChar;
+				maskResolved++;
+				valueResolved++;
+				continue;
+			}
+
+			const handler = translation[maskChar];
+
+			if (!handler) {
+				result += maskChar;
+				maskResolved++;
+				continue;
+			}
+
+			var masked = handler(valueChar);
+			if (invalidValues.indexOf(masked) < 0) {
+				result += masked
+				maskResolved++
+			}
+			valueResolved++
+		}
+
+		return result;
+	}
+
+	getRawValue(maskedValue, settings) {
+		if (!!settings && settings.getRawValue) {
+			return settings.getRawValue(maskedValue, settings);
+		}
+
+		return maskedValue;
+	}
+
+	validate(value, settings) {
+		if (!!settings && settings.validator) {
+			return settings.validator(value, settings);
+		}
+
+		return true;
+	}
+}

package.json

 {
   "name": "react-native-masked-text",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Text and TextInput with mask for React Native applications",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -54,4 +54,5 @@ # react-native-masked-text
 ### Props
-**type**
 
+#### type
+
 *credit-card*: use the mask 9999 9999 9999 9999. It accepts options (see later in this doc). <br />
@@ -68,3 +69,3 @@ *cpf*: use the mask `999.999.999-99` and `numeric` keyboard. <br />
 
-**onChangeText**
+#### onChangeText
 
@@ -86,3 +87,3 @@ Invoked after new value applied to mask.
 
-**checkText**
+#### checkText
 
@@ -106,3 +107,4 @@ Allow you to check and prevent value to be inputed.
 
-**customTextInput** <br />
+#### customTextInput
+
 You can use this prop if you want custom text input instead native TextInput component:
@@ -125,3 +127,4 @@
 
-**TextInput Props** <br />
+#### TextInput Props
+
 You can use the native props of TextInput, with this in mind:
@@ -133,3 +136,4 @@
 
-**TextInput Methods** <br />
+#### TextInput Methods
+
 If you want to use the methods of the native TextInput, use the `getElement()` method:
@@ -163,7 +167,8 @@
 
-**Options** <br />
+#### Options
+
 Some types accept options, use it like this: `<TextInputMask type={'money'} options={{ unit: 'US$' }} />`
 
 
-For `type={'money'}` <br />
+**For `type={'money'}`** <br />
 * *options={...}*
@@ -177,3 +182,3 @@ * `precision` (Number, default 2): the decimal places.
 
-For `type={'cel-phone'}` <br />
+**For `type={'cel-phone'}`** <br />
 * *options={...}*
@@ -183,3 +188,3 @@ * `withDDD` (Boolean, default true): if the ddd will be include in the mask.
 
-For `type={'datetime'}` <br />
+**For `type={'datetime'}`** <br />
 * *options={...}*
@@ -196,18 +201,60 @@ * `format` (String, default DD/MM/YYYY HH:mm:ss): moment date format. It accepts the following:
 
-For `type={'custom'}` <br />
+**For `type={'custom'}`** <br />
 * *options={...}*
-	* `mask` (String, default ''): your mask template.
-		* `9`: accept digit.
-		* `A`: accept alpha.
-		* `S`: accept alphanumeric.
-	* `validator` (Function, default returns true): the function use to validate value. Must return true if valid or false if invalid.
-		* The function receives 2 parameters:
-			* `value`: current value.
-			* `settings`: current settings
-	* `getRawValue` (Function, default returns the current value): the function that's invoked when `getRawValue` method from component is called.
-		* The function receives 2 parameters:
-			* `value`: current value.
-			* `settings`: current settings
 
-For `type={'credit-card'}` <br />
+```jsx
+{
+	/**
+	 * mask: (String | required | default '')
+	 * the mask pattern
+	 * 9 - accept digit.
+	 * A - accept alpha.
+	 * S - accept alphanumeric.
+	 * * - accept all.
+	*/
+	mask: '999#AAA',
+
+	/**
+	 * validator: (Function | optional | defaults returns true)
+	 * use this funcion to inform if the inputed value is a valid value (for invalid phone numbers, for example). The isValid method use this validator.
+	*/
+	validator: function(value, settings) {
+		return true
+	},
+	/**
+	 * getRawValue: (Function | optional | defaults return current masked value)
+	 * use this function to parse and return values to use what you want.
+	 * for example, if you want to create a phone number mask [phone] but want to get only
+	 * the numbers for value, use this method for this parse step.
+	*/
+	getRawValue: function(value, settings) {
+		return 'my converted value';
+	},
+	/**
+	 * translation: (Object | optional | defaults 9, A, S, *)
+	 * the dictionary that translate mask and value.
+	 * you can change defaults by simple override the key (9, A, S, *) or create some new.
+	*/
+	translation: {
+		// this is a custom translation. The others (9, A, S, *) still works.
+		// this translation will be merged and turns into 9, A, S, *, #.
+		'#': function(val) {
+			if (val === ' ') {
+				return val;
+			}
+
+			// if returns null, undefined or '' (empty string), the value will be ignored.
+			return null;
+		},
+		// in this case, we will override build-in * translation (allow all characters)
+		// and set this to allow only blank spaces and some special characters.
+		'*': function(val) {
+			return [' ', '#', ',', '.', '!'].indexOf(val) >= 0 ? val : null;
+		}
+	}
+}
+
+```
+
+**For `type={'credit-card'}`** <br />
 * *options={...}*
@@ -315,2 +362,5 @@ * `obfuscated` (Boolean, default false): if the mask must be `9999 **** **** 9999`
 # Changelog
+## 1.5.0
+* Adding new and powerfull `custom` engine mask \m/.
+
 ## 1.4.0
@@ -317,0 +367,0 @@ * Adding `customTextInput` to allow other inputs instead native TextInput. (thank to [Hellon Canella](https://github.com/helloncanella))

No alert changes

Improved metrics

Total package byte prevSize

60565

increased by5.52%

Lines of code

1463

increased by6.48%

Number of lines in readme file

399

increased by14.33%

No dependency changes