pb-sxp-ui 1.0.69 → 1.0.71

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 (114) hide show
  1. package/dist/index.cjs +301 -174
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +1 -2
  4. package/dist/index.js +301 -174
  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 +304 -177
  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/DiyPortalPreview/VideoWidget.js +3 -2
  15. package/es/core/components/SxpPageCore/index.js +2 -2
  16. package/es/core/components/SxpPageRender/FingerSwipeTip/index.d.ts +2 -1
  17. package/es/core/components/SxpPageRender/FingerSwipeTip/index.js +2 -2
  18. package/es/core/components/SxpPageRender/FormatImage.js +1 -2
  19. package/es/core/components/SxpPageRender/Nudge/index.js +2 -2
  20. package/es/core/components/SxpPageRender/VideoWidget/index.js +1 -1
  21. package/es/core/components/SxpPageRender/WaterFall/List.js +5 -9
  22. package/es/core/components/SxpPageRender/index.d.ts +5 -0
  23. package/es/core/components/SxpPageRender/index.js +21 -24
  24. package/es/core/components/SxpPageRender/typing.d.ts +1 -0
  25. package/es/core/context/SxpDataSourceProvider.d.ts +0 -1
  26. package/es/core/context/SxpDataSourceProvider.js +12 -4
  27. package/es/materials/sxp/HashTag/settingRender.d.ts +2 -7
  28. package/es/materials/sxp/HashTag/settingRender.js +0 -5
  29. package/es/materials/sxp/defaultSetting.d.ts +1 -4
  30. package/es/materials/sxp/defaultSetting.js +4 -5
  31. package/es/materials/sxp/popup/AppointForm/index.d.ts +2 -1
  32. package/es/materials/sxp/popup/AppointForm/index.js +3 -8
  33. package/es/materials/sxp/popup/AppointForm/settingRender.d.ts +29 -8
  34. package/es/materials/sxp/popup/AppointForm/settingRender.js +33 -2
  35. package/es/materials/sxp/popup/CommodityDetail/index.d.ts +1 -0
  36. package/es/materials/sxp/popup/CommodityDetail/index.js +7 -1
  37. package/es/materials/sxp/popup/CommodityDetail/material.js +5 -2
  38. package/es/materials/sxp/popup/CommodityDetail/settingRender.d.ts +28 -0
  39. package/es/materials/sxp/popup/CommodityDetail/settingRender.js +30 -0
  40. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts +1 -0
  41. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +7 -1
  42. package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts +16 -0
  43. package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js +13 -0
  44. package/es/materials/sxp/popup/Prompt/index.d.ts +2 -1
  45. package/es/materials/sxp/popup/Prompt/index.js +2 -2
  46. package/es/materials/sxp/popup/Prompt/settingRender.d.ts +46 -11
  47. package/es/materials/sxp/popup/Prompt/settingRender.js +57 -14
  48. package/es/materials/sxp/template/Commodity/index.d.ts +1 -0
  49. package/es/materials/sxp/template/Commodity/index.js +12 -6
  50. package/es/materials/sxp/template/CommodityDiro/index.d.ts +1 -0
  51. package/es/materials/sxp/template/CommodityDiro/index.js +12 -6
  52. package/es/materials/sxp/template/CommodityDiroNew/index.d.ts +1 -0
  53. package/es/materials/sxp/template/CommodityDiroNew/index.js +12 -6
  54. package/es/materials/sxp/template/MultiCommodity/index.d.ts +1 -0
  55. package/es/materials/sxp/template/MultiCommodity/index.js +7 -5
  56. package/es/materials/sxp/template/MultiCommodityDiro/index.d.ts +1 -0
  57. package/es/materials/sxp/template/MultiCommodityDiro/index.js +7 -5
  58. package/es/materials/sxp/template/MultiCommodityDiroNew/index.d.ts +1 -0
  59. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +7 -5
  60. package/es/materials/sxp/template/components/Img.d.ts +2 -1
  61. package/es/materials/sxp/template/components/Img.js +2 -2
  62. package/es/materials/sxp/template/components/settingRender.d.ts +50 -0
  63. package/es/materials/sxp/template/components/settingRender.js +8 -0
  64. package/lib/core/components/DiyPortalPreview/VideoWidget.js +3 -2
  65. package/lib/core/components/SxpPageCore/index.js +2 -2
  66. package/lib/core/components/SxpPageRender/FingerSwipeTip/index.d.ts +2 -1
  67. package/lib/core/components/SxpPageRender/FingerSwipeTip/index.js +2 -2
  68. package/lib/core/components/SxpPageRender/FormatImage.js +0 -1
  69. package/lib/core/components/SxpPageRender/Nudge/index.js +2 -2
  70. package/lib/core/components/SxpPageRender/VideoWidget/index.js +1 -1
  71. package/lib/core/components/SxpPageRender/WaterFall/List.js +5 -9
  72. package/lib/core/components/SxpPageRender/index.d.ts +5 -0
  73. package/lib/core/components/SxpPageRender/index.js +21 -24
  74. package/lib/core/components/SxpPageRender/typing.d.ts +1 -0
  75. package/lib/core/context/SxpDataSourceProvider.d.ts +0 -1
  76. package/lib/core/context/SxpDataSourceProvider.js +12 -4
  77. package/lib/materials/sxp/HashTag/settingRender.d.ts +2 -7
  78. package/lib/materials/sxp/HashTag/settingRender.js +0 -5
  79. package/lib/materials/sxp/defaultSetting.d.ts +1 -4
  80. package/lib/materials/sxp/defaultSetting.js +4 -5
  81. package/lib/materials/sxp/popup/AppointForm/index.d.ts +2 -1
  82. package/lib/materials/sxp/popup/AppointForm/index.js +3 -8
  83. package/lib/materials/sxp/popup/AppointForm/settingRender.d.ts +29 -8
  84. package/lib/materials/sxp/popup/AppointForm/settingRender.js +34 -2
  85. package/lib/materials/sxp/popup/CommodityDetail/index.d.ts +1 -0
  86. package/lib/materials/sxp/popup/CommodityDetail/index.js +7 -1
  87. package/lib/materials/sxp/popup/CommodityDetail/material.js +5 -2
  88. package/lib/materials/sxp/popup/CommodityDetail/settingRender.d.ts +28 -0
  89. package/lib/materials/sxp/popup/CommodityDetail/settingRender.js +30 -0
  90. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts +1 -0
  91. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +7 -1
  92. package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts +16 -0
  93. package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js +13 -0
  94. package/lib/materials/sxp/popup/Prompt/index.d.ts +2 -1
  95. package/lib/materials/sxp/popup/Prompt/index.js +2 -2
  96. package/lib/materials/sxp/popup/Prompt/settingRender.d.ts +46 -11
  97. package/lib/materials/sxp/popup/Prompt/settingRender.js +58 -14
  98. package/lib/materials/sxp/template/Commodity/index.d.ts +1 -0
  99. package/lib/materials/sxp/template/Commodity/index.js +12 -6
  100. package/lib/materials/sxp/template/CommodityDiro/index.d.ts +1 -0
  101. package/lib/materials/sxp/template/CommodityDiro/index.js +12 -6
  102. package/lib/materials/sxp/template/CommodityDiroNew/index.d.ts +1 -0
  103. package/lib/materials/sxp/template/CommodityDiroNew/index.js +12 -6
  104. package/lib/materials/sxp/template/MultiCommodity/index.d.ts +1 -0
  105. package/lib/materials/sxp/template/MultiCommodity/index.js +7 -5
  106. package/lib/materials/sxp/template/MultiCommodityDiro/index.d.ts +1 -0
  107. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +7 -5
  108. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.d.ts +1 -0
  109. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +7 -5
  110. package/lib/materials/sxp/template/components/Img.d.ts +2 -1
  111. package/lib/materials/sxp/template/components/Img.js +2 -2
  112. package/lib/materials/sxp/template/components/settingRender.d.ts +50 -0
  113. package/lib/materials/sxp/template/components/settingRender.js +8 -0
  114. package/package.json +2 -3
@@ -40,6 +40,56 @@ declare const _default: ({
40
40
  child?: undefined;
41
41
  })[];
42
42
  type?: undefined;
43
+ } | {
44
+ title: string;
45
+ child: ({
46
+ type: string;
47
+ label: string;
48
+ child: {
49
+ type: string;
50
+ name: string[];
51
+ addonAfter: string;
52
+ }[];
53
+ addonAfter?: undefined;
54
+ name?: undefined;
55
+ min?: undefined;
56
+ initialValue?: undefined;
57
+ } | {
58
+ type: string;
59
+ label: string;
60
+ child: ({
61
+ type: string;
62
+ name: string[];
63
+ max: number;
64
+ addonAfter?: undefined;
65
+ } | {
66
+ type: string;
67
+ name: string[];
68
+ addonAfter: string;
69
+ max: number;
70
+ })[];
71
+ addonAfter?: undefined;
72
+ name?: undefined;
73
+ min?: undefined;
74
+ initialValue?: undefined;
75
+ } | {
76
+ type: string;
77
+ label: string;
78
+ addonAfter: string;
79
+ name: string[];
80
+ child?: undefined;
81
+ min?: undefined;
82
+ initialValue?: undefined;
83
+ } | {
84
+ label: string;
85
+ type: string;
86
+ name: string[];
87
+ min: number;
88
+ addonAfter: string;
89
+ initialValue: number;
90
+ child?: undefined;
91
+ })[];
92
+ type?: undefined;
43
93
  } | {
44
94
  title: string;
45
95
  type: string;
@@ -97,6 +97,14 @@ export default [
97
97
  label: '与右侧边距',
98
98
  addonAfter: 'px',
99
99
  name: ['props', 'ctaTempStyles', 'img', 'marginRight']
100
+ },
101
+ {
102
+ label: '居中垂直偏移',
103
+ type: 'Number',
104
+ name: ['props', 'translateY'],
105
+ min: -100,
106
+ addonAfter: '%',
107
+ initialValue: 0
100
108
  }
101
109
  ]
102
110
  },
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
+ const hls_js_1 = tslib_1.__importDefault(require("hls.js"));
5
6
  const useIconLink_1 = require("../SxpPageRender/useIconLink");
6
7
  const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
7
8
  const hooks_1 = require("../../../core/hooks");
@@ -141,8 +142,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
141
142
  if (!videoRef.current.src) {
142
143
  const videoSrc = rec.video.url;
143
144
  if (videoSrc.includes('.m3u8')) {
144
- if (typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.Hls.isSupported())) {
145
- const hls = new window.Hls();
145
+ if (hls_js_1.default.isSupported()) {
146
+ const hls = new hls_js_1.default();
146
147
  hls.loadSource(videoSrc);
147
148
  hls.attachMedia(videoRef.current);
148
149
  }
@@ -12,14 +12,14 @@ Object.values(_materials_).forEach((v) => {
12
12
  RESOLVER[v.extend.type] = v;
13
13
  });
14
14
  const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl, enabledMetaConversionApi }) => {
15
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
15
+ var _a, _b, _c, _d, _e, _f;
16
16
  const utmVal = (0, react_1.useMemo)(() => {
17
17
  var _a;
18
18
  const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
19
19
  return searchParams;
20
20
  }, []);
21
21
  return (react_1.default.createElement(core_1.EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
22
- react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, isShowTag: (_j = (_h = (_g = data === null || data === void 0 ? void 0 : data.data) === null || _g === void 0 ? void 0 : _g.sxpPageConf) === null || _h === void 0 ? void 0 : _h.globalConfig) === null || _j === void 0 ? void 0 : _j.isShowTag, render: ({ rtcList, tagList }) => {
22
+ react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, render: ({ rtcList, tagList }) => {
23
23
  var _a;
24
24
  return (react_1.default.createElement(react_1.default.Fragment, null,
25
25
  react_1.default.createElement(SxpPageRender_1.default, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, licenseUrl: licenseUrl })),
@@ -1,6 +1,7 @@
1
- import { FC } from 'react';
1
+ import { CSSProperties, FC } from 'react';
2
2
  interface IProps {
3
3
  imageUrl?: string;
4
+ style?: CSSProperties;
4
5
  }
5
6
  declare const FingerSwipeTip: FC<IProps>;
6
7
  export default FingerSwipeTip;
@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const useIconLink_1 = require("../useIconLink");
6
6
  const hooks_1 = require("../../../../core/hooks");
7
- const FingerSwipeTip = ({ imageUrl }) => {
7
+ const FingerSwipeTip = ({ imageUrl, style }) => {
8
8
  const [show, setShow] = (0, react_1.useState)(true);
9
9
  const { schema: { sxpPageConf } } = (0, hooks_1.useEditor)();
10
10
  (0, react_1.useEffect)(() => {
@@ -16,7 +16,7 @@ const FingerSwipeTip = ({ imageUrl }) => {
16
16
  const animationCls = (0, react_1.useMemo)(() => {
17
17
  return show ? 'pb-fadeIn' : 'pb-fadeOut';
18
18
  }, [show]);
19
- return (react_1.default.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}` },
19
+ return (react_1.default.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: style },
20
20
  react_1.default.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON })));
21
21
  };
22
22
  exports.default = FingerSwipeTip;
@@ -13,7 +13,6 @@ const FormatImage = (0, react_1.forwardRef)((props, ref) => {
13
13
  (0, react_1.useEffect)(() => {
14
14
  setImgSrc(src);
15
15
  }, [src]);
16
- const imgRef = (0, react_1.useRef)(null);
17
16
  return (react_1.default.createElement(react_1.default.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
18
17
  react_1.default.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
19
18
  react_1.default.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
@@ -11,7 +11,7 @@ const Nudge = ({ nudge }) => {
11
11
  backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
12
12
  borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
13
13
  } },
14
- (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? react_1.default.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover' } }) : null,
15
- 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' }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
14
+ (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? react_1.default.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover', flexShrink: 0 } }) : null,
15
+ 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 }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
16
16
  };
17
17
  exports.default = Nudge;
@@ -184,7 +184,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
184
184
  const videoSrc = rec.video.url;
185
185
  if (!videoSrc)
186
186
  return;
187
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
188
187
  setIsPauseVideo(false);
189
188
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
190
189
  const dom = document.querySelector('#player-container-id');
@@ -192,6 +191,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
192
191
  if (!dom && !dom2)
193
192
  return;
194
193
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
194
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
195
195
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
196
196
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
197
197
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
@@ -16,19 +16,15 @@ const WaterfallFlowItem = (props) => {
16
16
  const canvasRef = (0, react_1.useRef)(null);
17
17
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
18
18
  const src = (0, react_1.useMemo)(() => {
19
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
19
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
20
20
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
21
21
  return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
22
22
  }
23
- else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.url) {
24
- setShowVideo(true);
25
- return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
23
+ else if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.imgUrls) === null || _d === void 0 ? void 0 : _d.length) {
24
+ return (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f[0];
26
25
  }
27
- else if ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f.length) {
28
- return (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.imgUrls) === null || _h === void 0 ? void 0 : _h[0];
29
- }
30
- else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
31
- return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
26
+ else if ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.homePage) === null || _h === void 0 ? void 0 : _h.length) {
27
+ return (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k[0];
32
28
  }
33
29
  else {
34
30
  return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
@@ -29,6 +29,11 @@ export interface ISxpPageRenderProps {
29
29
  isOpenTextShadow?: boolean;
30
30
  videoPost?: postConfigType;
31
31
  imgUrlsPost?: postConfigType;
32
+ muteIconXPosit?: string;
33
+ muteIconYPosit?: string;
34
+ likeIconYPosit?: string;
35
+ likeIconXPosit?: string;
36
+ swipeTipOffset?: number;
32
37
  };
33
38
  descStyle?: CSSProperties;
34
39
  tipText?: {
@@ -23,10 +23,10 @@ const sessionStore_1 = require("../../../core/utils/sessionStore");
23
23
  require("./index.less");
24
24
  const useEventReport_1 = require("../../../core/hooks/useEventReport");
25
25
  const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
26
- const localStore_1 = require("../../../core/utils/localStore");
27
26
  const Tagbar_1 = tslib_1.__importDefault(require("./Tagbar"));
27
+ const localStore_1 = require("../../../core/utils/localStore");
28
28
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
29
- var _a, _b, _c, _d, _e, _f, _g;
29
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
30
30
  const { schema } = (0, hooks_1.useEditor)();
31
31
  const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
32
32
  const viewImageStartTime = (0, react_1.useRef)(0);
@@ -79,29 +79,23 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
79
79
  };
80
80
  const firstRef = (0, react_1.useRef)();
81
81
  (0, react_1.useEffect)(() => {
82
- var _a, _b, _c;
83
- if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
82
+ if (!firstRef.current && !videoRef) {
84
83
  firstRef.current = true;
85
84
  const player = TCPlayer('player-container-id', {
86
85
  licenseUrl,
87
86
  controls: false,
87
+ autoplay: false,
88
88
  loop: false,
89
- autoplay: true,
90
89
  muted: true,
91
90
  preload: 'auto',
92
91
  posterImage: false,
93
- bigPlayButton: true,
94
- sources: [
95
- {
96
- src: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : ''
97
- }
98
- ]
92
+ bigPlayButton: true
99
93
  });
100
94
  player === null || player === void 0 ? void 0 : player.ready(() => {
101
95
  setVideoRef(player);
102
96
  });
103
97
  }
104
- }, [videoRef, licenseUrl, data]);
98
+ }, [videoRef, licenseUrl]);
105
99
  (0, react_1.useEffect)(() => {
106
100
  if (!isInit)
107
101
  handleH5EnterLink();
@@ -267,7 +261,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
267
261
  lineGradStyle
268
262
  ]);
269
263
  const renderLikeButton = (0, react_1.useCallback)((rec, index) => {
270
- var _a, _b;
264
+ var _a, _b, _c, _d;
271
265
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
272
266
  return;
273
267
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
@@ -276,8 +270,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
276
270
  }
277
271
  if (rec.video) {
278
272
  return (react_1.default.createElement(LikeButton_1.default, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
279
- top,
280
- right: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _b !== void 0 ? _b : 0
273
+ [(_b = globalConfig.likeIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig.likeIconX) !== null && _c !== void 0 ? _c : 0,
274
+ [(_d = globalConfig.likeIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top
281
275
  }, position: index }));
282
276
  }
283
277
  return null;
@@ -304,7 +298,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
304
298
  }
305
299
  };
306
300
  const handleScrollEvent = (swiper) => {
307
- var _a, _b, _c, _d, _e, _f, _g, _h;
301
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
308
302
  viewTime.current = new Date();
309
303
  const item = data[swiper.previousIndex];
310
304
  if (!item)
@@ -334,14 +328,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
334
328
  handleReportViewImageEnd(item);
335
329
  }
336
330
  handleReportProductView(item);
331
+ const curItem = data[swiper.activeIndex];
332
+ if (!((_j = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _j === void 0 ? void 0 : _j.url) && !((_k = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _k === void 0 ? void 0 : _k.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
333
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
334
+ eventName: 'ProductView'
335
+ });
336
+ }
337
337
  };
338
338
  const handleReportProductView = (item) => {
339
339
  var _a, _b, _c;
340
340
  if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && !((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls) && (item === null || item === void 0 ? void 0 : item.product)) {
341
341
  productView(item, item.product, (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.bindCta, viewTime.current, activeIndex);
342
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
343
- eventName: 'ProductView'
344
- });
345
342
  }
346
343
  };
347
344
  (0, react_1.useEffect)(() => {
@@ -411,7 +408,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
411
408
  } })),
412
409
  renderLogo,
413
410
  react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
414
- isShowFingerTip ? react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
411
+ 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,
415
412
  react_1.default.createElement(react_2.Swiper, { ref: swiperRef, onSlideChange: () => {
416
413
  swiperRef.current.swiper.allowTouchMove = false;
417
414
  setTimeout(() => {
@@ -435,13 +432,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
435
432
  }, direction: 'vertical', height: height },
436
433
  react_1.default.createElement(ToggleButton_1.default, { style: {
437
434
  position: 'fixed',
438
- right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
439
435
  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',
440
- bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
441
- zIndex: 999
436
+ zIndex: 999,
437
+ [(_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,
438
+ [(_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
442
439
  }, 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 }),
443
440
  renderView),
444
- react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props)),
441
+ 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)),
445
442
  react_1.default.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
446
443
  react_1.default.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
447
444
  backgroundColor: 'transparent',
@@ -40,6 +40,7 @@ export type ProductInfoType = {
40
40
  currency: string;
41
41
  bindCta?: CTAInfoType;
42
42
  taxInfo?: string;
43
+ cover?: string;
43
44
  };
44
45
  export type VideoInfoType = {
45
46
  bindCtaId: string;
@@ -102,7 +102,6 @@ export interface SxpDataSourceProviderProps {
102
102
  loadingImage?: string;
103
103
  isOpenHashTag?: boolean;
104
104
  enabledMetaConversionApi?: boolean;
105
- isShowTag?: boolean;
106
105
  }
107
106
  declare const _default: React.NamedExoticComponent<SxpDataSourceProviderProps>;
108
107
  export default _default;
@@ -17,7 +17,7 @@ var DataSourceType;
17
17
  DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
18
18
  })(DataSourceType || (DataSourceType = {}));
19
19
  const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
20
- const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, isShowTag = true }) => {
20
+ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false }) => {
21
21
  const [rtcList, setRtcList] = (0, react_1.useState)([]);
22
22
  const [tagList, setTagList] = (0, react_1.useState)([]);
23
23
  const [loading, setLoading] = (0, react_1.useState)(false);
@@ -139,9 +139,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
139
139
  if (!enableReportEvent || !enabledMetaConversionApi) {
140
140
  return;
141
141
  }
142
+ const fakeUserId = (0, localStore_1.storeAndLoadFeUserId)();
142
143
  return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
143
144
  method: 'POST',
144
- body: { eventName, actionSource, eventSourceUrl, 'userData.externalId': externalId },
145
+ body: {
146
+ eventName,
147
+ actionSource,
148
+ eventSourceUrl,
149
+ userData: {
150
+ externalId: fakeUserId
151
+ }
152
+ },
145
153
  type: 'beacon'
146
154
  });
147
155
  }, [bffFetch, enableReportEvent, enabledMetaConversionApi]);
@@ -159,7 +167,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
159
167
  }), [bffFetch]);
160
168
  const bffGetTagList = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
161
169
  var _h, _j, _k, _l, _m;
162
- if (!utmVal || !isShowTag)
170
+ if (!utmVal)
163
171
  return;
164
172
  try {
165
173
  const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
@@ -172,7 +180,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
172
180
  catch (e) {
173
181
  console.log('e', e);
174
182
  }
175
- }), [bffFetch, utmVal, isShowTag]);
183
+ }), [bffFetch, utmVal]);
176
184
  const ctaEvent = (0, react_1.useCallback)((eventInfo, rec, product, position) => {
177
185
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
178
186
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
@@ -1,16 +1,11 @@
1
1
  declare const _default: ({
2
2
  title: string;
3
- child: ({
4
- type: string;
5
- label: string;
6
- name: string[];
7
- addonAfter?: undefined;
8
- } | {
3
+ child: {
9
4
  type: string;
10
5
  label: string;
11
6
  name: string[];
12
7
  addonAfter: string;
13
- })[];
8
+ }[];
14
9
  } | {
15
10
  title: string;
16
11
  child: {
@@ -6,11 +6,6 @@ exports.default = [
6
6
  {
7
7
  title: '卡片样式',
8
8
  child: [
9
- {
10
- type: 'Number',
11
- label: '文本行数',
12
- name: ['props', 'lineClamp']
13
- },
14
9
  {
15
10
  type: 'Number',
16
11
  label: '上下边距',
@@ -3,9 +3,6 @@ export declare const fontOptions: {
3
3
  value: string;
4
4
  }[];
5
5
  declare const _default: {
6
- fontOptions: {
7
- label: string;
8
- value: string;
9
- }[];
6
+ fontOptions: any[];
10
7
  };
11
8
  export default _default;
@@ -1,10 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.fontOptions = void 0;
4
- exports.fontOptions = [
5
- { label: '应用字体', value: 'appFont' },
6
- { label: '黑体', value: '黑体' }
7
- ];
4
+ exports.fontOptions = [{ label: 'defalut', value: 'appFont' }];
5
+ const sxpFonts = typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.localStorage.getItem('sxp_font_links'));
6
+ const data = sxpFonts && sxpFonts !== '' ? JSON.parse(sxpFonts) : [];
8
7
  exports.default = {
9
- fontOptions: exports.fontOptions
8
+ fontOptions: [...exports.fontOptions, ...data]
10
9
  };
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { CSSProperties } from 'react';
2
2
  import './index.less';
3
3
  export interface IAppointFormProps {
4
4
  columns?: any[];
@@ -14,6 +14,7 @@ export interface IAppointFormProps {
14
14
  layoutType?: 'horizontal' | 'vertical' | 'inline';
15
15
  isExternalLink?: boolean;
16
16
  isPopup?: boolean;
17
+ submitButtonStyle?: CSSProperties;
17
18
  onClick?: () => void;
18
19
  onClose?: () => void;
19
20
  }
@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const css_1 = require("@emotion/css");
5
5
  const react_1 = tslib_1.__importStar(require("react"));
6
- const pro_components_1 = require("@ant-design/pro-components");
7
6
  const lodash_1 = require("lodash");
8
7
  const hooks_1 = require("../../../../core/hooks");
9
8
  require("./index.less");
10
9
  const useEventReport_1 = require("../../../../core/hooks/useEventReport");
11
10
  const AppointForm = (_a) => {
12
- var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, isExternalLink, isPopup, onClick, onClose } = _a, props = tslib_1.__rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose"]);
11
+ var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, isExternalLink, isPopup, onClick, onClose, submitButtonStyle } = _a, props = tslib_1.__rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose", "submitButtonStyle"]);
13
12
  const { submitForm, popupDetailData } = (0, hooks_1.useSxpDataSource)();
14
13
  const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
15
14
  const formRef = (0, react_1.useRef)();
@@ -83,12 +82,8 @@ const AppointForm = (_a) => {
83
82
  return (react_1.default.createElement("div", { className: 'pb-appoint-form' },
84
83
  react_1.default.createElement("div", { className: `pb-appoint-form-title ${(0, css_1.css)(Object.assign({}, textStyle))}` }, title),
85
84
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
86
- react_1.default.createElement("div", { className: 'pb-appoint-form-container' },
87
- react_1.default.createElement(pro_components_1.BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
85
+ react_1.default.createElement("div", { className: 'pb-appoint-form-container' })),
88
86
  react_1.default.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
89
- react_1.default.createElement("button", { onClick: handleSubmit, className: 'pb-appoint-form-btn', style: {
90
- color: submitColor,
91
- background: submitBgColor
92
- } }, loading ? react_1.default.createElement(react_1.default.Fragment, null, "loading...") : submitText))));
87
+ react_1.default.createElement("button", { onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? react_1.default.createElement(react_1.default.Fragment, null, "loading...") : submitText))));
93
88
  };
94
89
  exports.default = (0, react_1.memo)(AppointForm);
@@ -51,16 +51,37 @@ declare const _default: ({
51
51
  })[];
52
52
  name: string[];
53
53
  child?: undefined;
54
- })[];
55
- type?: undefined;
56
- label?: undefined;
57
- name?: undefined;
58
- } | {
59
- title: string;
60
- child: {
54
+ } | {
55
+ type: string;
56
+ label: string;
57
+ child: ({
58
+ type: string;
59
+ name: string[];
60
+ initialValue: string;
61
+ options?: undefined;
62
+ addonAfter?: undefined;
63
+ } | {
64
+ type: string;
65
+ name: string[];
66
+ options: any[];
67
+ initialValue: any;
68
+ addonAfter?: undefined;
69
+ } | {
70
+ type: string;
71
+ name: string[];
72
+ addonAfter: string;
73
+ initialValue: number;
74
+ options?: undefined;
75
+ })[];
76
+ name?: undefined;
77
+ options?: undefined;
78
+ } | {
61
79
  type: string;
62
80
  name: string[];
63
- }[];
81
+ label?: undefined;
82
+ child?: undefined;
83
+ options?: undefined;
84
+ })[];
64
85
  type?: undefined;
65
86
  label?: undefined;
66
87
  name?: undefined;
@@ -1,7 +1,8 @@
1
1
  "use strict";
2
- var _a;
2
+ var _a, _b, _c;
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
- const defaultSetting_1 = require("../../defaultSetting");
4
+ const tslib_1 = require("tslib");
5
+ const defaultSetting_1 = tslib_1.__importStar(require("../../defaultSetting"));
5
6
  exports.default = [
6
7
  {
7
8
  type: 'Text',
@@ -71,6 +72,37 @@ exports.default = [
71
72
  type: 'Text',
72
73
  name: ['props', 'submitText']
73
74
  },
75
+ {
76
+ type: 'Group',
77
+ label: '提交按钮字体',
78
+ child: [
79
+ {
80
+ type: 'Color',
81
+ name: ['props', 'submitButtonStyle', 'color'],
82
+ initialValue: '#fff'
83
+ },
84
+ {
85
+ type: 'Select',
86
+ name: ['props', 'submitButtonStyle', 'fontFamily'],
87
+ options: defaultSetting_1.default === null || defaultSetting_1.default === void 0 ? void 0 : defaultSetting_1.default.fontOptions,
88
+ initialValue: (_c = (_b = defaultSetting_1.default === null || defaultSetting_1.default === void 0 ? void 0 : defaultSetting_1.default.fontOptions) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.value
89
+ },
90
+ {
91
+ type: 'Number',
92
+ name: ['props', 'submitButtonStyle', 'fontSize'],
93
+ addonAfter: 'px',
94
+ initialValue: 12
95
+ }
96
+ ]
97
+ },
98
+ {
99
+ type: 'TextStyle',
100
+ name: ['props', 'submitButtonStyle']
101
+ },
102
+ {
103
+ type: 'TextAlign',
104
+ name: ['props', 'submitButtonStyle']
105
+ },
74
106
  {
75
107
  label: '提交文本颜色',
76
108
  type: 'Color',
@@ -20,6 +20,7 @@ export interface ICommodityDetailProps {
20
20
  swiper: {
21
21
  dotsAlign: 'left' | 'center';
22
22
  delay: number;
23
+ translateY?: number;
23
24
  };
24
25
  commodityStyles?: {
25
26
  title: CSSProperties;