pb-sxp-ui 1.0.75 → 1.0.77

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 (26) hide show
  1. package/dist/index.cjs +293 -103
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +95 -27
  4. package/dist/index.js +293 -103
  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 +293 -103
  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/WaterFall/WaterfallList.js +49 -35
  15. package/es/core/components/SxpPageRender/WaterFall/index.js +1 -1
  16. package/es/core/components/SxpPageRender/index.js +8 -6
  17. package/es/materials/sxp/HashTag/index.d.ts +2 -0
  18. package/es/materials/sxp/HashTag/settingRender.d.ts +7 -2
  19. package/es/materials/sxp/HashTag/settingRender.js +15 -0
  20. package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +49 -35
  21. package/lib/core/components/SxpPageRender/WaterFall/index.js +2 -2
  22. package/lib/core/components/SxpPageRender/index.js +8 -6
  23. package/lib/materials/sxp/HashTag/index.d.ts +2 -0
  24. package/lib/materials/sxp/HashTag/settingRender.d.ts +7 -2
  25. package/lib/materials/sxp/HashTag/settingRender.js +15 -0
  26. package/package.json +1 -1
package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js CHANGED
@@ -2,8 +2,9 @@ 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';
5
6
  const WaterfallFlowItem = (props) => {
6
- const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, lineClamp } = props;
7
+ const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
7
8
  const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
8
9
  const [showVideo, setShowVideo] = useState(false);
9
10
  const [isLoading, setIsLoading] = useState(false);
@@ -12,23 +13,20 @@ const WaterfallFlowItem = (props) => {
12
13
  width: 1
13
14
  });
14
15
  const imgDom = useRef(null);
16
+ const ref = useRef(null);
15
17
  const videoDom = useRef(null);
16
18
  const canvasRef = useRef(null);
17
19
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
18
20
  const src = useMemo(() => {
19
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
21
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
20
22
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
21
23
  return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
22
24
  }
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;
25
+ 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) {
26
+ 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
27
  }
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];
28
+ 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) {
29
+ 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
30
  }
33
31
  else {
34
32
  return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
@@ -90,9 +88,9 @@ const WaterfallFlowItem = (props) => {
90
88
  useEffect(() => {
91
89
  const height = imgInfo.height * (unitWidth / imgInfo.width);
92
90
  if (isLoading) {
93
- sizeChange(height + 76, index);
91
+ sizeChange(height + 76 + space, index);
94
92
  }
95
- }, [imgInfo, index, unitWidth, isLoading]);
93
+ }, [imgInfo, index, unitWidth, isLoading, space]);
96
94
  const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
97
95
  const aspectRatio = videoWidth / videoHeight;
98
96
  const targetHeight = targetWidth / aspectRatio;
@@ -130,22 +128,20 @@ const WaterfallFlowItem = (props) => {
130
128
  setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
131
129
  }, 0);
132
130
  };
133
- return (React.createElement("div", { style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
131
+ return (React.createElement("div", { ref: ref, style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
134
132
  React.createElement("div", { className: 'waterFallList-content-listItem-picture' },
135
133
  showVideo && (React.createElement("div", { style: { display: 'none' } },
136
134
  React.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
137
135
  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
- } })),
136
+ React.createElement("img", { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
141
137
  React.createElement("div", { className: 'waterFallList-content-listItem-info' },
142
138
  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
139
  React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
144
140
  };
145
141
  export default function WaterfallList(_a) {
146
- var _b, _c, _d, _e, _f, _g, _h;
142
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
147
143
  var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
148
- const { waterFallData, getRecommendVideos, loadingImage } = useSxpDataSource();
144
+ const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
149
145
  const scrollParent = useRef(null);
150
146
  const [scrollTop, setScrollTop] = useState(0);
151
147
  const [data, setData] = useState();
@@ -155,6 +151,7 @@ export default function WaterfallList(_a) {
155
151
  const heightList = [170, 230, 300];
156
152
  const [isLoadingData, setIsLoadingData] = useState(false);
157
153
  const [list, setList] = useState([]);
154
+ const buttonRef = useRef();
158
155
  const createRandomNum = useCallback((min, max) => {
159
156
  return Math.floor(Math.random() * (max - min + 1)) + min;
160
157
  }, []);
@@ -238,19 +235,28 @@ export default function WaterfallList(_a) {
238
235
  styleListRef.current = getStyleList();
239
236
  }, [unitWidth, rowsNum, list]);
240
237
  useEffect(() => {
238
+ var _a, _b;
241
239
  setIsLoadingData(true);
242
240
  waterFallData &&
243
241
  (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
244
242
  hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
245
243
  'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
246
- 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
244
+ 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
245
+ defaultSize: hashTagSize,
246
+ maxSize: hashTagSize
247
247
  }).then((res) => {
248
248
  var _a, _b;
249
249
  setData(res);
250
250
  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
251
  setIsLoadingData(false);
252
252
  }));
253
- }, [waterFallData, getRecommendVideos]);
253
+ if (isOpenHashTag) {
254
+ const res = previewData;
255
+ setData(res);
256
+ 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 : []);
257
+ setIsLoadingData(false);
258
+ }
259
+ }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
254
260
  const onResize = useCallback(() => {
255
261
  if (waterfallFlowDom.current === null) {
256
262
  return;
@@ -270,7 +276,7 @@ export default function WaterfallList(_a) {
270
276
  return () => {
271
277
  resizeObserver.disconnect();
272
278
  };
273
- }, []);
279
+ }, [onResize]);
274
280
  const loadMoreData = useCallback(() => {
275
281
  setIsLoadingData(true);
276
282
  waterFallData &&
@@ -302,18 +308,26 @@ export default function WaterfallList(_a) {
302
308
  window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
303
309
  }
304
310
  };
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')))));
311
+ return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
312
+ React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'waterFallList', ref: waterfallFlowDom },
313
+ React.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent },
314
+ 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),
315
+ 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'),
316
+ React.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
317
+ list.map((item, ind) => {
318
+ var _a;
319
+ 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)));
320
+ }),
321
+ React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
322
+ position: 'absolute',
323
+ width: '100%',
324
+ 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) +
325
+ ((_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)`,
326
+ height: ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link)
327
+ ? ((_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'
328
+ : 0
329
+ } }))),
330
+ 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 }),
331
+ 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' }) },
332
+ 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
333
  }
package/es/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -3,7 +3,7 @@ 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
8
  import { useSxpDataSource } from '../../../../core/hooks';
9
9
  const WaterFall = (props) => {
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -76,7 +76,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
76
76
  };
77
77
  const firstRef = useRef();
78
78
  useEffect(() => {
79
- var _a, _b, _c;
79
+ var _a, _b, _c, _d;
80
80
  if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
81
81
  firstRef.current = true;
82
82
  const player = TCPlayer('player-container-id', {
@@ -88,11 +88,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
88
88
  preload: 'auto',
89
89
  posterImage: false,
90
90
  bigPlayButton: true,
91
- sources: [
92
- {
93
- src: (_c = (_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) !== null && _c !== void 0 ? _c : ''
94
- }
95
- ]
91
+ 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)
92
+ ? [
93
+ {
94
+ 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
95
+ }
96
+ ]
97
+ : []
96
98
  });
97
99
  player === null || player === void 0 ? void 0 : player.ready(() => {
98
100
  setVideoRef(player);
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/WaterFall/WaterfallList.js CHANGED
@@ -4,8 +4,9 @@ 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"));
7
8
  const WaterfallFlowItem = (props) => {
8
- const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, lineClamp } = props;
9
+ const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
9
10
  const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = (0, hooks_1.useSxpDataSource)();
10
11
  const [showVideo, setShowVideo] = (0, react_1.useState)(false);
11
12
  const [isLoading, setIsLoading] = (0, react_1.useState)(false);
@@ -14,23 +15,20 @@ const WaterfallFlowItem = (props) => {
14
15
  width: 1
15
16
  });
16
17
  const imgDom = (0, react_1.useRef)(null);
18
+ const ref = (0, react_1.useRef)(null);
17
19
  const videoDom = (0, react_1.useRef)(null);
18
20
  const canvasRef = (0, react_1.useRef)(null);
19
21
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
20
22
  const src = (0, react_1.useMemo)(() => {
21
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
23
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
22
24
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
23
25
  return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
24
26
  }
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;
27
+ 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) {
28
+ 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
29
  }
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];
30
+ 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) {
31
+ 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
32
  }
35
33
  else {
36
34
  return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
@@ -92,9 +90,9 @@ const WaterfallFlowItem = (props) => {
92
90
  (0, react_1.useEffect)(() => {
93
91
  const height = imgInfo.height * (unitWidth / imgInfo.width);
94
92
  if (isLoading) {
95
- sizeChange(height + 76, index);
93
+ sizeChange(height + 76 + space, index);
96
94
  }
97
- }, [imgInfo, index, unitWidth, isLoading]);
95
+ }, [imgInfo, index, unitWidth, isLoading, space]);
98
96
  const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
99
97
  const aspectRatio = videoWidth / videoHeight;
100
98
  const targetHeight = targetWidth / aspectRatio;
@@ -132,22 +130,20 @@ const WaterfallFlowItem = (props) => {
132
130
  setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
133
131
  }, 0);
134
132
  };
135
- return (react_1.default.createElement("div", { style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
133
+ return (react_1.default.createElement("div", { ref: ref, style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
136
134
  react_1.default.createElement("div", { className: 'waterFallList-content-listItem-picture' },
137
135
  showVideo && (react_1.default.createElement("div", { style: { display: 'none' } },
138
136
  react_1.default.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
139
137
  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
- } })),
138
+ react_1.default.createElement("img", { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
143
139
  react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info' },
144
140
  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
141
  react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
146
142
  };
147
143
  function WaterfallList(_a) {
148
- var _b, _c, _d, _e, _f, _g, _h;
144
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
149
145
  var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
150
- const { waterFallData, getRecommendVideos, loadingImage } = (0, hooks_1.useSxpDataSource)();
146
+ const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
151
147
  const scrollParent = (0, react_1.useRef)(null);
152
148
  const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
153
149
  const [data, setData] = (0, react_1.useState)();
@@ -157,6 +153,7 @@ function WaterfallList(_a) {
157
153
  const heightList = [170, 230, 300];
158
154
  const [isLoadingData, setIsLoadingData] = (0, react_1.useState)(false);
159
155
  const [list, setList] = (0, react_1.useState)([]);
156
+ const buttonRef = (0, react_1.useRef)();
160
157
  const createRandomNum = (0, react_1.useCallback)((min, max) => {
161
158
  return Math.floor(Math.random() * (max - min + 1)) + min;
162
159
  }, []);
@@ -240,19 +237,28 @@ function WaterfallList(_a) {
240
237
  styleListRef.current = getStyleList();
241
238
  }, [unitWidth, rowsNum, list]);
242
239
  (0, react_1.useEffect)(() => {
240
+ var _a, _b;
243
241
  setIsLoadingData(true);
244
242
  waterFallData &&
245
243
  (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
246
244
  hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
247
245
  'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
248
- 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
246
+ 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
247
+ defaultSize: hashTagSize,
248
+ maxSize: hashTagSize
249
249
  }).then((res) => {
250
250
  var _a, _b;
251
251
  setData(res);
252
252
  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
253
  setIsLoadingData(false);
254
254
  }));
255
- }, [waterFallData, getRecommendVideos]);
255
+ if (isOpenHashTag) {
256
+ const res = preview_json_1.default;
257
+ setData(res);
258
+ 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 : []);
259
+ setIsLoadingData(false);
260
+ }
261
+ }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
256
262
  const onResize = (0, react_1.useCallback)(() => {
257
263
  if (waterfallFlowDom.current === null) {
258
264
  return;
@@ -272,7 +278,7 @@ function WaterfallList(_a) {
272
278
  return () => {
273
279
  resizeObserver.disconnect();
274
280
  };
275
- }, []);
281
+ }, [onResize]);
276
282
  const loadMoreData = (0, react_1.useCallback)(() => {
277
283
  setIsLoadingData(true);
278
284
  waterFallData &&
@@ -304,19 +310,27 @@ function WaterfallList(_a) {
304
310
  window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
305
311
  }
306
312
  };
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')))));
313
+ 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' } },
314
+ 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 },
315
+ react_1.default.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent },
316
+ 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),
317
+ 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'),
318
+ react_1.default.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
319
+ list.map((item, ind) => {
320
+ var _a;
321
+ 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)));
322
+ }),
323
+ 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: {
324
+ position: 'absolute',
325
+ width: '100%',
326
+ 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) +
327
+ ((_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)`,
328
+ height: ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link)
329
+ ? ((_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'
330
+ : 0
331
+ } }))),
332
+ 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 }),
333
+ 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' }) },
334
+ 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
335
  }
322
336
  exports.default = WaterfallList;
package/lib/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -6,7 +6,7 @@ const ReactDOM = tslib_1.__importStar(require("react-dom"));
6
6
  require("./index.less");
7
7
  const lodash_1 = require("lodash");
8
8
  const Navbar_1 = tslib_1.__importDefault(require("../Navbar"));
9
- const List_1 = tslib_1.__importDefault(require("./List"));
9
+ const WaterfallList_1 = tslib_1.__importDefault(require("./WaterfallList"));
10
10
  const left_png_1 = tslib_1.__importDefault(require("./left.png"));
11
11
  const hooks_1 = require("../../../../core/hooks");
12
12
  const WaterFall = (props) => {
@@ -99,6 +99,6 @@ const WaterFall = (props) => {
99
99
  display: openHashtag ? 'block' : 'none'
100
100
  } },
101
101
  react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { top: '32px' }, textStyle: (_a = props === null || props === void 0 ? void 0 : props.textStyles) === null || _a === void 0 ? void 0 : _a.hashTagTitle, onClose: handleClose }),
102
- react_1.default.createElement(List_1.default, Object.assign({ reportTagsView: reportTagsView }, props))), modalEleRef.current);
102
+ react_1.default.createElement(WaterfallList_1.default, Object.assign({ reportTagsView: reportTagsView }, props))), modalEleRef.current);
103
103
  };
104
104
  exports.default = (0, react_1.memo)(WaterFall);
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -79,7 +79,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
79
79
  };
80
80
  const firstRef = (0, react_1.useRef)();
81
81
  (0, react_1.useEffect)(() => {
82
- var _a, _b, _c;
82
+ var _a, _b, _c, _d;
83
83
  if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
84
84
  firstRef.current = true;
85
85
  const player = TCPlayer('player-container-id', {
@@ -91,11 +91,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
91
91
  preload: 'auto',
92
92
  posterImage: false,
93
93
  bigPlayButton: true,
94
- sources: [
95
- {
96
- src: (_c = (_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) !== null && _c !== void 0 ? _c : ''
97
- }
98
- ]
94
+ 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)
95
+ ? [
96
+ {
97
+ 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
98
+ }
99
+ ]
100
+ : []
99
101
  });
100
102
  player === null || player === void 0 ? void 0 : player.ready(() => {
101
103
  setVideoRef(player);
package/lib/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/lib/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/lib/materials/sxp/HashTag/settingRender.js CHANGED
@@ -3,6 +3,16 @@ var _a, _b;
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  const defaultSetting_1 = require("../defaultSetting");
5
5
  exports.default = [
6
+ {
7
+ title: 'Banner',
8
+ child: [
9
+ {
10
+ type: 'Switch',
11
+ label: 'Banner图开关',
12
+ name: ['props', 'showBanner']
13
+ }
14
+ ]
15
+ },
6
16
  {
7
17
  title: '卡片样式',
8
18
  child: [
@@ -11,6 +21,11 @@ exports.default = [
11
21
  label: '上下边距',
12
22
  name: ['props', 'space'],
13
23
  addonAfter: 'px'
24
+ },
25
+ {
26
+ type: 'Switch',
27
+ label: '固定宽高',
28
+ name: ['props', 'isWaterfallFlow']
14
29
  }
15
30
  ]
16
31
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.75",
3
+ "version": "1.0.77",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",