Skip to content

Commit

Permalink
fix(NumberFormat): accept options like maximumFractionDigits (#2557)
Browse files Browse the repository at this point in the history 
For usage such as:

```jsx
<NumberFormat
  percent
  options={{ maximumFractionDigits: 2 }}
>
  26.2322
</NumberFormat>
```

should result in: `26.23 %`

while:

```jsx
<NumberFormat
  percent
  options={{ maximumFractionDigits: 2 }}
>
  26
</NumberFormat>
```

should result in: `26 %`
  • Loading branch information
@tujoworker
tujoworker authored Aug 15, 2023
1 parent f2372e4 commit 2e09e80
Show file tree
Hide file tree
Showing 2 changed files with 180 additions and 6 deletions.
21 changes: 15 additions & 6 deletions packages/dnb-eufemia/src/components/number-format/NumberUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,11 @@ export const format = (

if (parseFloat(decimals) >= 0) {
value = formatDecimals(value, decimals, omit_rounding, opts)
} else if (typeof opts.maximumFractionDigits === 'undefined') {
} else if (
typeof opts.maximumFractionDigits === 'undefined' &&
!isTrue(percent) &&
!isTrue(currency)
) {
// if no decimals are set, opts.maximumFractionDigits is set
// why do we this? because the ".toLocaleString" will else use 3 as the default
opts.maximumFractionDigits = 20
Expand Down Expand Up @@ -131,7 +135,9 @@ export const format = (
aria = _aria
} else if (isTrue(percent)) {
if (decimals === null) {
decimals = countDecimals(value)
if (typeof opts.maximumFractionDigits === 'undefined') {
decimals = countDecimals(value)
}
value = formatDecimals(value, decimals, omit_rounding, opts)
}

Expand Down Expand Up @@ -312,11 +318,14 @@ export const formatDecimals = (
if (decimals >= 0) {
opts.minimumFractionDigits = decimals
opts.maximumFractionDigits = decimals
}

const pos = String(value).indexOf('.')
if (pos > 0 && omit_rounding === true) {
value = String(value).substr(0, pos + 1 + decimals)
}
const pos = String(value).indexOf('.')
if (pos > 0 && omit_rounding === true) {
value = String(value).substring(
0,
pos + 1 + (decimals || opts.maximumFractionDigits)
)
}

return value
Expand Down
165 changes: 165 additions & 0 deletions packages/dnb-eufemia/src/components/number-format/__tests__/NumberFormat.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -423,6 +423,171 @@ describe('NumberFormat component', () => {
).not.toBeInTheDocument()
})

it('percent should respect options like maximumFractionDigits', () => {
const { rerender } = render(
<Component percent options={{ maximumFractionDigits: 2 }}>
12.3456
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,35 %')

rerender(
<Component
percent
omit_rounding
options={{ maximumFractionDigits: 2 }}
>
12.3456
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,34 %')

rerender(
<Component percent options={{ maximumFractionDigits: 2 }}>
12
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12 %')

rerender(
<Component
percent
options={{ minimumFractionDigits: 1, maximumFractionDigits: 2 }}
>
12
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,0 %')

rerender(<Component percent>12</Component>)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12 %')

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12 %')

rerender(
<Component percent decimals={2}>
12
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,00 %')

rerender(
<Component percent decimals={2}>
12.3456
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,35 %')

rerender(
<Component percent omit_rounding decimals={2}>
12.3456
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,34 %')
})

it('currency should respect options like maximumFractionDigits', () => {
const { rerender } = render(
<Component currency options={{ maximumFractionDigits: 2 }}>
12.3456
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,35 kr')

rerender(
<Component
currency
omit_rounding
options={{ maximumFractionDigits: 2 }}
>
12.3456
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,34 kr')

rerender(
<Component currency options={{ maximumFractionDigits: 2 }}>
12
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,00 kr')

rerender(<Component currency>12</Component>)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,00 kr')

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,00 kr')

rerender(
<Component currency decimals={2}>
12
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,00 kr')

rerender(
<Component currency decimals={2}>
12.3456
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,35 kr')

rerender(
<Component currency omit_rounding decimals={2}>
12.3456
</Component>
)

expect(
document.querySelector('.dnb-number-format__visible').textContent
).toBe('12,34 kr')
})

it('should validate with ARIA rules', async () => {
const Comp = render(
<Component value={-value} currency srLabel="Total:" />
Expand Down

1 comment on commit 2e09e80

@vercel
Copy link

@vercel vercel bot commented on 2e09e80 Aug 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

eufemia – ./

eufemia-eufemia.vercel.app
eufemia-git-main-eufemia.vercel.app
eufemia-dnb-design-system-portal.vercel.app

Please sign in to comment.