diff --git a/apps/pxweb2/public/locales/en/translation.json b/apps/pxweb2/public/locales/en/translation.json index 53fbe24a..e27af843 100644 --- a/apps/pxweb2/public/locales/en/translation.json +++ b/apps/pxweb2/public/locales/en/translation.json @@ -7,5 +7,15 @@ "date": { "simple_date": "{{value, datetime}}", "simple_date_with_time": "{{value, datetime(year: 'numeric'; month: 'numeric'; day: 'numeric'; hour: 'numeric'; minute: 'numeric')}}" + }, + "number": { + "simple_number": "{{value, pxNumber}}", + "simple_number_with_zero_decimal": "{{value, pxNumber(minimumFractionDigits: 0; maximumFractionDigits: 0;)}}", + "simple_number_with_one_decimal": "{{value, pxNumber(minimumFractionDigits: 1; maximumFractionDigits: 1;)}}", + "simple_number_with_two_decimals": "{{value, pxNumber(minimumFractionDigits: 2; maximumFractionDigits: 2;)}}", + "simple_number_with_three_decimals": "{{value, pxNumber(minimumFractionDigits: 3; maximumFractionDigits: 3;)}}", + "simple_number_with_four_decimals": "{{value, pxNumber(minimumFractionDigits: 4; maximumFractionDigits: 4;)}}", + "simple_number_with_five_decimals": "{{value, pxNumber(minimumFractionDigits: 5; maximumFractionDigits: 5;)}}", + "simple_number_with_default_formatter": "{{value, number(minimumFractionDigits: 5; maximumFractionDigits: 5; roundingMode: 'halfExpand')}}" } } diff --git a/apps/pxweb2/src/@types/resources.d.ts b/apps/pxweb2/src/@types/resources.d.ts index e82d89e7..9bf25492 100644 --- a/apps/pxweb2/src/@types/resources.d.ts +++ b/apps/pxweb2/src/@types/resources.d.ts @@ -8,6 +8,16 @@ interface Resources { "date": { "simple_date": "{{value, datetime}}", "simple_date_with_time": "{{value, datetime(year: 'numeric'; month: 'numeric'; day: 'numeric'; hour: 'numeric'; minute: 'numeric')}}" + }, + "number": { + "simple_number": "{{value, pxNumber}}", + "simple_number_with_zero_decimal": "{{value, pxNumber(minimumFractionDigits: 0; maximumFractionDigits: 0;)}}", + "simple_number_with_one_decimal": "{{value, pxNumber(minimumFractionDigits: 1; maximumFractionDigits: 1;)}}", + "simple_number_with_two_decimals": "{{value, pxNumber(minimumFractionDigits: 2; maximumFractionDigits: 2;)}}", + "simple_number_with_three_decimals": "{{value, pxNumber(minimumFractionDigits: 3; maximumFractionDigits: 3;)}}", + "simple_number_with_four_decimals": "{{value, pxNumber(minimumFractionDigits: 4; maximumFractionDigits: 4;)}}", + "simple_number_with_five_decimals": "{{value, pxNumber(minimumFractionDigits: 5; maximumFractionDigits: 5;)}}", + "simple_number_with_default_formatter": "{{value, number(minimumFractionDigits: 5; maximumFractionDigits: 5; roundingMode: 'halfExpand')}}" } } } diff --git a/apps/pxweb2/src/app/app.tsx b/apps/pxweb2/src/app/app.tsx index a71e77dc..94bc525e 100644 --- a/apps/pxweb2/src/app/app.tsx +++ b/apps/pxweb2/src/app/app.tsx @@ -7,9 +7,10 @@ import { BodyLong, Ingress, Label, - Tag + Tag, } from '@pxweb2/pxweb2-ui'; import useLocalizeDocumentAttributes from '../i18n/useLocalizeDocumentAttributes'; +import { NumberFormatter } from '../i18n/formatters'; function test(event: React.MouseEvent) { event.preventDefault(); @@ -29,6 +30,10 @@ export function App() { ar: { title: 'العربية' }, }; + const customRoundingMode = 'halfExpand'; + const customMinDecimals = 2; + const customMaxDecimals = 4; + useLocalizeDocumentAttributes(); return ( @@ -64,9 +69,15 @@ export function App() { her every day, every week, every month, every year. She never saw a wolf, no even a little fox. - Mandatory  - Mandatory  -
+ + Mandatory + +   + + Mandatory + +   +