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.
- package/LICENSE +21 -21
- package/README.md +111 -111
- package/dist/index.cjs +940 -212
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +73 -72
- package/dist/index.js +940 -213
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +7 -7
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +7 -7
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +940 -212
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +7 -7
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/DiyStoryPreview/index.js +10 -4
- package/es/core/components/StructurePage/index.d.ts +89 -0
- package/es/core/components/StructurePage/index.js +700 -0
- package/es/core/components/SxpPageRender/fakeData.js +1 -1
- package/es/core/components/SxpPageRender/index.js +10 -4
- package/es/core/context/SxpDataSourceProvider.js +4 -1
- package/es/core/hooks/useVisibleHeight.js +7 -7
- package/es/core/index.d.ts +2 -0
- package/es/core/index.js +1 -0
- package/es/core/utils/materials.d.ts +1 -1
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/es/materials/sxp/MultiPosts/index.js +4 -4
- package/es/materials/sxp/popup/CommodityDetail/index.js +4 -4
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
- package/lib/core/components/DiyStoryPreview/index.js +10 -4
- package/lib/core/components/StructurePage/index.d.ts +89 -0
- package/lib/core/components/StructurePage/index.js +702 -0
- package/lib/core/components/SxpPageRender/fakeData.js +1 -1
- package/lib/core/components/SxpPageRender/index.js +10 -4
- package/lib/core/context/SxpDataSourceProvider.js +4 -1
- package/lib/core/hooks/useVisibleHeight.js +7 -7
- package/lib/core/index.d.ts +2 -0
- package/lib/core/index.js +6 -1
- package/lib/core/utils/materials.d.ts +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +3 -1
- package/lib/materials/sxp/MultiPosts/index.js +4 -4
- package/lib/materials/sxp/popup/CommodityDetail/index.js +4 -4
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
- 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: '
|
|
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
|
-
|
|
727
|
-
|
|
728
|
-
swiperRef.current.swiper.allowTouchMove =
|
|
729
|
-
|
|
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
|
}
|
package/es/core/index.d.ts
CHANGED
|
@@ -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
|
@@ -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
|
-
|
|
214
|
-
|
|
215
|
-
swiperRef.current.swiper.allowTouchMove =
|
|
216
|
-
|
|
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;
|