feat: Support changing the current language without re-importing i18n…

… data (#256)
alibaba · Dec 2, 2024 · 8a7aaba · 8a7aaba
1 parent 5086a12
commit 8a7aaba
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 0 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/README.md b/README.md
@@ -287,6 +287,12 @@ You could make it as [peerDependency](https://github.com/alibaba/react-intl-univ
    */
   determineLocale(options)
 
+  /**
+  * Change current locale
+  * @param {string} newLocale Current locale such as 'en-US'
+  */
+  changeCurrentLocale(newCurrentLocale)
+
   /**
    * Get the inital options 
    * @returns {Object} options includes currentLocale and locales

diff --git a/packages/react-intl-universal/src/ReactIntlUniversal.js b/packages/react-intl-universal/src/ReactIntlUniversal.js
@@ -169,6 +169,22 @@ class ReactIntlUniversal {
       this.getLocaleFromBrowser()
     );
   }
+
+  /**
+   * Change current locale
+   * @param {string} newLocale Current locale such as 'en-US'
+   */
+  changeCurrentLocale(newLocale) {
+    if (!this.options.locales || !this.options.locales[newLocale]) {
+      let errorMsg = `react-intl-universal locales data "${newLocale}" not exists.`;
+      if (!this.options.locales) {
+        errorMsg += 'You should call init function first.'
+      }
+      this.options.warningHandler(errorMsg);
+      return;
+    }
+    this.options.currentLocale = newLocale;
+  }
 
   /**
    * Initialize properties and load CLDR locale data according to currentLocale

diff --git a/packages/react-intl-universal/src/index.js b/packages/react-intl-universal/src/index.js
@@ -9,6 +9,7 @@ const getHTML = defaultInstance.getHTML.bind(defaultInstance);
 const formatMessage = defaultInstance.formatMessage.bind(defaultInstance);
 const formatHTMLMessage = defaultInstance.formatHTMLMessage.bind(defaultInstance);
 const determineLocale = defaultInstance.determineLocale.bind(defaultInstance);
+const changeCurrentLocale = defaultInstance.changeCurrentLocale.bind(defaultInstance);
 const init = defaultInstance.init.bind(defaultInstance);
 const getInitOptions = defaultInstance.getInitOptions.bind(defaultInstance);
 const load = defaultInstance.load.bind(defaultInstance);
@@ -25,6 +26,7 @@ export {
   formatMessage,
   formatHTMLMessage,
   determineLocale,
+  changeCurrentLocale,
   init,
   getInitOptions,
   load,

diff --git a/packages/react-intl-universal/test/index.test.js b/packages/react-intl-universal/test/index.test.js
@@ -19,6 +19,13 @@ test("Set specific locale", () => {
   expect(intl.get("SIMPLE")).toBe("Simple");
 });
 
+test("Change specific locale", () => {
+  intl.init({ locales, currentLocale: "en-US" });
+  expect(intl.get("SIMPLE")).toBe("Simple");
+  intl.changeCurrentLocale("zh-CN");
+  expect(intl.get("SIMPLE")).toBe("简单");
+});
+
 test("Message with variables", () => {
   intl.init({ locales, currentLocale: "en-US" });
   expect(intl.get("HELLO", { name: "Tony" })).toBe("Hello, Tony");