Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add DateTimeFormat polyfills with timezone abbreviations #31074

Merged
merged 16 commits into from
Jan 9, 2024
Merged
Show file tree
Hide file tree
Changes from 14 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/libs/IntlPolyfill/index.native.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import polyfillDateTimeFormat from './polyfillDateTimeFormat';
import polyfillListFormat from './polyfillListFormat';
import polyfillNumberFormat from './polyfillNumberFormat';
import type IntlPolyfill from './types';
Expand All @@ -10,8 +11,8 @@ const intlPolyfill: IntlPolyfill = () => {
require('@formatjs/intl-getcanonicallocales/polyfill');
require('@formatjs/intl-locale/polyfill');
require('@formatjs/intl-pluralrules/polyfill');
require('@formatjs/intl-datetimeformat');
polyfillNumberFormat();
polyfillDateTimeFormat();
polyfillListFormat();
};

Expand Down
4 changes: 2 additions & 2 deletions src/libs/IntlPolyfill/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import polyfillDateTimeFormat from './polyfillDateTimeFormat';
import polyfillNumberFormat from './polyfillNumberFormat';
import type IntlPolyfill from './types';

Expand All @@ -6,8 +7,7 @@ import type IntlPolyfill from './types';
* This ensures that the currency data is consistent across platforms and browsers.
*/
const intlPolyfill: IntlPolyfill = () => {
// Just need to polyfill Intl.NumberFormat for web based platforms
polyfillNumberFormat();
require('@formatjs/intl-datetimeformat');
polyfillDateTimeFormat();
};
export default intlPolyfill;
42 changes: 42 additions & 0 deletions src/libs/IntlPolyfill/polyfillDateTimeFormat.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import type {DateTimeFormatConstructor} from '@formatjs/intl-datetimeformat';
import DateUtils from '@libs/DateUtils';

/* eslint-disable @typescript-eslint/naming-convention */
const tzLinks: Record<string, string> = {
'Africa/Abidjan': 'Africa/Accra',
CET: 'Europe/Paris',
CST6CDT: 'America/Chicago',
EET: 'Europe/Sofia',
EST: 'America/Cancun',
EST5EDT: 'America/New_York',
'Etc/GMT': 'UTC',
'Etc/UTC': 'UTC',
Factory: 'UTC',
GMT: 'UTC',
HST: 'Pacific/Honolulu',
MET: 'Europe/Paris',
MST: 'America/Phoenix',
MST7MDT: 'America/Denver',
PST8PDT: 'America/Los_Angeles',
WET: 'Europe/Lisbon',
};
/* eslint-disable @typescript-eslint/naming-convention */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you mean eslint-enable here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tienifr Friendly bump! Maybe I am missing something haha

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right! I've updated.


export default function () {
// Because JS Engines do not expose default timezone, the polyfill cannot detect local timezone that a browser is in.
// We must manually do this by getting the local timezone before adding polyfill.
let currentTimezone = DateUtils.getCurrentTimezone().selected as string;
if (currentTimezone in tzLinks) {
currentTimezone = tzLinks[currentTimezone];
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we reuse DateUtils.getCurrentTimezone() without connecting Onyx here unless it causes cyclic dependency?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated!


require('@formatjs/intl-datetimeformat/polyfill-force');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tienifr Can you address this comment: #34035 (comment)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have replied on the other issue #34035 (comment)

require('@formatjs/intl-datetimeformat/locale-data/en');
require('@formatjs/intl-datetimeformat/locale-data/es');
require('@formatjs/intl-datetimeformat/add-all-tz');

if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
// eslint-disable-next-line no-underscore-dangle
(Intl.DateTimeFormat as DateTimeFormatConstructor).__setDefaultTimeZone(currentTimezone);
}
}
Loading