pb-sxp-ui 1.19.8 → 1.19.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +90 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +6 -2
- package/dist/index.js +90 -4
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +4 -4
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +4 -4
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +90 -4
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +4 -4
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/index.js +25 -4
- package/es/core/hooks/useVisibleHeight.d.ts +1 -0
- package/es/core/hooks/useVisibleHeight.js +52 -0
- package/lib/core/components/SxpPageRender/index.js +25 -4
- package/lib/core/hooks/useVisibleHeight.d.ts +1 -0
- package/lib/core/hooks/useVisibleHeight.js +56 -0
- package/package.json +1 -1
|
@@ -27,6 +27,7 @@ import MultiPosts from '../../../materials/sxp/MultiPosts';
|
|
|
27
27
|
import { useEditorDataProvider } from '../../../core/context/EditorDataProvider';
|
|
28
28
|
import NavBack from './NavBack';
|
|
29
29
|
import { deleteCookie, getCookie } from '../../../core/utils/tool';
|
|
30
|
+
import { useVisibleHeight } from '../../../core/hooks/useVisibleHeight';
|
|
30
31
|
const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
|
|
31
32
|
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;
|
|
32
33
|
const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
|
|
@@ -47,6 +48,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
47
48
|
const fbcRef = useRef('');
|
|
48
49
|
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();
|
|
49
50
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
|
51
|
+
const visibleHeight = useVisibleHeight();
|
|
50
52
|
const isShowFingerTip = useMemo(() => {
|
|
51
53
|
return data.length > 0 && !loading && (getFeUserState() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
|
|
52
54
|
}, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
|
|
@@ -212,9 +214,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
212
214
|
}
|
|
213
215
|
return minusHeight;
|
|
214
216
|
}, [globalConfig]);
|
|
217
|
+
const getHeightWithSafeArea = () => {
|
|
218
|
+
const detector = document.createElement('div');
|
|
219
|
+
detector.style.position = 'fixed';
|
|
220
|
+
detector.style.bottom = '0';
|
|
221
|
+
detector.style.left = '0';
|
|
222
|
+
detector.style.paddingBottom = 'env(safe-area-inset-bottom)';
|
|
223
|
+
detector.style.visibility = 'hidden';
|
|
224
|
+
document.body.appendChild(detector);
|
|
225
|
+
const computedStyle = window.getComputedStyle(detector);
|
|
226
|
+
const safeAreaBottom = parseFloat(computedStyle.paddingBottom) || 0;
|
|
227
|
+
document.body.removeChild(detector);
|
|
228
|
+
return safeAreaBottom;
|
|
229
|
+
};
|
|
215
230
|
const height = useMemo(() => {
|
|
216
|
-
return
|
|
217
|
-
}, [minusHeight,
|
|
231
|
+
return visibleHeight - minusHeight - tagHeight;
|
|
232
|
+
}, [minusHeight, visibleHeight, tagHeight]);
|
|
218
233
|
const visList = useMemo(() => {
|
|
219
234
|
var _a;
|
|
220
235
|
const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
|
|
@@ -355,6 +370,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
355
370
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
|
|
356
371
|
top += minusHeight;
|
|
357
372
|
}
|
|
373
|
+
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
|
|
374
|
+
top += getHeightWithSafeArea();
|
|
375
|
+
}
|
|
358
376
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
359
377
|
return (React.createElement(LikeButton, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
|
|
360
378
|
position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
|
|
@@ -584,6 +602,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
584
602
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
|
|
585
603
|
top += minusHeight;
|
|
586
604
|
}
|
|
605
|
+
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
|
|
606
|
+
top += getHeightWithSafeArea();
|
|
607
|
+
}
|
|
587
608
|
return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton, { style: {
|
|
588
609
|
position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
|
|
589
610
|
visibility: ((_c = (_b = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
|
|
@@ -685,10 +706,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
685
706
|
renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
|
|
686
707
|
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)),
|
|
687
708
|
React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
|
|
688
|
-
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 } }))))),
|
|
709
|
+
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)' } }))))),
|
|
689
710
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
|
|
690
711
|
position: 'fixed',
|
|
691
|
-
bottom:
|
|
712
|
+
bottom: 'env(safe-area-inset-bottom)',
|
|
692
713
|
left: 0,
|
|
693
714
|
right: 0,
|
|
694
715
|
width: '100%',
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useVisibleHeight: () => number;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { useState, useEffect, useCallback } from 'react';
|
|
2
|
+
export const useVisibleHeight = () => {
|
|
3
|
+
const [visibleHeight, setVisibleHeight] = useState(0);
|
|
4
|
+
const getVisibleContentHeight = () => {
|
|
5
|
+
if (typeof window === 'undefined')
|
|
6
|
+
return 0;
|
|
7
|
+
let height = window.innerHeight;
|
|
8
|
+
if (window.visualViewport) {
|
|
9
|
+
height = window.visualViewport.height;
|
|
10
|
+
}
|
|
11
|
+
if (height <= 0 || height > window.screen.height) {
|
|
12
|
+
height = window.innerHeight;
|
|
13
|
+
}
|
|
14
|
+
if (height <= 0) {
|
|
15
|
+
height = document.documentElement.clientHeight;
|
|
16
|
+
}
|
|
17
|
+
return height;
|
|
18
|
+
};
|
|
19
|
+
const updateHeight = useCallback(() => {
|
|
20
|
+
const height = getVisibleContentHeight();
|
|
21
|
+
setVisibleHeight(height);
|
|
22
|
+
}, []);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
updateHeight();
|
|
25
|
+
const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
|
|
26
|
+
events.forEach((event) => {
|
|
27
|
+
window.addEventListener(event, updateHeight);
|
|
28
|
+
});
|
|
29
|
+
if (window.visualViewport) {
|
|
30
|
+
window.visualViewport.addEventListener('resize', updateHeight);
|
|
31
|
+
window.visualViewport.addEventListener('scroll', updateHeight);
|
|
32
|
+
}
|
|
33
|
+
if ('virtualKeyboard' in navigator) {
|
|
34
|
+
navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
|
|
35
|
+
}
|
|
36
|
+
const interval = setInterval(updateHeight, 1000);
|
|
37
|
+
return () => {
|
|
38
|
+
events.forEach((event) => {
|
|
39
|
+
window.removeEventListener(event, updateHeight);
|
|
40
|
+
});
|
|
41
|
+
if (window.visualViewport) {
|
|
42
|
+
window.visualViewport.removeEventListener('resize', updateHeight);
|
|
43
|
+
window.visualViewport.removeEventListener('scroll', updateHeight);
|
|
44
|
+
}
|
|
45
|
+
if ('virtualKeyboard' in navigator) {
|
|
46
|
+
navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
|
|
47
|
+
}
|
|
48
|
+
clearInterval(interval);
|
|
49
|
+
};
|
|
50
|
+
}, [updateHeight]);
|
|
51
|
+
return visibleHeight;
|
|
52
|
+
};
|
|
@@ -30,6 +30,7 @@ const MultiPosts_1 = tslib_1.__importDefault(require("../../../materials/sxp/Mul
|
|
|
30
30
|
const EditorDataProvider_1 = require("../../../core/context/EditorDataProvider");
|
|
31
31
|
const NavBack_1 = tslib_1.__importDefault(require("./NavBack"));
|
|
32
32
|
const tool_1 = require("../../../core/utils/tool");
|
|
33
|
+
const useVisibleHeight_1 = require("../../../core/hooks/useVisibleHeight");
|
|
33
34
|
const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
|
|
34
35
|
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;
|
|
35
36
|
const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
|
|
@@ -50,6 +51,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
50
51
|
const fbcRef = (0, react_1.useRef)('');
|
|
51
52
|
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)();
|
|
52
53
|
const { backMainFeed, productView, jumpToWeb } = (0, useEventReport_1.useEventReport)();
|
|
54
|
+
const visibleHeight = (0, useVisibleHeight_1.useVisibleHeight)();
|
|
53
55
|
const isShowFingerTip = (0, react_1.useMemo)(() => {
|
|
54
56
|
return data.length > 0 && !loading && ((0, localStore_1.getFeUserState)() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
|
|
55
57
|
}, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
|
|
@@ -215,9 +217,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
215
217
|
}
|
|
216
218
|
return minusHeight;
|
|
217
219
|
}, [globalConfig]);
|
|
220
|
+
const getHeightWithSafeArea = () => {
|
|
221
|
+
const detector = document.createElement('div');
|
|
222
|
+
detector.style.position = 'fixed';
|
|
223
|
+
detector.style.bottom = '0';
|
|
224
|
+
detector.style.left = '0';
|
|
225
|
+
detector.style.paddingBottom = 'env(safe-area-inset-bottom)';
|
|
226
|
+
detector.style.visibility = 'hidden';
|
|
227
|
+
document.body.appendChild(detector);
|
|
228
|
+
const computedStyle = window.getComputedStyle(detector);
|
|
229
|
+
const safeAreaBottom = parseFloat(computedStyle.paddingBottom) || 0;
|
|
230
|
+
document.body.removeChild(detector);
|
|
231
|
+
return safeAreaBottom;
|
|
232
|
+
};
|
|
218
233
|
const height = (0, react_1.useMemo)(() => {
|
|
219
|
-
return
|
|
220
|
-
}, [minusHeight,
|
|
234
|
+
return visibleHeight - minusHeight - tagHeight;
|
|
235
|
+
}, [minusHeight, visibleHeight, tagHeight]);
|
|
221
236
|
const visList = (0, react_1.useMemo)(() => {
|
|
222
237
|
var _a;
|
|
223
238
|
const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
|
|
@@ -358,6 +373,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
358
373
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
|
|
359
374
|
top += minusHeight;
|
|
360
375
|
}
|
|
376
|
+
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
|
|
377
|
+
top += getHeightWithSafeArea();
|
|
378
|
+
}
|
|
361
379
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
362
380
|
return (react_1.default.createElement(LikeButton_1.default, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
|
|
363
381
|
position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
|
|
@@ -587,6 +605,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
587
605
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
|
|
588
606
|
top += minusHeight;
|
|
589
607
|
}
|
|
608
|
+
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
|
|
609
|
+
top += getHeightWithSafeArea();
|
|
610
|
+
}
|
|
590
611
|
return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (react_1.default.createElement(ToggleButton_1.default, { style: {
|
|
591
612
|
position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
|
|
592
613
|
visibility: ((_c = (_b = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
|
|
@@ -688,10 +709,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
688
709
|
renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
|
|
689
710
|
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)),
|
|
690
711
|
react_1.default.createElement(ConsentPopup_1.default, { resolver: resolver, globalConfig: globalConfig }),
|
|
691
|
-
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 } }))))),
|
|
712
|
+
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)' } }))))),
|
|
692
713
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (react_1.default.createElement("div", { style: {
|
|
693
714
|
position: 'fixed',
|
|
694
|
-
bottom:
|
|
715
|
+
bottom: 'env(safe-area-inset-bottom)',
|
|
695
716
|
left: 0,
|
|
696
717
|
right: 0,
|
|
697
718
|
width: '100%',
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useVisibleHeight: () => number;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useVisibleHeight = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const useVisibleHeight = () => {
|
|
6
|
+
const [visibleHeight, setVisibleHeight] = (0, react_1.useState)(0);
|
|
7
|
+
const getVisibleContentHeight = () => {
|
|
8
|
+
if (typeof window === 'undefined')
|
|
9
|
+
return 0;
|
|
10
|
+
let height = window.innerHeight;
|
|
11
|
+
if (window.visualViewport) {
|
|
12
|
+
height = window.visualViewport.height;
|
|
13
|
+
}
|
|
14
|
+
if (height <= 0 || height > window.screen.height) {
|
|
15
|
+
height = window.innerHeight;
|
|
16
|
+
}
|
|
17
|
+
if (height <= 0) {
|
|
18
|
+
height = document.documentElement.clientHeight;
|
|
19
|
+
}
|
|
20
|
+
return height;
|
|
21
|
+
};
|
|
22
|
+
const updateHeight = (0, react_1.useCallback)(() => {
|
|
23
|
+
const height = getVisibleContentHeight();
|
|
24
|
+
setVisibleHeight(height);
|
|
25
|
+
}, []);
|
|
26
|
+
(0, react_1.useEffect)(() => {
|
|
27
|
+
updateHeight();
|
|
28
|
+
const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
|
|
29
|
+
events.forEach((event) => {
|
|
30
|
+
window.addEventListener(event, updateHeight);
|
|
31
|
+
});
|
|
32
|
+
if (window.visualViewport) {
|
|
33
|
+
window.visualViewport.addEventListener('resize', updateHeight);
|
|
34
|
+
window.visualViewport.addEventListener('scroll', updateHeight);
|
|
35
|
+
}
|
|
36
|
+
if ('virtualKeyboard' in navigator) {
|
|
37
|
+
navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
|
|
38
|
+
}
|
|
39
|
+
const interval = setInterval(updateHeight, 1000);
|
|
40
|
+
return () => {
|
|
41
|
+
events.forEach((event) => {
|
|
42
|
+
window.removeEventListener(event, updateHeight);
|
|
43
|
+
});
|
|
44
|
+
if (window.visualViewport) {
|
|
45
|
+
window.visualViewport.removeEventListener('resize', updateHeight);
|
|
46
|
+
window.visualViewport.removeEventListener('scroll', updateHeight);
|
|
47
|
+
}
|
|
48
|
+
if ('virtualKeyboard' in navigator) {
|
|
49
|
+
navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
|
|
50
|
+
}
|
|
51
|
+
clearInterval(interval);
|
|
52
|
+
};
|
|
53
|
+
}, [updateHeight]);
|
|
54
|
+
return visibleHeight;
|
|
55
|
+
};
|
|
56
|
+
exports.useVisibleHeight = useVisibleHeight;
|