fix: substringvalue with mask

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)

sandbox/client.html

@@ -64,6 +64,15 @@
           value="${mask('1270', '##0,00%', {reverse: true})}"
         />
       `
+
+      app.innerHTML += `
+        <input
+          type="text"
+          class="cpf"
+          data-mask="cpf"
+          value="${mask('1270', '000.000.000-00', {reverse: true})}"
+        />
+      `
     })()
 
     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})
+    })
+
   </script>
 
 </body>

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'
   }

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) {

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(
+      <App
+        current="12345678901234"
+        mask="00.000.000/0000-00"
+        options={{ reverse: true }}
+      />
+    )
+    const input = screen.getByTestId<HTMLInputElement>('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')
+  })
+})