From 07aae69bbbf472111bf0cb973b4a05457226b1e9 Mon Sep 17 00:00:00 2001 From: Lucas Teles Date: Tue, 23 Oct 2018 10:58:53 -0300 Subject: [PATCH] this commit adds rawValue to element dataset --- src/__tests__/clean.test.js | 25 +++++++++++ src/directive.js | 3 +- src/format.js | 83 +++++++++++++++++++++++++++---------- 3 files changed, 88 insertions(+), 23 deletions(-) create mode 100644 src/__tests__/clean.test.js diff --git a/src/__tests__/clean.test.js b/src/__tests__/clean.test.js new file mode 100644 index 00000000..bb24d7f3 --- /dev/null +++ b/src/__tests__/clean.test.js @@ -0,0 +1,25 @@ +import { clean } from '../format'; + +describe('format.js - clean function', () => { + + it('should return the entry value without the mask', () => { + // time with seconds + expect(clean('11:15:15', '##:##:##')).toBe('111515'); + // hours and minutes + expect(clean('20h15m', '##h##m')).toBe('2015'); + // date-time + expect(clean('27/10/2016 23:15', '##/##/#### ##:##')).toBe('271020162315'); + // credit card + expect(clean('4532 4782 5524 7634', '#### #### #### ####')).toBe('4532478255247634'); + // phone number + expect(clean('(999) 999-9999', '(###) ###-####')).toBe('9999999999'); + // phone number (US) + expect(clean('+1 (999) 999-9999', '+1 (###) ###-####')).toBe('9999999999'); + // CPF + expect(clean('390.533.447-05', '###.###.###-##')).toBe('39053344705'); + // CPNJ + expect(clean('53.288.196/0001-28', '##.###.###/####-##')).toBe('53288196000128'); + // Social Security number + expect(clean('365-03-8704', '###-##-####')).toBe('365038704'); + }); +}); diff --git a/src/directive.js b/src/directive.js index 295adc03..4926b755 100644 --- a/src/directive.js +++ b/src/directive.js @@ -1,5 +1,5 @@ /* eslint-disable no-param-reassign */ -import format from './format'; +import format, { clean } from './format'; import { trigger, queryInputElementInside } from './utils'; import { isAndroid, isChrome } from './utils/env'; @@ -21,6 +21,7 @@ function updateValue(el, force = false) { } el.dataset.previousValue = value; + el.dataset.rawValue = clean(value, mask) } /** diff --git a/src/format.js b/src/format.js index 31090d12..8927c833 100644 --- a/src/format.js +++ b/src/format.js @@ -11,33 +11,22 @@ export default function (text, wholeMask) { if (!wholeMask) return text; - const maskStartRegExp = /^([^#ANX]+)/; + return mask(clean(prepare(text, wholeMask), wholeMask), wholeMask); +} - if (+text.length === 1 && maskStartRegExp.test(wholeMask)) { - text = maskStartRegExp.exec(wholeMask)[0] + text; - } +/** + * Applies mask to data. + * + * @param {String} text String to mask (input value) + * @param {String} [wholeMask] Mask format, like `####-##` + * @returns {string} Formatted text + */ +export const mask = (text, wholeMask) => { + if (!wholeMask) return text; let newText = ''; let charOffset = 0; - // Cleans data to avoid value loss on dynamic mask changing - for (let maskIndex = 0; maskIndex < wholeMask.length; maskIndex += 1) { - const mask = wholeMask.charAt(maskIndex); - switch (mask) { - case '#': - break; - case 'A': - break; - case '?': - break; - case 'N': - break; - case 'X': - break; - default: - text = text.replace(mask, ''); - } - } for (let maskIndex = 0, x = 1; x && maskIndex < wholeMask.length; maskIndex += 1) { const char = text.charAt(maskIndex - charOffset); const mask = wholeMask.charAt(maskIndex); @@ -73,3 +62,53 @@ export default function (text, wholeMask) { } return newText; } + +/** + * Cleans data. + * + * @param {String} text String to clean (input value) + * @param {String} [wholeMask] Mask format, like `####-##` + * @returns {string} Cleaned text + */ +export const clean = (text, wholeMask) => { + if (!wholeMask) return text; + + for (let maskIndex = 0; maskIndex < wholeMask.length; maskIndex += 1) { + const mask = wholeMask.charAt(maskIndex); + switch (mask) { + case '#': + break; + case 'A': + break; + case '?': + break; + case 'N': + break; + case 'X': + break; + default: + text = text.replace(mask, ''); + } + } + + return text; +} + +/** + * Prepares data. + * + * @param {String} text String to prepare (input value) + * @param {String} [wholeMask] Mask format, like `####-##` + * @returns {string} Prepared text + */ +export const prepare = (text, wholeMask) => { + if (!wholeMask) return text; + + const maskStartRegExp = /^([^#ANX]+)/; + + if (+text.length === 1 && maskStartRegExp.test(wholeMask)) { + text = maskStartRegExp.exec(wholeMask)[0] + text; + } + + return text; +}