pb-sxp-ui 1.0.88 → 1.0.90

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 (43) hide show
  1. package/dist/index.cjs +151 -211
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +151 -211
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +4 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +4 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +154 -214
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +4 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/FormatImage.js +2 -7
  14. package/es/core/components/SxpPageRender/VideoWidget/index.js +39 -31
  15. package/es/core/components/SxpPageRender/index.js +20 -35
  16. package/es/materials/sxp/popup/AppointForm/index.js +1 -3
  17. package/es/materials/sxp/template/Appoint/index.js +7 -6
  18. package/es/materials/sxp/template/Commodity/index.js +7 -14
  19. package/es/materials/sxp/template/CommodityDiro/index.js +7 -14
  20. package/es/materials/sxp/template/CommodityDiroNew/index.js +7 -14
  21. package/es/materials/sxp/template/Link/index.js +5 -5
  22. package/es/materials/sxp/template/MultiCommodity/index.js +3 -6
  23. package/es/materials/sxp/template/MultiCommodityDiro/index.js +3 -6
  24. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +3 -6
  25. package/es/materials/sxp/template/components/EventProvider.js +1 -13
  26. package/es/materials/sxp/template/components/Img.d.ts +5 -3
  27. package/es/materials/sxp/template/components/Img.js +4 -3
  28. package/lib/core/components/SxpPageRender/FormatImage.js +2 -7
  29. package/lib/core/components/SxpPageRender/VideoWidget/index.js +39 -31
  30. package/lib/core/components/SxpPageRender/index.js +20 -35
  31. package/lib/materials/sxp/popup/AppointForm/index.js +1 -3
  32. package/lib/materials/sxp/template/Appoint/index.js +7 -6
  33. package/lib/materials/sxp/template/Commodity/index.js +7 -14
  34. package/lib/materials/sxp/template/CommodityDiro/index.js +7 -14
  35. package/lib/materials/sxp/template/CommodityDiroNew/index.js +7 -14
  36. package/lib/materials/sxp/template/Link/index.js +5 -5
  37. package/lib/materials/sxp/template/MultiCommodity/index.js +3 -6
  38. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +3 -6
  39. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +3 -6
  40. package/lib/materials/sxp/template/components/EventProvider.js +0 -12
  41. package/lib/materials/sxp/template/components/Img.d.ts +5 -3
  42. package/lib/materials/sxp/template/components/Img.js +4 -3
  43. package/package.json +2 -4
package/es/core/components/SxpPageRender/FormatImage.js CHANGED
@@ -1,20 +1,15 @@
1
1
  import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
2
- import { useSxpDataSource } from '../../../core/hooks';
3
2
  const FormatImage = forwardRef((props, ref) => {
4
3
  const { src, onLoad, style, className, loading } = props;
5
4
  const [imgSrc, setImgSrc] = useState();
6
- const { swiperRef } = useSxpDataSource();
7
5
  useImperativeHandle(ref, () => ({
8
6
  setSrc: (v) => {
9
7
  setImgSrc(v);
10
8
  }
11
9
  }));
12
10
  useEffect(() => {
13
- var _a, _b;
14
- const index = (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.activeIndex;
15
- if (index === 0 || index > 0)
16
- setImgSrc(src);
17
- }, [src, swiperRef]);
11
+ setImgSrc(src);
12
+ }, [src]);
18
13
  const imgRef = useRef(null);
19
14
  return (React.createElement(React.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
20
15
  React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
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 Hls from 'hls.js';
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();
@@ -45,7 +46,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
45
46
  useEffect(() => {
46
47
  if (!videoRef)
47
48
  return;
48
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.muted(muted);
49
+ videoRef.muted = muted;
49
50
  }, [muted, videoRef]);
50
51
  const handleEnded = useCallback(() => {
51
52
  if (!videoRef)
@@ -60,10 +61,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
60
61
  setIsLoadFinish(true);
61
62
  setIsPauseVideo(false);
62
63
  const item = data[index];
63
- if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration())) {
64
- videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) || 0;
65
- const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
66
- const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
64
+ if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration)) {
65
+ videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) || 0;
66
+ const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) !== null && _a !== void 0 ? _a : 0).toFixed(2);
67
+ const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) !== null && _b !== void 0 ? _b : 0).toFixed(2);
67
68
  const playType = isFirstPlay ? '0' : '1';
68
69
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
69
70
  eventInfo: {
@@ -87,21 +88,17 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
87
88
  var _a;
88
89
  if (!videoRef || firstFrameSrc || !blur)
89
90
  return;
90
- const videoDomRef = document.getElementById('player-container-id_html5_api');
91
- if (!videoDomRef)
92
- return;
93
- videoDomRef.style.objectFit = 'contain';
91
+ videoRef.style.objectFit = 'contain';
94
92
  if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !canvasRef.current || isBgColor)
95
93
  return;
96
94
  const setFrameImg = () => {
97
- const video = videoDomRef;
98
95
  const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
99
96
  const ctx = canvas.getContext('2d');
100
97
  const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
101
98
  const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
102
99
  canvas.height = targetHeight;
103
100
  canvas.width = targetWidth;
104
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
101
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(videoRef, 0, 0, canvas.width, canvas.height);
105
102
  setFirstFrameSrc(canvas.toDataURL());
106
103
  };
107
104
  setFrameImg();
@@ -114,15 +111,12 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
114
111
  return;
115
112
  handLoadeddata();
116
113
  }, [videoRef, handLoadeddata]);
117
- const handleCanplay = useCallback(() => {
118
- setIsLoadFinish(true);
119
- }, []);
120
114
  const handleClickVideo = useCallback((type) => () => {
121
115
  if (!videoRef)
122
116
  return;
123
117
  if (!isLoadFinish)
124
118
  return;
125
- const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
119
+ const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused;
126
120
  switch (type) {
127
121
  case 'start':
128
122
  if (!isPause)
@@ -154,10 +148,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
154
148
  if (activeIndex !== index)
155
149
  return;
156
150
  const item = data[index];
157
- const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
158
- const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
159
- if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) {
160
- const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) - videoStartTime.current).toFixed(2);
151
+ const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) !== null && _a !== void 0 ? _a : 0).toFixed(2);
152
+ const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) !== null && _b !== void 0 ? _b : 0).toFixed(2);
153
+ if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) {
154
+ const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) - videoStartTime.current).toFixed(2);
161
155
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
162
156
  eventInfo: {
163
157
  eventSubject: 'playOverVideo',
@@ -181,7 +175,19 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
181
175
  const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
182
176
  if (!videoSrc)
183
177
  return;
184
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
178
+ if (videoSrc.includes('.m3u8')) {
179
+ if (Hls.isSupported()) {
180
+ const hls = new Hls();
181
+ hls.loadSource(videoSrc);
182
+ hls.attachMedia(videoRef);
183
+ }
184
+ else {
185
+ videoRef.src = videoSrc;
186
+ }
187
+ }
188
+ else {
189
+ videoRef.src = videoSrc;
190
+ }
185
191
  setIsPauseVideo(false);
186
192
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
187
193
  const dom = document.querySelector('#player-container-id');
@@ -189,18 +195,20 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
189
195
  if (!dom && !dom2)
190
196
  return;
191
197
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
192
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
193
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
194
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
195
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('pause', handlePause);
196
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('ended', handleEnded);
198
+ videoRef.setAttribute('x5-playsinline', 'true');
199
+ videoRef.setAttribute('webkit-playsinline', 'true');
200
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadedmetadata', handleLoadedmetadata);
201
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
202
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
203
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
204
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handleEnded);
197
205
  return () => {
198
206
  dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
199
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadedmetadata', handleLoadedmetadata);
200
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadeddata', handLoadeddata);
201
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('playing', handlePlaying);
202
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('pause', handlePause);
203
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('ended', handleEnded);
207
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
208
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
209
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
210
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
211
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handleEnded);
204
212
  };
205
213
  }, [isActive, videoId, rec, videoRef]);
206
214
  useEffect(() => {
@@ -219,7 +227,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
219
227
  useEffect(() => {
220
228
  if (!isActive || !videoRef)
221
229
  return;
222
- const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
230
+ const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused;
223
231
  if (!isPause && openHashtag) {
224
232
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
225
233
  }
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -33,8 +33,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
33
33
  const [isShowMore, setIsShowMore] = useState(false);
34
34
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = useSxpDataSource();
35
35
  const { backMainFeed } = useEventReport();
36
- const [videoRef, setVideoRef] = useState(null);
37
- const playerRef = useRef();
36
+ const videoRef = useRef();
38
37
  const { productView } = useEventReport();
39
38
  const isShowFingerTip = useMemo(() => {
40
39
  return data.length > 0 && !loading && getFeUserId();
@@ -65,30 +64,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
65
64
  const firstRef = useRef();
66
65
  useEffect(() => {
67
66
  var _a, _b, _c, _d;
68
- if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
67
+ if (!firstRef.current && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
69
68
  firstRef.current = true;
70
- const player = TCPlayer('player-container-id', {
71
- licenseUrl,
72
- controls: false,
73
- loop: false,
74
- autoplay: true,
75
- muted: true,
76
- preload: 'auto',
77
- posterImage: false,
78
- bigPlayButton: true,
79
- sources: ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url)
80
- ? [
81
- {
82
- src: (_d = (_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.url
83
- }
84
- ]
85
- : []
86
- });
87
- player === null || player === void 0 ? void 0 : player.ready(() => {
88
- setVideoRef(player);
89
- });
69
+ if ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) {
70
+ videoRef.current.src = (_d = (_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.url;
71
+ }
90
72
  }
91
- }, [videoRef, licenseUrl, data]);
73
+ }, [videoRef, data]);
92
74
  useEffect(() => {
93
75
  var _a;
94
76
  const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
@@ -203,7 +185,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
203
185
  const renderContent = useCallback((rec, index) => {
204
186
  var _a, _b, _c, _d;
205
187
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
206
- return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
188
+ return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef.current }));
207
189
  }
208
190
  if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
209
191
  return (React.createElement(PictureGroup, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -229,7 +211,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
229
211
  tipText,
230
212
  resolver,
231
213
  schema,
232
- videoRef
214
+ videoRef.current
233
215
  ]);
234
216
  const onExpandableChange = useCallback((v) => {
235
217
  setIsShowMore(v);
@@ -383,14 +365,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
383
365
  }
384
366
  };
385
367
  const visList = useMemo(() => {
386
- const list = data === null || data === void 0 ? void 0 : data.map((item, index) => {
387
- if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
388
- return item;
389
- }
390
- else {
391
- return null;
392
- }
393
- });
368
+ var _a;
369
+ const list = activeIndex === 0
370
+ ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
371
+ : data === null || data === void 0 ? void 0 : data.map((item, index) => {
372
+ if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
373
+ return item;
374
+ }
375
+ else {
376
+ return null;
377
+ }
378
+ });
394
379
  return !waterFallData ? list.concat([{ loading: true }]) : list;
395
380
  }, [data, activeIndex, waterFallData]);
396
381
  const renderView = useMemo(() => {
@@ -454,7 +439,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
454
439
  renderView),
455
440
  React.createElement(WaterFall, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props)),
456
441
  React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
457
- React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
442
+ React.createElement("video", { ref: videoRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', preload: 'auto', controls: false, muted: true, style: {
458
443
  backgroundColor: 'transparent',
459
444
  width: '100%',
460
445
  height: '100%',
package/es/materials/sxp/popup/AppointForm/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { __awaiter, __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
3
  import React, { memo, useMemo, useRef, useState } from 'react';
4
- import { BetaSchemaForm } from '@ant-design/pro-components';
5
4
  import { cloneDeep, debounce } from 'lodash';
6
5
  import { useSxpDataSource } from '../../../../core/hooks';
7
6
  import './index.less';
@@ -81,8 +80,7 @@ const AppointForm = (_a) => {
81
80
  return (React.createElement("div", { className: 'pb-appoint-form' },
82
81
  React.createElement("div", { className: `pb-appoint-form-title ${css(Object.assign({}, textStyle))}` }, title),
83
82
  React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
84
- React.createElement("div", { className: 'pb-appoint-form-container' },
85
- React.createElement(BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
83
+ React.createElement("div", { className: 'pb-appoint-form-container' })),
86
84
  React.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
87
85
  React.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
88
86
  };
package/es/materials/sxp/template/Appoint/index.js CHANGED
@@ -3,14 +3,15 @@ import { css } from '@emotion/css';
3
3
  import React, { memo } from 'react';
4
4
  import EventProvider from '../components/EventProvider';
5
5
  import { useSxpDataSource } from '../../../../core/hooks';
6
+ import Img from '../components/Img';
6
7
  const Appoint = (_a) => {
7
- var _b, _c, _d, _e;
8
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
8
+ var _b, _c, _d, _e, _f, _g;
9
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
9
10
  const { sxpParameter } = useSxpDataSource();
10
11
  const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
11
- return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
12
- React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
13
- React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: 'cta image' })),
14
- React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
12
+ const src = (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image;
13
+ return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
14
+ React.createElement(Img, { src: src, rec: recData, item: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) !== null && _f !== void 0 ? _f : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
15
+ React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _g !== void 0 ? _g : 'Product Name')));
15
16
  };
16
17
  export default memo(Appoint);
package/es/materials/sxp/template/Commodity/index.js CHANGED
@@ -4,22 +4,15 @@ import React, { memo } from 'react';
4
4
  import EventProvider from '../components/EventProvider';
5
5
  import styles from './index.module.less';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
- import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
7
+ import Img from '../components/Img';
8
8
  const Commodity = (_a) => {
9
- var _b, _c, _d, _e, _f, _g, _h, _j;
10
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
9
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
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;
13
13
  const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
14
- return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
15
- React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
16
- React.createElement(FormatImage, { className: css({
17
- width: '100%',
18
- objectFit: 'cover',
19
- height: '100%',
20
- display: 'block',
21
- objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
22
- }), src: src })),
14
+ return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
15
+ React.createElement(Img, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
23
16
  React.createElement("div", { className: css({
24
17
  color: '#fff',
25
18
  display: 'flex',
@@ -28,7 +21,7 @@ const Commodity = (_a) => {
28
21
  width: '100%',
29
22
  overflow: 'hidden'
30
23
  }) },
31
- React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
32
- 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)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
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'))));
33
26
  };
34
27
  export default memo(Commodity);
package/es/materials/sxp/template/CommodityDiro/index.js CHANGED
@@ -4,22 +4,15 @@ import React, { memo } from 'react';
4
4
  import EventProvider from '../components/EventProvider';
5
5
  import styles from './index.module.less';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
- import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
7
+ import Img from '../components/Img';
8
8
  const CommodityDiro = (_a) => {
9
- var _b, _c, _d, _e, _f, _g, _h, _j;
10
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
9
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
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;
13
13
  const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
14
- return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
15
- React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
16
- React.createElement(FormatImage, { className: css({
17
- width: '100%',
18
- objectFit: 'cover',
19
- height: '100%',
20
- display: 'block',
21
- objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
22
- }), src: src })),
14
+ return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
15
+ React.createElement(Img, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
23
16
  React.createElement("div", { className: css({
24
17
  color: '#fff',
25
18
  display: 'flex',
@@ -28,7 +21,7 @@ const CommodityDiro = (_a) => {
28
21
  width: '100%',
29
22
  overflow: 'hidden'
30
23
  }) },
31
- React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
32
- React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
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', borderRadius: '25px', 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'))));
33
26
  };
34
27
  export default memo(CommodityDiro);
package/es/materials/sxp/template/CommodityDiroNew/index.js CHANGED
@@ -4,22 +4,15 @@ import React, { memo } from 'react';
4
4
  import EventProvider from '../components/EventProvider';
5
5
  import styles from './index.module.less';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
- import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
7
+ import Img from '../components/Img';
8
8
  const CommodityDiroNew = (_a) => {
9
- var _b, _c, _d, _e, _f, _g, _h, _j;
10
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
9
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
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;
13
13
  const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
14
- return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
15
- React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
16
- React.createElement(FormatImage, { className: css({
17
- width: '100%',
18
- objectFit: 'cover',
19
- height: '100%',
20
- display: 'block',
21
- objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
22
- }), src: src })),
14
+ return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
15
+ React.createElement(Img, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
23
16
  React.createElement("div", { className: css({
24
17
  color: '#fff',
25
18
  display: 'flex',
@@ -28,7 +21,7 @@ const CommodityDiroNew = (_a) => {
28
21
  width: '100%',
29
22
  overflow: 'hidden'
30
23
  }) },
31
- React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
32
- React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop now'))));
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({ 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'))));
33
26
  };
34
27
  export default memo(CommodityDiroNew);
package/es/materials/sxp/template/Link/index.js CHANGED
@@ -5,9 +5,9 @@ import EventProvider from '../components/EventProvider';
5
5
  import styles from './index.module.less';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
7
  import { useEventReport } from '../../../../core/hooks/useEventReport';
8
- import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
8
+ import Img from '../components/Img';
9
9
  const Link = (_a) => {
10
- var _b, _c, _d, _e, _f;
10
+ var _b, _c, _d, _e, _f, _g, _h;
11
11
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index"]);
12
12
  const { sxpParameter, bffEventReport } = useSxpDataSource();
13
13
  const { jumpToWeb } = useEventReport();
@@ -19,15 +19,15 @@ const Link = (_a) => {
19
19
  window.location.href = window.getJointUtmLink(cta.link);
20
20
  }
21
21
  };
22
+ const src = (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
22
23
  return (React.createElement(EventProvider, Object.assign({ index: index, rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { onClick: handleTo }),
23
- React.createElement("div", { className: css(Object.assign({ backgroundColor: '#f2f2f2', overflow: 'hidden', flexShrink: 0 }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
24
- React.createElement(FormatImage, { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image })),
24
+ React.createElement(Img, { src: src, rec: recData, item: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.bindProduct) !== null && _g !== void 0 ? _g : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
25
25
  React.createElement("div", { className: css({
26
26
  display: 'flex',
27
27
  alignItems: 'center',
28
28
  width: '100%',
29
29
  overflow: 'hidden'
30
30
  }) },
31
- React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle }, (_f = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _f !== void 0 ? _f : 'Product Name'))));
31
+ React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle }, (_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name'))));
32
32
  };
33
33
  export default memo(Link);
package/es/materials/sxp/template/MultiCommodity/index.js CHANGED
@@ -34,11 +34,8 @@ const MultiCommodity = (_a) => {
34
34
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
35
35
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
36
36
  var _a, _b, _c, _d, _e, _f, _g;
37
- return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
38
- React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
39
- React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
40
- objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
41
- } })),
37
+ return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
38
+ React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
42
39
  React.createElement("div", { className: css({
43
40
  color: '#fff',
44
41
  display: 'flex',
@@ -48,7 +45,7 @@ const MultiCommodity = (_a) => {
48
45
  overflow: 'hidden'
49
46
  }) },
50
47
  React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
51
- 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)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
48
+ 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)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))))));
52
49
  })));
53
50
  };
54
51
  export default memo(MultiCommodity);
package/es/materials/sxp/template/MultiCommodityDiro/index.js CHANGED
@@ -33,11 +33,8 @@ const MultiCommodityDiro = (_a) => {
33
33
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
34
34
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
35
35
  var _a, _b, _c, _d, _e, _f, _g;
36
- return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
37
- React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
38
- React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
39
- objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
40
- } })),
36
+ return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
37
+ React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
41
38
  React.createElement("div", { className: css({
42
39
  color: '#000',
43
40
  display: 'flex',
@@ -47,7 +44,7 @@ const MultiCommodityDiro = (_a) => {
47
44
  overflow: 'hidden'
48
45
  }) },
49
46
  React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
50
- React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
47
+ React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))))));
51
48
  })));
52
49
  };
53
50
  export default memo(MultiCommodityDiro);
package/es/materials/sxp/template/MultiCommodityDiroNew/index.js CHANGED
@@ -33,11 +33,8 @@ const MultiCommodityDiroNew = (_a) => {
33
33
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
34
34
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
35
35
  var _a, _b, _c, _d, _e, _f, _g;
36
- return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
37
- React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
38
- React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
39
- objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
40
- } })),
36
+ return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
37
+ React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
41
38
  React.createElement("div", { className: css({
42
39
  color: '#fff',
43
40
  display: 'flex',
@@ -48,7 +45,7 @@ const MultiCommodityDiroNew = (_a) => {
48
45
  lineHeight: '20px'
49
46
  }) },
50
47
  React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
51
- React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop now'))));
48
+ React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop now'))))));
52
49
  })));
53
50
  };
54
51
  export default memo(MultiCommodityDiroNew);
package/es/materials/sxp/template/components/EventProvider.js CHANGED
@@ -1,26 +1,14 @@
1
1
  import { __rest } from "tslib";
2
- import React, { memo, useEffect, useRef } from 'react';
2
+ import React, { memo, useRef } from 'react';
3
3
  import { throttle } from 'lodash';
4
- import useOnScreen from '../../../../core/hooks/useOnScreen';
5
4
  import { useEditor, useSxpDataSource } from '../../../../core/hooks';
6
5
  import { useEventReport } from '../../../../core/hooks/useEventReport';
7
6
  const EventProvider = (_a) => {
8
7
  var { rec, children, className, onClick, style, isExternalLink = false, index } = _a, props = __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index"]);
9
8
  const ref = useRef(null);
10
- const isOnScreen = useOnScreen(ref);
11
9
  const { popup } = useEditor();
12
10
  const { setPopupDetailData, ctaEvent } = useSxpDataSource();
13
11
  const { jumpToWeb } = useEventReport();
14
- useEffect(() => {
15
- var _a, _b;
16
- if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
17
- const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
18
- ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
19
- eventSubject: 'ctaExposure',
20
- eventDescription: 'The cta was shown to the user'
21
- }, rec, item, index);
22
- }
23
- }, [isOnScreen, ref, rec, ctaEvent, index]);
24
12
  const handleClick = throttle(() => {
25
13
  var _a, _b, _c, _d, _e, _f, _g, _h;
26
14
  const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;