Merge pull request #4 from benhurott/feature/raw-value

Feature/raw value

.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 .vscode/
 npm-debug.log
+
+poc.js

README.md

@@ -29,6 +29,10 @@ export default class MyComponent extends Component {
 		// Ex: if you input 40/02/1990 30:20:20, it will return false
 		//	   because in this case, the day and the hour is invalid.
 		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();
 	}
 
 	render() {
@@ -107,6 +111,10 @@ For `type={'custom'}` <br />
 		* 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 />
 * *options={...}*
@@ -126,6 +134,16 @@ For `type={'credit-card'}` <br />
 	* *cel-phone*: return true if the mask is complete.
 	* *datetime*: return true if the date value is valid for format.
 	* *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.
 
 
 ## Usage (TextMask)
@@ -198,6 +216,9 @@ var money = MaskService.toMask('money', '123', {
 
 
 # Changelog
+## 1.2.0
+* Adding `getRawValue`.
+
 ## 1.1.1
 * Fixing toolbox-service reference (thanks to [ziftinpeki](https://github.com/ziftinpeki)).
 

__tests__/cel-phone.mask.test.js

@@ -94,4 +94,32 @@ test('1237777777 dddMask=999  is not valid', () => {
     });
 
     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

@@ -51,4 +51,16 @@ test('7988526200013 results 79.885.262/0001-3 and is not valid', () => {
 
     expect(received).toBe(expected);
     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

@@ -51,4 +51,16 @@ test('1234567890 results 123.456.789-0 and is not valid', () => {
 
     expect(received).toBe(expected);
     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

@@ -33,4 +33,42 @@ test('1234123412341234 obfuscated false results 1234 1234 1234 1234', () => {
     });
 
     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

@@ -111,4 +111,23 @@ test('ELF with mask AAAAA and custom validator results DWARF and is invalid', ()
 
     expect(expected).toBe(received);
     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

@@ -1,4 +1,13 @@
 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', () => {
     var expected = 'datetime';
@@ -79,4 +88,16 @@ test('01011990174030 with format DD/MM/YYYY HH:mm:ss results 01/01/1990 17:40:30
 
     expect(received).toBe(expected);
     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

@@ -133,4 +133,56 @@ test('US$ config with value 1234567 results US$ 12,345.67', () => {
     });
 
     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

@@ -29,4 +29,16 @@ test('abc results ', () => {
     var received = mask.getValue('abc');
 
     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

@@ -39,4 +39,16 @@ test('11111111 results 11111-111 and is not valid', () => {
     var isValid = mask.validate(received);
 
     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

@@ -37,7 +37,15 @@ export default class BaseTextComponent extends Component {
     isValid() {
         return this._maskHandler.validate(
             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() {

lib/masks/_base.mask.js

@@ -16,6 +16,10 @@ export default class BaseMask {
 		return obj3;
     }
 
+	getRawValue(maskedValue, settings) {
+		return maskedValue;
+	}
+
     getDefaultValue(value) {
 		if(value === undefined || value === null) {
 			return '';
@@ -25,6 +29,6 @@ export default class BaseMask {
 	}
 
 	removeNotNumbers(text) {
-		return text.replace(/[^0-9\.]+/g, '');
+		return text.replace(/[^0-9]+/g, '');
 	}
 }

lib/masks/cel-phone.mask.js

@@ -17,6 +17,10 @@ export default class CelPhoneMask extends BaseMask {
 		return this.getVMasker().toPattern(value, mask);
     }
 
+	getRawValue(maskedValue, settings) {
+		return super.removeNotNumbers(maskedValue);
+	}
+
     validate(value, settings) {
 		let valueToValidate = super.getDefaultValue(value);
 		valueToValidate = this.getValue(value, settings);

lib/masks/cnpj.mask.js

@@ -30,6 +30,10 @@ export default class CnpjMask extends BaseMask {
         return this.getVMasker().toPattern(value, CNPJ_MASK);
     }
 
+    getRawValue(maskedValue, settings) {
+		return super.removeNotNumbers(maskedValue);
+	}
+
     validate(value, settings) {
         return validateCnpj(value);
     }

lib/masks/cpf.mask.js

@@ -58,6 +58,10 @@ export default class CpfMask extends BaseMask {
         return this.getVMasker().toPattern(value, CPF_MASK);
     }
 
+    getRawValue(maskedValue, settings) {
+        return super.removeNotNumbers(maskedValue);
+    }
+
     validate(value, settings) {
         return validateCPF(value);
     }