pb-sxp-ui 1.9.8 → 1.10.0
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 +520 -162
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +35 -0
- package/dist/index.js +520 -162
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +7 -3
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +7 -3
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +520 -162
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +7 -3
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/Pagebuilder/index.js +3 -4
- package/es/core/components/SxpPageCore/index.d.ts +1 -1
- package/es/core/components/SxpPageCore/index.js +7 -6
- package/es/core/components/SxpPageRender/NavBack.d.ts +9 -0
- package/es/core/components/SxpPageRender/NavBack.js +16 -0
- package/es/core/components/SxpPageRender/PictureGroup/index.js +3 -1
- package/es/core/components/SxpPageRender/index.d.ts +2 -0
- package/es/core/components/SxpPageRender/index.js +30 -22
- package/es/core/components/SxpPageRender/typing.d.ts +1 -0
- package/es/core/context/EditorContext.d.ts +2 -0
- package/es/core/context/EditorContext.js +9 -3
- package/es/core/context/EditorDataProvider.d.ts +2 -0
- package/es/core/context/EditorDataProvider.js +4 -1
- package/es/core/context/SxpDataSourceProvider.d.ts +4 -2
- package/es/core/context/SxpDataSourceProvider.js +83 -52
- package/es/core/utils/materials.d.ts +1 -1
- package/es/materials/sxp/MultiPosts/index.d.ts +26 -0
- package/es/materials/sxp/MultiPosts/index.js +98 -0
- package/es/materials/sxp/MultiPosts/interactionRender.d.ts +9 -0
- package/es/materials/sxp/MultiPosts/interactionRender.js +42 -0
- package/es/materials/sxp/MultiPosts/material.d.ts +2 -0
- package/es/materials/sxp/MultiPosts/material.js +22 -0
- package/es/materials/sxp/MultiPosts/settingRender.d.ts +73 -0
- package/es/materials/sxp/MultiPosts/settingRender.js +115 -0
- package/es/materials/sxp/index.d.ts +1 -0
- package/es/materials/sxp/index.js +1 -0
- package/lib/core/Pagebuilder/index.js +3 -4
- package/lib/core/components/SxpPageCore/index.d.ts +1 -1
- package/lib/core/components/SxpPageCore/index.js +6 -5
- package/lib/core/components/SxpPageRender/NavBack.d.ts +9 -0
- package/lib/core/components/SxpPageRender/NavBack.js +19 -0
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +3 -1
- package/lib/core/components/SxpPageRender/index.d.ts +2 -0
- package/lib/core/components/SxpPageRender/index.js +30 -22
- package/lib/core/components/SxpPageRender/typing.d.ts +1 -0
- package/lib/core/context/EditorContext.d.ts +2 -0
- package/lib/core/context/EditorContext.js +9 -3
- package/lib/core/context/EditorDataProvider.d.ts +2 -0
- package/lib/core/context/EditorDataProvider.js +4 -1
- package/lib/core/context/SxpDataSourceProvider.d.ts +4 -2
- package/lib/core/context/SxpDataSourceProvider.js +83 -52
- package/lib/core/utils/materials.d.ts +1 -1
- package/lib/materials/sxp/MultiPosts/index.d.ts +26 -0
- package/lib/materials/sxp/MultiPosts/index.js +100 -0
- package/lib/materials/sxp/MultiPosts/interactionRender.d.ts +9 -0
- package/lib/materials/sxp/MultiPosts/interactionRender.js +44 -0
- package/lib/materials/sxp/MultiPosts/material.d.ts +2 -0
- package/lib/materials/sxp/MultiPosts/material.js +26 -0
- package/lib/materials/sxp/MultiPosts/settingRender.d.ts +73 -0
- package/lib/materials/sxp/MultiPosts/settingRender.js +117 -0
- package/lib/materials/sxp/index.d.ts +1 -0
- package/lib/materials/sxp/index.js +1 -0
- package/package.json +1 -1
@@ -8,6 +8,7 @@ import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../utils/event';
|
|
8
8
|
import Consent from '../components/Consent';
|
9
9
|
import { getBrowserInfo, getCookie, getDevice, getSystem } from '../utils/tool';
|
10
10
|
import { cloneDeep } from 'lodash';
|
11
|
+
import { useEditor } from '../hooks/useEditor';
|
11
12
|
export const SxpDataSourceContext = createContext({
|
12
13
|
rtcList: [],
|
13
14
|
tagList: []
|
@@ -17,8 +18,9 @@ var DataSourceType;
|
|
17
18
|
DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
|
18
19
|
})(DataSourceType || (DataSourceType = {}));
|
19
20
|
export const DEFAULT_TAG = 'FOR U';
|
20
|
-
const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth,
|
21
|
-
var _a, _b, _c;
|
21
|
+
const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isOpenConsent = false, isEditor = false, utmParameter, channelQueryList, data, dataList, onUpdateSchema }) => {
|
22
|
+
var _a, _b, _c, _d, _e;
|
23
|
+
const { channel } = useEditor();
|
22
24
|
const [rtcList, setRtcList] = useState([]);
|
23
25
|
const [tagList, setTagList] = useState([]);
|
24
26
|
const [loading, setLoading] = useState(false);
|
@@ -39,10 +41,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
39
41
|
const checkCommodityIndexRef = useRef(-1);
|
40
42
|
const popupCurTimeRef = useRef(null);
|
41
43
|
const [isNoMoreData, setIsNoMoreData] = useState(false);
|
44
|
+
const [globalConfig, setGlobalConfig] = useState((_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf) === null || _b === void 0 ? void 0 : _b.globalConfig);
|
45
|
+
const [pageData, setPageData] = useState(data);
|
46
|
+
const [showConsent, setShowConsent] = useState(false);
|
47
|
+
const [layoutVariantId, setLayoutVariantId] = useState();
|
42
48
|
const isShowConsent = useMemo(() => {
|
43
49
|
var _a, _b, _c, _d;
|
44
|
-
return (((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent
|
45
|
-
|
50
|
+
return (((((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent) &&
|
51
|
+
showConsent);
|
52
|
+
}, [isAgreePolicy, globalConfig, isOpenConsent, isEditor, showConsent]);
|
46
53
|
const getFilterRecList = useCallback((data) => {
|
47
54
|
var _a;
|
48
55
|
const recList = data === null || data === void 0 ? void 0 : data.recList;
|
@@ -99,10 +106,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
99
106
|
.catch((err) => Promise.reject(err));
|
100
107
|
}, [bffDataSource]);
|
101
108
|
const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
|
102
|
-
var
|
109
|
+
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
103
110
|
query = {
|
104
|
-
maxSize: (
|
105
|
-
defaultSize: (
|
111
|
+
maxSize: (_f = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _f !== void 0 ? _f : maxSize,
|
112
|
+
defaultSize: (_g = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _g !== void 0 ? _g : defaultSize,
|
106
113
|
hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
|
107
114
|
traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo,
|
108
115
|
themeTag: query === null || query === void 0 ? void 0 : query.themeTag,
|
@@ -110,13 +117,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
110
117
|
contentFilter: query === null || query === void 0 ? void 0 : query.contentFilter,
|
111
118
|
productFilter: query === null || query === void 0 ? void 0 : query.productFilter
|
112
119
|
};
|
113
|
-
if (
|
114
|
-
|
120
|
+
if (channel) {
|
121
|
+
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
|
122
|
+
}
|
123
|
+
else if (utmVal) {
|
124
|
+
const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
|
115
125
|
var _a, _b;
|
116
126
|
const key = val.split('=')[0];
|
117
127
|
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);
|
118
|
-
})) === null ||
|
119
|
-
|
128
|
+
})) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
|
129
|
+
if (val)
|
130
|
+
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
|
120
131
|
}
|
121
132
|
if (isEditor) {
|
122
133
|
let pageNum = 1;
|
@@ -128,17 +139,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
128
139
|
let list = [];
|
129
140
|
let result = null;
|
130
141
|
const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
|
131
|
-
var
|
142
|
+
var _v, _w, _x, _y, _z, _0;
|
132
143
|
query.pageNum = pageNum;
|
133
144
|
result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
|
134
145
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
135
146
|
return undefined;
|
136
147
|
}
|
137
148
|
setLoading(false);
|
138
|
-
list = list.concat((
|
149
|
+
list = list.concat((_y = (_x = (_w = (_v = result === null || result === void 0 ? void 0 : result.data) === null || _v === void 0 ? void 0 : _v.recList) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.call(_w, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _y !== void 0 ? _y : []);
|
139
150
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result.data), { recList: list })));
|
140
151
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result.data), { recList: list })));
|
141
|
-
const isNotNullList = (
|
152
|
+
const isNotNullList = (_0 = (_z = result === null || result === void 0 ? void 0 : result.data) === null || _z === void 0 ? void 0 : _z.recList) === null || _0 === void 0 ? void 0 : _0.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
142
153
|
if (isNotNullList) {
|
143
154
|
pageNum = pageNum + 1;
|
144
155
|
yield recurveRecList(query);
|
@@ -146,11 +157,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
146
157
|
});
|
147
158
|
yield recurveRecList(query);
|
148
159
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
|
149
|
-
setCurReqInfo({ rtc: (
|
160
|
+
setCurReqInfo({ rtc: (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.rtc, requestId: (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.requestId });
|
150
161
|
return Object.assign(Object.assign({}, result.data), { recList: list });
|
151
162
|
}
|
152
163
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
153
|
-
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (
|
164
|
+
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 });
|
154
165
|
}
|
155
166
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
|
156
167
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
@@ -160,27 +171,27 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
160
171
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
161
172
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
162
173
|
let list = [];
|
163
|
-
list = list.concat((
|
164
|
-
const isNotNullList = (
|
174
|
+
list = list.concat((_s = (_r = (_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.recList) === null || _q === void 0 ? void 0 : _q.filter) === null || _r === void 0 ? void 0 : _r.call(_q, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _s !== void 0 ? _s : []);
|
175
|
+
const isNotNullList = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
165
176
|
if (!isNotNullList) {
|
166
177
|
setIsNoMoreData(true);
|
167
178
|
}
|
168
179
|
return Object.assign(Object.assign({}, result.data), { recList: list });
|
169
180
|
}
|
170
181
|
return result === null || result === void 0 ? void 0 : result.data;
|
171
|
-
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList]);
|
182
|
+
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel]);
|
172
183
|
const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
173
|
-
var
|
184
|
+
var _1, _2, _3, _4;
|
174
185
|
if (rtcList.length <= 0) {
|
175
186
|
return;
|
176
187
|
}
|
177
188
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
178
|
-
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((
|
189
|
+
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _1 === void 0 ? void 0 : _1.itemId) && { productFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _2 === void 0 ? void 0 : _2.itemId] })), (((_3 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _3 === void 0 ? void 0 : _3.itemId) && { contentFilter: [(_4 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _4 === void 0 ? void 0 : _4.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
|
179
190
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
180
191
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
181
192
|
return data;
|
182
193
|
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
183
|
-
const bffEventReport = useCallback(({ userInfo, eventInfo }) => {
|
194
|
+
const bffEventReport = useCallback(({ userInfo, eventInfo, reportLayId = true }) => {
|
184
195
|
if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
|
185
196
|
return;
|
186
197
|
}
|
@@ -188,7 +199,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
188
199
|
userInfo = {};
|
189
200
|
}
|
190
201
|
const sessionID = storeAndLoadFeSessionId();
|
191
|
-
const ef = Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo), (getDevice() && { sxpDevice: getDevice() })), (getSystem() && { sxpSystem: getSystem() })), (getBrowserInfo() && { sxpBrowser: getBrowserInfo() }));
|
202
|
+
const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo), (getDevice() && { sxpDevice: getDevice() })), (getSystem() && { sxpSystem: getSystem() })), (getBrowserInfo() && { sxpBrowser: getBrowserInfo() })), { playbookType: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' ? 'organicMenu' : 'paidMedia' }), (layoutVariantId && reportLayId && { layoutVariantId }));
|
192
203
|
const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
|
193
204
|
const realEventInfo = Object.entries(ef)
|
194
205
|
.map(([k, v]) => v && { name: k, value: v })
|
@@ -202,7 +213,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
202
213
|
body: { userInfo: realUserInfo, eventInfo: realEventInfo },
|
203
214
|
type: 'beacon'
|
204
215
|
});
|
205
|
-
}, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
|
216
|
+
}, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId]);
|
206
217
|
const bffFbReport = useCallback(({ eventName, product }) => {
|
207
218
|
var _a, _b, _c, _d, _e;
|
208
219
|
if (!enableReportEvent ||
|
@@ -286,23 +297,24 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
286
297
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/customform', { method: 'POST', body }));
|
287
298
|
return res === null || res === void 0 ? void 0 : res.success;
|
288
299
|
}), [bffFetch]);
|
289
|
-
const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
290
|
-
var
|
300
|
+
const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
301
|
+
var _5, _6, _7, _8, _9, _10, _11, _12;
|
302
|
+
const isShowTag = !!((_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.data) === null || _5 === void 0 ? void 0 : _5.sxpPageConf) === null || _6 === void 0 ? void 0 : _6.globalConfig) === null || _7 === void 0 ? void 0 : _7.isShowTag);
|
291
303
|
if (!utmVal || !isShowTag)
|
292
304
|
return;
|
293
305
|
try {
|
294
|
-
const val = (
|
306
|
+
const val = (_10 = (_9 = (_8 = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
|
295
307
|
var _a, _b;
|
296
308
|
const key = val.split('=')[0];
|
297
309
|
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);
|
298
|
-
})) === null ||
|
310
|
+
})) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
|
299
311
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
300
|
-
setTagList((
|
312
|
+
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 : []);
|
301
313
|
}
|
302
314
|
catch (e) {
|
303
315
|
console.log('e', e);
|
304
316
|
}
|
305
|
-
}), [bffFetch, utmVal
|
317
|
+
}), [bffFetch, utmVal]);
|
306
318
|
const ctaEvent = useCallback((eventInfo, rec, product, position) => {
|
307
319
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
|
308
320
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
@@ -348,7 +360,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
348
360
|
requestId: null,
|
349
361
|
enterUrl: (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : '',
|
350
362
|
clSource: getVal('cl_source')
|
351
|
-
}
|
363
|
+
},
|
364
|
+
reportLayId: false
|
352
365
|
});
|
353
366
|
}, [bffEventReport]);
|
354
367
|
useEffect(() => {
|
@@ -359,46 +372,64 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
359
372
|
if (isShowConsent)
|
360
373
|
return;
|
361
374
|
setLoading(true);
|
362
|
-
|
375
|
+
let layId;
|
363
376
|
getRecommendVideos()
|
364
377
|
.then((data) => {
|
378
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
365
379
|
if (data) {
|
366
|
-
|
367
|
-
|
380
|
+
const list = getFilterRecList(data);
|
381
|
+
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' && !channel) {
|
382
|
+
list.unshift('organic menu');
|
383
|
+
}
|
384
|
+
setRtcList(list);
|
385
|
+
setCacheRtcList(list);
|
386
|
+
let curData;
|
387
|
+
if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
|
388
|
+
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];
|
389
|
+
if (id) {
|
390
|
+
layId = id;
|
391
|
+
setLayoutVariantId(id);
|
392
|
+
curData = dataList === null || dataList === void 0 ? void 0 : dataList.find((item) => (item === null || item === void 0 ? void 0 : item.id) === id);
|
393
|
+
if (curData) {
|
394
|
+
setPageData(curData);
|
395
|
+
document.title = (_c = curData === null || curData === void 0 ? void 0 : curData.name) !== null && _c !== void 0 ? _c : 'home';
|
396
|
+
setGlobalConfig((_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.globalConfig);
|
397
|
+
onUpdateSchema === null || onUpdateSchema === void 0 ? void 0 : onUpdateSchema(curData === null || curData === void 0 ? void 0 : curData.data);
|
398
|
+
if ((_k = (_j = (_h = (_g = (_f = (_e = curData === null || curData === void 0 ? void 0 : curData.data) === null || _e === void 0 ? void 0 : _e.globalConfig) === null || _f === void 0 ? void 0 : _f.consent) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.privacy_necessity)
|
399
|
+
setShowConsent(true);
|
400
|
+
}
|
401
|
+
}
|
402
|
+
}
|
403
|
+
bffGetTagList(curData !== null && curData !== void 0 ? curData : pageData);
|
368
404
|
}
|
369
405
|
})
|
370
406
|
.finally(() => {
|
371
407
|
bffEventReport({
|
372
|
-
eventInfo: {
|
373
|
-
eventSubject: 'apiRequest',
|
374
|
-
eventDescription: 'api request succeed'
|
375
|
-
}
|
408
|
+
eventInfo: Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId }))
|
376
409
|
});
|
377
410
|
setLoading(false);
|
378
411
|
});
|
379
|
-
}, [isShowConsent]);
|
412
|
+
}, [isShowConsent, channel]);
|
380
413
|
useEffect(() => {
|
381
414
|
if (!isPreview)
|
382
415
|
return;
|
383
416
|
setLoading(true);
|
384
|
-
bffGetTagList();
|
417
|
+
bffGetTagList(pageData);
|
385
418
|
getRecommendVideos()
|
386
419
|
.then((data) => {
|
387
420
|
if (data) {
|
388
|
-
|
389
|
-
|
421
|
+
const list = getFilterRecList(data);
|
422
|
+
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' && !channel) {
|
423
|
+
list.unshift('organic menu');
|
424
|
+
}
|
425
|
+
setRtcList(list);
|
426
|
+
setCacheRtcList(list);
|
390
427
|
}
|
391
428
|
})
|
392
429
|
.finally(() => {
|
393
|
-
bffEventReport({
|
394
|
-
eventInfo: {
|
395
|
-
eventSubject: 'apiRequest',
|
396
|
-
eventDescription: 'api request succeed'
|
397
|
-
}
|
398
|
-
});
|
399
430
|
setLoading(false);
|
400
431
|
});
|
401
|
-
}, [getRecommendVideos, bffGetTagList]);
|
432
|
+
}, [getRecommendVideos, bffGetTagList, channel]);
|
402
433
|
const defaultLoadingImage = useIconLink('/pb_static/a65d23c5893c49d7aaaa81681d3179e2.gif', appDomain);
|
403
434
|
return (React.createElement(SxpDataSourceContext.Provider, { value: {
|
404
435
|
rtcList,
|
@@ -411,7 +442,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
411
442
|
setPopupDetailData,
|
412
443
|
getRecommendVideos,
|
413
444
|
bffEventReport,
|
414
|
-
utmVal,
|
415
445
|
isPreview,
|
416
446
|
loading,
|
417
447
|
sxpParameter,
|
@@ -449,12 +479,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
449
479
|
checkCommodityIndexRef,
|
450
480
|
isEditor,
|
451
481
|
isNoMoreData
|
452
|
-
} }, isShowConsent ? (React.createElement(Consent, Object.assign({}, (
|
482
|
+
} }, isShowConsent ? (React.createElement(Consent, Object.assign({}, (_e = (_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.props))) : (render({
|
453
483
|
rtcList,
|
454
484
|
mutateLike: bffMutateLike,
|
455
485
|
mutateUnlike: bffMutateUnlike,
|
456
486
|
submitForm: bffSubmitForm,
|
457
|
-
tagList
|
487
|
+
tagList,
|
488
|
+
pageData
|
458
489
|
}))));
|
459
490
|
};
|
460
491
|
export default memo(SxpDataSourceProvider);
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { ISxpPageRenderProps } from '../components/SxpPageRender';
|
2
2
|
import { ProductInfoType } from '../components/SxpPageRender/typing';
|
3
3
|
export declare const getMediaValueByMode: (obj?: Record<string, any>) => any;
|
4
|
-
export declare const getBgStyle: (imgSrc
|
4
|
+
export declare const getBgStyle: (imgSrc?: string) => "" | {
|
5
5
|
backgroundImage: string;
|
6
6
|
backgroundRepeat: string;
|
7
7
|
backgroundSize: string;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
2
|
+
import './index.less';
|
3
|
+
import { RecItemType } from '../../../core/components/SxpPageRender/typing';
|
4
|
+
export interface IMultiPostsProps {
|
5
|
+
bgImgUrl?: string;
|
6
|
+
backButton?: {
|
7
|
+
enable: boolean;
|
8
|
+
icon: string;
|
9
|
+
xPosit: string;
|
10
|
+
x: number;
|
11
|
+
yPosit: string;
|
12
|
+
y: number;
|
13
|
+
};
|
14
|
+
button1Url?: string;
|
15
|
+
button2Url?: string;
|
16
|
+
button3Url?: string;
|
17
|
+
button4Url?: string;
|
18
|
+
style?: CSSProperties;
|
19
|
+
button1?: any;
|
20
|
+
button2?: any;
|
21
|
+
button3?: any;
|
22
|
+
button4?: any;
|
23
|
+
recData?: RecItemType;
|
24
|
+
}
|
25
|
+
declare const _default: React.NamedExoticComponent<IMultiPostsProps>;
|
26
|
+
export default _default;
|
@@ -0,0 +1,98 @@
|
|
1
|
+
import { __rest } from "tslib";
|
2
|
+
import { getBgStyle } from '../../../core/utils/materials';
|
3
|
+
import React, { memo, useCallback, useEffect, useRef } from 'react';
|
4
|
+
import './index.less';
|
5
|
+
import { useEditor, useSxpDataSource } from '../../../core/hooks';
|
6
|
+
import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
|
7
|
+
import { useSwiperSlide } from 'swiper/react';
|
8
|
+
const MultiPosts = (_a) => {
|
9
|
+
var _b, _c;
|
10
|
+
var { bgImgUrl, style, recData } = _a, props = __rest(_a, ["bgImgUrl", "style", "recData"]);
|
11
|
+
const { setChannel } = useEditor();
|
12
|
+
const { bffEventReport, curTime } = useSxpDataSource();
|
13
|
+
const { isActive } = useSwiperSlide();
|
14
|
+
const initRef = useRef(false);
|
15
|
+
const viewTime = useRef();
|
16
|
+
const traceinfo = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : '';
|
17
|
+
const getPropsVal = useCallback((index, str) => {
|
18
|
+
try {
|
19
|
+
return new Function('props', 'str', `if (str) {
|
20
|
+
return props?.button${index + 1}${str}
|
21
|
+
} else {
|
22
|
+
return props?.button${index + 1}
|
23
|
+
}`)(props, str);
|
24
|
+
}
|
25
|
+
catch (_a) { }
|
26
|
+
}, [props]);
|
27
|
+
const handleClick = useCallback((index) => {
|
28
|
+
const v = getPropsVal(index);
|
29
|
+
const value = v === null || v === void 0 ? void 0 : v.value;
|
30
|
+
if (!value)
|
31
|
+
return;
|
32
|
+
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
33
|
+
eventInfo: {
|
34
|
+
eventSubject: 'multiPostClick',
|
35
|
+
eventDescription: 'multiPostClick',
|
36
|
+
traceinfo,
|
37
|
+
branchfeed: (v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow' && value ? value : ''
|
38
|
+
}
|
39
|
+
});
|
40
|
+
if ((v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow') {
|
41
|
+
endMultiPost('multipostClick');
|
42
|
+
setChannel === null || setChannel === void 0 ? void 0 : setChannel(value);
|
43
|
+
curTime.current = new Date();
|
44
|
+
}
|
45
|
+
else {
|
46
|
+
new Function(value)();
|
47
|
+
}
|
48
|
+
}, [props]);
|
49
|
+
const startMultiPost = useCallback(() => {
|
50
|
+
viewTime.current = new Date();
|
51
|
+
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
52
|
+
eventInfo: {
|
53
|
+
eventSubject: 'startMultiPost',
|
54
|
+
eventDescription: 'startMultiPost',
|
55
|
+
contentFormat: 'IMAGE',
|
56
|
+
position: '0',
|
57
|
+
traceinfo
|
58
|
+
}
|
59
|
+
});
|
60
|
+
}, []);
|
61
|
+
const endMultiPost = useCallback((nextStep) => {
|
62
|
+
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
63
|
+
eventInfo: {
|
64
|
+
eventSubject: 'endMultiPost',
|
65
|
+
eventDescription: 'endMultiPost',
|
66
|
+
contentFormat: 'IMAGE',
|
67
|
+
position: '0',
|
68
|
+
traceinfo,
|
69
|
+
nextStep: nextStep || 'others',
|
70
|
+
timeOnSite: Math.floor((new Date() - (viewTime === null || viewTime === void 0 ? void 0 : viewTime.current)) / 1000) + ''
|
71
|
+
}
|
72
|
+
});
|
73
|
+
}, []);
|
74
|
+
useEffect(() => {
|
75
|
+
if (isActive) {
|
76
|
+
startMultiPost();
|
77
|
+
initRef.current = true;
|
78
|
+
}
|
79
|
+
else if (initRef.current) {
|
80
|
+
endMultiPost();
|
81
|
+
}
|
82
|
+
}, [isActive]);
|
83
|
+
useEffect(() => {
|
84
|
+
const onShow = () => startMultiPost();
|
85
|
+
const onHide = () => endMultiPost();
|
86
|
+
SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
|
87
|
+
SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
|
88
|
+
return () => {
|
89
|
+
SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
|
90
|
+
SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
|
91
|
+
};
|
92
|
+
}, [isActive]);
|
93
|
+
return (React.createElement("div", { className: 'multiposts', style: Object.assign(Object.assign({}, style), getBgStyle(bgImgUrl)) }, Array.from({ length: 4 }, (_, index) => {
|
94
|
+
return (React.createElement("button", { className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
|
95
|
+
React.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
|
96
|
+
})));
|
97
|
+
};
|
98
|
+
export default memo(MultiPosts);
|
@@ -0,0 +1,42 @@
|
|
1
|
+
export default [
|
2
|
+
{
|
3
|
+
title: '按钮1点击事件',
|
4
|
+
child: [
|
5
|
+
{
|
6
|
+
type: 'link',
|
7
|
+
name: 'button1',
|
8
|
+
isMultiPosts: true
|
9
|
+
}
|
10
|
+
]
|
11
|
+
},
|
12
|
+
{
|
13
|
+
title: '按钮2点击事件',
|
14
|
+
child: [
|
15
|
+
{
|
16
|
+
type: 'link',
|
17
|
+
name: 'button2',
|
18
|
+
isMultiPosts: true
|
19
|
+
}
|
20
|
+
]
|
21
|
+
},
|
22
|
+
{
|
23
|
+
title: '按钮3点击事件',
|
24
|
+
child: [
|
25
|
+
{
|
26
|
+
type: 'link',
|
27
|
+
name: 'button3',
|
28
|
+
isMultiPosts: true
|
29
|
+
}
|
30
|
+
]
|
31
|
+
},
|
32
|
+
{
|
33
|
+
title: '按钮4点击事件',
|
34
|
+
child: [
|
35
|
+
{
|
36
|
+
type: 'link',
|
37
|
+
name: 'button4',
|
38
|
+
isMultiPosts: true
|
39
|
+
}
|
40
|
+
]
|
41
|
+
}
|
42
|
+
];
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import settingRender from './settingRender';
|
2
|
+
import ConsentComponent from '.';
|
3
|
+
import { createMaterial } from '../../../core/create';
|
4
|
+
import interactionRender from './interactionRender';
|
5
|
+
const MultiPosts = createMaterial(ConsentComponent, {
|
6
|
+
displayName: 'MultiPosts',
|
7
|
+
icon: '',
|
8
|
+
category: 'base',
|
9
|
+
type: 'MultiPosts',
|
10
|
+
related: {
|
11
|
+
settingRender,
|
12
|
+
interactionRender
|
13
|
+
},
|
14
|
+
defaulSetting: {
|
15
|
+
props: {},
|
16
|
+
style: {}
|
17
|
+
},
|
18
|
+
w: 100,
|
19
|
+
h: 40,
|
20
|
+
sort: 1
|
21
|
+
});
|
22
|
+
export { MultiPosts };
|
@@ -0,0 +1,73 @@
|
|
1
|
+
declare const _default: ({
|
2
|
+
title: string;
|
3
|
+
child: ({
|
4
|
+
label: string;
|
5
|
+
type: string;
|
6
|
+
name: string[];
|
7
|
+
child?: undefined;
|
8
|
+
} | {
|
9
|
+
type: string;
|
10
|
+
label: string;
|
11
|
+
child: ({
|
12
|
+
type: string;
|
13
|
+
name: string[];
|
14
|
+
text?: undefined;
|
15
|
+
} | {
|
16
|
+
type: string;
|
17
|
+
name: string[];
|
18
|
+
text: string;
|
19
|
+
})[];
|
20
|
+
name?: undefined;
|
21
|
+
} | {
|
22
|
+
type: string;
|
23
|
+
label: string;
|
24
|
+
child: ({
|
25
|
+
type: string;
|
26
|
+
name: string[];
|
27
|
+
options: {
|
28
|
+
label: string;
|
29
|
+
value: string;
|
30
|
+
}[];
|
31
|
+
initialValue: string;
|
32
|
+
addonAfter?: undefined;
|
33
|
+
} | {
|
34
|
+
type: string;
|
35
|
+
name: string[];
|
36
|
+
addonAfter: string;
|
37
|
+
options?: undefined;
|
38
|
+
initialValue?: undefined;
|
39
|
+
})[];
|
40
|
+
name?: undefined;
|
41
|
+
} | {
|
42
|
+
type: string;
|
43
|
+
label: string;
|
44
|
+
child: ({
|
45
|
+
type: string;
|
46
|
+
name: string[];
|
47
|
+
options: {
|
48
|
+
label: string;
|
49
|
+
value: string;
|
50
|
+
}[];
|
51
|
+
initialValue: string;
|
52
|
+
addonAfter?: undefined;
|
53
|
+
} | {
|
54
|
+
type: string;
|
55
|
+
name: string[];
|
56
|
+
addonAfter: string;
|
57
|
+
initialValue: number;
|
58
|
+
options?: undefined;
|
59
|
+
})[];
|
60
|
+
name?: undefined;
|
61
|
+
})[];
|
62
|
+
} | {
|
63
|
+
title: string;
|
64
|
+
child: {
|
65
|
+
type: string;
|
66
|
+
child: {
|
67
|
+
type: string;
|
68
|
+
name: string[];
|
69
|
+
text: string;
|
70
|
+
}[];
|
71
|
+
}[];
|
72
|
+
})[];
|
73
|
+
export default _default;
|