pb-sxp-ui 1.0.37 → 1.0.39
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 +125 -452
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -6
- package/dist/index.js +125 -451
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +3 -3
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +3 -3
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +129 -455
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +3 -3
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/VideoWidget/index.js +79 -46
- package/es/core/components/SxpPageRender/WaterFall/index.js +1 -1
- package/es/core/components/SxpPageRender/index.js +7 -7
- package/es/core/context/SxpDataSourceProvider.js +1 -1
- package/es/core/hooks/useEventReport.js +4 -4
- package/es/index.d.ts +0 -1
- package/es/index.js +0 -1
- package/es/materials/sxp/popup/CommodityDetail/index.js +6 -6
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -9
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +79 -46
- package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -1
- package/lib/core/components/SxpPageRender/index.js +7 -7
- package/lib/core/context/SxpDataSourceProvider.js +1 -1
- package/lib/core/hooks/useEventReport.js +4 -4
- package/lib/index.d.ts +0 -1
- package/lib/index.js +1 -3
- package/lib/materials/sxp/popup/CommodityDetail/index.js +6 -6
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -9
- package/package.json +1 -2
- package/es/core/components/DiyPortalPreview/PictureGroup.d.ts +0 -13
- package/es/core/components/DiyPortalPreview/PictureGroup.js +0 -11
- package/es/core/components/DiyPortalPreview/VideoWidget.d.ts +0 -15
- package/es/core/components/DiyPortalPreview/VideoWidget.js +0 -236
- package/es/core/components/DiyPortalPreview/index.d.ts +0 -6
- package/es/core/components/DiyPortalPreview/index.js +0 -112
- package/lib/core/components/DiyPortalPreview/PictureGroup.d.ts +0 -13
- package/lib/core/components/DiyPortalPreview/PictureGroup.js +0 -14
- package/lib/core/components/DiyPortalPreview/VideoWidget.d.ts +0 -15
- package/lib/core/components/DiyPortalPreview/VideoWidget.js +0 -239
- package/lib/core/components/DiyPortalPreview/index.d.ts +0 -6
- package/lib/core/components/DiyPortalPreview/index.js +0 -115
@@ -1,115 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
const tslib_1 = require("tslib");
|
4
|
-
const react_1 = tslib_1.__importStar(require("react"));
|
5
|
-
const Nudge_1 = tslib_1.__importDefault(require("../SxpPageRender/Nudge"));
|
6
|
-
const RenderCard_1 = tslib_1.__importDefault(require("../SxpPageRender/RenderCard"));
|
7
|
-
const ExpandableText_1 = tslib_1.__importDefault(require("../SxpPageRender/ExpandableText"));
|
8
|
-
const Hashtag_1 = tslib_1.__importDefault(require("../SxpPageRender/Hashtag"));
|
9
|
-
const LikeButton_1 = tslib_1.__importDefault(require("../SxpPageRender/LikeButton"));
|
10
|
-
const ToggleButton_1 = tslib_1.__importDefault(require("../SxpPageRender/ToggleButton"));
|
11
|
-
const useIconLink_1 = require("../SxpPageRender/useIconLink");
|
12
|
-
const PictureGroup_1 = tslib_1.__importDefault(require("./PictureGroup"));
|
13
|
-
const VideoWidget_1 = tslib_1.__importDefault(require("./VideoWidget"));
|
14
|
-
const _materials_ = tslib_1.__importStar(require("../../../materials"));
|
15
|
-
const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
|
16
|
-
const RESOLVER = {};
|
17
|
-
Object.values(_materials_).forEach((v) => {
|
18
|
-
RESOLVER[v.extend.type] = v;
|
19
|
-
});
|
20
|
-
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
21
|
-
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
22
|
-
const DiyPortalPreview = ({ data, globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain }) => {
|
23
|
-
const height = (0, react_1.useMemo)(() => {
|
24
|
-
return (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo) ? containerHeight - 45 : containerHeight;
|
25
|
-
}, [globalConfig, containerHeight]);
|
26
|
-
const renderContent = (rec, index) => {
|
27
|
-
var _a, _b, _c, _d;
|
28
|
-
if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
|
29
|
-
return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
|
30
|
-
}
|
31
|
-
if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
|
32
|
-
return (react_1.default.createElement(PictureGroup_1.default, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
|
33
|
-
}
|
34
|
-
if (rec.product) {
|
35
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
|
36
|
-
return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
|
37
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
38
|
-
const t = RESOLVER[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
39
|
-
const Component = (0, withBindDataSource_1.default)(t);
|
40
|
-
const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
|
41
|
-
return (react_1.default.createElement(Component, Object.assign({ key: `${index}${idx}`, textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.textStyle), bindDatas: (_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.bindDatas) !== null && _e !== void 0 ? _e : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.props, { event: ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.event) || {}, id: value === null || value === void 0 ? void 0 : value.id, rec: rec, isPost: true, tipText: tipText, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.style), { width: containerWidth, height, overflow: 'auto' }), index: index })));
|
42
|
-
});
|
43
|
-
}
|
44
|
-
}
|
45
|
-
};
|
46
|
-
const renderLogo = (0, react_1.useMemo)(() => {
|
47
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
|
48
|
-
return (react_1.default.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
|
49
|
-
react_1.default.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
|
50
|
-
}
|
51
|
-
return null;
|
52
|
-
}, [globalConfig]);
|
53
|
-
const renderBottom = (rec, index) => {
|
54
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
55
|
-
if (rec.video) {
|
56
|
-
return (react_1.default.createElement(react_1.default.Fragment, null,
|
57
|
-
((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
|
58
|
-
react_1.default.createElement("div", { className: 'clc-sxp-bottom' },
|
59
|
-
react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
|
60
|
-
react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
|
61
|
-
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })),
|
62
|
-
react_1.default.createElement("div", null,
|
63
|
-
react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }) })),
|
64
|
-
react_1.default.createElement(Hashtag_1.default, { index: index, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
|
65
|
-
}
|
66
|
-
return null;
|
67
|
-
};
|
68
|
-
const likeIcon = (0, useIconLink_1.useIconLink)(defaultLikeIconPath, appDomain);
|
69
|
-
const unlikeIcon = (0, useIconLink_1.useIconLink)(defaultUnLikeIconPath, appDomain);
|
70
|
-
const renderLikeButton = (rec, index) => {
|
71
|
-
var _a, _b, _c, _d;
|
72
|
-
if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
|
73
|
-
return;
|
74
|
-
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
|
75
|
-
if (top < 40) {
|
76
|
-
top += 40;
|
77
|
-
}
|
78
|
-
if (rec.video) {
|
79
|
-
return (react_1.default.createElement(LikeButton_1.default, { key: rec.position, activeIcon: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon) !== null && _b !== void 0 ? _b : likeIcon, unActicveIcon: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon) !== null && _c !== void 0 ? _c : unlikeIcon, position: index, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
|
80
|
-
top,
|
81
|
-
right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0
|
82
|
-
} }));
|
83
|
-
}
|
84
|
-
return null;
|
85
|
-
};
|
86
|
-
const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
|
87
|
-
const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
|
88
|
-
const renderView = (rec, index) => {
|
89
|
-
var _a, _b, _c, _d;
|
90
|
-
return (react_1.default.createElement("div", { style: { position: 'relative' } },
|
91
|
-
renderLogo,
|
92
|
-
react_1.default.createElement(ToggleButton_1.default, { style: {
|
93
|
-
position: 'absolute',
|
94
|
-
right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
|
95
|
-
visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[index]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
|
96
|
-
bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
|
97
|
-
zIndex: 999
|
98
|
-
}, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon }),
|
99
|
-
renderContent(rec, index),
|
100
|
-
renderBottom(rec, index),
|
101
|
-
renderLikeButton(rec, index)));
|
102
|
-
};
|
103
|
-
return (react_1.default.createElement("div", { style: {
|
104
|
-
width: '100%',
|
105
|
-
height: containerHeight,
|
106
|
-
display: 'flex',
|
107
|
-
boxSizing: 'border-box',
|
108
|
-
gap: 16,
|
109
|
-
pointerEvents: 'none',
|
110
|
-
userSelect: 'none'
|
111
|
-
} }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
|
112
|
-
return renderView(rec, index);
|
113
|
-
})));
|
114
|
-
};
|
115
|
-
exports.default = (0, react_1.memo)(DiyPortalPreview);
|