feat: update zh-cn to zh-hans

Update zh-cn to zh-hans, and update the icon when switch language

Change-Id: I3e6d3e8aebec4584f863282082a11b36d7cee193

Gruntfile.js

@@ -19,7 +19,7 @@ module.exports = function (grunt) {
         src: ['src/**/*.{jsx,js}'],
         dest: 'src',
         options: {
-          lngs: ['en', 'zh', 'ko-kr'],
+          lngs: ['en', 'zh-hans', 'ko-kr'],
           removeUnusedKeys: true,
           sort: true,
           keySeparator: false,

doc/source/test/catalog-introduction.rst

@@ -79,7 +79,7 @@ Catalog Introduction
       ├── local-storage-mock.js   ( Storage mock function in local)
       ├── locales (Translation files used when testing internationalization)
       │   ├── en-US.js
-      │   └── zh-CN.js
+      │   └── zh-hans.js
       ├── setup-tests.js  (setup uni test)
       └── svg-mock.js (Mock of image loading)
 

docs/en/test/2-catalog-introduction.md

@@ -77,7 +77,7 @@ test
     ├── local-storage-mock.js   ( Storage mock function in local)
     ├── locales (Translation files used when testing internationalization)
     │   ├── en-US.js
-    │   └── zh-CN.js
+    │   └── zh-hans.js
     ├── setup-tests.js  (setup uni test)
     └── svg-mock.js (Mock of image loading)
 ```

docs/zh/test/2-catalog-introduction.md

@@ -77,7 +77,7 @@ test
     ├── local-storage-mock.js   (本地存储的mock函数)
     ├── locales (测试国际化时使用的翻译文件)
     │   ├── en-US.js
-    │   └── zh-CN.js
+    │   └── zh-hans.js
     ├── setup-tests.js  (配置单元测试)
     └── svg-mock.js (图片加载的mock)
 ```

src/components/Layout/GlobalHeader/AvatarDropdown.jsx

@@ -68,7 +68,7 @@ export class AvatarDropdown extends React.Component {
     const { length } = SUPPORT_LOCALES;
     if (length > 3) {
       const options = SUPPORT_LOCALES.map((it) => ({
-        label: it.shortName.toLocaleUpperCase(),
+        label: it.icon.toLocaleUpperCase(),
         value: it.value,
       }));
       return (
@@ -83,7 +83,7 @@ export class AvatarDropdown extends React.Component {
       );
     }
     const btns = SUPPORT_LOCALES.map((item, index) => {
-      const { value, shortName } = item;
+      const { value, icon } = item;
       return (
         <>
           <Button
@@ -94,7 +94,7 @@ export class AvatarDropdown extends React.Component {
               this.changeLang(value);
             }}
           >
-            {shortName.toUpperCase()}
+            {icon.toUpperCase()}
           </Button>
           {index !== length - 1 && <span>/</span>}
         </>

src/core/i18n.js

@@ -20,24 +20,26 @@ import SLI18n from 'utils/translate';
 import { setLocalStorageItem } from 'utils/local-storage';
 import locales from '../locales';
 
+// shortName: the i18n name in the api
+// icon: the icon of switch language in ui
 const SUPPORT_LOCALES = [
   {
     name: 'English',
     value: 'en',
     shortName: 'en',
-    icon: 'us',
+    icon: 'en',
   },
   {
     name: '简体中文',
-    value: 'zh-cn',
+    value: 'zh-hans',
     shortName: 'zh',
-    icon: 'cn',
+    icon: 'zh',
   },
   {
     name: '한글',
     value: 'ko-kr',
-    shortName: 'kr',
+    shortName: 'ko',
-    icon: 'kr',
+    icon: 'ko',
   },
 ];
 
@@ -96,12 +98,12 @@ const setLocale = (lang) => {
   return lang;
 };
 
-const isLocaleZh = getLocale() === 'zh-cn';
+const isLocaleZh = getLocale() === 'zh-hans';
 
 const init = () => {
   const lang = getLocale();
 
-  if (lang === 'zh') {
+  if (lang === 'zh-hans') {
     moment.locale('zh', {
       relativeTime: {
         s: '1秒',

src/locales/index.js

@@ -12,12 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import zhData from './zh.json';
+import zhHansData from './zh-hans.json';
 import enData from './en.json';
 import krData from './ko-kr.json';
 
 export default {
-  'zh-cn': zhData,
+  'zh-hans': zhHansData,
   en: enData,
   'ko-kr': krData,
 };

src/utils/constants.js

@@ -38,7 +38,7 @@ export const MODULE_KIND_MAP = {
 };
 
 export const LANG_MAP = {
-  zh: 'zh-cn',
+  'zh-hans': 'zh-hans',
   en: 'en',
 };
 

src/utils/translate.js

@@ -31,7 +31,7 @@ class SLI18n {
   constructor() {
     this.options = {
       currentLocale: null, // Current locale such as 'en'
-      locales: {}, // app locale data like {"en":{"key1":"value1"},"zh-cn":{"key1":"值1"}}
+      locales: {}, // app locale data like {"en":{"key1":"value1"},"zh-hans":{"key1":"值1"}}
       // eslint-disable-next-line no-console
       warningHandler: function warn(...msg) {
         console.warn(...msg);
@@ -179,7 +179,7 @@ class SLI18n {
    * Initialize properties and load CLDR locale data according to currentLocale
    * @param {Object} options
    * @param {string} options.currentLocale Current locale such as 'en'
-   * @param {string} options.locales App locale data like {"en":{"key1":"value1"},"zh-cn":{"key1":"值1"}}
+   * @param {string} options.locales App locale data like {"en":{"key1":"value1"},"zh-hans":{"key1":"值1"}}
    * @returns {Promise}
    */
   init(options = {}) {

src/utils/translate.spec.js

@@ -13,19 +13,19 @@
 // limitations under the License.
 
 import React from 'react';
-import zhCN from '../../test/unit/locales/zh-CN';
+import zhHans from '../../test/unit/locales/zh-hans';
 import enUS from '../../test/unit/locales/en-US';
 import ReactIntlUniversal from './translate';
 
 const intl = new ReactIntlUniversal();
 const locales = {
   'en-US': enUS,
-  'zh-CN': zhCN,
+  'zh-hans': zhHans,
 };
 
 describe('test translate', () => {
   it('Set specific locale', () => {
-    intl.init({ locales, currentLocale: 'zh-CN' });
+    intl.init({ locales, currentLocale: 'zh-hans' });
     expect(intl.get('SIMPLE')).toBe('简单');
     intl.init({ locales, currentLocale: 'en-US' });
     expect(intl.get('SIMPLE')).toBe('Simple');
@@ -178,7 +178,7 @@ describe('test translate', () => {
       })
     ).toBe('You have 10 photos.');
 
-    intl.init({ locales, currentLocale: 'zh-CN' });
+    intl.init({ locales, currentLocale: 'zh-hans' });
     expect(
       intl.get('PHOTO', {
         num: 1,
@@ -242,7 +242,7 @@ describe('test translate', () => {
   });
 
   it('Uses fallback locale if key not found in currentLocale', () => {
-    intl.init({ locales, currentLocale: 'zh-CN', fallbackLocale: 'en-US' });
+    intl.init({ locales, currentLocale: 'zh-hans', fallbackLocale: 'en-US' });
     expect(intl.get('ONLY_IN_ENGLISH')).toBe('ONLY_IN_ENGLISH');
   });
 

test/e2e/support/commands.js

@@ -14,11 +14,10 @@
 
 import getTitle from './common';
 
-Cypress.Commands.add('setLanguage', () => {
+Cypress.Commands.add('setLanguage', (value) => {
   const exp = Date.now() + 864000000;
-  const language = Cypress.env('language') || 'zh';
+  const language = Cypress.env('language') || 'en';
-  const value = language === 'zh' ? 'zh-cn' : 'en';
+  const langValue = { value: value || language, expires: exp };
-  const langValue = { value, expires: exp };
   window.localStorage.setItem('lang', JSON.stringify(langValue));
 });
 
@@ -136,7 +135,7 @@ Cypress.Commands.add('clickMenu', (fatherIndex, sonIndex) => {
 
 Cypress.Commands.add('setLanguageByPage', () => {
   const language = Cypress.env('language');
-  if (language === 'zh') {
+  if (language === 'zh-hans') {
     return;
   }
   cy.log('change language to english');

test/e2e/support/common.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 const getTitle = (title) => {
-  const language = Cypress.env('language') || 'zh';
+  const language = Cypress.env('language') || 'en';
   if (language === 'en') {
     return title;
   }