New setLang function (#2355)

* base use * feat: don't use window.reload * remove umi-plugin-react * fix review waring
umijs · May 12, 2019 · 2cbd595 · afc163 · Jun 6, 2019 · 2cbd595
1 parent a0636d6
commit 2cbd595
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 42 deletions.
diff --git a/packages/umi-plugin-locale/src/index.js b/packages/umi-plugin-locale/src/index.js
@@ -91,10 +91,8 @@ const polyfillTargets = {
 export function isNeedPolyfill(targets = {}) {
   return (
     Object.keys(targets).find(key => {
-      return (
-        polyfillTargets[key.toLocaleLowerCase()] &&
-        polyfillTargets[key.toLocaleLowerCase()] >= targets[key]
-      );
+      const lowKey = key.toLocaleLowerCase();
+      return polyfillTargets[lowKey] && polyfillTargets[lowKey] >= targets[key];
     }) !== undefined
   );
 }

diff --git a/packages/umi-plugin-locale/src/locale.js b/packages/umi-plugin-locale/src/locale.js
@@ -1,21 +1,35 @@
 /* eslint-disable no-undef, prefer-rest-params */
 const ReactIntl = require('react-intl');
+const React = require('react');
 
-function setLocale(lang) {
+let localeContext;
+
+function setLocale(lang, realReload = true) {
   if (lang !== undefined && !/^([a-z]{2})-([A-Z]{2})$/.test(lang)) {
     // for reset when lang === undefined
     throw new Error('setLocale lang format error');
   }
   if (getLocale() !== lang) {
     window.localStorage.setItem('umi_locale', lang || '');
-    window.location.reload();
+    // 触发 context 的 reload
+    // 如果要刷新 location ，没必要进行 context 的 reload 了
+    if (localeContext && !realReload) {
+      localeContext.reloadAppLocale();
+    }
+    if (realReload) {
+      window.location.reload();
+    }
   }
 }
 
 function getLocale() {
   return window.g_lang;
 }
 
+const LangContext = React.createContext({
+  lang: window.g_lang,
+});
+
 // init api methods
 let intl;
 const intlApi = {};
@@ -28,6 +42,7 @@ const intlApi = {};
   'formatRelative',
   'formatNumber',
   'formatPlural',
+  'LangContext',
   'now',
   'onError',
 ].forEach(methodName => {
@@ -52,10 +67,20 @@ function _setIntlObject(theIntl) {
   intl = theIntl;
 }
 
+/**
+ * 用于出发 context 的重新渲染 方法。可以实现不刷新进行切换语言
+ * @param {*} context
+ */
+function _setLocaleContext(context) {
+  localeContext = context;
+}
+
 module.exports = {
   ...ReactIntl,
   ...intlApi,
   setLocale,
   getLocale,
   _setIntlObject,
+  LangContext,
+  _setLocaleContext,
 };
diff --git a/packages/umi-plugin-locale/template/wrapper.jsx.tpl b/packages/umi-plugin-locale/template/wrapper.jsx.tpl
@@ -1,6 +1,13 @@
 
 {{#localeList.length}}
-import { _setIntlObject, addLocaleData, IntlProvider, intlShape } from 'umi-plugin-locale';
+import {
+  _setIntlObject,
+  addLocaleData,
+  IntlProvider,
+  intlShape,
+  LangContext,
+  _setLocaleContext
+} from 'umi-plugin-locale';
 
 const InjectedWrapper = (() => {
   let sfc = (props, context) => {
@@ -49,40 +56,68 @@ const localeInfo = {
   {{/localeList}}
 };
 
-let appLocale = {
-  locale: '{{defaultLocale}}',
-  messages: {},
-  data: require('react-intl/locale-data/{{defaultLang}}'),
-  momentLocale: '{{defaultMomentLocale}}',
-};
-
-const runtimeLocale = require('umi/_runtimePlugin').mergeConfig('locale') || {};
-const runtimeLocaleDefault =  typeof runtimeLocale.default === 'function' ? runtimeLocale.default() : runtimeLocale.default;
-if (useLocalStorage && localStorage.getItem('umi_locale') && localeInfo[localStorage.getItem('umi_locale')]) {
-  appLocale = localeInfo[localStorage.getItem('umi_locale')];
-} else if (localeInfo[navigator.language] && baseNavigator){
-  appLocale = localeInfo[navigator.language];
-} else if(localeInfo[runtimeLocaleDefault]){
-  appLocale = localeInfo[runtimeLocaleDefault];
-} else {
-  appLocale = localeInfo['{{defaultLocale}}'] || appLocale;
-}
-window.g_lang = appLocale.locale;
-{{#localeList.length}}
-appLocale.data && addLocaleData(appLocale.data);
-{{/localeList.length}}
+class LocaleWrapper extends React.Component{
+  state = {
+    locale: '{{defaultLocale}}',
+  };
+  getAppLocale(){
+    let appLocale = {
+      locale: '{{defaultLocale}}',
+      messages: {},
+      data: require('react-intl/locale-data/{{defaultLang}}'),
+      momentLocale: '{{defaultMomentLocale}}',
+    };
 
-export default function LocaleWrapper(props) {
-  let ret = props.children;
-  {{#localeList.length}}
-  ret = (<IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
-    <InjectedWrapper>{ret}</InjectedWrapper>
-  </IntlProvider>)
-  {{/localeList.length}}
-  {{#antd}}
-  ret = (<LocaleProvider locale={appLocale.antd ? (appLocale.antd.default || appLocale.antd) : defaultAntd}>
-    {ret}
-  </LocaleProvider>);
-  {{/antd}}
-  return ret;
+    const runtimeLocale = require('umi/_runtimePlugin').mergeConfig('locale') || {};
+    const runtimeLocaleDefault =  typeof runtimeLocale.default === 'function' ? runtimeLocale.default() : runtimeLocale.default;
+    if (useLocalStorage && localStorage.getItem('umi_locale') && localeInfo[localStorage.getItem('umi_locale')]) {
+      appLocale = localeInfo[localStorage.getItem('umi_locale')];
+    } else if (localeInfo[navigator.language] && baseNavigator){
+      appLocale = localeInfo[navigator.language];
+    } else if(localeInfo[runtimeLocaleDefault]){
+      appLocale = localeInfo[runtimeLocaleDefault];
+    } else {
+      appLocale = localeInfo['{{defaultLocale}}'] || appLocale;
+    }
+    window.g_lang = appLocale.locale;
+    {{#localeList.length}}
+    appLocale.data && addLocaleData(appLocale.data);
+    {{/localeList.length}}
+
+    return appLocale;
+  }
+  reloadAppLocale = () => {
+    const appLocale = this.getAppLocale();
+    this.setState({
+      locale: appLocale.locale,
+    });
+  };
+
+  render(){
+    const appLocale = this.getAppLocale();
+    const LangContextValue = {
+      locale: appLocale.locale,
+      reloadAppLocale: this.reloadAppLocale,
+    };
+    let ret = this.props.children;
+    {{#localeList.length}}
+    ret = (<IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
+      <InjectedWrapper>
+        <LangContext.Provider value={LangContextValue}>
+          <LangContext.Consumer>{(value) => {
+            _setLocaleContext(value);
+            return this.props.children
+            }}</LangContext.Consumer>
+        </LangContext.Provider>
+      </InjectedWrapper>
+    </IntlProvider>)
+    {{/localeList.length}}
+    {{#antd}}
+     return (<LocaleProvider locale={appLocale.antd ? (appLocale.antd.default || appLocale.antd) : defaultAntd}>
+      {ret}
+    </LocaleProvider>);
+    {{/antd}}
+    return ret;
+  }
 }
+export default LocaleWrapper;