pb-sxp-ui 1.14.0 → 14.0.2
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 +581 -158
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +89 -0
- package/dist/index.js +581 -158
- 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 +581 -158
- 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/ConsentPopup.js +8 -8
- package/es/core/components/SxpPageRender/index.js +5 -2
- package/es/core/context/SxpDataSourceProvider.js +39 -18
- package/es/core/utils/materials.js +5 -3
- package/es/materials/sxp/consentPopup/Click/index.d.ts +19 -0
- package/es/materials/sxp/consentPopup/Click/index.js +19 -0
- package/es/materials/sxp/consentPopup/Click/material.d.ts +2 -0
- package/es/materials/sxp/consentPopup/Click/material.js +48 -0
- package/es/materials/sxp/consentPopup/Click/settingRender.d.ts +63 -0
- package/es/materials/sxp/consentPopup/Click/settingRender.js +210 -0
- package/es/materials/sxp/consentPopup/Display/index.d.ts +2 -2
- package/es/materials/sxp/consentPopup/Display/index.js +7 -5
- package/es/materials/sxp/consentPopup/Swipe/index.d.ts +12 -0
- package/es/materials/sxp/consentPopup/Swipe/index.js +44 -0
- package/es/materials/sxp/consentPopup/Swipe/material.d.ts +2 -0
- package/es/materials/sxp/consentPopup/Swipe/material.js +24 -0
- package/es/materials/sxp/consentPopup/Swipe/settingRender.d.ts +29 -0
- package/es/materials/sxp/consentPopup/Swipe/settingRender.js +43 -0
- package/es/materials/sxp/consentPopup/index.d.ts +2 -0
- package/es/materials/sxp/consentPopup/index.js +2 -0
- package/es/materials/sxp/popup/ConsentDetail/index.d.ts +2 -1
- package/es/materials/sxp/popup/ConsentDetail/index.js +2 -2
- package/es/materials/sxp/popup/Iframe/index.d.ts +0 -4
- package/es/materials/sxp/popup/Iframe/index.js +4 -5
- package/es/materials/sxp/popup/Iframe/settingRender.js +0 -15
- package/lib/core/components/SxpPageRender/ConsentPopup.js +7 -7
- package/lib/core/components/SxpPageRender/index.js +5 -2
- package/lib/core/context/SxpDataSourceProvider.js +39 -18
- package/lib/core/utils/materials.js +5 -3
- package/lib/materials/sxp/consentPopup/Click/index.d.ts +19 -0
- package/lib/materials/sxp/consentPopup/Click/index.js +21 -0
- package/lib/materials/sxp/consentPopup/Click/material.d.ts +2 -0
- package/lib/materials/sxp/consentPopup/Click/material.js +52 -0
- package/lib/materials/sxp/consentPopup/Click/settingRender.d.ts +63 -0
- package/lib/materials/sxp/consentPopup/Click/settingRender.js +212 -0
- package/lib/materials/sxp/consentPopup/Display/index.d.ts +2 -2
- package/lib/materials/sxp/consentPopup/Display/index.js +7 -5
- package/lib/materials/sxp/consentPopup/Swipe/index.d.ts +12 -0
- package/lib/materials/sxp/consentPopup/Swipe/index.js +46 -0
- package/lib/materials/sxp/consentPopup/Swipe/material.d.ts +2 -0
- package/lib/materials/sxp/consentPopup/Swipe/material.js +28 -0
- package/lib/materials/sxp/consentPopup/Swipe/settingRender.d.ts +29 -0
- package/lib/materials/sxp/consentPopup/Swipe/settingRender.js +45 -0
- package/lib/materials/sxp/consentPopup/index.d.ts +2 -0
- package/lib/materials/sxp/consentPopup/index.js +2 -0
- package/lib/materials/sxp/popup/ConsentDetail/index.d.ts +2 -1
- package/lib/materials/sxp/popup/ConsentDetail/index.js +2 -2
- package/lib/materials/sxp/popup/Iframe/index.d.ts +0 -4
- package/lib/materials/sxp/popup/Iframe/index.js +4 -5
- package/lib/materials/sxp/popup/Iframe/settingRender.js +0 -15
- package/package.json +1 -1
@@ -1,15 +1,15 @@
|
|
1
|
-
import React, { memo
|
1
|
+
import React, { memo } from 'react';
|
2
2
|
import './index.less';
|
3
3
|
import withBindDataSource from '../../../core/hoc/withBindDataSource';
|
4
|
-
import {
|
4
|
+
import { useEditorDataProvider } from '../../../core/context/EditorDataProvider';
|
5
5
|
const Consent = ({ resolver, globalConfig }) => {
|
6
6
|
var _a, _b;
|
7
|
-
const
|
8
|
-
return getContsentState();
|
9
|
-
}, []);
|
10
|
-
const t = resolver === null || resolver === void 0 ? void 0 : resolver['Display'];
|
11
|
-
const Component = withBindDataSource(t);
|
7
|
+
const { consentPopupCate } = useEditorDataProvider();
|
12
8
|
const value = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consentPopup) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item;
|
13
|
-
|
9
|
+
if (!value)
|
10
|
+
return null;
|
11
|
+
const t = resolver === null || resolver === void 0 ? void 0 : resolver[value === null || value === void 0 ? void 0 : value.type];
|
12
|
+
const Component = withBindDataSource(t);
|
13
|
+
return (React.createElement(Component, Object.assign({}, value === null || value === void 0 ? void 0 : value.props, { style: value === null || value === void 0 ? void 0 : value.style, event: (value === null || value === void 0 ? void 0 : value.event) || {}, consentPopupCate: consentPopupCate })));
|
14
14
|
};
|
15
15
|
export default memo(Consent);
|
@@ -117,7 +117,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
117
117
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
118
118
|
productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
|
119
119
|
position: activeIndex + '',
|
120
|
-
fromKName: fk
|
120
|
+
fromKName: fk || fromKName,
|
121
121
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
122
122
|
ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
|
123
123
|
traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
|
@@ -144,9 +144,12 @@ 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);
|
147
148
|
handleH5EnterLink();
|
148
149
|
if (repCond) {
|
149
|
-
|
150
|
+
setTimeout(() => {
|
151
|
+
SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
|
152
|
+
});
|
150
153
|
backMainFeed('external', selectTag);
|
151
154
|
}
|
152
155
|
}
|
@@ -99,29 +99,32 @@ 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]);
|
102
106
|
const bffFetch = useCallback((path, options) => {
|
103
107
|
if (!bffDataSource)
|
104
108
|
return;
|
105
109
|
const url = bffDataSource.url;
|
106
|
-
const fakeUserId = storeAndLoadFeUserId();
|
107
110
|
if (options === null || options === void 0 ? void 0 : options.query) {
|
108
111
|
const queryString = qs.stringify(options.query);
|
109
112
|
path = `${path}?${queryString}`;
|
110
113
|
}
|
111
114
|
if (options.type === 'beacon' && navigator.sendBeacon) {
|
112
|
-
return navigator.sendBeacon(`${url}/api
|
115
|
+
return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
|
113
116
|
JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
|
114
117
|
], { type: 'application/json;charset=UTF-8' }));
|
115
118
|
}
|
116
119
|
return window
|
117
|
-
.fetch(`${url}/api
|
120
|
+
.fetch(`${url}/api/${path}`, {
|
118
121
|
headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers),
|
119
122
|
method: options.method,
|
120
123
|
body: JSON.stringify(options.body)
|
121
124
|
})
|
122
125
|
.then((res) => res.json())
|
123
126
|
.catch((err) => Promise.reject(err));
|
124
|
-
}, [bffDataSource]);
|
127
|
+
}, [bffDataSource, fakeUserId]);
|
125
128
|
const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
|
126
129
|
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
127
130
|
query = {
|
@@ -158,7 +161,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
158
161
|
const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
|
159
162
|
var _v, _w, _x, _y, _z, _0;
|
160
163
|
query.pageNum = pageNum;
|
161
|
-
result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
|
164
|
+
result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
|
162
165
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
163
166
|
return undefined;
|
164
167
|
}
|
@@ -180,7 +183,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
180
183
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
181
184
|
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 });
|
182
185
|
}
|
183
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
|
186
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
|
184
187
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
185
188
|
return undefined;
|
186
189
|
}
|
@@ -230,6 +233,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
230
233
|
return expire;
|
231
234
|
}, [data]);
|
232
235
|
const bffEventReport = useCallback(({ userInfo, eventInfo, reportLayId = true }) => {
|
236
|
+
var _a;
|
233
237
|
if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
|
234
238
|
return;
|
235
239
|
}
|
@@ -246,14 +250,23 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
246
250
|
console.log('userInfo:', userInfo);
|
247
251
|
console.log('eventInfo:', ef);
|
248
252
|
console.log('========= 结束 =========');
|
249
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(
|
253
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/CLD/${(_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}`, {
|
250
254
|
method: 'POST',
|
251
255
|
body: { userInfo: realUserInfo, eventInfo: realEventInfo },
|
252
256
|
type: 'beacon'
|
253
257
|
});
|
254
|
-
}, [
|
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
|
+
]);
|
255
268
|
const bffFbReport = useCallback(({ eventName, product }) => {
|
256
|
-
var _a, _b, _c, _d, _e;
|
269
|
+
var _a, _b, _c, _d, _e, _f;
|
257
270
|
if (!enableReportEvent ||
|
258
271
|
!enabledMetaConversionApi ||
|
259
272
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
|
@@ -265,7 +278,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
265
278
|
const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
|
266
279
|
const fix_par = {
|
267
280
|
event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
|
268
|
-
external_id:
|
281
|
+
external_id: fakeUserId,
|
269
282
|
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 : '',
|
270
283
|
fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
|
271
284
|
fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
|
@@ -317,22 +330,30 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
317
330
|
}
|
318
331
|
};
|
319
332
|
getEventParams(jsonParams);
|
320
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(
|
333
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/FB/${(_f = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _f === void 0 ? void 0 : _f['x-app-id']}/${eventName}`, {
|
321
334
|
method: 'POST',
|
322
335
|
body: jsonParams,
|
323
336
|
type: 'beacon'
|
324
337
|
});
|
325
|
-
}, [
|
338
|
+
}, [
|
339
|
+
bffFetch,
|
340
|
+
enableReportEvent,
|
341
|
+
enabledMetaConversionApi,
|
342
|
+
globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
|
343
|
+
globalConfig,
|
344
|
+
fakeUserId,
|
345
|
+
bffDataSource
|
346
|
+
]);
|
326
347
|
const bffMutateLike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
|
327
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/like', { method: 'POST', body }));
|
348
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/like', { method: 'POST', body }));
|
328
349
|
return res === null || res === void 0 ? void 0 : res.success;
|
329
350
|
}), [bffFetch]);
|
330
351
|
const bffMutateUnlike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
|
331
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/unlike', { method: 'POST', body }));
|
352
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/unlike', { method: 'POST', body }));
|
332
353
|
return res === null || res === void 0 ? void 0 : res.success;
|
333
354
|
}), [bffFetch]);
|
334
355
|
const bffSubmitForm = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
|
335
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/customform', { method: 'POST', body }));
|
356
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/customform', { method: 'POST', body }));
|
336
357
|
return res === null || res === void 0 ? void 0 : res.success;
|
337
358
|
}), [bffFetch]);
|
338
359
|
const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -346,7 +367,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
346
367
|
const key = val.split('=')[0];
|
347
368
|
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);
|
348
369
|
})) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
|
349
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
370
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
350
371
|
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 : []);
|
351
372
|
}
|
352
373
|
catch (e) {
|
@@ -420,10 +441,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
420
441
|
let curData;
|
421
442
|
let gldata;
|
422
443
|
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);
|
423
446
|
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];
|
424
447
|
if (id) {
|
425
|
-
layId = id;
|
426
|
-
setLayoutVariantId(id);
|
427
448
|
curData = dataList === null || dataList === void 0 ? void 0 : dataList.find((item) => (item === null || item === void 0 ? void 0 : item.id) === id);
|
428
449
|
if (curData) {
|
429
450
|
setPageData(curData);
|
@@ -32,14 +32,16 @@ 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 = '';
|
35
36
|
if ((!(product === null || product === void 0 ? void 0 : product.currency) || !(product === null || product === void 0 ? void 0 : product.price)) && isHiddenDef)
|
36
37
|
return null;
|
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
|
-
|
38
|
+
let price = Number((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);
|
39
|
+
if (typeof price !== 'number')
|
40
|
+
return text;
|
39
41
|
let priceSymbol = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.priceSymbol;
|
40
42
|
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 : '' : '$';
|
41
43
|
const isToLocStr = enableFormattedPrice === undefined || enableFormattedPrice;
|
42
|
-
let decPic = price.toString();
|
44
|
+
let decPic = price === null || price === void 0 ? void 0 : price.toString();
|
43
45
|
if (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.showTwoDecimalPoint) {
|
44
46
|
decPic = price === null || price === void 0 ? void 0 : price.toFixed(2);
|
45
47
|
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
2
|
+
import './index.less';
|
3
|
+
export interface IClickProps {
|
4
|
+
open?: boolean;
|
5
|
+
content?: string;
|
6
|
+
style?: Record<string, any>;
|
7
|
+
isTel?: boolean;
|
8
|
+
acceptButton?: {
|
9
|
+
text?: string;
|
10
|
+
style?: CSSProperties;
|
11
|
+
};
|
12
|
+
rejectButton?: {
|
13
|
+
text?: string;
|
14
|
+
style?: CSSProperties;
|
15
|
+
};
|
16
|
+
consentPopupCate?: string;
|
17
|
+
}
|
18
|
+
declare const _default: React.NamedExoticComponent<IClickProps>;
|
19
|
+
export default _default;
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import { __rest } from "tslib";
|
2
|
+
import React, { memo, useMemo } from 'react';
|
3
|
+
import './index.less';
|
4
|
+
import tel from './tel.png';
|
5
|
+
import ConsentDetail from '../../popup/ConsentDetail';
|
6
|
+
const Click = (_a) => {
|
7
|
+
var { isTel, open, content, style, consentPopupCate, acceptButton, rejectButton } = _a, props = __rest(_a, ["isTel", "open", "content", "style", "consentPopupCate", "acceptButton", "rejectButton"]);
|
8
|
+
const visivle = useMemo(() => {
|
9
|
+
return consentPopupCate || (open && style);
|
10
|
+
}, [consentPopupCate, open]);
|
11
|
+
const handleClickAccept = () => { };
|
12
|
+
const handleClickReject = () => { };
|
13
|
+
return (React.createElement(React.Fragment, null, isTel ? (React.createElement("img", { src: tel, style: { objectFit: 'cover', width: '100%', height: '100%' } })) : (React.createElement(React.Fragment, null, visivle && (React.createElement("div", { className: 'consentPopupClick' },
|
14
|
+
React.createElement("div", { className: 'consentPopupClick-container', style: style },
|
15
|
+
React.createElement(ConsentDetail, { content: content, style: { padding: 0 } }),
|
16
|
+
React.createElement("button", { style: acceptButton === null || acceptButton === void 0 ? void 0 : acceptButton.style, onClick: handleClickAccept }, acceptButton === null || acceptButton === void 0 ? void 0 : acceptButton.text),
|
17
|
+
React.createElement("button", { style: rejectButton === null || rejectButton === void 0 ? void 0 : rejectButton.style, onClick: handleClickReject }, rejectButton === null || rejectButton === void 0 ? void 0 : rejectButton.text))))))));
|
18
|
+
};
|
19
|
+
export default memo(Click);
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import settingRender from './settingRender';
|
2
|
+
import ClickComponent from '.';
|
3
|
+
import { createMaterial } from '../../../../core/create';
|
4
|
+
const Click = createMaterial(ClickComponent, {
|
5
|
+
displayName: 'Click Consent',
|
6
|
+
icon: '',
|
7
|
+
category: 'consentPopup',
|
8
|
+
type: 'Click',
|
9
|
+
related: {
|
10
|
+
settingRender,
|
11
|
+
bindableProps: []
|
12
|
+
},
|
13
|
+
defaulSetting: {
|
14
|
+
props: {
|
15
|
+
content: '<p><strong><span style="font-size:14px"><span style="line-height:3">Your Cookie Preferences</span></span></strong></p><p>We use cookie, including third-party cookies, to ensure the proper functioning and security of this site, to analyse its use, and to show you personalised content. You can authorise the use of all cookies by clicking on "Accept all cookies". If you click on "Reject all cookies", we will only use cookies necessary for the proper functioning and security of this site. To personalise on adjust your preferences at any time, click on "Cookies Settings" below or at the bottom of any Fendi.com webpage. For more information, read our Cookie Policy.</p><p></p>',
|
16
|
+
acceptButton: {
|
17
|
+
text: 'Accept all cookies',
|
18
|
+
style: {
|
19
|
+
backgroundColor: '#000',
|
20
|
+
height: 45,
|
21
|
+
color: '#fff',
|
22
|
+
fontSize: 12,
|
23
|
+
textAlign: 'center',
|
24
|
+
marginTop: 5,
|
25
|
+
marginBottom: 5
|
26
|
+
}
|
27
|
+
},
|
28
|
+
rejectButton: {
|
29
|
+
text: 'Reject all cookies',
|
30
|
+
style: {
|
31
|
+
backgroundColor: '#000',
|
32
|
+
height: 45,
|
33
|
+
color: '#fff',
|
34
|
+
fontSize: 12,
|
35
|
+
textAlign: 'center',
|
36
|
+
marginTop: 5,
|
37
|
+
marginBottom: 5
|
38
|
+
}
|
39
|
+
}
|
40
|
+
},
|
41
|
+
style: {
|
42
|
+
backgroundColor: '#fff',
|
43
|
+
padding: 18
|
44
|
+
}
|
45
|
+
},
|
46
|
+
sort: 2
|
47
|
+
});
|
48
|
+
export { Click };
|
@@ -0,0 +1,63 @@
|
|
1
|
+
declare const _default: ({
|
2
|
+
title: string;
|
3
|
+
child: {
|
4
|
+
type: string;
|
5
|
+
name: string[];
|
6
|
+
}[];
|
7
|
+
} | {
|
8
|
+
title: string;
|
9
|
+
child: ({
|
10
|
+
type: string;
|
11
|
+
label: string;
|
12
|
+
name: string[];
|
13
|
+
addonAfter?: undefined;
|
14
|
+
child?: undefined;
|
15
|
+
} | {
|
16
|
+
type: string;
|
17
|
+
label: string;
|
18
|
+
name: string[];
|
19
|
+
addonAfter: string;
|
20
|
+
child?: undefined;
|
21
|
+
} | {
|
22
|
+
type: string;
|
23
|
+
label: string;
|
24
|
+
child: ({
|
25
|
+
type: string;
|
26
|
+
name: string[];
|
27
|
+
max: number;
|
28
|
+
addonAfter?: undefined;
|
29
|
+
} | {
|
30
|
+
type: string;
|
31
|
+
name: string[];
|
32
|
+
addonAfter: string;
|
33
|
+
max: number;
|
34
|
+
})[];
|
35
|
+
name?: undefined;
|
36
|
+
addonAfter?: undefined;
|
37
|
+
} | {
|
38
|
+
type: string;
|
39
|
+
label: string;
|
40
|
+
child: {
|
41
|
+
type: string;
|
42
|
+
name: string[];
|
43
|
+
bottomText: string;
|
44
|
+
}[];
|
45
|
+
name?: undefined;
|
46
|
+
addonAfter?: undefined;
|
47
|
+
} | {
|
48
|
+
type: string;
|
49
|
+
label: string;
|
50
|
+
child: ({
|
51
|
+
type: string;
|
52
|
+
name: string[];
|
53
|
+
addonAfter?: undefined;
|
54
|
+
} | {
|
55
|
+
type: string;
|
56
|
+
name: string[];
|
57
|
+
addonAfter: string;
|
58
|
+
})[];
|
59
|
+
name?: undefined;
|
60
|
+
addonAfter?: undefined;
|
61
|
+
})[];
|
62
|
+
})[];
|
63
|
+
export default _default;
|
@@ -0,0 +1,210 @@
|
|
1
|
+
export default [
|
2
|
+
{
|
3
|
+
title: '全局设置',
|
4
|
+
child: [
|
5
|
+
{
|
6
|
+
type: 'Switch',
|
7
|
+
label: '弹窗开关',
|
8
|
+
name: ['props', 'open']
|
9
|
+
},
|
10
|
+
{
|
11
|
+
type: 'Color',
|
12
|
+
label: '背景色',
|
13
|
+
name: ['style', 'backgroundColor']
|
14
|
+
},
|
15
|
+
{
|
16
|
+
type: 'Number',
|
17
|
+
label: '内边距',
|
18
|
+
name: ['style', 'padding'],
|
19
|
+
addonAfter: 'px'
|
20
|
+
}
|
21
|
+
]
|
22
|
+
},
|
23
|
+
{
|
24
|
+
title: '弹窗文本',
|
25
|
+
child: [
|
26
|
+
{
|
27
|
+
type: 'RichText',
|
28
|
+
name: ['props', 'content']
|
29
|
+
}
|
30
|
+
]
|
31
|
+
},
|
32
|
+
{
|
33
|
+
title: '接受按钮样式',
|
34
|
+
child: [
|
35
|
+
{
|
36
|
+
type: 'Color',
|
37
|
+
label: '背景色',
|
38
|
+
name: ['props', 'acceptButton', 'style', 'backgroundColor']
|
39
|
+
},
|
40
|
+
{
|
41
|
+
type: 'Number',
|
42
|
+
label: '尺寸',
|
43
|
+
name: ['props', 'acceptButton', 'style', 'height'],
|
44
|
+
addonAfter: 'H'
|
45
|
+
},
|
46
|
+
{
|
47
|
+
type: 'Group',
|
48
|
+
label: '圆角',
|
49
|
+
child: [
|
50
|
+
{
|
51
|
+
type: 'Slider',
|
52
|
+
name: ['props', 'acceptButton', 'style', 'borderRadius'],
|
53
|
+
max: 100
|
54
|
+
},
|
55
|
+
{
|
56
|
+
type: 'Number',
|
57
|
+
name: ['props', 'acceptButton', 'style', 'borderRadius'],
|
58
|
+
addonAfter: 'px',
|
59
|
+
max: 100
|
60
|
+
}
|
61
|
+
]
|
62
|
+
},
|
63
|
+
{
|
64
|
+
type: 'TextMargin',
|
65
|
+
label: '边距',
|
66
|
+
name: ['props', 'acceptButton', 'style']
|
67
|
+
},
|
68
|
+
{
|
69
|
+
type: 'Group',
|
70
|
+
label: '字体',
|
71
|
+
child: [
|
72
|
+
{
|
73
|
+
type: 'Select',
|
74
|
+
name: ['props', 'acceptButton', 'style', 'fontFamily-cn'],
|
75
|
+
bottomText: '中文字体'
|
76
|
+
},
|
77
|
+
{
|
78
|
+
type: 'Select',
|
79
|
+
name: ['props', 'acceptButton', 'style', 'fontFamily-en'],
|
80
|
+
bottomText: '英文/其他字体'
|
81
|
+
}
|
82
|
+
]
|
83
|
+
},
|
84
|
+
{
|
85
|
+
type: 'Group',
|
86
|
+
label: '',
|
87
|
+
child: [
|
88
|
+
{
|
89
|
+
type: 'Color',
|
90
|
+
name: ['props', 'acceptButton', 'style', 'color']
|
91
|
+
},
|
92
|
+
{
|
93
|
+
type: 'Number',
|
94
|
+
name: ['props', 'acceptButton', 'style', 'fontSize'],
|
95
|
+
addonAfter: 'px'
|
96
|
+
}
|
97
|
+
]
|
98
|
+
},
|
99
|
+
{
|
100
|
+
label: '样式',
|
101
|
+
type: 'TextStyle',
|
102
|
+
name: ['props', 'acceptButton', 'style']
|
103
|
+
},
|
104
|
+
{
|
105
|
+
label: '对齐',
|
106
|
+
type: 'TextAlign',
|
107
|
+
name: ['props', 'acceptButton', 'style']
|
108
|
+
},
|
109
|
+
{
|
110
|
+
label: '间距',
|
111
|
+
type: 'TextSpace',
|
112
|
+
name: ['props', 'acceptButton', 'style']
|
113
|
+
},
|
114
|
+
{
|
115
|
+
label: '文本',
|
116
|
+
type: 'TextArea',
|
117
|
+
name: ['props', 'acceptButton', 'text']
|
118
|
+
}
|
119
|
+
]
|
120
|
+
},
|
121
|
+
{
|
122
|
+
title: '拒绝按钮样式',
|
123
|
+
child: [
|
124
|
+
{
|
125
|
+
type: 'Color',
|
126
|
+
label: '背景色',
|
127
|
+
name: ['props', 'rejectButton', 'style', 'backgroundColor']
|
128
|
+
},
|
129
|
+
{
|
130
|
+
type: 'Number',
|
131
|
+
label: '尺寸',
|
132
|
+
name: ['props', 'rejectButton', 'style', 'height'],
|
133
|
+
addonAfter: 'H'
|
134
|
+
},
|
135
|
+
{
|
136
|
+
type: 'Group',
|
137
|
+
label: '圆角',
|
138
|
+
child: [
|
139
|
+
{
|
140
|
+
type: 'Slider',
|
141
|
+
name: ['props', 'rejectButton', 'style', 'borderRadius'],
|
142
|
+
max: 100
|
143
|
+
},
|
144
|
+
{
|
145
|
+
type: 'Number',
|
146
|
+
name: ['props', 'rejectButton', 'style', 'borderRadius'],
|
147
|
+
addonAfter: 'px',
|
148
|
+
max: 100
|
149
|
+
}
|
150
|
+
]
|
151
|
+
},
|
152
|
+
{
|
153
|
+
type: 'TextMargin',
|
154
|
+
label: '边距',
|
155
|
+
name: ['props', 'acceptButton', 'style']
|
156
|
+
},
|
157
|
+
{
|
158
|
+
type: 'Group',
|
159
|
+
label: '字体',
|
160
|
+
child: [
|
161
|
+
{
|
162
|
+
type: 'Select',
|
163
|
+
name: ['props', 'rejectButton', 'style', 'fontFamily-cn'],
|
164
|
+
bottomText: '中文字体'
|
165
|
+
},
|
166
|
+
{
|
167
|
+
type: 'Select',
|
168
|
+
name: ['props', 'rejectButton', 'style', 'fontFamily-en'],
|
169
|
+
bottomText: '英文/其他字体'
|
170
|
+
}
|
171
|
+
]
|
172
|
+
},
|
173
|
+
{
|
174
|
+
type: 'Group',
|
175
|
+
label: '',
|
176
|
+
child: [
|
177
|
+
{
|
178
|
+
type: 'Color',
|
179
|
+
name: ['props', 'rejectButton', 'style', 'color']
|
180
|
+
},
|
181
|
+
{
|
182
|
+
type: 'Number',
|
183
|
+
name: ['props', 'rejectButton', 'style', 'fontSize'],
|
184
|
+
addonAfter: 'px'
|
185
|
+
}
|
186
|
+
]
|
187
|
+
},
|
188
|
+
{
|
189
|
+
label: '样式',
|
190
|
+
type: 'TextStyle',
|
191
|
+
name: ['props', 'rejectButton', 'style']
|
192
|
+
},
|
193
|
+
{
|
194
|
+
label: '对齐',
|
195
|
+
type: 'TextAlign',
|
196
|
+
name: ['props', 'rejectButton', 'style']
|
197
|
+
},
|
198
|
+
{
|
199
|
+
label: '间距',
|
200
|
+
type: 'TextSpace',
|
201
|
+
name: ['props', 'rejectButton', 'style']
|
202
|
+
},
|
203
|
+
{
|
204
|
+
label: '文本',
|
205
|
+
type: 'TextArea',
|
206
|
+
name: ['props', 'rejectButton', 'text']
|
207
|
+
}
|
208
|
+
]
|
209
|
+
}
|
210
|
+
];
|
@@ -13,9 +13,9 @@ export interface IDisplayProps {
|
|
13
13
|
};
|
14
14
|
style?: Record<string, any>;
|
15
15
|
isTel?: boolean;
|
16
|
-
onClick?: () => void;
|
17
|
-
contsentState?: boolean;
|
18
16
|
isShowClose?: boolean;
|
17
|
+
consentPopupCate?: string;
|
18
|
+
onClick?: () => void;
|
19
19
|
}
|
20
20
|
declare const _default: React.NamedExoticComponent<IDisplayProps>;
|
21
21
|
export default _default;
|
@@ -1,18 +1,20 @@
|
|
1
1
|
import { __rest } from "tslib";
|
2
2
|
import React, { memo, useCallback, useMemo, useState } from 'react';
|
3
3
|
import './index.less';
|
4
|
-
import { useEditorDataProvider } from '../../../../core/context/EditorDataProvider';
|
5
4
|
import closeSvg from './close.svg';
|
6
5
|
import tel from './tel.png';
|
7
6
|
import { setFontForText } from '../../../../core/utils/tool';
|
7
|
+
import { getContsentState } from '../../../../core/utils/localStore';
|
8
8
|
const Display = (_a) => {
|
9
9
|
var _b, _c;
|
10
|
-
var { isTel, isShowOnce, open, content, interaction, style, onClick,
|
11
|
-
const { consentPopupCate } = useEditorDataProvider();
|
10
|
+
var { isTel, isShowOnce, open, content, interaction, style, onClick, isShowClose, consentPopupCate } = _a, props = __rest(_a, ["isTel", "isShowOnce", "open", "content", "interaction", "style", "onClick", "isShowClose", "consentPopupCate"]);
|
12
11
|
const [isClose, setIsClose] = useState(false);
|
12
|
+
const contsentState = useMemo(() => {
|
13
|
+
return getContsentState();
|
14
|
+
}, []);
|
13
15
|
const visivle = useMemo(() => {
|
14
|
-
return consentPopupCate
|
15
|
-
}, [consentPopupCate, open, isClose]);
|
16
|
+
return consentPopupCate || (open && (isShowOnce || contsentState) && style && !isClose);
|
17
|
+
}, [consentPopupCate, open, isClose, contsentState]);
|
16
18
|
const handleClickClose = useCallback(() => {
|
17
19
|
setIsClose(true);
|
18
20
|
}, []);
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import './index.less';
|
3
|
+
export interface ISwipeProps {
|
4
|
+
open?: boolean;
|
5
|
+
content?: string;
|
6
|
+
style?: Record<string, any>;
|
7
|
+
isTel?: boolean;
|
8
|
+
consentPopupCate?: string;
|
9
|
+
swipeIcon?: string;
|
10
|
+
}
|
11
|
+
declare const _default: React.NamedExoticComponent<ISwipeProps>;
|
12
|
+
export default _default;
|