pb-sxp-ui 1.0.78 → 1.0.79

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 (34) hide show
  1. package/dist/index.cjs +407 -38
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +187 -1
  4. package/dist/index.js +407 -38
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +407 -38
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/PictureGroup/Picture.d.ts +1 -0
  15. package/es/core/components/SxpPageRender/PictureGroup/Picture.js +2 -2
  16. package/es/core/components/SxpPageRender/PictureGroup/index.js +9 -5
  17. package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js +52 -37
  18. package/es/core/components/SxpPageRender/WaterFall/index.js +3 -2
  19. package/es/core/components/SxpPageRender/index.js +4 -1
  20. package/es/core/context/SxpDataSourceProvider.js +6 -0
  21. package/es/materials/sxp/HashTag/index.d.ts +2 -0
  22. package/es/materials/sxp/HashTag/settingRender.d.ts +7 -2
  23. package/es/materials/sxp/HashTag/settingRender.js +15 -0
  24. package/lib/core/components/SxpPageRender/PictureGroup/Picture.d.ts +1 -0
  25. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +2 -2
  26. package/lib/core/components/SxpPageRender/PictureGroup/index.js +8 -4
  27. package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +52 -37
  28. package/lib/core/components/SxpPageRender/WaterFall/index.js +3 -2
  29. package/lib/core/components/SxpPageRender/index.js +4 -1
  30. package/lib/core/context/SxpDataSourceProvider.js +6 -0
  31. package/lib/materials/sxp/HashTag/index.d.ts +2 -0
  32. package/lib/materials/sxp/HashTag/settingRender.d.ts +7 -2
  33. package/lib/materials/sxp/HashTag/settingRender.js +15 -0
  34. package/package.json +1 -1
package/es/core/components/SxpPageRender/PictureGroup/Picture.d.ts CHANGED
@@ -4,6 +4,7 @@ interface IPictureProps {
4
4
  src: string;
5
5
  height?: number;
6
6
  imgUrlsPostConfig?: postConfigType;
7
+ onShowFirstImage?: () => void;
7
8
  }
8
9
  declare const Picture: (props: IPictureProps) => React.JSX.Element;
9
10
  export default Picture;
package/es/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { useMemo } from 'react';
2
2
  import FormatImage from '../FormatImage';
3
3
  const Picture = (props) => {
4
- const { src, height, imgUrlsPostConfig } = props;
4
+ const { src, height, imgUrlsPostConfig, onShowFirstImage } = props;
5
5
  const blur = useMemo(() => {
6
6
  return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
7
7
  }, [imgUrlsPostConfig]);
@@ -26,7 +26,7 @@ const Picture = (props) => {
26
26
  return isBgColor && (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor) ? { backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor } : {};
27
27
  }, [imgUrlsPostConfig, isBgColor]);
28
28
  return (React.createElement("div", { style: Object.assign({ overflow: 'hidden', height, width: '100%', position: 'relative' }, bgStyle) },
29
- (!blur || !isBgColor) && (React.createElement(FormatImage, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
29
+ (!blur || !isBgColor) && (React.createElement(FormatImage, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle), onLoad: onShowFirstImage })),
30
30
  blur && (React.createElement(FormatImage, { src: src, style: {
31
31
  width: '100%',
32
32
  height: '100%',
package/es/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { memo, useEffect, useRef, useState } from 'react';
1
+ import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
2
2
  import { Autoplay, Pagination } from 'swiper/modules';
3
3
  import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
4
4
  import Picture from './Picture';
@@ -20,13 +20,17 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
20
20
  }
21
21
  }
22
22
  else {
23
- setIsLoad(true);
24
23
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
25
24
  }
26
25
  }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
27
- return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
28
- return (React.createElement(SwiperSlide, { key: url },
29
- React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
26
+ const showFirstImageFn = useCallback(() => {
27
+ if (!isLoad) {
28
+ setIsLoad(true);
29
+ }
30
+ }, [isLoad]);
31
+ return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
32
+ return (React.createElement(SwiperSlide, { key: index },
33
+ React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
30
34
  })));
31
35
  };
32
36
  export default memo(PictureGroup);
package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js CHANGED
@@ -2,8 +2,10 @@ import { __rest } from "tslib";
2
2
  import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
3
3
  import { useSxpDataSource } from '../../../../core/hooks';
4
4
  import './WaterfallList.less';
5
+ import previewData from './preview.json';
6
+ import FormatImage from '../FormatImage';
5
7
  const WaterfallFlowItem = (props) => {
6
- const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, lineClamp } = props;
8
+ const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
7
9
  const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
8
10
  const [showVideo, setShowVideo] = useState(false);
9
11
  const [isLoading, setIsLoading] = useState(false);
@@ -12,23 +14,20 @@ const WaterfallFlowItem = (props) => {
12
14
  width: 1
13
15
  });
14
16
  const imgDom = useRef(null);
17
+ const ref = useRef(null);
15
18
  const videoDom = useRef(null);
16
19
  const canvasRef = useRef(null);
17
20
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
18
21
  const src = useMemo(() => {
19
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
22
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
20
23
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
21
24
  return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
22
25
  }
23
- else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.url) {
24
- setShowVideo(true);
25
- return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
26
+ else if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.imgUrls) === null || _d === void 0 ? void 0 : _d.length) {
27
+ return (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f[0];
26
28
  }
27
- else if ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f.length) {
28
- return (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.imgUrls) === null || _h === void 0 ? void 0 : _h[0];
29
- }
30
- else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
31
- return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
29
+ else if ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.homePage) === null || _h === void 0 ? void 0 : _h.length) {
30
+ return (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k[0];
32
31
  }
33
32
  else {
34
33
  return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
@@ -68,7 +67,7 @@ const WaterfallFlowItem = (props) => {
68
67
  }
69
68
  }, [rec]);
70
69
  useEffect(() => {
71
- if (imgDom.current === null || src === '' || isImgShow === false) {
70
+ if (imgDom.current === null || src === '') {
72
71
  return;
73
72
  }
74
73
  const img = new Image();
@@ -85,14 +84,14 @@ const WaterfallFlowItem = (props) => {
85
84
  });
86
85
  setIsLoading(true);
87
86
  };
88
- imgDom.current.src = img.src;
87
+ imgDom.current.setSrc(img.src);
89
88
  }, [src, showVideo, firstFrameSrc, isImgShow]);
90
89
  useEffect(() => {
91
90
  const height = imgInfo.height * (unitWidth / imgInfo.width);
92
91
  if (isLoading) {
93
- sizeChange(height + 76, index);
92
+ sizeChange(height + 76 + space, index);
94
93
  }
95
- }, [imgInfo, index, unitWidth, isLoading]);
94
+ }, [imgInfo, index, unitWidth, isLoading, space]);
96
95
  const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
97
96
  const aspectRatio = videoWidth / videoHeight;
98
97
  const targetHeight = targetWidth / aspectRatio;
@@ -130,22 +129,20 @@ const WaterfallFlowItem = (props) => {
130
129
  setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
131
130
  }, 0);
132
131
  };
133
- return (React.createElement("div", { style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
132
+ return (React.createElement("div", { ref: ref, style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
134
133
  React.createElement("div", { className: 'waterFallList-content-listItem-picture' },
135
134
  showVideo && (React.createElement("div", { style: { display: 'none' } },
136
135
  React.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
137
136
  React.createElement("canvas", { ref: canvasRef }))),
138
- React.createElement("img", { className: 'waterFallList-content-listItem-picture-img', loading: 'lazy', ref: imgDom, style: {
139
- visibility: isLoading ? 'visible' : 'hidden'
140
- } })),
137
+ React.createElement(FormatImage, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
141
138
  React.createElement("div", { className: 'waterFallList-content-listItem-info' },
142
139
  React.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
143
140
  React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
144
141
  };
145
142
  export default function WaterfallList(_a) {
146
- var _b, _c, _d, _e, _f, _g, _h;
143
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
147
144
  var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
148
- const { waterFallData, getRecommendVideos, loadingImage } = useSxpDataSource();
145
+ const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
149
146
  const scrollParent = useRef(null);
150
147
  const [scrollTop, setScrollTop] = useState(0);
151
148
  const [data, setData] = useState();
@@ -155,6 +152,7 @@ export default function WaterfallList(_a) {
155
152
  const heightList = [170, 230, 300];
156
153
  const [isLoadingData, setIsLoadingData] = useState(false);
157
154
  const [list, setList] = useState([]);
155
+ const buttonRef = useRef();
158
156
  const createRandomNum = useCallback((min, max) => {
159
157
  return Math.floor(Math.random() * (max - min + 1)) + min;
160
158
  }, []);
@@ -238,19 +236,28 @@ export default function WaterfallList(_a) {
238
236
  styleListRef.current = getStyleList();
239
237
  }, [unitWidth, rowsNum, list]);
240
238
  useEffect(() => {
239
+ var _a, _b;
241
240
  setIsLoadingData(true);
242
241
  waterFallData &&
243
242
  (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
244
243
  hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
245
244
  'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
246
- 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
245
+ 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
246
+ defaultSize: hashTagSize,
247
+ maxSize: hashTagSize
247
248
  }).then((res) => {
248
249
  var _a, _b;
249
250
  setData(res);
250
251
  setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
251
252
  setIsLoadingData(false);
252
253
  }));
253
- }, [waterFallData, getRecommendVideos]);
254
+ if (isOpenHashTag) {
255
+ const res = previewData;
256
+ setData(res);
257
+ setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
258
+ setIsLoadingData(false);
259
+ }
260
+ }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
254
261
  const onResize = useCallback(() => {
255
262
  if (waterfallFlowDom.current === null) {
256
263
  return;
@@ -270,7 +277,7 @@ export default function WaterfallList(_a) {
270
277
  return () => {
271
278
  resizeObserver.disconnect();
272
279
  };
273
- }, []);
280
+ }, [onResize]);
274
281
  const loadMoreData = useCallback(() => {
275
282
  setIsLoadingData(true);
276
283
  waterFallData &&
@@ -302,18 +309,26 @@ export default function WaterfallList(_a) {
302
309
  window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
303
310
  }
304
311
  };
305
- return (React.createElement(React.Fragment, null,
306
- React.createElement("div", { hidden: !isLoadingData, style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
307
- React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })),
308
- React.createElement("div", { className: 'waterFallList', hidden: isLoadingData },
309
- React.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent, style: {
310
- bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
311
- } },
312
- React.createElement("div", { className: 'waterFallList-info', style: (_c = props === null || props === void 0 ? void 0 : props.textStyles) === null || _c === void 0 ? void 0 : _c.hashTagDesc }, (_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.info),
313
- React.createElement("div", { hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link), className: 'waterFallList-collection', onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
314
- React.createElement("div", { className: 'waterFallList-content', ref: waterfallFlowDom }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
315
- return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + scrollParent.current.clientHeight, style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
316
- }))),
317
- React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) },
318
- React.createElement("button", { className: 'waterFallList-bottom-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection')))));
312
+ return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
313
+ React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'waterFallList', ref: waterfallFlowDom },
314
+ React.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent },
315
+ React.createElement("div", { className: 'waterFallList-info', style: (_b = props === null || props === void 0 ? void 0 : props.textStyles) === null || _b === void 0 ? void 0 : _b.hashTagDesc }, (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.info),
316
+ React.createElement("div", { hidden: !((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.link), className: 'waterFallList-collection', style: Object.assign({}, (_e = props === null || props === void 0 ? void 0 : props.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagLink), onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
317
+ React.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
318
+ list.map((item, ind) => {
319
+ var _a;
320
+ return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
321
+ }),
322
+ React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
323
+ position: 'absolute',
324
+ width: '100%',
325
+ transform: `translate(0px,${(_m = ((_j = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_h = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _h === void 0 ? void 0 : _h.length) - 1]) === null || _j === void 0 ? void 0 : _j.top) +
326
+ ((_l = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_k = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _k === void 0 ? void 0 : _k.length) - 1]) === null || _l === void 0 ? void 0 : _l.height)) !== null && _m !== void 0 ? _m : 0}px)`,
327
+ height: ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link)
328
+ ? ((_p = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _p === void 0 ? void 0 : _p.offsetHeight) || ((_q = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _q === void 0 ? void 0 : _q.height) || '100px'
329
+ : 0
330
+ } }))),
331
+ React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
332
+ React.createElement("div", { ref: buttonRef, hidden: !((_s = data === null || data === void 0 ? void 0 : data.tag) === null || _s === void 0 ? void 0 : _s.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
333
+ React.createElement("button", { className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.linkTitle) || 'Shop the collection'))))));
319
334
  }
package/es/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -3,8 +3,9 @@ import * as ReactDOM from 'react-dom';
3
3
  import './index.less';
4
4
  import { isEqual } from 'lodash';
5
5
  import Navbar from '../Navbar';
6
- import WaterfallList from './List';
6
+ import WaterfallList from './WaterfallList';
7
7
  import left from './left.png';
8
+ import List from './List';
8
9
  import { useSxpDataSource } from '../../../../core/hooks';
9
10
  const WaterFall = (props) => {
10
11
  var _a;
@@ -96,6 +97,6 @@ const WaterFall = (props) => {
96
97
  display: openHashtag ? 'block' : 'none'
97
98
  } },
98
99
  React.createElement(Navbar, { icon: left, styles: { top: '32px' }, textStyle: (_a = props === null || props === void 0 ? void 0 : props.textStyles) === null || _a === void 0 ? void 0 : _a.hashTagTitle, onClose: handleClose }),
99
- React.createElement(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props))), modalEleRef.current);
100
+ (props === null || props === void 0 ? void 0 : props.isWaterfallFlow) ? (React.createElement(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props))) : (React.createElement(List, Object.assign({ reportTagsView: reportTagsView }, props)))), modalEleRef.current);
100
101
  };
101
102
  export default memo(WaterFall);
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -41,6 +41,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
41
41
  return data.length > 0 && !loading && getFeUserId();
42
42
  }, [data, loading]);
43
43
  const handleH5EnterLink = useCallback(() => {
44
+ var _a, _b;
44
45
  if (data.length <= 0) {
45
46
  return;
46
47
  }
@@ -61,7 +62,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
61
62
  utmId: getVal('utm_id'),
62
63
  utmContent: getVal('utm_content'),
63
64
  enterTime: `${Date.now()}`,
64
- requestId: null
65
+ requestId: null,
66
+ enterUrl: (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : '',
67
+ clSource: getVal('cl_sourc')
65
68
  }
66
69
  });
67
70
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -206,6 +206,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
206
206
  setCacheRtcList((_b = data === null || data === void 0 ? void 0 : data.recList) !== null && _b !== void 0 ? _b : []);
207
207
  })
208
208
  .finally(() => {
209
+ bffEventReport({
210
+ eventInfo: {
211
+ eventSubject: 'apiRequest',
212
+ eventDescription: 'api request succeed'
213
+ }
214
+ });
209
215
  setLoading(false);
210
216
  isInit.current = true;
211
217
  });
package/es/materials/sxp/HashTag/index.d.ts CHANGED
@@ -11,6 +11,8 @@ export interface IHashTagProps {
11
11
  price: CSSProperties;
12
12
  };
13
13
  buttonBgStyle: CSSProperties;
14
+ showBanner?: boolean;
15
+ isWaterfallFlow?: boolean;
14
16
  }
15
17
  declare const _default: React.NamedExoticComponent<IHashTagProps>;
16
18
  export default _default;
package/es/materials/sxp/HashTag/settingRender.d.ts CHANGED
@@ -1,11 +1,16 @@
1
1
  declare const _default: ({
2
2
  title: string;
3
- child: {
3
+ child: ({
4
4
  type: string;
5
5
  label: string;
6
6
  name: string[];
7
7
  addonAfter: string;
8
- }[];
8
+ } | {
9
+ type: string;
10
+ label: string;
11
+ name: string[];
12
+ addonAfter?: undefined;
13
+ })[];
9
14
  } | {
10
15
  title: string;
11
16
  child: {
package/es/materials/sxp/HashTag/settingRender.js CHANGED
@@ -1,6 +1,16 @@
1
1
  var _a, _b;
2
2
  import { fontOptions } from '../defaultSetting';
3
3
  export default [
4
+ {
5
+ title: 'Banner',
6
+ child: [
7
+ {
8
+ type: 'Switch',
9
+ label: 'Banner图开关',
10
+ name: ['props', 'showBanner']
11
+ }
12
+ ]
13
+ },
4
14
  {
5
15
  title: '卡片样式',
6
16
  child: [
@@ -9,6 +19,11 @@ export default [
9
19
  label: '上下边距',
10
20
  name: ['props', 'space'],
11
21
  addonAfter: 'px'
22
+ },
23
+ {
24
+ type: 'Switch',
25
+ label: '固定宽高',
26
+ name: ['props', 'isWaterfallFlow']
12
27
  }
13
28
  ]
14
29
  },
package/lib/core/components/SxpPageRender/PictureGroup/Picture.d.ts CHANGED
@@ -4,6 +4,7 @@ interface IPictureProps {
4
4
  src: string;
5
5
  height?: number;
6
6
  imgUrlsPostConfig?: postConfigType;
7
+ onShowFirstImage?: () => void;
7
8
  }
8
9
  declare const Picture: (props: IPictureProps) => React.JSX.Element;
9
10
  export default Picture;
package/lib/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
6
6
  const Picture = (props) => {
7
- const { src, height, imgUrlsPostConfig } = props;
7
+ const { src, height, imgUrlsPostConfig, onShowFirstImage } = props;
8
8
  const blur = (0, react_1.useMemo)(() => {
9
9
  return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
10
10
  }, [imgUrlsPostConfig]);
@@ -29,7 +29,7 @@ const Picture = (props) => {
29
29
  return isBgColor && (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor) ? { backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor } : {};
30
30
  }, [imgUrlsPostConfig, isBgColor]);
31
31
  return (react_1.default.createElement("div", { style: Object.assign({ overflow: 'hidden', height, width: '100%', position: 'relative' }, bgStyle) },
32
- (!blur || !isBgColor) && (react_1.default.createElement(FormatImage_1.default, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
32
+ (!blur || !isBgColor) && (react_1.default.createElement(FormatImage_1.default, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle), onLoad: onShowFirstImage })),
33
33
  blur && (react_1.default.createElement(FormatImage_1.default, { src: src, style: {
34
34
  width: '100%',
35
35
  height: '100%',
package/lib/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -23,13 +23,17 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
23
23
  }
24
24
  }
25
25
  else {
26
- setIsLoad(true);
27
26
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
28
27
  }
29
28
  }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
30
- return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
31
- return (react_1.default.createElement(react_2.SwiperSlide, { key: url },
32
- react_1.default.createElement(Picture_1.default, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
29
+ const showFirstImageFn = (0, react_1.useCallback)(() => {
30
+ if (!isLoad) {
31
+ setIsLoad(true);
32
+ }
33
+ }, [isLoad]);
34
+ return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
35
+ return (react_1.default.createElement(react_2.SwiperSlide, { key: index },
36
+ react_1.default.createElement(Picture_1.default, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
33
37
  })));
34
38
  };
35
39
  exports.default = (0, react_1.memo)(PictureGroup);
package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js CHANGED
@@ -4,8 +4,10 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const hooks_1 = require("../../../../core/hooks");
6
6
  require("./WaterfallList.less");
7
+ const preview_json_1 = tslib_1.__importDefault(require("./preview.json"));
8
+ const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
7
9
  const WaterfallFlowItem = (props) => {
8
- const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, lineClamp } = props;
10
+ const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
9
11
  const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = (0, hooks_1.useSxpDataSource)();
10
12
  const [showVideo, setShowVideo] = (0, react_1.useState)(false);
11
13
  const [isLoading, setIsLoading] = (0, react_1.useState)(false);
@@ -14,23 +16,20 @@ const WaterfallFlowItem = (props) => {
14
16
  width: 1
15
17
  });
16
18
  const imgDom = (0, react_1.useRef)(null);
19
+ const ref = (0, react_1.useRef)(null);
17
20
  const videoDom = (0, react_1.useRef)(null);
18
21
  const canvasRef = (0, react_1.useRef)(null);
19
22
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
20
23
  const src = (0, react_1.useMemo)(() => {
21
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
24
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
22
25
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
23
26
  return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
24
27
  }
25
- else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.url) {
26
- setShowVideo(true);
27
- return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
28
+ else if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.imgUrls) === null || _d === void 0 ? void 0 : _d.length) {
29
+ return (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f[0];
28
30
  }
29
- else if ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f.length) {
30
- return (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.imgUrls) === null || _h === void 0 ? void 0 : _h[0];
31
- }
32
- else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
33
- return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
31
+ else if ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.homePage) === null || _h === void 0 ? void 0 : _h.length) {
32
+ return (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k[0];
34
33
  }
35
34
  else {
36
35
  return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
@@ -70,7 +69,7 @@ const WaterfallFlowItem = (props) => {
70
69
  }
71
70
  }, [rec]);
72
71
  (0, react_1.useEffect)(() => {
73
- if (imgDom.current === null || src === '' || isImgShow === false) {
72
+ if (imgDom.current === null || src === '') {
74
73
  return;
75
74
  }
76
75
  const img = new Image();
@@ -87,14 +86,14 @@ const WaterfallFlowItem = (props) => {
87
86
  });
88
87
  setIsLoading(true);
89
88
  };
90
- imgDom.current.src = img.src;
89
+ imgDom.current.setSrc(img.src);
91
90
  }, [src, showVideo, firstFrameSrc, isImgShow]);
92
91
  (0, react_1.useEffect)(() => {
93
92
  const height = imgInfo.height * (unitWidth / imgInfo.width);
94
93
  if (isLoading) {
95
- sizeChange(height + 76, index);
94
+ sizeChange(height + 76 + space, index);
96
95
  }
97
- }, [imgInfo, index, unitWidth, isLoading]);
96
+ }, [imgInfo, index, unitWidth, isLoading, space]);
98
97
  const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
99
98
  const aspectRatio = videoWidth / videoHeight;
100
99
  const targetHeight = targetWidth / aspectRatio;
@@ -132,22 +131,20 @@ const WaterfallFlowItem = (props) => {
132
131
  setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
133
132
  }, 0);
134
133
  };
135
- return (react_1.default.createElement("div", { style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
134
+ return (react_1.default.createElement("div", { ref: ref, style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
136
135
  react_1.default.createElement("div", { className: 'waterFallList-content-listItem-picture' },
137
136
  showVideo && (react_1.default.createElement("div", { style: { display: 'none' } },
138
137
  react_1.default.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
139
138
  react_1.default.createElement("canvas", { ref: canvasRef }))),
140
- react_1.default.createElement("img", { className: 'waterFallList-content-listItem-picture-img', loading: 'lazy', ref: imgDom, style: {
141
- visibility: isLoading ? 'visible' : 'hidden'
142
- } })),
139
+ react_1.default.createElement(FormatImage_1.default, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
143
140
  react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info' },
144
141
  react_1.default.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
145
142
  react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
146
143
  };
147
144
  function WaterfallList(_a) {
148
- var _b, _c, _d, _e, _f, _g, _h;
145
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
149
146
  var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
150
- const { waterFallData, getRecommendVideos, loadingImage } = (0, hooks_1.useSxpDataSource)();
147
+ const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
151
148
  const scrollParent = (0, react_1.useRef)(null);
152
149
  const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
153
150
  const [data, setData] = (0, react_1.useState)();
@@ -157,6 +154,7 @@ function WaterfallList(_a) {
157
154
  const heightList = [170, 230, 300];
158
155
  const [isLoadingData, setIsLoadingData] = (0, react_1.useState)(false);
159
156
  const [list, setList] = (0, react_1.useState)([]);
157
+ const buttonRef = (0, react_1.useRef)();
160
158
  const createRandomNum = (0, react_1.useCallback)((min, max) => {
161
159
  return Math.floor(Math.random() * (max - min + 1)) + min;
162
160
  }, []);
@@ -240,19 +238,28 @@ function WaterfallList(_a) {
240
238
  styleListRef.current = getStyleList();
241
239
  }, [unitWidth, rowsNum, list]);
242
240
  (0, react_1.useEffect)(() => {
241
+ var _a, _b;
243
242
  setIsLoadingData(true);
244
243
  waterFallData &&
245
244
  (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
246
245
  hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
247
246
  'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
248
- 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
247
+ 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
248
+ defaultSize: hashTagSize,
249
+ maxSize: hashTagSize
249
250
  }).then((res) => {
250
251
  var _a, _b;
251
252
  setData(res);
252
253
  setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
253
254
  setIsLoadingData(false);
254
255
  }));
255
- }, [waterFallData, getRecommendVideos]);
256
+ if (isOpenHashTag) {
257
+ const res = preview_json_1.default;
258
+ setData(res);
259
+ setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
260
+ setIsLoadingData(false);
261
+ }
262
+ }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
256
263
  const onResize = (0, react_1.useCallback)(() => {
257
264
  if (waterfallFlowDom.current === null) {
258
265
  return;
@@ -272,7 +279,7 @@ function WaterfallList(_a) {
272
279
  return () => {
273
280
  resizeObserver.disconnect();
274
281
  };
275
- }, []);
282
+ }, [onResize]);
276
283
  const loadMoreData = (0, react_1.useCallback)(() => {
277
284
  setIsLoadingData(true);
278
285
  waterFallData &&
@@ -304,19 +311,27 @@ function WaterfallList(_a) {
304
311
  window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
305
312
  }
306
313
  };
307
- return (react_1.default.createElement(react_1.default.Fragment, null,
308
- react_1.default.createElement("div", { hidden: !isLoadingData, style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
309
- react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })),
310
- react_1.default.createElement("div", { className: 'waterFallList', hidden: isLoadingData },
311
- react_1.default.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent, style: {
312
- bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
313
- } },
314
- react_1.default.createElement("div", { className: 'waterFallList-info', style: (_c = props === null || props === void 0 ? void 0 : props.textStyles) === null || _c === void 0 ? void 0 : _c.hashTagDesc }, (_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.info),
315
- react_1.default.createElement("div", { hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link), className: 'waterFallList-collection', onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
316
- react_1.default.createElement("div", { className: 'waterFallList-content', ref: waterfallFlowDom }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
317
- return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + scrollParent.current.clientHeight, style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
318
- }))),
319
- react_1.default.createElement("div", { className: 'waterFallList-bottom', hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) },
320
- react_1.default.createElement("button", { className: 'waterFallList-bottom-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection')))));
314
+ return (react_1.default.createElement(react_1.default.Fragment, null, isLoadingData ? (react_1.default.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
315
+ react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (react_1.default.createElement("div", { className: 'waterFallList', ref: waterfallFlowDom },
316
+ react_1.default.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent },
317
+ react_1.default.createElement("div", { className: 'waterFallList-info', style: (_b = props === null || props === void 0 ? void 0 : props.textStyles) === null || _b === void 0 ? void 0 : _b.hashTagDesc }, (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.info),
318
+ react_1.default.createElement("div", { hidden: !((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.link), className: 'waterFallList-collection', style: Object.assign({}, (_e = props === null || props === void 0 ? void 0 : props.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagLink), onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
319
+ react_1.default.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
320
+ list.map((item, ind) => {
321
+ var _a;
322
+ return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
323
+ }),
324
+ react_1.default.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
325
+ position: 'absolute',
326
+ width: '100%',
327
+ transform: `translate(0px,${(_m = ((_j = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_h = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _h === void 0 ? void 0 : _h.length) - 1]) === null || _j === void 0 ? void 0 : _j.top) +
328
+ ((_l = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_k = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _k === void 0 ? void 0 : _k.length) - 1]) === null || _l === void 0 ? void 0 : _l.height)) !== null && _m !== void 0 ? _m : 0}px)`,
329
+ height: ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link)
330
+ ? ((_p = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _p === void 0 ? void 0 : _p.offsetHeight) || ((_q = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _q === void 0 ? void 0 : _q.height) || '100px'
331
+ : 0
332
+ } }))),
333
+ react_1.default.createElement("div", { className: 'waterFallList-bottom', hidden: !((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
334
+ react_1.default.createElement("div", { ref: buttonRef, hidden: !((_s = data === null || data === void 0 ? void 0 : data.tag) === null || _s === void 0 ? void 0 : _s.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
335
+ react_1.default.createElement("button", { className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.linkTitle) || 'Shop the collection'))))));
321
336
  }
322
337
  exports.default = WaterfallList;