pb-sxp-ui 1.20.14 → 1.20.15

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 (46) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +111 -111
  3. package/dist/index.cjs +940 -212
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +73 -72
  6. package/dist/index.js +940 -213
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.min.cjs +7 -7
  9. package/dist/index.min.cjs.map +1 -1
  10. package/dist/index.min.js +7 -7
  11. package/dist/index.min.js.map +1 -1
  12. package/dist/pb-ui.js +940 -212
  13. package/dist/pb-ui.js.map +1 -1
  14. package/dist/pb-ui.min.js +7 -7
  15. package/dist/pb-ui.min.js.map +1 -1
  16. package/es/core/components/DiyStoryPreview/index.js +10 -4
  17. package/es/core/components/StructurePage/index.d.ts +89 -0
  18. package/es/core/components/StructurePage/index.js +700 -0
  19. package/es/core/components/SxpPageRender/fakeData.js +1 -1
  20. package/es/core/components/SxpPageRender/index.js +10 -4
  21. package/es/core/context/SxpDataSourceProvider.js +4 -1
  22. package/es/core/hooks/useVisibleHeight.js +7 -7
  23. package/es/core/index.d.ts +2 -0
  24. package/es/core/index.js +1 -0
  25. package/es/core/utils/materials.d.ts +1 -1
  26. package/es/index.d.ts +1 -0
  27. package/es/index.js +1 -0
  28. package/es/materials/sxp/MultiPosts/index.js +4 -4
  29. package/es/materials/sxp/popup/CommodityDetail/index.js +4 -4
  30. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  31. package/lib/core/components/DiyStoryPreview/index.js +10 -4
  32. package/lib/core/components/StructurePage/index.d.ts +89 -0
  33. package/lib/core/components/StructurePage/index.js +702 -0
  34. package/lib/core/components/SxpPageRender/fakeData.js +1 -1
  35. package/lib/core/components/SxpPageRender/index.js +10 -4
  36. package/lib/core/context/SxpDataSourceProvider.js +4 -1
  37. package/lib/core/hooks/useVisibleHeight.js +7 -7
  38. package/lib/core/index.d.ts +2 -0
  39. package/lib/core/index.js +6 -1
  40. package/lib/core/utils/materials.d.ts +1 -1
  41. package/lib/index.d.ts +1 -0
  42. package/lib/index.js +3 -1
  43. package/lib/materials/sxp/MultiPosts/index.js +4 -4
  44. package/lib/materials/sxp/popup/CommodityDetail/index.js +4 -4
  45. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  46. package/package.json +111 -111
@@ -873,7 +873,7 @@ export const fakeRecList = [
873
873
  position: '19',
874
874
  video: {
875
875
  itemId: 'VIDEOLDVqS1698395618208',
876
- title: 'The pinnacle of excellence, Tiffany & Co. diamond designs combine time-honored craftsmanship, elegant silhouettes and our breathtakingly beautiful diamonds—the perfect complement to the most special days. This is the season of stories yet to be written. Start yours at Tiffany & Co.',
876
+ title: ' of excellence, Tiffany & Co. diamond designs combine time-honored craftsmanship, elegant silhouettes and our breathtakingly beautiful diamonds—the perfect complement to the most special days. This is the season of stories yet to be written. Start yours at Tiffany & Co.',
877
877
  tags: [
878
878
  'Holiday',
879
879
  'love',
@@ -723,10 +723,16 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
723
723
  React.createElement(Swiper, { style: {
724
724
  marginTop: tagHeight
725
725
  }, ref: swiperRef, onSlideChange: () => {
726
- swiperRef.current.swiper.allowTouchMove = false;
727
- setTimeout(() => {
728
- swiperRef.current.swiper.allowTouchMove = true;
729
- }, 500);
726
+ var _a;
727
+ if ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) {
728
+ swiperRef.current.swiper.allowTouchMove = false;
729
+ setTimeout(() => {
730
+ var _a;
731
+ if ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) {
732
+ swiperRef.current.swiper.allowTouchMove = true;
733
+ }
734
+ }, 500);
735
+ }
730
736
  }, onActiveIndexChange: (swiper) => {
731
737
  var _a, _b;
732
738
  setActiveIndex(swiper.activeIndex);
@@ -30,6 +30,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
30
30
  const [popupDetailData, setPopupDetailData] = useState();
31
31
  const [waterFallData, setWaterFallData] = useState();
32
32
  const [openHashtag, setOpenHashtag] = useState(isOpenHashTag);
33
+ if (typeof window !== 'undefined') {
34
+ window.setPopupDetailData = setPopupDetailData;
35
+ }
33
36
  const [cacheRtcList, setCacheRtcList] = useState([]);
34
37
  const [cacheActiveIndex, setCacheActiveIndex] = useState(0);
35
38
  const [isFromHashtag, setIsFromHashtag] = useState(false);
@@ -453,7 +456,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
453
456
  query.pageNum = pageNum;
454
457
  result = isDiyH5
455
458
  ? yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct/page/view', { method: 'POST', body: query }))
456
- : yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('recommend/direct_page', { method: 'POST', body: query }));
459
+ : yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/direct_page', { method: 'POST', body: query }));
457
460
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
458
461
  return undefined;
459
462
  }
@@ -43,13 +43,13 @@ export function useVisibleHeight() {
43
43
  styleElement.id = 'onetrust-pc-sdk';
44
44
  styleElement.setAttribute('type', 'text/css');
45
45
  document.head.appendChild(styleElement);
46
- const css = `
47
- #onetrust-pc-sdk {
48
- height: ${finalHeight}px !important;
49
- }
50
- #onetrust-pc-sdk #ot-pc-content{
51
- bottom: ${b}px !important;
52
- }
46
+ const css = `
47
+ #onetrust-pc-sdk {
48
+ height: ${finalHeight}px !important;
49
+ }
50
+ #onetrust-pc-sdk #ot-pc-content{
51
+ bottom: ${b}px !important;
52
+ }
53
53
  `;
54
54
  styleElement.textContent = css;
55
55
  }
@@ -1,3 +1,5 @@
1
1
  export { EditorCore } from './context/EditorContext';
2
2
  export type { IEditorCoreRef } from './context/EditorContext';
3
3
  export type { MaterialComponet } from './create';
4
+ export { default as StructurePage } from './components/StructurePage';
5
+ export type { IStructurePageProps, IPostData, IProductData, IMultiCtaData, IApiResponse } from './components/StructurePage';
package/es/core/index.js CHANGED
@@ -1 +1,2 @@
1
1
  export { EditorCore } from './context/EditorContext';
2
+ export { default as StructurePage } from './components/StructurePage';
@@ -19,7 +19,7 @@ export declare const getPriceText: ({ product, enableFormattedPrice, globalConfi
19
19
  product: ProductInfoType | undefined | null;
20
20
  enableFormattedPrice: boolean | undefined;
21
21
  globalConfig: ISxpPageRenderProps['globalConfig'];
22
- isHiddenDef?: boolean;
22
+ isHiddenDef?: boolean | undefined;
23
23
  style?: IfontType | any;
24
24
  }) => string | null;
25
25
  export {};
package/es/index.d.ts CHANGED
@@ -10,4 +10,5 @@ export { default as SxpDataSourceProvider } from './core/context/SxpDataSourcePr
10
10
  export { default as SxpPageCore } from './core/components/SxpPageCore';
11
11
  export { default as EditorDataProvider } from './core/context/EditorDataProvider';
12
12
  export { useEditorDataProvider } from './core/context/EditorDataProvider';
13
+ export { default as StructurePage } from './core/components/StructurePage';
13
14
  export default Pagebuilder;
package/es/index.js CHANGED
@@ -12,4 +12,5 @@ export { default as SxpDataSourceProvider } from './core/context/SxpDataSourcePr
12
12
  export { default as SxpPageCore } from './core/components/SxpPageCore';
13
13
  export { default as EditorDataProvider } from './core/context/EditorDataProvider';
14
14
  export { useEditorDataProvider } from './core/context/EditorDataProvider';
15
+ export { default as StructurePage } from './core/components/StructurePage';
15
16
  export default Pagebuilder;
@@ -14,10 +14,10 @@ const MultiPosts = (_a) => {
14
14
  const traceInfo = ((_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.traceInfo) || ((_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.traceInfo) || '';
15
15
  const getPropsVal = useCallback((index, str) => {
16
16
  try {
17
- return new Function('props', 'str', `if (str) {
18
- return props?.button${index + 1}${str}
19
- } else {
20
- return props?.button${index + 1}
17
+ return new Function('props', 'str', `if (str) {
18
+ return props?.button${index + 1}${str}
19
+ } else {
20
+ return props?.button${index + 1}
21
21
  }`)(props, str);
22
22
  }
23
23
  catch (_a) { }
@@ -153,10 +153,10 @@ const CommodityDetail = (_a) => {
153
153
  __html: setFontForText((_c = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _c !== void 0 ? _c : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
154
154
  } }),
155
155
  React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
156
- React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_d = product === null || product === void 0 ? void 0 : product.info) !== null && _d !== void 0 ? _d : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
157
- bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
158
- collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
159
- necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
156
+ React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_d = product === null || product === void 0 ? void 0 : product.info) !== null && _d !== void 0 ? _d : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
157
+ bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
158
+ collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
159
+ necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
160
160
  18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
161
161
  };
162
162
  const renderBtn = () => {
@@ -149,7 +149,7 @@ const CommodityDetailDiroNew = (_a) => {
149
149
  const productInfoText = ({ isPost }) => {
150
150
  return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
151
151
  React.createElement(ExpandableText, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
152
- `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
152
+ `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
153
153
  Made in Italy` })));
154
154
  };
155
155
  const getStyle = useCallback((style) => {
@@ -210,10 +210,16 @@ const DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipT
210
210
  }, [handleSessionExpire, disabledListener]);
211
211
  return (react_1.default.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents } },
212
212
  react_1.default.createElement(react_2.Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
213
- swiperRef.current.swiper.allowTouchMove = false;
214
- setTimeout(() => {
215
- swiperRef.current.swiper.allowTouchMove = true;
216
- }, 500);
213
+ var _a;
214
+ if ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) {
215
+ swiperRef.current.swiper.allowTouchMove = false;
216
+ setTimeout(() => {
217
+ var _a;
218
+ if ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) {
219
+ swiperRef.current.swiper.allowTouchMove = true;
220
+ }
221
+ }, 500);
222
+ }
217
223
  }, onActiveIndexChange: (swiper) => {
218
224
  setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
219
225
  onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
@@ -0,0 +1,89 @@
1
+ import { FC, CSSProperties } from 'react';
2
+ export interface IPostData {
3
+ traceInfo: string;
4
+ itemId: string;
5
+ tags?: string[] | null;
6
+ cover?: string | null;
7
+ url?: string | null;
8
+ title?: string | null;
9
+ imgUrls?: string[] | null;
10
+ text?: string;
11
+ bindCta?: {
12
+ title: string;
13
+ link?: string | null;
14
+ } | null;
15
+ bindProduct?: any;
16
+ bindProducts?: any[];
17
+ scene?: {
18
+ cta?: string;
19
+ position?: number;
20
+ type?: string;
21
+ };
22
+ }
23
+ export interface IProductData {
24
+ traceInfo: string;
25
+ itemId: string;
26
+ title: string;
27
+ cover: string;
28
+ homePage: string[];
29
+ price: number;
30
+ currency: string;
31
+ link?: string | null;
32
+ info?: string;
33
+ description?: string | null;
34
+ text?: string | null;
35
+ landingImageUrl?: string;
36
+ position?: string | null;
37
+ bindCta?: {
38
+ title: string;
39
+ link?: string | null;
40
+ } | null;
41
+ }
42
+ export interface IMultiCtaData {
43
+ heroSection?: IPostData;
44
+ carouselSection?: IPostData[];
45
+ highlightRevealSection?: IProductData;
46
+ productGridSection?: IProductData[];
47
+ footerSection?: IProductData;
48
+ }
49
+ export interface IApiResponse {
50
+ code: string;
51
+ message: string;
52
+ data: {
53
+ recList?: Array<{
54
+ position: number;
55
+ video: any;
56
+ product: any;
57
+ multiCta: IMultiCtaData;
58
+ isCollected: boolean;
59
+ }>;
60
+ channel?: string;
61
+ productUserId?: string;
62
+ multiCta?: IMultiCtaData;
63
+ position?: number;
64
+ };
65
+ }
66
+ export interface IStructurePageProps {
67
+ containerStyle?: CSSProperties;
68
+ containerHeight?: number;
69
+ containerWidth?: number;
70
+ className?: string;
71
+ apiUrl?: string;
72
+ requestBody?: {
73
+ maxSize?: number;
74
+ defaultSize?: number;
75
+ type?: string;
76
+ channel?: string;
77
+ productUserId?: string;
78
+ [key: string]: any;
79
+ };
80
+ editorMode?: boolean;
81
+ multiCTAConfig?: Record<string, any>;
82
+ videoPlayIcon?: string;
83
+ isCmsMode?: boolean;
84
+ storyId?: string;
85
+ customHeaders?: Record<string, string>;
86
+ [key: string]: any;
87
+ }
88
+ declare const StructurePage: FC<IStructurePageProps>;
89
+ export default StructurePage;