@arcblock/ux 2.4.26 → 2.4.28

package/lib/Locale/context.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useLocaleContext = exports.setLocale = exports.languages = exports.getLocale = exports.create = exports.LocaleProvider = exports.LocaleContext = exports.LocaleConsumer = void 0;
+exports.LocaleContext = exports.LocaleConsumer = void 0;
+exports.LocaleProvider = LocaleProvider;
+exports.setLocale = exports.getLocale = void 0;
+exports.useLocaleContext = useLocaleContext;
 
 var _react = require("react");
 
@@ -17,7 +20,7 @@ var _Util = require("../Util");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "locale", "translations"];
+const _excluded = ["children", "locale", "translations", "languages"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,22 +34,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-const cookieName = 'nf_lang';
-const languages = [{
-  value: 'en',
-  text: 'English'
-}, {
-  value: 'zh',
-  text: '简体中文'
-}];
-exports.languages = languages;
-const langParams = {
-  languages: ['zh', 'en'],
-  fallback: 'en'
-}; // 跨应用传递多语言选择的方式是在 query string 中添加 locale 参数，LocaleSelector 要高优先级遵守这个参数
-
-const getLocaleFromSearchParams = function getLocaleFromSearchParams() {
-  let url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.location.href;
+const cookieName = 'nf_lang'; // 跨应用传递多语言选择的方式是在 query string 中添加 locale 参数，LocaleSelector 要高优先级遵守这个参数
+
+const getLocaleFromSearchParams = function getLocaleFromSearchParams(languages) {
+  let url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.href;
   const locale = new URL(url).searchParams.get('locale');
 
   if (languages.find(x => x.value === locale)) {
@@ -67,7 +58,17 @@ const setLocaleParam = function setLocaleParam(locale) {
   }
 };
 
-const getLocale = locale => locale || getLocaleFromSearchParams() || _jsCookie.default.get(cookieName) || (0, _browserLang.default)(langParams);
+const getLocale = function getLocale() {
+  var _languages$;
+
+  let languages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const langParams = {
+    languages: languages.map(item => item.value),
+    // 取 languages 首个元素的 value 值, 如果不存在则取 'en'
+    fallback: (languages === null || languages === void 0 ? void 0 : (_languages$ = languages[0]) === null || _languages$ === void 0 ? void 0 : _languages$.value) || 'en'
+  };
+  return getLocaleFromSearchParams(languages) || _jsCookie.default.get(cookieName) || (0, _browserLang.default)(langParams);
+};
 
 exports.getLocale = getLocale;
 
@@ -81,85 +82,80 @@ exports.setLocale = setLocale;
 
 const replace = (template, data) => template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
 
-const create = () => {
-  const LocaleContext = /*#__PURE__*/(0, _react.createContext)();
-  const {
-    Provider,
-    Consumer
-  } = LocaleContext;
-
-  function LocaleProvider(_ref) {
-    let {
-      children,
-      locale,
-      translations
-    } = _ref,
-        rest = _objectWithoutProperties(_ref, _excluded);
-
-    const [currentLocale, setCurrentLocale] = (0, _react.useState)(getLocale(locale));
-
-    const changeLocale = newLocale => {
-      setCurrentLocale(newLocale);
-      setLocale(newLocale);
-    };
-
-    (0, _react.useEffect)(() => {
-      const tmpLocale = getLocale(locale);
-
-      if (tmpLocale !== currentLocale) {
-        changeLocale(locale);
-      } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-    }, [locale]);
-
-    const translate = (key, data) => {
-      if (!translations[currentLocale] || !translations[currentLocale][key]) {
-        console.warn("Warning: no ".concat(key, " translation of ").concat(currentLocale));
-        return key;
-      }
-
-      return replace(translations[currentLocale][key], data);
-    };
-
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
-      value: _objectSpread({
-        locale: currentLocale,
-        changeLocale,
-        t: translate
-      }, rest),
-      children: children
-    });
-  }
+const LocaleContext = /*#__PURE__*/(0, _react.createContext)();
+exports.LocaleContext = LocaleContext;
+const {
+  Provider,
+  Consumer
+} = LocaleContext;
+exports.LocaleConsumer = Consumer;
+
+function LocaleProvider(_ref) {
+  let {
+    children,
+    locale,
+    translations,
+    languages
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const [currentLocale, setCurrentLocale] = (0, _react.useState)(locale || getLocale(languages));
+
+  const changeLocale = newLocale => {
+    setCurrentLocale(newLocale);
+    setLocale(newLocale);
+  };
 
-  function useLocaleContext() {
-    const context = (0, _react.useContext)(LocaleContext);
-    return context;
-  }
+  (0, _react.useEffect)(() => {
+    const tmpLocale = locale || getLocale(languages);
 
-  LocaleProvider.propTypes = {
-    children: _propTypes.default.any.isRequired,
-    translations: _propTypes.default.object.isRequired,
-    locale: _propTypes.default.string
-  };
-  LocaleProvider.defaultProps = {
-    locale: ''
-  };
-  return {
-    Consumer,
-    LocaleProvider,
-    LocaleContext,
-    useLocaleContext
+    if (tmpLocale !== currentLocale) {
+      changeLocale(locale);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [locale]);
+
+  const translate = (key, data) => {
+    if (!translations[currentLocale] || !translations[currentLocale][key]) {
+      console.warn("Warning: no ".concat(key, " translation of ").concat(currentLocale));
+      return key;
+    }
+
+    return replace(translations[currentLocale][key], data);
   };
-};
 
-exports.create = create;
-const {
-  Consumer,
-  LocaleProvider,
-  LocaleContext,
-  useLocaleContext
-} = create();
-exports.useLocaleContext = useLocaleContext;
-exports.LocaleContext = LocaleContext;
-exports.LocaleProvider = LocaleProvider;
-exports.LocaleConsumer = Consumer;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
+    value: _objectSpread({
+      locale: currentLocale,
+      changeLocale,
+      t: translate,
+      languages
+    }, rest),
+    children: children
+  });
+}
+
+function useLocaleContext() {
+  const context = (0, _react.useContext)(LocaleContext);
+  return context;
+}
+
+LocaleProvider.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  translations: _propTypes.default.object.isRequired,
+  locale: _propTypes.default.string,
+  languages: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.string,
+    text: _propTypes.default.string
+  }))
+};
+LocaleProvider.defaultProps = {
+  locale: '',
+  languages: [{
+    value: 'en',
+    text: 'English'
+  }, {
+    value: 'zh',
+    text: '简体中文'
+  }]
+};

package/lib/Locale/selector.js

@@ -69,7 +69,8 @@ function LocaleSelector(props) {
 
   const {
     locale,
-    changeLocale
+    changeLocale,
+    languages
   } = (0, _react.useContext)(_context.LocaleContext);
   const anchorEl = (0, _react.useRef)(null);
   const [open, setOpen] = (0, _react.useState)(false);
@@ -132,7 +133,7 @@ function LocaleSelector(props) {
         children: [renderIcon, showText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           component: "strong",
           className: "trigger-text",
-          children: _context.languages.find(x => x.value === locale).text
+          children: languages.find(x => x.value === locale).text
         }) : '']
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, _objectSpread(_objectSpread({
@@ -145,7 +146,7 @@ function LocaleSelector(props) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
           onClickAway: onClose,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
-            children: _context.languages.map(_ref => {
+            children: languages.map(_ref => {
               let {
                 value,
                 text
@@ -186,4 +187,4 @@ var _default = LocaleSelector;
 exports.default = _default;
 const Div = (0, _Theme.styled)('div', {
   shouldForwardProp: prop => prop !== 'dark'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n    white-space: nowrap;\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.26",
+  "version": "2.4.28",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "40365e41139ba7dd6749e7a395703f25ae454c07",
+  "gitHead": "3133ed4e76d70eff05b08130fa7340dcc07611c4",
   "dependencies": {
-    "@arcblock/icons": "^2.4.26",
-    "@arcblock/react-hooks": "^2.4.26",
+    "@arcblock/icons": "^2.4.28",
+    "@arcblock/react-hooks": "^2.4.28",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",

package/src/Locale/context.js

@@ -7,17 +7,9 @@ import browserLang from './browser-lang';
 import { getCookieOptions } from '../Util';
 
 const cookieName = 'nf_lang';
-const languages = [
-  { value: 'en', text: 'English' },
-  { value: 'zh', text: '简体中文' },
-];
-const langParams = {
-  languages: ['zh', 'en'],
-  fallback: 'en',
-};
 
 // 跨应用传递多语言选择的方式是在 query string 中添加 locale 参数，LocaleSelector 要高优先级遵守这个参数
-const getLocaleFromSearchParams = (url = window.location.href) => {
+const getLocaleFromSearchParams = (languages, url = window.location.href) => {
   const locale = new URL(url).searchParams.get('locale');
   if (languages.find((x) => x.value === locale)) {
     return locale;
@@ -34,8 +26,14 @@ const setLocaleParam = (locale, url = window.location.href) => {
   }
 };
 
-const getLocale = (locale) =>
-  locale || getLocaleFromSearchParams() || Cookie.get(cookieName) || browserLang(langParams);
+const getLocale = (languages = []) => {
+  const langParams = {
+    languages: languages.map((item) => item.value),
+    // 取 languages 首个元素的 value 值, 如果不存在则取 'en'
+    fallback: languages?.[0]?.value || 'en',
+  };
+  return getLocaleFromSearchParams(languages) || Cookie.get(cookieName) || browserLang(langParams);
+};
 const setLocale = (locale) => {
   Cookie.set(cookieName, locale, getCookieOptions());
   setLocaleParam(locale);
@@ -44,64 +42,56 @@ const setLocale = (locale) => {
 const replace = (template, data) =>
   template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
 
-const create = () => {
-  const LocaleContext = createContext();
-  const { Provider, Consumer } = LocaleContext;
-  function LocaleProvider({ children, locale, translations, ...rest }) {
-    const [currentLocale, setCurrentLocale] = useState(getLocale(locale));
-
-    const changeLocale = (newLocale) => {
-      setCurrentLocale(newLocale);
-      setLocale(newLocale);
-    };
-
-    useEffect(() => {
-      const tmpLocale = getLocale(locale);
-      if (tmpLocale !== currentLocale) {
-        changeLocale(locale);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [locale]);
-
-    const translate = (key, data) => {
-      if (!translations[currentLocale] || !translations[currentLocale][key]) {
-        console.warn(`Warning: no ${key} translation of ${currentLocale}`);
-        return key;
-      }
-
-      return replace(translations[currentLocale][key], data);
-    };
-
-    return <Provider value={{ locale: currentLocale, changeLocale, t: translate, ...rest }}>{children}</Provider>;
-  }
+const LocaleContext = createContext();
+const { Provider, Consumer } = LocaleContext;
+function LocaleProvider({ children, locale, translations, languages, ...rest }) {
+  const [currentLocale, setCurrentLocale] = useState(locale || getLocale(languages));
 
-  function useLocaleContext() {
-    const context = useContext(LocaleContext);
-    return context;
-  }
-
-  LocaleProvider.propTypes = {
-    children: PropTypes.any.isRequired,
-    translations: PropTypes.object.isRequired,
-    locale: PropTypes.string,
+  const changeLocale = (newLocale) => {
+    setCurrentLocale(newLocale);
+    setLocale(newLocale);
   };
 
-  LocaleProvider.defaultProps = {
-    locale: '',
+  useEffect(() => {
+    const tmpLocale = locale || getLocale(languages);
+    if (tmpLocale !== currentLocale) {
+      changeLocale(locale);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [locale]);
+
+  const translate = (key, data) => {
+    if (!translations[currentLocale] || !translations[currentLocale][key]) {
+      console.warn(`Warning: no ${key} translation of ${currentLocale}`);
+      return key;
+    }
+
+    return replace(translations[currentLocale][key], data);
   };
 
-  return { Consumer, LocaleProvider, LocaleContext, useLocaleContext };
+  return (
+    <Provider value={{ locale: currentLocale, changeLocale, t: translate, languages, ...rest }}>{children}</Provider>
+  );
+}
+
+function useLocaleContext() {
+  const context = useContext(LocaleContext);
+  return context;
+}
+
+LocaleProvider.propTypes = {
+  children: PropTypes.any.isRequired,
+  translations: PropTypes.object.isRequired,
+  locale: PropTypes.string,
+  languages: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })),
 };
 
-const { Consumer, LocaleProvider, LocaleContext, useLocaleContext } = create();
-
-export {
-  LocaleProvider,
-  Consumer as LocaleConsumer,
-  LocaleContext,
-  useLocaleContext,
-  setLocale,
-  getLocale,
-  languages,
-  create,
+LocaleProvider.defaultProps = {
+  locale: '',
+  languages: [
+    { value: 'en', text: 'English' },
+    { value: 'zh', text: '简体中文' },
+  ],
 };
+
+export { LocaleProvider, Consumer as LocaleConsumer, LocaleContext, useLocaleContext, setLocale, getLocale };

package/src/Locale/selector.js

@@ -14,12 +14,12 @@ import GlobeIcon from '@arcblock/icons/lib/Globe';
 
 import { getColor, getBackground } from '../Util';
 
-import { LocaleContext, languages } from './context';
+import { LocaleContext } from './context';
 import { styled, useTheme } from '../Theme';
 
 function LocaleSelector(props) {
   const { showText, popperProps, popperType, icon: Icon, size, ...rest } = props;
-  const { locale, changeLocale } = useContext(LocaleContext);
+  const { locale, changeLocale, languages } = useContext(LocaleContext);
   const anchorEl = useRef(null);
   const [open, setOpen] = useState(false);
   const theme = useTheme();
@@ -131,6 +131,7 @@ const Div = styled('div', {
     flex-direction: column;
     justify-content: center;
     font-size: 14px;
+    white-space: nowrap;
 
     .trigger-text {
       margin-left: 5px;