pb-sxp-ui 1.0.16 → 1.0.18

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 (21) hide show
  1. package/dist/index.cjs +20 -27
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +20 -27
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +20 -27
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/ExpandableText.js +12 -2
  14. package/es/core/components/SxpPageRender/PictureGroup/Picture.js +1 -2
  15. package/es/core/components/SxpPageRender/PictureGroup/index.js +1 -1
  16. package/es/core/components/SxpPageRender/index.js +1 -1
  17. package/lib/core/components/SxpPageRender/ExpandableText.js +12 -2
  18. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +1 -2
  19. package/lib/core/components/SxpPageRender/PictureGroup/index.js +1 -1
  20. package/lib/core/components/SxpPageRender/index.js +1 -1
  21. package/package.json +1 -1
package/es/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -20,6 +20,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
20
20
  const [isShow, setIsShow] = useState(false);
21
21
  const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
22
22
  const multiRow = useRef(null);
23
+ const multiRowCopy = useRef(null);
23
24
  const handleClick = useCallback(() => {
24
25
  setIsShowMore(!isShowMore);
25
26
  }, [isShowMore, onChange]);
@@ -27,7 +28,15 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
27
28
  return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
28
29
  }, [text, maxStr, isShowMore]);
29
30
  useEffect(() => {
30
- }, [multiRow, text, lineClamp, style, isPost]);
31
+ var _a, _b;
32
+ 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) {
33
+ setIsShow(true);
34
+ }
35
+ else {
36
+ setIsShow(false);
37
+ }
38
+ multiRowCopy.current.style.display = 'none';
39
+ }, [isPost]);
31
40
  return (React.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
32
41
  React.createElement("div", { ref: multiRow, style: {
33
42
  overflow: 'hidden',
@@ -37,6 +46,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
37
46
  WebkitBoxOrient: 'vertical',
38
47
  wordBreak: 'break-word'
39
48
  }, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
40
- text && isPost && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
49
+ React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
50
+ text && isPost && isShow && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
41
51
  };
42
52
  export default memo(ExpandableText);
package/es/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -6,8 +6,7 @@ const Picture = (props) => {
6
6
  const imgDom = useRef(null);
7
7
  const { sxpParameter } = useSxpDataSource();
8
8
  const getAvifToPng = useCallback((src) => {
9
- return src;
10
- return src.indexOf('avif') !== -1 ? `${src}?imageMogr2/format/webm` : src;
9
+ return src.indexOf('avif') !== -1 ? `${src}?imageMogr2/format/webp` : src;
11
10
  }, []);
12
11
  useEffect(() => {
13
12
  if (imgDom.current === null || src === '') {
package/es/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -20,7 +20,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
20
20
  setIsLoad(true);
21
21
  }
22
22
  }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
23
- return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: 3000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
23
+ return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: isActive ? { delay: 3000 } : false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
24
24
  return (React.createElement(SwiperSlide, { key: url },
25
25
  React.createElement(Picture, { src: url, width: width, height: height })));
26
26
  })));
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -122,7 +122,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
122
122
  eventDescription: 'Session completed',
123
123
  relatedContentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
124
124
  relatedProductId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
125
- position: activeIndex,
125
+ position: activeIndex + '',
126
126
  fromKName,
127
127
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
128
128
  relatedCtatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
package/lib/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -23,6 +23,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
23
23
  const [isShow, setIsShow] = (0, react_1.useState)(false);
24
24
  const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
25
25
  const multiRow = (0, react_1.useRef)(null);
26
+ const multiRowCopy = (0, react_1.useRef)(null);
26
27
  const handleClick = (0, react_1.useCallback)(() => {
27
28
  setIsShowMore(!isShowMore);
28
29
  }, [isShowMore, onChange]);
@@ -30,7 +31,15 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
30
31
  return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
31
32
  }, [text, maxStr, isShowMore]);
32
33
  (0, react_1.useEffect)(() => {
33
- }, [multiRow, text, lineClamp, style, isPost]);
34
+ var _a, _b;
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]);
34
43
  return (react_1.default.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
35
44
  react_1.default.createElement("div", { ref: multiRow, style: {
36
45
  overflow: 'hidden',
@@ -40,6 +49,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
40
49
  WebkitBoxOrient: 'vertical',
41
50
  wordBreak: 'break-word'
42
51
  }, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
43
- text && isPost && (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
52
+ react_1.default.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
53
+ text && isPost && isShow && (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
44
54
  };
45
55
  exports.default = (0, react_1.memo)(ExpandableText);
package/lib/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -9,8 +9,7 @@ const Picture = (props) => {
9
9
  const imgDom = (0, react_1.useRef)(null);
10
10
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
11
11
  const getAvifToPng = (0, react_1.useCallback)((src) => {
12
- return src;
13
- return src.indexOf('avif') !== -1 ? `${src}?imageMogr2/format/webm` : src;
12
+ return src.indexOf('avif') !== -1 ? `${src}?imageMogr2/format/webp` : src;
14
13
  }, []);
15
14
  (0, react_1.useEffect)(() => {
16
15
  if (imgDom.current === null || src === '') {
package/lib/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -23,7 +23,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
23
23
  setIsLoad(true);
24
24
  }
25
25
  }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
26
- return (react_1.default.createElement(react_2.Swiper, { defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: 3000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
26
+ return (react_1.default.createElement(react_2.Swiper, { defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: isActive ? { delay: 3000 } : false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
27
27
  return (react_1.default.createElement(react_2.SwiperSlide, { key: url },
28
28
  react_1.default.createElement(Picture_1.default, { src: url, width: width, height: height })));
29
29
  })));
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -125,7 +125,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
125
125
  eventDescription: 'Session completed',
126
126
  relatedContentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
127
127
  relatedProductId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
128
- position: activeIndex,
128
+ position: activeIndex + '',
129
129
  fromKName,
130
130
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
131
131
  relatedCtatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.16",
3
+ "version": "1.0.18",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",