pb-sxp-ui 1.15.12-alpha.8 → 1.15.13-alpha.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 +666 -56
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +664 -55
- 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 +666 -56
- 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/DiyStoryPreview/PictureGroup.d.ts +16 -0
- package/es/core/components/DiyStoryPreview/PictureGroup.js +34 -0
- package/es/core/components/DiyStoryPreview/VideoWidget.d.ts +17 -0
- package/es/core/components/DiyStoryPreview/VideoWidget.js +196 -0
- package/es/core/components/DiyStoryPreview/index.d.ts +28 -0
- package/es/core/components/DiyStoryPreview/index.js +377 -0
- package/es/core/components/SxpPageRender/ExpandableText.js +10 -2
- package/es/core/components/SxpPageRender/RenderCard.js +4 -4
- package/es/core/context/SxpDataSourceProvider.js +5 -17
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/es/materials/sxp/template/MultiCommodity/index.js +1 -1
- package/es/materials/sxp/template/MultiCommodityDiro/index.js +2 -1
- package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -1
- package/es/materials/sxp/template/components/EventProvider.js +2 -2
- package/lib/core/components/DiyStoryPreview/PictureGroup.d.ts +16 -0
- package/lib/core/components/DiyStoryPreview/PictureGroup.js +37 -0
- package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +17 -0
- package/lib/core/components/DiyStoryPreview/VideoWidget.js +199 -0
- package/lib/core/components/DiyStoryPreview/index.d.ts +28 -0
- package/lib/core/components/DiyStoryPreview/index.js +380 -0
- package/lib/core/components/SxpPageRender/ExpandableText.js +10 -2
- package/lib/core/components/SxpPageRender/RenderCard.js +4 -4
- package/lib/core/context/SxpDataSourceProvider.js +5 -17
- package/lib/index.d.ts +1 -0
- package/lib/index.js +3 -1
- package/lib/materials/sxp/template/MultiCommodity/index.js +1 -1
- package/lib/materials/sxp/template/MultiCommodityDiro/index.js +2 -1
- package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -1
- package/lib/materials/sxp/template/components/EventProvider.js +2 -2
- package/package.json +1 -1
@@ -1,8 +1,8 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
3
|
const tslib_1 = require("tslib");
|
4
|
-
const tool_1 = require("../../../core/utils/tool");
|
5
4
|
const react_1 = tslib_1.__importStar(require("react"));
|
5
|
+
const tool_1 = require("../../../core/utils/tool");
|
6
6
|
const limitTextLastWholeWord = (originalText = '', limit) => {
|
7
7
|
const chineseRegex = /[\u4e00-\u9fa5]+/;
|
8
8
|
if (chineseRegex.test(originalText)) {
|
@@ -53,7 +53,15 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
53
53
|
wordBreak: 'break-word'
|
54
54
|
}, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
55
55
|
react_1.default.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
56
|
-
text && isPost && isShow && (react_1.default.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
|
56
|
+
text && isPost && isShow && (react_1.default.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
|
57
|
+
textDecoration: 'underline',
|
58
|
+
cursor: 'pointer',
|
59
|
+
outline: 'none',
|
60
|
+
border: 'none',
|
61
|
+
boxSizing: 'content-box',
|
62
|
+
padding: 0,
|
63
|
+
background: 'transparent'
|
64
|
+
}, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
|
57
65
|
__html: (0, tool_1.setFontForText)(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
|
58
66
|
} }))));
|
59
67
|
};
|
@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
4
4
|
const react_1 = tslib_1.__importStar(require("react"));
|
5
5
|
require("./index.less");
|
6
|
+
const lodash_1 = require("lodash");
|
6
7
|
const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
|
7
8
|
const hooks_1 = require("../../../core/hooks");
|
8
|
-
const lodash_1 = require("lodash");
|
9
9
|
const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive, value }) => {
|
10
10
|
const { schema } = (0, hooks_1.useEditor)();
|
11
11
|
if (!(rec === null || rec === void 0 ? void 0 : rec.video))
|
@@ -29,10 +29,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
|
|
29
29
|
const Component = (0, withBindDataSource_1.default)(t);
|
30
30
|
const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
|
31
31
|
const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
|
32
|
-
|
32
|
+
const style = (0, lodash_1.cloneDeep)((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
|
33
33
|
if (style.hasOwnProperty('backdropFilter')) {
|
34
|
-
|
35
|
-
style
|
34
|
+
const sbf = style.backdropFilter;
|
35
|
+
style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
|
36
36
|
}
|
37
37
|
return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
|
38
38
|
}
|
@@ -117,12 +117,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
117
117
|
}
|
118
118
|
if (options.type === 'beacon' && navigator.sendBeacon) {
|
119
119
|
return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
|
120
|
-
JSON.stringify({
|
121
|
-
|
122
|
-
})
|
123
|
-
], {
|
124
|
-
type: 'application/json;charset=UTF-8'
|
125
|
-
}));
|
120
|
+
JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
|
121
|
+
], { type: 'application/json;charset=UTF-8' }));
|
126
122
|
}
|
127
123
|
return window
|
128
124
|
.fetch(`${url}/api/${path}`, {
|
@@ -276,7 +272,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
276
272
|
console.log('userInfo:', userInfo);
|
277
273
|
console.log('eventInfo:', ef);
|
278
274
|
console.log('========= 结束 =========');
|
279
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/
|
275
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/CLD/${(_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}`, {
|
280
276
|
method: 'POST',
|
281
277
|
body: { userInfo: realUserInfo, eventInfo: realEventInfo },
|
282
278
|
type: 'beacon'
|
@@ -292,7 +288,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
292
288
|
bffDataSource
|
293
289
|
]);
|
294
290
|
const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
|
295
|
-
var _a, _b, _c, _d, _e, _f
|
291
|
+
var _a, _b, _c, _d, _e, _f;
|
296
292
|
if (!enableReportEvent ||
|
297
293
|
!enabledMetaConversionApi ||
|
298
294
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
|
@@ -356,15 +352,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
356
352
|
}
|
357
353
|
};
|
358
354
|
getEventParams(jsonParams);
|
359
|
-
|
360
|
-
const queryString = location.search.slice(1);
|
361
|
-
(_f = (0, tool_1.splitUrlParams)(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
|
362
|
-
const key = val.split('=')[0];
|
363
|
-
const value = val.split('=')[1];
|
364
|
-
params[key] = value;
|
365
|
-
});
|
366
|
-
const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
|
367
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_g = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _g === void 0 ? void 0 : _g['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
|
355
|
+
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}`, {
|
368
356
|
method: 'POST',
|
369
357
|
body: jsonParams,
|
370
358
|
type: 'beacon'
|
package/lib/index.d.ts
CHANGED
@@ -4,6 +4,7 @@ export * as core from './core';
|
|
4
4
|
export * as materials from './materials';
|
5
5
|
export { default as SxpPageRender } from './core/components/SxpPageRender';
|
6
6
|
export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
|
7
|
+
export { default as DiyStoryPreview } from './core/components/DiyStoryPreview';
|
7
8
|
export { default as Modal } from './core/components/SxpPageRender/Modal';
|
8
9
|
export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
|
9
10
|
export { default as SxpPageCore } from './core/components/SxpPageCore';
|
package/lib/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.DiyPortalPreview = exports.SxpPageRender = exports.materials = exports.core = void 0;
|
3
|
+
exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.DiyStoryPreview = exports.DiyPortalPreview = exports.SxpPageRender = exports.materials = exports.core = void 0;
|
4
4
|
const tslib_1 = require("tslib");
|
5
5
|
const Pagebuilder_1 = require("./core/Pagebuilder");
|
6
6
|
require("./index.css");
|
@@ -10,6 +10,8 @@ var SxpPageRender_1 = require("./core/components/SxpPageRender");
|
|
10
10
|
Object.defineProperty(exports, "SxpPageRender", { enumerable: true, get: function () { return tslib_1.__importDefault(SxpPageRender_1).default; } });
|
11
11
|
var DiyPortalPreview_1 = require("./core/components/DiyPortalPreview");
|
12
12
|
Object.defineProperty(exports, "DiyPortalPreview", { enumerable: true, get: function () { return tslib_1.__importDefault(DiyPortalPreview_1).default; } });
|
13
|
+
var DiyStoryPreview_1 = require("./core/components/DiyStoryPreview");
|
14
|
+
Object.defineProperty(exports, "DiyStoryPreview", { enumerable: true, get: function () { return tslib_1.__importDefault(DiyStoryPreview_1).default; } });
|
13
15
|
var Modal_1 = require("./core/components/SxpPageRender/Modal");
|
14
16
|
Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return tslib_1.__importDefault(Modal_1).default; } });
|
15
17
|
var SxpDataSourceProvider_1 = require("./core/context/SxpDataSourceProvider");
|
@@ -6,10 +6,10 @@ const react_1 = tslib_1.__importStar(require("react"));
|
|
6
6
|
const react_2 = require("swiper/react");
|
7
7
|
const Img_1 = tslib_1.__importDefault(require("../components/Img"));
|
8
8
|
const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
|
9
|
+
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
9
10
|
const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
|
10
11
|
const hooks_1 = require("../../../../core/hooks");
|
11
12
|
const tool_1 = require("../../../../core/utils/tool");
|
12
|
-
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
13
13
|
const MultiCommodity = (_a) => {
|
14
14
|
var _b, _c;
|
15
15
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
|
@@ -6,15 +6,16 @@ const react_1 = tslib_1.__importStar(require("react"));
|
|
6
6
|
const react_2 = require("swiper/react");
|
7
7
|
const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
|
8
8
|
const Img_1 = tslib_1.__importDefault(require("../components/Img"));
|
9
|
+
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
9
10
|
const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
|
10
11
|
const hooks_1 = require("../../../../core/hooks");
|
11
12
|
const tool_1 = require("../../../../core/utils/tool");
|
12
|
-
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
13
13
|
const MultiCommodityDiro = (_a) => {
|
14
14
|
var _b, _c;
|
15
15
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
|
16
16
|
const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
|
17
17
|
const [products] = (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]);
|
18
|
+
console.log(recData, '222');
|
18
19
|
return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
19
20
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
20
21
|
return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, { key: itemIndex, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
@@ -6,15 +6,16 @@ const react_1 = tslib_1.__importStar(require("react"));
|
|
6
6
|
const react_2 = require("swiper/react");
|
7
7
|
const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
|
8
8
|
const Img_1 = tslib_1.__importDefault(require("../components/Img"));
|
9
|
+
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
9
10
|
const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
|
10
11
|
const hooks_1 = require("../../../../core/hooks");
|
11
12
|
const tool_1 = require("../../../../core/utils/tool");
|
12
|
-
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
13
13
|
const MultiCommodityDiroNew = (_a) => {
|
14
14
|
var _b, _c;
|
15
15
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
|
16
16
|
const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
|
17
17
|
const [products] = (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]);
|
18
|
+
console.log(recData, '333');
|
18
19
|
return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
19
20
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
20
21
|
return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, { key: itemIndex, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
@@ -15,7 +15,7 @@ const EventProvider = (_a) => {
|
|
15
15
|
const handleClick = (0, lodash_1.throttle)((e) => {
|
16
16
|
var _a, _b, _c, _d, _e, _f;
|
17
17
|
e.preventDefault();
|
18
|
-
const item = multItem
|
18
|
+
const item = multItem || ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video);
|
19
19
|
ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
|
20
20
|
eventSubject: 'clickCta',
|
21
21
|
eventDescription: 'User clicked the CTA'
|
@@ -42,6 +42,6 @@ const EventProvider = (_a) => {
|
|
42
42
|
setElement(null);
|
43
43
|
}
|
44
44
|
}, [element, popup]);
|
45
|
-
return (react_1.default.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
|
45
|
+
return (react_1.default.createElement("button", { ref: ref, className: className, style: Object.assign({ outline: 'none', border: 'none', boxSizing: 'content-box', padding: 0, background: 'transparent', display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
|
46
46
|
};
|
47
47
|
exports.default = (0, react_1.memo)(EventProvider);
|