pb-sxp-ui 1.0.100 → 1.0.101

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.
@@ -48,6 +48,8 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
48
48
  wordBreak: 'break-word'
49
49
  }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
50
50
  React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
51
- text && isPost && isShow && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
51
+ text && isPost && isShow && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
52
+ __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
53
+ } }))));
52
54
  };
53
55
  export default memo(ExpandableText);
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  interface IProps {
3
3
  tagList?: string[];
4
4
  setActiveIndex?: React.Dispatch<React.SetStateAction<number>>;
5
+ style?: any;
5
6
  }
6
7
  declare const _default: React.NamedExoticComponent<IProps>;
7
8
  export default _default;
@@ -3,7 +3,7 @@ import { useSxpDataSource } from '../../../core/hooks';
3
3
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
4
4
  import { useEventReport } from '../../../core/hooks/useEventReport';
5
5
  import { DEFAULT_TAG } from '../../../core/context/SxpDataSourceProvider';
6
- const Tagbar = ({ tagList = [], setActiveIndex }) => {
6
+ const Tagbar = ({ tagList = [], setActiveIndex, style }) => {
7
7
  const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport, selectTag, setSelectTag } = useSxpDataSource();
8
8
  const { backMainFeed } = useEventReport();
9
9
  const realTagList = useMemo(() => {
@@ -44,7 +44,7 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
44
44
  };
45
45
  if (waterFallData || tagList.length <= 0)
46
46
  return null;
47
- return (React.createElement("div", { className: 'clc-sxp-tagbar' },
47
+ return (React.createElement("div", { className: 'clc-sxp-tagbar', style: style },
48
48
  React.createElement("ul", { className: 'clc-sxp-tagbar-list', style: { margin: 'auto', gap: 24 } }, realTagList.map((tag) => {
49
49
  return (React.createElement("li", { className: `clc-sxp-tagbar-list-item ${tag === selectTag ? 'clc-sxp-tagbar-list-item-active' : ''}`, key: tag, onClick: handleSelectTag(tag) }, tag));
50
50
  }))));
@@ -168,11 +168,14 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
168
168
  }
169
169
  return h;
170
170
  }, [tagList, waterFallData]);
171
- const height = useMemo(() => {
171
+ const minusHeight = useMemo(() => {
172
172
  let minusHeight = 0;
173
173
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
174
174
  minusHeight += 45;
175
175
  }
176
+ return minusHeight;
177
+ }, []);
178
+ const height = useMemo(() => {
176
179
  return containerHeight - minusHeight - tagHeight;
177
180
  }, [globalConfig, containerHeight, tagHeight]);
178
181
  const renderLogo = useMemo(() => {
@@ -405,7 +408,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
405
408
  setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
406
409
  } })),
407
410
  renderLogo,
408
- React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex }),
411
+ React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
412
+ top: minusHeight
413
+ } }),
409
414
  isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
410
415
  React.createElement(Swiper, { style: {
411
416
  marginTop: tagHeight
@@ -81,9 +81,10 @@ const CommodityDetail = (_a) => {
81
81
  };
82
82
  const renderBtn = () => {
83
83
  var _a, _b;
84
- return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle, dangerouslySetInnerHTML: {
85
- __html: setFontForText((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
86
- } }))));
84
+ return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle },
85
+ React.createElement("span", { dangerouslySetInnerHTML: {
86
+ __html: setFontForText((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
87
+ } })))));
87
88
  };
88
89
  const getStyle = useCallback((style) => {
89
90
  if (style === null || style === void 0 ? void 0 : style.lineClamp) {
@@ -156,9 +156,10 @@ Made in Italy` })));
156
156
  React.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: {
157
157
  __html: setFontForText((_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
158
158
  } }))),
159
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle, dangerouslySetInnerHTML: {
160
- __html: setFontForText((_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now', buttonStyle)
161
- } })),
159
+ (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
160
+ React.createElement("span", { dangerouslySetInnerHTML: {
161
+ __html: setFontForText((_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now', buttonStyle)
162
+ } }))),
162
163
  productInfoText({ isPost }))),
163
164
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
164
165
  };
@@ -51,6 +51,8 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
51
51
  wordBreak: 'break-word'
52
52
  }, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
53
53
  react_1.default.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
54
- text && isPost && isShow && (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
54
+ text && isPost && isShow && (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
55
+ __html: (0, tool_1.setFontForText)(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
56
+ } }))));
55
57
  };
56
58
  exports.default = (0, react_1.memo)(ExpandableText);
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  interface IProps {
3
3
  tagList?: string[];
4
4
  setActiveIndex?: React.Dispatch<React.SetStateAction<number>>;
5
+ style?: any;
5
6
  }
6
7
  declare const _default: React.NamedExoticComponent<IProps>;
7
8
  export default _default;
@@ -6,7 +6,7 @@ const hooks_1 = require("../../../core/hooks");
6
6
  const event_1 = tslib_1.__importStar(require("../../../core/utils/event"));
7
7
  const useEventReport_1 = require("../../../core/hooks/useEventReport");
8
8
  const SxpDataSourceProvider_1 = require("../../../core/context/SxpDataSourceProvider");
9
- const Tagbar = ({ tagList = [], setActiveIndex }) => {
9
+ const Tagbar = ({ tagList = [], setActiveIndex, style }) => {
10
10
  const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport, selectTag, setSelectTag } = (0, hooks_1.useSxpDataSource)();
11
11
  const { backMainFeed } = (0, useEventReport_1.useEventReport)();
12
12
  const realTagList = (0, react_1.useMemo)(() => {
@@ -47,7 +47,7 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
47
47
  };
48
48
  if (waterFallData || tagList.length <= 0)
49
49
  return null;
50
- return (react_1.default.createElement("div", { className: 'clc-sxp-tagbar' },
50
+ return (react_1.default.createElement("div", { className: 'clc-sxp-tagbar', style: style },
51
51
  react_1.default.createElement("ul", { className: 'clc-sxp-tagbar-list', style: { margin: 'auto', gap: 24 } }, realTagList.map((tag) => {
52
52
  return (react_1.default.createElement("li", { className: `clc-sxp-tagbar-list-item ${tag === selectTag ? 'clc-sxp-tagbar-list-item-active' : ''}`, key: tag, onClick: handleSelectTag(tag) }, tag));
53
53
  }))));
@@ -171,11 +171,14 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
171
171
  }
172
172
  return h;
173
173
  }, [tagList, waterFallData]);
174
- const height = (0, react_1.useMemo)(() => {
174
+ const minusHeight = (0, react_1.useMemo)(() => {
175
175
  let minusHeight = 0;
176
176
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
177
177
  minusHeight += 45;
178
178
  }
179
+ return minusHeight;
180
+ }, []);
181
+ const height = (0, react_1.useMemo)(() => {
179
182
  return containerHeight - minusHeight - tagHeight;
180
183
  }, [globalConfig, containerHeight, tagHeight]);
181
184
  const renderLogo = (0, react_1.useMemo)(() => {
@@ -408,7 +411,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
408
411
  setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
409
412
  } })),
410
413
  renderLogo,
411
- react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
414
+ react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
415
+ top: minusHeight
416
+ } }),
412
417
  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,
413
418
  react_1.default.createElement(react_2.Swiper, { style: {
414
419
  marginTop: tagHeight
@@ -83,9 +83,10 @@ const CommodityDetail = (_a) => {
83
83
  };
84
84
  const renderBtn = () => {
85
85
  var _a, _b;
86
- return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle, dangerouslySetInnerHTML: {
87
- __html: (0, tool_1.setFontForText)((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
88
- } }))));
86
+ return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle },
87
+ react_1.default.createElement("span", { dangerouslySetInnerHTML: {
88
+ __html: (0, tool_1.setFontForText)((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
89
+ } })))));
89
90
  };
90
91
  const getStyle = (0, react_1.useCallback)((style) => {
91
92
  if (style === null || style === void 0 ? void 0 : style.lineClamp) {
@@ -158,9 +158,10 @@ Made in Italy` })));
158
158
  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: {
159
159
  __html: (0, tool_1.setFontForText)((_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
160
160
  } }))),
161
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle, dangerouslySetInnerHTML: {
162
- __html: (0, tool_1.setFontForText)((_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now', buttonStyle)
163
- } })),
161
+ (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
162
+ react_1.default.createElement("span", { dangerouslySetInnerHTML: {
163
+ __html: (0, tool_1.setFontForText)((_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now', buttonStyle)
164
+ } }))),
164
165
  productInfoText({ isPost }))),
165
166
  react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
166
167
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.100",
3
+ "version": "1.0.101",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",