pb-sxp-ui 1.5.4 → 1.6.0

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 (40) hide show
  1. package/dist/index.cjs +85 -42
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +17 -1
  4. package/dist/index.js +85 -42
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +85 -42
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/DiyPortalPreview/PictureGroup.js +5 -1
  15. package/es/core/components/SxpPageRender/Hashtag/index.js +1 -1
  16. package/es/core/components/SxpPageRender/Modal/index.js +8 -7
  17. package/es/core/components/SxpPageRender/Navbar.js +2 -1
  18. package/es/core/components/SxpPageRender/PictureGroup/index.js +2 -1
  19. package/es/core/components/SxpPageRender/Tagbar.js +2 -2
  20. package/es/core/components/SxpPageRender/WaterFall/index.js +5 -1
  21. package/es/core/components/SxpPageRender/index.d.ts +8 -0
  22. package/es/core/components/SxpPageRender/index.js +46 -18
  23. package/es/core/context/SxpDataSourceProvider.js +4 -1
  24. package/es/materials/sxp/popup/CommodityDetail/index.js +2 -1
  25. package/es/materials/sxp/popup/CommodityDetailDiro/index.js +5 -1
  26. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +2 -1
  27. package/lib/core/components/DiyPortalPreview/PictureGroup.js +5 -1
  28. package/lib/core/components/SxpPageRender/Hashtag/index.js +1 -1
  29. package/lib/core/components/SxpPageRender/Modal/index.js +8 -7
  30. package/lib/core/components/SxpPageRender/Navbar.js +2 -1
  31. package/lib/core/components/SxpPageRender/PictureGroup/index.js +2 -1
  32. package/lib/core/components/SxpPageRender/Tagbar.js +2 -2
  33. package/lib/core/components/SxpPageRender/WaterFall/index.js +5 -1
  34. package/lib/core/components/SxpPageRender/index.d.ts +8 -0
  35. package/lib/core/components/SxpPageRender/index.js +46 -18
  36. package/lib/core/context/SxpDataSourceProvider.js +4 -1
  37. package/lib/materials/sxp/popup/CommodityDetail/index.js +2 -1
  38. package/lib/materials/sxp/popup/CommodityDetailDiro/index.js +5 -1
  39. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +2 -1
  40. package/package.json +1 -1
package/es/core/components/DiyPortalPreview/PictureGroup.js CHANGED
@@ -3,7 +3,11 @@ import { Autoplay, Pagination } from 'swiper/modules';
3
3
  import { Swiper, SwiperSlide } from 'swiper/react';
4
4
  import Picture from '../SxpPageRender/PictureGroup/Picture';
5
5
  const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
6
- return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
6
+ return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
7
+ clickable: true,
8
+ bulletActiveClass: 'swipe-item-active-bullet',
9
+ bulletElement: 'button'
10
+ }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
7
11
  return (React.createElement(SwiperSlide, { key: url },
8
12
  React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
9
13
  })));
package/es/core/components/SxpPageRender/Hashtag/index.js CHANGED
@@ -37,7 +37,7 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
37
37
  return (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
38
38
  }, [isShowMore, tags]);
39
39
  return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: { marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px` } },
40
- React.createElement(Scroll, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) },
40
+ React.createElement(Scroll, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item), tag: 'button', "aria-label": item },
41
41
  React.createElement("div", { dangerouslySetInnerHTML: { __html: setFontForText(`#${item}`, hashTagStyle) } })))))));
42
42
  };
43
43
  export default memo(Hashtag);
package/es/core/components/SxpPageRender/Modal/index.js CHANGED
@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
4
4
  import { useEditor, useSxpDataSource } from '../../../../core/hooks';
5
5
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
6
6
  const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false }) => {
7
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
7
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
8
8
  const touchRef = useRef(null);
9
9
  const fTouchRef = useRef(null);
10
10
  const touchMoveRef = useRef(null);
@@ -114,9 +114,9 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
114
114
  width: `calc(100% - ${((_r = (_q = (_p = (_o = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _o === void 0 ? void 0 : _o.props) === null || _p === void 0 ? void 0 : _p.popupBg) === null || _q === void 0 ? void 0 : _q.horizontalMargin) !== null && _r !== void 0 ? _r : 0) * 2}px)`,
115
115
  height: '100%'
116
116
  } },
117
- React.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: Object.assign(Object.assign({ padding, animationDuration: ((_s = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _s !== void 0 ? _s : 0) / 1000 + 's' }, (isScrollFullScreen && {
117
+ React.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, role: 'dialog', "aria-label": (_s = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _s === void 0 ? void 0 : _s.displayName, "aria-modal": true, style: Object.assign(Object.assign({ padding, animationDuration: ((_t = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _t !== void 0 ? _t : 0) / 1000 + 's' }, (isScrollFullScreen && {
118
118
  transform: `translateY(${modalTrans}px)`
119
- })), { overflow: 'hidden', borderRadius: `${(_w = (_v = (_u = (_t = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _t === void 0 ? void 0 : _t.props) === null || _u === void 0 ? void 0 : _u.popupBg) === null || _v === void 0 ? void 0 : _v.borderRadius) !== null && _w !== void 0 ? _w : 0}px` }), onClick: (e) => {
119
+ })), { overflow: 'hidden', borderRadius: `${(_x = (_w = (_v = (_u = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _u === void 0 ? void 0 : _u.props) === null || _v === void 0 ? void 0 : _v.popupBg) === null || _w === void 0 ? void 0 : _w.borderRadius) !== null && _x !== void 0 ? _x : 0}px`, zIndex: 9 }), onClick: (e) => {
120
120
  e.stopPropagation();
121
121
  e.preventDefault();
122
122
  } }, (isScrollFullScreen && {
@@ -124,12 +124,13 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
124
124
  onTouchStart: handleTouchStart,
125
125
  onTouchEnd: handleTouchEnd
126
126
  })),
127
- React.createElement("div", { className: 'modal-icon-wrapper', onClick: onClose, style: { top: scrollTop } },
128
- React.createElement("img", { src: (_x = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _x !== void 0 ? _x : closeIcon, alt: 'close', className: 'modal-icon' })),
127
+ React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
128
+ React.createElement("img", { src: (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _y !== void 0 ? _y : closeIcon, alt: 'close button', className: 'modal-icon' })),
129
129
  React.createElement("div", Object.assign({ ref: ref, style: {
130
130
  height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
131
- overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
132
- } }, (((_z = (_y = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _y === void 0 ? void 0 : _y.props) === null || _z === void 0 ? void 0 : _z.enableFixedCloseButton) && {
131
+ overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden',
132
+ zIndex: 1
133
+ } }, (((_0 = (_z = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _z === void 0 ? void 0 : _z.props) === null || _0 === void 0 ? void 0 : _0.enableFixedCloseButton) && {
133
134
  onScroll: (e) => {
134
135
  var _a;
135
136
  setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
package/es/core/components/SxpPageRender/Navbar.js CHANGED
@@ -5,7 +5,8 @@ const Navbar = ({ icon, styles, textStyle, onClose }) => {
5
5
  var _a;
6
6
  const { waterFallData, setOpenHashtag } = useSxpDataSource();
7
7
  return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
8
- React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
8
+ React.createElement("button", { className: 'clc-sxp-nav-left', role: 'button', "aria-label": 'back button', onClick: onClose },
9
+ React.createElement("img", { src: icon, alt: 'back button' })),
9
10
  React.createElement("div", { className: 'clc-sxp-nav-title', style: Object.assign(Object.assign({}, textStyle), { paddingLeft: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.textAlign) === 'left' ? '35px' : 0 }), dangerouslySetInnerHTML: {
10
11
  __html: setFontForText(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`, textStyle)
11
12
  } })));
package/es/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -31,7 +31,8 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
31
31
  }, [isLoad]);
32
32
  return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
33
33
  clickable: true,
34
- bulletActiveClass: 'swipe-item-active-bullet'
34
+ bulletActiveClass: 'swipe-item-active-bullet',
35
+ bulletElement: 'button'
35
36
  }, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
36
37
  bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
37
38
  fontSize: '14px'
package/es/core/components/SxpPageRender/Tagbar.js CHANGED
@@ -45,8 +45,8 @@ const Tagbar = ({ tagList = [], setActiveIndex, style }) => {
45
45
  if (waterFallData || tagList.length <= 0)
46
46
  return null;
47
47
  return (React.createElement("div", { className: 'clc-sxp-tagbar', style: style },
48
- React.createElement("ul", { className: 'clc-sxp-tagbar-list', style: { margin: 'auto', gap: 24 } }, realTagList.map((tag) => {
49
- return (React.createElement("li", { className: `clc-sxp-tagbar-list-item ${tag === selectTag ? 'clc-sxp-tagbar-list-item-active' : ''}`, key: tag, onClick: handleSelectTag(tag) }, tag));
48
+ React.createElement("div", { className: 'clc-sxp-tagbar-list', style: { margin: 'auto', gap: 24 } }, realTagList.map((tag) => {
49
+ return (React.createElement("button", { className: `clc-sxp-tagbar-list-item ${tag === selectTag ? 'clc-sxp-tagbar-list-item-active' : ''}`, key: tag, "aria-label": tag, onClick: handleSelectTag(tag) }, tag));
50
50
  }))));
51
51
  };
52
52
  export default memo(Tagbar);
package/es/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -47,14 +47,17 @@ const WaterFall = (props) => {
47
47
  if (!rec)
48
48
  return;
49
49
  let fromKName = '';
50
+ let contentFormat = null;
50
51
  if (isFromHashtag) {
51
52
  fromKName = 'hashTagPage';
52
53
  }
53
54
  else if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
54
55
  fromKName = 'videoPage';
56
+ contentFormat = 'video';
55
57
  }
56
58
  else if ((_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) === null || _c === void 0 ? void 0 : _c.length) {
57
59
  fromKName = 'imagePage';
60
+ contentFormat = 'image';
58
61
  }
59
62
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
60
63
  eventInfo: {
@@ -67,7 +70,8 @@ const WaterFall = (props) => {
67
70
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
68
71
  timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
69
72
  eventSubject: 'clickTagsViewContents',
70
- eventDescription: 'User click tags view contents'
73
+ eventDescription: 'User click tags view contents',
74
+ contentFormat
71
75
  }
72
76
  });
73
77
  }, [recData, bffEventReport, viewTime, isFromHashtag, cacheActiveIndex]);
package/es/core/components/SxpPageRender/index.d.ts CHANGED
@@ -57,6 +57,14 @@ export interface ISxpPageRenderProps {
57
57
  currencyPosition?: string;
58
58
  showTwoDecimalPoint?: boolean;
59
59
  };
60
+ backButton?: {
61
+ enable: boolean;
62
+ icon: string;
63
+ xPosit: string;
64
+ x: number;
65
+ yPosit: string;
66
+ y: number;
67
+ };
60
68
  };
61
69
  descStyle?: CSSProperties;
62
70
  tipText?: {
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -23,7 +23,7 @@ import Tagbar from './Tagbar';
23
23
  import { getFeUserId, getSlideSkipState } from '../../../core/utils/localStore';
24
24
  import { isEqual } from 'lodash';
25
25
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
26
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
26
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
27
27
  const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
28
28
  const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
29
29
  const { schema } = useEditor();
@@ -266,7 +266,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
266
266
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
267
267
  return (React.createElement(React.Fragment, null,
268
268
  ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
269
- React.createElement("div", { className: 'clc-sxp-bottom', style: { paddingBottom: `${(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _b !== void 0 ? _b : 40}px` } },
269
+ React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _b !== void 0 ? _b : 40}px` } },
270
270
  React.createElement(Nudge, { nudge: nudge }),
271
271
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
272
272
  React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
@@ -329,7 +329,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
329
329
  }
330
330
  };
331
331
  const handleSlideSkip = (item, position) => {
332
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
332
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
333
333
  if (isPreview || waterFallData)
334
334
  return;
335
335
  const t = new Date() - curTime.current;
@@ -337,18 +337,26 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
337
337
  const link = ((_d = (_c = (_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.link) || ((_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.link) || ((_g = item === null || item === void 0 ? void 0 : item.product) === null || _g === void 0 ? void 0 : _g.link);
338
338
  const product = (item === null || item === void 0 ? void 0 : item.product) || ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct) || ((_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]);
339
339
  if (link) {
340
+ let contentFormat = null;
341
+ if ((_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.url) {
342
+ contentFormat = 'video';
343
+ }
344
+ else if ((_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.imgUrls) === null || _o === void 0 ? void 0 : _o.length) {
345
+ contentFormat = 'image';
346
+ }
340
347
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
341
348
  eventInfo: {
342
349
  eventSubject: 'swipeToWeb',
343
350
  eventDescription: 'User swiped to web',
344
- productId: (_l = product === null || product === void 0 ? void 0 : product.itemId) !== null && _l !== void 0 ? _l : '',
345
- productName: (_m = product === null || product === void 0 ? void 0 : product.title) !== null && _m !== void 0 ? _m : '',
351
+ productId: (_p = product === null || product === void 0 ? void 0 : product.itemId) !== null && _p !== void 0 ? _p : '',
352
+ productName: (_q = product === null || product === void 0 ? void 0 : product.title) !== null && _q !== void 0 ? _q : '',
346
353
  price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
347
- productCollection: (_o = product === null || product === void 0 ? void 0 : product.collection) !== null && _o !== void 0 ? _o : '',
354
+ productCollection: (_r = product === null || product === void 0 ? void 0 : product.collection) !== null && _r !== void 0 ? _r : '',
348
355
  contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
349
356
  position: position + '',
350
- contentId: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
351
- traceInfo: (_u = (_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : (_t = item === null || item === void 0 ? void 0 : item.product) === null || _t === void 0 ? void 0 : _t.traceInfo) !== null && _u !== void 0 ? _u : ''
357
+ contentId: (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.itemId) !== null && _t !== void 0 ? _t : '',
358
+ traceInfo: (_x = (_v = (_u = item === null || item === void 0 ? void 0 : item.video) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : (_w = item === null || item === void 0 ? void 0 : item.product) === null || _w === void 0 ? void 0 : _w.traceInfo) !== null && _x !== void 0 ? _x : '',
359
+ contentFormat
352
360
  }
353
361
  });
354
362
  skipLinkRef.current = true;
@@ -357,19 +365,28 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
357
365
  }
358
366
  };
359
367
  const handleScrollEvent = (swiper) => {
360
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
368
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
361
369
  const item = data[swiper.previousIndex];
362
370
  if (!item)
363
371
  return;
372
+ let fromKName = '';
373
+ let contentFormat = null;
374
+ if ((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) {
375
+ contentFormat = 'video';
376
+ }
377
+ else if ((_c = (_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls) === null || _c === void 0 ? void 0 : _c.length) {
378
+ contentFormat = 'image';
379
+ }
364
380
  if (swiper.previousIndex - swiper.activeIndex < 0) {
365
381
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
366
382
  eventInfo: {
367
383
  eventSubject: 'scrollDown',
368
384
  eventDescription: 'User scroll down',
369
- contentId: (_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
370
- productId: (_d = (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
385
+ contentId: (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.itemId) !== null && _e !== void 0 ? _e : '',
386
+ productId: (_g = (_f = item === null || item === void 0 ? void 0 : item.product) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
371
387
  requestId: null,
372
- traceInfo: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.traceInfo) !== null && _f !== void 0 ? _f : ''
388
+ traceInfo: (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.traceInfo) !== null && _j !== void 0 ? _j : '',
389
+ contentFormat
373
390
  }
374
391
  });
375
392
  handleReportViewImageEnd(item);
@@ -380,17 +397,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
380
397
  eventInfo: {
381
398
  eventSubject: 'scrollUp',
382
399
  eventDescription: 'User scroll up',
383
- contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
384
- productId: (_k = (_j = item.product) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '',
400
+ contentId: (_l = (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '',
401
+ productId: (_o = (_m = item.product) === null || _m === void 0 ? void 0 : _m.itemId) !== null && _o !== void 0 ? _o : '',
385
402
  requestId: null,
386
- traceInfo: (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : ''
403
+ traceInfo: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.traceInfo) !== null && _q !== void 0 ? _q : '',
404
+ contentFormat
387
405
  }
388
406
  });
389
407
  handleReportViewImageEnd(item);
390
408
  }
391
409
  handleReportProductView(item);
392
410
  const curItem = data[swiper.activeIndex];
393
- if (!((_o = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _o === void 0 ? void 0 : _o.url) && !((_p = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _p === void 0 ? void 0 : _p.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
411
+ if (!((_r = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _r === void 0 ? void 0 : _r.url) && !((_s = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _s === void 0 ? void 0 : _s.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
394
412
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
395
413
  eventName: 'ProductView'
396
414
  });
@@ -492,7 +510,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
492
510
  React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
493
511
  top: minusHeight
494
512
  } }),
495
- isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _f !== void 0 ? _f : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
513
+ ((_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _f === void 0 ? void 0 : _f.enable) && (React.createElement("button", { style: {
514
+ position: 'absolute',
515
+ [(_h = (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _g === void 0 ? void 0 : _g.xPosit) !== null && _h !== void 0 ? _h : 'left']: (_k = (_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _j === void 0 ? void 0 : _j.x) !== null && _k !== void 0 ? _k : 0,
516
+ [(_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _l === void 0 ? void 0 : _l.yPosit) !== null && _m !== void 0 ? _m : 'top']: (_p = (_o = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _o === void 0 ? void 0 : _o.y) !== null && _p !== void 0 ? _p : 0,
517
+ zIndex: 10,
518
+ border: 'none',
519
+ padding: 0,
520
+ background: 'transparent'
521
+ }, role: 'button', "aria-label": 'back button', onClick: () => history === null || history === void 0 ? void 0 : history.back() },
522
+ React.createElement("img", { src: (_r = (_q = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _q === void 0 ? void 0 : _q.icon) !== null && _r !== void 0 ? _r : left, alt: 'back button', width: 50, style: { objectFit: 'cover' } }))),
523
+ isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _s !== void 0 ? _s : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
496
524
  React.createElement(Swiper, { style: {
497
525
  marginTop: tagHeight
498
526
  }, ref: swiperRef, onSlideChange: () => {
@@ -523,6 +551,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
523
551
  renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
524
552
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
525
553
  renderView),
526
- React.createElement(WaterFall, Object.assign({}, (_j = (_h = (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.item) === null || _j === void 0 ? void 0 : _j.props))));
554
+ React.createElement(WaterFall, Object.assign({}, (_v = (_u = (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _t === void 0 ? void 0 : _t[0]) === null || _u === void 0 ? void 0 : _u.item) === null || _v === void 0 ? void 0 : _v.props))));
527
555
  };
528
556
  export default SxpPageRender;
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -243,18 +243,21 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
243
243
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
244
244
  const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
245
245
  let fromKName = '';
246
+ let contentFormat = null;
246
247
  if (isFromHashtag) {
247
248
  fromKName = 'hashTagPage';
248
249
  }
249
250
  else if ((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.url) {
250
251
  fromKName = 'videoPage';
252
+ contentFormat = 'video';
251
253
  }
252
254
  else if ((_g = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.imgUrls) === null || _g === void 0 ? void 0 : _g.length) {
253
255
  fromKName = 'imagePage';
256
+ contentFormat = 'image';
254
257
  }
255
258
  const contentTags = (_p = (_m = (_h = product === null || product === void 0 ? void 0 : product.tags) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : (_q = rec === null || rec === void 0 ? void 0 : rec.product) === null || _q === void 0 ? void 0 : _q.tags;
256
259
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
257
- eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_10 = (_7 = (_2 = (_y = (_v = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _v !== void 0 ? _v : (_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindCta) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_1 = (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindProduct) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : (_6 = (_5 = (_4 = (_3 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _3 === void 0 ? void 0 : _3.bindProducts) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.bindCta) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : '', fromKName, fromKPage: (_11 = location === null || location === void 0 ? void 0 : location.href) !== null && _11 !== void 0 ? _11 : '' })
260
+ eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_10 = (_7 = (_2 = (_y = (_v = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _v !== void 0 ? _v : (_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindCta) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_1 = (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindProduct) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : (_6 = (_5 = (_4 = (_3 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _3 === void 0 ? void 0 : _3.bindProducts) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.bindCta) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : '', fromKName, fromKPage: (_11 = location === null || location === void 0 ? void 0 : location.href) !== null && _11 !== void 0 ? _11 : '', contentFormat })
258
261
  });
259
262
  }, [bffEventReport, isFromHashtag]);
260
263
  const h5EnterLink = useCallback(() => {
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -132,7 +132,8 @@ const CommodityDetail = (_a) => {
132
132
  product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
133
133
  clickable: true,
134
134
  bulletActiveClass: 'swipe-item-active-bullet',
135
- clickableClass: getDotsAlign
135
+ clickableClass: getDotsAlign,
136
+ bulletElement: 'button'
136
137
  }, loop: true, autoplay: {
137
138
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
138
139
  }, ref: ref, className: css(Object.assign(Object.assign({ '.swiper-pagination': { bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0, fontSize: '14px' } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
package/es/materials/sxp/popup/CommodityDetailDiro/index.js CHANGED
@@ -125,7 +125,11 @@ const CommodityDetailDiro = (_a) => {
125
125
  e.stopPropagation();
126
126
  handleTouchMove(e);
127
127
  } }),
128
- product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, loop: true, autoplay: {
128
+ product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
129
+ clickable: true,
130
+ bulletActiveClass: 'swipe-item-active-bullet',
131
+ bulletElement: 'button'
132
+ }, loop: true, autoplay: {
129
133
  delay: 3000
130
134
  } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
131
135
  return (React.createElement(SwiperSlide, { key: src },
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -116,7 +116,8 @@ Made in Italy` })));
116
116
  product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
117
117
  clickable: true,
118
118
  bulletActiveClass: 'swipe-item-active-bullet',
119
- clickableClass: getDotsAlign
119
+ clickableClass: getDotsAlign,
120
+ bulletElement: 'button'
120
121
  }, loop: true, autoplay: {
121
122
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
122
123
  }, ref: ref, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
package/lib/core/components/DiyPortalPreview/PictureGroup.js CHANGED
@@ -6,7 +6,11 @@ const modules_1 = require("swiper/modules");
6
6
  const react_2 = require("swiper/react");
7
7
  const Picture_1 = tslib_1.__importDefault(require("../SxpPageRender/PictureGroup/Picture"));
8
8
  const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
9
- 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, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
9
+ return (react_1.default.createElement(react_2.Swiper, { defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
10
+ clickable: true,
11
+ bulletActiveClass: 'swipe-item-active-bullet',
12
+ bulletElement: 'button'
13
+ }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
10
14
  return (react_1.default.createElement(react_2.SwiperSlide, { key: url },
11
15
  react_1.default.createElement(Picture_1.default, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
12
16
  })));
package/lib/core/components/SxpPageRender/Hashtag/index.js CHANGED
@@ -40,7 +40,7 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
40
40
  return (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
41
41
  }, [isShowMore, tags]);
42
42
  return (react_1.default.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: { marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px` } },
43
- react_1.default.createElement(Scroll_1.default, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) },
43
+ react_1.default.createElement(Scroll_1.default, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item), tag: 'button', "aria-label": item },
44
44
  react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(`#${item}`, hashTagStyle) } })))))));
45
45
  };
46
46
  exports.default = (0, react_1.memo)(Hashtag);
package/lib/core/components/SxpPageRender/Modal/index.js CHANGED
@@ -7,7 +7,7 @@ const ReactDOM = tslib_1.__importStar(require("react-dom"));
7
7
  const hooks_1 = require("../../../../core/hooks");
8
8
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
9
9
  const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false }) => {
10
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
10
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
11
11
  const touchRef = (0, react_1.useRef)(null);
12
12
  const fTouchRef = (0, react_1.useRef)(null);
13
13
  const touchMoveRef = (0, react_1.useRef)(null);
@@ -117,9 +117,9 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
117
117
  width: `calc(100% - ${((_r = (_q = (_p = (_o = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _o === void 0 ? void 0 : _o.props) === null || _p === void 0 ? void 0 : _p.popupBg) === null || _q === void 0 ? void 0 : _q.horizontalMargin) !== null && _r !== void 0 ? _r : 0) * 2}px)`,
118
118
  height: '100%'
119
119
  } },
120
- react_1.default.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: Object.assign(Object.assign({ padding, animationDuration: ((_s = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _s !== void 0 ? _s : 0) / 1000 + 's' }, (isScrollFullScreen && {
120
+ react_1.default.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, role: 'dialog', "aria-label": (_s = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _s === void 0 ? void 0 : _s.displayName, "aria-modal": true, style: Object.assign(Object.assign({ padding, animationDuration: ((_t = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _t !== void 0 ? _t : 0) / 1000 + 's' }, (isScrollFullScreen && {
121
121
  transform: `translateY(${modalTrans}px)`
122
- })), { overflow: 'hidden', borderRadius: `${(_w = (_v = (_u = (_t = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _t === void 0 ? void 0 : _t.props) === null || _u === void 0 ? void 0 : _u.popupBg) === null || _v === void 0 ? void 0 : _v.borderRadius) !== null && _w !== void 0 ? _w : 0}px` }), onClick: (e) => {
122
+ })), { overflow: 'hidden', borderRadius: `${(_x = (_w = (_v = (_u = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _u === void 0 ? void 0 : _u.props) === null || _v === void 0 ? void 0 : _v.popupBg) === null || _w === void 0 ? void 0 : _w.borderRadius) !== null && _x !== void 0 ? _x : 0}px`, zIndex: 9 }), onClick: (e) => {
123
123
  e.stopPropagation();
124
124
  e.preventDefault();
125
125
  } }, (isScrollFullScreen && {
@@ -127,12 +127,13 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
127
127
  onTouchStart: handleTouchStart,
128
128
  onTouchEnd: handleTouchEnd
129
129
  })),
130
- react_1.default.createElement("div", { className: 'modal-icon-wrapper', onClick: onClose, style: { top: scrollTop } },
131
- react_1.default.createElement("img", { src: (_x = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _x !== void 0 ? _x : closeIcon, alt: 'close', className: 'modal-icon' })),
130
+ react_1.default.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
131
+ react_1.default.createElement("img", { src: (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _y !== void 0 ? _y : closeIcon, alt: 'close button', className: 'modal-icon' })),
132
132
  react_1.default.createElement("div", Object.assign({ ref: ref, style: {
133
133
  height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
134
- overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
135
- } }, (((_z = (_y = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _y === void 0 ? void 0 : _y.props) === null || _z === void 0 ? void 0 : _z.enableFixedCloseButton) && {
134
+ overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden',
135
+ zIndex: 1
136
+ } }, (((_0 = (_z = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _z === void 0 ? void 0 : _z.props) === null || _0 === void 0 ? void 0 : _0.enableFixedCloseButton) && {
136
137
  onScroll: (e) => {
137
138
  var _a;
138
139
  setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
package/lib/core/components/SxpPageRender/Navbar.js CHANGED
@@ -8,7 +8,8 @@ const Navbar = ({ icon, styles, textStyle, onClose }) => {
8
8
  var _a;
9
9
  const { waterFallData, setOpenHashtag } = (0, hooks_1.useSxpDataSource)();
10
10
  return (react_1.default.createElement("div", { className: 'clc-sxp-nav', style: styles },
11
- react_1.default.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
11
+ react_1.default.createElement("button", { className: 'clc-sxp-nav-left', role: 'button', "aria-label": 'back button', onClick: onClose },
12
+ react_1.default.createElement("img", { src: icon, alt: 'back button' })),
12
13
  react_1.default.createElement("div", { className: 'clc-sxp-nav-title', style: Object.assign(Object.assign({}, textStyle), { paddingLeft: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.textAlign) === 'left' ? '35px' : 0 }), dangerouslySetInnerHTML: {
13
14
  __html: (0, tool_1.setFontForText)(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`, textStyle)
14
15
  } })));
package/lib/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -34,7 +34,8 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
34
34
  }, [isLoad]);
35
35
  return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
36
36
  clickable: true,
37
- bulletActiveClass: 'swipe-item-active-bullet'
37
+ bulletActiveClass: 'swipe-item-active-bullet',
38
+ bulletElement: 'button'
38
39
  }, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
39
40
  bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
40
41
  fontSize: '14px'
package/lib/core/components/SxpPageRender/Tagbar.js CHANGED
@@ -48,8 +48,8 @@ const Tagbar = ({ tagList = [], setActiveIndex, style }) => {
48
48
  if (waterFallData || tagList.length <= 0)
49
49
  return null;
50
50
  return (react_1.default.createElement("div", { className: 'clc-sxp-tagbar', style: style },
51
- react_1.default.createElement("ul", { className: 'clc-sxp-tagbar-list', style: { margin: 'auto', gap: 24 } }, realTagList.map((tag) => {
52
- return (react_1.default.createElement("li", { className: `clc-sxp-tagbar-list-item ${tag === selectTag ? 'clc-sxp-tagbar-list-item-active' : ''}`, key: tag, onClick: handleSelectTag(tag) }, tag));
51
+ react_1.default.createElement("div", { className: 'clc-sxp-tagbar-list', style: { margin: 'auto', gap: 24 } }, realTagList.map((tag) => {
52
+ return (react_1.default.createElement("button", { className: `clc-sxp-tagbar-list-item ${tag === selectTag ? 'clc-sxp-tagbar-list-item-active' : ''}`, key: tag, "aria-label": tag, onClick: handleSelectTag(tag) }, tag));
53
53
  }))));
54
54
  };
55
55
  exports.default = (0, react_1.memo)(Tagbar);
package/lib/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -50,14 +50,17 @@ const WaterFall = (props) => {
50
50
  if (!rec)
51
51
  return;
52
52
  let fromKName = '';
53
+ let contentFormat = null;
53
54
  if (isFromHashtag) {
54
55
  fromKName = 'hashTagPage';
55
56
  }
56
57
  else if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
57
58
  fromKName = 'videoPage';
59
+ contentFormat = 'video';
58
60
  }
59
61
  else if ((_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) === null || _c === void 0 ? void 0 : _c.length) {
60
62
  fromKName = 'imagePage';
63
+ contentFormat = 'image';
61
64
  }
62
65
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
63
66
  eventInfo: {
@@ -70,7 +73,8 @@ const WaterFall = (props) => {
70
73
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
71
74
  timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
72
75
  eventSubject: 'clickTagsViewContents',
73
- eventDescription: 'User click tags view contents'
76
+ eventDescription: 'User click tags view contents',
77
+ contentFormat
74
78
  }
75
79
  });
76
80
  }, [recData, bffEventReport, viewTime, isFromHashtag, cacheActiveIndex]);
package/lib/core/components/SxpPageRender/index.d.ts CHANGED
@@ -57,6 +57,14 @@ export interface ISxpPageRenderProps {
57
57
  currencyPosition?: string;
58
58
  showTwoDecimalPoint?: boolean;
59
59
  };
60
+ backButton?: {
61
+ enable: boolean;
62
+ icon: string;
63
+ xPosit: string;
64
+ x: number;
65
+ yPosit: string;
66
+ y: number;
67
+ };
60
68
  };
61
69
  descStyle?: CSSProperties;
62
70
  tipText?: {