Merge pull request #315 from ice-lab/fix/i18n-for-component-builder

fix: web i18n

extensions/iceworks-component-builder/src/i18n.ts

@@ -3,7 +3,6 @@ import I18nService from '@iceworks/i18n';
 import * as zhCNTextMap from './locales/zh-CN.json';
 import * as enUSTextMap from './locales/en-US.json';
 
-
 // 注册语言表
 const i18n = new I18nService();
 

extensions/iceworks-component-builder/web/src/i18n.tsx

@@ -1,61 +1,56 @@
-import {createIntl,RawIntlProvider, IntlShape} from 'react-intl'; 
+import { createIntl, RawIntlProvider } from 'react-intl'; 
 import React, { useEffect, useState } from 'react'
-import { ConfigProvider, Loading, Notification } from '@alifd/next';
+import { ConfigProvider, Loading } from '@alifd/next';
+import enUSNextMessages from '@alifd/next/lib/locale/en-us';
+import zhCNNextMessages from '@alifd/next/lib/locale/zh-cn';
 
-// 引入 locale 配置文件
-import enUSLocale from './locales/en-US.json';
-import zhCNLocale from './locales/zh-CN.json';
 import callService from './callService';
+import enUSMessages from './locales/en-US.json';
+import zhCNMessages from './locales/zh-CN.json';
+
+const DEFAULT_LOCALE = 'zh-cn';
 
-// 创建语言包
 export const localeMessages = {
   'en': {
-    messages:enUSLocale,
-    nextLocale:'zhCN',
-    reactLocale:'zh-CN'
+    messages: enUSMessages,
+    nextMessages: enUSNextMessages,
   },
   'zh-cn':{
-    messages:zhCNLocale,
-    nextLocal:'enUS',
-    reactLocale:'en'
-  }
-}
+    messages: zhCNMessages,
+    nextMessages: zhCNNextMessages,
+  },
+};
 
-// 找到当前语言即使用的包
-export const defaultIntl = createIntl({locale:'default',messages:localeMessages['zh-cn'].messages})
-const changeLanguage = (newLang: string) =>{
-  return createIntl({locale:localeMessages[newLang].reactLocale,messages:localeMessages[newLang].messages});
+const getIntl = (locale: string) =>{
+  let localeMessage = localeMessages[locale];
+  if (!localeMessage) {
+    locale = DEFAULT_LOCALE;
+    localeMessage = localeMessages[locale];
+  }
+  return createIntl({locale, messages: localeMessage.messages});
 }
 export const LocaleProvider = (props)=>{
-  const [i18n,setI18n] = useState(defaultIntl);
-  const [loading,setLoading] = useState(false)
+  const [i18n, setI18n] = useState(() => getIntl(DEFAULT_LOCALE));
+  const [loading, setLoading] = useState(true)
   useEffect(()=>{
     async function initI18n(){
-      try{
-        setLoading(true);
-        const lang = await callService('common','getLanguage');
-        setI18n(changeLanguage(lang));
-      }catch(e){
-        Notification.error({ content: e.message });
-      }
-      finally{
+      try {
+        const lang = await callService('common', 'getLanguage');
+        setI18n(getIntl(lang));
+      } catch(e) {
+        // ignore i18n error, just using default language
+      } finally {
         setLoading(false);
       }
     }
     initI18n();
-
   },[]);
 
-  // const i18n = createIntl({locale:lang,messages:localeMessages[lang].messages}); 
   return (
     <RawIntlProvider value={i18n}>
-      <ConfigProvider>
-        {loading?<Loading visible={loading} style={{width: '100%', height:'80vh'}} /> :React.Children.only(props.children)}
+      <ConfigProvider locale={localeMessages[i18n.locale].nextMessages}>
+        {loading ? <Loading visible={loading} style={{width: '100%', height:'80vh'}} /> : React.Children.only(props.children)}
       </ConfigProvider>
     </RawIntlProvider>
   )
-}
-
-export function checkI18nReady(intl: IntlShape){
-  return intl.locale !== 'default'
 }

extensions/iceworks-component-builder/web/src/pages/Home/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Notification, Button, Input } from '@alifd/next';
 import Material from '@iceworks/material-ui';
-import { LocaleProvider, checkI18nReady } from '@/i18n';
+import { LocaleProvider } from '@/i18n';
 import { useIntl, FormattedMessage } from 'react-intl';
 import callService from '../../callService';
 import styles from './index.module.scss';
@@ -22,9 +22,6 @@ const Home = () => {
   }
 
   async function getSources() {
-    if(!checkI18nReady(intl)){
-      return;
-    }
     let sources = [];
     try {
       sources = await callService('material', 'getSourcesByProjectType');
@@ -37,9 +34,6 @@ const Home = () => {
   }
 
   async function getData(source: string) {
-    if(!checkI18nReady(intl)){
-      return;
-    }
     let data = {};
     try {
       data = await callService('material', 'getData', source);