pb-sxp-ui 1.19.13 → 1.19.14
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 +92 -22
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +4 -3
- package/dist/index.js +92 -22
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +5 -5
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +5 -5
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +95 -26
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +5 -5
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/index.js +4 -17
- package/es/core/hooks/useVisibleHeight.js +87 -3
- package/lib/core/components/SxpPageRender/index.js +4 -17
- package/lib/core/hooks/useVisibleHeight.js +88 -3
- package/package.json +2 -1
package/dist/pb-ui.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('eventemitter3'), require('@emotion/css'), require('react-dom')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', 'eventemitter3', '@emotion/css', 'react-dom'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.EventEmitter, global.css, global.ReactDOM));
|
|
5
|
-
})(this, (function (exports, lodash, uuid$1, pako, React, qs, EventEmitter, css, ReactDOM) { 'use strict';
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('eventemitter3'), require('@emotion/css'), require('react-dom'), require('fundebug-javascript')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', 'eventemitter3', '@emotion/css', 'react-dom', 'fundebug-javascript'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.EventEmitter, global.css, global.ReactDOM, global.fundebug));
|
|
5
|
+
})(this, (function (exports, lodash, uuid$1, pako, React, qs, EventEmitter, css, ReactDOM, fundebug) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespaceDefault(e) {
|
|
8
8
|
var n = Object.create(null);
|
|
@@ -18993,13 +18993,97 @@ Made in Italy` })));
|
|
|
18993
18993
|
};
|
|
18994
18994
|
var NavBack$1 = React.memo(NavBack);
|
|
18995
18995
|
|
|
18996
|
+
if (fundebug)
|
|
18997
|
+
fundebug.apikey = '522a79b0a6242a8ad683cc045ec9e65bbac3a0f620561ac49d39eaad4f303618';
|
|
18996
18998
|
const useVisibleHeight = () => {
|
|
18999
|
+
var _a, _b;
|
|
18997
19000
|
const [visibleHeight, setVisibleHeight] = React.useState(0);
|
|
19001
|
+
const getDvhInPx = () => {
|
|
19002
|
+
const detector = document.createElement('div');
|
|
19003
|
+
detector.style.position = 'fixed';
|
|
19004
|
+
detector.style.bottom = `${getHeightWithSafeArea()}px`;
|
|
19005
|
+
detector.style.left = '0';
|
|
19006
|
+
detector.style.height = '100dvh';
|
|
19007
|
+
detector.style.visibility = 'hidden';
|
|
19008
|
+
detector.style.zIndex = '-1';
|
|
19009
|
+
document.body.appendChild(detector);
|
|
19010
|
+
const dvhInPx = detector.clientHeight;
|
|
19011
|
+
document.body.removeChild(detector);
|
|
19012
|
+
return dvhInPx;
|
|
19013
|
+
};
|
|
19014
|
+
const getVhInPx = () => {
|
|
19015
|
+
const detector = document.createElement('div');
|
|
19016
|
+
detector.style.position = 'fixed';
|
|
19017
|
+
detector.style.bottom = `${getHeightWithSafeArea()}px`;
|
|
19018
|
+
detector.style.left = '0';
|
|
19019
|
+
detector.style.height = '100vh';
|
|
19020
|
+
detector.style.visibility = 'hidden';
|
|
19021
|
+
detector.style.zIndex = '-1';
|
|
19022
|
+
document.body.appendChild(detector);
|
|
19023
|
+
const dvhInPx = detector.clientHeight;
|
|
19024
|
+
document.body.removeChild(detector);
|
|
19025
|
+
return dvhInPx;
|
|
19026
|
+
};
|
|
19027
|
+
const getFillAvailableInPx = () => {
|
|
19028
|
+
const detector = document.createElement('div');
|
|
19029
|
+
detector.style.position = 'fixed';
|
|
19030
|
+
detector.style.bottom = `${getHeightWithSafeArea()}px`;
|
|
19031
|
+
detector.style.left = '0';
|
|
19032
|
+
detector.style.height = '-webkit-fill-available';
|
|
19033
|
+
detector.style.visibility = 'hidden';
|
|
19034
|
+
detector.style.zIndex = '-1';
|
|
19035
|
+
document.body.appendChild(detector);
|
|
19036
|
+
const dvhInPx = detector.clientHeight;
|
|
19037
|
+
document.body.removeChild(detector);
|
|
19038
|
+
return dvhInPx;
|
|
19039
|
+
};
|
|
19040
|
+
const getHeightWithSafeArea = () => {
|
|
19041
|
+
const root = document.documentElement;
|
|
19042
|
+
const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
|
|
19043
|
+
// 处理可能的值(可能是 '0px', '34px' 等)
|
|
19044
|
+
const numericValue = parseInt(value) || 0;
|
|
19045
|
+
return numericValue;
|
|
19046
|
+
};
|
|
19047
|
+
const dvhToPx = (dvh) => {
|
|
19048
|
+
return Math.round((dvh / 100) * document.documentElement.clientHeight);
|
|
19049
|
+
};
|
|
19050
|
+
const systemInfo = {
|
|
19051
|
+
visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
|
|
19052
|
+
innerHeight: window.innerHeight,
|
|
19053
|
+
clientHeight: document.documentElement.clientHeight,
|
|
19054
|
+
screenHeight: window.screen.height,
|
|
19055
|
+
bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
|
|
19056
|
+
agent: navigator.userAgent,
|
|
19057
|
+
version: '1.19.14',
|
|
19058
|
+
safeArea: getHeightWithSafeArea(),
|
|
19059
|
+
dvh: dvhToPx(100),
|
|
19060
|
+
dvhInPx: getDvhInPx(),
|
|
19061
|
+
vhInPx: getVhInPx(),
|
|
19062
|
+
fillAvailableInPx: getFillAvailableInPx()
|
|
19063
|
+
};
|
|
19064
|
+
console.log(systemInfo, 'fundebug-init--------------------->systemInfo');
|
|
19065
|
+
fundebug.notify('Collect_Info', 'init', { metaData: { systemInfo, otherInfo: {} } });
|
|
18998
19066
|
const updateHeight = React.useCallback(() => {
|
|
18999
|
-
var _a;
|
|
19000
|
-
const
|
|
19067
|
+
var _a, _b, _c;
|
|
19068
|
+
const systemInfo = {
|
|
19069
|
+
visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
|
|
19070
|
+
innerHeight: window.innerHeight,
|
|
19071
|
+
clientHeight: document.documentElement.clientHeight,
|
|
19072
|
+
screenHeight: window.screen.height,
|
|
19073
|
+
bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
|
|
19074
|
+
agent: navigator.userAgent,
|
|
19075
|
+
version: '1.19.14',
|
|
19076
|
+
safeArea: getHeightWithSafeArea(),
|
|
19077
|
+
dvh: dvhToPx(100),
|
|
19078
|
+
dvhInPx: getDvhInPx(),
|
|
19079
|
+
vhInPx: getVhInPx(),
|
|
19080
|
+
fillAvailableInPx: getFillAvailableInPx()
|
|
19081
|
+
};
|
|
19082
|
+
console.log(systemInfo, 'fundebug-resize--------------------->systemInfo');
|
|
19083
|
+
fundebug.notify('Collect_Info', 'resize', { metaData: { systemInfo, otherInfo: {} } });
|
|
19084
|
+
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);
|
|
19001
19085
|
setVisibleHeight(height);
|
|
19002
|
-
}, []);
|
|
19086
|
+
}, [getHeightWithSafeArea, dvhToPx, getDvhInPx, getVhInPx, getFillAvailableInPx]);
|
|
19003
19087
|
React.useEffect(() => {
|
|
19004
19088
|
// 初始计算
|
|
19005
19089
|
updateHeight();
|
|
@@ -19240,24 +19324,9 @@ Made in Italy` })));
|
|
|
19240
19324
|
const numericValue = parseInt(value) || 0;
|
|
19241
19325
|
return numericValue;
|
|
19242
19326
|
};
|
|
19243
|
-
const getHeightWithSafeArea2 = () => {
|
|
19244
|
-
// 获取窗口高度
|
|
19245
|
-
// 动态检测安全区域
|
|
19246
|
-
const detector = document.createElement('div');
|
|
19247
|
-
detector.style.position = 'fixed';
|
|
19248
|
-
detector.style.bottom = '0';
|
|
19249
|
-
detector.style.left = '0';
|
|
19250
|
-
detector.style.paddingBottom = 'env(safe-area-inset-bottom)';
|
|
19251
|
-
detector.style.visibility = 'hidden';
|
|
19252
|
-
document.body.appendChild(detector);
|
|
19253
|
-
const computedStyle = window.getComputedStyle(detector);
|
|
19254
|
-
const safeAreaBottom = parseFloat(computedStyle.paddingBottom) || 0;
|
|
19255
|
-
document.body.removeChild(detector);
|
|
19256
|
-
return safeAreaBottom;
|
|
19257
|
-
};
|
|
19258
19327
|
const height = React.useMemo(() => {
|
|
19259
|
-
return visibleHeight - minusHeight - tagHeight -
|
|
19260
|
-
}, [minusHeight, visibleHeight, tagHeight,
|
|
19328
|
+
return visibleHeight - minusHeight - tagHeight - getHeightWithSafeArea();
|
|
19329
|
+
}, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea, containerHeight]);
|
|
19261
19330
|
const visList = React.useMemo(() => {
|
|
19262
19331
|
var _a;
|
|
19263
19332
|
const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
|
|
@@ -19740,10 +19809,10 @@ Made in Italy` })));
|
|
|
19740
19809
|
renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
|
|
19741
19810
|
React.createElement(WaterFall$1, 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)),
|
|
19742
19811
|
React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
|
|
19743
|
-
openMultiPosts && (React.createElement(MultiPosts$2, 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: '
|
|
19812
|
+
openMultiPosts && (React.createElement(MultiPosts$2, 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)' } }))))),
|
|
19744
19813
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
|
|
19745
19814
|
position: 'fixed',
|
|
19746
|
-
bottom: '
|
|
19815
|
+
bottom: 'var(--safe-area-inset-bottom,0px)',
|
|
19747
19816
|
left: 0,
|
|
19748
19817
|
right: 0,
|
|
19749
19818
|
width: '100%',
|