pb-sxp-ui 1.15.22 → 1.15.23

package/dist/pb-ui.js

@@ -10202,69 +10202,49 @@
     };
     var Modal$1 = React.memo(Modal);
 
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2023-12-26 16:11:34
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-11-07 14:27:18
-     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\ExpandableText.tsx
-     *
-     */
-    const limitTextLastWholeWord = (originalText = '', limit) => {
-        // 匹配到中文
-        const chineseRegex = /[\u4e00-\u9fa5]+/;
-        if (chineseRegex.test(originalText)) {
-            return originalText.slice(0, 54);
-        }
-        const words = originalText.split(' ');
-        const newWords = [];
-        for (let i = 0; i < words.length; i++) {
-            newWords.push(words[i]);
-            const tempText = newWords.join(' ');
-            if (tempText.length >= limit)
-                break;
-        }
-        // const _words = newWords.length === words.length ? newWords : newWords.slice(0, newWords.length - 1);
-        const _words = newWords.length > 1 && newWords.length < words.length ? newWords.slice(0, newWords.length - 1) : newWords;
-        return _words.join(' ') + ' ';
-    };
     const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText, isPost, onChange }) => {
         const [isShowMore, setIsShowMore] = React.useState(false);
         const [isShow, setIsShow] = React.useState(false);
-        const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
+        const _a = style || {}, { lineClamp } = _a, textStyle = __rest(_a, ["lineClamp"]);
+        const textLineClamp = Number(lineClamp || 2);
         const multiRow = React.useRef(null);
-        const multiRowCopy = React.useRef(null);
-        const handleClick = React.useCallback(() => {
+        const observerRef = React.useRef();
+        const handleClick = () => {
             setIsShowMore(!isShowMore);
-            // onChange?.(!isShowMore);
-        }, [isShowMore, onChange]);
-        React.useMemo(() => {
-            return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
-        }, [text, maxStr, isShowMore]);
+        };
+        const checkOverflow = React.useCallback(() => {
+            if (!multiRow.current || !isPost)
+                return;
+            const lineHeight = parseInt(getComputedStyle(multiRow.current).lineHeight) || 20;
+            const maxHeight = lineHeight * textLineClamp;
+            // 添加1px容错，解决部分机型计算误差
+            setIsShow(multiRow.current.scrollHeight > maxHeight + 1);
+        }, [isPost, text, textLineClamp]);
         React.useEffect(() => {
-            var _a, _b;
-            if (multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current)
-                multiRowCopy.current.style.display = 'block';
-            if (((_a = multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) > ((_b = multiRow === null || multiRow === void 0 ? void 0 : multiRow.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) && isPost) {
-                setIsShow(true);
-            }
-            else {
-                setIsShow(false);
-            }
-            multiRowCopy.current.style.display = 'none';
-        }, [isPost, text]);
-        return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
-            React.createElement("div", { ref: multiRow, style: {
-                    overflow: 'hidden',
-                    WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
+            if (!multiRow.current)
+                return;
+            // 使用ResizeObserver监听尺寸变化
+            observerRef.current = new ResizeObserver(checkOverflow);
+            observerRef.current.observe(multiRow.current);
+            // 初始检查
+            checkOverflow();
+            return () => {
+                var _a;
+                (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+            };
+        }, [checkOverflow]);
+        return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
+            React.createElement("div", { ref: multiRow, style: Object.assign(Object.assign({}, (!isShowMore &&
+                    isPost && {
+                    WebkitLineClamp: textLineClamp,
+                    lineClamp: textLineClamp,
                     textOverflow: 'ellipsis',
+                    overflow: 'hidden',
                     display: '-webkit-box',
-                    WebkitBoxOrient: 'vertical',
-                    wordBreak: 'break-word'
-                }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
-            React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
+                    WebkitBoxOrient: 'vertical'
+                })), { wordBreak: 'break-word' }), dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
             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: {
-                    __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
+                    __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
                 } }))));
     };
     var ExpandableText$1 = React.memo(ExpandableText);