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.
Files changed (48) hide show
  1. package/dist/index.cjs +168 -37
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +4 -9
  4. package/dist/index.js +168 -37
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +168 -37
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/Navbar.js +1 -1
  15. package/es/core/components/SxpPageRender/Nudge/index.js +1 -1
  16. package/es/core/components/SxpPageRender/PictureGroup/index.js +10 -2
  17. package/es/core/components/SxpPageRender/WaterFall/List.js +1 -1
  18. package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js +1 -1
  19. package/es/core/components/SxpPageRender/index.d.ts +2 -0
  20. package/es/core/components/SxpPageRender/index.js +3 -3
  21. package/es/materials/sxp/HashTag/material.js +2 -1
  22. package/es/materials/sxp/popup/CommodityDetail/index.js +1 -1
  23. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  24. package/es/materials/sxp/template/Link/index.d.ts +6 -1
  25. package/es/materials/sxp/template/Link/index.js +9 -6
  26. package/es/materials/sxp/template/Link/material.js +15 -1
  27. package/es/materials/sxp/template/Link/settingRender.d.ts +57 -0
  28. package/es/materials/sxp/template/Link/settingRender.js +102 -0
  29. package/es/materials/sxp/template/components/Img.js +1 -1
  30. package/es/materials/sxp/template/components/settingRender.js +5 -0
  31. package/lib/core/components/SxpPageRender/Navbar.js +1 -1
  32. package/lib/core/components/SxpPageRender/Nudge/index.js +1 -1
  33. package/lib/core/components/SxpPageRender/PictureGroup/index.js +10 -2
  34. package/lib/core/components/SxpPageRender/WaterFall/List.js +1 -1
  35. package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +1 -1
  36. package/lib/core/components/SxpPageRender/index.d.ts +2 -0
  37. package/lib/core/components/SxpPageRender/index.js +3 -3
  38. package/lib/materials/sxp/HashTag/material.js +2 -1
  39. package/lib/materials/sxp/popup/CommodityDetail/index.js +1 -1
  40. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  41. package/lib/materials/sxp/template/Link/index.d.ts +6 -1
  42. package/lib/materials/sxp/template/Link/index.js +9 -6
  43. package/lib/materials/sxp/template/Link/material.js +15 -1
  44. package/lib/materials/sxp/template/Link/settingRender.d.ts +57 -0
  45. package/lib/materials/sxp/template/Link/settingRender.js +104 -0
  46. package/lib/materials/sxp/template/components/Img.js +1 -1
  47. package/lib/materials/sxp/template/components/settingRender.js +5 -0
  48. 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: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
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 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
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
  };
@@ -17,7 +17,8 @@ const HashTag = createMaterial(HashTagComponent, {
17
17
  textStyles: {
18
18
  hashTagTitle: {
19
19
  fontSize: 16,
20
- color: '#000'
20
+ color: '#000',
21
+ textAlign: 'center'
21
22
  },
22
23
  hashTagDesc: {
23
24
  fontSize: 12,
@@ -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) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
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) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
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", { className: styles['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
- } }))));
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 ? -translateY + 50 : 50}%` }, style)), src: src }))));
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);
@@ -239,6 +239,11 @@ export default [
239
239
  label: '对齐',
240
240
  type: 'TextAlign',
241
241
  name: ['props', 'ctaTempStyles', 'ctaTitle']
242
+ },
243
+ {
244
+ label: '间距',
245
+ type: 'TextSpace',
246
+ name: ['props', 'ctaTempStyles', 'ctaTitle']
242
247
  }
243
248
  ]
244
249
  }
@@ -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: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
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 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
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
  };
@@ -21,7 +21,8 @@ const HashTag = (0, create_1.createMaterial)(_1.default, {
21
21
  textStyles: {
22
22
  hashTagTitle: {
23
23
  fontSize: 16,
24
- color: '#000'
24
+ color: '#000',
25
+ textAlign: 'center'
25
26
  },
26
27
  hashTagDesc: {
27
28
  fontSize: 12,
@@ -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) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
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) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
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", { className: index_module_less_1.default['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
- } }))));
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);