pb-sxp-ui 1.15.25 → 1.15.27

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 (17) hide show
  1. package/dist/index.cjs +5 -3
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +5 -3
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +5 -4
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +5 -4
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +5 -3
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +5 -4
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/ExpandableText.js +28 -30
  14. package/es/core/components/SxpPageRender/VideoWidget/index.js +1 -1
  15. package/lib/core/components/SxpPageRender/ExpandableText.js +28 -30
  16. package/lib/core/components/SxpPageRender/VideoWidget/index.js +1 -1
  17. 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/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -339,7 +339,7 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
339
339
  const renderLoading = useMemo(() => {
340
340
  if (!waiting || !isLoadFinish)
341
341
  return;
342
- return (React.createElement("img", { style: {
342
+ return (React.createElement(FormatImage, { style: {
343
343
  position: 'absolute',
344
344
  top: '50%',
345
345
  left: 0,
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/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -341,7 +341,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
341
341
  const renderLoading = (0, react_1.useMemo)(() => {
342
342
  if (!waiting || !isLoadFinish)
343
343
  return;
344
- return (react_1.default.createElement("img", { style: {
344
+ return (react_1.default.createElement(FormatImage_1.default, { style: {
345
345
  position: 'absolute',
346
346
  top: '50%',
347
347
  left: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.15.25",
3
+ "version": "1.15.27",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",