pb-sxp-ui 1.0.77 → 1.0.78

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 (24) hide show
  1. package/dist/index.cjs +96 -284
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +27 -95
  4. package/dist/index.js +96 -284
  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 +96 -284
  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 +35 -49
  15. package/es/core/components/SxpPageRender/WaterFall/index.js +1 -1
  16. package/es/materials/sxp/HashTag/index.d.ts +0 -2
  17. package/es/materials/sxp/HashTag/settingRender.d.ts +2 -7
  18. package/es/materials/sxp/HashTag/settingRender.js +0 -15
  19. package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +35 -49
  20. package/lib/core/components/SxpPageRender/WaterFall/index.js +2 -2
  21. package/lib/materials/sxp/HashTag/index.d.ts +0 -2
  22. package/lib/materials/sxp/HashTag/settingRender.d.ts +2 -7
  23. package/lib/materials/sxp/HashTag/settingRender.js +0 -15
  24. package/package.json +1 -1
package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js CHANGED
@@ -2,9 +2,8 @@ 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
5
  const WaterfallFlowItem = (props) => {
7
- const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
6
+ const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, lineClamp } = props;
8
7
  const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
9
8
  const [showVideo, setShowVideo] = useState(false);
10
9
  const [isLoading, setIsLoading] = useState(false);
@@ -13,20 +12,23 @@ const WaterfallFlowItem = (props) => {
13
12
  width: 1
14
13
  });
15
14
  const imgDom = useRef(null);
16
- const ref = useRef(null);
17
15
  const videoDom = useRef(null);
18
16
  const canvasRef = useRef(null);
19
17
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
20
18
  const src = useMemo(() => {
21
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
19
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
22
20
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
23
21
  return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
24
22
  }
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];
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;
27
26
  }
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];
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];
30
32
  }
31
33
  else {
32
34
  return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
@@ -88,9 +90,9 @@ const WaterfallFlowItem = (props) => {
88
90
  useEffect(() => {
89
91
  const height = imgInfo.height * (unitWidth / imgInfo.width);
90
92
  if (isLoading) {
91
- sizeChange(height + 76 + space, index);
93
+ sizeChange(height + 76, index);
92
94
  }
93
- }, [imgInfo, index, unitWidth, isLoading, space]);
95
+ }, [imgInfo, index, unitWidth, isLoading]);
94
96
  const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
95
97
  const aspectRatio = videoWidth / videoHeight;
96
98
  const targetHeight = targetWidth / aspectRatio;
@@ -128,20 +130,22 @@ const WaterfallFlowItem = (props) => {
128
130
  setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
129
131
  }, 0);
130
132
  };
131
- return (React.createElement("div", { ref: ref, style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
133
+ return (React.createElement("div", { style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
132
134
  React.createElement("div", { className: 'waterFallList-content-listItem-picture' },
133
135
  showVideo && (React.createElement("div", { style: { display: 'none' } },
134
136
  React.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
135
137
  React.createElement("canvas", { ref: canvasRef }))),
136
- React.createElement("img", { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
138
+ React.createElement("img", { className: 'waterFallList-content-listItem-picture-img', loading: 'lazy', ref: imgDom, style: {
139
+ visibility: isLoading ? 'visible' : 'hidden'
140
+ } })),
137
141
  React.createElement("div", { className: 'waterFallList-content-listItem-info' },
138
142
  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),
139
143
  React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
140
144
  };
141
145
  export default function WaterfallList(_a) {
142
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
146
+ var _b, _c, _d, _e, _f, _g, _h;
143
147
  var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
144
- const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
148
+ const { waterFallData, getRecommendVideos, loadingImage } = useSxpDataSource();
145
149
  const scrollParent = useRef(null);
146
150
  const [scrollTop, setScrollTop] = useState(0);
147
151
  const [data, setData] = useState();
@@ -151,7 +155,6 @@ export default function WaterfallList(_a) {
151
155
  const heightList = [170, 230, 300];
152
156
  const [isLoadingData, setIsLoadingData] = useState(false);
153
157
  const [list, setList] = useState([]);
154
- const buttonRef = useRef();
155
158
  const createRandomNum = useCallback((min, max) => {
156
159
  return Math.floor(Math.random() * (max - min + 1)) + min;
157
160
  }, []);
@@ -235,28 +238,19 @@ export default function WaterfallList(_a) {
235
238
  styleListRef.current = getStyleList();
236
239
  }, [unitWidth, rowsNum, list]);
237
240
  useEffect(() => {
238
- var _a, _b;
239
241
  setIsLoadingData(true);
240
242
  waterFallData &&
241
243
  (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
242
244
  hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
243
245
  'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
244
- 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
245
- defaultSize: hashTagSize,
246
- maxSize: hashTagSize
246
+ 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
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
- 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]);
253
+ }, [waterFallData, getRecommendVideos]);
260
254
  const onResize = useCallback(() => {
261
255
  if (waterfallFlowDom.current === null) {
262
256
  return;
@@ -276,7 +270,7 @@ export default function WaterfallList(_a) {
276
270
  return () => {
277
271
  resizeObserver.disconnect();
278
272
  };
279
- }, [onResize]);
273
+ }, []);
280
274
  const loadMoreData = useCallback(() => {
281
275
  setIsLoadingData(true);
282
276
  waterFallData &&
@@ -308,26 +302,18 @@ export default function WaterfallList(_a) {
308
302
  window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
309
303
  }
310
304
  };
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'))))));
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')))));
333
319
  }
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 './WaterfallList';
6
+ import WaterfallList from './List';
7
7
  import left from './left.png';
8
8
  import { useSxpDataSource } from '../../../../core/hooks';
9
9
  const WaterFall = (props) => {
package/es/materials/sxp/HashTag/index.d.ts CHANGED
@@ -11,8 +11,6 @@ export interface IHashTagProps {
11
11
  price: CSSProperties;
12
12
  };
13
13
  buttonBgStyle: CSSProperties;
14
- showBanner?: boolean;
15
- isWaterfallFlow?: boolean;
16
14
  }
17
15
  declare const _default: React.NamedExoticComponent<IHashTagProps>;
18
16
  export default _default;
package/es/materials/sxp/HashTag/settingRender.d.ts CHANGED
@@ -1,16 +1,11 @@
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
- } | {
9
- type: string;
10
- label: string;
11
- name: string[];
12
- addonAfter?: undefined;
13
- })[];
8
+ }[];
14
9
  } | {
15
10
  title: string;
16
11
  child: {
package/es/materials/sxp/HashTag/settingRender.js CHANGED
@@ -1,16 +1,6 @@
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
- },
14
4
  {
15
5
  title: '卡片样式',
16
6
  child: [
@@ -19,11 +9,6 @@ export default [
19
9
  label: '上下边距',
20
10
  name: ['props', 'space'],
21
11
  addonAfter: 'px'
22
- },
23
- {
24
- type: 'Switch',
25
- label: '固定宽高',
26
- name: ['props', 'isWaterfallFlow']
27
12
  }
28
13
  ]
29
14
  },
package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js CHANGED
@@ -4,9 +4,8 @@ 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
7
  const WaterfallFlowItem = (props) => {
9
- const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
8
+ const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, lineClamp } = props;
10
9
  const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = (0, hooks_1.useSxpDataSource)();
11
10
  const [showVideo, setShowVideo] = (0, react_1.useState)(false);
12
11
  const [isLoading, setIsLoading] = (0, react_1.useState)(false);
@@ -15,20 +14,23 @@ const WaterfallFlowItem = (props) => {
15
14
  width: 1
16
15
  });
17
16
  const imgDom = (0, react_1.useRef)(null);
18
- const ref = (0, react_1.useRef)(null);
19
17
  const videoDom = (0, react_1.useRef)(null);
20
18
  const canvasRef = (0, react_1.useRef)(null);
21
19
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
22
20
  const src = (0, react_1.useMemo)(() => {
23
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
21
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
24
22
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
25
23
  return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
26
24
  }
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];
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;
29
28
  }
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];
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];
32
34
  }
33
35
  else {
34
36
  return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
@@ -90,9 +92,9 @@ const WaterfallFlowItem = (props) => {
90
92
  (0, react_1.useEffect)(() => {
91
93
  const height = imgInfo.height * (unitWidth / imgInfo.width);
92
94
  if (isLoading) {
93
- sizeChange(height + 76 + space, index);
95
+ sizeChange(height + 76, index);
94
96
  }
95
- }, [imgInfo, index, unitWidth, isLoading, space]);
97
+ }, [imgInfo, index, unitWidth, isLoading]);
96
98
  const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
97
99
  const aspectRatio = videoWidth / videoHeight;
98
100
  const targetHeight = targetWidth / aspectRatio;
@@ -130,20 +132,22 @@ const WaterfallFlowItem = (props) => {
130
132
  setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
131
133
  }, 0);
132
134
  };
133
- return (react_1.default.createElement("div", { ref: ref, style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
135
+ return (react_1.default.createElement("div", { style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
134
136
  react_1.default.createElement("div", { className: 'waterFallList-content-listItem-picture' },
135
137
  showVideo && (react_1.default.createElement("div", { style: { display: 'none' } },
136
138
  react_1.default.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
137
139
  react_1.default.createElement("canvas", { ref: canvasRef }))),
138
- react_1.default.createElement("img", { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
140
+ react_1.default.createElement("img", { className: 'waterFallList-content-listItem-picture-img', loading: 'lazy', ref: imgDom, style: {
141
+ visibility: isLoading ? 'visible' : 'hidden'
142
+ } })),
139
143
  react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info' },
140
144
  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),
141
145
  react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
142
146
  };
143
147
  function WaterfallList(_a) {
144
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
148
+ var _b, _c, _d, _e, _f, _g, _h;
145
149
  var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
146
- const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
150
+ const { waterFallData, getRecommendVideos, loadingImage } = (0, hooks_1.useSxpDataSource)();
147
151
  const scrollParent = (0, react_1.useRef)(null);
148
152
  const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
149
153
  const [data, setData] = (0, react_1.useState)();
@@ -153,7 +157,6 @@ function WaterfallList(_a) {
153
157
  const heightList = [170, 230, 300];
154
158
  const [isLoadingData, setIsLoadingData] = (0, react_1.useState)(false);
155
159
  const [list, setList] = (0, react_1.useState)([]);
156
- const buttonRef = (0, react_1.useRef)();
157
160
  const createRandomNum = (0, react_1.useCallback)((min, max) => {
158
161
  return Math.floor(Math.random() * (max - min + 1)) + min;
159
162
  }, []);
@@ -237,28 +240,19 @@ function WaterfallList(_a) {
237
240
  styleListRef.current = getStyleList();
238
241
  }, [unitWidth, rowsNum, list]);
239
242
  (0, react_1.useEffect)(() => {
240
- var _a, _b;
241
243
  setIsLoadingData(true);
242
244
  waterFallData &&
243
245
  (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
244
246
  hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
245
247
  'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
246
- 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
247
- defaultSize: hashTagSize,
248
- maxSize: hashTagSize
248
+ 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
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
- 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]);
255
+ }, [waterFallData, getRecommendVideos]);
262
256
  const onResize = (0, react_1.useCallback)(() => {
263
257
  if (waterfallFlowDom.current === null) {
264
258
  return;
@@ -278,7 +272,7 @@ function WaterfallList(_a) {
278
272
  return () => {
279
273
  resizeObserver.disconnect();
280
274
  };
281
- }, [onResize]);
275
+ }, []);
282
276
  const loadMoreData = (0, react_1.useCallback)(() => {
283
277
  setIsLoadingData(true);
284
278
  waterFallData &&
@@ -310,27 +304,19 @@ function WaterfallList(_a) {
310
304
  window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
311
305
  }
312
306
  };
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'))))));
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')))));
335
321
  }
336
322
  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 WaterfallList_1 = tslib_1.__importDefault(require("./WaterfallList"));
9
+ const List_1 = tslib_1.__importDefault(require("./List"));
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(WaterfallList_1.default, Object.assign({ reportTagsView: reportTagsView }, props))), modalEleRef.current);
102
+ react_1.default.createElement(List_1.default, Object.assign({ reportTagsView: reportTagsView }, props))), modalEleRef.current);
103
103
  };
104
104
  exports.default = (0, react_1.memo)(WaterFall);
package/lib/materials/sxp/HashTag/index.d.ts CHANGED
@@ -11,8 +11,6 @@ export interface IHashTagProps {
11
11
  price: CSSProperties;
12
12
  };
13
13
  buttonBgStyle: CSSProperties;
14
- showBanner?: boolean;
15
- isWaterfallFlow?: boolean;
16
14
  }
17
15
  declare const _default: React.NamedExoticComponent<IHashTagProps>;
18
16
  export default _default;
package/lib/materials/sxp/HashTag/settingRender.d.ts CHANGED
@@ -1,16 +1,11 @@
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
- } | {
9
- type: string;
10
- label: string;
11
- name: string[];
12
- addonAfter?: undefined;
13
- })[];
8
+ }[];
14
9
  } | {
15
10
  title: string;
16
11
  child: {
package/lib/materials/sxp/HashTag/settingRender.js CHANGED
@@ -3,16 +3,6 @@ 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
- },
16
6
  {
17
7
  title: '卡片样式',
18
8
  child: [
@@ -21,11 +11,6 @@ exports.default = [
21
11
  label: '上下边距',
22
12
  name: ['props', 'space'],
23
13
  addonAfter: 'px'
24
- },
25
- {
26
- type: 'Switch',
27
- label: '固定宽高',
28
- name: ['props', 'isWaterfallFlow']
29
14
  }
30
15
  ]
31
16
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.77",
3
+ "version": "1.0.78",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",