pb-sxp-ui 1.19.9 → 1.19.11

package/es/core/components/SxpPageRender/index.js

@@ -27,6 +27,7 @@ import MultiPosts from '../../../materials/sxp/MultiPosts';
 import { useEditorDataProvider } from '../../../core/context/EditorDataProvider';
 import NavBack from './NavBack';
 import { deleteCookie, getCookie } from '../../../core/utils/tool';
+import { useVisibleHeight } from '../../../core/hooks/useVisibleHeight';
 const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
@@ -47,6 +48,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const fbcRef = useRef('');
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5, pixelPvStatusRef } = useSxpDataSource();
     const { backMainFeed, productView, jumpToWeb } = useEventReport();
+    const visibleHeight = useVisibleHeight();
     const isShowFingerTip = useMemo(() => {
         return data.length > 0 && !loading && (getFeUserState() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
     }, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
@@ -213,6 +215,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         return minusHeight;
     }, [globalConfig]);
     const getHeightWithSafeArea = () => {
+        const root = document.documentElement;
+        const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
+        const numericValue = parseInt(value) || 0;
+        return numericValue;
+    };
+    const getHeightWithSafeArea2 = () => {
         const detector = document.createElement('div');
         detector.style.position = 'fixed';
         detector.style.bottom = '0';
@@ -226,8 +234,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         return safeAreaBottom;
     };
     const height = useMemo(() => {
-        return containerHeight - minusHeight - tagHeight - getHeightWithSafeArea();
-    }, [minusHeight, containerHeight, tagHeight]);
+        return containerHeight - minusHeight - tagHeight - getHeightWithSafeArea2();
+    }, [minusHeight, containerHeight, tagHeight, getHeightWithSafeArea2]);
     const visList = useMemo(() => {
         var _a;
         const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5

package/es/core/hooks/useVisibleHeight.d.ts

@@ -0,0 +1 @@
+export declare const useVisibleHeight: () => number;

package/es/core/hooks/useVisibleHeight.js

@@ -0,0 +1,52 @@
+import { useState, useEffect, useCallback } from 'react';
+export const useVisibleHeight = () => {
+    const [visibleHeight, setVisibleHeight] = useState(0);
+    const getVisibleContentHeight = () => {
+        if (typeof window === 'undefined')
+            return 0;
+        let height = window.innerHeight;
+        if (window.visualViewport) {
+            height = window.visualViewport.height;
+        }
+        if (height <= 0 || height > window.screen.height) {
+            height = window.innerHeight;
+        }
+        if (height <= 0) {
+            height = document.documentElement.clientHeight;
+        }
+        return height;
+    };
+    const updateHeight = useCallback(() => {
+        const height = getVisibleContentHeight();
+        setVisibleHeight(height);
+    }, []);
+    useEffect(() => {
+        updateHeight();
+        const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
+        events.forEach((event) => {
+            window.addEventListener(event, updateHeight);
+        });
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', updateHeight);
+            window.visualViewport.addEventListener('scroll', updateHeight);
+        }
+        if ('virtualKeyboard' in navigator) {
+            navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
+        }
+        const interval = setInterval(updateHeight, 1000);
+        return () => {
+            events.forEach((event) => {
+                window.removeEventListener(event, updateHeight);
+            });
+            if (window.visualViewport) {
+                window.visualViewport.removeEventListener('resize', updateHeight);
+                window.visualViewport.removeEventListener('scroll', updateHeight);
+            }
+            if ('virtualKeyboard' in navigator) {
+                navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
+            }
+            clearInterval(interval);
+        };
+    }, [updateHeight]);
+    return visibleHeight;
+};

package/lib/core/components/SxpPageRender/index.js

@@ -30,6 +30,7 @@ const MultiPosts_1 = tslib_1.__importDefault(require("../../../materials/sxp/Mul
 const EditorDataProvider_1 = require("../../../core/context/EditorDataProvider");
 const NavBack_1 = tslib_1.__importDefault(require("./NavBack"));
 const tool_1 = require("../../../core/utils/tool");
+const useVisibleHeight_1 = require("../../../core/hooks/useVisibleHeight");
 const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
@@ -50,6 +51,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const fbcRef = (0, react_1.useRef)('');
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5, pixelPvStatusRef } = (0, hooks_1.useSxpDataSource)();
     const { backMainFeed, productView, jumpToWeb } = (0, useEventReport_1.useEventReport)();
+    const visibleHeight = (0, useVisibleHeight_1.useVisibleHeight)();
     const isShowFingerTip = (0, react_1.useMemo)(() => {
         return data.length > 0 && !loading && ((0, localStore_1.getFeUserState)() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
     }, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
@@ -216,6 +218,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         return minusHeight;
     }, [globalConfig]);
     const getHeightWithSafeArea = () => {
+        const root = document.documentElement;
+        const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
+        const numericValue = parseInt(value) || 0;
+        return numericValue;
+    };
+    const getHeightWithSafeArea2 = () => {
         const detector = document.createElement('div');
         detector.style.position = 'fixed';
         detector.style.bottom = '0';
@@ -229,8 +237,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         return safeAreaBottom;
     };
     const height = (0, react_1.useMemo)(() => {
-        return containerHeight - minusHeight - tagHeight - getHeightWithSafeArea();
-    }, [minusHeight, containerHeight, tagHeight]);
+        return containerHeight - minusHeight - tagHeight - getHeightWithSafeArea2();
+    }, [minusHeight, containerHeight, tagHeight, getHeightWithSafeArea2]);
     const visList = (0, react_1.useMemo)(() => {
         var _a;
         const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5

package/lib/core/hooks/useVisibleHeight.d.ts

@@ -0,0 +1 @@
+export declare const useVisibleHeight: () => number;

package/lib/core/hooks/useVisibleHeight.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVisibleHeight = void 0;
+const react_1 = require("react");
+const useVisibleHeight = () => {
+    const [visibleHeight, setVisibleHeight] = (0, react_1.useState)(0);
+    const getVisibleContentHeight = () => {
+        if (typeof window === 'undefined')
+            return 0;
+        let height = window.innerHeight;
+        if (window.visualViewport) {
+            height = window.visualViewport.height;
+        }
+        if (height <= 0 || height > window.screen.height) {
+            height = window.innerHeight;
+        }
+        if (height <= 0) {
+            height = document.documentElement.clientHeight;
+        }
+        return height;
+    };
+    const updateHeight = (0, react_1.useCallback)(() => {
+        const height = getVisibleContentHeight();
+        setVisibleHeight(height);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        updateHeight();
+        const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
+        events.forEach((event) => {
+            window.addEventListener(event, updateHeight);
+        });
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', updateHeight);
+            window.visualViewport.addEventListener('scroll', updateHeight);
+        }
+        if ('virtualKeyboard' in navigator) {
+            navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
+        }
+        const interval = setInterval(updateHeight, 1000);
+        return () => {
+            events.forEach((event) => {
+                window.removeEventListener(event, updateHeight);
+            });
+            if (window.visualViewport) {
+                window.visualViewport.removeEventListener('resize', updateHeight);
+                window.visualViewport.removeEventListener('scroll', updateHeight);
+            }
+            if ('virtualKeyboard' in navigator) {
+                navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
+            }
+            clearInterval(interval);
+        };
+    }, [updateHeight]);
+    return visibleHeight;
+};
+exports.useVisibleHeight = useVisibleHeight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.19.9",
+  "version": "1.19.11",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",