feat: add new options currencyDisplay and unitDisplay

dm4t2 · Oct 30, 2021 · ce38d4e · ce38d4e
1 parent 73904c2
commit ce38d4e
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 4 deletions.
diff --git a/src/api.ts b/src/api.ts
@@ -23,11 +23,26 @@ export enum NumberFormatStyle {
   Percent = 'percent'
 }
 
+export enum CurrencyDisplay {
+  Symbol = 'symbol',
+  NarrowSymbol = 'narrowSymbol',
+  Code = 'code',
+  Name = 'name'
+}
+
+export enum UnitDisplay {
+  Short = 'short',
+  Narrow = 'narrow',
+  Long = 'long'
+}
+
 export interface NumberInputOptions {
   locale?: string
   formatStyle: NumberFormatStyle
   currency?: string
+  currencyDisplay?: CurrencyDisplay
   unit?: string
+  unitDisplay?: UnitDisplay
   exportValueAsInteger?: boolean
   hidePrefixOrSuffixOnFocus?: boolean
   hideGroupingSeparatorOnFocus?: boolean

diff --git a/src/numberFormat.ts b/src/numberFormat.ts
@@ -1,5 +1,5 @@
 import { count, escapeRegExp, substringBefore } from './utils'
-import { NumberFormatStyle, NumberInputOptions } from './api'
+import { CurrencyDisplay, NumberFormatStyle, NumberInputOptions, UnitDisplay } from './api'
 import NumberFormatOptions = Intl.NumberFormatOptions
 
 export const DECIMAL_SEPARATORS = [',', '.', '٫']
@@ -9,7 +9,9 @@ export class NumberFormat {
   locale?: string
   style: NumberFormatStyle
   currency?: string
+  currencyDisplay?: CurrencyDisplay
   unit?: string
+  unitDisplay?: UnitDisplay
   digits: string[]
   decimalSymbol: string | undefined
   groupingSymbol: string
@@ -21,14 +23,23 @@ export class NumberFormat {
   suffix: string
 
   constructor(options: NumberInputOptions) {
-    const { formatStyle: style, currency, unit, locale, precision } = options
-    const numberFormat = new Intl.NumberFormat(locale, { currency, unit, style, minimumFractionDigits: style !== NumberFormatStyle.Currency ? 1 : undefined })
+    const { formatStyle: style, currency, currencyDisplay, unit, unitDisplay, locale, precision } = options
+    const numberFormat = new Intl.NumberFormat(locale, {
+      currency,
+      currencyDisplay,
+      unit,
+      unitDisplay,
+      style,
+      minimumFractionDigits: style !== NumberFormatStyle.Currency ? 1 : undefined
+    })
     const ps = numberFormat.format(style === NumberFormatStyle.Percent ? 1234.56 : 123456)
 
     this.locale = locale
     this.style = style
     this.currency = currency
+    this.currencyDisplay = currencyDisplay
     this.unit = unit
+    this.unitDisplay = unitDisplay
     this.digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => i.toLocaleString(locale))
     this.decimalSymbol = count(ps, this.digits[0]) ? ps.substr(ps.indexOf(this.digits[6]) + 1, 1) : undefined
     this.groupingSymbol = ps.substr(ps.indexOf(this.digits[3]) + 1, 1)
@@ -69,7 +80,14 @@ export class NumberFormat {
   }
 
   isValidIntegerFormat(formattedNumber: string, integerNumber: number): boolean {
-    const options = { style: this.style, currency: this.currency, unit: this.unit, minimumFractionDigits: 0 }
+    const options = {
+      style: this.style,
+      currency: this.currency,
+      currencyDisplay: this.currencyDisplay,
+      unit: this.unit,
+      unitDisplay: this.unitDisplay,
+      minimumFractionDigits: 0
+    }
     if (this.style === NumberFormatStyle.Percent) {
       integerNumber /= 100
     }
@@ -90,7 +108,9 @@ export class NumberFormat {
       ? new Intl.NumberFormat(this.locale, {
           style: this.style,
           currency: this.currency,
+          currencyDisplay: this.currencyDisplay,
           unit: this.unit,
+          unitDisplay: this.unitDisplay,
           ...options
         }).format(this.style === NumberFormatStyle.Percent ? value / 100 : value)
       : ''

diff --git a/tests/unit/__snapshots__/numberFormat.spec.ts.snap b/tests/unit/__snapshots__/numberFormat.spec.ts.snap
@@ -3,6 +3,7 @@
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: ar-SA_SAR 1`] = `
 NumberFormat {
   "currency": "SAR",
+  "currencyDisplay": undefined,
   "decimalSymbol": "٫",
   "digits": Array [
     "٠",
@@ -26,12 +27,14 @@ NumberFormat {
   "style": "currency",
   "suffix": " ر.س.‏",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: de-CH_EUR 1`] = `
 NumberFormat {
   "currency": "EUR",
+  "currencyDisplay": undefined,
   "decimalSymbol": ".",
   "digits": Array [
     "0",
@@ -55,12 +58,14 @@ NumberFormat {
   "style": "currency",
   "suffix": "",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: de-DE_EUR 1`] = `
 NumberFormat {
   "currency": "EUR",
+  "currencyDisplay": undefined,
   "decimalSymbol": ",",
   "digits": Array [
     "0",
@@ -84,12 +89,14 @@ NumberFormat {
   "style": "currency",
   "suffix": " €",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: en-GB_GBP 1`] = `
 NumberFormat {
   "currency": "GBP",
+  "currencyDisplay": undefined,
   "decimalSymbol": ".",
   "digits": Array [
     "0",
@@ -113,12 +120,14 @@ NumberFormat {
   "style": "currency",
   "suffix": "",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: en-IN_INR 1`] = `
 NumberFormat {
   "currency": "INR",
+  "currencyDisplay": undefined,
   "decimalSymbol": ".",
   "digits": Array [
     "0",
@@ -142,12 +151,14 @@ NumberFormat {
   "style": "currency",
   "suffix": "",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: en-US_USD 1`] = `
 NumberFormat {
   "currency": "USD",
+  "currencyDisplay": undefined,
   "decimalSymbol": ".",
   "digits": Array [
     "0",
@@ -171,12 +182,14 @@ NumberFormat {
   "style": "currency",
   "suffix": "",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: es-ES_EUR 1`] = `
 NumberFormat {
   "currency": "EUR",
+  "currencyDisplay": undefined,
   "decimalSymbol": ",",
   "digits": Array [
     "0",
@@ -200,12 +213,14 @@ NumberFormat {
   "style": "currency",
   "suffix": " €",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: es-ES_EUR 2`] = `
 NumberFormat {
   "currency": "EUR",
+  "currencyDisplay": undefined,
   "decimalSymbol": ",",
   "digits": Array [
     "0",
@@ -229,12 +244,14 @@ NumberFormat {
   "style": "currency",
   "suffix": " €",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: fa-IR_IRR 1`] = `
 NumberFormat {
   "currency": "IRR",
+  "currencyDisplay": undefined,
   "decimalSymbol": undefined,
   "digits": Array [
     "۰",
@@ -258,12 +275,14 @@ NumberFormat {
   "style": "currency",
   "suffix": "",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: fr-CH_CHF 1`] = `
 NumberFormat {
   "currency": "CHF",
+  "currencyDisplay": undefined,
   "decimalSymbol": ".",
   "digits": Array [
     "0",
@@ -287,12 +306,14 @@ NumberFormat {
   "style": "currency",
   "suffix": " CHF",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: ja_JPY 1`] = `
 NumberFormat {
   "currency": "JPY",
+  "currencyDisplay": undefined,
   "decimalSymbol": undefined,
   "digits": Array [
     "0",
@@ -316,12 +337,14 @@ NumberFormat {
   "style": "currency",
   "suffix": "",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: nl-NL_EUR 1`] = `
 NumberFormat {
   "currency": "EUR",
+  "currencyDisplay": undefined,
   "decimalSymbol": ",",
   "digits": Array [
     "0",
@@ -345,12 +368,14 @@ NumberFormat {
   "style": "currency",
   "suffix": "",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: pt_BRL 1`] = `
 NumberFormat {
   "currency": "BRL",
+  "currencyDisplay": undefined,
   "decimalSymbol": ",",
   "digits": Array [
     "0",
@@ -374,12 +399,14 @@ NumberFormat {
   "style": "currency",
   "suffix": "",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats currency should work for the respective locale and currency: zh_CNY 1`] = `
 NumberFormat {
   "currency": "CNY",
+  "currencyDisplay": undefined,
   "decimalSymbol": ".",
   "digits": Array [
     "0",
@@ -403,12 +430,14 @@ NumberFormat {
   "style": "currency",
   "suffix": "",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats decimal de-DE 1`] = `
 NumberFormat {
   "currency": undefined,
+  "currencyDisplay": undefined,
   "decimalSymbol": ",",
   "digits": Array [
     "0",
@@ -432,12 +461,14 @@ NumberFormat {
   "style": "decimal",
   "suffix": "",
   "unit": undefined,
+  "unitDisplay": undefined,
 }
 `;
 
 exports[`NumberFormat constructing number formats unit de-DE 1`] = `
 NumberFormat {
   "currency": undefined,
+  "currencyDisplay": undefined,
   "decimalSymbol": ",",
   "digits": Array [
     "0",
@@ -461,5 +492,6 @@ NumberFormat {
   "style": "unit",
   "suffix": " Bytes",
   "unit": "byte",
+  "unitDisplay": undefined,
 }
 `;