pb-sxp-ui 1.15.22 → 1.15.23

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 +34 -54
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +34 -54
  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 +34 -54
  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 +33 -44
  14. package/lib/core/components/SxpPageRender/ExpandableText.js +32 -44
  15. package/package.json +1 -1
package/es/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -1,57 +1,46 @@
1
+ import { __rest } from "tslib";
2
+ import React, { memo, useState, useCallback, useRef, useEffect } from 'react';
1
3
  import { setFontForText } from '../../../core/utils/tool';
2
- import React, { memo, useMemo, useState, useCallback, useRef, useEffect } from 'react';
3
- const limitTextLastWholeWord = (originalText = '', limit) => {
4
- const chineseRegex = /[\u4e00-\u9fa5]+/;
5
- if (chineseRegex.test(originalText)) {
6
- return originalText.slice(0, 54);
7
- }
8
- const words = originalText.split(' ');
9
- const newWords = [];
10
- for (let i = 0; i < words.length; i++) {
11
- newWords.push(words[i]);
12
- const tempText = newWords.join(' ');
13
- if (tempText.length >= limit)
14
- break;
15
- }
16
- const _words = newWords.length > 1 && newWords.length < words.length ? newWords.slice(0, newWords.length - 1) : newWords;
17
- return _words.join(' ') + ' ';
18
- };
19
4
  const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText, isPost, onChange }) => {
20
5
  const [isShowMore, setIsShowMore] = useState(false);
21
6
  const [isShow, setIsShow] = useState(false);
22
- const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
7
+ const _a = style || {}, { lineClamp } = _a, textStyle = __rest(_a, ["lineClamp"]);
8
+ const textLineClamp = Number(lineClamp || 2);
23
9
  const multiRow = useRef(null);
24
- const multiRowCopy = useRef(null);
25
- const handleClick = useCallback(() => {
10
+ const observerRef = useRef();
11
+ const handleClick = () => {
26
12
  setIsShowMore(!isShowMore);
27
- }, [isShowMore, onChange]);
28
- const renderText = useMemo(() => {
29
- return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
30
- }, [text, maxStr, isShowMore]);
13
+ };
14
+ const checkOverflow = useCallback(() => {
15
+ if (!multiRow.current || !isPost)
16
+ return;
17
+ const lineHeight = parseInt(getComputedStyle(multiRow.current).lineHeight) || 20;
18
+ const maxHeight = lineHeight * textLineClamp;
19
+ setIsShow(multiRow.current.scrollHeight > maxHeight + 1);
20
+ }, [isPost, text, textLineClamp]);
31
21
  useEffect(() => {
32
- var _a, _b;
33
- if (multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current)
34
- multiRowCopy.current.style.display = 'block';
35
- 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) {
36
- setIsShow(true);
37
- }
38
- else {
39
- setIsShow(false);
40
- }
41
- multiRowCopy.current.style.display = 'none';
42
- }, [isPost, text]);
43
- return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
44
- React.createElement("div", { ref: multiRow, style: {
45
- overflow: 'hidden',
46
- WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
22
+ if (!multiRow.current)
23
+ 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();
30
+ };
31
+ }, [checkOverflow]);
32
+ return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
33
+ React.createElement("div", { ref: multiRow, style: Object.assign(Object.assign({}, (!isShowMore &&
34
+ isPost && {
35
+ WebkitLineClamp: textLineClamp,
36
+ lineClamp: textLineClamp,
47
37
  textOverflow: 'ellipsis',
38
+ overflow: 'hidden',
48
39
  display: '-webkit-box',
49
- WebkitBoxOrient: 'vertical',
50
- wordBreak: 'break-word'
51
- }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
52
- React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
40
+ WebkitBoxOrient: 'vertical'
41
+ })), { wordBreak: 'break-word' }), dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
53
42
  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: {
54
- __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
43
+ __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
55
44
  } }))));
56
45
  };
57
46
  export default memo(ExpandableText);
package/lib/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -1,60 +1,48 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
- const tool_1 = require("../../../core/utils/tool");
5
4
  const react_1 = tslib_1.__importStar(require("react"));
6
- const limitTextLastWholeWord = (originalText = '', limit) => {
7
- const chineseRegex = /[\u4e00-\u9fa5]+/;
8
- if (chineseRegex.test(originalText)) {
9
- return originalText.slice(0, 54);
10
- }
11
- const words = originalText.split(' ');
12
- const newWords = [];
13
- for (let i = 0; i < words.length; i++) {
14
- newWords.push(words[i]);
15
- const tempText = newWords.join(' ');
16
- if (tempText.length >= limit)
17
- break;
18
- }
19
- const _words = newWords.length > 1 && newWords.length < words.length ? newWords.slice(0, newWords.length - 1) : newWords;
20
- return _words.join(' ') + ' ';
21
- };
5
+ const tool_1 = require("../../../core/utils/tool");
22
6
  const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText, isPost, onChange }) => {
23
7
  const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
24
8
  const [isShow, setIsShow] = (0, react_1.useState)(false);
25
- const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
9
+ const _a = style || {}, { lineClamp } = _a, textStyle = tslib_1.__rest(_a, ["lineClamp"]);
10
+ const textLineClamp = Number(lineClamp || 2);
26
11
  const multiRow = (0, react_1.useRef)(null);
27
- const multiRowCopy = (0, react_1.useRef)(null);
28
- const handleClick = (0, react_1.useCallback)(() => {
12
+ const observerRef = (0, react_1.useRef)();
13
+ const handleClick = () => {
29
14
  setIsShowMore(!isShowMore);
30
- }, [isShowMore, onChange]);
31
- const renderText = (0, react_1.useMemo)(() => {
32
- return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
33
- }, [text, maxStr, isShowMore]);
15
+ };
16
+ const checkOverflow = (0, react_1.useCallback)(() => {
17
+ if (!multiRow.current || !isPost)
18
+ return;
19
+ const lineHeight = parseInt(getComputedStyle(multiRow.current).lineHeight) || 20;
20
+ const maxHeight = lineHeight * textLineClamp;
21
+ setIsShow(multiRow.current.scrollHeight > maxHeight + 1);
22
+ }, [isPost, text, textLineClamp]);
34
23
  (0, react_1.useEffect)(() => {
35
- var _a, _b;
36
- if (multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current)
37
- multiRowCopy.current.style.display = 'block';
38
- 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) {
39
- setIsShow(true);
40
- }
41
- else {
42
- setIsShow(false);
43
- }
44
- multiRowCopy.current.style.display = 'none';
45
- }, [isPost, text]);
46
- return (react_1.default.createElement("div", { className: className, style: Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
47
- react_1.default.createElement("div", { ref: multiRow, style: {
48
- overflow: 'hidden',
49
- WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
24
+ if (!multiRow.current)
25
+ 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();
32
+ };
33
+ }, [checkOverflow]);
34
+ return (react_1.default.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
35
+ react_1.default.createElement("div", { ref: multiRow, style: Object.assign(Object.assign({}, (!isShowMore &&
36
+ isPost && {
37
+ WebkitLineClamp: textLineClamp,
38
+ lineClamp: textLineClamp,
50
39
  textOverflow: 'ellipsis',
40
+ overflow: 'hidden',
51
41
  display: '-webkit-box',
52
- WebkitBoxOrient: 'vertical',
53
- wordBreak: 'break-word'
54
- }, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
55
- react_1.default.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
42
+ 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) } }),
56
44
  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: {
57
- __html: (0, tool_1.setFontForText)(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
45
+ __html: (0, tool_1.setFontForText)(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
58
46
  } }))));
59
47
  };
60
48
  exports.default = (0, react_1.memo)(ExpandableText);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.15.22",
3
+ "version": "1.15.23",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",