pb-sxp-ui 1.0.13 → 1.0.14

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

@@ -8,6 +8,7 @@ interface IExpandableTextProps {
     foldText?: string;
     unfoldText?: string;
     isPost?: boolean;
+    onChange?: (bool: boolean) => void;
 }
 declare const _default: React.NamedExoticComponent<IExpandableTextProps>;
 export default _default;

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

@@ -15,47 +15,29 @@ const limitTextLastWholeWord = (originalText = '', limit) => {
     const _words = newWords.length > 1 && newWords.length < words.length ? newWords.slice(0, newWords.length - 1) : newWords;
     return _words.join(' ') + ' ';
 };
-const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText, isPost }) => {
-    const [isShowMore, setIsShowMore] = useState(true);
+const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText, isPost, onChange }) => {
+    const [isShowMore, setIsShowMore] = useState(false);
     const [isShow, setIsShow] = useState(false);
     const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
     const multiRow = useRef(null);
     const handleClick = useCallback(() => {
         setIsShowMore(!isShowMore);
-    }, [isShowMore]);
+        onChange === null || onChange === void 0 ? void 0 : onChange(!isShowMore);
+    }, [isShowMore, onChange]);
     const renderText = useMemo(() => {
         return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
     }, [text, maxStr, isShowMore]);
     useEffect(() => {
-        if (multiRow.current && isPost) {
-            setIsShowMore(true);
-            setTimeout(() => {
-                var _a;
-                setIsShow(false);
-                try {
-                    const cs = (_a = window === null || window === void 0 ? void 0 : window.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, multiRow.current);
-                    const height = parseFloat(cs === null || cs === void 0 ? void 0 : cs.height);
-                    const lh = parseFloat(cs === null || cs === void 0 ? void 0 : cs.lineHeight);
-                    const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) + 6;
-                    const lineHeight = isNaN(lh) ? fs : lh;
-                    if (text && height > lineHeight * lineClamp) {
-                        setIsShowMore(false);
-                        setIsShow(true);
-                    }
-                }
-                catch (_b) { }
-            }, 100);
-        }
     }, [multiRow, text, lineClamp, style, isPost]);
     return (React.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
         React.createElement("div", { ref: multiRow, style: {
                 overflow: 'hidden',
-                WebkitLineClamp: !isShowMore ? lineClamp : '',
+                WebkitLineClamp: isShowMore ? '' : lineClamp,
                 textOverflow: 'ellipsis',
                 display: '-webkit-box',
                 WebkitBoxOrient: 'vertical',
                 wordBreak: 'break-word'
             }, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
-        isShow && text && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
+        text && isPost && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
 };
 export default memo(ExpandableText);

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

@@ -20,6 +20,7 @@ import { refreshFeSessionId } from '../../../core/utils/sessionStore';
 import './index.less';
 import { useEventReport } from '../../../core/hooks/useEventReport';
 import withBindDataSource from '../../../core/hoc/withBindDataSource';
+import { getFeUserId } from '../../../core/utils/localStore';
 const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const { schema } = useEditor();
@@ -30,10 +31,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const curTime = useRef();
     const viewTime = useRef();
     const [isLoadMore, setIsLoadMore] = useState(false);
+    const [isShowMore, setIsShowMore] = useState(false);
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = useSxpDataSource();
     const { productView } = useEventReport();
     const isShowFingerTip = useMemo(() => {
-        return data.length > 0 && !loading;
+        return data.length > 0 && !loading && !getFeUserId;
     }, [data, loading]);
     const handleH5EnterLink = useCallback(() => {
         if (data.length <= 0) {
@@ -167,20 +169,47 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
         return null;
     }, [containerWidth, data, height, isMuted, activeIndex, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost, viewTime, tipText, resolver, schema]);
+    const onExpandableChange = useCallback((v) => {
+        setIsShowMore(v);
+    }, []);
+    const lineGradStyle = useMemo(() => {
+        return !isShowMore
+            ? {
+                padding: '20px 0'
+            }
+            : {
+                background: 'linear-gradient( 180deg, rgba(129,129,129,0) 0%, rgba(121,121,121,0.5) 5%, #616161 100%)',
+                paddingTop: 20,
+                paddingBottom: 20
+            };
+    }, [isShowMore]);
     const renderBottom = useCallback((rec, index) => {
         var _a, _b, _c, _d, _e, _f, _g;
         if (rec.video) {
             return (React.createElement(React.Fragment, null,
-                ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
+                ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
                 React.createElement("div", { className: 'clc-sxp-bottom' },
                     React.createElement(Nudge, { nudge: nudge }),
                     React.createElement("div", { className: 'clc-sxp-bottom-card' },
                         React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
-                    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: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', 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' }) }),
-                    React.createElement(Hashtag, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
+                    React.createElement("div", { style: lineGradStyle },
+                        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: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', 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(Hashtag, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
         }
         return null;
-    }, [descStyle, activeIndex, tempMap, resolver, tipText, nudge, hashTagStyle, globalConfig]);
+    }, [
+        descStyle,
+        activeIndex,
+        tempMap,
+        resolver,
+        tipText,
+        nudge,
+        hashTagStyle,
+        globalConfig,
+        onExpandableChange,
+        isShowMore,
+        lineGradStyle
+    ]);
     const renderLikeButton = useCallback((rec, index) => {
         var _a, _b;
         if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))

package/es/core/utils/localStore.d.ts

@@ -1,3 +1,4 @@
 export declare const FAKE_USER_KEY = "SXP_FAKE_USER_ID";
 export declare const storeAndLoadFeUserId: () => string;
 export declare const removeFeUserId: () => void;
+export declare const getFeUserId: () => boolean;

package/es/core/utils/localStore.js

@@ -12,3 +12,7 @@ export const storeAndLoadFeUserId = () => {
 export const removeFeUserId = () => {
     window.localStorage.removeItem(FAKE_USER_KEY);
 };
+export const getFeUserId = () => {
+    const fakeUserId = window.localStorage.getItem(FAKE_USER_KEY);
+    return isEmpty(fakeUserId);
+};

package/lib/core/components/SxpPageRender/ExpandableText.d.ts

@@ -8,6 +8,7 @@ interface IExpandableTextProps {
     foldText?: string;
     unfoldText?: string;
     isPost?: boolean;
+    onChange?: (bool: boolean) => void;
 }
 declare const _default: React.NamedExoticComponent<IExpandableTextProps>;
 export default _default;

package/lib/core/components/SxpPageRender/ExpandableText.js

@@ -18,47 +18,29 @@ const limitTextLastWholeWord = (originalText = '', limit) => {
     const _words = newWords.length > 1 && newWords.length < words.length ? newWords.slice(0, newWords.length - 1) : newWords;
     return _words.join(' ') + ' ';
 };
-const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText, isPost }) => {
-    const [isShowMore, setIsShowMore] = (0, react_1.useState)(true);
+const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText, isPost, onChange }) => {
+    const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
     const [isShow, setIsShow] = (0, react_1.useState)(false);
     const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
     const multiRow = (0, react_1.useRef)(null);
     const handleClick = (0, react_1.useCallback)(() => {
         setIsShowMore(!isShowMore);
-    }, [isShowMore]);
+        onChange === null || onChange === void 0 ? void 0 : onChange(!isShowMore);
+    }, [isShowMore, onChange]);
     const renderText = (0, react_1.useMemo)(() => {
         return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
     }, [text, maxStr, isShowMore]);
     (0, react_1.useEffect)(() => {
-        if (multiRow.current && isPost) {
-            setIsShowMore(true);
-            setTimeout(() => {
-                var _a;
-                setIsShow(false);
-                try {
-                    const cs = (_a = window === null || window === void 0 ? void 0 : window.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, multiRow.current);
-                    const height = parseFloat(cs === null || cs === void 0 ? void 0 : cs.height);
-                    const lh = parseFloat(cs === null || cs === void 0 ? void 0 : cs.lineHeight);
-                    const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) + 6;
-                    const lineHeight = isNaN(lh) ? fs : lh;
-                    if (text && height > lineHeight * lineClamp) {
-                        setIsShowMore(false);
-                        setIsShow(true);
-                    }
-                }
-                catch (_b) { }
-            }, 100);
-        }
     }, [multiRow, text, lineClamp, style, isPost]);
     return (react_1.default.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
         react_1.default.createElement("div", { ref: multiRow, style: {
                 overflow: 'hidden',
-                WebkitLineClamp: !isShowMore ? lineClamp : '',
+                WebkitLineClamp: isShowMore ? '' : lineClamp,
                 textOverflow: 'ellipsis',
                 display: '-webkit-box',
                 WebkitBoxOrient: 'vertical',
                 wordBreak: 'break-word'
             }, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
-        isShow && text && (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'))));
+        text && isPost && (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'))));
 };
 exports.default = (0, react_1.memo)(ExpandableText);

package/lib/core/components/SxpPageRender/index.js

@@ -23,6 +23,7 @@ const sessionStore_1 = require("../../../core/utils/sessionStore");
 require("./index.less");
 const useEventReport_1 = require("../../../core/hooks/useEventReport");
 const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
+const localStore_1 = require("../../../core/utils/localStore");
 const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const { schema } = (0, hooks_1.useEditor)();
@@ -33,10 +34,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const curTime = (0, react_1.useRef)();
     const viewTime = (0, react_1.useRef)();
     const [isLoadMore, setIsLoadMore] = (0, react_1.useState)(false);
+    const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = (0, hooks_1.useSxpDataSource)();
     const { productView } = (0, useEventReport_1.useEventReport)();
     const isShowFingerTip = (0, react_1.useMemo)(() => {
-        return data.length > 0 && !loading;
+        return data.length > 0 && !loading && !localStore_1.getFeUserId;
     }, [data, loading]);
     const handleH5EnterLink = (0, react_1.useCallback)(() => {
         if (data.length <= 0) {
@@ -170,20 +172,47 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
         return null;
     }, [containerWidth, data, height, isMuted, activeIndex, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost, viewTime, tipText, resolver, schema]);
+    const onExpandableChange = (0, react_1.useCallback)((v) => {
+        setIsShowMore(v);
+    }, []);
+    const lineGradStyle = (0, react_1.useMemo)(() => {
+        return !isShowMore
+            ? {
+                padding: '20px 0'
+            }
+            : {
+                background: 'linear-gradient( 180deg, rgba(129,129,129,0) 0%, rgba(121,121,121,0.5) 5%, #616161 100%)',
+                paddingTop: 20,
+                paddingBottom: 20
+            };
+    }, [isShowMore]);
     const renderBottom = (0, react_1.useCallback)((rec, index) => {
         var _a, _b, _c, _d, _e, _f, _g;
         if (rec.video) {
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
+                ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
                 react_1.default.createElement("div", { className: 'clc-sxp-bottom' },
                     react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
                     react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
                         react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
-                    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: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', 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' }) }),
-                    react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
+                    react_1.default.createElement("div", { style: lineGradStyle },
+                        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: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', 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_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
         }
         return null;
-    }, [descStyle, activeIndex, tempMap, resolver, tipText, nudge, hashTagStyle, globalConfig]);
+    }, [
+        descStyle,
+        activeIndex,
+        tempMap,
+        resolver,
+        tipText,
+        nudge,
+        hashTagStyle,
+        globalConfig,
+        onExpandableChange,
+        isShowMore,
+        lineGradStyle
+    ]);
     const renderLikeButton = (0, react_1.useCallback)((rec, index) => {
         var _a, _b;
         if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))

package/lib/core/utils/localStore.d.ts

@@ -1,3 +1,4 @@
 export declare const FAKE_USER_KEY = "SXP_FAKE_USER_ID";
 export declare const storeAndLoadFeUserId: () => string;
 export declare const removeFeUserId: () => void;
+export declare const getFeUserId: () => boolean;

package/lib/core/utils/localStore.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeFeUserId = exports.storeAndLoadFeUserId = exports.FAKE_USER_KEY = void 0;
+exports.getFeUserId = exports.removeFeUserId = exports.storeAndLoadFeUserId = exports.FAKE_USER_KEY = void 0;
 const lodash_1 = require("lodash");
 const tool_1 = require("./tool");
 exports.FAKE_USER_KEY = 'SXP_FAKE_USER_ID';
@@ -17,3 +17,8 @@ const removeFeUserId = () => {
     window.localStorage.removeItem(exports.FAKE_USER_KEY);
 };
 exports.removeFeUserId = removeFeUserId;
+const getFeUserId = () => {
+    const fakeUserId = window.localStorage.getItem(exports.FAKE_USER_KEY);
+    return (0, lodash_1.isEmpty)(fakeUserId);
+};
+exports.getFeUserId = getFeUserId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",