Skip to content

Commit dd87a53

Browse files
vladitasevvladitasev
authoredNov 6, 2020
fix: Several date/time components use locales correctly (#2440)
·
v./29.5v0.0.0-7b49a7ff1
1 parent 095204f commit dd87a53

File tree

11 files changed

+70
-40
lines changed

11 files changed

+70
-40
lines changed
 

‎packages/base/src/locale/getLocale.js

+12-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,20 @@ import detectNavigatorLanguage from "../util/detectNavigatorLanguage.js";
22
import { getLanguage as getConfigLanguage } from "../config/Language.js";
33
import Locale from "./Locale.js";
44

5+
const cache = new Map();
6+
7+
const getLocaleInstance = lang => {
8+
if (!cache.has(lang)) {
9+
cache.set(lang, new Locale(lang));
10+
}
11+
12+
return cache.get(lang);
13+
};
14+
515
const convertToLocaleOrNull = lang => {
616
try {
717
if (lang && typeof lang === "string") {
8-
return new Locale(lang);
18+
return getLocaleInstance(lang);
919
}
1020
} catch (e) {
1121
// ignore
@@ -22,7 +32,7 @@ const getLocale = lang => {
2232
}
2333

2434
if (getConfigLanguage()) {
25-
return new Locale(getConfigLanguage());
35+
return getLocaleInstance(getConfigLanguage());
2636
}
2737

2838
return convertToLocaleOrNull(detectNavigatorLanguage());

‎packages/localization/src/getCachedLocaleDataInstance.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import LocaleData from "./LocaleData.js";
2+
3+
const cache = new Map();
4+
5+
const getCachedLocaleDataInstance = locale => {
6+
if (!cache.has(locale)) {
7+
cache.set(locale, LocaleData.getInstance(locale));
8+
}
9+
10+
return cache.get(locale);
11+
};
12+
13+
export default getCachedLocaleDataInstance;

‎packages/main/src/Calendar.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleD
44
import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
55
import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
66
import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
7-
import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
7+
import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
88
import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
99
import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
1010
import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
@@ -209,8 +209,6 @@ class Calendar extends UI5Element {
209209

210210
constructor() {
211211
super();
212-
this._oLocale = getLocale();
213-
this._oLocaleData = new LocaleData(this._oLocale);
214212
this._header = {};
215213
this._header.onPressPrevious = this._handlePrevious.bind(this);
216214
this._header.onPressNext = this._handleNext.bind(this);
@@ -235,6 +233,7 @@ class Calendar extends UI5Element {
235233
}
236234

237235
onBeforeRendering() {
236+
const localeData = getCachedLocaleDataInstance(getLocale());
238237
const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType });
239238
const firstDayOfCalendarTimeStamp = this._getMinCalendarDate();
240239

@@ -252,7 +251,7 @@ class Calendar extends UI5Element {
252251
this._oMonth.primaryCalendarType = this._primaryCalendarType;
253252
this._oMonth.minDate = this.minDate;
254253
this._oMonth.maxDate = this.maxDate;
255-
this._header.monthText = this._oLocaleData.getMonths("wide", this._primaryCalendarType)[this._month];
254+
this._header.monthText = localeData.getMonths("wide", this._primaryCalendarType)[this._month];
256255
this._header.yearText = oYearFormat.format(this._localDate, true);
257256

258257
// month picker
@@ -352,7 +351,8 @@ class Calendar extends UI5Element {
352351
}
353352

354353
get _primaryCalendarType() {
355-
return this.primaryCalendarType || getCalendarType() || LocaleData.getInstance(getLocale()).getPreferredCalendarType();
354+
const localeData = getCachedLocaleDataInstance(getLocale());
355+
return this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();
356356
}
357357

358358
get _formatPattern() {

‎packages/main/src/DatePicker.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleD
44
import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
55
import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
66
import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
7-
import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
7+
import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
88
import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
99
import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
1010
import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
@@ -761,7 +761,8 @@ class DatePicker extends UI5Element {
761761
}
762762

763763
get _primaryCalendarType() {
764-
return this.primaryCalendarType || getCalendarType() || LocaleData.getInstance(getLocale()).getPreferredCalendarType();
764+
const localeData = getCachedLocaleDataInstance(getLocale());
765+
return this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();
765766
}
766767

767768
get _formatPattern() {

‎packages/main/src/DateTimePicker.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
22
import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
3-
import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
3+
import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
44
import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
55
import "@ui5/webcomponents-icons/dist/date-time.js";
66
import {
@@ -532,7 +532,8 @@ class DateTimePicker extends DatePicker {
532532
const hasHours = !!pattern.match(/H/i);
533533
const fallback = !pattern || !hasHours;
534534

535-
return fallback ? LocaleData.getInstance(getLocale()).getCombinedDateTimePattern("medium", "medium", this._primaryCalendarType) : pattern;
535+
const localeData = getCachedLocaleDataInstance(getLocale());
536+
return fallback ? localeData.getCombinedDateTimePattern("medium", "medium", this._primaryCalendarType) : pattern;
536537
}
537538

538539
/**

‎packages/main/src/DayPicker.js

+16-11
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleD
44
import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
55
import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
66
import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
7-
import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
7+
import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
88
import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
99
import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
1010
import {
@@ -56,6 +56,7 @@ const monthDiff = (startDate, endDate) => {
5656
*/
5757
const metadata = {
5858
tag: "ui5-daypicker",
59+
languageAware: true,
5960
properties: /** @lends sap.ui.webcomponents.main.DayPicker.prototype */ {
6061
/**
6162
* A UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
@@ -212,8 +213,6 @@ class DayPicker extends UI5Element {
212213

213214
constructor() {
214215
super();
215-
this._oLocale = getLocale();
216-
this._oLocaleData = new LocaleData(this._oLocale);
217216

218217
this._itemNav = new ItemNavigation(this, {
219218
rowSize: 7,
@@ -249,6 +248,8 @@ class DayPicker extends UI5Element {
249248
}
250249

251250
onBeforeRendering() {
251+
const localeData = getCachedLocaleDataInstance(getLocale());
252+
252253
let oCalDate,
253254
day,
254255
timestamp,
@@ -261,7 +262,7 @@ class DayPicker extends UI5Element {
261262
let week = [];
262263
this._weekNumbers = [];
263264
let weekday;
264-
const _monthsNameWide = this._oLocaleData.getMonths("wide", this._calendarDate._oUDate.sCalendarType);
265+
const _monthsNameWide = localeData.getMonths("wide", this._calendarDate._oUDate.sCalendarType);
265266

266267
this._minDateObject = new Date(this._minDate);
267268
this._maxDateObject = new Date(this._maxDate);
@@ -335,7 +336,7 @@ class DayPicker extends UI5Element {
335336

336337
if (day.classes.indexOf("ui5-dp-wday6") !== -1
337338
|| _aVisibleDays.length - 1 === i) {
338-
const weekNumber = calculateWeekNumber(getFirstDayOfWeek(), oCalDate.toUTCJSDate(), oCalDate.getYear(), this._oLocale, this._oLocaleData);
339+
const weekNumber = calculateWeekNumber(getFirstDayOfWeek(), oCalDate.toUTCJSDate(), oCalDate.getYear(), getLocale(), localeData);
339340
if (lastWeekNumber !== weekNumber) {
340341
const weekNum = {
341342
weekNum: weekNumber,
@@ -358,8 +359,8 @@ class DayPicker extends UI5Element {
358359
this._itemNav.current = todayIndex;
359360
}
360361

361-
const aDayNamesWide = this._oLocaleData.getDays("wide", this._primaryCalendarType);
362-
const aDayNamesAbbreviated = this._oLocaleData.getDays("abbreviated", this._primaryCalendarType);
362+
const aDayNamesWide = localeData.getDays("wide", this._primaryCalendarType);
363+
const aDayNamesAbbreviated = localeData.getDays("abbreviated", this._primaryCalendarType);
363364
const aUltraShortNames = aDayNamesAbbreviated.map(n => n);
364365
let dayName;
365366

@@ -607,7 +608,8 @@ class DayPicker extends UI5Element {
607608
}
608609

609610
get _primaryCalendarType() {
610-
return this.primaryCalendarType || getCalendarType() || LocaleData.getInstance(getLocale()).getPreferredCalendarType();
611+
const localeData = getCachedLocaleDataInstance(getLocale());
612+
return this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();
611613
}
612614

613615
get focusableDays() {
@@ -793,9 +795,11 @@ class DayPicker extends UI5Element {
793795
}
794796

795797
_isWeekend(oDate) {
798+
const localeData = getCachedLocaleDataInstance(getLocale());
799+
796800
const iWeekDay = oDate.getDay(),
797-
iWeekendStart = this._oLocaleData.getWeekendStart(),
798-
iWeekendEnd = this._oLocaleData.getWeekendEnd();
801+
iWeekendStart = localeData.getWeekendStart(),
802+
iWeekendEnd = localeData.getWeekendEnd();
799803

800804
return (iWeekDay >= iWeekendStart && iWeekDay <= iWeekendEnd)
801805
|| (iWeekendEnd < iWeekendStart && (iWeekDay >= iWeekendStart || iWeekDay <= iWeekendEnd));
@@ -926,8 +930,9 @@ class DayPicker extends UI5Element {
926930
}
927931

928932
_getFirstDayOfWeek() {
933+
const localeData = getCachedLocaleDataInstance(getLocale());
929934
const confFirstDayOfWeek = getFirstDayOfWeek();
930-
return Number.isInteger(confFirstDayOfWeek) ? confFirstDayOfWeek : this._oLocaleData.getFirstDayOfWeek();
935+
return Number.isInteger(confFirstDayOfWeek) ? confFirstDayOfWeek : localeData.getFirstDayOfWeek();
931936
}
932937

933938
get styles() {

‎packages/main/src/MonthPicker.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
44
import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
5-
import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
5+
import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
66
import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
77
import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
88
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -19,6 +19,7 @@ import styles from "./generated/themes/MonthPicker.css.js";
1919
*/
2020
const metadata = {
2121
tag: "ui5-monthpicker",
22+
languageAware: true,
2223
properties: /** @lends sap.ui.webcomponents.main.MonthPicker.prototype */ {
2324
/**
2425
* A UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
@@ -133,8 +134,6 @@ class MonthPicker extends UI5Element {
133134

134135
constructor() {
135136
super();
136-
this._oLocale = getLocale();
137-
this._oLocaleData = new LocaleData(this._oLocale);
138137

139138
this._itemNav = new ItemNavigation(this, {
140139
pageSize: 12,
@@ -164,6 +163,8 @@ class MonthPicker extends UI5Element {
164163
}
165164

166165
onBeforeRendering() {
166+
const localeData = getCachedLocaleDataInstance(getLocale());
167+
167168
const quarters = [];
168169
const oCalDate = CalendarDate.fromTimestamp(new Date().getTime(), this._primaryCalendarType);
169170
let timestamp;
@@ -175,7 +176,7 @@ class MonthPicker extends UI5Element {
175176
const month = {
176177
timestamp: timestamp.toString(),
177178
id: `${this._id}-m${i}`,
178-
name: this._oLocaleData.getMonths("wide", this._primaryCalendarType)[i],
179+
name: localeData.getMonths("wide", this._primaryCalendarType)[i],
179180
classes: "ui5-mp-item",
180181
};
181182

@@ -221,7 +222,8 @@ class MonthPicker extends UI5Element {
221222
}
222223

223224
get _primaryCalendarType() {
224-
return this.primaryCalendarType || getCalendarType() || LocaleData.getInstance(getLocale()).getPreferredCalendarType();
225+
const localeData = getCachedLocaleDataInstance(getLocale());
226+
return this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();
225227
}
226228

227229
get _isPattern() {

‎packages/main/src/TimePicker.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18
44
import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
55
import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
66
import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
7-
import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
7+
import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
88
import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
99
import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
1010
import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
@@ -345,7 +345,8 @@ class TimePicker extends UI5Element {
345345

346346
onBeforeRendering() {
347347
if (!this.formatPattern) {
348-
this.formatPattern = LocaleData.getInstance(getLocale()).getTimePattern(this.getFormat().oFormatOptions.style);
348+
const localeData = getCachedLocaleDataInstance(getLocale());
349+
this.formatPattern = localeData.getTimePattern(this.getFormat().oFormatOptions.style);
349350
}
350351

351352
if (this.value === undefined) {

‎packages/main/src/YearPicker.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
3-
import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
3+
import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
44
import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
55
import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
66
import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -20,6 +20,7 @@ import styles from "./generated/themes/YearPicker.css.js";
2020
*/
2121
const metadata = {
2222
tag: "ui5-yearpicker",
23+
languageAware: true,
2324
properties: /** @lends sap.ui.webcomponents.main.YearPicker.prototype */ {
2425
/**
2526
* A UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
@@ -244,7 +245,8 @@ class YearPicker extends UI5Element {
244245
}
245246

246247
get _primaryCalendarType() {
247-
return this.primaryCalendarType || getCalendarType() || LocaleData.getInstance(getLocale()).getPreferredCalendarType();
248+
const localeData = getCachedLocaleDataInstance(getLocale());
249+
return this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();
248250
}
249251

250252
get _isPattern() {

‎packages/main/test/pages/Simple.html

+2-9
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,7 @@
77

88
<title>Button</title>
99

10-
<script data-ui5-config type="application/json">
11-
{
12-
"language": "EN",
13-
"noConflict": {
14-
"events": ["click"]
15-
},
16-
"calendarType": "Islamic"
17-
}
18-
</script>
10+
1911

2012
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
2113
<script src="../../resources/bundle.esm.js" type="module"></script>
@@ -26,6 +18,7 @@
2618
<body style="background-color: var(--sapBackgroundColor);">
2719

2820
<ui5-button icon="download"></ui5-button>
21+
<ui5-datepicker></ui5-datepicker>
2922

3023
</body>
3124
</html>

‎packages/main/test/specs/MultiComboBox.spec.js

+2
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,12 @@ describe("MultiComboBox general interaction", () => {
2525
assert.ok(mcb.getProperty("focused"), "MultiComboBox should be focused.");
2626

2727
input.keys("ArrowLeft");
28+
browser.pause(100);
2829

2930
assert.notOk(mcb.getProperty("focused"), "MultiComboBox should no longer be focused.");
3031

3132
input.keys("ArrowRight");
33+
browser.pause(100);
3234

3335
assert.ok(mcb.getProperty("focused"), "MultiComboBox should be focused again.");
3436
});

0 commit comments

Comments
 (0)
Please sign in to comment.