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.
- package/dist/index.cjs +23 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +23 -14
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +3 -3
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +3 -3
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +23 -14
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +3 -3
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/ExpandableText.js +3 -1
- package/es/core/components/SxpPageRender/Tagbar.d.ts +1 -0
- package/es/core/components/SxpPageRender/Tagbar.js +2 -2
- package/es/core/components/SxpPageRender/index.js +7 -2
- package/es/materials/sxp/popup/CommodityDetail/index.js +4 -3
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +4 -3
- package/lib/core/components/SxpPageRender/ExpandableText.js +3 -1
- package/lib/core/components/SxpPageRender/Tagbar.d.ts +1 -0
- package/lib/core/components/SxpPageRender/Tagbar.js +2 -2
- package/lib/core/components/SxpPageRender/index.js +7 -2
- package/lib/materials/sxp/popup/CommodityDetail/index.js +4 -3
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +4 -3
- package/package.json +1 -1
@@ -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
|
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);
|
@@ -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
|
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,
|
85
|
-
|
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,
|
160
|
-
|
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
|
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);
|
@@ -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
|
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,
|
87
|
-
|
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,
|
162
|
-
|
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
|
};
|