pb-sxp-ui 1.13.5 → 1.14.1
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.
- package/dist/index.cjs +256 -309
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +256 -309
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +6 -6
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +6 -6
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +256 -309
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/Navbar.js +1 -1
- package/es/core/components/SxpPageRender/WaterFall/preview.json +207 -272
- package/es/core/components/SxpPageRender/index.js +0 -1
- package/es/core/context/SxpDataSourceProvider.js +18 -39
- package/es/core/utils/materials.js +3 -5
- package/es/materials/sxp/cta/AniLink/index.js +1 -1
- package/es/materials/sxp/cta/AniLinkPopup/index.js +1 -1
- package/es/materials/sxp/popup/Iframe/index.d.ts +4 -0
- package/es/materials/sxp/popup/Iframe/index.js +5 -4
- package/es/materials/sxp/popup/Iframe/settingRender.js +15 -0
- package/lib/core/components/SxpPageRender/Navbar.js +1 -1
- package/lib/core/components/SxpPageRender/WaterFall/preview.json +207 -272
- package/lib/core/components/SxpPageRender/index.js +0 -1
- package/lib/core/context/SxpDataSourceProvider.js +18 -39
- package/lib/core/utils/materials.js +3 -5
- package/lib/materials/sxp/cta/AniLink/index.js +1 -1
- package/lib/materials/sxp/cta/AniLinkPopup/index.js +1 -1
- package/lib/materials/sxp/popup/Iframe/index.d.ts +4 -0
- package/lib/materials/sxp/popup/Iframe/index.js +5 -4
- package/lib/materials/sxp/popup/Iframe/settingRender.js +15 -0
- package/package.json +1 -1
@@ -144,7 +144,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
144
144
|
setIsReload(new Date().getTime());
|
145
145
|
skipLinkRef.current = false;
|
146
146
|
}
|
147
|
-
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false);
|
148
147
|
handleH5EnterLink();
|
149
148
|
if (repCond) {
|
150
149
|
SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
|
@@ -99,32 +99,29 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
99
99
|
const bffDataSource = useMemo(() => {
|
100
100
|
return dataSources === null || dataSources === void 0 ? void 0 : dataSources.find((d) => d.type === DataSourceType.BFF);
|
101
101
|
}, [dataSources]);
|
102
|
-
const fakeUserId = useMemo(() => {
|
103
|
-
var _a;
|
104
|
-
return ((_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']) + storeAndLoadFeUserId();
|
105
|
-
}, [bffDataSource]);
|
106
102
|
const bffFetch = useCallback((path, options) => {
|
107
103
|
if (!bffDataSource)
|
108
104
|
return;
|
109
105
|
const url = bffDataSource.url;
|
106
|
+
const fakeUserId = storeAndLoadFeUserId();
|
110
107
|
if (options === null || options === void 0 ? void 0 : options.query) {
|
111
108
|
const queryString = qs.stringify(options.query);
|
112
109
|
path = `${path}?${queryString}`;
|
113
110
|
}
|
114
111
|
if (options.type === 'beacon' && navigator.sendBeacon) {
|
115
|
-
return navigator.sendBeacon(`${url}/api
|
112
|
+
return navigator.sendBeacon(`${url}/api/v1${path}`, new Blob([
|
116
113
|
JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
|
117
114
|
], { type: 'application/json;charset=UTF-8' }));
|
118
115
|
}
|
119
116
|
return window
|
120
|
-
.fetch(`${url}/api
|
117
|
+
.fetch(`${url}/api/v1${path}`, {
|
121
118
|
headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers),
|
122
119
|
method: options.method,
|
123
120
|
body: JSON.stringify(options.body)
|
124
121
|
})
|
125
122
|
.then((res) => res.json())
|
126
123
|
.catch((err) => Promise.reject(err));
|
127
|
-
}, [bffDataSource
|
124
|
+
}, [bffDataSource]);
|
128
125
|
const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
|
129
126
|
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
130
127
|
query = {
|
@@ -161,7 +158,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
161
158
|
const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
|
162
159
|
var _v, _w, _x, _y, _z, _0;
|
163
160
|
query.pageNum = pageNum;
|
164
|
-
result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
161
|
+
result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
|
165
162
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
166
163
|
return undefined;
|
167
164
|
}
|
@@ -183,7 +180,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
183
180
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
184
181
|
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_o = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _o !== void 0 ? _o : 1 });
|
185
182
|
}
|
186
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
183
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
|
187
184
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
188
185
|
return undefined;
|
189
186
|
}
|
@@ -233,7 +230,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
233
230
|
return expire;
|
234
231
|
}, [data]);
|
235
232
|
const bffEventReport = useCallback(({ userInfo, eventInfo, reportLayId = true }) => {
|
236
|
-
var _a;
|
237
233
|
if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
|
238
234
|
return;
|
239
235
|
}
|
@@ -250,23 +246,14 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
250
246
|
console.log('userInfo:', userInfo);
|
251
247
|
console.log('eventInfo:', ef);
|
252
248
|
console.log('========= 结束 =========');
|
253
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(
|
249
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/event/report', {
|
254
250
|
method: 'POST',
|
255
251
|
body: { userInfo: realUserInfo, eventInfo: realEventInfo },
|
256
252
|
type: 'beacon'
|
257
253
|
});
|
258
|
-
}, [
|
259
|
-
bffFetch,
|
260
|
-
curReqInfo,
|
261
|
-
enableReportEvent,
|
262
|
-
globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
|
263
|
-
layoutVariantId,
|
264
|
-
globalConfig,
|
265
|
-
playbookType,
|
266
|
-
bffDataSource
|
267
|
-
]);
|
254
|
+
}, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
|
268
255
|
const bffFbReport = useCallback(({ eventName, product }) => {
|
269
|
-
var _a, _b, _c, _d, _e
|
256
|
+
var _a, _b, _c, _d, _e;
|
270
257
|
if (!enableReportEvent ||
|
271
258
|
!enabledMetaConversionApi ||
|
272
259
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
|
@@ -278,7 +265,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
278
265
|
const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
|
279
266
|
const fix_par = {
|
280
267
|
event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
|
281
|
-
external_id:
|
268
|
+
external_id: storeAndLoadFeUserId(),
|
282
269
|
client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
|
283
270
|
fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
|
284
271
|
fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
|
@@ -330,30 +317,22 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
330
317
|
}
|
331
318
|
};
|
332
319
|
getEventParams(jsonParams);
|
333
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(
|
320
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
|
334
321
|
method: 'POST',
|
335
322
|
body: jsonParams,
|
336
323
|
type: 'beacon'
|
337
324
|
});
|
338
|
-
}, [
|
339
|
-
bffFetch,
|
340
|
-
enableReportEvent,
|
341
|
-
enabledMetaConversionApi,
|
342
|
-
globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
|
343
|
-
globalConfig,
|
344
|
-
fakeUserId,
|
345
|
-
bffDataSource
|
346
|
-
]);
|
325
|
+
}, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, globalConfig]);
|
347
326
|
const bffMutateLike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
|
348
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
327
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/like', { method: 'POST', body }));
|
349
328
|
return res === null || res === void 0 ? void 0 : res.success;
|
350
329
|
}), [bffFetch]);
|
351
330
|
const bffMutateUnlike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
|
352
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
331
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/unlike', { method: 'POST', body }));
|
353
332
|
return res === null || res === void 0 ? void 0 : res.success;
|
354
333
|
}), [bffFetch]);
|
355
334
|
const bffSubmitForm = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
|
356
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
335
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/customform', { method: 'POST', body }));
|
357
336
|
return res === null || res === void 0 ? void 0 : res.success;
|
358
337
|
}), [bffFetch]);
|
359
338
|
const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -367,7 +346,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
367
346
|
const key = val.split('=')[0];
|
368
347
|
return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
|
369
348
|
})) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
|
370
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
349
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
371
350
|
setTagList((_12 = (_11 = result === null || result === void 0 ? void 0 : result.data) === null || _11 === void 0 ? void 0 : _11.tags) !== null && _12 !== void 0 ? _12 : []);
|
372
351
|
}
|
373
352
|
catch (e) {
|
@@ -441,10 +420,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
441
420
|
let curData;
|
442
421
|
let gldata;
|
443
422
|
if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
|
444
|
-
layId = data === null || data === void 0 ? void 0 : data.layoutVariantId;
|
445
|
-
setLayoutVariantId(data === null || data === void 0 ? void 0 : data.layoutVariantId);
|
446
423
|
const id = (_b = (_a = data === null || data === void 0 ? void 0 : data.layoutVariantId) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[1];
|
447
424
|
if (id) {
|
425
|
+
layId = id;
|
426
|
+
setLayoutVariantId(id);
|
448
427
|
curData = dataList === null || dataList === void 0 ? void 0 : dataList.find((item) => (item === null || item === void 0 ? void 0 : item.id) === id);
|
449
428
|
if (curData) {
|
450
429
|
setPageData(curData);
|
@@ -32,16 +32,14 @@ export const getBgStyleByImg = (data) => {
|
|
32
32
|
};
|
33
33
|
export const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHiddenDef, style }) => {
|
34
34
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
35
|
-
let text = '';
|
36
35
|
if ((!(product === null || product === void 0 ? void 0 : product.currency) || !(product === null || product === void 0 ? void 0 : product.price)) && isHiddenDef)
|
37
36
|
return null;
|
38
|
-
let price =
|
39
|
-
|
40
|
-
return text;
|
37
|
+
let price = (product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price) ? product === null || product === void 0 ? void 0 : product.price : 7000;
|
38
|
+
let text = '';
|
41
39
|
let priceSymbol = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.priceSymbol;
|
42
40
|
let currency = (product === null || product === void 0 ? void 0 : product.currency) ? (_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 : '' : '$';
|
43
41
|
const isToLocStr = enableFormattedPrice === undefined || enableFormattedPrice;
|
44
|
-
let decPic = price
|
42
|
+
let decPic = price.toString();
|
45
43
|
if (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.showTwoDecimalPoint) {
|
46
44
|
decPic = price === null || price === void 0 ? void 0 : price.toFixed(2);
|
47
45
|
}
|
@@ -35,7 +35,7 @@ const AniLink = (_a) => {
|
|
35
35
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
36
36
|
}
|
37
37
|
};
|
38
|
-
const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '
|
38
|
+
const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || 'Show More';
|
39
39
|
const aniTimStyle = useMemo(() => {
|
40
40
|
var _a, _b;
|
41
41
|
const ani = event === null || event === void 0 ? void 0 : event.animation;
|
@@ -35,7 +35,7 @@ const AniLinkPopup = (_a) => {
|
|
35
35
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
36
36
|
}
|
37
37
|
};
|
38
|
-
const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '
|
38
|
+
const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || 'Show More';
|
39
39
|
const aniTimStyle = useMemo(() => {
|
40
40
|
const ani = event === null || event === void 0 ? void 0 : event.animation;
|
41
41
|
if (ani) {
|
@@ -12,6 +12,10 @@ export interface IIframeProps {
|
|
12
12
|
submitButtonStyle?: CSSProperties;
|
13
13
|
contentStyle?: CSSProperties;
|
14
14
|
isTel?: boolean;
|
15
|
+
iframe?: {
|
16
|
+
src?: string;
|
17
|
+
allow?: string;
|
18
|
+
};
|
15
19
|
}
|
16
20
|
declare const _default: React.NamedExoticComponent<IIframeProps>;
|
17
21
|
export default _default;
|
@@ -5,11 +5,12 @@ import './index.less';
|
|
5
5
|
import { useSxpDataSource } from '../../../../core/hooks';
|
6
6
|
const Iframe = (_a) => {
|
7
7
|
var _b, _c;
|
8
|
-
var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle, isTel } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle", "isTel"]);
|
8
|
+
var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle, isTel, iframe } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle", "isTel", "iframe"]);
|
9
9
|
const { popupDetailData } = useSxpDataSource();
|
10
|
-
const
|
11
|
-
|
12
|
-
|
10
|
+
const { src, allow } = iframe || {};
|
11
|
+
const iframeUrl = src || ((_c = (_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.video) === null || _b === void 0 ? void 0 : _b.bindCta) === null || _c === void 0 ? void 0 : _c.remark);
|
12
|
+
return (React.createElement("div", Object.assign({ className: `${css(Object.assign(Object.assign({}, style), { overflow: 'hidden' }))}` }, props),
|
13
|
+
React.createElement("iframe", { src: iframeUrl, allow: allow, scrolling: 'no', style: {
|
13
14
|
width: '100%',
|
14
15
|
height: 'calc(100% - 50px)',
|
15
16
|
marginTop: '50px',
|
@@ -8,5 +8,20 @@ export default [
|
|
8
8
|
name: ['style', 'backgroundColor']
|
9
9
|
}
|
10
10
|
]
|
11
|
+
},
|
12
|
+
{
|
13
|
+
title: 'iframe',
|
14
|
+
child: [
|
15
|
+
{
|
16
|
+
type: 'TextArea',
|
17
|
+
label: 'url',
|
18
|
+
name: ['props', 'iframe', 'src']
|
19
|
+
},
|
20
|
+
{
|
21
|
+
type: 'TextArea',
|
22
|
+
label: 'allow',
|
23
|
+
name: ['props', 'iframe', 'allow']
|
24
|
+
}
|
25
|
+
]
|
11
26
|
}
|
12
27
|
];
|
@@ -11,7 +11,7 @@ const Navbar = ({ icon, styles, textStyle, onClose }) => {
|
|
11
11
|
react_1.default.createElement("button", { className: 'clc-sxp-nav-left', role: 'button', "aria-label": 'back button', onClick: onClose },
|
12
12
|
react_1.default.createElement("img", { src: icon, alt: 'back button' })),
|
13
13
|
react_1.default.createElement("div", { className: 'clc-sxp-nav-title', style: Object.assign(Object.assign({}, textStyle), { paddingLeft: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.textAlign) === 'left' ? '35px' : 0 }), dangerouslySetInnerHTML: {
|
14
|
-
__html: (0, tool_1.setFontForText)(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '
|
14
|
+
__html: (0, tool_1.setFontForText)(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : 'title'}`, textStyle)
|
15
15
|
} })));
|
16
16
|
};
|
17
17
|
exports.default = (0, react_1.memo)(Navbar);
|