pb-sxp-ui 1.4.0 → 1.4.2

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 +63 -42
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +0 -4
  4. package/dist/index.js +63 -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 +63 -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/SxpPageRender/Modal/index.js +12 -6
  15. package/es/core/components/SxpPageRender/PictureGroup/index.js +4 -5
  16. package/es/core/components/SxpPageRender/index.d.ts +1 -0
  17. package/es/core/components/SxpPageRender/index.js +3 -3
  18. package/es/materials/sxp/popup/CommodityDetail/index.js +5 -9
  19. package/es/materials/sxp/popup/CommodityDetail/settingRender.js +10 -0
  20. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +15 -15
  21. package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js +10 -0
  22. package/lib/core/components/SxpPageRender/Modal/index.js +12 -6
  23. package/lib/core/components/SxpPageRender/PictureGroup/index.js +4 -5
  24. package/lib/core/components/SxpPageRender/index.d.ts +1 -0
  25. package/lib/core/components/SxpPageRender/index.js +3 -3
  26. package/lib/materials/sxp/popup/CommodityDetail/index.js +5 -9
  27. package/lib/materials/sxp/popup/CommodityDetail/settingRender.js +10 -0
  28. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +15 -15
  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');
@@ -113,9 +114,9 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
113
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)`,
114
115
  height: '100%'
115
116
  } },
116
- React.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: 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'}`, 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
118
  transform: `translateY(${modalTrans}px)`
118
- })), onClick: (e) => {
119
+ })), { overflow: 'hidden' }), onClick: (e) => {
119
120
  e.stopPropagation();
120
121
  e.preventDefault();
121
122
  } }, (isScrollFullScreen && {
@@ -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
@@ -32,11 +32,10 @@ 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': {
36
+ bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
37
+ fontSize: '14px'
38
+ } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
40
39
  '.swiper-pagination-bullet': {
41
40
  backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
42
41
  opacity: 1
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
@@ -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,7 +478,7 @@ 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
+ return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: Object.assign({}, ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) && { textUnderlineOffset: `${globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset}px` })) },
481
482
  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: () => {
482
483
  const isEq = isEqual(rtcList, cacheRtcList);
483
484
  if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
@@ -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
  }
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -12,7 +12,7 @@ import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
12
  import { setFontForText } from '../../../../core/utils/tool';
13
13
  import CommodityGroup from '../../template/components/CommodityGroup';
14
14
  const CommodityDetail = (_a) => {
15
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
15
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
16
16
  var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor"]);
17
17
  const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef } = useSxpDataSource();
18
18
  const { jumpToWeb, productView } = useEventReport();
@@ -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': { 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) && {
151
147
  '.swiper-pagination-bullet': {
152
148
  backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
153
149
  opacity: 1
@@ -158,7 +154,7 @@ const CommodityDetail = (_a) => {
158
154
  opacity: 1
159
155
  }
160
156
  }))) },
161
- React.createElement(React.Fragment, null, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
157
+ React.createElement(React.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
162
158
  var _a;
163
159
  return (React.createElement(SwiperSlide, { key: src },
164
160
  React.createElement("div", { style: {
@@ -174,7 +170,7 @@ const CommodityDetail = (_a) => {
174
170
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
175
171
  }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
176
172
  })))),
177
- !((_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.length) && (React.createElement("div", { className: css({
173
+ !((_z = product === null || product === void 0 ? void 0 : product.homePage) === null || _z === void 0 ? void 0 : _z.length) && (React.createElement("div", { className: css({
178
174
  height,
179
175
  width
180
176
  }) },
@@ -182,7 +178,7 @@ const CommodityDetail = (_a) => {
182
178
  objectFit: 'cover',
183
179
  width: '100%',
184
180
  height: '100%'
185
- }), src: (_z = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _z !== void 0 ? _z : bottom_image, alt: 'pdp image' }))),
181
+ }), src: (_0 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _0 !== void 0 ? _0 : bottom_image, alt: 'pdp image' }))),
186
182
  (iframeUrl || !product) && iframeIcon && (React.createElement("div", { style: {
187
183
  display: 'flex',
188
184
  alignItems: 'center',
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
@@ -12,7 +12,7 @@ import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
12
  import { setFontForText } from '../../../../core/utils/tool';
13
13
  import CommodityGroup from '../../template/components/CommodityGroup';
14
14
  const CommodityDetailDiroNew = (_a) => {
15
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
15
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
16
16
  var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor"]);
17
17
  const [spread, setSpread] = useState(true);
18
18
  const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef } = useSxpDataSource();
@@ -123,15 +123,14 @@ 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': {
131
+ bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0,
132
+ fontSize: '14px'
133
+ } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
135
134
  '.swiper-pagination-bullet': {
136
135
  backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
137
136
  opacity: 1
@@ -141,7 +140,7 @@ Made in Italy` })));
141
140
  backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
142
141
  opacity: 1
143
142
  }
144
- }))) }, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
143
+ }))) }, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
145
144
  var _a;
146
145
  return (React.createElement(SwiperSlide, { key: src },
147
146
  React.createElement("div", { style: {
@@ -157,7 +156,7 @@ Made in Italy` })));
157
156
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
158
157
  }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
159
158
  }))),
160
- !((_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.length) && (React.createElement("div", { className: css({
159
+ !((_z = product === null || product === void 0 ? void 0 : product.homePage) === null || _z === void 0 ? void 0 : _z.length) && (React.createElement("div", { className: css({
161
160
  height,
162
161
  width
163
162
  }) },
@@ -165,7 +164,7 @@ Made in Italy` })));
165
164
  objectFit: 'cover',
166
165
  width: '100%',
167
166
  height: '100%'
168
- }), src: (_z = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _z !== void 0 ? _z : bottom_image, alt: 'pdp image' }))),
167
+ }), src: (_0 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _0 !== void 0 ? _0 : bottom_image, alt: 'pdp image' }))),
169
168
  (iframeUrl || !product) && iframeIcon && (React.createElement("div", { style: {
170
169
  display: 'flex',
171
170
  alignItems: 'center',
@@ -182,7 +181,7 @@ Made in Italy` })));
182
181
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
183
182
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
184
183
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
185
- __html: setFontForText((_0 = product === null || product === void 0 ? void 0 : product.title) !== null && _0 !== void 0 ? _0 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
184
+ __html: setFontForText((_1 = product === null || product === void 0 ? void 0 : product.title) !== null && _1 !== void 0 ? _1 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
186
185
  } }),
187
186
  React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), dangerouslySetInnerHTML: {
188
187
  __html: setFontForText((product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
@@ -192,14 +191,15 @@ Made in Italy` })));
192
191
  __html: setFontForText(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
193
192
  } }),
194
193
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
195
- __html: setFontForText((_1 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _1 !== void 0 ? _1 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
194
+ __html: setFontForText((_2 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _2 !== void 0 ? _2 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
196
195
  } }))),
197
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_2 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _2 !== void 0 ? _2 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
196
+ (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
198
197
  React.createElement("span", { dangerouslySetInnerHTML: {
199
- __html: setFontForText((_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', buttonStyle)
198
+ __html: setFontForText((_4 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _4 !== void 0 ? _4 : 'Shop now', buttonStyle)
200
199
  } }))),
201
200
  productInfoText({ isPost }))),
202
- React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false })),
201
+ React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
202
+ React.createElement("div", { style: { paddingTop: '20px' } }, productInfoText({ isPost: false }))),
203
203
  React.createElement(Modal, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
204
204
  React.createElement("div", { style: { backgroundColor: iframeBgColor, height: '100%' } },
205
205
  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');
@@ -116,9 +117,9 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
116
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)`,
117
118
  height: '100%'
118
119
  } },
119
- react_1.default.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: 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'}`, 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
121
  transform: `translateY(${modalTrans}px)`
121
- })), onClick: (e) => {
122
+ })), { overflow: 'hidden' }), onClick: (e) => {
122
123
  e.stopPropagation();
123
124
  e.preventDefault();
124
125
  } }, (isScrollFullScreen && {
@@ -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
@@ -35,11 +35,10 @@ 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': {
39
+ bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
40
+ fontSize: '14px'
41
+ } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
43
42
  '.swiper-pagination-bullet': {
44
43
  backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
45
44
  opacity: 1
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
@@ -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,7 +481,7 @@ 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
+ return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: Object.assign({}, ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) && { textUnderlineOffset: `${globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset}px` })) },
484
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({}, (_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: () => {
485
486
  const isEq = (0, lodash_1.isEqual)(rtcList, cacheRtcList);
486
487
  if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
@@ -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
  }
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -14,7 +14,7 @@ const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/componen
14
14
  const tool_1 = require("../../../../core/utils/tool");
15
15
  const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
16
16
  const CommodityDetail = (_a) => {
17
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
17
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
18
18
  var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor"]);
19
19
  const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef } = (0, hooks_1.useSxpDataSource)();
20
20
  const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
@@ -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': { 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) && {
153
149
  '.swiper-pagination-bullet': {
154
150
  backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
155
151
  opacity: 1
@@ -160,7 +156,7 @@ const CommodityDetail = (_a) => {
160
156
  opacity: 1
161
157
  }
162
158
  }))) },
163
- react_1.default.createElement(react_1.default.Fragment, null, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
159
+ react_1.default.createElement(react_1.default.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
164
160
  var _a;
165
161
  return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
166
162
  react_1.default.createElement("div", { style: {
@@ -176,7 +172,7 @@ const CommodityDetail = (_a) => {
176
172
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
177
173
  }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
178
174
  })))),
179
- !((_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
175
+ !((_z = product === null || product === void 0 ? void 0 : product.homePage) === null || _z === void 0 ? void 0 : _z.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
180
176
  height,
181
177
  width
182
178
  }) },
@@ -184,7 +180,7 @@ const CommodityDetail = (_a) => {
184
180
  objectFit: 'cover',
185
181
  width: '100%',
186
182
  height: '100%'
187
- }), src: (_z = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _z !== void 0 ? _z : bottom_image, alt: 'pdp image' }))),
183
+ }), src: (_0 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _0 !== void 0 ? _0 : bottom_image, alt: 'pdp image' }))),
188
184
  (iframeUrl || !product) && iframeIcon && (react_1.default.createElement("div", { style: {
189
185
  display: 'flex',
190
186
  alignItems: 'center',
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
@@ -14,7 +14,7 @@ const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/componen
14
14
  const tool_1 = require("../../../../core/utils/tool");
15
15
  const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
16
16
  const CommodityDetailDiroNew = (_a) => {
17
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
17
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
18
18
  var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor"]);
19
19
  const [spread, setSpread] = (0, react_1.useState)(true);
20
20
  const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef } = (0, hooks_1.useSxpDataSource)();
@@ -125,15 +125,14 @@ 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': {
133
+ bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0,
134
+ fontSize: '14px'
135
+ } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
137
136
  '.swiper-pagination-bullet': {
138
137
  backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
139
138
  opacity: 1
@@ -143,7 +142,7 @@ Made in Italy` })));
143
142
  backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
144
143
  opacity: 1
145
144
  }
146
- }))) }, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
145
+ }))) }, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
147
146
  var _a;
148
147
  return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
149
148
  react_1.default.createElement("div", { style: {
@@ -159,7 +158,7 @@ Made in Italy` })));
159
158
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
160
159
  }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
161
160
  }))),
162
- !((_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
161
+ !((_z = product === null || product === void 0 ? void 0 : product.homePage) === null || _z === void 0 ? void 0 : _z.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
163
162
  height,
164
163
  width
165
164
  }) },
@@ -167,7 +166,7 @@ Made in Italy` })));
167
166
  objectFit: 'cover',
168
167
  width: '100%',
169
168
  height: '100%'
170
- }), src: (_z = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _z !== void 0 ? _z : bottom_image, alt: 'pdp image' }))),
169
+ }), src: (_0 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _0 !== void 0 ? _0 : bottom_image, alt: 'pdp image' }))),
171
170
  (iframeUrl || !product) && iframeIcon && (react_1.default.createElement("div", { style: {
172
171
  display: 'flex',
173
172
  alignItems: 'center',
@@ -184,7 +183,7 @@ Made in Italy` })));
184
183
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
185
184
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
186
185
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
187
- __html: (0, tool_1.setFontForText)((_0 = product === null || product === void 0 ? void 0 : product.title) !== null && _0 !== void 0 ? _0 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
186
+ __html: (0, tool_1.setFontForText)((_1 = product === null || product === void 0 ? void 0 : product.title) !== null && _1 !== void 0 ? _1 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
188
187
  } }),
189
188
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), dangerouslySetInnerHTML: {
190
189
  __html: (0, tool_1.setFontForText)((product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
@@ -194,14 +193,15 @@ Made in Italy` })));
194
193
  __html: (0, tool_1.setFontForText)(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
195
194
  } }),
196
195
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
197
- __html: (0, tool_1.setFontForText)((_1 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _1 !== void 0 ? _1 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
196
+ __html: (0, tool_1.setFontForText)((_2 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _2 !== void 0 ? _2 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
198
197
  } }))),
199
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_2 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _2 !== void 0 ? _2 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
198
+ (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
200
199
  react_1.default.createElement("span", { dangerouslySetInnerHTML: {
201
- __html: (0, tool_1.setFontForText)((_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', buttonStyle)
200
+ __html: (0, tool_1.setFontForText)((_4 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _4 !== void 0 ? _4 : 'Shop now', buttonStyle)
202
201
  } }))),
203
202
  productInfoText({ isPost }))),
204
- react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false })),
203
+ react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) },
204
+ react_1.default.createElement("div", { style: { paddingTop: '20px' } }, productInfoText({ isPost: false }))),
205
205
  react_1.default.createElement(Modal_1.default, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
206
206
  react_1.default.createElement("div", { style: { backgroundColor: iframeBgColor, height: '100%' } },
207
207
  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.2",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",