fix(InputMasked): fix integerLimit option when used with decimals

dnbexperience · May 18, 2022 · 14fe5d9 · 14fe5d9
1 parent 09e5293
commit 14fe5d9
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 22 deletions.
diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMaskedUtils.js b/packages/dnb-eufemia/src/components/input-masked/InputMaskedUtils.js
@@ -71,14 +71,25 @@ export const correctNumberValue = ({
     return value
   }
 
+  const decimalPos = value.indexOf('.')
+
+  if (
+    maskParams.integerLimit &&
+    typeof maskParams.integerLimit === 'number'
+  ) {
+    const limit = maskParams.integerLimit
+    const integers = value.slice(0, limit)
+    const decimals = decimalPos > 0 ? value.slice(decimalPos) : ''
+    value = integers + decimals
+  }
+
   const shouldHaveDecimals =
     maskParams.allowDecimal ||
     (maskParams.decimalLimit > 0 && maskParams.allowDecimal !== false)
 
   if (!shouldHaveDecimals) {
-    const indexOf = value.indexOf('.')
-    if (indexOf > -1) {
-      value = value.slice(0, indexOf)
+    if (decimalPos > -1) {
+      value = value.slice(0, decimalPos)
     }
   }
 

diff --git a/packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.js b/packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.js
@@ -692,6 +692,44 @@ describe('InputMasked component', () => {
     )
     expect(preventDefault).toBeCalledTimes(1)
   })
+
+  it('should set correct integerLimit', () => {
+    const Comp = mount(
+      <Component
+        value={1234.912345}
+        number_mask={{ integerLimit: 10, decimalLimit: 4 }}
+      />
+    )
+
+    expect(Comp.find('input').instance().value).toBe('1 234,9123')
+
+    Comp.setProps({
+      number_mask: { integerLimit: 10, decimalLimit: 0 },
+    })
+
+    expect(Comp.find('input').instance().value).toBe('1 234')
+
+    Comp.setProps({
+      value: 1234,
+      number_mask: { integerLimit: 10, decimalLimit: 0 },
+    })
+
+    expect(Comp.find('input').instance().value).toBe('1 234')
+
+    Comp.setProps({
+      value: '0.123',
+      number_mask: { integerLimit: 10, decimalLimit: 0 },
+    })
+
+    expect(Comp.find('input').instance().value).toBe('0')
+
+    Comp.setProps({
+      value: '0000.1234',
+      number_mask: { integerLimit: 4, decimalLimit: 2 },
+    })
+
+    expect(Comp.find('input').instance().value).toBe('0 000,12')
+  })
 })
 
 describe('InputMasked component with currency_mask', () => {
@@ -795,6 +833,17 @@ describe('InputMasked component with currency_mask', () => {
 
     expect(Comp.find('input').instance().value).toBe('')
   })
+
+  it('should set correct integerLimit', () => {
+    const Comp = mount(
+      <Component
+        value={12345678.912345}
+        currency_mask={{ integerLimit: 4 }}
+      />
+    )
+
+    expect(Comp.find('input').instance().value).toBe('1 234,91 kr')
+  })
 })
 
 describe('InputMasked component as_percent', () => {
@@ -1022,6 +1071,23 @@ describe('InputMasked component as_number', () => {
 
     expect(Comp.find('input').instance().value).toBe('12 345,678')
   })
+
+  it('should set correct integerLimit', () => {
+    const Comp = mount(
+      <Component
+        value={12345678.912345}
+        as_number
+        number_mask={{ integerLimit: 4, decimalLimit: 4 }}
+        locale="en-GB"
+      />
+    )
+
+    expect(Comp.find('input').instance().value).toBe('1 234.9123')
+
+    Comp.setProps({ locale: 'nb-NO' })
+
+    expect(Comp.find('input').instance().value).toBe('1 234,9123')
+  })
 })
 
 describe('InputMasked component as_currency', () => {
@@ -1067,6 +1133,23 @@ describe('InputMasked component as_currency', () => {
     expect(Comp.find('input').instance().value).toBe('12 345 kr')
   })
 
+  it('should set correct integerLimit', () => {
+    const Comp = mount(
+      <Component
+        value={12345678.912}
+        as_currency
+        currency_mask={{ integerLimit: 4, decimalLimit: 3 }}
+        locale="en-GB"
+      />
+    )
+
+    expect(Comp.find('input').instance().value).toBe('1 234.912 NOK')
+
+    Comp.setProps({ locale: 'nb-NO' })
+
+    expect(Comp.find('input').instance().value).toBe('1 234,912 kr')
+  })
+
   it('event "on_change" gets emmited with correct value', () => {
     const newValue = 'NOK 123456789,678 kr'
 

diff --git a/packages/dnb-eufemia/src/components/input-masked/addons/createNumberMask.js b/packages/dnb-eufemia/src/components/input-masked/addons/createNumberMask.js
@@ -28,7 +28,6 @@ export default function createNumberMask({
   decimalLimit = 2,
   requireDecimal = false,
   allowNegative = true,
-  integerLimit = null,
 } = {}) {
   // http://stackoverflow.com/a/10899795/604296
   function addThousandsSeparator(n, thousandsSeparatorSymbol) {
@@ -37,8 +36,6 @@ export default function createNumberMask({
 
   const prefixLength = (prefix && prefix.length) || 0
   const suffixLength = (suffix && suffix.length) || 0
-  const thousandsSeparatorSymbolLength =
-    (thousandsSeparatorSymbol && thousandsSeparatorSymbol.length) || 0
 
   function numberMask(rawValue = emptyString) {
     const rawValueLength = rawValue.length
@@ -94,22 +91,6 @@ export default function createNumberMask({
       }
     }
 
-    if (integerLimit && typeof integerLimit === number) {
-      const thousandsSeparatorRegex =
-        thousandsSeparatorSymbol === '.'
-          ? '[.]'
-          : `${thousandsSeparatorSymbol}`
-      const numberOfThousandSeparators = (
-        integer.match(new RegExp(thousandsSeparatorRegex, 'g')) || []
-      ).length
-
-      integer = integer.slice(
-        0,
-        integerLimit +
-          numberOfThousandSeparators * thousandsSeparatorSymbolLength
-      )
-    }
-
     integer = integer.replace(nonDigitsRegExp, emptyString)
 
     integer = includeThousandsSeparator