@arcblock/ux 2.9.5 → 2.9.7

package/es/Locale/context.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-prototype-builtins */
-import { createContext, useState, useEffect, useContext } from 'react';
+import { createContext, useState, useEffect, useContext, useRef } from 'react';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import Cookie from 'js-cookie';
@@ -63,11 +63,15 @@ function LocaleProvider({
   locale,
   fallbackLocale,
   translations,
+  onLoadingTranslation,
   languages,
   ...rest
 }) {
   const langs = getLanguages(languages);
-  const [currentLocale, setCurrentLocale] = useState(locale || getLocale(langs));
+  // eslint-disable-next-line prefer-const
+  let [currentLocale, setCurrentLocale] = useState(locale || getLocale(langs));
+  const lastCurrentLocale = useRef(fallbackLocale);
+  const [, setForceUpdate] = useState(0);
   const changeLocale = newLocale => {
     setCurrentLocale(newLocale);
     setLocale(newLocale);
@@ -79,6 +83,25 @@ function LocaleProvider({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [locale]);
+
+  // handle async loading of translations
+  if (currentLocale && translations[currentLocale] && typeof translations[currentLocale] === 'function') {
+    const tmpLocale = currentLocale;
+    try {
+      Promise.resolve(translations[tmpLocale]()).then(res => {
+        if (res && typeof res === 'object') {
+          translations[tmpLocale] = res;
+          setForceUpdate(x => x > 999 ? 0 : x + 1);
+        }
+      });
+    } catch (err) {
+      console.error(err);
+    }
+    onLoadingTranslation(tmpLocale, langs);
+    currentLocale = lastCurrentLocale.current;
+  } else {
+    lastCurrentLocale.current = currentLocale;
+  }
   const t = (key, data) => translate(translations, key, currentLocale, fallbackLocale, data);
   return /*#__PURE__*/_jsx(Provider, {
     value: {
@@ -98,6 +121,7 @@ function useLocaleContext() {
 LocaleProvider.propTypes = {
   children: PropTypes.any.isRequired,
   translations: PropTypes.object.isRequired,
+  onLoadingTranslation: PropTypes.func,
   locale: PropTypes.string,
   // 会影响 translate(key) 的结果 - 当 key 无效时查找 fallbackLocale 对应的翻译结果
   fallbackLocale: PropTypes.string,
@@ -109,6 +133,7 @@ LocaleProvider.propTypes = {
 LocaleProvider.defaultProps = {
   locale: '',
   fallbackLocale: '',
-  languages: []
+  languages: [],
+  onLoadingTranslation: () => {}
 };
 export { LocaleProvider, Consumer as LocaleConsumer, LocaleContext, useLocaleContext, setLocale, getLocale };

package/es/Locale/util.js

@@ -8,6 +8,9 @@ export const translate = (translations, key, locale, fallbackLocale = 'en', data
     }
     return key;
   }
+  if (typeof translations[locale] === 'function' || translations[locale].then) {
+    return replace(translations[fallbackLocale][key], data);
+  }
   return replace(translations[locale][key], data);
 };
 export const t = translate;

package/lib/Locale/context.js

@@ -15,7 +15,7 @@ var _browserLang = _interopRequireDefault(require("./browser-lang"));
 var _util = require("./util");
 var _Util = require("../Util");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "locale", "fallbackLocale", "translations", "languages"];
+const _excluded = ["children", "locale", "fallbackLocale", "translations", "onLoadingTranslation", "languages"];
 /* eslint-disable no-prototype-builtins */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -90,11 +90,15 @@ function LocaleProvider(_ref) {
       locale,
       fallbackLocale,
       translations,
+      onLoadingTranslation,
       languages
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const langs = getLanguages(languages);
-  const [currentLocale, setCurrentLocale] = (0, _react.useState)(locale || getLocale(langs));
+  // eslint-disable-next-line prefer-const
+  let [currentLocale, setCurrentLocale] = (0, _react.useState)(locale || getLocale(langs));
+  const lastCurrentLocale = (0, _react.useRef)(fallbackLocale);
+  const [, setForceUpdate] = (0, _react.useState)(0);
   const changeLocale = newLocale => {
     setCurrentLocale(newLocale);
     setLocale(newLocale);
@@ -106,6 +110,25 @@ function LocaleProvider(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [locale]);
+
+  // handle async loading of translations
+  if (currentLocale && translations[currentLocale] && typeof translations[currentLocale] === 'function') {
+    const tmpLocale = currentLocale;
+    try {
+      Promise.resolve(translations[tmpLocale]()).then(res => {
+        if (res && typeof res === 'object') {
+          translations[tmpLocale] = res;
+          setForceUpdate(x => x > 999 ? 0 : x + 1);
+        }
+      });
+    } catch (err) {
+      console.error(err);
+    }
+    onLoadingTranslation(tmpLocale, langs);
+    currentLocale = lastCurrentLocale.current;
+  } else {
+    lastCurrentLocale.current = currentLocale;
+  }
   const t = (key, data) => (0, _util.translate)(translations, key, currentLocale, fallbackLocale, data);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
     value: _objectSpread({
@@ -124,6 +147,7 @@ function useLocaleContext() {
 LocaleProvider.propTypes = {
   children: _propTypes.default.any.isRequired,
   translations: _propTypes.default.object.isRequired,
+  onLoadingTranslation: _propTypes.default.func,
   locale: _propTypes.default.string,
   // 会影响 translate(key) 的结果 - 当 key 无效时查找 fallbackLocale 对应的翻译结果
   fallbackLocale: _propTypes.default.string,
@@ -135,5 +159,6 @@ LocaleProvider.propTypes = {
 LocaleProvider.defaultProps = {
   locale: '',
   fallbackLocale: '',
-  languages: []
+  languages: [],
+  onLoadingTranslation: () => {}
 };

package/lib/Locale/util.js

@@ -19,6 +19,9 @@ const translate = function translate(translations, key, locale) {
     }
     return key;
   }
+  if (typeof translations[locale] === 'function' || translations[locale].then) {
+    return replace(translations[fallbackLocale][key], data);
+  }
   return replace(translations[locale][key], data);
 };
 exports.translate = translate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.5",
+  "version": "2.9.7",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -340,11 +340,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "3905a2012e1aab17ab95cdf30d561bcd9f439bfe",
+  "gitHead": "362c78d98c51f7f4297f019cf2a01c2dae919870",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.5",
-    "@arcblock/react-hooks": "^2.9.5",
+    "@arcblock/icons": "^2.9.7",
+    "@arcblock/react-hooks": "^2.9.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/Locale/context.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-prototype-builtins */
-import { createContext, useState, useEffect, useContext } from 'react';
+import { createContext, useState, useEffect, useContext, useRef } from 'react';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import Cookie from 'js-cookie';
@@ -61,9 +61,12 @@ const getLanguages = (arg) => {
 
 const LocaleContext = createContext();
 const { Provider, Consumer } = LocaleContext;
-function LocaleProvider({ children, locale, fallbackLocale, translations, languages, ...rest }) {
+function LocaleProvider({ children, locale, fallbackLocale, translations, onLoadingTranslation, languages, ...rest }) {
   const langs = getLanguages(languages);
-  const [currentLocale, setCurrentLocale] = useState(locale || getLocale(langs));
+  // eslint-disable-next-line prefer-const
+  let [currentLocale, setCurrentLocale] = useState(locale || getLocale(langs));
+  const lastCurrentLocale = useRef(fallbackLocale);
+  const [, setForceUpdate] = useState(0);
 
   const changeLocale = (newLocale) => {
     setCurrentLocale(newLocale);
@@ -78,6 +81,26 @@ function LocaleProvider({ children, locale, fallbackLocale, translations, langua
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [locale]);
 
+  // handle async loading of translations
+  if (currentLocale && translations[currentLocale] && typeof translations[currentLocale] === 'function') {
+    const tmpLocale = currentLocale;
+    try {
+      Promise.resolve(translations[tmpLocale]()).then((res) => {
+        if (res && typeof res === 'object') {
+          translations[tmpLocale] = res;
+          setForceUpdate((x) => (x > 999 ? 0 : x + 1));
+        }
+      });
+    } catch (err) {
+      console.error(err);
+    }
+
+    onLoadingTranslation(tmpLocale, langs);
+    currentLocale = lastCurrentLocale.current;
+  } else {
+    lastCurrentLocale.current = currentLocale;
+  }
+
   const t = (key, data) => translate(translations, key, currentLocale, fallbackLocale, data);
 
   return <Provider value={{ locale: currentLocale, changeLocale, t, languages: langs, ...rest }}>{children}</Provider>;
@@ -91,6 +114,7 @@ function useLocaleContext() {
 LocaleProvider.propTypes = {
   children: PropTypes.any.isRequired,
   translations: PropTypes.object.isRequired,
+  onLoadingTranslation: PropTypes.func,
   locale: PropTypes.string,
   // 会影响 translate(key) 的结果 - 当 key 无效时查找 fallbackLocale 对应的翻译结果
   fallbackLocale: PropTypes.string,
@@ -101,6 +125,7 @@ LocaleProvider.defaultProps = {
   locale: '',
   fallbackLocale: '',
   languages: [],
+  onLoadingTranslation: () => {},
 };
 
 export { LocaleProvider, Consumer as LocaleConsumer, LocaleContext, useLocaleContext, setLocale, getLocale };

package/src/Locale/util.js

@@ -10,7 +10,9 @@ export const translate = (translations, key, locale, fallbackLocale = 'en', data
     }
     return key;
   }
-
+  if (typeof translations[locale] === 'function' || translations[locale].then) {
+    return replace(translations[fallbackLocale][key], data);
+  }
   return replace(translations[locale][key], data);
 };