pb-sxp-ui 1.15.23 → 1.15.24
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 +39 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +39 -16
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +6 -6
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +6 -6
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +39 -16
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/ExpandableText.js +31 -12
- package/lib/core/components/SxpPageRender/ExpandableText.js +31 -12
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
@@ -10215,30 +10215,53 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
10215
10215
|
const _a = style || {}, { lineClamp } = _a, textStyle = __rest(_a, ["lineClamp"]);
|
10216
10216
|
const textLineClamp = Number(lineClamp || 2);
|
10217
10217
|
const multiRow = React.useRef(null);
|
10218
|
-
|
10218
|
+
React.useRef();
|
10219
10219
|
const handleClick = () => {
|
10220
10220
|
setIsShowMore(!isShowMore);
|
10221
10221
|
};
|
10222
10222
|
const checkOverflow = React.useCallback(() => {
|
10223
|
-
if (!multiRow.current || !isPost)
|
10223
|
+
if (!multiRow.current || !isPost || !text)
|
10224
10224
|
return;
|
10225
|
-
|
10226
|
-
const
|
10227
|
-
//
|
10228
|
-
|
10225
|
+
// 强制同步布局(消除浏览器优化导致的误差)
|
10226
|
+
const triggerReflow = (el) => el.offsetHeight;
|
10227
|
+
// 分三步精确测量
|
10228
|
+
requestAnimationFrame(() => {
|
10229
|
+
// 第一步:获取干净状态
|
10230
|
+
const el = multiRow.current;
|
10231
|
+
triggerReflow(el);
|
10232
|
+
// 第二步:测量无约束状态的真实高度
|
10233
|
+
const originalStyle = el.style.cssText;
|
10234
|
+
el.style.webkitLineClamp = 'unset';
|
10235
|
+
el.style.display = 'block';
|
10236
|
+
triggerReflow(el);
|
10237
|
+
const realHeight = el.getBoundingClientRect().height;
|
10238
|
+
// 第三步:恢复约束状态
|
10239
|
+
el.style.cssText = originalStyle;
|
10240
|
+
triggerReflow(el);
|
10241
|
+
const clampHeight = el.getBoundingClientRect().height;
|
10242
|
+
// 精准比较(考虑亚像素渲染)
|
10243
|
+
const isActuallyClamped = realHeight > clampHeight + 1;
|
10244
|
+
// 防抖处理
|
10245
|
+
console.log('[精确测量]', { realHeight, clampHeight, isActuallyClamped });
|
10246
|
+
setIsShow(isActuallyClamped);
|
10247
|
+
});
|
10229
10248
|
}, [isPost, text, textLineClamp]);
|
10249
|
+
// 增强版监听(同时监听字体加载)
|
10230
10250
|
React.useEffect(() => {
|
10231
|
-
|
10251
|
+
const el = multiRow.current;
|
10252
|
+
if (!el)
|
10232
10253
|
return;
|
10233
|
-
|
10234
|
-
|
10235
|
-
observerRef.current.observe(multiRow.current);
|
10236
|
-
// 初始检查
|
10237
|
-
checkOverflow();
|
10238
|
-
return () => {
|
10239
|
-
var _a;
|
10240
|
-
(_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
|
10254
|
+
const fontCheck = () => {
|
10255
|
+
document.fonts.ready.then(checkOverflow);
|
10241
10256
|
};
|
10257
|
+
const observer = new ResizeObserver((entries) => {
|
10258
|
+
entries.forEach((entry) => {
|
10259
|
+
if (entry.contentBoxSize) ;
|
10260
|
+
});
|
10261
|
+
});
|
10262
|
+
fontCheck();
|
10263
|
+
observer.observe(el);
|
10264
|
+
return () => observer.disconnect();
|
10242
10265
|
}, [checkOverflow]);
|
10243
10266
|
return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
|
10244
10267
|
React.createElement("div", { ref: multiRow, style: Object.assign(Object.assign({}, (!isShowMore &&
|
@@ -10249,7 +10272,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
10249
10272
|
overflow: 'hidden',
|
10250
10273
|
display: '-webkit-box',
|
10251
10274
|
WebkitBoxOrient: 'vertical'
|
10252
|
-
})), { wordBreak: 'break-word' }), dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
|
10275
|
+
})), { wordBreak: 'break-word', textRendering: 'geometricPrecision', fontKerning: 'none', textSizeAdjust: '100%', boxSizing: 'border-box', contain: 'content' }), dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
|
10253
10276
|
text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
|
10254
10277
|
__html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
|
10255
10278
|
} }))));
|