pb-sxp-ui 1.0.45 → 1.0.46

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 (28) hide show
  1. package/dist/index.cjs +88 -40
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +16 -2
  4. package/dist/index.js +88 -40
  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 +88 -40
  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/PictureGroup/Picture.js +8 -7
  15. package/es/core/components/SxpPageRender/VideoWidget/index.js +19 -18
  16. package/es/core/components/SxpPageRender/WaterFall/List.js +11 -9
  17. package/es/core/components/SxpPageRender/index.d.ts +2 -0
  18. package/es/materials/sxp/HashTag/index.d.ts +2 -0
  19. package/es/materials/sxp/HashTag/material.js +14 -0
  20. package/es/materials/sxp/HashTag/settingRender.js +28 -2
  21. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +8 -7
  22. package/lib/core/components/SxpPageRender/VideoWidget/index.js +19 -18
  23. package/lib/core/components/SxpPageRender/WaterFall/List.js +11 -9
  24. package/lib/core/components/SxpPageRender/index.d.ts +2 -0
  25. package/lib/materials/sxp/HashTag/index.d.ts +2 -0
  26. package/lib/materials/sxp/HashTag/material.js +14 -0
  27. package/lib/materials/sxp/HashTag/settingRender.js +28 -2
  28. package/package.json +1 -1
package/es/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -19,13 +19,14 @@ const Picture = (props) => {
19
19
  }
20
20
  : {};
21
21
  }, [blur]);
22
- return (React.createElement("div", { style: {
23
- overflow: 'hidden',
24
- height,
25
- width: '100%',
26
- position: 'relative'
27
- } },
28
- React.createElement(FormatImage, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
22
+ const isBgColor = useMemo(() => {
23
+ return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgWay) === '1';
24
+ }, [imgUrlsPostConfig]);
25
+ const bgStyle = useMemo(() => {
26
+ return isBgColor && (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor) ? { backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor } : {};
27
+ }, [imgUrlsPostConfig, isBgColor]);
28
+ return (React.createElement("div", { style: Object.assign({ overflow: 'hidden', height, width: '100%', position: 'relative' }, bgStyle) },
29
+ !isBgColor && (React.createElement(FormatImage, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
29
30
  blur && (React.createElement(FormatImage, { src: src, style: {
30
31
  width: '100%',
31
32
  height: '100%',
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -138,11 +138,25 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
138
138
  var _a;
139
139
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
140
140
  }, [firstFrameSrc, rec]);
141
+ const blurStyle = useMemo(() => {
142
+ return blur
143
+ ? {
144
+ filter: 'blur(10px)',
145
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
146
+ }
147
+ : {};
148
+ }, [blur]);
149
+ const isBgColor = useMemo(() => {
150
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
151
+ }, [videoPostConfig]);
152
+ const bgStyle = useMemo(() => {
153
+ return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
154
+ }, [videoPostConfig, isBgColor]);
141
155
  const handLoadeddata = useCallback(() => {
142
156
  var _a;
143
- if (!videoRef)
157
+ if (!videoRef || isBgColor)
144
158
  return;
145
- const videoDomRef = document.getElementById(`${videoId}_html5_api`);
159
+ const videoDomRef = document.getElementById('player-container-id_html5_api');
146
160
  if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
147
161
  return;
148
162
  const setFrameImg = () => {
@@ -160,7 +174,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
160
174
  setTimeout(() => {
161
175
  setFrameImg();
162
176
  }, 500);
163
- }, [videoRef]);
177
+ }, [videoRef, isBgColor, rec]);
164
178
  useEffect(() => {
165
179
  if (!isActive || !videoRef)
166
180
  return;
@@ -244,24 +258,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
244
258
  window.removeEventListener('beforeunload', handleBeforeUnload);
245
259
  };
246
260
  }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
247
- const blurStyle = useMemo(() => {
248
- return blur
249
- ? {
250
- filter: 'blur(10px)',
251
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
252
- }
253
- : {};
254
- }, [blur]);
255
261
  if (!rec.video) {
256
262
  return null;
257
263
  }
258
- return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
259
- position: 'relative',
260
- width: '100%',
261
- height,
262
- overflow: 'hidden'
263
- } },
264
- React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
264
+ return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
265
+ !isBgColor && (React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
265
266
  React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
266
267
  React.createElement("div", { style: {
267
268
  position: 'absolute',
package/es/core/components/SxpPageRender/WaterFall/List.js CHANGED
@@ -117,7 +117,7 @@ const WaterfallFlowItem = (props) => {
117
117
  React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
118
118
  };
119
119
  export default function WaterfallList(_a) {
120
- var _b, _c, _d, _e, _f, _g, _h;
120
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k;
121
121
  var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
122
122
  const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
123
123
  const [list, setList] = useState();
@@ -171,15 +171,17 @@ export default function WaterfallList(_a) {
171
171
  };
172
172
  return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
173
173
  React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'list' },
174
- React.createElement("div", { className: 'list-scroll', ref: containerRef, style: {
175
- bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
176
- } },
177
- React.createElement("div", { className: 'list-info', style: (_c = props === null || props === void 0 ? void 0 : props.textStyles) === null || _c === void 0 ? void 0 : _c.hashTagDesc }, (_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.info),
178
- React.createElement("div", { hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link), className: 'list-collection', onClick: handleClickLink, style: { marginBottom: props === null || props === void 0 ? void 0 : props.space } }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
174
+ React.createElement("div", { className: 'list-scroll', ref: containerRef },
175
+ React.createElement("div", { className: 'list-info', style: (_b = props === null || props === void 0 ? void 0 : props.textStyles) === null || _b === void 0 ? void 0 : _b.hashTagDesc }, (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.info),
176
+ React.createElement("div", { hidden: !((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.link), className: 'list-collection', onClick: handleClickLink, style: Object.assign(Object.assign({}, (_e = props === null || props === void 0 ? void 0 : props.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagLink), { marginBottom: props === null || props === void 0 ? void 0 : props.space }) }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
179
177
  React.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
180
178
  return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
181
179
  })),
182
- React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading...")),
183
- React.createElement("div", { className: 'list-bottom', hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) },
184
- React.createElement("button", { className: 'list-bottom-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'))))));
180
+ React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
181
+ React.createElement("div", { style: {
182
+ height: ((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) ? ((_h = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _h === void 0 ? void 0 : _h.height) || ((_j = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _j === void 0 ? void 0 : _j.height) || '100px' : 0
183
+ } })),
184
+ React.createElement("div", { className: 'list-bottom', style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
185
+ React.createElement("div", { className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
186
+ React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.linkTitle) || 'Shop the collection'))))));
185
187
  }
package/es/core/components/SxpPageRender/index.d.ts CHANGED
@@ -5,6 +5,8 @@ export type postConfigType = {
5
5
  mode?: '1' | '2';
6
6
  offsetTop?: number;
7
7
  delay?: number;
8
+ bgWay?: '1' | '2';
9
+ bgColor?: string;
8
10
  };
9
11
  export interface ISxpPageRenderProps {
10
12
  globalConfig?: {
package/es/materials/sxp/HashTag/index.d.ts CHANGED
@@ -6,9 +6,11 @@ export interface IHashTagProps {
6
6
  textStyles: {
7
7
  hashTagTitle: CSSProperties;
8
8
  hashTagDesc: CSSProperties;
9
+ hashTagLink: CSSProperties;
9
10
  title: CSSProperties;
10
11
  price: CSSProperties;
11
12
  };
13
+ buttonBgStyle: CSSProperties;
12
14
  }
13
15
  declare const _default: React.NamedExoticComponent<IHashTagProps>;
14
16
  export default _default;
package/es/materials/sxp/HashTag/material.js CHANGED
@@ -24,6 +24,12 @@ const HashTag = createMaterial(HashTagComponent, {
24
24
  textAlign: 'center',
25
25
  color: '#000'
26
26
  },
27
+ hashTagLink: {
28
+ textAlign: 'center',
29
+ color: '#757575',
30
+ fontSize: 12,
31
+ textDecoration: 'underline'
32
+ },
27
33
  title: {
28
34
  fontSize: 12,
29
35
  color: '#000'
@@ -42,6 +48,14 @@ const HashTag = createMaterial(HashTagComponent, {
42
48
  textAlign: 'center',
43
49
  color: '#fff',
44
50
  borderRadius: 25
51
+ },
52
+ buttonBgStyle: {
53
+ backgroundColor: '#fff',
54
+ height: 52,
55
+ paddingTop: 20,
56
+ paddingLeft: 20,
57
+ paddingRight: 20,
58
+ paddingBottom: 20
45
59
  }
46
60
  }
47
61
  },
package/es/materials/sxp/HashTag/settingRender.js CHANGED
@@ -36,6 +36,10 @@ export default [
36
36
  label: 'hashtag描述',
37
37
  value: 'hashTagDesc'
38
38
  },
39
+ {
40
+ label: 'hashtag描述超链',
41
+ value: 'hashTagLink'
42
+ },
39
43
  {
40
44
  label: '标题',
41
45
  value: 'title'
@@ -119,8 +123,8 @@ export default [
119
123
  ]
120
124
  },
121
125
  {
122
- type: 'TextMargin',
123
- name: ['props', 'buttonStyle']
126
+ type: 'TextPadding',
127
+ name: ['props', 'buttonBgStyle']
124
128
  },
125
129
  {
126
130
  type: 'Group',
@@ -153,5 +157,27 @@ export default [
153
157
  name: ['props', 'buttonStyle']
154
158
  }
155
159
  ]
160
+ },
161
+ {
162
+ title: '按钮背景样式',
163
+ child: [
164
+ {
165
+ type: 'Color',
166
+ label: '背景色',
167
+ name: ['props', 'buttonBgStyle', 'backgroundColor'],
168
+ initialValue: '#fff'
169
+ },
170
+ {
171
+ type: 'Group',
172
+ label: '尺寸',
173
+ child: [
174
+ {
175
+ type: 'Number',
176
+ name: ['props', 'buttonBgStyle', 'height'],
177
+ addonAfter: 'H'
178
+ }
179
+ ]
180
+ }
181
+ ]
156
182
  }
157
183
  ];
package/lib/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -22,13 +22,14 @@ const Picture = (props) => {
22
22
  }
23
23
  : {};
24
24
  }, [blur]);
25
- return (react_1.default.createElement("div", { style: {
26
- overflow: 'hidden',
27
- height,
28
- width: '100%',
29
- position: 'relative'
30
- } },
31
- react_1.default.createElement(FormatImage_1.default, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
25
+ const isBgColor = (0, react_1.useMemo)(() => {
26
+ return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgWay) === '1';
27
+ }, [imgUrlsPostConfig]);
28
+ const bgStyle = (0, react_1.useMemo)(() => {
29
+ return isBgColor && (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor) ? { backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor } : {};
30
+ }, [imgUrlsPostConfig, isBgColor]);
31
+ return (react_1.default.createElement("div", { style: Object.assign({ overflow: 'hidden', height, width: '100%', position: 'relative' }, bgStyle) },
32
+ !isBgColor && (react_1.default.createElement(FormatImage_1.default, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
32
33
  blur && (react_1.default.createElement(FormatImage_1.default, { src: src, style: {
33
34
  width: '100%',
34
35
  height: '100%',
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -141,11 +141,25 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
141
141
  var _a;
142
142
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
143
143
  }, [firstFrameSrc, rec]);
144
+ const blurStyle = (0, react_1.useMemo)(() => {
145
+ return blur
146
+ ? {
147
+ filter: 'blur(10px)',
148
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
149
+ }
150
+ : {};
151
+ }, [blur]);
152
+ const isBgColor = (0, react_1.useMemo)(() => {
153
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
154
+ }, [videoPostConfig]);
155
+ const bgStyle = (0, react_1.useMemo)(() => {
156
+ return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
157
+ }, [videoPostConfig, isBgColor]);
144
158
  const handLoadeddata = (0, react_1.useCallback)(() => {
145
159
  var _a;
146
- if (!videoRef)
160
+ if (!videoRef || isBgColor)
147
161
  return;
148
- const videoDomRef = document.getElementById(`${videoId}_html5_api`);
162
+ const videoDomRef = document.getElementById('player-container-id_html5_api');
149
163
  if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
150
164
  return;
151
165
  const setFrameImg = () => {
@@ -163,7 +177,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
163
177
  setTimeout(() => {
164
178
  setFrameImg();
165
179
  }, 500);
166
- }, [videoRef]);
180
+ }, [videoRef, isBgColor, rec]);
167
181
  (0, react_1.useEffect)(() => {
168
182
  if (!isActive || !videoRef)
169
183
  return;
@@ -247,24 +261,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
247
261
  window.removeEventListener('beforeunload', handleBeforeUnload);
248
262
  };
249
263
  }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
250
- const blurStyle = (0, react_1.useMemo)(() => {
251
- return blur
252
- ? {
253
- filter: 'blur(10px)',
254
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
255
- }
256
- : {};
257
- }, [blur]);
258
264
  if (!rec.video) {
259
265
  return null;
260
266
  }
261
- return (react_1.default.createElement(react_1.default.Fragment, null, blur ? (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
262
- position: 'relative',
263
- width: '100%',
264
- height,
265
- overflow: 'hidden'
266
- } },
267
- react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
267
+ return (react_1.default.createElement(react_1.default.Fragment, null, blur ? (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
268
+ !isBgColor && (react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
268
269
  react_1.default.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
269
270
  react_1.default.createElement("div", { style: {
270
271
  position: 'absolute',
package/lib/core/components/SxpPageRender/WaterFall/List.js CHANGED
@@ -119,7 +119,7 @@ const WaterfallFlowItem = (props) => {
119
119
  react_1.default.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
120
120
  };
121
121
  function WaterfallList(_a) {
122
- var _b, _c, _d, _e, _f, _g, _h;
122
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k;
123
123
  var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
124
124
  const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
125
125
  const [list, setList] = (0, react_1.useState)();
@@ -173,16 +173,18 @@ function WaterfallList(_a) {
173
173
  };
174
174
  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' } },
175
175
  react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (react_1.default.createElement("div", { className: 'list' },
176
- react_1.default.createElement("div", { className: 'list-scroll', ref: containerRef, style: {
177
- bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
178
- } },
179
- react_1.default.createElement("div", { className: 'list-info', style: (_c = props === null || props === void 0 ? void 0 : props.textStyles) === null || _c === void 0 ? void 0 : _c.hashTagDesc }, (_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.info),
180
- react_1.default.createElement("div", { hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link), className: 'list-collection', onClick: handleClickLink, style: { marginBottom: props === null || props === void 0 ? void 0 : props.space } }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
176
+ react_1.default.createElement("div", { className: 'list-scroll', ref: containerRef },
177
+ react_1.default.createElement("div", { className: 'list-info', style: (_b = props === null || props === void 0 ? void 0 : props.textStyles) === null || _b === void 0 ? void 0 : _b.hashTagDesc }, (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.info),
178
+ react_1.default.createElement("div", { hidden: !((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.link), className: 'list-collection', onClick: handleClickLink, style: Object.assign(Object.assign({}, (_e = props === null || props === void 0 ? void 0 : props.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagLink), { marginBottom: props === null || props === void 0 ? void 0 : props.space }) }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
181
179
  react_1.default.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
182
180
  return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
183
181
  })),
184
- react_1.default.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading...")),
185
- react_1.default.createElement("div", { className: 'list-bottom', hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) },
186
- react_1.default.createElement("button", { className: 'list-bottom-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'))))));
182
+ react_1.default.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
183
+ react_1.default.createElement("div", { style: {
184
+ height: ((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) ? ((_h = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _h === void 0 ? void 0 : _h.height) || ((_j = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _j === void 0 ? void 0 : _j.height) || '100px' : 0
185
+ } })),
186
+ react_1.default.createElement("div", { className: 'list-bottom', style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
187
+ react_1.default.createElement("div", { className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
188
+ react_1.default.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.linkTitle) || 'Shop the collection'))))));
187
189
  }
188
190
  exports.default = WaterfallList;
package/lib/core/components/SxpPageRender/index.d.ts CHANGED
@@ -5,6 +5,8 @@ export type postConfigType = {
5
5
  mode?: '1' | '2';
6
6
  offsetTop?: number;
7
7
  delay?: number;
8
+ bgWay?: '1' | '2';
9
+ bgColor?: string;
8
10
  };
9
11
  export interface ISxpPageRenderProps {
10
12
  globalConfig?: {
package/lib/materials/sxp/HashTag/index.d.ts CHANGED
@@ -6,9 +6,11 @@ export interface IHashTagProps {
6
6
  textStyles: {
7
7
  hashTagTitle: CSSProperties;
8
8
  hashTagDesc: CSSProperties;
9
+ hashTagLink: CSSProperties;
9
10
  title: CSSProperties;
10
11
  price: CSSProperties;
11
12
  };
13
+ buttonBgStyle: CSSProperties;
12
14
  }
13
15
  declare const _default: React.NamedExoticComponent<IHashTagProps>;
14
16
  export default _default;
package/lib/materials/sxp/HashTag/material.js CHANGED
@@ -28,6 +28,12 @@ const HashTag = (0, create_1.createMaterial)(_1.default, {
28
28
  textAlign: 'center',
29
29
  color: '#000'
30
30
  },
31
+ hashTagLink: {
32
+ textAlign: 'center',
33
+ color: '#757575',
34
+ fontSize: 12,
35
+ textDecoration: 'underline'
36
+ },
31
37
  title: {
32
38
  fontSize: 12,
33
39
  color: '#000'
@@ -46,6 +52,14 @@ const HashTag = (0, create_1.createMaterial)(_1.default, {
46
52
  textAlign: 'center',
47
53
  color: '#fff',
48
54
  borderRadius: 25
55
+ },
56
+ buttonBgStyle: {
57
+ backgroundColor: '#fff',
58
+ height: 52,
59
+ paddingTop: 20,
60
+ paddingLeft: 20,
61
+ paddingRight: 20,
62
+ paddingBottom: 20
49
63
  }
50
64
  }
51
65
  },
package/lib/materials/sxp/HashTag/settingRender.js CHANGED
@@ -38,6 +38,10 @@ exports.default = [
38
38
  label: 'hashtag描述',
39
39
  value: 'hashTagDesc'
40
40
  },
41
+ {
42
+ label: 'hashtag描述超链',
43
+ value: 'hashTagLink'
44
+ },
41
45
  {
42
46
  label: '标题',
43
47
  value: 'title'
@@ -121,8 +125,8 @@ exports.default = [
121
125
  ]
122
126
  },
123
127
  {
124
- type: 'TextMargin',
125
- name: ['props', 'buttonStyle']
128
+ type: 'TextPadding',
129
+ name: ['props', 'buttonBgStyle']
126
130
  },
127
131
  {
128
132
  type: 'Group',
@@ -155,5 +159,27 @@ exports.default = [
155
159
  name: ['props', 'buttonStyle']
156
160
  }
157
161
  ]
162
+ },
163
+ {
164
+ title: '按钮背景样式',
165
+ child: [
166
+ {
167
+ type: 'Color',
168
+ label: '背景色',
169
+ name: ['props', 'buttonBgStyle', 'backgroundColor'],
170
+ initialValue: '#fff'
171
+ },
172
+ {
173
+ type: 'Group',
174
+ label: '尺寸',
175
+ child: [
176
+ {
177
+ type: 'Number',
178
+ name: ['props', 'buttonBgStyle', 'height'],
179
+ addonAfter: 'H'
180
+ }
181
+ ]
182
+ }
183
+ ]
158
184
  }
159
185
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.45",
3
+ "version": "1.0.46",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",