@blocklet/ui-react 3.1.48 → 3.1.49

package/lib/common/header-addons.js

@@ -1,42 +1,46 @@
-import { jsx as i, Fragment as A } from "react/jsx-runtime";
+import { jsx as i, Fragment as b } from "react/jsx-runtime";
 import "iconify-icon";
 import a from "prop-types";
-import { use as b, createElement as L } from "react";
-import { SessionContext as v } from "@arcblock/did-connect-react/lib/Session";
-import N from "@arcblock/ux/lib/Config/theme-mode-toggle";
-import { useLocaleContext as T } from "@arcblock/ux/lib/Locale/context";
-import k from "@arcblock/ux/lib/Locale/selector";
-import C from "@arcblock/ux/lib/SessionBlocklet";
-import S from "@arcblock/ux/lib/SessionUser";
-import { WELLKNOWN_BLOCKLET_ADMIN_PATH as D } from "@abtnode/constant";
-import { getLocalizedNavigation as E, filterNavByRole as M } from "../blocklets.js";
-import { SessionManagerProps as O } from "../types.js";
-import R from "./domain-warning.js";
-import W from "./notification-addon.js";
-import P from "./org-switch/index.js";
-const B = () => !!(window?.blocklet?.navigation ?? []).find((o) => o.id === "/userCenter/notification"), _ = (n) => {
+import { use as L, createElement as v } from "react";
+import { SessionContext as N } from "@arcblock/did-connect-react/lib/Session";
+import T from "@arcblock/ux/lib/Config/theme-mode-toggle";
+import { useLocaleContext as k } from "@arcblock/ux/lib/Locale/context";
+import C from "@arcblock/ux/lib/Locale/selector";
+import S from "@arcblock/ux/lib/SessionBlocklet";
+import D from "@arcblock/ux/lib/SessionUser";
+import { WELLKNOWN_BLOCKLET_ADMIN_PATH as E } from "@abtnode/constant";
+import { getLocalizedNavigation as M, filterNavByRole as O } from "../blocklets.js";
+import { SessionManagerProps as R } from "../types.js";
+import W from "./domain-warning.js";
+import P from "./notification-addon.js";
+import B from "./org-switch/index.js";
+const _ = () => !!(window?.blocklet?.navigation ?? []).find((o) => o.id === "/userCenter/notification"), j = (n) => {
   const { settings: o = {} } = n ?? window?.blocklet ?? {};
   return o?.org?.enabled || !1;
-}, j = () => {
+}, x = () => {
   const { pathname: n = "" } = window.location || {};
-  return n.startsWith(D);
+  return n.startsWith(E);
 };
-function x({
+function z({
   formattedBlocklet: n,
   addons: o = null,
   showDomainWarningDialog: m = !0,
   sessionManagerProps: u = { showRole: !0 }
 }) {
-  const e = b(v), { locale: t, languages: p } = T() || {}, { enableConnect: g = !0, enableLocale: d = !0 } = n, h = !!e?.session?.user;
-  let l = E(n?.navigation?.sessionManager, t) || [];
-  l = M(l, e?.session?.user?.role);
+  const e = L(N), { locale: t, languages: p, defaultLocale: g } = k() || {}, { enableConnect: d = !0, enableLocale: h = !0 } = n, y = !!e?.session?.user;
+  let l = M({
+    navigation: n?.navigation?.sessionManager,
+    locale: t,
+    defaultLocale: g
+  }) || [];
+  l = O(l, e?.session?.user?.role);
   const c = (() => {
     if (o && typeof o != "function")
       return Array.isArray(o) ? o : [o];
     let s = [];
-    if (B() && s.push(/* @__PURE__ */ i(W, { session: e.session }, "notification-addon")), d && t && p.length > 1 && s.push(/* @__PURE__ */ i(k, { showText: !1 }, "locale-selector")), s.push(/* @__PURE__ */ i(N, {}, "theme-mode-toggle")), g && e) {
+    if (_() && s.push(/* @__PURE__ */ i(P, { session: e.session }, "notification-addon")), h && t && p.length > 1 && s.push(/* @__PURE__ */ i(C, { showText: !1 }, "locale-selector")), s.push(/* @__PURE__ */ i(T, {}, "theme-mode-toggle")), d && e) {
       const f = [];
-      h && (l ? l.slice(0, 5) : []).forEach((r) => {
+      y && (l ? l.slice(0, 5) : []).forEach((r) => {
         f.push({
           label: r.title,
           icon: r.icon ? /* @__PURE__ */ i("iconify-icon", { icon: r.icon, height: 24, style: { marginRight: 8 } }) : null,
@@ -44,9 +48,9 @@ function x({
           href: r.link,
           key: r.link
         });
-      }), s.push(/* @__PURE__ */ i(C, { session: e.session, locale: t }, "session-blocklet")), s.push(
+      }), s.push(/* @__PURE__ */ i(S, { session: e.session, locale: t }, "session-blocklet")), s.push(
         /* @__PURE__ */ i(
-          S,
+          D,
           {
             session: e.session,
             locale: t,
@@ -58,22 +62,22 @@ function x({
         )
       );
     }
-    return !j() && _(n) && e?.session?.user && s.unshift(/* @__PURE__ */ i(P, { session: e.session, locale: t }, "orgs-switch")), typeof o == "function" && (s = o(s) || []), s;
-  })(), y = Array.isArray(c) ? c : [c], w = [
-    m ? /* @__PURE__ */ i(R, { session: e?.session, locale: t }) : null,
-    ...y
+    return !x() && j(n) && e?.session?.user && s.unshift(/* @__PURE__ */ i(B, { session: e.session, locale: t }, "orgs-switch")), typeof o == "function" && (s = o(s) || []), s;
+  })(), w = Array.isArray(c) ? c : [c], A = [
+    m ? /* @__PURE__ */ i(W, { session: e?.session, locale: t }) : null,
+    ...w
   ].filter(Boolean);
-  return L(A, null, ...w);
+  return v(b, null, ...A);
 }
-x.propTypes = {
+z.propTypes = {
   formattedBlocklet: a.object.isRequired,
   // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: a.oneOfType([a.func, a.node]),
-  sessionManagerProps: O,
+  sessionManagerProps: R,
   showDomainWarningDialog: a.bool
 };
 export {
-  x as default
+  z as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.1.48",
+  "version": "3.1.49",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -9,7 +9,7 @@
     "blocklet"
   ],
   "author": "wangshijun<wangshijun2010@gmail.com>",
-  "homepage": "https://github.com/ArcBlock/ux#readme",
+  "homepage": "https://www.arcblock.io/docs/blocklet-ui-react",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "1.16.52",
     "@abtnode/util": "1.16.52",
-    "@arcblock/bridge": "3.1.48",
-    "@arcblock/icons": "3.1.48",
-    "@arcblock/react-hooks": "3.1.48",
+    "@arcblock/bridge": "3.1.49",
+    "@arcblock/icons": "3.1.49",
+    "@arcblock/react-hooks": "3.1.49",
     "@arcblock/ws": "^1.25.6",
     "@blocklet/constant": "1.16.52",
     "@blocklet/did-space-react": "^1.1.32",
@@ -83,7 +83,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.1.48",
+    "@arcblock/did-connect-react": "3.1.49",
     "@types/dompurify": "^3.2.0",
     "@types/ua-parser-js": "^0.7.39",
     "@types/validator": "^13.15.2",
@@ -91,5 +91,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "49a6dabae8a06667e517c6811f5f7939ff907ce1"
+  "gitHead": "4612b57a1452bd4330755b53d093505a6ae7dea5"
 }

package/src/Dashboard/index.jsx

@@ -38,7 +38,7 @@ function Dashboard({
   const sessionCtx = use(SessionContext);
   const user = sessionCtx?.session?.user;
   const userRole = user?.role;
-  const { locale } = useLocaleContext() || {};
+  const { locale, defaultLocale } = useLocaleContext() || {};
   const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
@@ -50,7 +50,12 @@ function Dashboard({
   }, [meta]);
   const { localizedNav, flattened, matchedIndex } = useMemo(() => {
     // eslint-disable-next-line @typescript-eslint/no-shadow
-    let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
+    let localizedNav =
+      getLocalizedNavigation({
+        navigation: formattedBlocklet?.navigation?.dashboard,
+        locale,
+        defaultLocale,
+      }) || [];
     // 根据 role 筛选 nav 数据
     localizedNav = filterNavByRole(localizedNav, userRole);
     // 将 nav 数据处理成 ux dashboard 需要的格式
@@ -88,7 +93,7 @@ function Dashboard({
       flattened[matchedIndex].active = true;
     }
     return { localizedNav, flattened, matchedIndex };
-  }, [formattedBlocklet, locale, userRole]);
+  }, [formattedBlocklet, locale, defaultLocale, userRole]);
 
   const allLinks = typeof links === 'function' ? links(localizedNav) : [...localizedNav, ...links];
   const appLogo = useBlockletLogo({

package/src/Footer/index.jsx

@@ -17,7 +17,7 @@ import withHideWhenEmbed from '../libs/with-hide-when-embed';
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
  */
 function Footer({ meta = {}, theme: themeOverrides = {}, ...rest }) {
-  const { locale } = useLocaleContext() || {};
+  const { locale, defaultLocale } = useLocaleContext() || {};
   const parentTheme = useTheme();
   const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
@@ -44,9 +44,27 @@ function Footer({ meta = {}, theme: themeOverrides = {}, ...rest }) {
   const $bgColor = mergeTheme.palette.background.default;
 
   const localized = {
-    footerNav: getLocalizedNavigation(formattedBlocklet?.navigation?.footer, locale, 'footer') || [],
-    socialMedia: getLocalizedNavigation(formattedBlocklet?.navigation?.social, locale, 'footer') || [],
-    links: getLocalizedNavigation(formattedBlocklet?.navigation?.bottom, locale, 'footer') || [],
+    footerNav:
+      getLocalizedNavigation({
+        navigation: formattedBlocklet?.navigation?.footer,
+        locale,
+        defaultLocale,
+        section: 'footer',
+      }) || [],
+    socialMedia:
+      getLocalizedNavigation({
+        navigation: formattedBlocklet?.navigation?.social,
+        locale,
+        defaultLocale,
+        section: 'footer',
+      }) || [],
+    links:
+      getLocalizedNavigation({
+        navigation: formattedBlocklet?.navigation?.bottom,
+        locale,
+        defaultLocale,
+        section: 'footer',
+      }) || [],
   };
 
   const props = {

package/src/Header/index.tsx

@@ -121,7 +121,7 @@ function Header({
 }: HeaderProps & Omit<BoxProps, keyof HeaderProps>) {
   useWalletHiddenTopbar();
   const parentTheme = useTheme();
-  const { locale } = useLocaleContext() || {};
+  const { locale, defaultLocale } = useLocaleContext() || {};
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
@@ -171,7 +171,12 @@ function Header({
   if (!formattedBlocklet.appName) {
     return null;
   }
-  const navigation = getLocalizedNavigation(formattedBlocklet?.navigation?.header, locale);
+  const navigation = getLocalizedNavigation({
+    navigation: formattedBlocklet?.navigation?.header,
+    locale,
+    defaultLocale,
+  });
+
   const parsedNavigation = parseNavigation(navigation);
   const { navItems, activeId } = parsedNavigation;
 

package/src/UserCenter/components/settings.tsx

@@ -76,6 +76,7 @@ export default function Settings({
       {
         label: t('privacyManagement'),
         value: 'privacy',
+        // @ts-ignore
         content: <Privacy configList={privacyConfigList} onSave={onSave} />,
       },
       {

package/src/UserCenter/components/user-center.tsx

@@ -113,7 +113,7 @@ export default function UserCenter({
   readonly onlyProfile?: boolean;
   readonly onDestroySelf?: () => void;
 }) {
-  const { locale } = useLocaleContext();
+  const { locale, defaultLocale } = useLocaleContext();
   const isMobile = useMobile({ key: 'md' });
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -223,14 +223,14 @@ export default function UserCenter({
       protected: false,
       isPrivate: false, // true: 隐私数据，仅自己可见
       value: nftsLink,
-      url: getLink(nftsLink, locale),
+      url: getLink(nftsLink, locale, defaultLocale),
     };
     const userFollowersTab = {
       label: t('userFollowers'),
       protected: false,
       isPrivate: false,
       value: userFollowersLink,
-      url: getLink(userFollowersLink, locale),
+      url: getLink(userFollowersLink, locale, defaultLocale),
     };
     let tabs: NavigationTabProps[] = isShowSocialActions ? [nftTab, userFollowersTab] : [nftTab];
     if (isMyself) {
@@ -241,14 +241,14 @@ export default function UserCenter({
           protected: true,
           isPrivate: true,
           value: settingsLink,
-          url: getLink(settingsLink, locale),
+          url: getLink(settingsLink, locale, defaultLocale),
         },
         {
           label: t('storageManagement'),
           protected: true,
           isPrivate: true,
           value: didSpacesLink,
-          url: getLink(didSpacesLink, locale),
+          url: getLink(didSpacesLink, locale, defaultLocale),
         },
       ];
       tabs = isShowSocialActions ? [...restTabs, userFollowersTab] : restTabs;
@@ -258,7 +258,7 @@ export default function UserCenter({
 
   const userCenterTabs = useCreation<UserCenterTab[]>(() => {
     const menus = formattedBlocklet?.navigation?.userCenter || [];
-    const localizedMenus = getLocalizedNavigation(menus, locale) || [];
+    const localizedMenus = getLocalizedNavigation({ navigation: menus, locale, defaultLocale }) || [];
     const allMenus = localizedMenus.concat(defaultTabs);
     return allMenus
       .map((x: any) => {

package/src/blocklets.js

@@ -21,7 +21,7 @@ export const formatTheme = (theme) => {
   return formatted;
 };
 
-export const getLink = (link, locale = 'en') => {
+export const getLink = (link, locale = 'en', defaultLocale = 'en') => {
   if (typeof link === 'string') {
     // http[s] 开头的 url
     if (isUrl(link)) {
@@ -38,25 +38,34 @@ export const getLink = (link, locale = 'en') => {
     return url.pathname + url.search;
   }
   if (typeof link === 'object') {
-    return link[locale] || link?.en || link?.zh;
+    return link[locale] || link[defaultLocale] || link.en;
   }
   return link;
 };
 
 /**
+ * 获取本地化后的导航菜单
  *
- * @param {any[]} navigation 导航菜单数据
- * @param {string} locale 语言
- * @param {'header' | 'footer'} section 导航区域
- * 获取指定 locale 对应的 navigation 数据, 仅考虑 zh/en
+ * @param {Object} params
+ * @param {Array<{
+ *   title?: string | Record<string, string>,
+ *   description?: string | Record<string, string>,
+ *   link?: string | Record<string, string>,
+ *   items?: any[],
+ *   [key: string]: any
+ * }>} params.navigation - 导航菜单数据
+ * @param {string} params.locale - 当前语言
+ * @param {string} params.defaultLocale - 默认语言
+ * @param {'header' | 'footer'} [params.section='header'] - 导航区域，可选
+ * @returns {Array} 本地化处理后的导航数据
  */
-export const getLocalizedNavigation = (navigation, locale = 'en', section = 'header') => {
+export const getLocalizedNavigation = ({ navigation, locale, defaultLocale, section = 'header' }) => {
   if (!navigation?.length) {
     return navigation;
   }
   const trans = (text, _locale) => {
     if (text && typeof text === 'object') {
-      return text[_locale] || text?.en || text?.zh;
+      return text[_locale] || text[defaultLocale] || text.en;
     }
 
     return text;
@@ -70,7 +79,7 @@ export const getLocalizedNavigation = (navigation, locale = 'en', section = 'hea
         title: trans(item.title, locale),
         description: trans(item.description, locale),
         // 仅对叶结点进行处理
-        link: getUTMUrl(!item.items?.length ? getLink(item.link, locale) : item.link, section),
+        link: getUTMUrl(!item.items?.length ? getLink(item.link, locale, defaultLocale) : item.link, section),
         _rawLink: item.link,
       };
     },

package/src/common/header-addons.jsx

@@ -42,10 +42,15 @@ export default function HeaderAddons({
   sessionManagerProps = { showRole: true },
 }) {
   const sessionCtx = use(SessionContext);
-  const { locale, languages } = useLocaleContext() || {};
+  const { locale, languages, defaultLocale } = useLocaleContext() || {};
   const { enableConnect = true, enableLocale = true } = formattedBlocklet;
   const authenticated = !!sessionCtx?.session?.user;
-  let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.sessionManager, locale) || [];
+  let localizedNav =
+    getLocalizedNavigation({
+      navigation: formattedBlocklet?.navigation?.sessionManager,
+      locale,
+      defaultLocale,
+    }) || [];
   // 根据 role 筛选 nav 数据
   localizedNav = filterNavByRole(localizedNav, sessionCtx?.session?.user?.role);