pb-sxp-ui 1.0.14 → 1.0.16

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.
Files changed (24) hide show
  1. package/dist/index.cjs +24 -15
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +1 -0
  4. package/dist/index.js +24 -15
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +24 -15
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/ExpandableText.js +1 -2
  15. package/es/core/components/SxpPageRender/PictureGroup/Picture.js +9 -5
  16. package/es/core/components/SxpPageRender/index.js +3 -3
  17. package/es/core/utils/localStore.d.ts +1 -0
  18. package/es/core/utils/localStore.js +6 -2
  19. package/lib/core/components/SxpPageRender/ExpandableText.js +1 -2
  20. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +8 -4
  21. package/lib/core/components/SxpPageRender/index.js +3 -3
  22. package/lib/core/utils/localStore.d.ts +1 -0
  23. package/lib/core/utils/localStore.js +7 -3
  24. package/package.json +1 -1
package/es/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -22,7 +22,6 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
22
22
  const multiRow = useRef(null);
23
23
  const handleClick = useCallback(() => {
24
24
  setIsShowMore(!isShowMore);
25
- onChange === null || onChange === void 0 ? void 0 : onChange(!isShowMore);
26
25
  }, [isShowMore, onChange]);
27
26
  const renderText = useMemo(() => {
28
27
  return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
@@ -32,7 +31,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
32
31
  return (React.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
33
32
  React.createElement("div", { ref: multiRow, style: {
34
33
  overflow: 'hidden',
35
- WebkitLineClamp: isShowMore ? '' : lineClamp,
34
+ WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
36
35
  textOverflow: 'ellipsis',
37
36
  display: '-webkit-box',
38
37
  WebkitBoxOrient: 'vertical',
package/es/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -1,10 +1,14 @@
1
- import React, { useEffect, useRef, useState } from 'react';
1
+ import React, { useCallback, useEffect, useRef, useState } from 'react';
2
2
  import { useSxpDataSource } from '../../../../core/hooks';
3
3
  const Picture = (props) => {
4
4
  const { src, height, width } = props;
5
5
  const [blur, setBlur] = useState(false);
6
6
  const imgDom = useRef(null);
7
7
  const { sxpParameter } = useSxpDataSource();
8
+ const getAvifToPng = useCallback((src) => {
9
+ return src;
10
+ return src.indexOf('avif') !== -1 ? `${src}?imageMogr2/format/webm` : src;
11
+ }, []);
8
12
  useEffect(() => {
9
13
  if (imgDom.current === null || src === '') {
10
14
  return;
@@ -19,22 +23,22 @@ const Picture = (props) => {
19
23
  setBlur(true);
20
24
  }
21
25
  };
22
- imgDom.current.src = src;
23
- }, [src]);
26
+ imgDom.current.src = getAvifToPng(src);
27
+ }, [src, getAvifToPng]);
24
28
  return (React.createElement("div", { style: {
25
29
  overflow: 'hidden',
26
30
  height,
27
31
  width: '100%',
28
32
  position: 'relative'
29
33
  } },
30
- React.createElement("img", { ref: imgDom, loading: 'lazy', src: src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
34
+ React.createElement("img", { ref: imgDom, loading: 'lazy', src: src ? getAvifToPng(src) : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
31
35
  height: '100%',
32
36
  width: '100%',
33
37
  objectFit: 'cover',
34
38
  filter: blur ? 'blur(10px)' : 'none',
35
39
  transform: blur ? 'scale(1.2)' : 'none'
36
40
  } }),
37
- blur && (React.createElement("img", { ref: imgDom, src: src, loading: 'lazy', style: {
41
+ blur && (React.createElement("img", { ref: imgDom, src: getAvifToPng(src), loading: 'lazy', style: {
38
42
  width: '100%',
39
43
  objectFit: 'contain',
40
44
  position: 'absolute',
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -35,7 +35,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
35
35
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = useSxpDataSource();
36
36
  const { productView } = useEventReport();
37
37
  const isShowFingerTip = useMemo(() => {
38
- return data.length > 0 && !loading && !getFeUserId;
38
+ return data.length > 0 && !loading && getFeUserId();
39
39
  }, [data, loading]);
40
40
  const handleH5EnterLink = useCallback(() => {
41
41
  if (data.length <= 0) {
@@ -192,8 +192,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
192
192
  React.createElement(Nudge, { nudge: nudge }),
193
193
  React.createElement("div", { className: 'clc-sxp-bottom-card' },
194
194
  React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
195
- React.createElement("div", { style: lineGradStyle },
196
- 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 }),
195
+ React.createElement("div", null,
196
+ 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({}, descStyle), onChange: onExpandableChange }),
197
197
  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 })))));
198
198
  }
199
199
  return null;
package/es/core/utils/localStore.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare const FAKE_USER_KEY = "SXP_FAKE_USER_ID";
2
+ export declare const FAKE_USER_STATE = "FAKE_USER_STATE";
2
3
  export declare const storeAndLoadFeUserId: () => string;
3
4
  export declare const removeFeUserId: () => void;
4
5
  export declare const getFeUserId: () => boolean;
package/es/core/utils/localStore.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { isEmpty } from 'lodash';
2
2
  import { uuid } from './tool';
3
3
  export const FAKE_USER_KEY = 'SXP_FAKE_USER_ID';
4
+ export const FAKE_USER_STATE = 'FAKE_USER_STATE';
4
5
  export const storeAndLoadFeUserId = () => {
5
6
  let fakeUserId = window.localStorage.getItem(FAKE_USER_KEY);
6
7
  if (isEmpty(fakeUserId)) {
@@ -13,6 +14,9 @@ export const removeFeUserId = () => {
13
14
  window.localStorage.removeItem(FAKE_USER_KEY);
14
15
  };
15
16
  export const getFeUserId = () => {
16
- const fakeUserId = window.localStorage.getItem(FAKE_USER_KEY);
17
- return isEmpty(fakeUserId);
17
+ const fakeUserState = window.localStorage.getItem(FAKE_USER_STATE);
18
+ if (isEmpty(fakeUserState)) {
19
+ window.localStorage.setItem(FAKE_USER_STATE, 'true');
20
+ }
21
+ return isEmpty(fakeUserState);
18
22
  };
package/lib/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -25,7 +25,6 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
25
25
  const multiRow = (0, react_1.useRef)(null);
26
26
  const handleClick = (0, react_1.useCallback)(() => {
27
27
  setIsShowMore(!isShowMore);
28
- onChange === null || onChange === void 0 ? void 0 : onChange(!isShowMore);
29
28
  }, [isShowMore, onChange]);
30
29
  const renderText = (0, react_1.useMemo)(() => {
31
30
  return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
@@ -35,7 +34,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
35
34
  return (react_1.default.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
36
35
  react_1.default.createElement("div", { ref: multiRow, style: {
37
36
  overflow: 'hidden',
38
- WebkitLineClamp: isShowMore ? '' : lineClamp,
37
+ WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
39
38
  textOverflow: 'ellipsis',
40
39
  display: '-webkit-box',
41
40
  WebkitBoxOrient: 'vertical',
package/lib/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -8,6 +8,10 @@ const Picture = (props) => {
8
8
  const [blur, setBlur] = (0, react_1.useState)(false);
9
9
  const imgDom = (0, react_1.useRef)(null);
10
10
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
11
+ const getAvifToPng = (0, react_1.useCallback)((src) => {
12
+ return src;
13
+ return src.indexOf('avif') !== -1 ? `${src}?imageMogr2/format/webm` : src;
14
+ }, []);
11
15
  (0, react_1.useEffect)(() => {
12
16
  if (imgDom.current === null || src === '') {
13
17
  return;
@@ -22,22 +26,22 @@ const Picture = (props) => {
22
26
  setBlur(true);
23
27
  }
24
28
  };
25
- imgDom.current.src = src;
26
- }, [src]);
29
+ imgDom.current.src = getAvifToPng(src);
30
+ }, [src, getAvifToPng]);
27
31
  return (react_1.default.createElement("div", { style: {
28
32
  overflow: 'hidden',
29
33
  height,
30
34
  width: '100%',
31
35
  position: 'relative'
32
36
  } },
33
- react_1.default.createElement("img", { ref: imgDom, loading: 'lazy', src: src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
37
+ react_1.default.createElement("img", { ref: imgDom, loading: 'lazy', src: src ? getAvifToPng(src) : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
34
38
  height: '100%',
35
39
  width: '100%',
36
40
  objectFit: 'cover',
37
41
  filter: blur ? 'blur(10px)' : 'none',
38
42
  transform: blur ? 'scale(1.2)' : 'none'
39
43
  } }),
40
- blur && (react_1.default.createElement("img", { ref: imgDom, src: src, loading: 'lazy', style: {
44
+ blur && (react_1.default.createElement("img", { ref: imgDom, src: getAvifToPng(src), loading: 'lazy', style: {
41
45
  width: '100%',
42
46
  objectFit: 'contain',
43
47
  position: 'absolute',
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -38,7 +38,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
38
38
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = (0, hooks_1.useSxpDataSource)();
39
39
  const { productView } = (0, useEventReport_1.useEventReport)();
40
40
  const isShowFingerTip = (0, react_1.useMemo)(() => {
41
- return data.length > 0 && !loading && !localStore_1.getFeUserId;
41
+ return data.length > 0 && !loading && (0, localStore_1.getFeUserId)();
42
42
  }, [data, loading]);
43
43
  const handleH5EnterLink = (0, react_1.useCallback)(() => {
44
44
  if (data.length <= 0) {
@@ -195,8 +195,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
195
195
  react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
196
196
  react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
197
197
  react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
198
- react_1.default.createElement("div", { style: lineGradStyle },
199
- 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 }),
198
+ react_1.default.createElement("div", null,
199
+ 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({}, descStyle), onChange: onExpandableChange }),
200
200
  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 })))));
201
201
  }
202
202
  return null;
package/lib/core/utils/localStore.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare const FAKE_USER_KEY = "SXP_FAKE_USER_ID";
2
+ export declare const FAKE_USER_STATE = "FAKE_USER_STATE";
2
3
  export declare const storeAndLoadFeUserId: () => string;
3
4
  export declare const removeFeUserId: () => void;
4
5
  export declare const getFeUserId: () => boolean;
package/lib/core/utils/localStore.js CHANGED
@@ -1,9 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getFeUserId = exports.removeFeUserId = exports.storeAndLoadFeUserId = exports.FAKE_USER_KEY = void 0;
3
+ exports.getFeUserId = exports.removeFeUserId = exports.storeAndLoadFeUserId = exports.FAKE_USER_STATE = exports.FAKE_USER_KEY = void 0;
4
4
  const lodash_1 = require("lodash");
5
5
  const tool_1 = require("./tool");
6
6
  exports.FAKE_USER_KEY = 'SXP_FAKE_USER_ID';
7
+ exports.FAKE_USER_STATE = 'FAKE_USER_STATE';
7
8
  const storeAndLoadFeUserId = () => {
8
9
  let fakeUserId = window.localStorage.getItem(exports.FAKE_USER_KEY);
9
10
  if ((0, lodash_1.isEmpty)(fakeUserId)) {
@@ -18,7 +19,10 @@ const removeFeUserId = () => {
18
19
  };
19
20
  exports.removeFeUserId = removeFeUserId;
20
21
  const getFeUserId = () => {
21
- const fakeUserId = window.localStorage.getItem(exports.FAKE_USER_KEY);
22
- return (0, lodash_1.isEmpty)(fakeUserId);
22
+ const fakeUserState = window.localStorage.getItem(exports.FAKE_USER_STATE);
23
+ if ((0, lodash_1.isEmpty)(fakeUserState)) {
24
+ window.localStorage.setItem(exports.FAKE_USER_STATE, 'true');
25
+ }
26
+ return (0, lodash_1.isEmpty)(fakeUserState);
23
27
  };
24
28
  exports.getFeUserId = getFeUserId;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.14",
3
+ "version": "1.0.16",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",