Merge pull request #2208 from parasharrajat/parasharrajat/translations

package.json

@@ -31,6 +31,10 @@
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/preset-flow": "^7.12.13",
+    "@formatjs/intl-getcanonicallocales": "^1.5.8",
+    "@formatjs/intl-locale": "^2.4.21",
+    "@formatjs/intl-numberformat": "^6.2.5",
+    "@formatjs/intl-pluralrules": "^4.0.13",
     "@react-native-community/async-storage": "^1.11.0",
     "@react-native-community/cli": "4.13.1",
     "@react-native-community/clipboard": "^1.5.1",

src/components/withLocalize.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+import compose from '../libs/compose';
+import ONYXKEYS from '../ONYXKEYS';
+import {translate} from '../libs/translate';
+import DateUtils from '../libs/DateUtils';
+import {toLocalPhone, fromLocalPhone} from '../libs/LocalePhoneNumber';
+import numberFormat from '../libs/numberFormat';
+
+const withLocalizePropTypes = {
+    // Translations functions using current User's preferred locale
+    translations: PropTypes.shape({
+        translate: PropTypes.func.isRequired,
+        numberFormat: PropTypes.func.isRequired,
+        timestampToRelative: PropTypes.func.isRequired,
+        timestampToDateTime: PropTypes.func.isRequired,
+        toLocalPhone: PropTypes.func.isRequired,
+        fromLocalPhone: PropTypes.func.isRequired,
+    }),
+};
+
+function withLocalizeHOC(WrappedComponent) {
+    const withLocalize = (props) => {
+        const translations = {
+            translate: (phrase, variables) => translate(props.preferredLocale, phrase, variables),
+            numberFormat: (number, options) => numberFormat(props.preferredLocale, number, options),
+            timestampToRelative: timestamp => DateUtils.timestampToRelative(props.preferredLocale, timestamp),
+            timestampToDateTime: (timestamp, includeTimezone) => DateUtils.timestampToDateTime(
+                props.preferredLocale,
+                timestamp,
+                includeTimezone,
+            ),
+            toLocalPhone: number => toLocalPhone(props.preferredLocale, number),
+            fromLocalPhone: number => fromLocalPhone(props.preferredLocale, number),
+        };
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                translations={translations}
+            />
+        );
+    };
+    withLocalize.displayName = `withLocalize(${getComponentDisplayName(WrappedComponent)})`;
+    withLocalize.defaultProps = {
+        preferredLocale: 'en',
+    };
+    return withLocalize;
+}
+export default compose(
+    withOnyx({
+        preferredLocale: {
+            key: ONYXKEYS.PREFERRED_LOCALE,
+        },
+    }),
+    withLocalizeHOC,
+);
+
+export {
+    withLocalizePropTypes,
+};

src/libs/numberFormat/index.android.js

@@ -0,0 +1,14 @@
+// we only need polyfills for Mobile.
+import '@formatjs/intl-getcanonicallocales/polyfill';
+import '@formatjs/intl-locale/polyfill';
+import '@formatjs/intl-pluralrules/polyfill';
+import '@formatjs/intl-numberformat/polyfill';
+
+// Load en Locale data
+import '@formatjs/intl-numberformat/locale-data/en';
+
+function numberFormat(locale, number, options) {
+    return new Intl.NumberFormat(locale, options).format(number);
+}
+
+export default numberFormat;

src/libs/numberFormat/index.js

@@ -0,0 +1,5 @@
+function numberFormat(locale, number, options) {
+    return new Intl.NumberFormat(locale, options).format(number);
+}
+
+export default numberFormat;