pb-sxp-ui 1.0.5 → 1.0.6

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 (45) hide show
  1. package/dist/index.cjs +85 -96
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +85 -96
  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 +85 -96
  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/Modal/index.d.ts +2 -2
  14. package/es/core/components/SxpPageRender/Modal/index.js +12 -11
  15. package/es/core/components/SxpPageRender/Popup/index.js +12 -12
  16. package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js +3 -4
  17. package/es/core/components/SxpPageRender/WaterFall/index.js +1 -1
  18. package/es/core/context/EditorContext.d.ts +7 -5
  19. package/es/core/context/EditorContext.js +10 -25
  20. package/es/core/hooks/useEventReport.js +39 -35
  21. package/es/materials/sxp/popup/AppointForm/index.js +1 -2
  22. package/es/materials/sxp/popup/Prompt/index.js +0 -2
  23. package/es/materials/sxp/template/MultiCommodity/index.js +2 -2
  24. package/es/materials/sxp/template/MultiCommodityDiro/index.js +2 -2
  25. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -2
  26. package/es/materials/sxp/template/components/EventProvider.js +2 -2
  27. package/lib/core/components/SxpPageRender/Modal/index.d.ts +2 -2
  28. package/lib/core/components/SxpPageRender/Modal/index.js +11 -10
  29. package/lib/core/components/SxpPageRender/Popup/index.js +12 -12
  30. package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +2 -3
  31. package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -1
  32. package/lib/core/context/EditorContext.d.ts +7 -5
  33. package/lib/core/context/EditorContext.js +10 -25
  34. package/lib/core/hooks/useEventReport.js +39 -35
  35. package/lib/materials/sxp/popup/AppointForm/index.js +0 -1
  36. package/lib/materials/sxp/popup/Prompt/index.js +0 -2
  37. package/lib/materials/sxp/template/MultiCommodity/index.js +2 -2
  38. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +2 -2
  39. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -2
  40. package/lib/materials/sxp/template/components/EventProvider.js +2 -2
  41. package/package.json +1 -1
  42. package/es/core/components/SxpPageRender/ProductInfo/index.d.ts +0 -14
  43. package/es/core/components/SxpPageRender/ProductInfo/index.js +0 -55
  44. package/lib/core/components/SxpPageRender/ProductInfo/index.d.ts +0 -14
  45. package/lib/core/components/SxpPageRender/ProductInfo/index.js +0 -58
@@ -147,7 +147,6 @@ const WaterfallFlowItem = (props) => {
147
147
  function WaterfallList(_a) {
148
148
  var _b, _c, _d, _e, _f, _g, _h;
149
149
  var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
150
- const { popupAni } = (0, hooks_1.useEditor)();
151
150
  const { waterFallData, getRecommendVideos, loadingImage } = (0, hooks_1.useSxpDataSource)();
152
151
  const scrollParent = (0, react_1.useRef)(null);
153
152
  const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
@@ -165,7 +164,7 @@ function WaterfallList(_a) {
165
164
  const [frameInfo, setFrameInfoInfo] = (0, react_1.useState)({ width: 0 });
166
165
  const rowsNum = (0, react_1.useMemo)(() => {
167
166
  const width = frameInfo.width || 0;
168
- if (width >= (popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration)) {
167
+ if (width >= 1200) {
169
168
  return 6;
170
169
  }
171
170
  else if (width >= 768 && width <= 1199) {
@@ -174,7 +173,7 @@ function WaterfallList(_a) {
174
173
  else {
175
174
  return 2;
176
175
  }
177
- }, [frameInfo, popupAni]);
176
+ }, [frameInfo]);
178
177
  const unitWidth = (0, react_1.useMemo)(() => {
179
178
  return frameInfo.width / rowsNum - 2;
180
179
  }, [rowsNum, frameInfo]);
@@ -69,7 +69,7 @@ const WaterFall = (props) => {
69
69
  relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
70
70
  position: rec === null || rec === void 0 ? void 0 : rec.position,
71
71
  contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
72
- traceInfo: JSON.stringify((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo),
72
+ traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
73
73
  hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
74
74
  fromKName,
75
75
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
@@ -16,9 +16,12 @@ export interface IPageParams {
16
16
  mp_rul?: string;
17
17
  }
18
18
  export type IPopupAniType = {
19
- name: string;
20
- duration: number;
19
+ name?: string;
20
+ duration?: number;
21
21
  };
22
+ export type IPopupType = {
23
+ id: string;
24
+ } & IPopupAniType;
22
25
  export interface IEditorContext {
23
26
  resolver: Record<string, MaterialComponet>;
24
27
  currentNode: any | null;
@@ -57,9 +60,8 @@ export interface IEditorContext {
57
60
  setUndoStack?: React.Dispatch<React.SetStateAction<any[]>>;
58
61
  setRedoStack?: React.Dispatch<React.SetStateAction<any[]>>;
59
62
  getCurPageConf?: any;
60
- popup: string;
61
- setPopup: React.Dispatch<React.SetStateAction<string>>;
62
- popupAni: IPopupAniType;
63
+ popup: IPopupType;
64
+ setPopup: React.Dispatch<React.SetStateAction<IPopupType>>;
63
65
  }
64
66
  export interface IEditorCoreProps {
65
67
  resolver: Record<string, MaterialComponet>;
@@ -29,6 +29,11 @@ const item = {
29
29
  pathArr: [0],
30
30
  positionY: 0
31
31
  };
32
+ const popupInit = {
33
+ id: '',
34
+ duration: 0,
35
+ name: 'none'
36
+ };
32
37
  exports.EditorContext = react_1.default.createContext({
33
38
  resolver: {},
34
39
  currentNode: null,
@@ -48,12 +53,8 @@ exports.EditorContext = react_1.default.createContext({
48
53
  prePiontData: [],
49
54
  undoStack: [item],
50
55
  redoStack: [],
51
- popup: '',
52
- setPopup: () => { },
53
- popupAni: {
54
- name: 'none',
55
- duration: 0
56
- }
56
+ popup: popupInit,
57
+ setPopup: () => { }
57
58
  });
58
59
  const EditorCore = (0, react_1.forwardRef)(({ children, resolver, isSsr, schema, enableDataSource = true, utmVal }, ref) => {
59
60
  const [currentNode, setCurrentNode] = (0, react_1.useState)(null);
@@ -71,25 +72,10 @@ const EditorCore = (0, react_1.forwardRef)(({ children, resolver, isSsr, schema,
71
72
  const [prePiontData, setPrePiontData] = (0, react_1.useState)([item]);
72
73
  const [undoStack, setUndoStack] = (0, react_1.useState)([[item]]);
73
74
  const [redoStack, setRedoStack] = (0, react_1.useState)([]);
74
- const [popup, setPopup] = (0, react_1.useState)('');
75
- const [popupAni, setPopupAni] = (0, react_1.useState)({
76
- name: 'none',
77
- duration: 0
78
- });
75
+ const [popup, setPopup] = (0, react_1.useState)(popupInit);
79
76
  typeof window !== 'undefined' &&
80
77
  (window.sxpPopup = (type, aniType) => {
81
- if (aniType && (aniType === null || aniType === void 0 ? void 0 : aniType.name) !== 'none') {
82
- setPopupAni(Object.assign(Object.assign({}, popupAni), aniType));
83
- }
84
- else {
85
- setPopupAni({
86
- name: 'none',
87
- duration: 0
88
- });
89
- }
90
- setTimeout(() => {
91
- setPopup(type);
92
- });
78
+ setPopup(Object.assign(Object.assign(Object.assign({}, popupInit), { id: type }), aniType));
93
79
  });
94
80
  typeof window !== 'undefined' &&
95
81
  (window.getJointUtmLink = (url) => {
@@ -158,8 +144,7 @@ const EditorCore = (0, react_1.forwardRef)(({ children, resolver, isSsr, schema,
158
144
  setUndoStack,
159
145
  getCurPageConf,
160
146
  popup,
161
- setPopup,
162
- popupAni
147
+ setPopup
163
148
  } },
164
149
  react_1.default.createElement(DataSourceProvider_1.default, { isSsr: isSsr, enable: enableDataSource }, children)));
165
150
  });
@@ -23,23 +23,25 @@ function useEventReport() {
23
23
  else if (data === null || data === void 0 ? void 0 : data.product) {
24
24
  fromKName = 'productPage';
25
25
  }
26
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
27
- eventInfo: {
28
- eventSubject: 'jumpToWeb',
29
- eventDescription: 'User jumped to website',
30
- productId: (_h = product === null || product === void 0 ? void 0 : product.itemId) !== null && _h !== void 0 ? _h : '',
31
- productName: (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : '',
32
- price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
33
- productCollection: (_k = product === null || product === void 0 ? void 0 : product.collection) !== null && _k !== void 0 ? _k : '',
34
- fromKName,
35
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
36
- contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
37
- position: (data === null || data === void 0 ? void 0 : data.position) + '',
38
- relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
39
- relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
40
- traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
41
- }
42
- });
26
+ if (product === null || product === void 0 ? void 0 : product.price) {
27
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
28
+ eventInfo: {
29
+ eventSubject: 'jumpToWeb',
30
+ eventDescription: 'User jumped to website',
31
+ productId: (_h = product === null || product === void 0 ? void 0 : product.itemId) !== null && _h !== void 0 ? _h : '',
32
+ productName: (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : '',
33
+ price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
34
+ productCollection: (_k = product === null || product === void 0 ? void 0 : product.collection) !== null && _k !== void 0 ? _k : '',
35
+ fromKName,
36
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
37
+ contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
38
+ position: (data === null || data === void 0 ? void 0 : data.position) + '',
39
+ relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
40
+ relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
41
+ traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
42
+ }
43
+ });
44
+ }
43
45
  }, [bffEventReport, popupDetailData, isFromHashtag]);
44
46
  const productView = (0, react_1.useCallback)((data, product, cta, viewTime) => {
45
47
  var _a, _b, _c, _d;
@@ -50,24 +52,26 @@ function useEventReport() {
50
52
  else if (data === null || data === void 0 ? void 0 : data.product) {
51
53
  fromKName = 'productPage';
52
54
  }
53
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
54
- eventInfo: {
55
- productId: product === null || product === void 0 ? void 0 : product.itemId,
56
- productName: product === null || product === void 0 ? void 0 : product.title,
57
- price: (product === null || product === void 0 ? void 0 : product.price) + '',
58
- productCollection: product === null || product === void 0 ? void 0 : product.collection,
59
- fromKName,
60
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
61
- contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
62
- position: (data === null || data === void 0 ? void 0 : data.position) + '',
63
- relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
64
- relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
65
- traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
66
- timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
67
- eventSubject: 'productView',
68
- eventDescription: 'User browsed the product'
69
- }
70
- });
55
+ if (product === null || product === void 0 ? void 0 : product.price) {
56
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
57
+ eventInfo: {
58
+ productId: product === null || product === void 0 ? void 0 : product.itemId,
59
+ productName: product === null || product === void 0 ? void 0 : product.title,
60
+ price: (product === null || product === void 0 ? void 0 : product.price) + '',
61
+ productCollection: product === null || product === void 0 ? void 0 : product.collection,
62
+ fromKName,
63
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
64
+ contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
65
+ position: (data === null || data === void 0 ? void 0 : data.position) + '',
66
+ relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
67
+ relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
68
+ traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
69
+ timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
70
+ eventSubject: 'productView',
71
+ eventDescription: 'User browsed the product'
72
+ }
73
+ });
74
+ }
71
75
  }, [bffEventReport, popupDetailData]);
72
76
  return {
73
77
  jumpToWeb,
@@ -9,7 +9,6 @@ const hooks_1 = require("../../../../core/hooks");
9
9
  require("./index.less");
10
10
  const AppointForm = (_a) => {
11
11
  var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, onClick } = _a, props = tslib_1.__rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "onClick"]);
12
- const { setPopup } = (0, hooks_1.useEditor)();
13
12
  const { submitForm } = (0, hooks_1.useSxpDataSource)();
14
13
  const formRef = (0, react_1.useRef)();
15
14
  const [loading, setLoading] = (0, react_1.useState)(false);
@@ -5,11 +5,9 @@ const css_1 = require("@emotion/css");
5
5
  const react_1 = tslib_1.__importStar(require("react"));
6
6
  const success_png_1 = tslib_1.__importDefault(require("./success.png"));
7
7
  const materials_1 = require("../../../../core/utils/materials");
8
- const hooks_1 = require("../../../../core/hooks");
9
8
  require("./index.less");
10
9
  const Prompt = (_a) => {
11
10
  var { content, btnText, style, icon, onClick } = _a, props = tslib_1.__rest(_a, ["content", "btnText", "style", "icon", "onClick"]);
12
- const { setPopup } = (0, hooks_1.useEditor)();
13
11
  const iconSrc = typeof icon === 'string' ? icon : (0, materials_1.getMediaValueByMode)(icon);
14
12
  const handleOk = () => {
15
13
  window === null || window === void 0 ? void 0 : window.sxpPopup('');
@@ -15,7 +15,7 @@ const MultiCommodity = (_a) => {
15
15
  var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
16
16
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
17
17
  const { ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
18
- const { popupAni } = (0, hooks_1.useEditor)();
18
+ const { popup } = (0, hooks_1.useEditor)();
19
19
  const [products, setProducts] = (0, react_1.useState)((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
20
20
  const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
21
21
  const handleClick = (0, lodash_1.throttle)((item) => {
@@ -33,7 +33,7 @@ const MultiCommodity = (_a) => {
33
33
  else {
34
34
  onClick === null || onClick === void 0 ? void 0 : onClick();
35
35
  }
36
- }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
36
+ }, popup === null || popup === void 0 ? void 0 : popup.duration);
37
37
  return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
38
38
  var _a, _b, _c, _d, _e, _f;
39
39
  return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
@@ -14,7 +14,7 @@ const MultiCommodityDiro = (_a) => {
14
14
  var _b, _c;
15
15
  var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
16
16
  const { ctaEvent, setPopupDetailData, sxpParameter } = (0, hooks_1.useSxpDataSource)();
17
- const { popupAni } = (0, hooks_1.useEditor)();
17
+ const { popup } = (0, hooks_1.useEditor)();
18
18
  const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
19
19
  const [products, setProducts] = (0, react_1.useState)((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
20
20
  const handleClick = (0, lodash_1.throttle)((item) => {
@@ -32,7 +32,7 @@ const MultiCommodityDiro = (_a) => {
32
32
  else {
33
33
  onClick === null || onClick === void 0 ? void 0 : onClick();
34
34
  }
35
- }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
35
+ }, popup === null || popup === void 0 ? void 0 : popup.duration);
36
36
  return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
37
37
  var _a, _b, _c, _d, _e, _f;
38
38
  return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
@@ -14,7 +14,7 @@ const MultiCommodityDiroNew = (_a) => {
14
14
  var _b, _c;
15
15
  var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
16
16
  const { ctaEvent, setPopupDetailData, sxpParameter } = (0, hooks_1.useSxpDataSource)();
17
- const { popupAni } = (0, hooks_1.useEditor)();
17
+ const { popup } = (0, hooks_1.useEditor)();
18
18
  const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
19
19
  const [products, setProducts] = (0, react_1.useState)((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
20
20
  const handleClick = (0, lodash_1.throttle)((item) => {
@@ -32,7 +32,7 @@ const MultiCommodityDiroNew = (_a) => {
32
32
  else {
33
33
  onClick === null || onClick === void 0 ? void 0 : onClick();
34
34
  }
35
- }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
35
+ }, popup === null || popup === void 0 ? void 0 : popup.duration);
36
36
  return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
37
37
  var _a, _b, _c, _d, _e, _f;
38
38
  return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
@@ -10,7 +10,7 @@ const EventProvider = (_a) => {
10
10
  var { rec, children, className, onClick, style, isExternalLink = false } = _a, props = tslib_1.__rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink"]);
11
11
  const ref = (0, react_1.useRef)(null);
12
12
  const isOnScreen = (0, useOnScreen_1.default)(ref);
13
- const { popupAni } = (0, hooks_1.useEditor)();
13
+ const { popup } = (0, hooks_1.useEditor)();
14
14
  const { setPopupDetailData, ctaEvent } = (0, hooks_1.useSxpDataSource)();
15
15
  const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
16
16
  (0, react_1.useEffect)(() => {
@@ -42,7 +42,7 @@ const EventProvider = (_a) => {
42
42
  else {
43
43
  onClick === null || onClick === void 0 ? void 0 : onClick();
44
44
  }
45
- }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
45
+ }, popup === null || popup === void 0 ? void 0 : popup.duration);
46
46
  return (react_1.default.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
47
47
  };
48
48
  exports.default = (0, react_1.memo)(EventProvider);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.5",
3
+ "version": "1.0.6",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { RecItemType } from '../typing';
3
- interface IProductInfoProps {
4
- data: RecItemType;
5
- height: number;
6
- width: number;
7
- viewTime: any;
8
- tipText?: {
9
- foldText?: string;
10
- unfoldText?: string;
11
- };
12
- }
13
- declare const _default: React.NamedExoticComponent<IProductInfoProps>;
14
- export default _default;
@@ -1,55 +0,0 @@
1
- import React, { useMemo, useState } from 'react';
2
- import { Pagination, Autoplay } from 'swiper/modules';
3
- import { SwiperSlide, Swiper } from 'swiper/react';
4
- import ExpandableText from '../ExpandableText';
5
- import Modal from '../Modal';
6
- import { useEventReport } from '../../../../core/hooks/useEventReport';
7
- const ProductInfo = ({ data, height, width, viewTime, tipText }) => {
8
- var _a, _b;
9
- const product = data === null || data === void 0 ? void 0 : data.product;
10
- const cta = (_a = data === null || data === void 0 ? void 0 : data.product) === null || _a === void 0 ? void 0 : _a.bindCta;
11
- const [showModal, setShowModal] = useState(false);
12
- const { jumpToWeb } = useEventReport();
13
- const priceText = useMemo(() => {
14
- var _a, _b, _c, _d, _e;
15
- if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
16
- return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
17
- minimumFractionDigits: 0
18
- })) !== null && _e !== void 0 ? _e : ''}`;
19
- }
20
- else {
21
- return '$7,000';
22
- }
23
- }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
24
- const handleLInk = (link) => {
25
- if (link) {
26
- jumpToWeb(data, product, cta);
27
- window.location.href = window.getJointUtmLink(link);
28
- }
29
- };
30
- return (React.createElement("div", { style: { height, width: '100%' } },
31
- React.createElement(Swiper, { height: height * 0.5, modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, loop: true, autoplay: {
32
- delay: 3000
33
- } }, (_b = product === null || product === void 0 ? void 0 : product.homePage) === null || _b === void 0 ? void 0 : _b.map((src) => {
34
- return (React.createElement(SwiperSlide, { key: src },
35
- React.createElement("div", { style: {
36
- overflow: 'hidden',
37
- width,
38
- height: height * 0.5
39
- } },
40
- React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
41
- })),
42
- React.createElement("div", { className: 'product-info' },
43
- React.createElement("div", { className: 'collection' }, product === null || product === void 0 ? void 0 : product.collection),
44
- React.createElement("div", { className: 'title' }, product === null || product === void 0 ? void 0 : product.title),
45
- React.createElement("div", { className: 'price' }, priceText),
46
- React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), className: 'info', text: (product === null || product === void 0 ? void 0 : product.info) || '', maxStr: 79 }),
47
- React.createElement("a", { target: '_blank', className: 'pb-modal-btn', onClick: () => handleLInk(product === null || product === void 0 ? void 0 : product.link) }, cta === null || cta === void 0 ? void 0 : cta.enTitle)),
48
- React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
49
- React.createElement("div", { className: 'modal-collection' }, product === null || product === void 0 ? void 0 : product.collection),
50
- React.createElement("div", { className: 'modal-title' }, product === null || product === void 0 ? void 0 : product.title),
51
- React.createElement("div", { className: 'modal-price' }, priceText),
52
- React.createElement("div", { className: 'modal-info' }, product === null || product === void 0 ? void 0 : product.info),
53
- (product === null || product === void 0 ? void 0 : product.link) && (React.createElement("a", { target: '_blank', className: 'pb-modal-btn', onClick: () => handleLInk(product === null || product === void 0 ? void 0 : product.link) }, cta === null || cta === void 0 ? void 0 : cta.enTitle)))));
54
- };
55
- export default React.memo(ProductInfo);
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { RecItemType } from '../typing';
3
- interface IProductInfoProps {
4
- data: RecItemType;
5
- height: number;
6
- width: number;
7
- viewTime: any;
8
- tipText?: {
9
- foldText?: string;
10
- unfoldText?: string;
11
- };
12
- }
13
- declare const _default: React.NamedExoticComponent<IProductInfoProps>;
14
- export default _default;
@@ -1,58 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const react_1 = tslib_1.__importStar(require("react"));
5
- const modules_1 = require("swiper/modules");
6
- const react_2 = require("swiper/react");
7
- const ExpandableText_1 = tslib_1.__importDefault(require("../ExpandableText"));
8
- const Modal_1 = tslib_1.__importDefault(require("../Modal"));
9
- const useEventReport_1 = require("../../../../core/hooks/useEventReport");
10
- const ProductInfo = ({ data, height, width, viewTime, tipText }) => {
11
- var _a, _b;
12
- const product = data === null || data === void 0 ? void 0 : data.product;
13
- const cta = (_a = data === null || data === void 0 ? void 0 : data.product) === null || _a === void 0 ? void 0 : _a.bindCta;
14
- const [showModal, setShowModal] = (0, react_1.useState)(false);
15
- const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
16
- const priceText = (0, react_1.useMemo)(() => {
17
- var _a, _b, _c, _d, _e;
18
- if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
19
- return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
20
- minimumFractionDigits: 0
21
- })) !== null && _e !== void 0 ? _e : ''}`;
22
- }
23
- else {
24
- return '$7,000';
25
- }
26
- }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
27
- const handleLInk = (link) => {
28
- if (link) {
29
- jumpToWeb(data, product, cta);
30
- window.location.href = window.getJointUtmLink(link);
31
- }
32
- };
33
- return (react_1.default.createElement("div", { style: { height, width: '100%' } },
34
- react_1.default.createElement(react_2.Swiper, { height: height * 0.5, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, loop: true, autoplay: {
35
- delay: 3000
36
- } }, (_b = product === null || product === void 0 ? void 0 : product.homePage) === null || _b === void 0 ? void 0 : _b.map((src) => {
37
- return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
38
- react_1.default.createElement("div", { style: {
39
- overflow: 'hidden',
40
- width,
41
- height: height * 0.5
42
- } },
43
- react_1.default.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
44
- })),
45
- react_1.default.createElement("div", { className: 'product-info' },
46
- react_1.default.createElement("div", { className: 'collection' }, product === null || product === void 0 ? void 0 : product.collection),
47
- react_1.default.createElement("div", { className: 'title' }, product === null || product === void 0 ? void 0 : product.title),
48
- react_1.default.createElement("div", { className: 'price' }, priceText),
49
- react_1.default.createElement(ExpandableText_1.default, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), className: 'info', text: (product === null || product === void 0 ? void 0 : product.info) || '', maxStr: 79 }),
50
- react_1.default.createElement("a", { target: '_blank', className: 'pb-modal-btn', onClick: () => handleLInk(product === null || product === void 0 ? void 0 : product.link) }, cta === null || cta === void 0 ? void 0 : cta.enTitle)),
51
- react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) },
52
- react_1.default.createElement("div", { className: 'modal-collection' }, product === null || product === void 0 ? void 0 : product.collection),
53
- react_1.default.createElement("div", { className: 'modal-title' }, product === null || product === void 0 ? void 0 : product.title),
54
- react_1.default.createElement("div", { className: 'modal-price' }, priceText),
55
- react_1.default.createElement("div", { className: 'modal-info' }, product === null || product === void 0 ? void 0 : product.info),
56
- (product === null || product === void 0 ? void 0 : product.link) && (react_1.default.createElement("a", { target: '_blank', className: 'pb-modal-btn', onClick: () => handleLInk(product === null || product === void 0 ? void 0 : product.link) }, cta === null || cta === void 0 ? void 0 : cta.enTitle)))));
57
- };
58
- exports.default = react_1.default.memo(ProductInfo);