pb-sxp-ui 1.6.2 → 1.6.4

package/dist/index.cjs

@@ -9190,11 +9190,11 @@ var FormatImage$1 = React.memo(FormatImage);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:32
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-07-30 11:46:32
+ * @LastEditTime: 2024-10-17 17:05:11
  * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Scroll.tsx
  *
  */
-const Scroll = ({ children, isPadding = true, style, enableSlideActive = false }) => {
+const Scroll = ({ children, isPadding = true, style, enableSlideActive = false, width }) => {
     const ref = React.useRef();
     const { popupDetailData } = useSxpDataSource();
     React.useEffect(() => {
@@ -9202,7 +9202,7 @@ const Scroll = ({ children, isPadding = true, style, enableSlideActive = false }
         if (enableSlideActive)
             (_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);
     }, [popupDetailData, enableSlideActive]);
-    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));
+    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));
 };
 var Scroll$1 = React.memo(Scroll);
 
@@ -16068,11 +16068,11 @@ var PictureGroup$3 = React.memo(PictureGroup$2);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-10-11 18:37:55
+ * @LastEditTime: 2024-10-17 17:00:33
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Hashtag\index.tsx
  *
  */
-const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
+const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle, hashTagRightMargin }) => {
     var _a;
     const [isShowMore, setIsShowMore] = React.useState(false);
     const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
@@ -16105,8 +16105,10 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
         }
         return (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
     }, [isShowMore, tags]);
-    return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: { marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px` } },
-        React.createElement(Scroll$1, null, 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 },
+    return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: {
+            marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px`
+        } },
+        React.createElement(Scroll$1, { 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 },
             React.createElement("div", { dangerouslySetInnerHTML: { __html: setFontForText(`#${item}`, hashTagStyle) } })))))));
 };
 var Hashtag$1 = React.memo(Hashtag);
@@ -16317,12 +16319,12 @@ var Tagbar$1 = React.memo(Tagbar);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-10-12 18:38:11
+ * @LastEditTime: 2024-10-17 17:16:42
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */
-const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], licenseUrl }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
     const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
     const { schema } = useEditor();
@@ -16478,10 +16480,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             minusHeight += 56;
         }
         return minusHeight;
-    }, []);
+    }, [globalConfig]);
     const height = React.useMemo(() => {
         return containerHeight - minusHeight - tagHeight;
-    }, [globalConfig, containerHeight, tagHeight]);
+    }, [minusHeight, containerHeight, tagHeight]);
     const visList = React.useMemo(() => {
         var _a;
         const list = activeIndex === 0 && !waterFallData && !isEditor
@@ -16575,7 +16577,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     React.createElement("div", null,
                         React.createElement(ExpandableText$1, { 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 }),
                         React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex }),
-                        React.createElement(Hashtag$1, { 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 }))),
+                        React.createElement(Hashtag$1, { 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) }))),
                 React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
         }
         return null;
@@ -16818,14 +16820,15 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         ((_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _f === void 0 ? void 0 : _f.enable) && (React.createElement("button", { style: {
                 position: 'absolute',
                 [(_h = (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _g === void 0 ? void 0 : _g.xPosit) !== null && _h !== void 0 ? _h : 'left']: (_k = (_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _j === void 0 ? void 0 : _j.x) !== null && _k !== void 0 ? _k : 0,
-                [(_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _l === void 0 ? void 0 : _l.yPosit) !== null && _m !== void 0 ? _m : 'top']: (_p = (_o = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _o === void 0 ? void 0 : _o.y) !== null && _p !== void 0 ? _p : 0,
+                [(_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _l === void 0 ? void 0 : _l.yPosit) !== null && _m !== void 0 ? _m : 'top']: (((_o = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _o === void 0 ? void 0 : _o.yPosit) == 'top' ? minusHeight + tagHeight : 0) +
+                    ((_q = (_p = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _p === void 0 ? void 0 : _p.y) !== null && _q !== void 0 ? _q : 0),
                 zIndex: 8,
                 border: 'none',
                 padding: 0,
                 background: 'transparent'
             }, role: 'button', "aria-label": 'back button', onClick: () => history === null || history === void 0 ? void 0 : history.back() },
-            React.createElement("img", { src: (_r = (_q = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _q === void 0 ? void 0 : _q.icon) !== null && _r !== void 0 ? _r : img, alt: 'back button', width: 50, style: { objectFit: 'cover' } }))),
-        isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _s !== void 0 ? _s : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
+            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 : img, alt: 'back button', width: 100, style: { objectFit: 'cover' } }))),
+        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,
         React.createElement(Swiper, { style: {
                 marginTop: tagHeight
             }, ref: swiperRef, onSlideChange: () => {
@@ -16857,7 +16860,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
             renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
             renderView),
-        React.createElement(WaterFall$1, Object.assign({}, (_v = (_u = (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _t === void 0 ? void 0 : _t[0]) === null || _u === void 0 ? void 0 : _u.item) === null || _v === void 0 ? void 0 : _v.props))));
+        React.createElement(WaterFall$1, Object.assign({}, (_w = (_v = (_u = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _u === void 0 ? void 0 : _u[0]) === null || _v === void 0 ? void 0 : _v.item) === null || _w === void 0 ? void 0 : _w.props))));
 };
 
 const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {