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.js
CHANGED
@@ -10193,30 +10193,53 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
10193
10193
|
const _a = style || {}, { lineClamp } = _a, textStyle = __rest(_a, ["lineClamp"]);
|
10194
10194
|
const textLineClamp = Number(lineClamp || 2);
|
10195
10195
|
const multiRow = useRef(null);
|
10196
|
-
|
10196
|
+
useRef();
|
10197
10197
|
const handleClick = () => {
|
10198
10198
|
setIsShowMore(!isShowMore);
|
10199
10199
|
};
|
10200
10200
|
const checkOverflow = useCallback(() => {
|
10201
|
-
if (!multiRow.current || !isPost)
|
10201
|
+
if (!multiRow.current || !isPost || !text)
|
10202
10202
|
return;
|
10203
|
-
|
10204
|
-
const
|
10205
|
-
//
|
10206
|
-
|
10203
|
+
// 强制同步布局(消除浏览器优化导致的误差)
|
10204
|
+
const triggerReflow = (el) => el.offsetHeight;
|
10205
|
+
// 分三步精确测量
|
10206
|
+
requestAnimationFrame(() => {
|
10207
|
+
// 第一步:获取干净状态
|
10208
|
+
const el = multiRow.current;
|
10209
|
+
triggerReflow(el);
|
10210
|
+
// 第二步:测量无约束状态的真实高度
|
10211
|
+
const originalStyle = el.style.cssText;
|
10212
|
+
el.style.webkitLineClamp = 'unset';
|
10213
|
+
el.style.display = 'block';
|
10214
|
+
triggerReflow(el);
|
10215
|
+
const realHeight = el.getBoundingClientRect().height;
|
10216
|
+
// 第三步:恢复约束状态
|
10217
|
+
el.style.cssText = originalStyle;
|
10218
|
+
triggerReflow(el);
|
10219
|
+
const clampHeight = el.getBoundingClientRect().height;
|
10220
|
+
// 精准比较(考虑亚像素渲染)
|
10221
|
+
const isActuallyClamped = realHeight > clampHeight + 1;
|
10222
|
+
// 防抖处理
|
10223
|
+
console.log('[精确测量]', { realHeight, clampHeight, isActuallyClamped });
|
10224
|
+
setIsShow(isActuallyClamped);
|
10225
|
+
});
|
10207
10226
|
}, [isPost, text, textLineClamp]);
|
10227
|
+
// 增强版监听(同时监听字体加载)
|
10208
10228
|
useEffect(() => {
|
10209
|
-
|
10229
|
+
const el = multiRow.current;
|
10230
|
+
if (!el)
|
10210
10231
|
return;
|
10211
|
-
|
10212
|
-
|
10213
|
-
observerRef.current.observe(multiRow.current);
|
10214
|
-
// 初始检查
|
10215
|
-
checkOverflow();
|
10216
|
-
return () => {
|
10217
|
-
var _a;
|
10218
|
-
(_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
|
10232
|
+
const fontCheck = () => {
|
10233
|
+
document.fonts.ready.then(checkOverflow);
|
10219
10234
|
};
|
10235
|
+
const observer = new ResizeObserver((entries) => {
|
10236
|
+
entries.forEach((entry) => {
|
10237
|
+
if (entry.contentBoxSize) ;
|
10238
|
+
});
|
10239
|
+
});
|
10240
|
+
fontCheck();
|
10241
|
+
observer.observe(el);
|
10242
|
+
return () => observer.disconnect();
|
10220
10243
|
}, [checkOverflow]);
|
10221
10244
|
return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
|
10222
10245
|
React.createElement("div", { ref: multiRow, style: Object.assign(Object.assign({}, (!isShowMore &&
|
@@ -10227,7 +10250,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
10227
10250
|
overflow: 'hidden',
|
10228
10251
|
display: '-webkit-box',
|
10229
10252
|
WebkitBoxOrient: 'vertical'
|
10230
|
-
})), { wordBreak: 'break-word' }), dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
|
10253
|
+
})), { 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) } }),
|
10231
10254
|
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: {
|
10232
10255
|
__html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
|
10233
10256
|
} }))));
|