pb-sxp-ui 1.15.24 → 1.15.25
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 +28 -38
- package/dist/index.js +28 -38
- package/dist/index.min.cjs +6 -7
- package/dist/index.min.js +6 -7
- package/dist/pb-ui.js +28 -38
- package/dist/pb-ui.min.js +6 -7
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -10214,57 +10214,36 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
|
10214
10214
|
const [isShow, setIsShow] = React.useState(false);
|
|
10215
10215
|
const _a = style || {}, { lineClamp } = _a, textStyle = __rest(_a, ["lineClamp"]);
|
|
10216
10216
|
const textLineClamp = Number(lineClamp || 2);
|
|
10217
|
-
const
|
|
10218
|
-
React.useRef();
|
|
10217
|
+
const realRef = React.useRef(null);
|
|
10218
|
+
const clampRef = React.useRef(null);
|
|
10219
|
+
const observerRef = React.useRef();
|
|
10219
10220
|
const handleClick = () => {
|
|
10220
10221
|
setIsShowMore(!isShowMore);
|
|
10221
10222
|
};
|
|
10222
10223
|
const checkOverflow = React.useCallback(() => {
|
|
10223
|
-
if (!
|
|
10224
|
+
if (!realRef.current || !clampRef.current || !isPost || !text || isShowMore)
|
|
10224
10225
|
return;
|
|
10225
|
-
// 强制同步布局（消除浏览器优化导致的误差）
|
|
10226
|
-
const triggerReflow = (el) => el.offsetHeight;
|
|
10227
|
-
// 分三步精确测量
|
|
10228
10226
|
requestAnimationFrame(() => {
|
|
10229
|
-
|
|
10230
|
-
const
|
|
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
|
-
// 精准比较（考虑亚像素渲染）
|
|
10227
|
+
const realHeight = realRef.current.getBoundingClientRect().height;
|
|
10228
|
+
const clampHeight = clampRef.current.getBoundingClientRect().height;
|
|
10243
10229
|
const isActuallyClamped = realHeight > clampHeight + 1;
|
|
10244
|
-
// 防抖处理
|
|
10245
|
-
console.log('[精确测量]', { realHeight, clampHeight, isActuallyClamped });
|
|
10246
10230
|
setIsShow(isActuallyClamped);
|
|
10247
10231
|
});
|
|
10248
|
-
}, [isPost, text,
|
|
10232
|
+
}, [isPost, text, isShowMore]);
|
|
10249
10233
|
// 增强版监听（同时监听字体加载）
|
|
10250
10234
|
React.useEffect(() => {
|
|
10251
|
-
|
|
10252
|
-
if (!el)
|
|
10235
|
+
if (!realRef.current)
|
|
10253
10236
|
return;
|
|
10254
|
-
|
|
10255
|
-
|
|
10237
|
+
observerRef.current = new ResizeObserver(checkOverflow);
|
|
10238
|
+
observerRef.current.observe(realRef.current);
|
|
10239
|
+
checkOverflow();
|
|
10240
|
+
return () => {
|
|
10241
|
+
var _a;
|
|
10242
|
+
(_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
10256
10243
|
};
|
|
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();
|
|
10265
10244
|
}, [checkOverflow]);
|
|
10266
|
-
return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
|
|
10267
|
-
React.createElement("div", { ref:
|
|
10245
|
+
return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)', overflow: 'hidden' }), hidden: !text || text === '' },
|
|
10246
|
+
React.createElement("div", { ref: clampRef, style: Object.assign(Object.assign({}, (!isShowMore &&
|
|
10268
10247
|
isPost && {
|
|
10269
10248
|
WebkitLineClamp: textLineClamp,
|
|
10270
10249
|
lineClamp: textLineClamp,
|
|
@@ -10273,6 +10252,18 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
|
10273
10252
|
display: '-webkit-box',
|
|
10274
10253
|
WebkitBoxOrient: 'vertical'
|
|
10275
10254
|
})), { 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) } }),
|
|
10255
|
+
React.createElement("div", { ref: realRef, style: {
|
|
10256
|
+
wordBreak: 'break-word',
|
|
10257
|
+
textRendering: 'geometricPrecision',
|
|
10258
|
+
fontKerning: 'none',
|
|
10259
|
+
textSizeAdjust: '100%',
|
|
10260
|
+
boxSizing: 'border-box',
|
|
10261
|
+
contain: 'content',
|
|
10262
|
+
visibility: 'hidden',
|
|
10263
|
+
position: 'absolute',
|
|
10264
|
+
opacity: 0,
|
|
10265
|
+
clipPath: 'inset(100%)'
|
|
10266
|
+
}, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
|
|
10276
10267
|
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: {
|
|
10277
10268
|
__html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
|
|
10278
10269
|
} }))));
|
|
@@ -20207,4 +20198,3 @@ exports.core = index$3;
|
|
|
20207
20198
|
exports.default = Pagebuilder;
|
|
20208
20199
|
exports.materials = _materials_;
|
|
20209
20200
|
exports.useEditorDataProvider = useEditorDataProvider;
|
|
20210
|
-
//# sourceMappingURL=index.cjs.map
|
package/dist/index.js
CHANGED
|
@@ -10192,57 +10192,36 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
|
10192
10192
|
const [isShow, setIsShow] = useState(false);
|
|
10193
10193
|
const _a = style || {}, { lineClamp } = _a, textStyle = __rest(_a, ["lineClamp"]);
|
|
10194
10194
|
const textLineClamp = Number(lineClamp || 2);
|
|
10195
|
-
const
|
|
10196
|
-
useRef();
|
|
10195
|
+
const realRef = useRef(null);
|
|
10196
|
+
const clampRef = useRef(null);
|
|
10197
|
+
const observerRef = useRef();
|
|
10197
10198
|
const handleClick = () => {
|
|
10198
10199
|
setIsShowMore(!isShowMore);
|
|
10199
10200
|
};
|
|
10200
10201
|
const checkOverflow = useCallback(() => {
|
|
10201
|
-
if (!
|
|
10202
|
+
if (!realRef.current || !clampRef.current || !isPost || !text || isShowMore)
|
|
10202
10203
|
return;
|
|
10203
|
-
// 强制同步布局（消除浏览器优化导致的误差）
|
|
10204
|
-
const triggerReflow = (el) => el.offsetHeight;
|
|
10205
|
-
// 分三步精确测量
|
|
10206
10204
|
requestAnimationFrame(() => {
|
|
10207
|
-
|
|
10208
|
-
const
|
|
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
|
-
// 精准比较（考虑亚像素渲染）
|
|
10205
|
+
const realHeight = realRef.current.getBoundingClientRect().height;
|
|
10206
|
+
const clampHeight = clampRef.current.getBoundingClientRect().height;
|
|
10221
10207
|
const isActuallyClamped = realHeight > clampHeight + 1;
|
|
10222
|
-
// 防抖处理
|
|
10223
|
-
console.log('[精确测量]', { realHeight, clampHeight, isActuallyClamped });
|
|
10224
10208
|
setIsShow(isActuallyClamped);
|
|
10225
10209
|
});
|
|
10226
|
-
}, [isPost, text,
|
|
10210
|
+
}, [isPost, text, isShowMore]);
|
|
10227
10211
|
// 增强版监听（同时监听字体加载）
|
|
10228
10212
|
useEffect(() => {
|
|
10229
|
-
|
|
10230
|
-
if (!el)
|
|
10213
|
+
if (!realRef.current)
|
|
10231
10214
|
return;
|
|
10232
|
-
|
|
10233
|
-
|
|
10215
|
+
observerRef.current = new ResizeObserver(checkOverflow);
|
|
10216
|
+
observerRef.current.observe(realRef.current);
|
|
10217
|
+
checkOverflow();
|
|
10218
|
+
return () => {
|
|
10219
|
+
var _a;
|
|
10220
|
+
(_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
10234
10221
|
};
|
|
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();
|
|
10243
10222
|
}, [checkOverflow]);
|
|
10244
|
-
return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
|
|
10245
|
-
React.createElement("div", { ref:
|
|
10223
|
+
return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)', overflow: 'hidden' }), hidden: !text || text === '' },
|
|
10224
|
+
React.createElement("div", { ref: clampRef, style: Object.assign(Object.assign({}, (!isShowMore &&
|
|
10246
10225
|
isPost && {
|
|
10247
10226
|
WebkitLineClamp: textLineClamp,
|
|
10248
10227
|
lineClamp: textLineClamp,
|
|
@@ -10251,6 +10230,18 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
|
10251
10230
|
display: '-webkit-box',
|
|
10252
10231
|
WebkitBoxOrient: 'vertical'
|
|
10253
10232
|
})), { 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) } }),
|
|
10233
|
+
React.createElement("div", { ref: realRef, style: {
|
|
10234
|
+
wordBreak: 'break-word',
|
|
10235
|
+
textRendering: 'geometricPrecision',
|
|
10236
|
+
fontKerning: 'none',
|
|
10237
|
+
textSizeAdjust: '100%',
|
|
10238
|
+
boxSizing: 'border-box',
|
|
10239
|
+
contain: 'content',
|
|
10240
|
+
visibility: 'hidden',
|
|
10241
|
+
position: 'absolute',
|
|
10242
|
+
opacity: 0,
|
|
10243
|
+
clipPath: 'inset(100%)'
|
|
10244
|
+
}, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
|
|
10254
10245
|
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: {
|
|
10255
10246
|
__html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
|
|
10256
10247
|
} }))));
|
|
@@ -20175,4 +20166,3 @@ var index = memo(SxpPageCore);
|
|
|
20175
20166
|
*/
|
|
20176
20167
|
|
|
20177
20168
|
export { index$2 as DiyPortalPreview, index$1 as DiyStoryPreview, EditorDataProvider, Modal$1 as Modal, SxpDataSourceProvider$1 as SxpDataSourceProvider, index as SxpPageCore, SxpPageRender$1 as SxpPageRender, index$3 as core, Pagebuilder as default, _materials_ as materials, useEditorDataProvider };
|
|
20178
|
-
//# sourceMappingURL=index.js.map
|