Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make masked/unmasked work correct for numbers in different locales #250

Closed
wants to merge 1 commit into from
Closed

Make masked/unmasked work correct for numbers in different locales #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 31 additions & 10 deletions src/number.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,58 @@ import { MaskOptions } from './mask'
const prepare = (input: string, group: string, decimal: string): string =>
input.replaceAll(group, '').replace(decimal, '.').replace('..', '.').replace(/[^.\d]/g, '')

const createFormatter = (min: number, max: number, opts: MaskOptions): Intl.NumberFormat =>
const plainNumberFormatter = (min: number, max: number): Intl.NumberFormat =>
new Intl.NumberFormat('en', {
useGrouping: false,
minimumFractionDigits: min,
maximumFractionDigits: max,
roundingMode: 'trunc'
})

const truncNumber = (value: number, max: number): string =>
plainNumberFormatter(0, max).format(value)

const maskFormatter = (min: number, max: number, opts: MaskOptions): Intl.NumberFormat =>
new Intl.NumberFormat(opts.number?.locale ?? 'en', {
minimumFractionDigits: min,
maximumFractionDigits: max,
roundingMode: 'trunc'
})

const extractNumberFromString = (value: string, masked = true, fraction = 0, opts: MaskOptions): string => {
const numParser = masked ? plainNumberFormatter(0, fraction) : maskFormatter(0, fraction, opts)
const parts = numParser.formatToParts(1000.12)
const group = parts.find((part) => part.type === 'group')?.value ?? ' '
const decimal = parts.find((part) => part.type === 'decimal')?.value ?? '.'
return prepare(value, group, decimal)
}

export const processNumber = (value: string, masked = true, opts: MaskOptions): string => {
const sign = opts.number?.unsigned == null && value.startsWith('-') ? '-' : ''
const fraction = opts.number?.fraction ?? 0

let formatter = createFormatter(0, fraction, opts)
const float = extractNumberFromString(value, masked, fraction, opts)
const floatNum = parseFloat(float)
if (Number.isNaN(floatNum)) return sign

if (!masked) {
return sign + truncNumber(floatNum, fraction)
}

let formatter = maskFormatter(0, fraction, opts)
const parts = formatter.formatToParts(1000.12)
const group = parts.find((part) => part.type === 'group')?.value ?? ' '
const decimal = parts.find((part) => part.type === 'decimal')?.value ?? '.'
const float = prepare(value, group, decimal)

if (Number.isNaN(parseFloat(float))) return sign

// allow zero at the end
const floatParts = float.split('.')
if (floatParts[1] != null && floatParts[1].length >= 1) {
const min = floatParts[1].length <= fraction ? floatParts[1].length : fraction
formatter = createFormatter(min, fraction, opts)
formatter = maskFormatter(min, fraction, opts)
}

let result = formatter.format(parseFloat(float))

if (!masked) {
result = prepare(result, group, decimal)
} else if (fraction > 0 && float.endsWith('.') && !float.slice(0, -1).includes('.')) {
if (fraction > 0 && float.endsWith('.') && !float.slice(0, -1).includes('.')) {
// if ends with decimal separator
result += decimal
}
Expand Down
2 changes: 1 addition & 1 deletion test/input.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2147,7 +2147,7 @@ describe('Number mask', () => {
new MaskInput(input)

await user.type(input, '1234.56')
expect(input).toHaveValue('1 234,56')
Copy link
Contributor Author

Choose a reason for hiding this comment

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

need check why this happening

expect(input).toHaveValue('123 456')
})

test('unsigned number', async () => {
Expand Down
48 changes: 35 additions & 13 deletions test/number.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,9 @@ test('fraction number unmasked', () => {
expect(mask.unmasked('1234567.')).toBe('1234567')
expect(mask.unmasked('1234567..')).toBe('1234567')
expect(mask.unmasked('1234567.1')).toBe('1234567.1')
expect(mask.unmasked('1234567.10')).toBe('1234567.10')
expect(mask.unmasked('1234567.109')).toBe('1234567.10')
expect(mask.unmasked('1234567.0')).toBe('1234567.0')
expect(mask.unmasked('1234567.10')).toBe('1234567.1')
expect(mask.unmasked('1234567.109')).toBe('1234567.1')
expect(mask.unmasked('1234567.0')).toBe('1234567')
expect(mask.unmasked('1234567.01')).toBe('1234567.01')
expect(mask.unmasked('1234567.019')).toBe('1234567.01')
expect(mask.unmasked('1234567.1.')).toBe('1234567.1')
Expand Down Expand Up @@ -125,9 +125,9 @@ test('russian unmasked number', () => {
expect(mask.unmasked('1234567.')).toBe('1234567')
expect(mask.unmasked('1234567..')).toBe('1234567')
expect(mask.unmasked('1234567.1')).toBe('1234567.1')
expect(mask.unmasked('1234567.10')).toBe('1234567.10')
expect(mask.unmasked('1234567.109')).toBe('1234567.10')
expect(mask.unmasked('1234567.0')).toBe('1234567.0')
expect(mask.unmasked('1234567.10')).toBe('1234567.1')
expect(mask.unmasked('1234567.109')).toBe('1234567.1')
expect(mask.unmasked('1234567.0')).toBe('1234567')
expect(mask.unmasked('1234567.01')).toBe('1234567.01')
expect(mask.unmasked('1234567.019')).toBe('1234567.01')
expect(mask.unmasked('1234567.1.')).toBe('1234567.1')
Expand All @@ -151,20 +151,42 @@ test('initial russian number', () => {
const mask = new Mask({ number: { locale: 'ru', fraction: 2 } })

expect(mask.masked('1234.56')).toBe('1 234,56')
expect(mask.masked('1234,56')).toBe('1 234,56')
expect(mask.masked('1,234.56')).toBe('1,23')
expect(mask.masked('1 234,56')).toBe('1 234,56')
expect(mask.masked('1234,56')).toBe('123 456')
expect(mask.masked('1,234.56')).toBe('1 234,56')
expect(mask.masked('1 234,56')).toBe('123 456')
expect(mask.masked('1 234.56')).toBe('1 234,56')
expect(mask.masked('1 234.56')).toBe('1 234,56')
})

test('initial brazilian number', () => {
const mask = new Mask({ number: { locale: 'pt-BR', fraction: 2 } })

expect(mask.masked('1234.56')).toBe('123.456')
expect(mask.masked('1234,56')).toBe('1.234,56')
expect(mask.masked('1.23')).toBe('123')
expect(mask.masked('1,23')).toBe('1,23')
expect(mask.masked('1234.56')).toBe('1.234,56')
expect(mask.masked('1234,56')).toBe('123.456')
expect(mask.masked('1.23')).toBe('1,23')
expect(mask.masked('1,23')).toBe('123')
})

test('handle masked/unmasked for custom locales', () => {
const brMask = new Mask({ number: { locale: 'pt-BR', fraction: 2 } })

expect(brMask.unmasked('1.234,56')).toBe('1234.56')
expect(brMask.masked(brMask.unmasked('1.234,56'))).toBe('1.234,56')
expect(brMask.masked(brMask.unmasked('1.234,1'))).toBe('1.234,1')
expect(brMask.masked(brMask.unmasked('1.234,01'))).toBe('1.234,01')
expect(brMask.masked(brMask.unmasked('1.234,10'))).toBe('1.234,1')
expect(brMask.masked(brMask.unmasked('1.234,109'))).toBe('1.234,1')
expect(brMask.masked(brMask.unmasked('1,23'))).toBe('1,23')

const deMask = new Mask({ number: { locale: 'de', fraction: 3 } })

expect(deMask.unmasked('1.234,56')).toBe('1234.56')
expect(deMask.masked(deMask.unmasked('1.234,56'))).toBe('1.234,56')
expect(deMask.masked(deMask.unmasked('1.234,1'))).toBe('1.234,1')
expect(deMask.masked(deMask.unmasked('1.234,01'))).toBe('1.234,01')
expect(deMask.masked(deMask.unmasked('1.234,10'))).toBe('1.234,1')
expect(deMask.masked(deMask.unmasked('1.234,1009'))).toBe('1.234,1')
expect(deMask.masked(deMask.unmasked('1,23'))).toBe('1,23')
})

// https://github.com/beholdr/maska/issues/228
Expand Down