feat: use antd LocaleProvider

src/containers/shared/App/IntlWrapper.tsx

@@ -1,55 +1,33 @@
 import * as React from 'react'
 import intl from 'react-intl-universal'
 import { find } from 'lodash'
-import { Select } from 'antd'
+import { Select, LocaleProvider } from 'antd'
 
 import * as styles from './index.scss'
 import { setCookie } from '@utils/index'
 import { COOKIE_KEYS } from '@constants/index'
 import PageLoading from '@components/PageLoading'
+import { SUPPOER_LOCALES, LOCALES_KEYS, getLocaleLoader } from '@locales/loader'
 
-enum LOCALES {
-    EN_US = 'en-US',
-    ZH_CN = 'zh-CN'
+interface IS {
+    currentLocale: string
+    antdLocaleData: PlainObject
 }
 
-const SUPPOER_LOCALES = [
-    {
-        name: 'English',
-        value: LOCALES.EN_US
-    },
-    {
-        name: '简体中文',
-        value: LOCALES.ZH_CN
-    }
-]
-
-export default class IntlWrapper extends React.Component {
-    state = { currentLocale: '' }
-
-    getLangLoader(locale: string): Promise<StringObject> {
-        switch (locale) {
-            case LOCALES.ZH_CN:
-                return import(/* webpackChunkName: "zh-CN" */ '@locales/zh-CN.json').then(m => m.default)
-            default:
-                return import(/* webpackChunkName: "en-US" */ '@locales/en-US.json').then(m => m.default)
-        }
-    }
+export default class IntlWrapper extends React.Component<{}, IS> {
+    state = { currentLocale: '', antdLocaleData: null }
 
     loadLocales() {
         let currentLocale = intl.determineLocale({ cookieLocaleKey: COOKIE_KEYS.LANG })
         // default is English
         if (!find(SUPPOER_LOCALES, { value: currentLocale })) {
-            currentLocale = LOCALES.EN_US
+            currentLocale = LOCALES_KEYS.EN_US
         }
-        this.getLangLoader(currentLocale)
-            .then(data => {
-                return intl.init({ currentLocale, locales: { [currentLocale]: data } })
-            })
-            .then(() => {
-                // After loading CLDR locale data, start to render
-                this.setState({ currentLocale })
+        getLocaleLoader(currentLocale).then(({ localeData, antdLocaleData }) => {
+            intl.init({ currentLocale, locales: { [currentLocale]: localeData } }).then(() => {
+                this.setState({ antdLocaleData, currentLocale })
             })
+        })
     }
 
     onSelectLocale = (val: string) => {
@@ -62,24 +40,26 @@ export default class IntlWrapper extends React.Component {
     }
 
     render() {
-        const { currentLocale } = this.state
+        const { currentLocale, antdLocaleData } = this.state
         if (!currentLocale) {
             return <PageLoading />
         }
         const selectLanguage = (
             <Select className={styles.intlSelect} onChange={this.onSelectLocale} value={currentLocale}>
-                {SUPPOER_LOCALES.map(locale => (
-                    <Select.Option key={locale.value} value={locale.value}>
-                        {locale.name}
+                {SUPPOER_LOCALES.map(l => (
+                    <Select.Option key={l.value} value={l.value}>
+                        {l.name}
                     </Select.Option>
                 ))}
             </Select>
         )
         return (
-            <React.Fragment>
-                {selectLanguage}
-                {this.props.children}
-            </React.Fragment>
+            <LocaleProvider locale={antdLocaleData}>
+                <React.Fragment>
+                    {selectLanguage}
+                    {this.props.children}
+                </React.Fragment>
+            </LocaleProvider>
         )
     }
 }

src/locales/loader.ts

@@ -0,0 +1,41 @@
+export enum LOCALES_KEYS {
+    EN_US = 'en-US',
+    ZH_CN = 'zh-CN'
+}
+
+export const SUPPOER_LOCALES = [
+    {
+        name: 'English',
+        value: LOCALES_KEYS.EN_US
+    },
+    {
+        name: '简体中文',
+        value: LOCALES_KEYS.ZH_CN
+    }
+]
+
+export interface LocaleResponse {
+    localeData: StringObject
+    antdLocaleData: PlainObject
+}
+
+export function getLocaleLoader(locale: string): Promise<LocaleResponse> {
+    switch (locale) {
+        case LOCALES_KEYS.ZH_CN:
+            return new Promise(async resolve => {
+                const loc = await import(/* webpackChunkName: "zh-CN" */ './zh_CN.json').then(m => m.default)
+                const antdLoc = await import(/* webpackChunkName: "antd-zh-CN" */ 'antd/lib/locale-provider/zh_CN').then(
+                    m => m.default
+                )
+                resolve({ localeData: loc, antdLocaleData: antdLoc })
+            })
+        default:
+            return new Promise(async resolve => {
+                const loc = await import(/* webpackChunkName: "en-US" */ './en_US.json').then(m => m.default)
+                const antdLoc = await import(/* webpackChunkName: "antd-en-US" */ 'antd/lib/locale-provider/en_US').then(
+                    m => m.default
+                )
+                resolve({ localeData: loc, antdLocaleData: antdLoc })
+            })
+    }
+}