@blocklet/ui-react 2.11.43 → 2.11.44

package/lib/Dashboard/index.js

@@ -11,12 +11,14 @@ import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
 import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
 import HeaderAddons from "../common/header-addons.js";
 import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
+import useMobile from "../hooks/use-mobile.js";
 function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, links, ...rest }) {
   useWalletHiddenTopbar();
   const sessionCtx = useContext(SessionContext);
   const user = sessionCtx?.session?.user;
   const userRole = user?.role;
   const { locale } = useLocaleContext() || {};
+  const isMobile = useMobile();
   const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
@@ -95,7 +97,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
       ...rest,
       headerProps: {
         homeLink: publicPath,
-        logo: /* @__PURE__ */ jsx("img", { src: appLogoRect || appLogo, alt: "logo" }),
+        logo: /* @__PURE__ */ jsx("img", { src: isMobile ? appLogo : appLogoRect || appLogo, alt: "logo" }),
         addons: _headerAddons,
         ...rest.headerProps
       }

package/lib/Header/index.js

@@ -16,6 +16,7 @@ import { publicPath, formatBlockletInfo, getLocalizedNavigation } from "../block
 import HeaderAddons from "../common/header-addons.js";
 import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
 import withHideWhenEmbed from "../libs/with-hide-when-embed.js";
+import useMobile from "../hooks/use-mobile.js";
 const parseNavigation = (navigation) => {
   if (!navigation?.length) {
     return { navItems: [], activeId: null };
@@ -72,6 +73,7 @@ function Header({
       return blocklet;
     }
   }, [meta]);
+  const isMobileDevice = useMobile();
   if (!formattedBlocklet.appName) {
     return null;
   }
@@ -88,7 +90,7 @@ function Header({
     StyledUxHeader,
     {
       homeLink,
-      logo: /* @__PURE__ */ jsx("img", { src: appLogoRect || appLogo, alt: "logo" }),
+      logo: /* @__PURE__ */ jsx("img", { src: isMobileDevice ? appLogo : appLogoRect || appLogo, alt: "logo" }),
       addons: headerAddons,
       ...omit(rest, ["bordered"]),
       $bordered: rest?.bordered,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.43",
+  "version": "2.11.44",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.38",
-    "@arcblock/bridge": "^2.11.43",
-    "@arcblock/react-hooks": "^2.11.43",
+    "@arcblock/bridge": "^2.11.44",
+    "@arcblock/react-hooks": "^2.11.44",
     "@arcblock/ws": "^1.19.9",
     "@blocklet/did-space-react": "^1.0.16",
     "@iconify-icons/logos": "^1.2.36",
@@ -84,5 +84,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "2e8980d5a64623423af7fcbdd1f1bfbfc494f442"
+  "gitHead": "ac208031ad00b2175432f4af61978bfcf2b48d88"
 }

package/src/Dashboard/index.jsx

@@ -12,6 +12,7 @@ import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from '../blocklets';
 import HeaderAddons from '../common/header-addons';
 import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
+import useMobile from '../hooks/use-mobile';
 
 /**
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
@@ -23,6 +24,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
   const user = sessionCtx?.session?.user;
   const userRole = user?.role;
   const { locale } = useLocaleContext() || {};
+  const isMobile = useMobile();
   const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
@@ -121,7 +123,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
       {...rest}
       headerProps={{
         homeLink: publicPath,
-        logo: <img src={appLogoRect || appLogo} alt="logo" />,
+        logo: <img src={isMobile ? appLogo : appLogoRect || appLogo} alt="logo" />,
         addons: _headerAddons,
         ...rest.headerProps,
       }}

package/src/Header/index.tsx

@@ -18,6 +18,7 @@ import HeaderAddons from '../common/header-addons';
 import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
 import { BlockletMetaProps, SessionManagerProps } from '../@types';
 import withHideWhenEmbed from '../libs/with-hide-when-embed';
+import useMobile from '../hooks/use-mobile';
 
 // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
 const parseNavigation = (navigation: any) => {
@@ -104,12 +105,12 @@ function Header({
       return blocklet;
     }
   }, [meta]);
+  const isMobileDevice = useMobile();
 
   if (!formattedBlocklet.appName) {
     return null;
   }
   const { appLogo, appLogoRect, theme } = formattedBlocklet;
-
   const navigation = getLocalizedNavigation(formattedBlocklet?.navigation?.header, locale);
   const parsedNavigation = parseNavigation(navigation);
   const { navItems, activeId } = parsedNavigation;
@@ -129,7 +130,7 @@ function Header({
       <StyledUxHeader
         // @ts-ignore
         homeLink={homeLink}
-        logo={<img src={appLogoRect || appLogo} alt="logo" />}
+        logo={<img src={isMobileDevice ? appLogo : appLogoRect || appLogo} alt="logo" />}
         addons={headerAddons}
         {...omit(rest, ['bordered'])}
         $bordered={rest?.bordered}