@shopify/react-i18n - npm Package Compare versions

Comparing version 7.12.3 to 7.13.0

build/cjs/i18n.js

@@ -203,6 +203,20 @@ 'use strict';
   formatPercentage(amount, options = {}) {
-    return this.formatNumber(amount, {
-      as: 'percent',
-      ...options
-    });
+    const {
+      percentageSignDisplay = 'auto',
+      ...otherOptions
+    } = options;
+    if (percentageSignDisplay === 'auto') {
+      return this.formatNumber(amount, {
+        as: 'percent',
+        ...otherOptions
+      });
+    }
+    const {
+      locale
+    } = this;
+    const parts = translate.memoizedNumberFormatter(locale, {
+      style: 'percent',
+      ...otherOptions
+    }).formatToParts(amount);
+    return parts.filter(part => part.type !== 'literal' && part.type !== 'percentSign').map(part => part.value).join('');
   }
@@ -209,0 +223,0 @@ formatDate(date, options = {}) {

build/ts/i18n.d.ts

@@ -14,2 +14,5 @@ /// <reference types="react" />
 }
+export interface PercentageFormatOptions extends Intl.NumberFormatOptions {
+    percentageSignDisplay?: 'auto' | 'never';
+}
 export interface TranslateOptions {
@@ -50,3 +53,3 @@ scope: RootTranslateOptions<any>['scope'];
     unformatCurrency(input: string, currencyCode: string): string;
-    formatPercentage(amount: number, options?: Intl.NumberFormatOptions): string;
+    formatPercentage(amount: number, options?: PercentageFormatOptions): string;
     formatDate(date: Date, options?: Intl.DateTimeFormatOptions & {
@@ -53,0 +56,0 @@ style?: DateStyle;

package.json

 {
   "name": "@shopify/react-i18n",
-  "version": "7.12.3",
+  "version": "7.13.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "i18n utilities for React handling translations, formatting, and more",

README.md

@@ -137,3 +137,5 @@ # `@shopify/react-i18n`
 - `unformatCurrency()`: converts a localized currency string to a currency string parseable by JavaScript. Example: `€ 1,25 => 1.25`
-- `formatPercentage()`: formats a number as a percentage according to the locale. Convenience function that simply _auto-assigns_ the `as` option to `percent` and calls `formatNumber()`.
+- `formatPercentage()`: formats a number as a percentage according to the locale.
+  - if `percentageSignDisplay: 'never'` is given, then the percentage sign will be omitted. Example: `0.5 => 50`
+  - if `percentageSignDisplay` is omitted, or if `percentageSignDisplay: 'auto'` is given, then the number will be formatted `as: percent`. Example: `0.5 => 50%`
 - `formatDate()`: formats a date according to the locale. The `defaultTimezone` value supplied to the i18n `I18nContext.Provider` component will be used when no custom `timezone` is provided. Assign the `style` option to a `DateStyle` value to use common formatting options.
@@ -140,0 +142,0 @@ - `DateStyle.Long`: e.g., `Thursday, December 20, 2012`

No alert changes

Improved metrics

Total package byte prevSize

297975

increased by0.58%

Lines of code

4449

increased by0.7%

Number of lines in readme file

498

increased by0.4%

No dependency changes