diff --git a/README.md b/README.md index 21ed695..75f4f96 100644 --- a/README.md +++ b/README.md @@ -68,7 +68,7 @@ Type information about the function * @param {object} options options object * @return {string} mask result */ -fn(value, mask[ , options]): string +fn(value, mask[ , options]) ``` @@ -153,3 +153,11 @@ mask('25525525', m) // => 255.255.25 mask('2552552552', m) // => 255.255.255.2 mask('255255255255', m) // => 255.255.255.255 ``` + +### We recommended for you +Maybe when working with price values directly in inputs, this library is not suitable for your needs. And we recommend exploring the [make-currency](https://www.npmjs.com/package/make-currency) library! + + +### License + +[MIT](/license) diff --git a/sandbox/client.html b/sandbox/client.html index 5e3616d..881ceb5 100644 --- a/sandbox/client.html +++ b/sandbox/client.html @@ -64,6 +64,15 @@ value="${mask('1270', '##0,00%', {reverse: true})}" /> ` + + app.innerHTML += ` + + ` })() const mask__money = document.querySelector('.mask__money') @@ -93,12 +102,19 @@ currentTarget.value = mask(val, mask) }) + const percent = document.querySelector('.percent') percent.addEventListener('input', function(e) { const currentTarget = e.target currentTarget.value = mask(currentTarget.value, '##0,00%', {reverse: true}) }) + const cpf = document.querySelector('.cpf') + cpf.addEventListener('input', function(e) { + const currentTarget = e.target + currentTarget.value = mask(currentTarget.value, '000.000.000-00', {reverse: true}) + }) + diff --git a/src/models/config/index.ts b/src/models/config/index.ts index 4a24aa8..9a5c9d2 100644 --- a/src/models/config/index.ts +++ b/src/models/config/index.ts @@ -14,6 +14,17 @@ class Config { return [] } + dataValue(value: string, mask: string, options: TOptions) { + const checkIsAvailable = [options.reverse, Array.from(mask).includes('#')] + const isAvailable = checkIsAvailable.every(Boolean) + + if (isAvailable) return value + + const current = value.substring(0, mask.length) + + return current + } + get addMethod(): 'push' | 'unshift' { return 'push' } diff --git a/src/models/mask/index.ts b/src/models/mask/index.ts index a63efbd..d7a2c68 100644 --- a/src/models/mask/index.ts +++ b/src/models/mask/index.ts @@ -6,12 +6,13 @@ import { TOptions } from './types' function maskFn(value: string, mask: string, options: TOptions = {}) { const config = new Config() + const dataValue = config.dataValue(value, mask, options) const buf = config.buf let m = 0 let v = 0 const maskLen = mask.length - const valLen = value.length + const valLen = dataValue.length let offset = 1 let addMethod = config.addMethod let resetPos = -1 @@ -39,7 +40,7 @@ function maskFn(value: string, mask: string, options: TOptions = {}) { let lastUntranslatedMaskChar while (check()) { const maskDigit = mask.charAt(m) - const valDigit = value.charAt(v) + const valDigit = dataValue.charAt(v) const translation = config.patterns[maskDigit] if (translation) { diff --git a/src/models/mask/test.tsx b/src/models/mask/test.tsx index 9868554..4270a3d 100644 --- a/src/models/mask/test.tsx +++ b/src/models/mask/test.tsx @@ -996,3 +996,29 @@ describe('With input values', () => { expect(input.value).toBe('1234,56%') }) }) + +describe('React.js', () => { + it('CNPJ exemple with reverse', async () => { + render( + + ) + const input = screen.getByTestId('input') + + expect(input.value).toBe('12.345.678/9012-34') + + await userEvent.type(input, '5') + + expect(input.value).toBe('12.345.678/9012-34') + + await userEvent.type(input, '{backspace}') + await userEvent.type(input, '{backspace}') + + await userEvent.type(input, '5456') + + expect(input.value).toBe('12.345.678/9012-54') + }) +})