pb-sxp-ui 1.3.3 → 1.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/index.cjs +29 -32
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +29 -32
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +29 -32
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/Modal/index.js +2 -3
  14. package/es/core/components/SxpPageRender/index.js +1 -1
  15. package/es/materials/sxp/popup/CommodityDetail/index.js +10 -11
  16. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +14 -15
  17. package/lib/core/components/SxpPageRender/Modal/index.js +2 -3
  18. package/lib/core/components/SxpPageRender/index.js +1 -1
  19. package/lib/materials/sxp/popup/CommodityDetail/index.js +10 -11
  20. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +14 -15
  21. 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, _u, _v, _w, _x;
7
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
8
8
  const touchRef = useRef(null);
9
9
  const fTouchRef = useRef(null);
10
10
  const touchMoveRef = useRef(null);
@@ -126,8 +126,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
126
126
  React.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
127
127
  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
128
  React.createElement("div", { ref: ref, style: {
129
- height: (_x = (isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H) -
130
- ((_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.bottomMargin)) !== null && _x !== void 0 ? _x : 0,
129
+ height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
131
130
  overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
132
131
  } }, children)))))), modalEleRef.current);
133
132
  };
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -190,7 +190,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
190
190
  return null;
191
191
  }
192
192
  });
193
- return !waterFallData && !isEditor ? list.concat([{ loading: true }]) : list;
193
+ return !waterFallData ? list.concat([{ loading: true }]) : list;
194
194
  }, [data, activeIndex, waterFallData, isEditor]);
195
195
  const renderLogo = useMemo(() => {
196
196
  var _a, _b, _c, _d;
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, _0, _1, _2;
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;
16
16
  var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel } = _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"]);
17
17
  const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef } = useSxpDataSource();
18
18
  const { jumpToWeb, productView } = useEventReport();
@@ -133,18 +133,18 @@ const CommodityDetail = (_a) => {
133
133
  };
134
134
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
135
135
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
136
- const iframeUrl = isPost ? (_w = data === null || data === void 0 ? void 0 : data.product) === null || _w === void 0 ? void 0 : _w.remark : (_y = (_x = data === null || data === void 0 ? void 0 : data.video) === null || _x === void 0 ? void 0 : _x.bindProduct) === null || _y === void 0 ? void 0 : _y.remark;
136
+ const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
137
137
  return (React.createElement(React.Fragment, null,
138
138
  React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
139
139
  React.createElement("div", { style: { position: 'relative' } },
140
- product && ((_z = product === null || product === void 0 ? void 0 : product.homePage) === null || _z === void 0 ? void 0 : _z.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
140
+ 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: {
141
141
  clickable: true,
142
142
  bulletActiveClass: 'swipe-item-active-bullet',
143
143
  clickableClass: getDotsAlign
144
144
  }, loop: true, autoplay: {
145
145
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
146
146
  }, ref: ref },
147
- React.createElement(React.Fragment, null, (_0 = product === null || product === void 0 ? void 0 : product.homePage) === null || _0 === void 0 ? void 0 : _0.map((src) => {
147
+ React.createElement(React.Fragment, null, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
148
148
  var _a;
149
149
  return (React.createElement(SwiperSlide, { key: src },
150
150
  React.createElement("div", { style: {
@@ -160,7 +160,7 @@ const CommodityDetail = (_a) => {
160
160
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
161
161
  }, 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 }))));
162
162
  })))),
163
- !((_1 = product === null || product === void 0 ? void 0 : product.homePage) === null || _1 === void 0 ? void 0 : _1.length) && (React.createElement("div", { className: css({
163
+ !((_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.length) && (React.createElement("div", { className: css({
164
164
  height,
165
165
  width
166
166
  }) },
@@ -168,9 +168,8 @@ const CommodityDetail = (_a) => {
168
168
  objectFit: 'cover',
169
169
  width: '100%',
170
170
  height: '100%'
171
- }), src: (_2 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _2 !== void 0 ? _2 : bottom_image, alt: 'pdp image' }))),
171
+ }), src: (_z = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _z !== void 0 ? _z : bottom_image, alt: 'pdp image' }))),
172
172
  (iframeUrl || !product) && iframeIcon && (React.createElement("div", { style: {
173
- padding: '5px 10px',
174
173
  display: 'flex',
175
174
  alignItems: 'center',
176
175
  position: 'absolute',
@@ -180,7 +179,7 @@ const CommodityDetail = (_a) => {
180
179
  background: '#fff',
181
180
  borderRadius: '3px'
182
181
  }, onClick: () => setShow3DModal(true) },
183
- React.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px', style: { marginRight: '5px' } })))),
182
+ React.createElement("img", { src: iframeIcon, alt: '3d', width: '60px' })))),
184
183
  renderCommodityGroup(),
185
184
  React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
186
185
  renderBtn(),
@@ -188,11 +187,11 @@ const CommodityDetail = (_a) => {
188
187
  React.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
189
188
  renderBtn()),
190
189
  React.createElement(Modal, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
191
- React.createElement("div", { style: { height: '100vh' } },
190
+ React.createElement("div", { style: { height: window.innerHeight } },
192
191
  React.createElement("iframe", { src: iframeUrl, style: {
193
192
  width: '100%',
194
- height: isTel ? `${664 - 40}px` : `calc(100vh - 40px)`,
195
- marginTop: '40px',
193
+ height: isTel ? `${664 - 50}px` : `${window.innerHeight - 50}px`,
194
+ marginTop: '50px',
196
195
  border: 'none'
197
196
  } })))));
198
197
  };
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, _4, _5, _6;
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;
16
16
  var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel"]);
17
17
  const [spread, setSpread] = useState(true);
18
18
  const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef } = useSxpDataSource();
@@ -117,17 +117,17 @@ Made in Italy` })));
117
117
  };
118
118
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
119
119
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
120
- const iframeUrl = isPost ? (_w = data === null || data === void 0 ? void 0 : data.product) === null || _w === void 0 ? void 0 : _w.remark : (_y = (_x = data === null || data === void 0 ? void 0 : data.video) === null || _x === void 0 ? void 0 : _x.bindProduct) === null || _y === void 0 ? void 0 : _y.remark;
120
+ const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
121
121
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
122
122
  React.createElement("div", Object.assign({ className: css(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
123
123
  React.createElement("div", { style: { position: 'relative' } },
124
- product && ((_z = product === null || product === void 0 ? void 0 : product.homePage) === null || _z === void 0 ? void 0 : _z.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
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
126
  bulletActiveClass: 'commondityDiroNew-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 }, (_0 = product === null || product === void 0 ? void 0 : product.homePage) === null || _0 === void 0 ? void 0 : _0.map((src) => {
130
+ }, ref: ref }, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
131
131
  var _a;
132
132
  return (React.createElement(SwiperSlide, { key: src },
133
133
  React.createElement("div", { style: {
@@ -143,7 +143,7 @@ Made in Italy` })));
143
143
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
144
144
  }, 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 }))));
145
145
  }))),
146
- !((_1 = product === null || product === void 0 ? void 0 : product.homePage) === null || _1 === void 0 ? void 0 : _1.length) && (React.createElement("div", { className: css({
146
+ !((_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.length) && (React.createElement("div", { className: css({
147
147
  height,
148
148
  width
149
149
  }) },
@@ -151,9 +151,8 @@ Made in Italy` })));
151
151
  objectFit: 'cover',
152
152
  width: '100%',
153
153
  height: '100%'
154
- }), src: (_2 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _2 !== void 0 ? _2 : bottom_image, alt: 'pdp image' }))),
154
+ }), src: (_z = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _z !== void 0 ? _z : bottom_image, alt: 'pdp image' }))),
155
155
  (iframeUrl || !product) && iframeIcon && (React.createElement("div", { style: {
156
- padding: '5px 10px',
157
156
  display: 'flex',
158
157
  alignItems: 'center',
159
158
  position: 'absolute',
@@ -163,13 +162,13 @@ Made in Italy` })));
163
162
  background: '#fff',
164
163
  borderRadius: '3px'
165
164
  }, onClick: () => setShow3DModal(true) },
166
- React.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px', style: { marginRight: '5px' } })))),
165
+ React.createElement("img", { src: iframeIcon, alt: '3d', width: '60px' })))),
167
166
  renderCommodityGroup(),
168
167
  React.createElement("div", { className: 'pb-commondityDiroNew-content' },
169
168
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
170
169
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
171
170
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
172
- __html: setFontForText((_3 = product === null || product === void 0 ? void 0 : product.title) !== null && _3 !== void 0 ? _3 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
171
+ __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)
173
172
  } }),
174
173
  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: {
175
174
  __html: setFontForText((product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
@@ -179,20 +178,20 @@ Made in Italy` })));
179
178
  __html: setFontForText(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
180
179
  } }),
181
180
  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: {
182
- __html: setFontForText((_4 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _4 !== void 0 ? _4 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
181
+ __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)
183
182
  } }))),
184
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_5 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _5 !== void 0 ? _5 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
183
+ (!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 },
185
184
  React.createElement("span", { dangerouslySetInnerHTML: {
186
- __html: setFontForText((_6 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _6 !== void 0 ? _6 : 'Shop now', buttonStyle)
185
+ __html: setFontForText((_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', buttonStyle)
187
186
  } }))),
188
187
  productInfoText({ isPost }))),
189
188
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false })),
190
189
  React.createElement(Modal, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
191
- React.createElement("div", { style: { height: '100vh' } },
190
+ React.createElement("div", { style: { height: window.innerHeight } },
192
191
  React.createElement("iframe", { src: iframeUrl, style: {
193
192
  width: '100%',
194
- height: isTel ? `${664 - 40}px` : `calc(100vh - 40px)`,
195
- marginTop: '40px',
193
+ height: isTel ? `${664 - 50}px` : `${window.innerHeight - 50}px`,
194
+ marginTop: '50px',
196
195
  border: 'none'
197
196
  } })))));
198
197
  };
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;
10
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
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);
@@ -129,8 +129,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
129
129
  react_1.default.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
130
130
  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
131
  react_1.default.createElement("div", { ref: ref, style: {
132
- height: (_x = (isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H) -
133
- ((_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.bottomMargin)) !== null && _x !== void 0 ? _x : 0,
132
+ height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
134
133
  overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
135
134
  } }, children)))))), modalEleRef.current);
136
135
  };
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -193,7 +193,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
193
193
  return null;
194
194
  }
195
195
  });
196
- return !waterFallData && !isEditor ? list.concat([{ loading: true }]) : list;
196
+ return !waterFallData ? list.concat([{ loading: true }]) : list;
197
197
  }, [data, activeIndex, waterFallData, isEditor]);
198
198
  const renderLogo = (0, react_1.useMemo)(() => {
199
199
  var _a, _b, _c, _d;
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, _0, _1, _2;
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;
18
18
  var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel } = _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"]);
19
19
  const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef } = (0, hooks_1.useSxpDataSource)();
20
20
  const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
@@ -135,18 +135,18 @@ const CommodityDetail = (_a) => {
135
135
  };
136
136
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
137
137
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
138
- const iframeUrl = isPost ? (_w = data === null || data === void 0 ? void 0 : data.product) === null || _w === void 0 ? void 0 : _w.remark : (_y = (_x = data === null || data === void 0 ? void 0 : data.video) === null || _x === void 0 ? void 0 : _x.bindProduct) === null || _y === void 0 ? void 0 : _y.remark;
138
+ const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
139
139
  return (react_1.default.createElement(react_1.default.Fragment, null,
140
140
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
141
141
  react_1.default.createElement("div", { style: { position: 'relative' } },
142
- product && ((_z = product === null || product === void 0 ? void 0 : product.homePage) === null || _z === void 0 ? void 0 : _z.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
142
+ 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: {
143
143
  clickable: true,
144
144
  bulletActiveClass: 'swipe-item-active-bullet',
145
145
  clickableClass: getDotsAlign
146
146
  }, loop: true, autoplay: {
147
147
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
148
148
  }, ref: ref },
149
- react_1.default.createElement(react_1.default.Fragment, null, (_0 = product === null || product === void 0 ? void 0 : product.homePage) === null || _0 === void 0 ? void 0 : _0.map((src) => {
149
+ 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) => {
150
150
  var _a;
151
151
  return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
152
152
  react_1.default.createElement("div", { style: {
@@ -162,7 +162,7 @@ const CommodityDetail = (_a) => {
162
162
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
163
163
  }, 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 }))));
164
164
  })))),
165
- !((_1 = product === null || product === void 0 ? void 0 : product.homePage) === null || _1 === void 0 ? void 0 : _1.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
165
+ !((_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)({
166
166
  height,
167
167
  width
168
168
  }) },
@@ -170,9 +170,8 @@ const CommodityDetail = (_a) => {
170
170
  objectFit: 'cover',
171
171
  width: '100%',
172
172
  height: '100%'
173
- }), src: (_2 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _2 !== void 0 ? _2 : bottom_image, alt: 'pdp image' }))),
173
+ }), src: (_z = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _z !== void 0 ? _z : bottom_image, alt: 'pdp image' }))),
174
174
  (iframeUrl || !product) && iframeIcon && (react_1.default.createElement("div", { style: {
175
- padding: '5px 10px',
176
175
  display: 'flex',
177
176
  alignItems: 'center',
178
177
  position: 'absolute',
@@ -182,7 +181,7 @@ const CommodityDetail = (_a) => {
182
181
  background: '#fff',
183
182
  borderRadius: '3px'
184
183
  }, onClick: () => setShow3DModal(true) },
185
- react_1.default.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px', style: { marginRight: '5px' } })))),
184
+ react_1.default.createElement("img", { src: iframeIcon, alt: '3d', width: '60px' })))),
186
185
  renderCommodityGroup(),
187
186
  react_1.default.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
188
187
  renderBtn(),
@@ -190,11 +189,11 @@ const CommodityDetail = (_a) => {
190
189
  react_1.default.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
191
190
  renderBtn()),
192
191
  react_1.default.createElement(Modal_1.default, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
193
- react_1.default.createElement("div", { style: { height: '100vh' } },
192
+ react_1.default.createElement("div", { style: { height: window.innerHeight } },
194
193
  react_1.default.createElement("iframe", { src: iframeUrl, style: {
195
194
  width: '100%',
196
- height: isTel ? `${664 - 40}px` : `calc(100vh - 40px)`,
197
- marginTop: '40px',
195
+ height: isTel ? `${664 - 50}px` : `${window.innerHeight - 50}px`,
196
+ marginTop: '50px',
198
197
  border: 'none'
199
198
  } })))));
200
199
  };
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, _4, _5, _6;
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;
18
18
  var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel"]);
19
19
  const [spread, setSpread] = (0, react_1.useState)(true);
20
20
  const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef } = (0, hooks_1.useSxpDataSource)();
@@ -119,17 +119,17 @@ Made in Italy` })));
119
119
  };
120
120
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
121
121
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
122
- const iframeUrl = isPost ? (_w = data === null || data === void 0 ? void 0 : data.product) === null || _w === void 0 ? void 0 : _w.remark : (_y = (_x = data === null || data === void 0 ? void 0 : data.video) === null || _x === void 0 ? void 0 : _x.bindProduct) === null || _y === void 0 ? void 0 : _y.remark;
122
+ const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
123
123
  return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
124
124
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
125
125
  react_1.default.createElement("div", { style: { position: 'relative' } },
126
- product && ((_z = product === null || product === void 0 ? void 0 : product.homePage) === null || _z === void 0 ? void 0 : _z.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
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
128
  bulletActiveClass: 'commondityDiroNew-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 }, (_0 = product === null || product === void 0 ? void 0 : product.homePage) === null || _0 === void 0 ? void 0 : _0.map((src) => {
132
+ }, ref: ref }, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
133
133
  var _a;
134
134
  return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
135
135
  react_1.default.createElement("div", { style: {
@@ -145,7 +145,7 @@ Made in Italy` })));
145
145
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
146
146
  }, 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 }))));
147
147
  }))),
148
- !((_1 = product === null || product === void 0 ? void 0 : product.homePage) === null || _1 === void 0 ? void 0 : _1.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
148
+ !((_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)({
149
149
  height,
150
150
  width
151
151
  }) },
@@ -153,9 +153,8 @@ Made in Italy` })));
153
153
  objectFit: 'cover',
154
154
  width: '100%',
155
155
  height: '100%'
156
- }), src: (_2 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _2 !== void 0 ? _2 : bottom_image, alt: 'pdp image' }))),
156
+ }), src: (_z = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _z !== void 0 ? _z : bottom_image, alt: 'pdp image' }))),
157
157
  (iframeUrl || !product) && iframeIcon && (react_1.default.createElement("div", { style: {
158
- padding: '5px 10px',
159
158
  display: 'flex',
160
159
  alignItems: 'center',
161
160
  position: 'absolute',
@@ -165,13 +164,13 @@ Made in Italy` })));
165
164
  background: '#fff',
166
165
  borderRadius: '3px'
167
166
  }, onClick: () => setShow3DModal(true) },
168
- react_1.default.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px', style: { marginRight: '5px' } })))),
167
+ react_1.default.createElement("img", { src: iframeIcon, alt: '3d', width: '60px' })))),
169
168
  renderCommodityGroup(),
170
169
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content' },
171
170
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
172
171
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
173
172
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
174
- __html: (0, tool_1.setFontForText)((_3 = product === null || product === void 0 ? void 0 : product.title) !== null && _3 !== void 0 ? _3 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
173
+ __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)
175
174
  } }),
176
175
  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: {
177
176
  __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)
@@ -181,20 +180,20 @@ Made in Italy` })));
181
180
  __html: (0, tool_1.setFontForText)(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
182
181
  } }),
183
182
  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: {
184
- __html: (0, tool_1.setFontForText)((_4 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _4 !== void 0 ? _4 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
183
+ __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)
185
184
  } }))),
186
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_5 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _5 !== void 0 ? _5 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
185
+ (!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 },
187
186
  react_1.default.createElement("span", { dangerouslySetInnerHTML: {
188
- __html: (0, tool_1.setFontForText)((_6 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _6 !== void 0 ? _6 : 'Shop now', buttonStyle)
187
+ __html: (0, tool_1.setFontForText)((_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', buttonStyle)
189
188
  } }))),
190
189
  productInfoText({ isPost }))),
191
190
  react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false })),
192
191
  react_1.default.createElement(Modal_1.default, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
193
- react_1.default.createElement("div", { style: { height: '100vh' } },
192
+ react_1.default.createElement("div", { style: { height: window.innerHeight } },
194
193
  react_1.default.createElement("iframe", { src: iframeUrl, style: {
195
194
  width: '100%',
196
- height: isTel ? `${664 - 40}px` : `calc(100vh - 40px)`,
197
- marginTop: '40px',
195
+ height: isTel ? `${664 - 50}px` : `${window.innerHeight - 50}px`,
196
+ marginTop: '50px',
198
197
  border: 'none'
199
198
  } })))));
200
199
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.3.3",
3
+ "version": "1.3.5",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",