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 polyfill #29113

Merged
merged 11 commits into from
Oct 13, 2023
3 changes: 2 additions & 1 deletion src/libs/IntlPolyfill/index.native.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import polyfillNumberFormat from './polyfillNumberFormat';
import polyfillListFormat from './polyfillListFormat';
import IntlPolyfill from './types';
import polyfillDateTimeFormat from './polyfillDateTimeFormat';

/**
* Polyfill the Intl API, always performed for native devices.
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,13 +1,13 @@
import polyfillNumberFormat from './polyfillNumberFormat';
import IntlPolyfill from './types';
import polyfillDateTimeFormat from './polyfillDateTimeFormat';

/**
* Polyfill the Intl API if the ICU version is old.
* 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;
52 changes: 52 additions & 0 deletions src/libs/IntlPolyfill/polyfillDateTimeFormat.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import Onyx from 'react-native-onyx';
import ONYXKEYS from '../../ONYXKEYS';
import {Timezone} from '../../types/onyx/PersonalDetails';
import CONST from '../../CONST';

let currentUserAccountID: number | undefined;
Onyx.connect({
key: ONYXKEYS.SESSION,
callback: (val) => {
// When signed out, val is undefined
if (!val) {
return;
}

currentUserAccountID = val.accountID;
},
});

let timezone: Required<Timezone> = CONST.DEFAULT_TIME_ZONE;
Onyx.connect({
key: ONYXKEYS.PERSONAL_DETAILS_LIST,
callback: (value) => {
if (!currentUserAccountID) {
return;
}

const personalDetailsTimezone = value?.[currentUserAccountID]?.timezone;

timezone = {
selected: personalDetailsTimezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected,
automatic: personalDetailsTimezone?.automatic ?? CONST.DEFAULT_TIME_ZONE.automatic,
};
},
});

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.
const currentTimezone = timezone.automatic ? Intl.DateTimeFormat().resolvedOptions().timeZone : timezone.selected;

require('@formatjs/intl-datetimeformat/polyfill-force');
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 @typescript-eslint/ban-ts-comment
// @ts-ignore
// eslint-disable-next-line no-underscore-dangle
Intl.DateTimeFormat.__setDefaultTimeZone(currentTimezone);
}
}
Loading