pb-sxp-ui 1.4.0 → 1.4.1

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 (30) hide show
  1. package/dist/index.cjs +49 -34
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +0 -4
  4. package/dist/index.js +49 -34
  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 +49 -34
  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/SxpPageRender/Modal/index.js +10 -4
  15. package/es/core/components/SxpPageRender/PictureGroup/index.js +3 -7
  16. package/es/core/components/SxpPageRender/index.d.ts +1 -0
  17. package/es/core/components/SxpPageRender/index.js +7 -7
  18. package/es/materials/sxp/popup/CommodityDetail/index.js +1 -5
  19. package/es/materials/sxp/popup/CommodityDetail/settingRender.js +10 -0
  20. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +4 -7
  21. package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js +10 -0
  22. package/lib/core/components/SxpPageRender/Modal/index.js +10 -4
  23. package/lib/core/components/SxpPageRender/PictureGroup/index.js +3 -7
  24. package/lib/core/components/SxpPageRender/index.d.ts +1 -0
  25. package/lib/core/components/SxpPageRender/index.js +7 -7
  26. package/lib/materials/sxp/popup/CommodityDetail/index.js +1 -5
  27. package/lib/materials/sxp/popup/CommodityDetail/settingRender.js +10 -0
  28. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +4 -7
  29. package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js +10 -0
  30. package/package.json +1 -1
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;
7
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
8
8
  const touchRef = useRef(null);
9
9
  const fTouchRef = useRef(null);
10
10
  const touchMoveRef = useRef(null);
@@ -16,6 +16,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
16
16
  const modalEleRef = useRef(null);
17
17
  const { globalConfig, popupDetailData } = useSxpDataSource();
18
18
  const { schema: _schema } = useEditor();
19
+ const [scrollTop, setScrollTop] = useState(15);
19
20
  useEffect(() => {
20
21
  const parentNode = document.getElementById('sxp-render');
21
22
  const node = document.getElementById('pb-modal');
@@ -123,11 +124,16 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
123
124
  onTouchStart: handleTouchStart,
124
125
  onTouchEnd: handleTouchEnd
125
126
  })),
126
- React.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
127
+ React.createElement("div", { className: 'modal-icon-wrapper', onClick: onClose, style: { top: scrollTop } },
127
128
  React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: 'modal-icon' })),
128
- React.createElement("div", { ref: ref, style: {
129
+ React.createElement("div", Object.assign({ ref: ref, style: {
129
130
  height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
130
131
  overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
131
- } }, children)))))), modalEleRef.current);
132
+ } }, (((_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.enableFixedCloseButton) && {
133
+ onScroll: (e) => {
134
+ var _a;
135
+ setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
136
+ }
137
+ })), children)))))), modalEleRef.current);
132
138
  };
133
139
  export default memo(Modal);
package/es/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -5,7 +5,7 @@ import Picture from './Picture';
5
5
  import { useSxpDataSource } from '../../../../core/hooks';
6
6
  import { css } from '@emotion/css';
7
7
  const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
8
- var _a, _b;
8
+ var _a;
9
9
  const ref = useRef();
10
10
  const { isActive } = useSwiperSlide();
11
11
  const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -32,11 +32,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
32
32
  return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
33
33
  clickable: true,
34
34
  bulletActiveClass: 'swipe-item-active-bullet'
35
- }, className: css(Object.assign(Object.assign(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && {
36
- '.swiper-pagination': {
37
- bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0
38
- }
39
- })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
35
+ }, className: css(Object.assign(Object.assign({ '.swiper-pagination': Object.assign(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && { bottom: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom })), { fontSize: '14px' }) }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
40
36
  '.swiper-pagination-bullet': {
41
37
  backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
42
38
  opacity: 1
@@ -46,7 +42,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
46
42
  backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
47
43
  opacity: 1
48
44
  }
49
- }))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
45
+ }))), height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
50
46
  return (React.createElement(SwiperSlide, { key: index },
51
47
  React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
52
48
  })));
package/es/core/components/SxpPageRender/index.d.ts CHANGED
@@ -50,6 +50,7 @@ export interface ISxpPageRenderProps {
50
50
  enablePreview?: boolean;
51
51
  enableSwiperTip?: boolean;
52
52
  logoBar?: any;
53
+ textUnderlineOffset?: number;
53
54
  };
54
55
  descStyle?: CSSProperties;
55
56
  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;
27
27
  const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
28
28
  const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
29
29
  const { schema } = useEditor();
@@ -35,6 +35,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
35
35
  const [isShowMore, setIsShowMore] = useState(false);
36
36
  const [isReload, setIsReload] = useState(new Date().getTime());
37
37
  const skipLinkRef = useRef(false);
38
+ const [pageNum, setPageNum] = useState(2);
38
39
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData } = useSxpDataSource();
39
40
  const { backMainFeed, productView, jumpToWeb } = useEventReport();
40
41
  const isShowFingerTip = useMemo(() => {
@@ -477,8 +478,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
477
478
  isReload,
478
479
  renderToggleButton
479
480
  ]);
480
- return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
481
- waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
481
+ return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { textUnderlineOffset: `${(_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) !== null && _a !== void 0 ? _a : 0}px` } },
482
+ waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, textStyle: Object.assign(Object.assign({}, (_f = (_e = (_d = (_c = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.item) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.textStyles) === null || _f === void 0 ? void 0 : _f.hashTagTitle), { color: '#fff' }), onClose: () => {
482
483
  const isEq = isEqual(rtcList, cacheRtcList);
483
484
  if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
484
485
  setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
@@ -489,7 +490,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
489
490
  React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
490
491
  top: minusHeight
491
492
  } }),
492
- 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,
493
+ isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _g !== void 0 ? _g : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
493
494
  React.createElement(Swiper, { style: {
494
495
  marginTop: tagHeight
495
496
  }, ref: swiperRef, onSlideChange: () => {
@@ -506,13 +507,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
506
507
  return;
507
508
  if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
508
509
  if (!isLoadMore) {
509
- let pageNum = 2;
510
510
  setIsLoadMore(true);
511
511
  loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
512
512
  var _a;
513
513
  setIsLoadMore(false);
514
514
  if (res && ((_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
515
- pageNum++;
515
+ setPageNum((pageNum + 1));
516
516
  }
517
517
  });
518
518
  }
@@ -521,6 +521,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
521
521
  renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
522
522
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
523
523
  renderView),
524
- 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))));
524
+ React.createElement(WaterFall, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props))));
525
525
  };
526
526
  export default SxpPageRender;
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -143,11 +143,7 @@ const CommodityDetail = (_a) => {
143
143
  clickableClass: getDotsAlign
144
144
  }, loop: true, autoplay: {
145
145
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
146
- }, ref: ref, className: css(Object.assign(Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && {
147
- '.swiper-pagination': {
148
- bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom
149
- }
150
- })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
146
+ }, ref: ref, className: css(Object.assign(Object.assign({ '.swiper-pagination': Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && { bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom })), { fontSize: '14px' }) }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
151
147
  '.swiper-pagination-bullet': {
152
148
  backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
153
149
  opacity: 1
package/es/materials/sxp/popup/CommodityDetail/settingRender.js CHANGED
@@ -347,5 +347,15 @@ export default [
347
347
  addonAfter: 'px'
348
348
  }
349
349
  ]
350
+ },
351
+ {
352
+ title: '关闭按钮',
353
+ child: [
354
+ {
355
+ label: '跟随弹窗滚动',
356
+ type: 'Switch',
357
+ name: ['props', 'enableFixedCloseButton']
358
+ }
359
+ ]
350
360
  }
351
361
  ];
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -123,15 +123,11 @@ Made in Italy` })));
123
123
  React.createElement("div", { style: { position: 'relative' } },
124
124
  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: {
125
125
  clickable: true,
126
- bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
126
+ bulletActiveClass: 'swipe-item-active-bullet',
127
127
  clickableClass: getDotsAlign
128
128
  }, loop: true, autoplay: {
129
129
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
130
- }, ref: ref, className: css(Object.assign(Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && {
131
- '.swiper-pagination': {
132
- bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom
133
- }
134
- })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
130
+ }, ref: ref, className: css(Object.assign(Object.assign({ '.swiper-pagination': Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && { bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom })), { fontSize: '14px' }) }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
135
131
  '.swiper-pagination-bullet': {
136
132
  backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
137
133
  opacity: 1
@@ -199,7 +195,8 @@ Made in Italy` })));
199
195
  __html: setFontForText((_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', buttonStyle)
200
196
  } }))),
201
197
  productInfoText({ isPost }))),
202
- React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false })),
198
+ React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
199
+ React.createElement("div", { style: { paddingTop: '20px' } }, productInfoText({ isPost: false }))),
203
200
  React.createElement(Modal, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
204
201
  React.createElement("div", { style: { backgroundColor: iframeBgColor, height: '100%' } },
205
202
  React.createElement("iframe", { src: iframeUrl, style: {
package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js CHANGED
@@ -330,5 +330,15 @@ export default [
330
330
  addonAfter: 'px'
331
331
  }
332
332
  ]
333
+ },
334
+ {
335
+ title: '关闭按钮',
336
+ child: [
337
+ {
338
+ label: '跟随弹窗滚动',
339
+ type: 'Switch',
340
+ name: ['props', 'enableFixedCloseButton']
341
+ }
342
+ ]
333
343
  }
334
344
  ];
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;
10
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
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);
@@ -19,6 +19,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
19
19
  const modalEleRef = (0, react_1.useRef)(null);
20
20
  const { globalConfig, popupDetailData } = (0, hooks_1.useSxpDataSource)();
21
21
  const { schema: _schema } = (0, hooks_1.useEditor)();
22
+ const [scrollTop, setScrollTop] = (0, react_1.useState)(15);
22
23
  (0, react_1.useEffect)(() => {
23
24
  const parentNode = document.getElementById('sxp-render');
24
25
  const node = document.getElementById('pb-modal');
@@ -126,11 +127,16 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
126
127
  onTouchStart: handleTouchStart,
127
128
  onTouchEnd: handleTouchEnd
128
129
  })),
129
- react_1.default.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
130
+ react_1.default.createElement("div", { className: 'modal-icon-wrapper', onClick: onClose, style: { top: scrollTop } },
130
131
  react_1.default.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: 'modal-icon' })),
131
- react_1.default.createElement("div", { ref: ref, style: {
132
+ react_1.default.createElement("div", Object.assign({ ref: ref, style: {
132
133
  height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
133
134
  overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
134
- } }, children)))))), modalEleRef.current);
135
+ } }, (((_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.enableFixedCloseButton) && {
136
+ onScroll: (e) => {
137
+ var _a;
138
+ setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
139
+ }
140
+ })), children)))))), modalEleRef.current);
135
141
  };
136
142
  exports.default = (0, react_1.memo)(Modal);
package/lib/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -8,7 +8,7 @@ const Picture_1 = tslib_1.__importDefault(require("./Picture"));
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const css_1 = require("@emotion/css");
10
10
  const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
11
- var _a, _b;
11
+ var _a;
12
12
  const ref = (0, react_1.useRef)();
13
13
  const { isActive } = (0, react_2.useSwiperSlide)();
14
14
  const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
@@ -35,11 +35,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
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
37
  bulletActiveClass: 'swipe-item-active-bullet'
38
- }, className: (0, css_1.css)(Object.assign(Object.assign(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && {
39
- '.swiper-pagination': {
40
- bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0
41
- }
42
- })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
38
+ }, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': Object.assign(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && { bottom: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom })), { fontSize: '14px' }) }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
43
39
  '.swiper-pagination-bullet': {
44
40
  backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
45
41
  opacity: 1
@@ -49,7 +45,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
49
45
  backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
50
46
  opacity: 1
51
47
  }
52
- }))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
48
+ }))), height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
53
49
  return (react_1.default.createElement(react_2.SwiperSlide, { key: index },
54
50
  react_1.default.createElement(Picture_1.default, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
55
51
  })));
package/lib/core/components/SxpPageRender/index.d.ts CHANGED
@@ -50,6 +50,7 @@ export interface ISxpPageRenderProps {
50
50
  enablePreview?: boolean;
51
51
  enableSwiperTip?: boolean;
52
52
  logoBar?: any;
53
+ textUnderlineOffset?: number;
53
54
  };
54
55
  descStyle?: CSSProperties;
55
56
  tipText?: {
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -26,7 +26,7 @@ const Tagbar_1 = tslib_1.__importDefault(require("./Tagbar"));
26
26
  const localStore_1 = require("../../../core/utils/localStore");
27
27
  const lodash_1 = require("lodash");
28
28
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
29
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
29
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
30
30
  const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
31
31
  const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
32
32
  const { schema } = (0, hooks_1.useEditor)();
@@ -38,6 +38,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
38
38
  const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
39
39
  const [isReload, setIsReload] = (0, react_1.useState)(new Date().getTime());
40
40
  const skipLinkRef = (0, react_1.useRef)(false);
41
+ const [pageNum, setPageNum] = (0, react_1.useState)(2);
41
42
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData } = (0, hooks_1.useSxpDataSource)();
42
43
  const { backMainFeed, productView, jumpToWeb } = (0, useEventReport_1.useEventReport)();
43
44
  const isShowFingerTip = (0, react_1.useMemo)(() => {
@@ -480,8 +481,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
480
481
  isReload,
481
482
  renderToggleButton
482
483
  ]);
483
- return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
484
- waterFallData && (react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
484
+ return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { textUnderlineOffset: `${(_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) !== null && _a !== void 0 ? _a : 0}px` } },
485
+ waterFallData && (react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, textStyle: Object.assign(Object.assign({}, (_f = (_e = (_d = (_c = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.item) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.textStyles) === null || _f === void 0 ? void 0 : _f.hashTagTitle), { color: '#fff' }), onClose: () => {
485
486
  const isEq = (0, lodash_1.isEqual)(rtcList, cacheRtcList);
486
487
  if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
487
488
  setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
@@ -492,7 +493,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
492
493
  react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
493
494
  top: minusHeight
494
495
  } }),
495
- isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { 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,
496
+ isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _g !== void 0 ? _g : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
496
497
  react_1.default.createElement(react_2.Swiper, { style: {
497
498
  marginTop: tagHeight
498
499
  }, ref: swiperRef, onSlideChange: () => {
@@ -509,13 +510,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
509
510
  return;
510
511
  if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
511
512
  if (!isLoadMore) {
512
- let pageNum = 2;
513
513
  setIsLoadMore(true);
514
514
  loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
515
515
  var _a;
516
516
  setIsLoadMore(false);
517
517
  if (res && ((_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
518
- pageNum++;
518
+ setPageNum((pageNum + 1));
519
519
  }
520
520
  });
521
521
  }
@@ -524,6 +524,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
524
524
  renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
525
525
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
526
526
  renderView),
527
- react_1.default.createElement(WaterFall_1.default, 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))));
527
+ react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props))));
528
528
  };
529
529
  exports.default = SxpPageRender;
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -145,11 +145,7 @@ const CommodityDetail = (_a) => {
145
145
  clickableClass: getDotsAlign
146
146
  }, loop: true, autoplay: {
147
147
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
148
- }, ref: ref, className: (0, css_1.css)(Object.assign(Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && {
149
- '.swiper-pagination': {
150
- bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom
151
- }
152
- })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
148
+ }, ref: ref, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && { bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom })), { fontSize: '14px' }) }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
153
149
  '.swiper-pagination-bullet': {
154
150
  backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
155
151
  opacity: 1
package/lib/materials/sxp/popup/CommodityDetail/settingRender.js CHANGED
@@ -349,5 +349,15 @@ exports.default = [
349
349
  addonAfter: 'px'
350
350
  }
351
351
  ]
352
+ },
353
+ {
354
+ title: '关闭按钮',
355
+ child: [
356
+ {
357
+ label: '跟随弹窗滚动',
358
+ type: 'Switch',
359
+ name: ['props', 'enableFixedCloseButton']
360
+ }
361
+ ]
352
362
  }
353
363
  ];
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -125,15 +125,11 @@ Made in Italy` })));
125
125
  react_1.default.createElement("div", { style: { position: 'relative' } },
126
126
  product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
127
127
  clickable: true,
128
- bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
128
+ bulletActiveClass: 'swipe-item-active-bullet',
129
129
  clickableClass: getDotsAlign
130
130
  }, loop: true, autoplay: {
131
131
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
132
- }, ref: ref, className: (0, css_1.css)(Object.assign(Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && {
133
- '.swiper-pagination': {
134
- bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom
135
- }
136
- })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
132
+ }, ref: ref, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && { bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom })), { fontSize: '14px' }) }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
137
133
  '.swiper-pagination-bullet': {
138
134
  backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
139
135
  opacity: 1
@@ -201,7 +197,8 @@ Made in Italy` })));
201
197
  __html: (0, tool_1.setFontForText)((_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', buttonStyle)
202
198
  } }))),
203
199
  productInfoText({ isPost }))),
204
- react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false })),
200
+ react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) },
201
+ react_1.default.createElement("div", { style: { paddingTop: '20px' } }, productInfoText({ isPost: false }))),
205
202
  react_1.default.createElement(Modal_1.default, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
206
203
  react_1.default.createElement("div", { style: { backgroundColor: iframeBgColor, height: '100%' } },
207
204
  react_1.default.createElement("iframe", { src: iframeUrl, style: {
package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js CHANGED
@@ -332,5 +332,15 @@ exports.default = [
332
332
  addonAfter: 'px'
333
333
  }
334
334
  ]
335
+ },
336
+ {
337
+ title: '关闭按钮',
338
+ child: [
339
+ {
340
+ label: '跟随弹窗滚动',
341
+ type: 'Switch',
342
+ name: ['props', 'enableFixedCloseButton']
343
+ }
344
+ ]
335
345
  }
336
346
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.4.0",
3
+ "version": "1.4.1",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",