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.
Files changed (15) hide show
  1. package/dist/index.cjs +39 -16
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +39 -16
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +6 -6
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +6 -6
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +39 -16
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +6 -6
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/ExpandableText.js +31 -12
  14. package/lib/core/components/SxpPageRender/ExpandableText.js +31 -12
  15. package/package.json +1 -1
package/es/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -12,22 +12,41 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
12
12
  setIsShowMore(!isShowMore);
13
13
  };
14
14
  const checkOverflow = useCallback(() => {
15
- if (!multiRow.current || !isPost)
15
+ if (!multiRow.current || !isPost || !text)
16
16
  return;
17
- const lineHeight = parseInt(getComputedStyle(multiRow.current).lineHeight) || 20;
18
- const maxHeight = lineHeight * textLineClamp;
19
- setIsShow(multiRow.current.scrollHeight > maxHeight + 1);
17
+ const triggerReflow = (el) => el.offsetHeight;
18
+ requestAnimationFrame(() => {
19
+ const el = multiRow.current;
20
+ triggerReflow(el);
21
+ const originalStyle = el.style.cssText;
22
+ el.style.webkitLineClamp = 'unset';
23
+ el.style.display = 'block';
24
+ triggerReflow(el);
25
+ const realHeight = el.getBoundingClientRect().height;
26
+ el.style.cssText = originalStyle;
27
+ triggerReflow(el);
28
+ const clampHeight = el.getBoundingClientRect().height;
29
+ const isActuallyClamped = realHeight > clampHeight + 1;
30
+ console.log('[精确测量]', { realHeight, clampHeight, isActuallyClamped });
31
+ setIsShow(isActuallyClamped);
32
+ });
20
33
  }, [isPost, text, textLineClamp]);
21
34
  useEffect(() => {
22
- if (!multiRow.current)
35
+ const el = multiRow.current;
36
+ if (!el)
23
37
  return;
24
- observerRef.current = new ResizeObserver(checkOverflow);
25
- observerRef.current.observe(multiRow.current);
26
- checkOverflow();
27
- return () => {
28
- var _a;
29
- (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
38
+ const fontCheck = () => {
39
+ document.fonts.ready.then(checkOverflow);
30
40
  };
41
+ const observer = new ResizeObserver((entries) => {
42
+ entries.forEach((entry) => {
43
+ if (entry.contentBoxSize) {
44
+ }
45
+ });
46
+ });
47
+ fontCheck();
48
+ observer.observe(el);
49
+ return () => observer.disconnect();
31
50
  }, [checkOverflow]);
32
51
  return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
33
52
  React.createElement("div", { ref: multiRow, style: Object.assign(Object.assign({}, (!isShowMore &&
@@ -38,7 +57,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
38
57
  overflow: 'hidden',
39
58
  display: '-webkit-box',
40
59
  WebkitBoxOrient: 'vertical'
41
- })), { wordBreak: 'break-word' }), dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
60
+ })), { 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) } }),
42
61
  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: {
43
62
  __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
44
63
  } }))));
package/lib/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -14,22 +14,41 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
14
14
  setIsShowMore(!isShowMore);
15
15
  };
16
16
  const checkOverflow = (0, react_1.useCallback)(() => {
17
- if (!multiRow.current || !isPost)
17
+ if (!multiRow.current || !isPost || !text)
18
18
  return;
19
- const lineHeight = parseInt(getComputedStyle(multiRow.current).lineHeight) || 20;
20
- const maxHeight = lineHeight * textLineClamp;
21
- setIsShow(multiRow.current.scrollHeight > maxHeight + 1);
19
+ const triggerReflow = (el) => el.offsetHeight;
20
+ requestAnimationFrame(() => {
21
+ const el = multiRow.current;
22
+ triggerReflow(el);
23
+ const originalStyle = el.style.cssText;
24
+ el.style.webkitLineClamp = 'unset';
25
+ el.style.display = 'block';
26
+ triggerReflow(el);
27
+ const realHeight = el.getBoundingClientRect().height;
28
+ el.style.cssText = originalStyle;
29
+ triggerReflow(el);
30
+ const clampHeight = el.getBoundingClientRect().height;
31
+ const isActuallyClamped = realHeight > clampHeight + 1;
32
+ console.log('[精确测量]', { realHeight, clampHeight, isActuallyClamped });
33
+ setIsShow(isActuallyClamped);
34
+ });
22
35
  }, [isPost, text, textLineClamp]);
23
36
  (0, react_1.useEffect)(() => {
24
- if (!multiRow.current)
37
+ const el = multiRow.current;
38
+ if (!el)
25
39
  return;
26
- observerRef.current = new ResizeObserver(checkOverflow);
27
- observerRef.current.observe(multiRow.current);
28
- checkOverflow();
29
- return () => {
30
- var _a;
31
- (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
40
+ const fontCheck = () => {
41
+ document.fonts.ready.then(checkOverflow);
32
42
  };
43
+ const observer = new ResizeObserver((entries) => {
44
+ entries.forEach((entry) => {
45
+ if (entry.contentBoxSize) {
46
+ }
47
+ });
48
+ });
49
+ fontCheck();
50
+ observer.observe(el);
51
+ return () => observer.disconnect();
33
52
  }, [checkOverflow]);
34
53
  return (react_1.default.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
35
54
  react_1.default.createElement("div", { ref: multiRow, style: Object.assign(Object.assign({}, (!isShowMore &&
@@ -40,7 +59,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
40
59
  overflow: 'hidden',
41
60
  display: '-webkit-box',
42
61
  WebkitBoxOrient: 'vertical'
43
- })), { wordBreak: 'break-word' }), dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
62
+ })), { wordBreak: 'break-word', textRendering: 'geometricPrecision', fontKerning: 'none', textSizeAdjust: '100%', boxSizing: 'border-box', contain: 'content' }), dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
44
63
  text && isPost && isShow && (react_1.default.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: {
45
64
  __html: (0, tool_1.setFontForText)(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
46
65
  } }))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.15.23",
3
+ "version": "1.15.24",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",