@blocklet/ui-react 2.11.38 → 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/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.38",
+  "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.38",
-    "@arcblock/react-hooks": "^2.11.38",
+    "@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": "76405cf15e46ac61b8fb61111579449a7f1ccd0f"
+  "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/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;
+}