feat(1.3.0): adding checkText to TextInputMask

README.md

@@ -38,7 +38,7 @@ export default class MyComponent extends Component {
 	render() {
 		// the type is required but options is required only for some specific types.
 		return (
-			<TextInputMask 
+			<TextInputMask
 				ref={'myDateText'}
 				type={'datetime'}
 				options={{
@@ -52,7 +52,7 @@ export default class MyComponent extends Component {
 
 ### Props
 **type**
-	
+
 *credit-card*: use the mask 9999 9999 9999 9999. It accepts options (see later in this doc). <br />
 *cpf*: use the mask `999.999.999-99` and `numeric` keyboard. <br />
 *cnpj*: use the mask `99.999.999/9999-99` and `numeric` keyboard. <br />
@@ -63,6 +63,44 @@ export default class MyComponent extends Component {
 *datetime*: use datetime mask with moment format (default DD/MM/YYYY HH:mm:ss). It accepts options (see later in this doc). <br />
 *custom*: use your custom mask (see the options props later in this doc). <br />
 
+
+**onChangeText**
+
+Invoked after new value applied to mask.
+```jsx
+/**
+ * @param {String} text the text AFTER mask is applied.
+*/
+onChangeText(text) {
+	// ...
+}
+
+<TextInputMask
+	type={'only-numbers'}
+	onChangeText={this.onChangeText.bind(this)} />
+```
+
+
+**checkText**
+
+Allow you to check and prevent value to be inputed.
+
+```jsx
+/**
+ * @param {String} previous the previous text in the masked field.
+ * @param {String} next the next text that will be setted to field.
+ * @return {Boolean} return true if must accept the value.
+*/
+checkText(previous, next) {
+	return next === 'your valid value or other boolean condition';
+}
+
+<TextInputMask
+	type={'only-numbers'}
+	checkText={this.checkText.bind(this)} />
+```
+
+
 **TextInput Props** <br />
 You can use the native props of TextInput, with this in mind:
 
@@ -166,7 +204,7 @@ export default class MyComponent extends Component {
 		// the type is required but options is required only for some specific types.
 		// the sample below will output 4567 **** **** 1234
 		return (
-			<TextMask 
+			<TextMask
 				value={this.state.text}
 				type={'credit-card'}
 				options={{
@@ -219,6 +257,9 @@ var money = MaskService.toMask('money', '123', {
 
 
 # Changelog
+## 1.3.0
+* Feat: now you can check and prevent input text on `TextInputMask` using `checkText` prop.
+
 ## 1.2.2
 * Fix: fixing es2015 preset (thanks to [vagnercsouza](https://github.com/vagnercsouza), [barakcoh](https://github.com/barakcoh), Marvin Santos)
 

lib/internal-dependencies/vanilla-masker.js

@@ -97,7 +97,7 @@
     this.opts = {};
     this.bindElementToMask("toNumber");
   };
-  
+
   VanillaMasker.prototype.maskAlphaNum = function() {
     this.opts = {};
     this.bindElementToMask("toAlphaNumeric");
@@ -159,11 +159,9 @@
       cents = (cents + centsValue).slice(-centsSliced);
     }
 
-    console.log(JSON.stringify(opts, null, 4));
-
     var unitToApply = opts.unit[opts.unit.length - 1] === ' ' ?
       opts.unit.substring(0, opts.unit.length - 1)
-      : 
+      :
       opts.unit;
     var output = unitToApply + masked + opts.separator + cents + opts.suffixUnit;
     return output.replace(clearSeparator, "");
@@ -180,7 +178,7 @@
         outputLength = output.length,
         placeholder = (typeof opts === 'object' ? opts.placeholder : undefined)
     ;
-    
+
     for (i = 0; i < outputLength; i++) {
       // Reached the end of input
       if (index >= values.length) {
@@ -216,10 +214,10 @@
   VMasker.toNumber = function(value) {
     return value.toString().replace(/(?!^-)[^0-9]/g, "");
   };
-  
+
   VMasker.toAlphaNumeric = function(value) {
     return value.toString().replace(/[^a-z0-9 ]+/i, "");
   };
 
   return VMasker;
-}));
+}));

lib/text-input-mask.js

@@ -18,6 +18,11 @@ export default class TextInputMask extends BaseTextComponent {
 
 	_onChangeText(text) {
 		let self = this;
+
+		if(!this._checkText(text)) {
+			return;
+		}
+
 		self.updateValue(text)
 			.then(maskedText => {
 				if(self.props.onChangeText) {
@@ -26,6 +31,14 @@ export default class TextInputMask extends BaseTextComponent {
 			});
 	}
 
+	_checkText(text) {
+		if(this.props.checkText) {
+			return this.props.checkText(this.state.value, text);
+		}
+
+		return true;
+	}
+
 	render() {
 		return (
 			<TextInput

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-masked-text",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Text and TextInput with mask for React Native applications",
   "main": "index.js",
   "scripts": {