pb-sxp-ui 1.6.3 → 1.6.4
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 +13 -11
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +13 -11
- 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 +13 -11
- 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/Hashtag/index.d.ts +1 -0
- package/es/core/components/SxpPageRender/Hashtag/index.js +5 -3
- package/es/core/components/SxpPageRender/index.d.ts +1 -0
- package/es/core/components/SxpPageRender/index.js +3 -3
- package/es/materials/sxp/template/components/Scroll.d.ts +1 -0
- package/es/materials/sxp/template/components/Scroll.js +2 -2
- package/lib/core/components/SxpPageRender/Hashtag/index.d.ts +1 -0
- package/lib/core/components/SxpPageRender/Hashtag/index.js +5 -3
- package/lib/core/components/SxpPageRender/index.d.ts +1 -0
- package/lib/core/components/SxpPageRender/index.js +3 -3
- package/lib/materials/sxp/template/components/Scroll.d.ts +1 -0
- package/lib/materials/sxp/template/components/Scroll.js +2 -2
- package/package.json +1 -1
@@ -3,7 +3,7 @@ import { SwiperSlide } from 'swiper/react';
|
|
3
3
|
import { useSxpDataSource } from '../../../../core/hooks';
|
4
4
|
import Scroll from '../../../../materials/sxp/template/components/Scroll';
|
5
5
|
import { setFontForText } from '../../../../core/utils/tool';
|
6
|
-
const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
|
6
|
+
const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle, hashTagRightMargin }) => {
|
7
7
|
var _a;
|
8
8
|
const [isShowMore, setIsShowMore] = useState(false);
|
9
9
|
const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
|
@@ -36,8 +36,10 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
|
|
36
36
|
}
|
37
37
|
return (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
|
38
38
|
}, [isShowMore, tags]);
|
39
|
-
return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: {
|
40
|
-
|
39
|
+
return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: {
|
40
|
+
marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px`
|
41
|
+
} },
|
42
|
+
React.createElement(Scroll, { width: hashTagRightMargin }, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item), tag: 'button', "aria-label": item },
|
41
43
|
React.createElement("div", { dangerouslySetInnerHTML: { __html: setFontForText(`#${item}`, hashTagStyle) } })))))));
|
42
44
|
};
|
43
45
|
export default memo(Hashtag);
|
@@ -22,7 +22,7 @@ import withBindDataSource from '../../../core/hoc/withBindDataSource';
|
|
22
22
|
import Tagbar from './Tagbar';
|
23
23
|
import { getFeUserId, getSlideSkipState } from '../../../core/utils/localStore';
|
24
24
|
import { isEqual } from 'lodash';
|
25
|
-
const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
|
25
|
+
const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], licenseUrl }) => {
|
26
26
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
27
27
|
const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
|
28
28
|
const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
|
@@ -273,7 +273,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
273
273
|
React.createElement("div", null,
|
274
274
|
React.createElement(ExpandableText, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
|
275
275
|
React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex }),
|
276
|
-
React.createElement(Hashtag, { index: activeIndex, tags: (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.hashTags) !== null && _f !== void 0 ? _f : [], itemId: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId, itemType: ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))),
|
276
|
+
React.createElement(Hashtag, { index: activeIndex, tags: (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.hashTags) !== null && _f !== void 0 ? _f : [], itemId: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId, itemType: ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
|
277
277
|
React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
|
278
278
|
}
|
279
279
|
return null;
|
@@ -520,7 +520,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
520
520
|
padding: 0,
|
521
521
|
background: 'transparent'
|
522
522
|
}, role: 'button', "aria-label": 'back button', onClick: () => history === null || history === void 0 ? void 0 : history.back() },
|
523
|
-
React.createElement("img", { src: (_s = (_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _r === void 0 ? void 0 : _r.icon) !== null && _s !== void 0 ? _s : left, alt: 'back button', width:
|
523
|
+
React.createElement("img", { src: (_s = (_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _r === void 0 ? void 0 : _r.icon) !== null && _s !== void 0 ? _s : left, alt: 'back button', width: 100, style: { objectFit: 'cover' } }))),
|
524
524
|
isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _t !== void 0 ? _t : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
|
525
525
|
React.createElement(Swiper, { style: {
|
526
526
|
marginTop: tagHeight
|
@@ -5,7 +5,7 @@ import 'swiper/css/free-mode';
|
|
5
5
|
import 'swiper/css/scrollbar';
|
6
6
|
import { FreeMode, Scrollbar, Mousewheel } from 'swiper/modules';
|
7
7
|
import { useSxpDataSource } from '../../../../core/hooks';
|
8
|
-
const Scroll = ({ children, isPadding = true, style, enableSlideActive = false }) => {
|
8
|
+
const Scroll = ({ children, isPadding = true, style, enableSlideActive = false, width }) => {
|
9
9
|
const ref = useRef();
|
10
10
|
const { popupDetailData } = useSxpDataSource();
|
11
11
|
useEffect(() => {
|
@@ -13,6 +13,6 @@ const Scroll = ({ children, isPadding = true, style, enableSlideActive = false }
|
|
13
13
|
if (enableSlideActive)
|
14
14
|
(_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
|
15
15
|
}, [popupDetailData, enableSlideActive]);
|
16
|
-
return (React.createElement(Swiper, { ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [FreeMode, Scrollbar, Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
|
16
|
+
return (React.createElement(Swiper, { ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [FreeMode, Scrollbar, Mousewheel], style: Object.assign(Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style), (width && { width })) }, children));
|
17
17
|
};
|
18
18
|
export default memo(Scroll);
|
@@ -6,7 +6,7 @@ const react_2 = require("swiper/react");
|
|
6
6
|
const hooks_1 = require("../../../../core/hooks");
|
7
7
|
const Scroll_1 = tslib_1.__importDefault(require("../../../../materials/sxp/template/components/Scroll"));
|
8
8
|
const tool_1 = require("../../../../core/utils/tool");
|
9
|
-
const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
|
9
|
+
const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle, hashTagRightMargin }) => {
|
10
10
|
var _a;
|
11
11
|
const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
|
12
12
|
const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = (0, hooks_1.useSxpDataSource)();
|
@@ -39,8 +39,10 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
|
|
39
39
|
}
|
40
40
|
return (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
|
41
41
|
}, [isShowMore, tags]);
|
42
|
-
return (react_1.default.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: {
|
43
|
-
|
42
|
+
return (react_1.default.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: {
|
43
|
+
marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px`
|
44
|
+
} },
|
45
|
+
react_1.default.createElement(Scroll_1.default, { width: hashTagRightMargin }, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item), tag: 'button', "aria-label": item },
|
44
46
|
react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(`#${item}`, hashTagStyle) } })))))));
|
45
47
|
};
|
46
48
|
exports.default = (0, react_1.memo)(Hashtag);
|
@@ -25,7 +25,7 @@ const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/
|
|
25
25
|
const Tagbar_1 = tslib_1.__importDefault(require("./Tagbar"));
|
26
26
|
const localStore_1 = require("../../../core/utils/localStore");
|
27
27
|
const lodash_1 = require("lodash");
|
28
|
-
const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
|
28
|
+
const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], licenseUrl }) => {
|
29
29
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
30
30
|
const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
|
31
31
|
const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
|
@@ -276,7 +276,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
276
276
|
react_1.default.createElement("div", null,
|
277
277
|
react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
|
278
278
|
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex }),
|
279
|
-
react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.hashTags) !== null && _f !== void 0 ? _f : [], itemId: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId, itemType: ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))),
|
279
|
+
react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.hashTags) !== null && _f !== void 0 ? _f : [], itemId: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId, itemType: ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
|
280
280
|
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
|
281
281
|
}
|
282
282
|
return null;
|
@@ -523,7 +523,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
523
523
|
padding: 0,
|
524
524
|
background: 'transparent'
|
525
525
|
}, role: 'button', "aria-label": 'back button', onClick: () => history === null || history === void 0 ? void 0 : history.back() },
|
526
|
-
react_1.default.createElement("img", { src: (_s = (_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _r === void 0 ? void 0 : _r.icon) !== null && _s !== void 0 ? _s : left_png_1.default, alt: 'back button', width:
|
526
|
+
react_1.default.createElement("img", { src: (_s = (_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _r === void 0 ? void 0 : _r.icon) !== null && _s !== void 0 ? _s : left_png_1.default, alt: 'back button', width: 100, style: { objectFit: 'cover' } }))),
|
527
527
|
isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _t !== void 0 ? _t : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
|
528
528
|
react_1.default.createElement(react_2.Swiper, { style: {
|
529
529
|
marginTop: tagHeight
|
@@ -8,7 +8,7 @@ require("swiper/css/free-mode");
|
|
8
8
|
require("swiper/css/scrollbar");
|
9
9
|
const modules_1 = require("swiper/modules");
|
10
10
|
const hooks_1 = require("../../../../core/hooks");
|
11
|
-
const Scroll = ({ children, isPadding = true, style, enableSlideActive = false }) => {
|
11
|
+
const Scroll = ({ children, isPadding = true, style, enableSlideActive = false, width }) => {
|
12
12
|
const ref = (0, react_1.useRef)();
|
13
13
|
const { popupDetailData } = (0, hooks_1.useSxpDataSource)();
|
14
14
|
(0, react_1.useEffect)(() => {
|
@@ -16,6 +16,6 @@ const Scroll = ({ children, isPadding = true, style, enableSlideActive = false }
|
|
16
16
|
if (enableSlideActive)
|
17
17
|
(_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
|
18
18
|
}, [popupDetailData, enableSlideActive]);
|
19
|
-
return (react_1.default.createElement(react_2.Swiper, { ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [modules_1.FreeMode, modules_1.Scrollbar, modules_1.Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
|
19
|
+
return (react_1.default.createElement(react_2.Swiper, { ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [modules_1.FreeMode, modules_1.Scrollbar, modules_1.Mousewheel], style: Object.assign(Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style), (width && { width })) }, children));
|
20
20
|
};
|
21
21
|
exports.default = (0, react_1.memo)(Scroll);
|