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.
Files changed (43) hide show
  1. package/dist/index.cjs +666 -56
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +664 -55
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +6 -6
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +6 -6
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +666 -56
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +6 -6
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/DiyStoryPreview/PictureGroup.d.ts +16 -0
  14. package/es/core/components/DiyStoryPreview/PictureGroup.js +34 -0
  15. package/es/core/components/DiyStoryPreview/VideoWidget.d.ts +17 -0
  16. package/es/core/components/DiyStoryPreview/VideoWidget.js +196 -0
  17. package/es/core/components/DiyStoryPreview/index.d.ts +28 -0
  18. package/es/core/components/DiyStoryPreview/index.js +377 -0
  19. package/es/core/components/SxpPageRender/ExpandableText.js +10 -2
  20. package/es/core/components/SxpPageRender/RenderCard.js +4 -4
  21. package/es/core/context/SxpDataSourceProvider.js +5 -17
  22. package/es/index.d.ts +1 -0
  23. package/es/index.js +1 -0
  24. package/es/materials/sxp/template/MultiCommodity/index.js +1 -1
  25. package/es/materials/sxp/template/MultiCommodityDiro/index.js +2 -1
  26. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -1
  27. package/es/materials/sxp/template/components/EventProvider.js +2 -2
  28. package/lib/core/components/DiyStoryPreview/PictureGroup.d.ts +16 -0
  29. package/lib/core/components/DiyStoryPreview/PictureGroup.js +37 -0
  30. package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +17 -0
  31. package/lib/core/components/DiyStoryPreview/VideoWidget.js +199 -0
  32. package/lib/core/components/DiyStoryPreview/index.d.ts +28 -0
  33. package/lib/core/components/DiyStoryPreview/index.js +380 -0
  34. package/lib/core/components/SxpPageRender/ExpandableText.js +10 -2
  35. package/lib/core/components/SxpPageRender/RenderCard.js +4 -4
  36. package/lib/core/context/SxpDataSourceProvider.js +5 -17
  37. package/lib/index.d.ts +1 -0
  38. package/lib/index.js +3 -1
  39. package/lib/materials/sxp/template/MultiCommodity/index.js +1 -1
  40. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +2 -1
  41. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -1
  42. package/lib/materials/sxp/template/components/EventProvider.js +2 -2
  43. 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: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
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
- let style = (0, lodash_1.cloneDeep)((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
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
- let sbf = style['backdropFilter'];
35
- style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
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
- body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
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/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}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
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, _g;
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
- const params = {};
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 ? 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;
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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.15.12-alpha.8",
3
+ "version": "1.15.13-alpha.2",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",