pb-sxp-ui 1.0.3-alpha.1 → 1.0.3-alpha.2

package/es/core/components/SxpPageRender/Hashtag/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { RecItemType } from '../typing';
 interface IHashtagProps {
     tags: string[];
@@ -6,6 +6,7 @@ interface IHashtagProps {
     itemType: 'VIDEO' | 'PRODUCT' | null;
     index: number;
     rec: RecItemType;
+    hashTagStyle?: CSSProperties;
 }
 declare const _default: React.NamedExoticComponent<IHashtagProps>;
 export default _default;

package/es/core/components/SxpPageRender/Hashtag/index.js

@@ -2,7 +2,7 @@ import React, { memo, useMemo, useState } from 'react';
 import { SwiperSlide } from 'swiper/react';
 import { useSxpDataSource } from '../../../../core/hooks';
 import Scroll from '../../../../materials/sxp/template/components/Scroll';
-const Hashtag = ({ tags, itemId, itemType, index, rec }) => {
+const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
     const [isShowMore, setIsShowMore] = useState(false);
     const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
     const handleClickTag = (data) => {
@@ -35,6 +35,6 @@ const Hashtag = ({ tags, itemId, itemType, index, rec }) => {
         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' },
-        React.createElement(Scroll, 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', onClick: () => handleClickTag(item) }, `#${item}`))))));
+        React.createElement(Scroll, 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) }, `#${item}`))))));
 };
 export default memo(Hashtag);

package/es/core/components/SxpPageRender/Navbar.d.ts

@@ -2,6 +2,7 @@ import React, { CSSProperties } from 'react';
 interface INavbarProps {
     icon?: string;
     styles?: CSSProperties;
+    textStyle?: CSSProperties;
     onClose?: () => void;
 }
 declare const _default: React.NamedExoticComponent<INavbarProps>;

package/es/core/components/SxpPageRender/Navbar.js

@@ -1,9 +1,10 @@
 import React, { memo } from 'react';
 import { useSxpDataSource } from '../../../core/hooks';
-const Navbar = ({ icon, styles, onClose }) => {
+const Navbar = ({ icon, styles, textStyle, onClose }) => {
+    var _a;
     const { waterFallData, setOpenHashtag } = useSxpDataSource();
     return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
         React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: '', onClick: onClose }),
-        React.createElement("div", { className: 'clc-sxp-nav-title' }, `#${waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag}`)));
+        React.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle }, `#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`)));
 };
 export default memo(Navbar);

package/es/core/components/SxpPageRender/WaterFall/List.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import './List.less';
-export default function WaterfallList({ reportTagsView }: any): React.JSX.Element;
+import { IHashTagProps } from '../../../../materials/sxp/HashTag';
+export default function WaterfallList({ reportTagsView, ...props }: any & IHashTagProps): React.JSX.Element;

package/es/core/components/SxpPageRender/WaterFall/List.js

@@ -1,8 +1,10 @@
+import { __rest } from "tslib";
 import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import './List.less';
+import previewData from './preview.json';
 import { useSxpDataSource } from '../../../../core/hooks';
 const WaterfallFlowItem = (props) => {
-    const { rec, index, list, reportTagsView } = props;
+    const { rec, index, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
     const [showVideo, setShowVideo] = useState(false);
     const imgDom = useRef(null);
@@ -102,19 +104,20 @@ const WaterfallFlowItem = (props) => {
             setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
         }, 0);
     };
-    return (React.createElement("div", { className: 'list-content-listItem', key: index, onClick: handleClickToDetail },
+    return (React.createElement("div", { className: 'list-content-listItem', key: index, onClick: handleClickToDetail, style: { marginBottom: space } },
         React.createElement("div", { className: 'list-content-listItem-picture' },
             showVideo && (React.createElement("div", { style: { display: 'none' } },
                 React.createElement("video", { ref: videoDom, crossOrigin: 'anonymous', className: 'list-content-listItem-picture-img' }),
                 React.createElement("canvas", { ref: canvasRef }))),
             React.createElement("img", { className: 'list-content-listItem-picture-img', loading: 'lazy', ref: imgDom })),
         React.createElement("div", { className: 'list-content-listItem-info' },
-            React.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}` }, title && title),
-            React.createElement("div", { className: 'list-content-listItem-info-price', hidden: !priceText }, priceText))));
+            React.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title }, title && title),
+            React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles.price, hidden: !priceText }, priceText))));
 };
-export default function WaterfallList({ reportTagsView }) {
-    var _a, _b, _c, _d, _e, _f;
-    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage } = useSxpDataSource();
+export default function WaterfallList(_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
+    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
     const [list, setList] = useState();
     const [data, setData] = useState();
     const [isLoadingData, setIsLoadingData] = useState(false);
@@ -136,6 +139,7 @@ export default function WaterfallList({ reportTagsView }) {
             }));
     }, [waterFallData, getRecommendVideos, list, isLoadMore]);
     useEffect(() => {
+        var _a, _b;
         setIsLoadingData(true);
         waterFallData &&
             (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
@@ -149,7 +153,13 @@ export default function WaterfallList({ reportTagsView }) {
                 setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
                 setIsLoadingData(false);
             }));
-    }, [waterFallData, getRecommendVideos, hashTagSize]);
+        if (isOpenHashTag) {
+            const res = previewData;
+            setData(res);
+            setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
+            setIsLoadingData(false);
+        }
+    }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
     const handleClickLink = () => {
         var _a, _b;
         if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
@@ -160,14 +170,14 @@ export default function WaterfallList({ reportTagsView }) {
     return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
         React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'list' },
         React.createElement("div", { className: 'list-scroll', ref: containerRef, style: {
-                bottom: ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) ? '100px' : 0
+                bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
             } },
-            React.createElement("div", { className: 'list-info' }, (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.info),
-            React.createElement("div", { hidden: !((_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.link), className: 'list-collection', onClick: handleClickLink }, ((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.linkTitle) || 'Shop the collection'),
+            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),
+            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'),
             React.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
-                return (React.createElement(WaterfallFlowItem, { key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }));
+                return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
             })),
             React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading...")),
-        React.createElement("div", { className: 'list-bottom', hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link) },
-            React.createElement("button", { className: 'list-bottom-btn', onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'))))));
+        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) },
+            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'))))));
 }

package/es/core/components/SxpPageRender/WaterFall/WaterfallList.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import './WaterfallList.less';
-export default function WaterfallList({ reportTagsView }: any): React.JSX.Element;
+import { IHashTagProps } from '../../../../materials/sxp/HashTag';
+export default function WaterfallList({ reportTagsView, ...props }: any & IHashTagProps): React.JSX.Element;

package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js

@@ -1,8 +1,9 @@
+import { __rest } from "tslib";
 import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 import './WaterfallList.less';
 const WaterfallFlowItem = (props) => {
-    const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView } = props;
+    const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, lineClamp } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
     const [showVideo, setShowVideo] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
@@ -138,11 +139,12 @@ const WaterfallFlowItem = (props) => {
                     visibility: isLoading ? 'visible' : 'hidden'
                 } })),
         React.createElement("div", { className: 'waterFallList-content-listItem-info' },
-            React.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}` }, title && title),
-            React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText }, priceText))));
+            React.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
+            React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
 };
-export default function WaterfallList({ reportTagsView }) {
-    var _a, _b, _c, _d, _e, _f;
+export default function WaterfallList(_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
     const { popupAni } = useEditor();
     const { waterFallData, getRecommendVideos, loadingImage } = useSxpDataSource();
     const scrollParent = useRef(null);
@@ -306,13 +308,13 @@ export default function WaterfallList({ reportTagsView }) {
             React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })),
         React.createElement("div", { className: 'waterFallList', hidden: isLoadingData },
             React.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent, style: {
-                    bottom: ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) ? '100px' : 0
+                    bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
                 } },
-                React.createElement("div", { className: 'waterFallList-info' }, (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.info),
-                React.createElement("div", { hidden: !((_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.link), className: 'waterFallList-collection', onClick: handleClickLink }, ((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.linkTitle) || 'Shop the collection'),
+                React.createElement("div", { className: 'waterFallList-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),
+                React.createElement("div", { hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link), className: 'waterFallList-collection', onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
                 React.createElement("div", { className: 'waterFallList-content', ref: waterfallFlowDom }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
-                    return (React.createElement(WaterfallFlowItem, { key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + scrollParent.current.clientHeight, style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }));
+                    return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + scrollParent.current.clientHeight, style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
                 }))),
-            React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link) },
-                React.createElement("button", { className: 'waterFallList-bottom-btn', onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection')))));
+            React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) },
+                React.createElement("button", { className: 'waterFallList-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')))));
 }

package/es/core/components/SxpPageRender/WaterFall/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import './index.less';
+import { IHashTagProps } from '../../../../materials/sxp/HashTag';
 interface IWaterFallProps {
 }
-declare const _default: React.NamedExoticComponent<IWaterFallProps>;
+declare const _default: React.NamedExoticComponent<IWaterFallProps & IHashTagProps>;
 export default _default;

package/es/core/components/SxpPageRender/WaterFall/index.js

@@ -6,7 +6,8 @@ import Navbar from '../Navbar';
 import WaterfallList from './List';
 import left from './left.png';
 import { useSxpDataSource } from '../../../../core/hooks';
-const WaterFall = () => {
+const WaterFall = (props) => {
+    var _a;
     const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport } = useSxpDataSource();
     const ref = useRef(null);
     const modalEleRef = useRef(null);
@@ -94,7 +95,7 @@ const WaterFall = () => {
     return ReactDOM.createPortal(React.createElement("div", { className: 'waterfall', style: {
             display: openHashtag ? 'block' : 'none'
         } },
-        React.createElement(Navbar, { icon: left, styles: { top: '32px' }, onClose: handleClose }),
-        React.createElement(WaterfallList, { reportTagsView: reportTagsView })), modalEleRef.current);
+        React.createElement(Navbar, { icon: left, styles: { top: '32px' }, textStyle: (_a = props === null || props === void 0 ? void 0 : props.textStyles) === null || _a === void 0 ? void 0 : _a.hashTagTitle, onClose: handleClose }),
+        React.createElement(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props))), modalEleRef.current);
 };
 export default memo(WaterFall);