pb-sxp-ui 1.0.61 → 1.0.62

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 (25) hide show
  1. package/dist/index.cjs +32 -16
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +32 -16
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +35 -19
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/Tagbar.js +4 -2
  14. package/es/core/components/SxpPageRender/index.js +4 -1
  15. package/es/core/context/SxpDataSourceProvider.js +15 -2
  16. package/es/core/utils/event.d.ts +2 -1
  17. package/es/core/utils/event.js +1 -0
  18. package/es/materials/sxp/template/components/EventProvider.js +2 -3
  19. package/lib/core/components/SxpPageRender/Tagbar.js +4 -2
  20. package/lib/core/components/SxpPageRender/index.js +4 -1
  21. package/lib/core/context/SxpDataSourceProvider.js +15 -2
  22. package/lib/core/utils/event.d.ts +2 -1
  23. package/lib/core/utils/event.js +1 -0
  24. package/lib/materials/sxp/template/components/EventProvider.js +2 -3
  25. package/package.json +1 -1
package/es/core/components/SxpPageRender/Tagbar.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import React, { memo, useMemo, useState } from 'react';
2
2
  import { useSxpDataSource } from '../../../core/hooks';
3
+ import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
3
4
  const DEFAULT_TAG = 'FOR U';
4
5
  const Tagbar = ({ tagList = [], setActiveIndex }) => {
5
6
  const [selectTag, setSelectTag] = useState(DEFAULT_TAG);
6
- const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef } = useSxpDataSource();
7
+ const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData } = useSxpDataSource();
7
8
  const realTagList = useMemo(() => {
8
9
  return [DEFAULT_TAG, ...tagList];
9
10
  }, [tagList]);
@@ -17,6 +18,7 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
17
18
  setLoading === null || setLoading === void 0 ? void 0 : setLoading(true);
18
19
  getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({ themeTag }).then((res) => {
19
20
  var _a, _b, _c, _d;
21
+ SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.CHANGE_THEME_TAG, themeTag);
20
22
  setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList((_a = res === null || res === void 0 ? void 0 : res.recList) !== null && _a !== void 0 ? _a : []);
21
23
  setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList((_b = res === null || res === void 0 ? void 0 : res.recList) !== null && _b !== void 0 ? _b : []);
22
24
  setActiveIndex === null || setActiveIndex === void 0 ? void 0 : setActiveIndex(0);
@@ -27,7 +29,7 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
27
29
  });
28
30
  setSelectTag(tag);
29
31
  };
30
- if (tagList.length <= 0)
32
+ if (waterFallData || tagList.length <= 0)
31
33
  return null;
32
34
  return (React.createElement("div", { className: 'clc-sxp-tagbar' },
33
35
  React.createElement("ul", { className: 'clc-sxp-tagbar-list', style: { margin: 'auto', gap: 24 } }, realTagList.map((tag) => {
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -172,9 +172,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
172
172
  }
173
173
  if (tagList.length > 0) {
174
174
  minusHeight += 45;
175
+ if (waterFallData) {
176
+ minusHeight -= 45;
177
+ }
175
178
  }
176
179
  return containerHeight - minusHeight;
177
- }, [globalConfig, containerHeight, tagList]);
180
+ }, [globalConfig, containerHeight, tagList, waterFallData]);
178
181
  const renderLogo = useMemo(() => {
179
182
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
180
183
  return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -4,6 +4,7 @@ import qs from 'qs';
4
4
  import { storeAndLoadFeSessionId } from '../utils/sessionStore';
5
5
  import { storeAndLoadFeUserId } from '../utils/localStore';
6
6
  import { useIconLink } from '../components/SxpPageRender/useIconLink';
7
+ import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../utils/event';
7
8
  export const SxpDataSourceContext = createContext({
8
9
  rtcList: [],
9
10
  tagList: []
@@ -27,6 +28,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
27
28
  const [cacheActiveIndex, setCacheActiveIndex] = useState(0);
28
29
  const [isFromHashtag, setIsFromHashtag] = useState(false);
29
30
  const [videoRef, setVideoRef] = useState(null);
31
+ const themeTag = useRef();
32
+ useEffect(() => {
33
+ const handleChangeThemeTag = (tag) => {
34
+ themeTag.current = tag;
35
+ };
36
+ SXP_EVENT_BUS.on(SXP_EVENT_TYPE.CHANGE_THEME_TAG, handleChangeThemeTag);
37
+ return () => {
38
+ SXP_EVENT_BUS.off(SXP_EVENT_TYPE.CHANGE_THEME_TAG, handleChangeThemeTag);
39
+ };
40
+ }, []);
30
41
  useEffect(() => {
31
42
  setOpenHashtag(isOpenHashTag);
32
43
  }, [isOpenHashTag]);
@@ -64,7 +75,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
64
75
  'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
65
76
  'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
66
77
  hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
67
- traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo
78
+ traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo,
79
+ themeTag: query === null || query === void 0 ? void 0 : query.themeTag
68
80
  };
69
81
  if (utmVal) {
70
82
  const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
@@ -89,7 +101,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
89
101
  const data = yield getRecommendVideos({
90
102
  hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
91
103
  'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
92
- 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
104
+ 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
105
+ themeTag: themeTag.current
93
106
  });
94
107
  setRtcList(rtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
95
108
  setCacheRtcList(cacheRtcList.concat((_g = data === null || data === void 0 ? void 0 : data.recList) !== null && _g !== void 0 ? _g : []));
package/es/core/utils/event.d.ts CHANGED
@@ -2,6 +2,7 @@ import EventEmitter from 'eventemitter3';
2
2
  declare const SXP_EVENT_BUS: EventEmitter<string | symbol, any>;
3
3
  export declare enum SXP_EVENT_TYPE {
4
4
  PAGE_DID_SHOW = "pageDidShow",
5
- PAGE_DID_HIDE = "pageDidHide"
5
+ PAGE_DID_HIDE = "pageDidHide",
6
+ CHANGE_THEME_TAG = "changeThemeTag"
6
7
  }
7
8
  export default SXP_EVENT_BUS;
package/es/core/utils/event.js CHANGED
@@ -4,5 +4,6 @@ export var SXP_EVENT_TYPE;
4
4
  (function (SXP_EVENT_TYPE) {
5
5
  SXP_EVENT_TYPE["PAGE_DID_SHOW"] = "pageDidShow";
6
6
  SXP_EVENT_TYPE["PAGE_DID_HIDE"] = "pageDidHide";
7
+ SXP_EVENT_TYPE["CHANGE_THEME_TAG"] = "changeThemeTag";
7
8
  })(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
8
9
  export default SXP_EVENT_BUS;
package/es/materials/sxp/template/components/EventProvider.js CHANGED
@@ -22,7 +22,7 @@ const EventProvider = (_a) => {
22
22
  }
23
23
  }, [isOnScreen, ref, rec, ctaEvent, index]);
24
24
  const handleClick = throttle(() => {
25
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
25
+ var _a, _b, _c, _d, _e, _f, _g, _h;
26
26
  const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
27
27
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
28
28
  eventSubject: 'clickCta',
@@ -34,8 +34,7 @@ const EventProvider = (_a) => {
34
34
  const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
35
35
  const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
36
36
  jumpToWeb(rec, product, cta, index);
37
- window.location.href = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link;
38
- window.location.href = window.getJointUtmLink((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct) === null || _k === void 0 ? void 0 : _k.link);
37
+ window.location.href = window.getJointUtmLink((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link);
39
38
  }
40
39
  }
41
40
  else {
package/lib/core/components/SxpPageRender/Tagbar.js CHANGED
@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const hooks_1 = require("../../../core/hooks");
6
+ const event_1 = tslib_1.__importStar(require("../../../core/utils/event"));
6
7
  const DEFAULT_TAG = 'FOR U';
7
8
  const Tagbar = ({ tagList = [], setActiveIndex }) => {
8
9
  const [selectTag, setSelectTag] = (0, react_1.useState)(DEFAULT_TAG);
9
- const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef } = (0, hooks_1.useSxpDataSource)();
10
+ const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData } = (0, hooks_1.useSxpDataSource)();
10
11
  const realTagList = (0, react_1.useMemo)(() => {
11
12
  return [DEFAULT_TAG, ...tagList];
12
13
  }, [tagList]);
@@ -20,6 +21,7 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
20
21
  setLoading === null || setLoading === void 0 ? void 0 : setLoading(true);
21
22
  getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({ themeTag }).then((res) => {
22
23
  var _a, _b, _c, _d;
24
+ event_1.default.emit(event_1.SXP_EVENT_TYPE.CHANGE_THEME_TAG, themeTag);
23
25
  setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList((_a = res === null || res === void 0 ? void 0 : res.recList) !== null && _a !== void 0 ? _a : []);
24
26
  setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList((_b = res === null || res === void 0 ? void 0 : res.recList) !== null && _b !== void 0 ? _b : []);
25
27
  setActiveIndex === null || setActiveIndex === void 0 ? void 0 : setActiveIndex(0);
@@ -30,7 +32,7 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
30
32
  });
31
33
  setSelectTag(tag);
32
34
  };
33
- if (tagList.length <= 0)
35
+ if (waterFallData || tagList.length <= 0)
34
36
  return null;
35
37
  return (react_1.default.createElement("div", { className: 'clc-sxp-tagbar' },
36
38
  react_1.default.createElement("ul", { className: 'clc-sxp-tagbar-list', style: { margin: 'auto', gap: 24 } }, realTagList.map((tag) => {
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -175,9 +175,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
175
175
  }
176
176
  if (tagList.length > 0) {
177
177
  minusHeight += 45;
178
+ if (waterFallData) {
179
+ minusHeight -= 45;
180
+ }
178
181
  }
179
182
  return containerHeight - minusHeight;
180
- }, [globalConfig, containerHeight, tagList]);
183
+ }, [globalConfig, containerHeight, tagList, waterFallData]);
181
184
  const renderLogo = (0, react_1.useMemo)(() => {
182
185
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
183
186
  return (react_1.default.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -7,6 +7,7 @@ const qs_1 = tslib_1.__importDefault(require("qs"));
7
7
  const sessionStore_1 = require("../utils/sessionStore");
8
8
  const localStore_1 = require("../utils/localStore");
9
9
  const useIconLink_1 = require("../components/SxpPageRender/useIconLink");
10
+ const event_1 = tslib_1.__importStar(require("../utils/event"));
10
11
  exports.SxpDataSourceContext = (0, react_1.createContext)({
11
12
  rtcList: [],
12
13
  tagList: []
@@ -30,6 +31,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
30
31
  const [cacheActiveIndex, setCacheActiveIndex] = (0, react_1.useState)(0);
31
32
  const [isFromHashtag, setIsFromHashtag] = (0, react_1.useState)(false);
32
33
  const [videoRef, setVideoRef] = (0, react_1.useState)(null);
34
+ const themeTag = (0, react_1.useRef)();
35
+ (0, react_1.useEffect)(() => {
36
+ const handleChangeThemeTag = (tag) => {
37
+ themeTag.current = tag;
38
+ };
39
+ event_1.default.on(event_1.SXP_EVENT_TYPE.CHANGE_THEME_TAG, handleChangeThemeTag);
40
+ return () => {
41
+ event_1.default.off(event_1.SXP_EVENT_TYPE.CHANGE_THEME_TAG, handleChangeThemeTag);
42
+ };
43
+ }, []);
33
44
  (0, react_1.useEffect)(() => {
34
45
  setOpenHashtag(isOpenHashTag);
35
46
  }, [isOpenHashTag]);
@@ -67,7 +78,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
67
78
  'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
68
79
  'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
69
80
  hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
70
- traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo
81
+ traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo,
82
+ themeTag: query === null || query === void 0 ? void 0 : query.themeTag
71
83
  };
72
84
  if (utmVal) {
73
85
  const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
@@ -92,7 +104,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
92
104
  const data = yield getRecommendVideos({
93
105
  hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
94
106
  'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
95
- 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
107
+ 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
108
+ themeTag: themeTag.current
96
109
  });
97
110
  setRtcList(rtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
98
111
  setCacheRtcList(cacheRtcList.concat((_g = data === null || data === void 0 ? void 0 : data.recList) !== null && _g !== void 0 ? _g : []));
package/lib/core/utils/event.d.ts CHANGED
@@ -2,6 +2,7 @@ import EventEmitter from 'eventemitter3';
2
2
  declare const SXP_EVENT_BUS: EventEmitter<string | symbol, any>;
3
3
  export declare enum SXP_EVENT_TYPE {
4
4
  PAGE_DID_SHOW = "pageDidShow",
5
- PAGE_DID_HIDE = "pageDidHide"
5
+ PAGE_DID_HIDE = "pageDidHide",
6
+ CHANGE_THEME_TAG = "changeThemeTag"
6
7
  }
7
8
  export default SXP_EVENT_BUS;
package/lib/core/utils/event.js CHANGED
@@ -8,5 +8,6 @@ var SXP_EVENT_TYPE;
8
8
  (function (SXP_EVENT_TYPE) {
9
9
  SXP_EVENT_TYPE["PAGE_DID_SHOW"] = "pageDidShow";
10
10
  SXP_EVENT_TYPE["PAGE_DID_HIDE"] = "pageDidHide";
11
+ SXP_EVENT_TYPE["CHANGE_THEME_TAG"] = "changeThemeTag";
11
12
  })(SXP_EVENT_TYPE || (exports.SXP_EVENT_TYPE = SXP_EVENT_TYPE = {}));
12
13
  exports.default = SXP_EVENT_BUS;
package/lib/materials/sxp/template/components/EventProvider.js CHANGED
@@ -24,7 +24,7 @@ const EventProvider = (_a) => {
24
24
  }
25
25
  }, [isOnScreen, ref, rec, ctaEvent, index]);
26
26
  const handleClick = (0, lodash_1.throttle)(() => {
27
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
27
+ var _a, _b, _c, _d, _e, _f, _g, _h;
28
28
  const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
29
29
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
30
30
  eventSubject: 'clickCta',
@@ -36,8 +36,7 @@ const EventProvider = (_a) => {
36
36
  const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
37
37
  const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
38
38
  jumpToWeb(rec, product, cta, index);
39
- window.location.href = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link;
40
- window.location.href = window.getJointUtmLink((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct) === null || _k === void 0 ? void 0 : _k.link);
39
+ window.location.href = window.getJointUtmLink((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link);
41
40
  }
42
41
  }
43
42
  else {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.61",
3
+ "version": "1.0.62",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",