pb-sxp-ui 1.3.0 → 1.3.1

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 (63) hide show
  1. package/dist/index.cjs +207 -78
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +207 -78
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +207 -78
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/Modal/index.js +3 -2
  14. package/es/core/components/SxpPageRender/WaterFall/List.js +8 -4
  15. package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js +7 -3
  16. package/es/core/components/SxpPageRender/index.js +29 -21
  17. package/es/core/context/EditorContext.js +2 -0
  18. package/es/core/context/SxpDataSourceProvider.js +33 -10
  19. package/es/core/hooks/useEventReport.d.ts +1 -1
  20. package/es/core/hooks/useEventReport.js +2 -2
  21. package/es/materials/sxp/HashTag/settingRender.d.ts +6 -7
  22. package/es/materials/sxp/HashTag/settingRender.js +9 -0
  23. package/es/materials/sxp/cta/AniLink/settingRender.d.ts +5 -0
  24. package/es/materials/sxp/cta/AniLink/settingRender.js +4 -0
  25. package/es/materials/sxp/popup/AppointForm/settingRender.d.ts +8 -5
  26. package/es/materials/sxp/popup/AppointForm/settingRender.js +12 -0
  27. package/es/materials/sxp/popup/CommodityDetail/index.d.ts +3 -1
  28. package/es/materials/sxp/popup/CommodityDetail/index.js +21 -13
  29. package/es/materials/sxp/popup/CommodityDetail/settingRender.d.ts +13 -0
  30. package/es/materials/sxp/popup/CommodityDetail/settingRender.js +15 -0
  31. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts +3 -1
  32. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +24 -16
  33. package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts +13 -0
  34. package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js +15 -0
  35. package/es/materials/sxp/popup/CommodityList/settingRender.js +4 -0
  36. package/es/materials/sxp/popup/Prompt/settingRender.js +10 -0
  37. package/es/materials/sxp/template/Link/settingRender.js +5 -0
  38. package/lib/core/components/SxpPageRender/Modal/index.js +3 -2
  39. package/lib/core/components/SxpPageRender/WaterFall/List.js +8 -4
  40. package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +7 -3
  41. package/lib/core/components/SxpPageRender/index.js +28 -20
  42. package/lib/core/context/EditorContext.js +2 -0
  43. package/lib/core/context/SxpDataSourceProvider.js +33 -10
  44. package/lib/core/hooks/useEventReport.d.ts +1 -1
  45. package/lib/core/hooks/useEventReport.js +2 -2
  46. package/lib/materials/sxp/HashTag/settingRender.d.ts +6 -7
  47. package/lib/materials/sxp/HashTag/settingRender.js +9 -0
  48. package/lib/materials/sxp/cta/AniLink/settingRender.d.ts +5 -0
  49. package/lib/materials/sxp/cta/AniLink/settingRender.js +4 -0
  50. package/lib/materials/sxp/popup/AppointForm/settingRender.d.ts +8 -5
  51. package/lib/materials/sxp/popup/AppointForm/settingRender.js +12 -0
  52. package/lib/materials/sxp/popup/CommodityDetail/index.d.ts +3 -1
  53. package/lib/materials/sxp/popup/CommodityDetail/index.js +21 -13
  54. package/lib/materials/sxp/popup/CommodityDetail/settingRender.d.ts +13 -0
  55. package/lib/materials/sxp/popup/CommodityDetail/settingRender.js +15 -0
  56. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts +3 -1
  57. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +24 -16
  58. package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts +13 -0
  59. package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js +15 -0
  60. package/lib/materials/sxp/popup/CommodityList/settingRender.js +4 -0
  61. package/lib/materials/sxp/popup/Prompt/settingRender.js +10 -0
  62. package/lib/materials/sxp/template/Link/settingRender.js +5 -0
  63. package/package.json +1 -1
package/lib/materials/sxp/HashTag/settingRender.d.ts CHANGED
@@ -1,11 +1,4 @@
1
1
  declare const _default: ({
2
- title: string;
3
- child: {
4
- type: string;
5
- label: string;
6
- name: string[];
7
- }[];
8
- } | {
9
2
  title: string;
10
3
  child: ({
11
4
  type: string;
@@ -126,6 +119,12 @@ declare const _default: ({
126
119
  })[];
127
120
  name?: undefined;
128
121
  initialValue?: undefined;
122
+ } | {
123
+ label: string;
124
+ type: string;
125
+ name: string[];
126
+ initialValue?: undefined;
127
+ child?: undefined;
129
128
  })[];
130
129
  })[];
131
130
  export default _default;
package/lib/materials/sxp/HashTag/settingRender.js CHANGED
@@ -101,6 +101,10 @@ exports.default = [
101
101
  {
102
102
  label: '标题对齐',
103
103
  type: 'TextAlign'
104
+ },
105
+ {
106
+ label: '间距',
107
+ type: 'TextSpace'
104
108
  }
105
109
  ]
106
110
  }
@@ -186,6 +190,11 @@ exports.default = [
186
190
  {
187
191
  type: 'TextAlign',
188
192
  name: ['props', 'buttonStyle']
193
+ },
194
+ {
195
+ label: '间距',
196
+ type: 'TextSpace',
197
+ name: ['props', 'buttonStyle']
189
198
  }
190
199
  ]
191
200
  },
package/lib/materials/sxp/cta/AniLink/settingRender.d.ts CHANGED
@@ -68,6 +68,11 @@ declare const _default: ({
68
68
  type: string;
69
69
  name: string[];
70
70
  child?: undefined;
71
+ } | {
72
+ type: string;
73
+ name: string[];
74
+ label?: undefined;
75
+ child?: undefined;
71
76
  })[];
72
77
  })[];
73
78
  export default _default;
package/lib/materials/sxp/cta/AniLink/settingRender.js CHANGED
@@ -99,6 +99,10 @@ exports.default = [
99
99
  label: '对齐',
100
100
  type: 'TextAlign',
101
101
  name: ['props', 'ctaTempStyles', 'ctaTitle']
102
+ },
103
+ {
104
+ type: 'TextSpace',
105
+ name: ['props', 'ctaTempStyles', 'ctaTitle']
102
106
  }
103
107
  ]
104
108
  }
package/lib/materials/sxp/popup/AppointForm/settingRender.d.ts CHANGED
@@ -64,13 +64,16 @@ declare const _default: ({
64
64
  })[];
65
65
  name?: undefined;
66
66
  options?: undefined;
67
- } | {
67
+ })[];
68
+ type?: undefined;
69
+ label?: undefined;
70
+ name?: undefined;
71
+ } | {
72
+ title: string;
73
+ child: {
68
74
  type: string;
69
75
  name: string[];
70
- label?: undefined;
71
- child?: undefined;
72
- options?: undefined;
73
- })[];
76
+ }[];
74
77
  type?: undefined;
75
78
  label?: undefined;
76
79
  name?: undefined;
package/lib/materials/sxp/popup/AppointForm/settingRender.js CHANGED
@@ -70,6 +70,11 @@ exports.default = [
70
70
  type: 'TextAlign',
71
71
  name: ['textStyle']
72
72
  },
73
+ {
74
+ label: '标题间距',
75
+ type: 'TextSpace',
76
+ name: ['textStyle']
77
+ },
73
78
  {
74
79
  label: '表单布局',
75
80
  type: 'Radius',
@@ -128,10 +133,12 @@ exports.default = [
128
133
  ]
129
134
  },
130
135
  {
136
+ label: '提交按钮文本样式',
131
137
  type: 'TextStyle',
132
138
  name: ['props', 'submitButtonStyle']
133
139
  },
134
140
  {
141
+ label: '提交按钮对齐',
135
142
  type: 'TextAlign',
136
143
  name: ['props', 'submitButtonStyle']
137
144
  },
@@ -139,6 +146,11 @@ exports.default = [
139
146
  label: '提交按钮颜色',
140
147
  type: 'Color',
141
148
  name: ['props', 'submitBgColor']
149
+ },
150
+ {
151
+ label: '提交按钮间距',
152
+ type: 'TextSpace',
153
+ name: ['props', 'submitButtonStyle']
142
154
  }
143
155
  ]
144
156
  },
package/lib/materials/sxp/popup/CommodityDetail/index.d.ts CHANGED
@@ -25,7 +25,9 @@ export interface ICommodityDetailProps {
25
25
  commodityStyles?: {
26
26
  title: CSSProperties;
27
27
  collection: CSSProperties;
28
- price: CSSProperties;
28
+ price: CSSProperties & {
29
+ enableFormattedPrice?: boolean;
30
+ };
29
31
  info: CSSProperties;
30
32
  taxInfo: CSSProperties;
31
33
  };
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -14,7 +14,7 @@ const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/componen
14
14
  const tool_1 = require("../../../../core/utils/tool");
15
15
  const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
16
16
  const CommodityDetail = (_a) => {
17
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
17
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
18
18
  var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio"]);
19
19
  const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef } = (0, hooks_1.useSxpDataSource)();
20
20
  const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
@@ -22,6 +22,7 @@ const CommodityDetail = (_a) => {
22
22
  const [showModal, setShowModal] = (0, react_1.useState)(false);
23
23
  const [show3DModal, setShow3DModal] = (0, react_1.useState)(false);
24
24
  const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.useState)((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
25
+ const ref = (0, react_1.useRef)();
25
26
  const data = isPost ? rec : popupDetailData;
26
27
  let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
27
28
  let cta = isPost
@@ -61,17 +62,20 @@ const CommodityDetail = (_a) => {
61
62
  };
62
63
  }, []);
63
64
  const priceText = (0, react_1.useMemo)(() => {
64
- var _a, _b, _c, _d, _e;
65
+ var _a, _b, _c, _d, _e, _f, _g;
66
+ const isToLocStr = ((_a = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _a === void 0 ? void 0 : _a.enableFormattedPrice) === undefined || ((_b = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _b === void 0 ? void 0 : _b.enableFormattedPrice);
65
67
  if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
66
- return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
67
- minimumFractionDigits: 0
68
- })) !== null && _e !== void 0 ? _e : ''}`;
68
+ return `${(_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.currency) === null || _c === void 0 ? void 0 : _c.split('-')[1]) === null || _d === void 0 ? void 0 : _d.toUpperCase()) !== null && _e !== void 0 ? _e : ''}${isToLocStr
69
+ ? (_g = (_f = product === null || product === void 0 ? void 0 : product.price) === null || _f === void 0 ? void 0 : _f.toLocaleString('zh', {
70
+ minimumFractionDigits: 0
71
+ })) !== null && _g !== void 0 ? _g : ''
72
+ : product === null || product === void 0 ? void 0 : product.price}`;
69
73
  }
70
74
  else {
71
75
  return '$7,000';
72
76
  }
73
- }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
74
- const width = (isPreview ? 375 : (_t = style === null || style === void 0 ? void 0 : style.width) !== null && _t !== void 0 ? _t : window.innerWidth) - ((_u = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _u !== void 0 ? _u : 0) * 2;
77
+ }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency, (_t = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _t === void 0 ? void 0 : _t.enableFormattedPrice]);
78
+ const width = (isPreview ? 375 : (_u = style === null || style === void 0 ? void 0 : style.width) !== null && _u !== void 0 ? _u : window.innerWidth) - ((_v = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _v !== void 0 ? _v : 0) * 2;
75
79
  const height = commodityImgRatio ? width * (commodityImgRatio.h / commodityImgRatio.w) : width;
76
80
  const renderContent = ({ isPost }) => {
77
81
  var _a, _b, _c, _d;
@@ -112,6 +116,10 @@ const CommodityDetail = (_a) => {
112
116
  popupCurTimeRef.current = new Date();
113
117
  setCheckCommodityIndex(index);
114
118
  checkCommodityIndexRef.current = index;
119
+ if (ref === null || ref === void 0 ? void 0 : ref.current) {
120
+ ref.current.swiper.slideTo(0);
121
+ ref.current.swiper.autoplay.start();
122
+ }
115
123
  }, []);
116
124
  const renderCommodityGroup = (0, react_1.useCallback)(() => {
117
125
  var _a, _b, _c;
@@ -127,18 +135,18 @@ const CommodityDetail = (_a) => {
127
135
  };
128
136
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
129
137
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
130
- const iframeUrl = ((_w = (_v = data === null || data === void 0 ? void 0 : data.video) === null || _v === void 0 ? void 0 : _v.bindProduct) === null || _w === void 0 ? void 0 : _w.remark) || ((_z = (_y = (_x = data === null || data === void 0 ? void 0 : data.video) === null || _x === void 0 ? void 0 : _x.bindProducts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.remark) || ((_0 = data === null || data === void 0 ? void 0 : data.product) === null || _0 === void 0 ? void 0 : _0.remark);
138
+ const iframeUrl = ((_x = (_w = data === null || data === void 0 ? void 0 : data.video) === null || _w === void 0 ? void 0 : _w.bindProduct) === null || _x === void 0 ? void 0 : _x.remark) || ((_0 = (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.bindProducts) === null || _z === void 0 ? void 0 : _z[0]) === null || _0 === void 0 ? void 0 : _0.remark) || ((_1 = data === null || data === void 0 ? void 0 : data.product) === null || _1 === void 0 ? void 0 : _1.remark);
131
139
  return (react_1.default.createElement(react_1.default.Fragment, null,
132
140
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
133
141
  react_1.default.createElement("div", { style: { position: 'relative' } },
134
- product && ((_1 = product === null || product === void 0 ? void 0 : product.homePage) === null || _1 === void 0 ? void 0 : _1.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
142
+ product && ((_2 = product === null || product === void 0 ? void 0 : product.homePage) === null || _2 === void 0 ? void 0 : _2.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
135
143
  clickable: true,
136
144
  bulletActiveClass: 'swipe-item-active-bullet',
137
145
  clickableClass: getDotsAlign
138
146
  }, loop: true, autoplay: {
139
147
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
140
- } },
141
- react_1.default.createElement(react_1.default.Fragment, null, (_2 = product === null || product === void 0 ? void 0 : product.homePage) === null || _2 === void 0 ? void 0 : _2.map((src) => {
148
+ }, ref: ref },
149
+ react_1.default.createElement(react_1.default.Fragment, null, (_3 = product === null || product === void 0 ? void 0 : product.homePage) === null || _3 === void 0 ? void 0 : _3.map((src) => {
142
150
  var _a;
143
151
  return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
144
152
  react_1.default.createElement("div", { style: {
@@ -154,7 +162,7 @@ const CommodityDetail = (_a) => {
154
162
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
155
163
  }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
156
164
  })))),
157
- !((_3 = product === null || product === void 0 ? void 0 : product.homePage) === null || _3 === void 0 ? void 0 : _3.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
165
+ !((_4 = product === null || product === void 0 ? void 0 : product.homePage) === null || _4 === void 0 ? void 0 : _4.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
158
166
  height,
159
167
  width
160
168
  }) },
@@ -162,7 +170,7 @@ const CommodityDetail = (_a) => {
162
170
  objectFit: 'cover',
163
171
  width: '100%',
164
172
  height: '100%'
165
- }), src: (_4 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _4 !== void 0 ? _4 : bottom_image, alt: 'pdp image' }))),
173
+ }), src: (_5 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _5 !== void 0 ? _5 : bottom_image, alt: 'pdp image' }))),
166
174
  (iframeUrl && iframeIcon) ||
167
175
  (!product && iframeIcon && (react_1.default.createElement("div", { style: {
168
176
  padding: '5px 10px',
package/lib/materials/sxp/popup/CommodityDetail/settingRender.d.ts CHANGED
@@ -147,6 +147,13 @@ declare const _default: ({
147
147
  options?: undefined;
148
148
  initialValue?: undefined;
149
149
  child?: undefined;
150
+ } | {
151
+ label: string;
152
+ type: string;
153
+ name: string[];
154
+ initialValue: boolean;
155
+ options?: undefined;
156
+ child?: undefined;
150
157
  })[];
151
158
  }[];
152
159
  } | {
@@ -205,6 +212,12 @@ declare const _default: ({
205
212
  })[];
206
213
  name?: undefined;
207
214
  initialValue?: undefined;
215
+ } | {
216
+ label: string;
217
+ type: string;
218
+ name: string[];
219
+ initialValue?: undefined;
220
+ child?: undefined;
208
221
  })[];
209
222
  } | {
210
223
  title: string;
package/lib/materials/sxp/popup/CommodityDetail/settingRender.js CHANGED
@@ -210,6 +210,16 @@ exports.default = [
210
210
  label: '默认行数',
211
211
  type: 'Number',
212
212
  name: ['lineClamp']
213
+ },
214
+ {
215
+ label: '间距',
216
+ type: 'TextSpace'
217
+ },
218
+ {
219
+ label: '价格千分符展示',
220
+ type: 'Switch',
221
+ name: ['enableFormattedPrice'],
222
+ initialValue: true
213
223
  }
214
224
  ]
215
225
  }
@@ -295,6 +305,11 @@ exports.default = [
295
305
  {
296
306
  type: 'TextAlign',
297
307
  name: ['props', 'buttonStyle']
308
+ },
309
+ {
310
+ label: '间距',
311
+ type: 'TextSpace',
312
+ name: ['props', 'buttonStyle']
298
313
  }
299
314
  ]
300
315
  },
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts CHANGED
@@ -25,7 +25,9 @@ export interface ICommodityDetailDiroNewProps {
25
25
  commodityStyles?: {
26
26
  title: CSSProperties;
27
27
  collection: CSSProperties;
28
- price: CSSProperties;
28
+ price: CSSProperties & {
29
+ enableFormattedPrice?: boolean;
30
+ };
29
31
  taxInfo: CSSProperties;
30
32
  info: CSSProperties;
31
33
  };
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -14,7 +14,7 @@ const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/componen
14
14
  const tool_1 = require("../../../../core/utils/tool");
15
15
  const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
16
16
  const CommodityDetailDiroNew = (_a) => {
17
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
17
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
18
18
  var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio"]);
19
19
  const [spread, setSpread] = (0, react_1.useState)(true);
20
20
  const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef } = (0, hooks_1.useSxpDataSource)();
@@ -26,6 +26,7 @@ const CommodityDetailDiroNew = (_a) => {
26
26
  const curTimeRef = (0, react_1.useRef)(null);
27
27
  const [show3DModal, setShow3DModal] = (0, react_1.useState)(false);
28
28
  const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.useState)((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
29
+ const ref = (0, react_1.useRef)();
29
30
  const data = isPost ? rec : popupDetailData;
30
31
  let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
31
32
  let cta = isPost
@@ -65,17 +66,20 @@ const CommodityDetailDiroNew = (_a) => {
65
66
  };
66
67
  }, []);
67
68
  const priceText = (0, react_1.useMemo)(() => {
68
- var _a, _b, _c, _d, _e;
69
+ var _a, _b, _c, _d, _e, _f, _g;
70
+ const isToLocStr = ((_a = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _a === void 0 ? void 0 : _a.enableFormattedPrice) === undefined || ((_b = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _b === void 0 ? void 0 : _b.enableFormattedPrice);
69
71
  if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
70
- return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
71
- minimumFractionDigits: 0
72
- })) !== null && _e !== void 0 ? _e : ''}`;
72
+ return `${(_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.currency) === null || _c === void 0 ? void 0 : _c.split('-')[1]) === null || _d === void 0 ? void 0 : _d.toUpperCase()) !== null && _e !== void 0 ? _e : ''}${isToLocStr
73
+ ? (_g = (_f = product === null || product === void 0 ? void 0 : product.price) === null || _f === void 0 ? void 0 : _f.toLocaleString('zh', {
74
+ minimumFractionDigits: 0
75
+ })) !== null && _g !== void 0 ? _g : ''
76
+ : product === null || product === void 0 ? void 0 : product.price}`;
73
77
  }
74
78
  else {
75
79
  return '£102,300.00';
76
80
  }
77
- }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
78
- const width = (isPreview ? 375 : (_t = style === null || style === void 0 ? void 0 : style.width) !== null && _t !== void 0 ? _t : window.innerWidth) - ((_u = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _u !== void 0 ? _u : 0) * 2;
81
+ }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency, (_t = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _t === void 0 ? void 0 : _t.enableFormattedPrice]);
82
+ const width = (isPreview ? 375 : (_u = style === null || style === void 0 ? void 0 : style.width) !== null && _u !== void 0 ? _u : window.innerWidth) - ((_v = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _v !== void 0 ? _v : 0) * 2;
79
83
  const height = commodityImgRatio ? width * (commodityImgRatio.h / commodityImgRatio.w) : width;
80
84
  const handleClickCollapse = () => {
81
85
  setSpread(!spread);
@@ -96,6 +100,10 @@ Made in Italy` })));
96
100
  popupCurTimeRef.current = new Date();
97
101
  setCheckCommodityIndex(index);
98
102
  checkCommodityIndexRef.current = index;
103
+ if (ref === null || ref === void 0 ? void 0 : ref.current) {
104
+ ref.current.swiper.slideTo(0);
105
+ ref.current.swiper.autoplay.start();
106
+ }
99
107
  }, []);
100
108
  const renderCommodityGroup = (0, react_1.useCallback)(() => {
101
109
  var _a, _b, _c;
@@ -111,17 +119,17 @@ Made in Italy` })));
111
119
  };
112
120
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
113
121
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
114
- const iframeUrl = ((_w = (_v = data === null || data === void 0 ? void 0 : data.video) === null || _v === void 0 ? void 0 : _v.bindProduct) === null || _w === void 0 ? void 0 : _w.remark) || ((_z = (_y = (_x = data === null || data === void 0 ? void 0 : data.video) === null || _x === void 0 ? void 0 : _x.bindProducts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.remark) || ((_0 = data === null || data === void 0 ? void 0 : data.product) === null || _0 === void 0 ? void 0 : _0.remark);
122
+ const iframeUrl = ((_x = (_w = data === null || data === void 0 ? void 0 : data.video) === null || _w === void 0 ? void 0 : _w.bindProduct) === null || _x === void 0 ? void 0 : _x.remark) || ((_0 = (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.bindProducts) === null || _z === void 0 ? void 0 : _z[0]) === null || _0 === void 0 ? void 0 : _0.remark) || ((_1 = data === null || data === void 0 ? void 0 : data.product) === null || _1 === void 0 ? void 0 : _1.remark);
115
123
  return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
116
124
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
117
125
  react_1.default.createElement("div", { style: { position: 'relative' } },
118
- product && ((_1 = product === null || product === void 0 ? void 0 : product.homePage) === null || _1 === void 0 ? void 0 : _1.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
126
+ product && ((_2 = product === null || product === void 0 ? void 0 : product.homePage) === null || _2 === void 0 ? void 0 : _2.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
119
127
  clickable: true,
120
128
  bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
121
129
  clickableClass: getDotsAlign
122
130
  }, loop: true, autoplay: {
123
131
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
124
- } }, (_2 = product === null || product === void 0 ? void 0 : product.homePage) === null || _2 === void 0 ? void 0 : _2.map((src) => {
132
+ }, ref: ref }, (_3 = product === null || product === void 0 ? void 0 : product.homePage) === null || _3 === void 0 ? void 0 : _3.map((src) => {
125
133
  var _a;
126
134
  return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
127
135
  react_1.default.createElement("div", { style: {
@@ -137,7 +145,7 @@ Made in Italy` })));
137
145
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
138
146
  }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
139
147
  }))),
140
- !((_3 = product === null || product === void 0 ? void 0 : product.homePage) === null || _3 === void 0 ? void 0 : _3.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
148
+ !((_4 = product === null || product === void 0 ? void 0 : product.homePage) === null || _4 === void 0 ? void 0 : _4.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
141
149
  height,
142
150
  width
143
151
  }) },
@@ -145,7 +153,7 @@ Made in Italy` })));
145
153
  objectFit: 'cover',
146
154
  width: '100%',
147
155
  height: '100%'
148
- }), src: (_4 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _4 !== void 0 ? _4 : bottom_image, alt: 'pdp image' }))),
156
+ }), src: (_5 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _5 !== void 0 ? _5 : bottom_image, alt: 'pdp image' }))),
149
157
  (iframeUrl && iframeIcon) ||
150
158
  (!product && iframeIcon && (react_1.default.createElement("div", { style: {
151
159
  padding: '5px 10px',
@@ -165,7 +173,7 @@ Made in Italy` })));
165
173
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
166
174
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
167
175
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
168
- __html: (0, tool_1.setFontForText)((_5 = product === null || product === void 0 ? void 0 : product.title) !== null && _5 !== void 0 ? _5 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
176
+ __html: (0, tool_1.setFontForText)((_6 = product === null || product === void 0 ? void 0 : product.title) !== null && _6 !== void 0 ? _6 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
169
177
  } }),
170
178
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), dangerouslySetInnerHTML: {
171
179
  __html: (0, tool_1.setFontForText)((product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
@@ -175,11 +183,11 @@ Made in Italy` })));
175
183
  __html: (0, tool_1.setFontForText)(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
176
184
  } }),
177
185
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
178
- __html: (0, tool_1.setFontForText)((_6 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _6 !== void 0 ? _6 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
186
+ __html: (0, tool_1.setFontForText)((_7 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _7 !== void 0 ? _7 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
179
187
  } }))),
180
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_7 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _7 !== void 0 ? _7 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
188
+ (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_8 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _8 !== void 0 ? _8 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
181
189
  react_1.default.createElement("span", { dangerouslySetInnerHTML: {
182
- __html: (0, tool_1.setFontForText)((_8 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _8 !== void 0 ? _8 : 'Shop now', buttonStyle)
190
+ __html: (0, tool_1.setFontForText)((_9 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _9 !== void 0 ? _9 : 'Shop now', buttonStyle)
183
191
  } }))),
184
192
  productInfoText({ isPost }))),
185
193
  react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false })),
package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts CHANGED
@@ -135,6 +135,13 @@ declare const _default: ({
135
135
  options?: undefined;
136
136
  initialValue?: undefined;
137
137
  child?: undefined;
138
+ } | {
139
+ label: string;
140
+ type: string;
141
+ name: string[];
142
+ initialValue: boolean;
143
+ options?: undefined;
144
+ child?: undefined;
138
145
  })[];
139
146
  }[];
140
147
  } | {
@@ -193,6 +200,12 @@ declare const _default: ({
193
200
  })[];
194
201
  name?: undefined;
195
202
  initialValue?: undefined;
203
+ } | {
204
+ label: string;
205
+ type: string;
206
+ name: string[];
207
+ initialValue?: undefined;
208
+ child?: undefined;
196
209
  })[];
197
210
  } | {
198
211
  title: string;
package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js CHANGED
@@ -193,6 +193,16 @@ exports.default = [
193
193
  label: '默认行数',
194
194
  type: 'Number',
195
195
  name: ['lineClamp']
196
+ },
197
+ {
198
+ label: '间距',
199
+ type: 'TextSpace'
200
+ },
201
+ {
202
+ label: '价格千分符展示',
203
+ type: 'Switch',
204
+ name: ['enableFormattedPrice'],
205
+ initialValue: true
196
206
  }
197
207
  ]
198
208
  }
@@ -278,6 +288,11 @@ exports.default = [
278
288
  {
279
289
  type: 'TextAlign',
280
290
  name: ['props', 'buttonStyle']
291
+ },
292
+ {
293
+ label: '间距',
294
+ type: 'TextSpace',
295
+ name: ['props', 'buttonStyle']
281
296
  }
282
297
  ]
283
298
  },
package/lib/materials/sxp/popup/CommodityList/settingRender.js CHANGED
@@ -133,6 +133,10 @@ exports.default = [
133
133
  {
134
134
  label: '标题对齐',
135
135
  type: 'TextAlign'
136
+ },
137
+ {
138
+ label: '间距',
139
+ type: 'TextSpace'
136
140
  }
137
141
  ]
138
142
  }
package/lib/materials/sxp/popup/Prompt/settingRender.js CHANGED
@@ -63,6 +63,11 @@ exports.default = [
63
63
  }
64
64
  ]
65
65
  },
66
+ {
67
+ label: '内容字体间距',
68
+ type: 'TextSpace',
69
+ name: ['props', 'contentStyle']
70
+ },
66
71
  {
67
72
  type: 'Group',
68
73
  label: '提交按钮字体',
@@ -96,6 +101,11 @@ exports.default = [
96
101
  }
97
102
  ]
98
103
  },
104
+ {
105
+ label: '提交按钮间距',
106
+ type: 'TextSpace',
107
+ name: ['props', 'submitButtonStyle']
108
+ },
99
109
  {
100
110
  type: 'TextStyle',
101
111
  name: ['props', 'submitButtonStyle']
package/lib/materials/sxp/template/Link/settingRender.js CHANGED
@@ -93,6 +93,11 @@ exports.default = [
93
93
  type: 'TextAlign',
94
94
  name: ['props', 'customTitle', 'style']
95
95
  },
96
+ {
97
+ label: '间距',
98
+ type: 'TextSpace',
99
+ name: ['props', 'customTitle', 'style']
100
+ },
96
101
  {
97
102
  label: '上边距',
98
103
  type: 'Number',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.3.0",
3
+ "version": "1.3.1",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",