Skip to content

Commit b512c9d

Browse files
committed
refactor(locale): Rework getting locale format and unify how it is retrieved.
1 parent a241785 commit b512c9d

File tree

11 files changed

+116
-152
lines changed

11 files changed

+116
-152
lines changed

projects/igniteui-angular/src/lib/core/i18n/formatters/formatter-base.spec.ts

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -68,28 +68,32 @@ describe('Localization', () => {
6868

6969
it('should return correct date format per locale', () => {
7070
// Defaults to Angular's one because they are registered in tests
71-
expect(i18nFormatter.getLocaleDateFormat('en', 'short')).toEqual('M/d/yy');
72-
expect(i18nFormatter.getLocaleDateFormat('en', 'medium')).toEqual('MMM d, y');
73-
expect(i18nFormatter.getLocaleDateFormat('en', 'long')).toEqual('MMMM d, y');
74-
expect(i18nFormatter.getLocaleDateFormat('en', 'full')).toEqual('EEEE, MMMM d, y');
75-
76-
expect(i18nFormatter.getLocaleDateFormat('de', 'short')).toEqual('dd.MM.yy');
77-
expect(i18nFormatter.getLocaleDateFormat('de', 'medium')).toEqual('dd.MM.y');
78-
expect(i18nFormatter.getLocaleDateFormat('de', 'long')).toEqual('d. MMMM y');
79-
expect(i18nFormatter.getLocaleDateFormat('de', 'full')).toEqual('EEEE, d. MMMM y');
71+
expect(i18nFormatter.getLocaleDateTimeFormat('en', false)).toEqual('M/d/yyyy');
72+
expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'short' })).toEqual('M/d/yy');
73+
expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'medium' })).toEqual('MMM d, y');
74+
expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'long' })).toEqual('MMMM d, y');
75+
expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'full' })).toEqual('EEEE, MMMM d, y');
76+
77+
expect(i18nFormatter.getLocaleDateTimeFormat('de', false)).toEqual('dd.MM.yyyy');
78+
expect(i18nFormatter.getLocaleDateTimeFormat('de', false, { dateStyle: 'short' })).toEqual('dd.MM.yy');
79+
expect(i18nFormatter.getLocaleDateTimeFormat('de', false, { dateStyle: 'medium' })).toEqual('dd.MM.y');
80+
expect(i18nFormatter.getLocaleDateTimeFormat('de', false, { dateStyle: 'long' })).toEqual('d. MMMM y');
81+
expect(i18nFormatter.getLocaleDateTimeFormat('de', false, { dateStyle: 'full' })).toEqual('EEEE, d. MMMM y');
8082
});
8183

8284
it('should return correct datetime format per locale', () => {
8385
// Defaults to Angular's one because they are registered in tests
84-
expect(i18nFormatter.getLocaleDateTimeFormat('en', 'short')).toEqual('{1}, {0}');
85-
expect(i18nFormatter.getLocaleDateTimeFormat('en', 'medium')).toEqual('{1}, {0}');
86-
expect(i18nFormatter.getLocaleDateTimeFormat('en', 'long')).toEqual(`{1} 'at' {0}`);
87-
expect(i18nFormatter.getLocaleDateTimeFormat('en', 'full')).toEqual(`{1} 'at' {0}`);
88-
89-
expect(i18nFormatter.getLocaleDateTimeFormat('de', 'short')).toEqual('{1}, {0}');
90-
expect(i18nFormatter.getLocaleDateTimeFormat('de', 'medium')).toEqual('{1}, {0}');
91-
expect(i18nFormatter.getLocaleDateTimeFormat('de', 'long')).toEqual(`{1} 'um' {0}`);
92-
expect(i18nFormatter.getLocaleDateTimeFormat('de', 'full')).toEqual(`{1} 'um' {0}`);
86+
expect(i18nFormatter.getLocaleDateTimeFormat('en', false)).toEqual('{1}, {0}');
87+
expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'short', timeStyle: 'short' })).toEqual('{1}, {0}');
88+
expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'medium', timeStyle: 'short' })).toEqual('{1}, {0}');
89+
expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'short', timeStyle: 'short' })).toEqual(`{1} 'at' {0}`);
90+
expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'full', timeStyle: 'short' })).toEqual(`{1} 'at' {0}`);
91+
92+
expect(i18nFormatter.getLocaleDateTimeFormat('de', false)).toEqual('{1}, {0}');
93+
expect(i18nFormatter.getLocaleDateTimeFormat('de', false, { dateStyle: 'short', timeStyle: 'short' })).toEqual('{1}, {0}');
94+
expect(i18nFormatter.getLocaleDateTimeFormat('de', false, { dateStyle: 'medium', timeStyle: 'short' })).toEqual('{1}, {0}');
95+
expect(i18nFormatter.getLocaleDateTimeFormat('de', false, { dateStyle: 'long', timeStyle: 'short' })).toEqual(`{1} 'um' {0}`);
96+
expect(i18nFormatter.getLocaleDateTimeFormat('de', false, { dateStyle: 'full', timeStyle: 'short' })).toEqual(`{1} 'um' {0}`);
9397
});
9498
});
9599

projects/igniteui-angular/src/lib/core/i18n/formatters/formatter-base.ts

Lines changed: 10 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
import {
22
formatDate as ngFormatDate,
33
getLocaleCurrencyCode,
4-
getLocaleDateFormat as ngGetLocaleDateFormat,
5-
getLocaleDateTimeFormat as ngGetLocaleDateTimeFormat,
64
getLocaleFirstDayOfWeek as ngGetLocaleFirstDayOfWeek,
75
formatNumber as ngFormatNumber,
86
formatPercent as ngFormatPercent,
97
getCurrencySymbol as ngGetCurrencySymbol,
10-
FormatWidth,
118
CurrencyPipe
129
} from '@angular/common';
1310
import { InjectionToken } from '@angular/core';
14-
import { getCurrentI18n } from 'igniteui-i18n-core';
11+
import { getCurrentI18n, getDateFormatter } from 'igniteui-i18n-core';
1512

1613
/**
1714
* Injection token that allows for retrieving the i18n formatter for the IgniteUI components.
@@ -30,60 +27,40 @@ export class BaseFormatter {
3027
};
3128
private _currencyPipe = new CurrencyPipe('en-US', 'USD');
3229

33-
/**
34-
* Returns the date format based on a provided locale.
35-
* Supports Angular's DatePipe format options: `short`, `medium`, `long`, `full`, `shortDate`, `mediumDate`, `longDate` and `fullDate`.
36-
*/
37-
public getLocaleDateFormat(locale: string, displayFormat?: string): string {
30+
public getSizeFromDisplayFormat(displayFormat: string | null | undefined) {
3831
const formatKeys = Object.keys(this.IntlDateTimeStyleValues) as (keyof typeof this.IntlDateTimeStyleValues)[];
3932
const targetFormat = displayFormat?.toLowerCase().replace('date', '');
40-
const targetKey = targetFormat ? formatKeys.find(k => k === targetFormat) : '';
41-
if (!targetKey) {
42-
// if displayFormat is not shortDate, longDate, etc.
43-
// or if it is not set by the user
44-
return displayFormat;
45-
}
46-
47-
return ngGetLocaleDateFormat(locale, FormatWidth[this.IntlDateTimeStyleValues[targetKey]]);
33+
return targetFormat ? formatKeys.find(k => k === targetFormat) : null;
4834
}
4935

5036
/**
51-
* Returns the date and time format based on a provided locale.
52-
* Supports Angular's DatePipe format options: `short`, `medium`, `long`, `full`, `shortDate`, `mediumDate`, `longDate` and `fullDate`.
37+
* Returns the date and time format based on a provided locale and options.
5338
*/
54-
public getLocaleDateTimeFormat(locale: string, displayFormat?: string): string {
55-
const formatKeys = Object.keys(this.IntlDateTimeStyleValues) as (keyof typeof this.IntlDateTimeStyleValues)[];
56-
const targetFormat = displayFormat?.toLowerCase().replace('date', '');
57-
const targetKey = formatKeys.find(k => k === targetFormat);
58-
if (!targetKey) {
59-
// if displayFormat is not shortDate, longDate, etc.
60-
// or if it is not set by the user
61-
return displayFormat;
62-
}
63-
return ngGetLocaleDateTimeFormat(locale, FormatWidth[this.IntlDateTimeStyleValues[targetKey]]);
39+
public getLocaleDateTimeFormat(locale: string, forceLeadingZero = false, options?: Intl.DateTimeFormatOptions): string {
40+
return getDateFormatter().getLocaleDateTimeFormat(locale, forceLeadingZero, options);
6441
}
6542

6643
/**
6744
* Format provided date to reflect locales format. Similar to Angular's formatDate.
6845
*/
6946
public formatDate(value: Date | string | number | null | undefined, format: string, locale: string, timezone?: string): string {
70-
return value ? ngFormatDate(value, format, locale, timezone) : '';
47+
return value != null ? ngFormatDate(value, format, locale, timezone) : '';
7148
}
7249

7350
/** Format number value based on locale */
7451
public formatNumber(value: number | string | null | undefined, locale: string, digitsInfo?: string): string {
7552
if (typeof value === "string") {
7653
value = parseFloat(value);
7754
}
78-
return value ? ngFormatNumber(value, locale, digitsInfo) : '';
55+
return value != null ? ngFormatNumber(value, locale, digitsInfo) : '';
7956
}
8057

8158
/** Format number value as percent based on locale */
8259
public formatPercent(value: number | string | null | undefined, locale: string, digitsInfo?: string): string {
8360
if (typeof value === "string") {
8461
value = parseFloat(value);
8562
}
86-
return value ? ngFormatPercent(value, locale, digitsInfo) : '';
63+
return value != null ? ngFormatPercent(value, locale, digitsInfo) : '';
8764
}
8865

8966
/** Format number as a currency based on locale */
@@ -92,7 +69,7 @@ export class BaseFormatter {
9269
value = parseFloat(value);
9370
}
9471

95-
return value ? this._currencyPipe.transform(value, currencyCode, display, digitsInfo, locale ?? getCurrentI18n()) : '';
72+
return value != null ? this._currencyPipe.transform(value, currencyCode, display, digitsInfo, locale ?? getCurrentI18n()) : '';
9673
}
9774

9875
/**

projects/igniteui-angular/src/lib/core/i18n/formatters/formatter-intl.spec.ts

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,17 +54,19 @@ describe('Localization', () => {
5454
});
5555

5656
it('should return correct date format per locale', () => {
57-
expect(i18nFormatter.getLocaleDateFormat('it', 'short')).toEqual('dd/MM/yy');
58-
expect(i18nFormatter.getLocaleDateFormat('it', 'medium')).toEqual('d MMM yyyy');
59-
expect(i18nFormatter.getLocaleDateFormat('it', 'long')).toEqual(`d MMMM yyyy`);
60-
expect(i18nFormatter.getLocaleDateFormat('it', 'full')).toEqual(`EEEE d MMMM yyyy`);
57+
expect(i18nFormatter.getLocaleDateTimeFormat('it', false)).toEqual('dd/MM/yyyy');
58+
expect(i18nFormatter.getLocaleDateTimeFormat('it', false, { dateStyle: 'short' })).toEqual('dd/MM/yy');
59+
expect(i18nFormatter.getLocaleDateTimeFormat('it', false, { dateStyle: 'medium' })).toEqual('d MMM yyyy');
60+
expect(i18nFormatter.getLocaleDateTimeFormat('it', false, { dateStyle: 'long' })).toEqual(`d MMMM yyyy`);
61+
expect(i18nFormatter.getLocaleDateTimeFormat('it', false, { dateStyle: 'full' })).toEqual(`EEEE d MMMM yyyy`);
6162
});
6263

6364
it('should return correct datetime format per locale', () => {
64-
expect(i18nFormatter.getLocaleDateTimeFormat('it', 'short')).toEqual('dd/MM/yy, HH:mm');
65-
expect(i18nFormatter.getLocaleDateTimeFormat('it', 'medium')).toEqual('d MMM yyyy, HH:mm:ss');
66-
expect(i18nFormatter.getLocaleDateTimeFormat('it', 'long')).toEqual(`d MMMM yyyy alle ore HH:mm:ss z`);
67-
expect(i18nFormatter.getLocaleDateTimeFormat('it', 'full')).toEqual(`EEEE d MMMM yyyy alle ore HH:mm:ss zzzz`);
65+
expect(i18nFormatter.getLocaleDateTimeFormat('it', false)).toEqual('dd/MM/yyyy, HH:mm:ss');
66+
expect(i18nFormatter.getLocaleDateTimeFormat('it', false, { dateStyle: 'short', timeStyle: 'short' })).toEqual('dd/MM/yy, HH:mm');
67+
expect(i18nFormatter.getLocaleDateTimeFormat('it', false, { dateStyle: 'medium', timeStyle: 'medium' })).toEqual('d MMM yyyy, HH:mm:ss');
68+
expect(i18nFormatter.getLocaleDateTimeFormat('it', false, { dateStyle: 'long', timeStyle: 'long' })).toEqual(`d MMMM yyyy alle ore HH:mm:ss z`);
69+
expect(i18nFormatter.getLocaleDateTimeFormat('it', false, { dateStyle: 'full', timeStyle: 'full' })).toEqual(`EEEE d MMMM yyyy alle ore HH:mm:ss zzzz`);
6870
});
6971
});
7072

projects/igniteui-angular/src/lib/core/i18n/formatters/formatter-intl.ts

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,6 @@ export function provideIgniteIntl() {
1212
}
1313

1414
export class IntlFormatter extends BaseFormatter {
15-
public override getLocaleDateFormat(locale: string, displayFormat?: string): string {
16-
const formatKeys = Object.keys(this.IntlDateTimeStyleValues) as (keyof typeof this.IntlDateTimeStyleValues)[];
17-
const targetKey = formatKeys.find(k => k === displayFormat?.toLowerCase().replace('date', ''));
18-
if (!targetKey) {
19-
// if displayFormat is not shortDate, longDate, etc.
20-
// or if it is not set by the user
21-
return displayFormat;
22-
}
23-
24-
return getDateFormatter().getLocaleDateTimeFormat(locale, false, { dateStyle: targetKey });
25-
}
26-
27-
public override getLocaleDateTimeFormat(locale: string, displayFormat?: string): string {
28-
const formatKeys = Object.keys(this.IntlDateTimeStyleValues) as (keyof typeof this.IntlDateTimeStyleValues)[];
29-
const targetKey = formatKeys.find(k => k === displayFormat?.toLowerCase().replace('date', ''));
30-
if (!targetKey) {
31-
// if displayFormat is not shortDate, longDate, etc.
32-
// or if it is not set by the user
33-
return displayFormat;
34-
}
35-
return getDateFormatter().getLocaleDateTimeFormat(locale, false, { dateStyle: targetKey, timeStyle: targetKey });
36-
}
37-
3815
public override formatDate(value: Date | string | number | null | undefined, format: string, locale: string, timezone?: string): string {
3916
if (value === null || value === undefined || value === '') {
4017
return '';

0 commit comments

Comments
 (0)