pb-sxp-ui 1.15.24 → 1.15.26

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