@blocklet/ui-react 2.11.37 → 2.11.39

package/lib/Footer/index.js

@@ -12,6 +12,7 @@ import InternalFooter from "./internal-footer.js";
 import { mapRecursive } from "../utils.js";
 import { formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
 import { BlockletMetaProps } from "../types.js";
+import withHideWhenEmbed from "../libs/with-hide-when-embed.js";
 function Footer({ meta, theme: themeOverrides, ...rest }) {
   const { locale } = useLocaleContext() || {};
   const formattedBlocklet = useMemo(() => {
@@ -77,6 +78,6 @@ const StyledInternalFooter = styled(InternalFooter)`
   font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 `;
-export default withErrorBoundary(Footer, {
+export default withErrorBoundary(withHideWhenEmbed(Footer), {
   FallbackComponent: ErrorFallback
 });

package/lib/Header/index.js

@@ -15,6 +15,7 @@ import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
 import HeaderAddons from "../common/header-addons.js";
 import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
+import withHideWhenEmbed from "../libs/with-hide-when-embed.js";
 const parseNavigation = (navigation) => {
   if (!navigation?.length) {
     return { navItems: [], activeId: null };
@@ -144,6 +145,6 @@ const StyledUxHeader = styled(ResponsiveHeader)`
     }
   }
 `;
-export default withErrorBoundary(Header, {
+export default withErrorBoundary(withHideWhenEmbed(Header), {
   FallbackComponent: ErrorFallback
 });

package/lib/UserCenter/components/user-center.js

@@ -33,10 +33,11 @@ const settingsLink = joinURL(PROFILE_URL, "/settings");
 const didSpacesLink = joinURL(PROFILE_URL, "/did-spaces");
 const Main = styled(Box)(({ theme }) => ({
   flex: 1,
+  boxSizing: "border-box",
+  padding: theme.spacing(3),
   width: "100%",
   maxWidth: 1200,
   margin: "0 auto",
-  p: 3,
   display: "flex",
   alignItems: "stretch",
   gap: 2.5,

package/lib/common/header-addons.js

@@ -17,7 +17,7 @@ const hasNotification = () => {
 };
 export default function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps }) {
   const sessionCtx = useContext(SessionContext);
-  const { locale } = useLocaleContext() || {};
+  const { locale, languages } = useLocaleContext() || {};
   const { enableConnect = true, enableLocale = true } = formattedBlocklet;
   const authenticated = !!sessionCtx?.session?.user;
   let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.sessionManager, locale) || [];
@@ -30,7 +30,7 @@ export default function HeaderAddons({ formattedBlocklet, addons, sessionManager
     if (hasNotification()) {
       addonsArray.push(/* @__PURE__ */ jsx(NotificationAddon, { session: sessionCtx.session }, "notification-addon"));
     }
-    if (enableLocale && locale) {
+    if (enableLocale && locale && languages.length > 1) {
       addonsArray.push(/* @__PURE__ */ jsx(LocaleSelector, { showText: false }, "locale-selector"));
     }
     if (enableConnect && sessionCtx) {

package/lib/libs/constant.d.ts

@@ -0,0 +1 @@
+export declare const EMBED_MODE_KEY = "blocklet-ui-react-embed-mode";

package/lib/libs/constant.js

@@ -0,0 +1 @@
+export const EMBED_MODE_KEY = "blocklet-ui-react-embed-mode";

package/lib/libs/with-hide-when-embed.d.ts

@@ -0,0 +1,4 @@
+export default function withHideWhenEmbed<T extends object>(Component: React.ComponentType<T>): {
+    (props: T): import("react").JSX.Element | null;
+    displayName: string;
+};

package/lib/libs/with-hide-when-embed.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { useSessionStorageState } from "ahooks";
+import { EMBED_MODE_KEY } from "./constant.js";
+export default function withHideWhenEmbed(Component) {
+  const displayName = Component.displayName || Component.name || "Component";
+  function WrappedComponent(props) {
+    const [embedMode] = useSessionStorageState(EMBED_MODE_KEY, {
+      defaultValue: 0,
+      listenStorageChange: true
+    });
+    const isEmbed = embedMode === 1;
+    if (isEmbed) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Component, { ...props });
+  }
+  WrappedComponent.displayName = `withHideWhenEmbed(${displayName})`;
+  return WrappedComponent;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.37",
+  "version": "2.11.39",
   "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.37",
-    "@arcblock/react-hooks": "^2.11.37",
+    "@arcblock/bridge": "^2.11.39",
+    "@arcblock/react-hooks": "^2.11.39",
     "@arcblock/ws": "^1.19.9",
     "@blocklet/did-space-react": "^1.0.15",
     "@iconify-icons/logos": "^1.2.36",
@@ -84,5 +84,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "5b00e4fe7b54625734ce8e61e9ec41f35cb851ac"
+  "gitHead": "25c50d858ec85c90cefcbe43b4e841f039b0800a"
 }

package/src/Footer/index.jsx

@@ -12,7 +12,7 @@ import InternalFooter from './internal-footer';
 import { mapRecursive } from '../utils';
 import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 import { BlockletMetaProps } from '../types';
-
+import withHideWhenEmbed from '../libs/with-hide-when-embed';
 /**
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
  */
@@ -90,6 +90,6 @@ const StyledInternalFooter = styled(InternalFooter)`
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 `;
 
-export default withErrorBoundary(Footer, {
+export default withErrorBoundary(withHideWhenEmbed(Footer), {
   FallbackComponent: ErrorFallback,
 });

package/src/Header/index.tsx

@@ -17,6 +17,7 @@ import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../block
 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';
 
 // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
 const parseNavigation = (navigation: any) => {
@@ -193,6 +194,6 @@ const StyledUxHeader = styled(ResponsiveHeader)<StyledUxHeaderProps>`
   }
 `;
 
-export default withErrorBoundary(Header, {
+export default withErrorBoundary(withHideWhenEmbed(Header), {
   FallbackComponent: ErrorFallback,
 });

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

@@ -41,10 +41,11 @@ const didSpacesLink = joinURL(PROFILE_URL, '/did-spaces');
 
 const Main = styled(Box)(({ theme }) => ({
   flex: 1,
+  boxSizing: 'border-box',
+  padding: theme.spacing(3),
   width: '100%',
   maxWidth: 1200,
   margin: '0 auto',
-  p: 3,
   display: 'flex',
   alignItems: 'stretch',
   gap: 2.5,

package/src/common/header-addons.jsx

@@ -21,7 +21,7 @@ const hasNotification = () => {
 // eslint-disable-next-line no-shadow
 export default function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps }) {
   const sessionCtx = useContext(SessionContext);
-  const { locale } = useLocaleContext() || {};
+  const { locale, languages } = useLocaleContext() || {};
   const { enableConnect = true, enableLocale = true } = formattedBlocklet;
   const authenticated = !!sessionCtx?.session?.user;
   let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.sessionManager, locale) || [];
@@ -38,8 +38,8 @@ export default function HeaderAddons({ formattedBlocklet, addons, sessionManager
     if (hasNotification()) {
       addonsArray.push(<NotificationAddon key="notification-addon" session={sessionCtx.session} />);
     }
-    // 启用了多语言并且检测到了 locale context
-    if (enableLocale && locale) {
+    // 启用了多语言，且检测到了 locale context，且有多种语言可以切换
+    if (enableLocale && locale && languages.length > 1) {
       addonsArray.push(<LocaleSelector key="locale-selector" showText={false} />);
     }
     // 启用了连接钱包并且检测到了 session context

package/src/libs/constant.ts

@@ -0,0 +1 @@
+export const EMBED_MODE_KEY = 'blocklet-ui-react-embed-mode';

package/src/libs/with-hide-when-embed.tsx

@@ -0,0 +1,24 @@
+import { useSessionStorageState } from 'ahooks';
+import { EMBED_MODE_KEY } from './constant';
+
+export default function withHideWhenEmbed<T extends object>(Component: React.ComponentType<T>) {
+  const displayName = Component.displayName || Component.name || 'Component';
+
+  function WrappedComponent(props: T) {
+    const [embedMode] = useSessionStorageState(EMBED_MODE_KEY, {
+      defaultValue: 0,
+      listenStorageChange: true,
+    });
+    const isEmbed = embedMode === 1;
+
+    if (isEmbed) {
+      return null;
+    }
+
+    return <Component {...props} />;
+  }
+
+  WrappedComponent.displayName = `withHideWhenEmbed(${displayName})`;
+
+  return WrappedComponent;
+}