pb-sxp-ui 1.0.102 → 1.0.104
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 +168 -37
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +4 -9
- package/dist/index.js +168 -37
- 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 +168 -37
- 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/Navbar.js +1 -1
- package/es/core/components/SxpPageRender/Nudge/index.js +1 -1
- package/es/core/components/SxpPageRender/PictureGroup/index.js +10 -2
- package/es/core/components/SxpPageRender/WaterFall/List.js +1 -1
- package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js +1 -1
- package/es/core/components/SxpPageRender/index.d.ts +2 -0
- package/es/core/components/SxpPageRender/index.js +3 -3
- package/es/materials/sxp/HashTag/material.js +2 -1
- package/es/materials/sxp/popup/CommodityDetail/index.js +1 -1
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
- package/es/materials/sxp/template/Link/index.d.ts +6 -1
- package/es/materials/sxp/template/Link/index.js +9 -6
- package/es/materials/sxp/template/Link/material.js +15 -1
- package/es/materials/sxp/template/Link/settingRender.d.ts +57 -0
- package/es/materials/sxp/template/Link/settingRender.js +102 -0
- package/es/materials/sxp/template/components/Img.js +1 -1
- package/es/materials/sxp/template/components/settingRender.js +5 -0
- package/lib/core/components/SxpPageRender/Navbar.js +1 -1
- package/lib/core/components/SxpPageRender/Nudge/index.js +1 -1
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +10 -2
- package/lib/core/components/SxpPageRender/WaterFall/List.js +1 -1
- package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +1 -1
- package/lib/core/components/SxpPageRender/index.d.ts +2 -0
- package/lib/core/components/SxpPageRender/index.js +3 -3
- package/lib/materials/sxp/HashTag/material.js +2 -1
- package/lib/materials/sxp/popup/CommodityDetail/index.js +1 -1
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
- package/lib/materials/sxp/template/Link/index.d.ts +6 -1
- package/lib/materials/sxp/template/Link/index.js +9 -6
- package/lib/materials/sxp/template/Link/material.js +15 -1
- package/lib/materials/sxp/template/Link/settingRender.d.ts +57 -0
- package/lib/materials/sxp/template/Link/settingRender.js +104 -0
- package/lib/materials/sxp/template/components/Img.js +1 -1
- package/lib/materials/sxp/template/components/settingRender.js +5 -0
- package/package.json +1 -1
@@ -6,7 +6,7 @@ const Navbar = ({ icon, styles, textStyle, onClose }) => {
|
|
6
6
|
const { waterFallData, setOpenHashtag } = useSxpDataSource();
|
7
7
|
return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
|
8
8
|
React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
|
9
|
-
React.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle, dangerouslySetInnerHTML: {
|
9
|
+
React.createElement("div", { className: 'clc-sxp-nav-title', style: Object.assign(Object.assign({}, textStyle), { paddingLeft: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.textAlign) === 'left' ? '35px' : 0 }), dangerouslySetInnerHTML: {
|
10
10
|
__html: setFontForText(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`, textStyle)
|
11
11
|
} })));
|
12
12
|
};
|
@@ -10,7 +10,7 @@ const Nudge = ({ nudge }) => {
|
|
10
10
|
borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
|
11
11
|
} },
|
12
12
|
(nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (React.createElement("img", { src: nudge.icon, alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
|
13
|
-
React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }), dangerouslySetInnerHTML: {
|
13
|
+
React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0, marginTop: 0 }), dangerouslySetInnerHTML: {
|
14
14
|
__html: setFontForText(nudge === null || nudge === void 0 ? void 0 : nudge.content, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle)
|
15
15
|
} })))));
|
16
16
|
};
|
@@ -3,8 +3,9 @@ import { Autoplay, Pagination } from 'swiper/modules';
|
|
3
3
|
import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
|
4
4
|
import Picture from './Picture';
|
5
5
|
import { useSxpDataSource } from '../../../../core/hooks';
|
6
|
+
import { css } from '@emotion/css';
|
6
7
|
const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
7
|
-
var _a;
|
8
|
+
var _a, _b;
|
8
9
|
const ref = useRef();
|
9
10
|
const { isActive } = useSwiperSlide();
|
10
11
|
const { sxpParameter, openHashtag } = useSxpDataSource();
|
@@ -28,7 +29,14 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
|
|
28
29
|
setIsLoad(true);
|
29
30
|
}
|
30
31
|
}, [isLoad]);
|
31
|
-
return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
|
32
|
+
return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
|
33
|
+
clickable: true,
|
34
|
+
bulletActiveClass: 'swipe-item-active-bullet'
|
35
|
+
}, className: css(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && {
|
36
|
+
'.swiper-pagination': {
|
37
|
+
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0
|
38
|
+
}
|
39
|
+
}))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
|
32
40
|
return (React.createElement(SwiperSlide, { key: index },
|
33
41
|
React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
34
42
|
})));
|
@@ -169,7 +169,7 @@ export default function WaterfallList(_a) {
|
|
169
169
|
var _a, _b;
|
170
170
|
if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
|
171
171
|
reportTagsView();
|
172
|
-
window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
|
172
|
+
window.location.href = window.getJointUtmLink((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link);
|
173
173
|
}
|
174
174
|
};
|
175
175
|
return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
|
@@ -277,7 +277,7 @@ export default function WaterfallList(_a) {
|
|
277
277
|
var _a, _b;
|
278
278
|
if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
|
279
279
|
reportTagsView();
|
280
|
-
window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
|
280
|
+
window.location.href = window.getJointUtmLink((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link);
|
281
281
|
}
|
282
282
|
};
|
283
283
|
return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
|
@@ -7,6 +7,7 @@ export type postConfigType = {
|
|
7
7
|
delay?: number;
|
8
8
|
bgWay?: '1' | '2';
|
9
9
|
bgColor?: string;
|
10
|
+
marginBottom?: number;
|
10
11
|
};
|
11
12
|
export interface ISxpPageRenderProps {
|
12
13
|
globalConfig?: {
|
@@ -36,6 +37,7 @@ export interface ISxpPageRenderProps {
|
|
36
37
|
swipeTipOffset?: number;
|
37
38
|
consent?: any[];
|
38
39
|
videoPlayIcon?: string;
|
40
|
+
isShowMute?: boolean;
|
39
41
|
};
|
40
42
|
descStyle?: CSSProperties;
|
41
43
|
tipText?: {
|
@@ -398,7 +398,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
398
398
|
React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
|
399
399
|
top: minusHeight
|
400
400
|
} }),
|
401
|
-
isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50
|
401
|
+
isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
|
402
402
|
React.createElement(Swiper, { style: {
|
403
403
|
marginTop: tagHeight
|
404
404
|
}, ref: swiperRef, onSlideChange: () => {
|
@@ -422,13 +422,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
422
422
|
}
|
423
423
|
}
|
424
424
|
}, direction: 'vertical', height: height },
|
425
|
-
React.createElement(ToggleButton, { style: {
|
425
|
+
((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton, { style: {
|
426
426
|
position: 'fixed',
|
427
427
|
visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
|
428
428
|
zIndex: 999,
|
429
429
|
[(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
|
430
430
|
[(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
|
431
|
-
}, defaultValue: isMuted, 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, onChange: setIsMuted }),
|
431
|
+
}, defaultValue: isMuted, 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, onChange: setIsMuted })),
|
432
432
|
renderView),
|
433
433
|
React.createElement(WaterFall, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props))));
|
434
434
|
};
|
@@ -114,7 +114,7 @@ const CommodityDetail = (_a) => {
|
|
114
114
|
width: '100%',
|
115
115
|
objectFit: 'cover',
|
116
116
|
display: 'block',
|
117
|
-
objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ?
|
117
|
+
objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
|
118
118
|
}, src: src }))));
|
119
119
|
}))),
|
120
120
|
!((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
|
@@ -123,7 +123,7 @@ Made in Italy` })));
|
|
123
123
|
width: '100%',
|
124
124
|
objectFit: 'cover',
|
125
125
|
display: 'block',
|
126
|
-
objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ?
|
126
|
+
objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
|
127
127
|
}, src: src }))));
|
128
128
|
}))),
|
129
129
|
!((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { CSSProperties } from 'react';
|
2
2
|
import { ICtaTempStylesType } from '../components/typing';
|
3
3
|
import { RecItemType } from '../../../../core/components/SxpPageRender/typing';
|
4
4
|
export interface ILinkProps {
|
@@ -9,6 +9,11 @@ export interface ILinkProps {
|
|
9
9
|
bottom_image?: string;
|
10
10
|
ctaTempStyles?: ICtaTempStylesType;
|
11
11
|
index?: number;
|
12
|
+
customTitle?: {
|
13
|
+
style?: CSSProperties;
|
14
|
+
display?: boolean;
|
15
|
+
text?: string;
|
16
|
+
};
|
12
17
|
}
|
13
18
|
declare const _default: React.NamedExoticComponent<ILinkProps>;
|
14
19
|
export default _default;
|
@@ -2,14 +2,13 @@ import { __rest } from "tslib";
|
|
2
2
|
import { css } from '@emotion/css';
|
3
3
|
import React, { memo } from 'react';
|
4
4
|
import EventProvider from '../components/EventProvider';
|
5
|
-
import styles from './index.module.less';
|
6
5
|
import { useSxpDataSource } from '../../../../core/hooks';
|
7
6
|
import { useEventReport } from '../../../../core/hooks/useEventReport';
|
8
7
|
import Img from '../components/Img';
|
9
8
|
import { setFontForText } from '../../../../core/utils/tool';
|
10
9
|
const Link = (_a) => {
|
11
|
-
var _b, _c, _d, _e, _f, _g, _h;
|
12
|
-
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index"]);
|
10
|
+
var _b, _c, _d, _e, _f, _g, _h, _j;
|
11
|
+
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle"]);
|
13
12
|
const { sxpParameter, bffEventReport } = useSxpDataSource();
|
14
13
|
const { jumpToWeb } = useEventReport();
|
15
14
|
const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
|
@@ -29,8 +28,12 @@ const Link = (_a) => {
|
|
29
28
|
width: '100%',
|
30
29
|
overflow: 'hidden'
|
31
30
|
}) },
|
32
|
-
React.createElement("div",
|
33
|
-
|
34
|
-
|
31
|
+
React.createElement("div", null,
|
32
|
+
React.createElement("div", { className: 'tow-line-ellipsis', style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
|
33
|
+
__html: setFontForText((_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
34
|
+
} }),
|
35
|
+
(customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) && (React.createElement("div", { style: Object.assign(Object.assign({}, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style), { lineHeight: ((_j = customTitle === null || customTitle === void 0 ? void 0 : customTitle.style) === null || _j === void 0 ? void 0 : _j.height) + 'px' }), className: 'one-line-ellipsis', dangerouslySetInnerHTML: {
|
36
|
+
__html: setFontForText(customTitle === null || customTitle === void 0 ? void 0 : customTitle.text, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style)
|
37
|
+
} }))))));
|
35
38
|
};
|
36
39
|
export default memo(Link);
|
@@ -1,4 +1,6 @@
|
|
1
|
+
var _a;
|
1
2
|
import settingRender from '../components/settingRender';
|
3
|
+
import linkSettingRender from './settingRender';
|
2
4
|
import LinkComponent from '.';
|
3
5
|
import { createMaterial } from '../../../../core/create';
|
4
6
|
const Link = createMaterial(LinkComponent, {
|
@@ -7,7 +9,7 @@ const Link = createMaterial(LinkComponent, {
|
|
7
9
|
category: 'template',
|
8
10
|
type: 'Link',
|
9
11
|
related: {
|
10
|
-
settingRender: settingRender === null || settingRender === void 0 ? void 0 : settingRender.filter((i) => i.type !== 'commodityTitle'),
|
12
|
+
settingRender: (_a = settingRender === null || settingRender === void 0 ? void 0 : settingRender.filter((i) => i.type !== 'commodityTitle')) === null || _a === void 0 ? void 0 : _a.concat(linkSettingRender),
|
11
13
|
bindableProps: []
|
12
14
|
},
|
13
15
|
defaulSetting: {
|
@@ -26,6 +28,18 @@ const Link = createMaterial(LinkComponent, {
|
|
26
28
|
width: 130,
|
27
29
|
height: 20
|
28
30
|
}
|
31
|
+
},
|
32
|
+
customTitle: {
|
33
|
+
style: {
|
34
|
+
textAlign: 'left',
|
35
|
+
textDecoration: 'underline',
|
36
|
+
fontWeight: 'bold',
|
37
|
+
width: 130,
|
38
|
+
height: 20,
|
39
|
+
fontSize: 12,
|
40
|
+
color: '#000'
|
41
|
+
},
|
42
|
+
text: '探索更多'
|
29
43
|
}
|
30
44
|
},
|
31
45
|
style: {
|
@@ -0,0 +1,57 @@
|
|
1
|
+
declare const _default: {
|
2
|
+
title: string;
|
3
|
+
child: ({
|
4
|
+
type: string;
|
5
|
+
label: string;
|
6
|
+
name: string[];
|
7
|
+
child?: undefined;
|
8
|
+
addonAfter?: undefined;
|
9
|
+
} | {
|
10
|
+
type: string;
|
11
|
+
label: string;
|
12
|
+
child: ({
|
13
|
+
type: string;
|
14
|
+
name: string[];
|
15
|
+
max: number;
|
16
|
+
addonAfter?: undefined;
|
17
|
+
} | {
|
18
|
+
type: string;
|
19
|
+
name: string[];
|
20
|
+
addonAfter: string;
|
21
|
+
max: number;
|
22
|
+
})[];
|
23
|
+
name?: undefined;
|
24
|
+
addonAfter?: undefined;
|
25
|
+
} | {
|
26
|
+
type: string;
|
27
|
+
label: string;
|
28
|
+
child: {
|
29
|
+
type: string;
|
30
|
+
name: string[];
|
31
|
+
bottomText: string;
|
32
|
+
}[];
|
33
|
+
name?: undefined;
|
34
|
+
addonAfter?: undefined;
|
35
|
+
} | {
|
36
|
+
type: string;
|
37
|
+
label: string;
|
38
|
+
child: ({
|
39
|
+
type: string;
|
40
|
+
name: string[];
|
41
|
+
addonAfter?: undefined;
|
42
|
+
} | {
|
43
|
+
type: string;
|
44
|
+
addonAfter: string;
|
45
|
+
name: string[];
|
46
|
+
})[];
|
47
|
+
name?: undefined;
|
48
|
+
addonAfter?: undefined;
|
49
|
+
} | {
|
50
|
+
label: string;
|
51
|
+
type: string;
|
52
|
+
name: string[];
|
53
|
+
addonAfter: string;
|
54
|
+
child?: undefined;
|
55
|
+
})[];
|
56
|
+
}[];
|
57
|
+
export default _default;
|
@@ -0,0 +1,102 @@
|
|
1
|
+
export default [
|
2
|
+
{
|
3
|
+
title: '自定义标题',
|
4
|
+
child: [
|
5
|
+
{
|
6
|
+
type: 'Switch',
|
7
|
+
label: '自定义标题开关',
|
8
|
+
name: ['props', 'customTitle', 'display']
|
9
|
+
},
|
10
|
+
{
|
11
|
+
type: 'Text',
|
12
|
+
label: '标题文案',
|
13
|
+
name: ['props', 'customTitle', 'text']
|
14
|
+
},
|
15
|
+
{
|
16
|
+
type: 'Group',
|
17
|
+
label: '尺寸',
|
18
|
+
child: [
|
19
|
+
{
|
20
|
+
type: 'Number',
|
21
|
+
name: ['props', 'customTitle', 'style', 'width'],
|
22
|
+
addonAfter: 'W'
|
23
|
+
},
|
24
|
+
{
|
25
|
+
type: 'Number',
|
26
|
+
name: ['props', 'customTitle', 'style', 'height'],
|
27
|
+
addonAfter: 'H'
|
28
|
+
}
|
29
|
+
]
|
30
|
+
},
|
31
|
+
{
|
32
|
+
type: 'Group',
|
33
|
+
label: '圆角',
|
34
|
+
child: [
|
35
|
+
{
|
36
|
+
type: 'Slider',
|
37
|
+
name: ['props', 'customTitle', 'style', 'borderRadius'],
|
38
|
+
max: 100
|
39
|
+
},
|
40
|
+
{
|
41
|
+
type: 'Number',
|
42
|
+
name: ['props', 'customTitle', 'style', 'borderRadius'],
|
43
|
+
addonAfter: 'px',
|
44
|
+
max: 100
|
45
|
+
}
|
46
|
+
]
|
47
|
+
},
|
48
|
+
{
|
49
|
+
type: 'Color',
|
50
|
+
label: '背景色',
|
51
|
+
name: ['props', 'customTitle', 'style', 'backgroundColor']
|
52
|
+
},
|
53
|
+
{
|
54
|
+
type: 'Group',
|
55
|
+
label: '字体',
|
56
|
+
child: [
|
57
|
+
{
|
58
|
+
type: 'Select',
|
59
|
+
name: ['props', 'customTitle', 'style', 'fontFamily-cn'],
|
60
|
+
bottomText: '中文字体'
|
61
|
+
},
|
62
|
+
{
|
63
|
+
type: 'Select',
|
64
|
+
name: ['props', 'customTitle', 'style', 'fontFamily-en'],
|
65
|
+
bottomText: '英文/其他字体'
|
66
|
+
}
|
67
|
+
]
|
68
|
+
},
|
69
|
+
{
|
70
|
+
type: 'Group',
|
71
|
+
label: '',
|
72
|
+
child: [
|
73
|
+
{
|
74
|
+
type: 'Color',
|
75
|
+
name: ['props', 'customTitle', 'style', 'color']
|
76
|
+
},
|
77
|
+
{
|
78
|
+
type: 'Number',
|
79
|
+
addonAfter: 'px',
|
80
|
+
name: ['props', 'customTitle', 'style', 'fontSize']
|
81
|
+
}
|
82
|
+
]
|
83
|
+
},
|
84
|
+
{
|
85
|
+
label: '样式',
|
86
|
+
type: 'TextStyle',
|
87
|
+
name: ['props', 'customTitle', 'style']
|
88
|
+
},
|
89
|
+
{
|
90
|
+
label: '对齐',
|
91
|
+
type: 'TextAlign',
|
92
|
+
name: ['props', 'customTitle', 'style']
|
93
|
+
},
|
94
|
+
{
|
95
|
+
label: '上边距',
|
96
|
+
type: 'Number',
|
97
|
+
name: ['props', 'customTitle', 'style', 'marginTop'],
|
98
|
+
addonAfter: 'px'
|
99
|
+
}
|
100
|
+
]
|
101
|
+
}
|
102
|
+
];
|
@@ -20,6 +20,6 @@ const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
|
|
20
20
|
}, [src]);
|
21
21
|
return (React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
|
22
22
|
React.createElement("div", { ref: ref, hidden: !src, className: css({ width: '100%', height: '100%' }) },
|
23
|
-
React.createElement(FormatImage, { className: css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ?
|
23
|
+
React.createElement(FormatImage, { className: css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? translateY + 50 : 50}%` }, style)), src: src }))));
|
24
24
|
};
|
25
25
|
export default memo(Img);
|
@@ -9,7 +9,7 @@ const Navbar = ({ icon, styles, textStyle, onClose }) => {
|
|
9
9
|
const { waterFallData, setOpenHashtag } = (0, hooks_1.useSxpDataSource)();
|
10
10
|
return (react_1.default.createElement("div", { className: 'clc-sxp-nav', style: styles },
|
11
11
|
react_1.default.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
|
12
|
-
react_1.default.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle, dangerouslySetInnerHTML: {
|
12
|
+
react_1.default.createElement("div", { className: 'clc-sxp-nav-title', style: Object.assign(Object.assign({}, textStyle), { paddingLeft: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.textAlign) === 'left' ? '35px' : 0 }), dangerouslySetInnerHTML: {
|
13
13
|
__html: (0, tool_1.setFontForText)(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`, textStyle)
|
14
14
|
} })));
|
15
15
|
};
|
@@ -13,7 +13,7 @@ const Nudge = ({ nudge }) => {
|
|
13
13
|
borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
|
14
14
|
} },
|
15
15
|
(nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (react_1.default.createElement("img", { src: nudge.icon, alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
|
16
|
-
react_1.default.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }), dangerouslySetInnerHTML: {
|
16
|
+
react_1.default.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0, marginTop: 0 }), dangerouslySetInnerHTML: {
|
17
17
|
__html: (0, tool_1.setFontForText)(nudge === null || nudge === void 0 ? void 0 : nudge.content, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle)
|
18
18
|
} })))));
|
19
19
|
};
|
@@ -6,8 +6,9 @@ const modules_1 = require("swiper/modules");
|
|
6
6
|
const react_2 = require("swiper/react");
|
7
7
|
const Picture_1 = tslib_1.__importDefault(require("./Picture"));
|
8
8
|
const hooks_1 = require("../../../../core/hooks");
|
9
|
+
const css_1 = require("@emotion/css");
|
9
10
|
const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
10
|
-
var _a;
|
11
|
+
var _a, _b;
|
11
12
|
const ref = (0, react_1.useRef)();
|
12
13
|
const { isActive } = (0, react_2.useSwiperSlide)();
|
13
14
|
const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
|
@@ -31,7 +32,14 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
|
|
31
32
|
setIsLoad(true);
|
32
33
|
}
|
33
34
|
}, [isLoad]);
|
34
|
-
return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
|
35
|
+
return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
|
36
|
+
clickable: true,
|
37
|
+
bulletActiveClass: 'swipe-item-active-bullet'
|
38
|
+
}, className: (0, css_1.css)(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && {
|
39
|
+
'.swiper-pagination': {
|
40
|
+
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0
|
41
|
+
}
|
42
|
+
}))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
|
35
43
|
return (react_1.default.createElement(react_2.SwiperSlide, { key: index },
|
36
44
|
react_1.default.createElement(Picture_1.default, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
37
45
|
})));
|
@@ -171,7 +171,7 @@ function WaterfallList(_a) {
|
|
171
171
|
var _a, _b;
|
172
172
|
if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
|
173
173
|
reportTagsView();
|
174
|
-
window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
|
174
|
+
window.location.href = window.getJointUtmLink((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link);
|
175
175
|
}
|
176
176
|
};
|
177
177
|
return (react_1.default.createElement(react_1.default.Fragment, null, isLoadingData ? (react_1.default.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
|
@@ -279,7 +279,7 @@ function WaterfallList(_a) {
|
|
279
279
|
var _a, _b;
|
280
280
|
if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
|
281
281
|
reportTagsView();
|
282
|
-
window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
|
282
|
+
window.location.href = window.getJointUtmLink((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link);
|
283
283
|
}
|
284
284
|
};
|
285
285
|
return (react_1.default.createElement(react_1.default.Fragment, null, isLoadingData ? (react_1.default.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
|
@@ -7,6 +7,7 @@ export type postConfigType = {
|
|
7
7
|
delay?: number;
|
8
8
|
bgWay?: '1' | '2';
|
9
9
|
bgColor?: string;
|
10
|
+
marginBottom?: number;
|
10
11
|
};
|
11
12
|
export interface ISxpPageRenderProps {
|
12
13
|
globalConfig?: {
|
@@ -36,6 +37,7 @@ export interface ISxpPageRenderProps {
|
|
36
37
|
swipeTipOffset?: number;
|
37
38
|
consent?: any[];
|
38
39
|
videoPlayIcon?: string;
|
40
|
+
isShowMute?: boolean;
|
39
41
|
};
|
40
42
|
descStyle?: CSSProperties;
|
41
43
|
tipText?: {
|
@@ -401,7 +401,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
401
401
|
react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
|
402
402
|
top: minusHeight
|
403
403
|
} }),
|
404
|
-
isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50
|
404
|
+
isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
|
405
405
|
react_1.default.createElement(react_2.Swiper, { style: {
|
406
406
|
marginTop: tagHeight
|
407
407
|
}, ref: swiperRef, onSlideChange: () => {
|
@@ -425,13 +425,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
425
425
|
}
|
426
426
|
}
|
427
427
|
}, direction: 'vertical', height: height },
|
428
|
-
react_1.default.createElement(ToggleButton_1.default, { style: {
|
428
|
+
((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (react_1.default.createElement(ToggleButton_1.default, { style: {
|
429
429
|
position: 'fixed',
|
430
430
|
visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
|
431
431
|
zIndex: 999,
|
432
432
|
[(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
|
433
433
|
[(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
|
434
|
-
}, defaultValue: isMuted, 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, onChange: setIsMuted }),
|
434
|
+
}, defaultValue: isMuted, 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, onChange: setIsMuted })),
|
435
435
|
renderView),
|
436
436
|
react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props))));
|
437
437
|
};
|
@@ -116,7 +116,7 @@ const CommodityDetail = (_a) => {
|
|
116
116
|
width: '100%',
|
117
117
|
objectFit: 'cover',
|
118
118
|
display: 'block',
|
119
|
-
objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ?
|
119
|
+
objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
|
120
120
|
}, src: src }))));
|
121
121
|
}))),
|
122
122
|
!((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
|
@@ -125,7 +125,7 @@ Made in Italy` })));
|
|
125
125
|
width: '100%',
|
126
126
|
objectFit: 'cover',
|
127
127
|
display: 'block',
|
128
|
-
objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ?
|
128
|
+
objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
|
129
129
|
}, src: src }))));
|
130
130
|
}))),
|
131
131
|
!((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { CSSProperties } from 'react';
|
2
2
|
import { ICtaTempStylesType } from '../components/typing';
|
3
3
|
import { RecItemType } from '../../../../core/components/SxpPageRender/typing';
|
4
4
|
export interface ILinkProps {
|
@@ -9,6 +9,11 @@ export interface ILinkProps {
|
|
9
9
|
bottom_image?: string;
|
10
10
|
ctaTempStyles?: ICtaTempStylesType;
|
11
11
|
index?: number;
|
12
|
+
customTitle?: {
|
13
|
+
style?: CSSProperties;
|
14
|
+
display?: boolean;
|
15
|
+
text?: string;
|
16
|
+
};
|
12
17
|
}
|
13
18
|
declare const _default: React.NamedExoticComponent<ILinkProps>;
|
14
19
|
export default _default;
|
@@ -4,14 +4,13 @@ const tslib_1 = require("tslib");
|
|
4
4
|
const css_1 = require("@emotion/css");
|
5
5
|
const react_1 = tslib_1.__importStar(require("react"));
|
6
6
|
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
7
|
-
const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
|
8
7
|
const hooks_1 = require("../../../../core/hooks");
|
9
8
|
const useEventReport_1 = require("../../../../core/hooks/useEventReport");
|
10
9
|
const Img_1 = tslib_1.__importDefault(require("../components/Img"));
|
11
10
|
const tool_1 = require("../../../../core/utils/tool");
|
12
11
|
const Link = (_a) => {
|
13
|
-
var _b, _c, _d, _e, _f, _g, _h;
|
14
|
-
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index"]);
|
12
|
+
var _b, _c, _d, _e, _f, _g, _h, _j;
|
13
|
+
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle"]);
|
15
14
|
const { sxpParameter, bffEventReport } = (0, hooks_1.useSxpDataSource)();
|
16
15
|
const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
|
17
16
|
const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
|
@@ -31,8 +30,12 @@ const Link = (_a) => {
|
|
31
30
|
width: '100%',
|
32
31
|
overflow: 'hidden'
|
33
32
|
}) },
|
34
|
-
react_1.default.createElement("div",
|
35
|
-
|
36
|
-
|
33
|
+
react_1.default.createElement("div", null,
|
34
|
+
react_1.default.createElement("div", { className: 'tow-line-ellipsis', style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
|
35
|
+
__html: (0, tool_1.setFontForText)((_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
36
|
+
} }),
|
37
|
+
(customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) && (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style), { lineHeight: ((_j = customTitle === null || customTitle === void 0 ? void 0 : customTitle.style) === null || _j === void 0 ? void 0 : _j.height) + 'px' }), className: 'one-line-ellipsis', dangerouslySetInnerHTML: {
|
38
|
+
__html: (0, tool_1.setFontForText)(customTitle === null || customTitle === void 0 ? void 0 : customTitle.text, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style)
|
39
|
+
} }))))));
|
37
40
|
};
|
38
41
|
exports.default = (0, react_1.memo)(Link);
|