@blocklet/ui-react 3.0.39 → 3.0.41

package/lib/Footer/links.js

@@ -11,7 +11,7 @@ import C from "../Icon/index.js";
 import A from "../hooks/use-mobile.js";
 import { splitNavColumns as E } from "../utils.js";
 function F({ links: e = [], flowLayout: d = !1, columns: u, ...x }) {
-  const [g, b] = N(-1), y = A({ key: "md" }), h = e.some((t) => t.items?.length), k = !y && h && j(u) && u > 1, p = ({ label: t, link: o, icon: i, render: a, props: n }) => {
+  const [g, b] = N(-1), w = A({ key: "md" }), h = e.some((t) => t.items?.length), k = !w && h && j(u) && u > 1, p = ({ label: t, link: o, icon: i, render: a, props: n }) => {
     let s = t;
     if (a)
       s = a({ label: t, link: o, props: n });
@@ -33,7 +33,7 @@ function F({ links: e = [], flowLayout: d = !1, columns: u, ...x }) {
       i && /* @__PURE__ */ r(C, { icon: i, size: 20, sx: { mr: 0.5 } }),
       s
     ] });
-  }, w = $(() => e?.length ? d ? e.map((t, o) => /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(t) }, o)) : k ? E(e, { columns: u }).map((t, o) => /* @__PURE__ */ r("div", { className: "footer-links-column", children: t.filter((i) => i.group).map((i, a) => {
+  }, y = $(() => e?.length ? d ? e.map((t, o) => /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(t) }, o)) : k ? E(e, { columns: u }).map((t, o) => /* @__PURE__ */ r("div", { className: "footer-links-column", children: t.filter((i) => i.group).map((i, a) => {
     const { items: n } = i;
     return /* @__PURE__ */ m("div", { className: "footer-links-group", children: [
       /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(i) }),
@@ -82,7 +82,7 @@ function F({ links: e = [], flowLayout: d = !1, columns: u, ...x }) {
         "footer-links--flow": d,
         "footer-links--columns": k
       }),
-      children: /* @__PURE__ */ r("div", { className: "footer-links-inner", children: w })
+      children: /* @__PURE__ */ r("div", { className: "footer-links-inner", children: y })
     }
   ) : null;
 }
@@ -131,6 +131,7 @@ const R = z("div")`
     position: relative;
     padding: 6px 8px;
     font-size: 14px;
+    white-space: nowrap;
     &--new::after {
       content: 'New';
       color: ${({ theme: e }) => e.palette.info.main};

package/lib/Header/index.js

@@ -1,141 +1,153 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useMemo as k } from "react";
-import { useMemoizedFn as $ } from "ahooks";
-import { withErrorBoundary as N } from "react-error-boundary";
-import { ErrorFallback as H } from "@arcblock/ux/lib/ErrorBoundary";
-import { styled as y, useTheme as C, deepmerge as T, ThemeProvider as _ } from "@arcblock/ux/lib/Theme";
-import { ResponsiveHeader as E } from "@arcblock/ux/lib/Header";
-import B, { Products as F } from "@arcblock/ux/lib/NavMenu";
-import { useLocaleContext as L } from "@arcblock/ux/lib/Locale/context";
-import { translate as P } from "@arcblock/ux/lib/Locale/util";
-import R from "@arcblock/ux/lib/hooks/use-blocklet-logo";
-import z from "lodash/omit";
-import A from "lodash/isFinite";
-import M from "clsx";
+import { jsx as a } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import { useMemoizedFn as N } from "ahooks";
+import { withErrorBoundary as $ } from "react-error-boundary";
+import { ErrorFallback as C } from "@arcblock/ux/lib/ErrorBoundary";
+import { styled as H, useTheme as _, deepmerge as w, ThemeProvider as A } from "@arcblock/ux/lib/Theme";
+import { ResponsiveHeader as B } from "@arcblock/ux/lib/Header";
+import L, { Products as R } from "@arcblock/ux/lib/NavMenu";
+import { useLocaleContext as F } from "@arcblock/ux/lib/Locale/context";
+import { translate as M } from "@arcblock/ux/lib/Locale/util";
+import O from "@arcblock/ux/lib/hooks/use-blocklet-logo";
+import P from "lodash/omit";
+import I from "lodash/isFinite";
+import z from "clsx";
 import W from "../Icon/index.js";
-import { mapRecursive as j, flatRecursive as S, matchPaths as U } from "../utils.js";
-import { formatBlockletInfo as K, getLocalizedNavigation as O, publicPath as q } from "../blocklets.js";
+import { mapRecursive as S, flatRecursive as U, matchPaths as j } from "../utils.js";
+import { formatBlockletInfo as G, getLocalizedNavigation as K, publicPath as q } from "../blocklets.js";
 import D from "../common/header-addons.js";
-import { useWalletHiddenTopbar as G } from "../common/wallet-hidden-topbar.js";
-import J from "../libs/with-hide-when-embed.js";
-const Q = {
+import { useWalletHiddenTopbar as J } from "../common/wallet-hidden-topbar.js";
+import Q from "../libs/with-hide-when-embed.js";
+const V = {
   en: {
     products: "Products"
   },
   zh: {
     products: "产品"
   }
-}, V = (e) => {
-  if (!e?.length)
+}, X = (r) => {
+  if (!r?.length)
     return { navItems: [], activeId: null };
-  let r = 1;
-  const s = j(e, (o) => {
-    const i = o.icon ? /* @__PURE__ */ n(W, { icon: o.icon }) : null;
-    if (o.items)
+  let t = 1;
+  const c = S(r, (e) => {
+    const i = e.icon ? /* @__PURE__ */ a(W, { icon: e.icon }) : null;
+    if (e.items)
       return {
-        id: `${r++}`,
-        label: o.title,
+        id: `${t++}`,
+        label: e.title,
         icon: i,
-        children: o.items
+        children: e.items
       };
-    let l = {};
-    return (o.link?.startsWith("http") || o.link?.startsWith("//")) && (l = {
+    let s = {};
+    return (e.link?.startsWith("http") || e.link?.startsWith("//")) && (s = {
       target: "_blank",
       rel: "noreferrer"
     }), {
-      id: `${r++}`,
-      label: /* @__PURE__ */ n("a", { href: o.link, ...l, children: o.title }),
+      id: `${t++}`,
+      label: /* @__PURE__ */ a("a", { href: e.link, ...s, children: e.title }),
       icon: i,
-      description: o.description,
-      link: o.link
+      description: e.description,
+      link: e.link
     };
-  }, "items"), a = S(s), d = U(a.map((o) => o.link));
-  return { navItems: s, activeId: d >= 0 ? a[d].id : null };
+  }, "items"), l = U(c), p = j(l.map((e) => e.link));
+  return { navItems: c, activeId: p >= 0 ? l[p].id : null };
 };
-function X({
-  meta: e = {},
-  addons: r = void 0,
-  sessionManagerProps: u = {
+function Y({
+  meta: r = {},
+  addons: t = void 0,
+  sessionManagerProps: h = {
     showRole: !0
   },
-  homeLink: s = q,
-  theme: a = void 0,
-  hideNavMenu: d = !1,
-  showDomainWarningDialog: o = !0,
+  homeLink: c = q,
+  theme: l = void 0,
+  hideNavMenu: p = !1,
+  showDomainWarningDialog: e = !0,
   ...i
 }) {
-  G();
-  const l = C(), { locale: h } = L() || {}, v = $((t, f = {}) => P(Q, t, h, "en", f)), m = k(() => {
-    const t = Object.assign({}, window.blocklet, e);
+  J();
+  const s = _(), { locale: b } = F() || {}, x = N((o, n = {}) => M(V, o, b, "en", n)), d = f(() => {
+    const o = Object.assign({}, window.blocklet, r);
     try {
-      return K(t);
-    } catch (f) {
-      return console.error("Failed to format blocklet info", f, t), t;
+      return G(o);
+    } catch (n) {
+      return console.error("Failed to format blocklet info", n, o), o;
     }
-  }, [e]), c = k(() => T(l, a), [l, a]), x = R({
-    meta: e,
-    theme: a
-  });
-  if (!m.appName)
+  }, [r]), m = f(() => w(s, l), [s, l]), y = O({
+    meta: r,
+    theme: l
+  }), { productsOrder: g, productsType: k } = f(() => {
+    let { USE_ARCBLOCK_THEME: o, USE_AIGNE_THEME: n } = d;
+    return o = parseInt(o, 10), n = parseInt(n, 10), I(n) ? {
+      productsOrder: n,
+      productsType: "AIGNE"
+    } : I(o) ? {
+      productsOrder: o,
+      productsType: "ARCBLOCK"
+    } : {
+      productsOrder: null,
+      productsType: null
+    };
+  }, [d]);
+  if (!d.appName)
     return null;
-  const I = O(m?.navigation?.header, h), b = V(I), { navItems: p, activeId: w } = b, g = parseInt(window.blocklet?.USE_ARCBLOCK_THEME, 10);
-  return A(g) && p.splice(g, 0, {
-    label: v("products"),
+  const T = K(d?.navigation?.header, b), v = X(T), { navItems: u, activeId: E } = v;
+  return k && Number.isInteger(g) && u.splice(g, 0, {
+    label: x("products"),
     // eslint-disable-next-line react/no-unstable-nested-components
-    children: ({ isOpen: t }) => /* @__PURE__ */ n(F, { isOpen: t })
-  }), /* @__PURE__ */ n(_, { theme: c, children: /* @__PURE__ */ n(
-    Y,
+    children: () => /* @__PURE__ */ a(R, { type: k })
+  }), /* @__PURE__ */ a(A, { theme: m, children: /* @__PURE__ */ a(
+    Z,
     {
-      homeLink: s,
-      logo: /* @__PURE__ */ n("img", { src: x, alt: "logo" }),
+      homeLink: c,
+      logo: /* @__PURE__ */ a("img", { src: y, alt: "logo" }),
       addons: (
         // @ts-ignore
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ a(
           D,
           {
-            formattedBlocklet: m,
-            addons: typeof r == "function" ? (t) => r(t, { navigation: b }) : r,
-            sessionManagerProps: u,
-            showDomainWarningDialog: o
+            formattedBlocklet: d,
+            addons: typeof t == "function" ? (o) => t(o, { navigation: v }) : t,
+            sessionManagerProps: h,
+            showDomainWarningDialog: e
           }
         )
       ),
-      ...z(i, ["bordered"]),
+      ...P(i, ["bordered"]),
       $bordered: i?.bordered,
-      $bgcolor: c.palette.background.default,
-      className: M("blocklet__header", i.className),
-      children: d || !p?.length ? null : ({ isMobile: t }) => (
+      $bgcolor: m.palette.background.default,
+      className: z("blocklet__header", i.className),
+      children: p || !u?.length ? null : ({ isMobile: o }) => (
         // @ts-ignore
-        /* @__PURE__ */ n(
-          B,
+        /* @__PURE__ */ a(
+          L,
           {
-            mode: t ? "inline" : "horizontal",
-            activeId: w,
-            items: p,
+            mode: o ? "inline" : "horizontal",
+            activeId: E,
+            items: u,
             className: "header-nav",
             bgColor: "transparent",
-            textColor: c.palette.grey[500],
-            activeTextColor: c.palette.text.primary
+            textColor: m.palette.grey[500],
+            activeTextColor: m.palette.text.primary
           }
         )
       )
     }
   ) });
 }
-const Y = y(E)`
-  ${({ $bgcolor: e }) => `background-color: ${e || "#fff"};`}
+const Z = H(B)`
+  ${({ $bgcolor: r }) => `background-color: ${r || "#fff"};`}
   .header-logo {
     min-width: 44px;
   }
-  ${({ $bordered: e, theme: r }) => e ? `border-bottom: 1px solid ${r.palette.divider};` : ""}
-  ${(e) => e.theme.breakpoints.down("md")} {
+  ${({ $bordered: r, theme: t }) => r ? `border-bottom: 1px solid ${t.palette.divider};` : ""}
+  ${(r) => r.theme.breakpoints.down("md")} {
     .header-logo {
       min-width: 32px;
     }
   }
-`, wo = N(J(X), {
-  FallbackComponent: H
+`, ye = $(Q(Y), {
+  FallbackComponent: C
 });
 export {
-  wo as default
+  ye as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.0.39",
+  "version": "3.0.41",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.46",
     "@abtnode/util": "^1.16.46",
-    "@arcblock/bridge": "3.0.39",
-    "@arcblock/icons": "3.0.39",
-    "@arcblock/react-hooks": "3.0.39",
+    "@arcblock/bridge": "3.0.41",
+    "@arcblock/icons": "3.0.41",
+    "@arcblock/react-hooks": "3.0.41",
     "@arcblock/ws": "^1.21.0",
     "@blocklet/constant": "^1.16.46",
     "@blocklet/did-space-react": "^1.1.11",
@@ -91,5 +91,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "0b0937b6a161c7332622ae0001849a7d3b2904f1"
+  "gitHead": "e4bf7c421b39bfc7b969653e580047629e5338b5"
 }

package/src/Footer/Footer.stories.jsx

@@ -4,6 +4,7 @@ import SocialMediaIcons from './demo/social-media-icons';
 import Copyright from './demo/copyright';
 import Footer from './demo/footer';
 import ArcblockSite from './demo/arcblock-site';
+import AigneSite from './demo/aigne-site';
 
 export default {
   title: 'Blocklet-UI-React/Footer',
@@ -29,4 +30,4 @@ ArcblockSite.argTypes = {
   locale: { control: 'select', options: ['en', 'zh'] },
 };
 
-export { Brand, Links, SocialMediaIcons, Copyright, Footer, ArcblockSite };
+export { Brand, Links, SocialMediaIcons, Copyright, Footer, ArcblockSite, AigneSite };

package/src/Footer/links.jsx

@@ -193,6 +193,7 @@ const Root = styled('div')`
     position: relative;
     padding: 6px 8px;
     font-size: 14px;
+    white-space: nowrap;
     &--new::after {
       content: 'New';
       color: ${({ theme }) => theme.palette.info.main};

package/src/Header/index.tsx

@@ -4,7 +4,7 @@ import { withErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import { styled, useTheme, deepmerge, ThemeProvider } from '@arcblock/ux/lib/Theme';
 import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
-import NavMenu, { Products } from '@arcblock/ux/lib/NavMenu';
+import NavMenu, { Products, ProductsType } from '@arcblock/ux/lib/NavMenu';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import useBlockletLogo from '@arcblock/ux/lib/hooks/use-blocklet-logo';
@@ -133,6 +133,34 @@ function Header({
     theme: themeOverrides,
   });
 
+  // 显示 Products 导航
+  const { productsOrder, productsType } = useMemo<{
+    productsOrder: number | null;
+    productsType: ProductsType | null;
+  }>(() => {
+    let { USE_ARCBLOCK_THEME, USE_AIGNE_THEME } = formattedBlocklet;
+    USE_ARCBLOCK_THEME = parseInt(USE_ARCBLOCK_THEME, 10);
+    USE_AIGNE_THEME = parseInt(USE_AIGNE_THEME, 10);
+
+    if (isFinite(USE_AIGNE_THEME)) {
+      return {
+        productsOrder: USE_AIGNE_THEME,
+        productsType: 'AIGNE',
+      };
+    }
+    if (isFinite(USE_ARCBLOCK_THEME)) {
+      return {
+        productsOrder: USE_ARCBLOCK_THEME,
+        productsType: 'ARCBLOCK',
+      };
+    }
+
+    return {
+      productsOrder: null,
+      productsType: null,
+    };
+  }, [formattedBlocklet]);
+
   if (!formattedBlocklet.appName) {
     return null;
   }
@@ -140,13 +168,11 @@ function Header({
   const parsedNavigation = parseNavigation(navigation);
   const { navItems, activeId } = parsedNavigation;
 
-  // 显示 Products 导航
-  const productsNavOrder = parseInt(window.blocklet?.USE_ARCBLOCK_THEME, 10);
-  if (isFinite(productsNavOrder)) {
-    navItems.splice(productsNavOrder, 0, {
+  if (productsType && Number.isInteger(productsOrder)) {
+    navItems.splice(productsOrder, 0, {
       label: t('products'),
       // eslint-disable-next-line react/no-unstable-nested-components
-      children: ({ isOpen }: { isOpen: boolean }) => <Products isOpen={isOpen} />,
+      children: () => <Products type={productsType} />,
     });
   }