pb-sxp-ui 1.19.13 → 1.19.15

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

@@ -220,22 +220,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         const numericValue = parseInt(value) || 0;
         return numericValue;
     };
-    const getHeightWithSafeArea2 = () => {
+    const getDvhInPx = () => {
         const detector = document.createElement('div');
         detector.style.position = 'fixed';
-        detector.style.bottom = '0';
+        detector.style.bottom = `${getHeightWithSafeArea()}px`;
         detector.style.left = '0';
-        detector.style.paddingBottom = 'env(safe-area-inset-bottom)';
+        detector.style.height = '100dvh';
         detector.style.visibility = 'hidden';
+        detector.style.zIndex = '-1';
         document.body.appendChild(detector);
-        const computedStyle = window.getComputedStyle(detector);
-        const safeAreaBottom = parseFloat(computedStyle.paddingBottom) || 0;
+        const dvhInPx = detector.clientHeight;
         document.body.removeChild(detector);
-        return safeAreaBottom;
+        return dvhInPx;
     };
     const height = useMemo(() => {
-        return visibleHeight - minusHeight - tagHeight - getHeightWithSafeArea2();
-    }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea2, containerHeight]);
+        return getDvhInPx() - minusHeight - tagHeight - getHeightWithSafeArea();
+    }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea, containerHeight, getDvhInPx]);
     const visList = useMemo(() => {
         var _a;
         const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
@@ -712,10 +712,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
             React.createElement(WaterFall, Object.assign({}, (_u = (_t = (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _s === void 0 ? void 0 : _s[0]) === null || _t === void 0 ? void 0 : _t.item) === null || _u === void 0 ? void 0 : _u.props)),
             React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
-            openMultiPosts && (React.createElement(MultiPosts, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 'env(safe-area-inset-bottom)' } }))))),
+            openMultiPosts && (React.createElement(MultiPosts, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 'var(--safe-area-inset-bottom,0px)' } }))))),
         (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
                 position: 'fixed',
-                bottom: 'env(safe-area-inset-bottom)',
+                bottom: 'var(--safe-area-inset-bottom,0px)',
                 left: 0,
                 right: 0,
                 width: '100%',

package/es/core/hooks/useVisibleHeight.js

@@ -1,6 +1,73 @@
 import { useState, useEffect, useCallback } from 'react';
 export const useVisibleHeight = () => {
+    var _a, _b;
     const [visibleHeight, setVisibleHeight] = useState(0);
+    const getDvhInPx = () => {
+        const detector = document.createElement('div');
+        detector.style.position = 'fixed';
+        detector.style.bottom = `${getHeightWithSafeArea()}px`;
+        detector.style.left = '0';
+        detector.style.height = '100dvh';
+        detector.style.visibility = 'hidden';
+        detector.style.zIndex = '-1';
+        document.body.appendChild(detector);
+        const dvhInPx = detector.clientHeight;
+        document.body.removeChild(detector);
+        return dvhInPx;
+    };
+    const getVhInPx = () => {
+        const detector = document.createElement('div');
+        detector.style.position = 'fixed';
+        detector.style.bottom = `${getHeightWithSafeArea()}px`;
+        detector.style.left = '0';
+        detector.style.height = '100vh';
+        detector.style.visibility = 'hidden';
+        detector.style.zIndex = '-1';
+        document.body.appendChild(detector);
+        const dvhInPx = detector.clientHeight;
+        document.body.removeChild(detector);
+        return dvhInPx;
+    };
+    const getFillAvailableInPx = () => {
+        const detector = document.createElement('div');
+        detector.style.position = 'fixed';
+        detector.style.bottom = `${getHeightWithSafeArea()}px`;
+        detector.style.left = '0';
+        detector.style.height = '-webkit-fill-available';
+        detector.style.visibility = 'hidden';
+        detector.style.zIndex = '-1';
+        document.body.appendChild(detector);
+        const dvhInPx = detector.clientHeight;
+        document.body.removeChild(detector);
+        return dvhInPx;
+    };
+    const getHeightWithSafeArea = () => {
+        const root = document.documentElement;
+        const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
+        const numericValue = parseInt(value) || 0;
+        return numericValue;
+    };
+    const dvhToPx = (dvh) => {
+        return Math.round((dvh / 100) * document.documentElement.clientHeight);
+    };
+    const systemInfo = {
+        visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
+        innerHeight: window.innerHeight,
+        clientHeight: document.documentElement.clientHeight,
+        screenHeight: window.screen.height,
+        bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
+        agent: navigator.userAgent,
+        version: '1.19.14',
+        safeArea: getHeightWithSafeArea(),
+        dvh: dvhToPx(100),
+        dvhInPx: getDvhInPx(),
+        vhInPx: getVhInPx(),
+        fillAvailableInPx: getFillAvailableInPx()
+    };
+    console.log(systemInfo, 'fundebug-init--------------------->systemInfo');
+    if ('fundebug' in window) {
+        window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'init', { metaData: { systemInfo, otherInfo: {} } });
+    }
     const getVisibleContentHeight = () => {
         if (typeof window === 'undefined')
             return 0;
@@ -17,10 +84,28 @@ export const useVisibleHeight = () => {
         return height;
     };
     const updateHeight = useCallback(() => {
-        var _a;
-        const height = ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight);
+        var _a, _b, _c;
+        const systemInfo = {
+            visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
+            innerHeight: window.innerHeight,
+            clientHeight: document.documentElement.clientHeight,
+            screenHeight: window.screen.height,
+            bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
+            agent: navigator.userAgent,
+            version: '1.19.15',
+            safeArea: getHeightWithSafeArea(),
+            dvh: dvhToPx(100),
+            dvhInPx: getDvhInPx(),
+            vhInPx: getVhInPx(),
+            fillAvailableInPx: getFillAvailableInPx()
+        };
+        console.log(systemInfo, 'fundebug-resize--------------------->systemInfo');
+        if ('fundebug' in window) {
+            window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'resize', { metaData: { systemInfo, otherInfo: {} } });
+        }
+        const height = ((_c = document === null || document === void 0 ? void 0 : document.documentElement) === null || _c === void 0 ? void 0 : _c.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight);
         setVisibleHeight(height);
-    }, []);
+    }, [getHeightWithSafeArea, dvhToPx, getDvhInPx, getVhInPx, getFillAvailableInPx]);
     useEffect(() => {
         updateHeight();
         const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];

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

@@ -223,22 +223,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         const numericValue = parseInt(value) || 0;
         return numericValue;
     };
-    const getHeightWithSafeArea2 = () => {
+    const getDvhInPx = () => {
         const detector = document.createElement('div');
         detector.style.position = 'fixed';
-        detector.style.bottom = '0';
+        detector.style.bottom = `${getHeightWithSafeArea()}px`;
         detector.style.left = '0';
-        detector.style.paddingBottom = 'env(safe-area-inset-bottom)';
+        detector.style.height = '100dvh';
         detector.style.visibility = 'hidden';
+        detector.style.zIndex = '-1';
         document.body.appendChild(detector);
-        const computedStyle = window.getComputedStyle(detector);
-        const safeAreaBottom = parseFloat(computedStyle.paddingBottom) || 0;
+        const dvhInPx = detector.clientHeight;
         document.body.removeChild(detector);
-        return safeAreaBottom;
+        return dvhInPx;
     };
     const height = (0, react_1.useMemo)(() => {
-        return visibleHeight - minusHeight - tagHeight - getHeightWithSafeArea2();
-    }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea2, containerHeight]);
+        return getDvhInPx() - minusHeight - tagHeight - getHeightWithSafeArea();
+    }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea, containerHeight, getDvhInPx]);
     const visList = (0, react_1.useMemo)(() => {
         var _a;
         const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
@@ -715,10 +715,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
             react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_u = (_t = (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _s === void 0 ? void 0 : _s[0]) === null || _t === void 0 ? void 0 : _t.item) === null || _u === void 0 ? void 0 : _u.props)),
             react_1.default.createElement(ConsentPopup_1.default, { resolver: resolver, globalConfig: globalConfig }),
-            openMultiPosts && (react_1.default.createElement(MultiPosts_1.default, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 'env(safe-area-inset-bottom)' } }))))),
+            openMultiPosts && (react_1.default.createElement(MultiPosts_1.default, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 'var(--safe-area-inset-bottom,0px)' } }))))),
         (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (react_1.default.createElement("div", { style: {
                 position: 'fixed',
-                bottom: 'env(safe-area-inset-bottom)',
+                bottom: 'var(--safe-area-inset-bottom,0px)',
                 left: 0,
                 right: 0,
                 width: '100%',

package/lib/core/hooks/useVisibleHeight.js

@@ -3,7 +3,74 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVisibleHeight = void 0;
 const react_1 = require("react");
 const useVisibleHeight = () => {
+    var _a, _b;
     const [visibleHeight, setVisibleHeight] = (0, react_1.useState)(0);
+    const getDvhInPx = () => {
+        const detector = document.createElement('div');
+        detector.style.position = 'fixed';
+        detector.style.bottom = `${getHeightWithSafeArea()}px`;
+        detector.style.left = '0';
+        detector.style.height = '100dvh';
+        detector.style.visibility = 'hidden';
+        detector.style.zIndex = '-1';
+        document.body.appendChild(detector);
+        const dvhInPx = detector.clientHeight;
+        document.body.removeChild(detector);
+        return dvhInPx;
+    };
+    const getVhInPx = () => {
+        const detector = document.createElement('div');
+        detector.style.position = 'fixed';
+        detector.style.bottom = `${getHeightWithSafeArea()}px`;
+        detector.style.left = '0';
+        detector.style.height = '100vh';
+        detector.style.visibility = 'hidden';
+        detector.style.zIndex = '-1';
+        document.body.appendChild(detector);
+        const dvhInPx = detector.clientHeight;
+        document.body.removeChild(detector);
+        return dvhInPx;
+    };
+    const getFillAvailableInPx = () => {
+        const detector = document.createElement('div');
+        detector.style.position = 'fixed';
+        detector.style.bottom = `${getHeightWithSafeArea()}px`;
+        detector.style.left = '0';
+        detector.style.height = '-webkit-fill-available';
+        detector.style.visibility = 'hidden';
+        detector.style.zIndex = '-1';
+        document.body.appendChild(detector);
+        const dvhInPx = detector.clientHeight;
+        document.body.removeChild(detector);
+        return dvhInPx;
+    };
+    const getHeightWithSafeArea = () => {
+        const root = document.documentElement;
+        const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
+        const numericValue = parseInt(value) || 0;
+        return numericValue;
+    };
+    const dvhToPx = (dvh) => {
+        return Math.round((dvh / 100) * document.documentElement.clientHeight);
+    };
+    const systemInfo = {
+        visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
+        innerHeight: window.innerHeight,
+        clientHeight: document.documentElement.clientHeight,
+        screenHeight: window.screen.height,
+        bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
+        agent: navigator.userAgent,
+        version: '1.19.14',
+        safeArea: getHeightWithSafeArea(),
+        dvh: dvhToPx(100),
+        dvhInPx: getDvhInPx(),
+        vhInPx: getVhInPx(),
+        fillAvailableInPx: getFillAvailableInPx()
+    };
+    console.log(systemInfo, 'fundebug-init--------------------->systemInfo');
+    if ('fundebug' in window) {
+        window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'init', { metaData: { systemInfo, otherInfo: {} } });
+    }
     const getVisibleContentHeight = () => {
         if (typeof window === 'undefined')
             return 0;
@@ -20,10 +87,28 @@ const useVisibleHeight = () => {
         return height;
     };
     const updateHeight = (0, react_1.useCallback)(() => {
-        var _a;
-        const height = ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight);
+        var _a, _b, _c;
+        const systemInfo = {
+            visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
+            innerHeight: window.innerHeight,
+            clientHeight: document.documentElement.clientHeight,
+            screenHeight: window.screen.height,
+            bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
+            agent: navigator.userAgent,
+            version: '1.19.15',
+            safeArea: getHeightWithSafeArea(),
+            dvh: dvhToPx(100),
+            dvhInPx: getDvhInPx(),
+            vhInPx: getVhInPx(),
+            fillAvailableInPx: getFillAvailableInPx()
+        };
+        console.log(systemInfo, 'fundebug-resize--------------------->systemInfo');
+        if ('fundebug' in window) {
+            window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'resize', { metaData: { systemInfo, otherInfo: {} } });
+        }
+        const height = ((_c = document === null || document === void 0 ? void 0 : document.documentElement) === null || _c === void 0 ? void 0 : _c.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight);
         setVisibleHeight(height);
-    }, []);
+    }, [getHeightWithSafeArea, dvhToPx, getDvhInPx, getVhInPx, getFillAvailableInPx]);
     (0, react_1.useEffect)(() => {
         updateHeight();
         const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.19.13",
+  "version": "1.19.15",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -39,6 +39,7 @@
     "@emotion/css": "^11.11.2",
     "eslint": "^8.48.0",
     "eventemitter3": "^5.0.1",
+    "fundebug-javascript": "^2.8.8",
     "less": "^4.2.0",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",