pb-sxp-ui 1.0.92 → 1.0.94

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 +48 -16
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +48 -16
  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 +48 -16
  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/PictureGroup/Picture.js +1 -1
  14. package/es/core/components/SxpPageRender/VideoWidget/index.js +36 -5
  15. package/es/core/components/SxpPageRender/index.js +1 -1
  16. package/es/materials/sxp/template/Commodity/index.js +2 -2
  17. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +1 -1
  18. package/lib/core/components/SxpPageRender/VideoWidget/index.js +36 -5
  19. package/lib/core/components/SxpPageRender/index.js +1 -1
  20. package/lib/materials/sxp/template/Commodity/index.js +2 -2
  21. package/package.json +1 -1
package/es/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -36,6 +36,6 @@ const Picture = (props) => {
36
36
  transform: translateY,
37
37
  left: 0,
38
38
  right: 0
39
- } }))));
39
+ }, onLoad: onShowFirstImage }))));
40
40
  };
41
41
  export default Picture;
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -4,6 +4,7 @@ import { useIconLink } from '../useIconLink';
4
4
  import FormatImage from '../FormatImage';
5
5
  import { useSxpDataSource } from '../../../../core/hooks';
6
6
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
7
+ import loading_gif from './loading.gif';
7
8
  const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
8
9
  const [isPauseVideo, setIsPauseVideo] = useState(false);
9
10
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
@@ -13,6 +14,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
13
14
  const { isActive } = useSwiperSlide();
14
15
  const canvasRef = useRef(null);
15
16
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
17
+ const [waiting, setWaiting] = useState(false);
16
18
  const videoId = `pb-cache-video-${index}`;
17
19
  const videoEleRef = useRef(null);
18
20
  const blur = useMemo(() => {
@@ -57,6 +59,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
57
59
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
58
60
  if (!videoRef)
59
61
  return;
62
+ setWaiting(false);
60
63
  setIsLoadFinish(true);
61
64
  setIsPauseVideo(false);
62
65
  const item = data[index];
@@ -168,6 +171,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
168
171
  });
169
172
  }
170
173
  }, [data, index, bffEventReport, videoRef, activeIndex]);
174
+ const handleWaiting = useCallback(() => {
175
+ setWaiting(true);
176
+ }, []);
171
177
  useEffect(() => {
172
178
  if (!isActive || !videoRef)
173
179
  return;
@@ -186,7 +192,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
186
192
  else {
187
193
  videoRef.src = videoSrc;
188
194
  }
189
- setIsPauseVideo(false);
190
195
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
191
196
  const dom = document.querySelector('#player-container-id');
192
197
  const dom2 = document.querySelector('#player-container-id-copy');
@@ -201,14 +206,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
201
206
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
202
207
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
203
208
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('canplay', handlePlay);
209
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('waiting', handleWaiting);
204
210
  return () => {
211
+ setIsLoadFinish(false);
205
212
  dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
206
213
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
207
214
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
208
215
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
209
216
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
210
217
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
211
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
218
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
212
219
  };
213
220
  }, [isActive, videoId, rec, videoRef]);
214
221
  useEffect(() => {
@@ -256,8 +263,30 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
256
263
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
257
264
  return null;
258
265
  }
259
- return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
266
+ return (React.createElement("img", { style: {
267
+ position: 'absolute',
268
+ left: 0,
269
+ top: 0,
270
+ width: '100%',
271
+ height: '100%',
272
+ objectFit: 'cover'
273
+ }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
260
274
  }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
275
+ const renderLoading = useMemo(() => {
276
+ if (!waiting || !isLoadFinish)
277
+ return;
278
+ return (React.createElement("img", { style: {
279
+ position: 'absolute',
280
+ top: '50%',
281
+ left: 0,
282
+ right: 0,
283
+ transform: 'translateY(-100%)',
284
+ margin: 'auto',
285
+ width: '50px',
286
+ height: '50px',
287
+ objectFit: 'contain'
288
+ }, src: loading_gif, alt: 'placeholder image' }));
289
+ }, [waiting, isLoadFinish]);
261
290
  useEffect(() => {
262
291
  if (!videoRef)
263
292
  return;
@@ -276,7 +305,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
276
305
  return null;
277
306
  }
278
307
  return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
279
- !isBgColor && (React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
308
+ !isBgColor && isLoadFinish && (React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
280
309
  React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
281
310
  React.createElement("div", { style: {
282
311
  position: 'absolute',
@@ -290,7 +319,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
290
319
  React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
291
320
  React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
292
321
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: PAUSE_ICON }))),
293
- renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
322
+ renderPoster,
323
+ renderLoading)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
294
324
  position: 'relative',
295
325
  width: '100%',
296
326
  height,
@@ -298,6 +328,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
298
328
  }, onClick: handleClickVideo() },
299
329
  React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
300
330
  renderPoster,
331
+ renderLoading,
301
332
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'pause' })))));
302
333
  };
303
334
  export default memo(VideoWidget);
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -366,7 +366,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
366
366
  };
367
367
  const visList = useMemo(() => {
368
368
  var _a;
369
- const list = activeIndex === 0
369
+ const list = activeIndex === 0 && !waterFallData
370
370
  ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
371
371
  : data === null || data === void 0 ? void 0 : data.map((item, index) => {
372
372
  if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
package/es/materials/sxp/template/Commodity/index.js CHANGED
@@ -6,7 +6,7 @@ import styles from './index.module.less';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
7
  import Img from '../components/Img';
8
8
  const Commodity = (_a) => {
9
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
9
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
10
10
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
11
11
  const { sxpParameter } = useSxpDataSource();
12
12
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
@@ -22,6 +22,6 @@ const Commodity = (_a) => {
22
22
  overflow: 'hidden'
23
23
  }) },
24
24
  React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
25
- React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now'))));
25
+ React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now'))));
26
26
  };
27
27
  export default memo(Commodity);
package/lib/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -39,6 +39,6 @@ const Picture = (props) => {
39
39
  transform: translateY,
40
40
  left: 0,
41
41
  right: 0
42
- } }))));
42
+ }, onLoad: onShowFirstImage }))));
43
43
  };
44
44
  exports.default = Picture;
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -7,6 +7,7 @@ const useIconLink_1 = require("../useIconLink");
7
7
  const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
10
+ const loading_gif_1 = tslib_1.__importDefault(require("./loading.gif"));
10
11
  const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
11
12
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
12
13
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
@@ -16,6 +17,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
16
17
  const { isActive } = (0, react_2.useSwiperSlide)();
17
18
  const canvasRef = (0, react_1.useRef)(null);
18
19
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
20
+ const [waiting, setWaiting] = (0, react_1.useState)(false);
19
21
  const videoId = `pb-cache-video-${index}`;
20
22
  const videoEleRef = (0, react_1.useRef)(null);
21
23
  const blur = (0, react_1.useMemo)(() => {
@@ -60,6 +62,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
60
62
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
61
63
  if (!videoRef)
62
64
  return;
65
+ setWaiting(false);
63
66
  setIsLoadFinish(true);
64
67
  setIsPauseVideo(false);
65
68
  const item = data[index];
@@ -171,6 +174,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
171
174
  });
172
175
  }
173
176
  }, [data, index, bffEventReport, videoRef, activeIndex]);
177
+ const handleWaiting = (0, react_1.useCallback)(() => {
178
+ setWaiting(true);
179
+ }, []);
174
180
  (0, react_1.useEffect)(() => {
175
181
  if (!isActive || !videoRef)
176
182
  return;
@@ -189,7 +195,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
189
195
  else {
190
196
  videoRef.src = videoSrc;
191
197
  }
192
- setIsPauseVideo(false);
193
198
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
194
199
  const dom = document.querySelector('#player-container-id');
195
200
  const dom2 = document.querySelector('#player-container-id-copy');
@@ -204,14 +209,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
204
209
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
205
210
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
206
211
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('canplay', handlePlay);
212
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('waiting', handleWaiting);
207
213
  return () => {
214
+ setIsLoadFinish(false);
208
215
  dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
209
216
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
210
217
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
211
218
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
212
219
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
213
220
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
214
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
221
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
215
222
  };
216
223
  }, [isActive, videoId, rec, videoRef]);
217
224
  (0, react_1.useEffect)(() => {
@@ -259,8 +266,30 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
259
266
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
260
267
  return null;
261
268
  }
262
- return (react_1.default.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
269
+ return (react_1.default.createElement("img", { style: {
270
+ position: 'absolute',
271
+ left: 0,
272
+ top: 0,
273
+ width: '100%',
274
+ height: '100%',
275
+ objectFit: 'cover'
276
+ }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
263
277
  }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
278
+ const renderLoading = (0, react_1.useMemo)(() => {
279
+ if (!waiting || !isLoadFinish)
280
+ return;
281
+ return (react_1.default.createElement("img", { style: {
282
+ position: 'absolute',
283
+ top: '50%',
284
+ left: 0,
285
+ right: 0,
286
+ transform: 'translateY(-100%)',
287
+ margin: 'auto',
288
+ width: '50px',
289
+ height: '50px',
290
+ objectFit: 'contain'
291
+ }, src: loading_gif_1.default, alt: 'placeholder image' }));
292
+ }, [waiting, isLoadFinish]);
264
293
  (0, react_1.useEffect)(() => {
265
294
  if (!videoRef)
266
295
  return;
@@ -279,7 +308,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
279
308
  return null;
280
309
  }
281
310
  return (react_1.default.createElement(react_1.default.Fragment, null, blur ? (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
282
- !isBgColor && (react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
311
+ !isBgColor && isLoadFinish && (react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
283
312
  react_1.default.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
284
313
  react_1.default.createElement("div", { style: {
285
314
  position: 'absolute',
@@ -293,7 +322,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
293
322
  react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
294
323
  react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
295
324
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: PAUSE_ICON }))),
296
- renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
325
+ renderPoster,
326
+ renderLoading)) : (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
297
327
  position: 'relative',
298
328
  width: '100%',
299
329
  height,
@@ -301,6 +331,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
301
331
  }, onClick: handleClickVideo() },
302
332
  react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
303
333
  renderPoster,
334
+ renderLoading,
304
335
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'pause' })))));
305
336
  };
306
337
  exports.default = (0, react_1.memo)(VideoWidget);
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -369,7 +369,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
369
369
  };
370
370
  const visList = (0, react_1.useMemo)(() => {
371
371
  var _a;
372
- const list = activeIndex === 0
372
+ const list = activeIndex === 0 && !waterFallData
373
373
  ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
374
374
  : data === null || data === void 0 ? void 0 : data.map((item, index) => {
375
375
  if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
package/lib/materials/sxp/template/Commodity/index.js CHANGED
@@ -8,7 +8,7 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const Img_1 = tslib_1.__importDefault(require("../components/Img"));
10
10
  const Commodity = (_a) => {
11
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
11
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
12
12
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
13
13
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
14
14
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
@@ -24,6 +24,6 @@ const Commodity = (_a) => {
24
24
  overflow: 'hidden'
25
25
  }) },
26
26
  react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
27
- react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now'))));
27
+ react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now'))));
28
28
  };
29
29
  exports.default = (0, react_1.memo)(Commodity);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.92",
3
+ "version": "1.0.94",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",