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

Comparing version 1.1.1 to 1.2.0

__tests__/cel-phone.mask.test.js

@@ -97,2 +97,30 @@ import { CelPhoneMask } from '../lib/masks';
     expect(isValid).toBe(false);
+});
+
+test('5188888888 results (51) 8888-8888 and raw value 5188888888', () => {
+    var mask = new CelPhoneMask();
+    var expected = '(51) 8888-8888';
+    var received = mask.getValue('5188888888');
+
+    var expectedRawValue = '5188888888';
+    var receivedRawValue = mask.getRawValue(received);
+
+    expect(received).toBe(expected);
+    expect(receivedRawValue).toBe(expectedRawValue);
+});
+
+test('123777777777 dddMask=999  results 123 77777-7777 and raw value 123777777777', () => {
+    var mask = new CelPhoneMask();
+    var expected = '123 77777-7777';
+    var received = mask.getValue('123777777777', {
+        dddMask: '999 '
+    });
+
+    var expectedRawValue = '123777777777';
+    var receivedRawValue = mask.getRawValue(received, {
+        dddMask: '999 '
+    });
+
+    expect(received).toBe(expected);
+    expect(receivedRawValue).toBe(expectedRawValue);
 });

__tests__/cnpj.mask.test.js

@@ -54,2 +54,14 @@ import { CnpjMask } from '../lib/masks';
     expect(isValid).toBe(false);
+});
+
+test('79885262000130 results 79.885.262/0001-30 and raw value 79885262000130', () => {
+    var mask = new CnpjMask();
+    var expected = '79.885.262/0001-30';
+    var received = mask.getValue('79885262000130');
+
+    var expectedRawValue = '79885262000130';
+    var receivedRawValue = mask.getRawValue(received);
+
+    expect(received).toBe(expected);
+    expect(receivedRawValue).toBe(expectedRawValue);
 });

__tests__/cpf.mask.test.js

@@ -54,2 +54,14 @@ import { CpfMask } from '../lib/masks';
     expect(isValid).toBe(false);
+});
+
+test('12312312356 results 123.123.123-56 and raw value 12312312356', () => {
+    var mask = new CpfMask();
+    var expected = '123.123.123-56';
+    var received = mask.getValue('12312312356');
+
+    var expectedRawValue = '12312312356';
+    var receivedRawValue = mask.getRawValue(received);
+
+    expect(received).toBe(expected);
+    expect(receivedRawValue).toBe(expectedRawValue);
 });

__tests__/credit-card.mask.test.js

@@ -36,2 +36,40 @@ import { CreditCardMask } from '../lib/masks';
     expect(received).toBe(expected);
+});
+
+test('1234123412341234 obfuscated false results 1234 1234 1234 1234 and raw value [1234, 1234, 1234, 1234]', () => {
+    var mask = new CreditCardMask();
+    var options = {
+        obfuscated: false
+    };
+
+    var expected = '1234 1234 1234 1234';
+    var received = mask.getValue('1234123412341234', options);
+
+    var expectedRawValue = ['1234', '1234', '1234', '1234'];
+    var receivedRawValue = mask.getRawValue(received, options);
+
+    expect(received).toBe(expected);
+
+    expectedRawValue.forEach((val, index) => {
+        expect(val).toBe(receivedRawValue[index]);
+    });
+});
+
+test('1234123412341234 obfuscated true results 1234 **** **** 1234 and raw value [1234, ****, ****, 1234]', () => {
+    var mask = new CreditCardMask();
+    var options = {
+        obfuscated: true
+    };
+
+    var expected = '1234 **** **** 1234';
+    var received = mask.getValue('1234123412341234', options);
+
+    var expectedRawValue = ['1234', '****', '****', '1234'];
+    var receivedRawValue = mask.getRawValue(received, options);
+
+    expect(received).toBe(expected);
+
+    expectedRawValue.forEach((val, index) => {
+        expect(val).toBe(receivedRawValue[index]);
+    });
 });

__tests__/custom.mask.test.js

@@ -114,2 +114,21 @@ import { CustomMask } from '../lib/masks';
     expect(isValid).toBe(true);
+});
+
+test('123 with mask 999 results 123 and raw value 123(type Number)', () => {
+    var mask = new CustomMask();
+    var options = {
+        mask: '999',
+        getRawValue: function(maskedValue, settings) {
+            return Number(maskedValue);
+        }
+    };
+
+    var expected = '123';
+    var received = mask.getValue('123', options);
+
+    var expectedRawValue = 123;
+    var receivedRawValue = mask.getRawValue(received, options);
+
+    expect(received).toBe(expected);
+    expect(receivedRawValue).toBe(expectedRawValue);
 });

__tests__/datetime.mask.test.js

 import { DatetimeMask } from '../lib/masks';
+var moment = require('moment');
 
+function compareMomentObj(dateTimeA, dateTimeB) {
+    var momentA = moment(dateTimeA,"DD/MM/YYYY");
+    var momentB = moment(dateTimeB,"DD/MM/YYYY");
+    if (momentA > momentB) return 1;
+    else if (momentA < momentB) return -1;
+    else return 0;
+}
+
 test('getType results datetime', () => {
@@ -82,2 +91,14 @@ var expected = 'datetime';
     expect(isValid).toBe(true);
+});
+
+test('01011990174030 with format DD/MM/YYYY HH:mm:ss results 01/01/1990 17:40:30 and raw value Date', () => {
+    var mask = new DatetimeMask();
+    var expected = '01/01/1990 17:40:30';
+    var received = mask.getValue('01011990174030');
+
+    var expectedRawValue = moment(received, 'DD/MM/YYYY HH:mm:ss', true);
+    var receivedRawValue = mask.getRawValue(received); 
+
+    expect(received).toBe(expected);
+    expect(compareMomentObj(receivedRawValue, expectedRawValue)).toBe(0);
 });

__tests__/money.mask.test.js

@@ -136,2 +136,54 @@ import { MoneyMask } from '../lib/masks';
     expect(received).toBe(expected);
-})
+});
+
+test('1 results R$ 0,01 and raw value 0.01', () => {
+    var mask = new MoneyMask();
+    var expected = 'R$ 0,01';
+    var received = mask.getValue('1');
+
+    var expectedRawValue = 0.01;
+    var receivedRawValue = mask.getRawValue(received);
+
+    expect(received).toBe(expected);
+    expect(receivedRawValue).toBe(expectedRawValue);
+});
+
+test('111111 results R$ 1.111,11 and raw value 1111.11', () => {
+    var mask = new MoneyMask();
+    var expected = 'R$ 1.111,11';
+    var received = mask.getValue('111111');
+
+    var expectedRawValue = 1111.11;
+    var receivedRawValue = mask.getRawValue(received);
+
+    expect(received).toBe(expected);
+    expect(receivedRawValue).toBe(expectedRawValue);
+});
+
+test('1 zeroCents results R$ 1,00 and raw value 1', () => {
+    var mask = new MoneyMask();
+    var expected = 'R$ 1,00';
+    var received = mask.getValue('1', {
+        zeroCents: true
+    });
+
+    var expectedRawValue = 1;
+    var receivedRawValue = mask.getRawValue(received);
+
+    expect(received).toBe(expected);
+    expect(receivedRawValue).toBe(expectedRawValue);
+});
+
+test('111111 delimiter , results R$ 1,111,11 and raw value 1111.11', () => {
+    var mask = new MoneyMask();
+    var expected = 'R$ 1,111,11';
+    var received = mask.getValue('111111', {
+        delimiter: ','
+    });
+
+    var expectedRawValue = 1111.11;
+    var receivedRawValue = mask.getRawValue(received);
+
+    expect(received).toBe(expected);
+    expect(receivedRawValue).toBe(expectedRawValue);
+});

__tests__/only-numbers.mask.js

@@ -32,2 +32,14 @@ import { OnlyNumbersMask } from '../lib/masks';
     expect(received).toBe(expected);
+});
+
+test('1 results 1 and raw value 1', () => {
+    var mask = new OnlyNumbersMask();
+    var expected = '1';
+    var received = mask.getValue('1');
+
+    var expectedRawValue = '1';
+    var receivedRawValue = mask.getRawValue(received);
+
+    expect(received).toBe(expected);
+    expect(receivedRawValue).toBe(expectedRawValue);
 });

__tests__/zip-code.mask.test.js

@@ -42,2 +42,14 @@ import { ZipCodeMask } from '../lib/masks';
     expect(isValid).toBe(true);
+});
+
+test('11111111 results 11111-111 and raw value 11111111', () => {
+    var mask = new ZipCodeMask();
+    var expected = '11111-111';
+    var received = mask.getValue('11111111');
+
+    var expectedRawValue = '11111111';
+    var receivedRawValue = mask.getRawValue(received);
+
+    expect(received).toBe(expected);
+    expect(receivedRawValue).toBe(expectedRawValue);
 });

lib/base-text-component.js

@@ -40,5 +40,13 @@ import React, { Component } from 'react';
             this._getDefaultValue(this.state.value),
-            this.state.options);
+            this.state.options
+        );
     }
 
+    getRawValue() {
+        return this._maskHandler.getRawValue(
+            this._getDefaultValue(this.state.value),
+            this.state.options
+        );
+    }
+
     _resolveMaskHandler() {
@@ -45,0 +53,0 @@ this._maskHandler = MaskResolver.resolve(this.state.type);

lib/masks/_base.mask.js

@@ -19,2 +19,6 @@ var VMasker = require('../internal-dependencies/vanilla-masker');
 
+	getRawValue(maskedValue, settings) {
+		return maskedValue;
+	}
+
     getDefaultValue(value) {
@@ -29,4 +33,4 @@ if(value === undefined || value === null) {
 	removeNotNumbers(text) {
-		return text.replace(/[^0-9\.]+/g, '');
+		return text.replace(/[^0-9]+/g, '');
 	}
 }

lib/masks/cel-phone.mask.js

@@ -20,2 +20,6 @@ import BaseMask from './_base.mask';
 
+	getRawValue(maskedValue, settings) {
+		return super.removeNotNumbers(maskedValue);
+	}
+
     validate(value, settings) {
@@ -22,0 +26,0 @@ let valueToValidate = super.getDefaultValue(value);

lib/masks/cnpj.mask.js

@@ -33,2 +33,6 @@ import BaseMask from './_base.mask';
 
+    getRawValue(maskedValue, settings) {
+		return super.removeNotNumbers(maskedValue);
+	}
+
     validate(value, settings) {
@@ -35,0 +39,0 @@ return validateCnpj(value);

lib/masks/cpf.mask.js

@@ -61,2 +61,6 @@ import BaseMask from './_base.mask';
 
+    getRawValue(maskedValue, settings) {
+        return super.removeNotNumbers(maskedValue);
+    }
+
     validate(value, settings) {
@@ -63,0 +67,0 @@ return validateCPF(value);

lib/masks/credit-card.mask.js

@@ -28,2 +28,12 @@ import BaseMask from './_base.mask';
 
+    getRawValue(maskedValue, settings) {
+        if(!maskedValue) return [];
+
+        return maskedValue.split(' ').map(val => {
+            if (!val) return '';
+
+            return val.trim();
+        });
+    }
+
     _getMask(settings) {
@@ -30,0 +40,0 @@ let mergedSettings = super.mergeSettings(CREDIT_CARD_SETTINGS, settings);

lib/masks/custom.mask.js

@@ -16,2 +16,10 @@ import BaseMask from './_base.mask';
 
+    getRawValue(maskedValue, settings) {
+        if(!!settings && settings.getRawValue) {
+            return settings.getRawValue(maskedValue, settings);
+        }
+
+        return maskedValue;
+    }
+
     validate(value, settings) {
@@ -18,0 +26,0 @@ if(!!settings && settings.validator) {

lib/masks/datetime.mask.js

@@ -24,2 +24,7 @@ import BaseMask from './_base.mask';
 
+    getRawValue(maskedValue, settings) {
+        let mergedSettings = this._getMergedSettings(settings);
+        return moment(maskedValue, mergedSettings.format, true);
+    }
+
     validate(value, settings) {
@@ -26,0 +31,0 @@ var maskedValue = this.getValue(value, settings);

lib/masks/money.mask.js

 import BaseMask from './_base.mask';
 
 const MONEY_MASK_SETTINGS = {
-	precision: 2,
-	separator: ',',
-	delimiter: '.',
-	unit: 'R$',
-	suffixUnit: '',
-	zeroCents: false
+    precision: 2,
+    separator: ',',
+    delimiter: '.',
+    unit: 'R$',
+    suffixUnit: '',
+    zeroCents: false
 };
@@ -19,8 +19,27 @@
         let mergedSettings = super.mergeSettings(MONEY_MASK_SETTINGS, settings);
-		return this.getVMasker().toMoney(value, mergedSettings);
+        return this.getVMasker().toMoney(value, mergedSettings);
     }
 
+    getRawValue(maskedValue, settings) {
+        let mergedSettings = super.mergeSettings(MONEY_MASK_SETTINGS, settings);
+        let normalized = super.removeNotNumbers(maskedValue);
+
+        let dotPosition = normalized.length - mergedSettings.precision;
+        normalized = this._insert(normalized, dotPosition, '.');
+
+        return Number(normalized);
+    }
+
     validate(value, settings) {
         return true;
     }
+
+    _insert(text, index, string) {
+        if (index > 0) {
+            return text.substring(0, index) + string + text.substring(index, text.length);
+        }
+        else {
+            return string + text;
+        }   
+    };
 }

lib/masks/only-numbers.mask.js

@@ -12,2 +12,6 @@ import BaseMask from './_base.mask';
 
+    getRawValue(maskedValue, settings) {
+        return super.removeNotNumbers(maskedValue);
+    }
+
     validate(value, settings) {
@@ -14,0 +18,0 @@ return true;

lib/masks/zip-code.mask.js

@@ -13,2 +13,6 @@ import BaseMask from './_base.mask';
 
+    getRawValue(maskedValue, settings) {
+        return super.removeNotNumbers(maskedValue);
+    }
+
     validate(value, settings) {
@@ -15,0 +19,0 @@ if(!!value) {

package.json

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

README.md

@@ -32,2 +32,6 @@ # react-native-masked-text
 		let valid = this.refs['myDateText'].isValid();
+
+		// get converted value. Using type=datetime, it returns the moment object.
+		// If it's using type=money, it returns a Number object.
+		let rawValue = this.refs['myDateText'].getRawValue();
 	}
@@ -111,2 +115,6 @@
 			* `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
 
@@ -131,2 +139,12 @@ For `type={'credit-card'}` <br />
 	* *custom*: use custom validation, if it not exist, always returns true.
+* `getRawValue()`: get the converted value of mask.
+	* *credit-card*: return the array with the value parts. Ex: `1234 1234 1234 1234` returns `[1234, 1234, 1234, 1234]`.
+	* *cpf*: return the value without mask.
+	* *cnpj*: return the value without mask.
+	* *zip-code*: return the value without mask.
+	* *only-numbers*: return the value without mask.
+	* *money*: return the Number value. Ex: `R$ 1.234,56` returns `1234.56`.
+	* *cel-phone*: return the value without mask.
+	* *datetime*: return the `moment` object for the date and format.
+	* *custom*: use custom method (passed in options). If it not exists, returns the current value.
 
@@ -204,2 +222,5 @@
 # Changelog
+## 1.2.0
+* Adding `getRawValue`.
+
 ## 1.1.1
@@ -206,0 +227,0 @@ * Fixing toolbox-service reference (thanks to [ziftinpeki](https://github.com/ziftinpeki)).

No alert changes

Improved metrics

Total package byte prevSize

55423

increased by21.18%

Lines of code

1330

increased by19.18%

Number of lines in readme file

238

increased by9.68%

No dependency changes