pb-sxp-ui 1.0.3-alpha.3 → 1.0.3-alpha.4
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/dist/index.cjs +14 -13
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +7 -3
- package/dist/index.js +14 -13
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +3 -3
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +3 -3
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +14 -13
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +3 -3
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/ExpandableText.js +1 -1
- package/es/materials/sxp/popup/CommodityDetail/index.js +9 -8
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +3 -3
- package/lib/core/components/SxpPageRender/ExpandableText.js +1 -1
- package/lib/materials/sxp/popup/CommodityDetail/index.js +9 -8
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +3 -3
- package/package.json +1 -1
@@ -36,7 +36,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
36
36
|
const cs = (_a = window === null || window === void 0 ? void 0 : window.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, multiRow.current);
|
37
37
|
const height = parseFloat(cs === null || cs === void 0 ? void 0 : cs.height);
|
38
38
|
const lh = parseFloat(cs === null || cs === void 0 ? void 0 : cs.lineHeight);
|
39
|
-
const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) +
|
39
|
+
const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) + 6;
|
40
40
|
const lineHeight = isNaN(lh) ? fs : lh;
|
41
41
|
if (text && height > lineHeight * lineClamp) {
|
42
42
|
setIsShowMore(false);
|
@@ -52,15 +52,16 @@ const CommodityDetail = (_a) => {
|
|
52
52
|
const width = isPreview ? 375 : window.innerWidth;
|
53
53
|
const renderContent = ({ isPost }) => {
|
54
54
|
var _a, _b, _c;
|
55
|
-
return (React.createElement("div",
|
56
|
-
React.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
|
57
|
-
React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
|
58
|
-
React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
|
59
|
-
React.createElement(
|
55
|
+
return (React.createElement("div", null,
|
56
|
+
React.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
|
57
|
+
React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
|
58
|
+
React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
|
59
|
+
React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
|
60
|
+
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: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
|
60
61
|
bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
|
61
62
|
collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
|
62
63
|
necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
|
63
|
-
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 })));
|
64
|
+
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 }))));
|
64
65
|
};
|
65
66
|
const renderBtn = () => {
|
66
67
|
var _a;
|
@@ -99,10 +100,10 @@ const CommodityDetail = (_a) => {
|
|
99
100
|
objectFit: 'cover',
|
100
101
|
width: '100%'
|
101
102
|
}), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
|
102
|
-
renderContent({ isPost })),
|
103
|
+
React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
|
103
104
|
renderBtn(),
|
104
105
|
React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
|
105
|
-
renderContent({ isPost: false }),
|
106
|
+
React.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
|
106
107
|
renderBtn())));
|
107
108
|
};
|
108
109
|
export default memo(CommodityDetail);
|
@@ -123,9 +123,9 @@ Made in Italy` })));
|
|
123
123
|
React.createElement("div", null,
|
124
124
|
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
|
125
125
|
React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
|
126
|
-
React.createElement("div",
|
127
|
-
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
|
128
|
-
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
|
126
|
+
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
|
127
|
+
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
|
128
|
+
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
|
129
129
|
(!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
|
130
130
|
productInfoText({ isPost }))),
|
131
131
|
React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
|
@@ -39,7 +39,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
39
39
|
const cs = (_a = window === null || window === void 0 ? void 0 : window.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, multiRow.current);
|
40
40
|
const height = parseFloat(cs === null || cs === void 0 ? void 0 : cs.height);
|
41
41
|
const lh = parseFloat(cs === null || cs === void 0 ? void 0 : cs.lineHeight);
|
42
|
-
const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) +
|
42
|
+
const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) + 6;
|
43
43
|
const lineHeight = isNaN(lh) ? fs : lh;
|
44
44
|
if (text && height > lineHeight * lineClamp) {
|
45
45
|
setIsShowMore(false);
|
@@ -54,15 +54,16 @@ const CommodityDetail = (_a) => {
|
|
54
54
|
const width = isPreview ? 375 : window.innerWidth;
|
55
55
|
const renderContent = ({ isPost }) => {
|
56
56
|
var _a, _b, _c;
|
57
|
-
return (react_1.default.createElement("div",
|
58
|
-
react_1.default.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
|
59
|
-
react_1.default.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
|
60
|
-
react_1.default.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
|
61
|
-
react_1.default.createElement(
|
57
|
+
return (react_1.default.createElement("div", null,
|
58
|
+
react_1.default.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
|
59
|
+
react_1.default.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
|
60
|
+
react_1.default.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
|
61
|
+
react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
|
62
|
+
react_1.default.createElement(ExpandableText_1.default, { 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: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
|
62
63
|
bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
|
63
64
|
collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
|
64
65
|
necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
|
65
|
-
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 })));
|
66
|
+
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 }))));
|
66
67
|
};
|
67
68
|
const renderBtn = () => {
|
68
69
|
var _a;
|
@@ -101,10 +102,10 @@ const CommodityDetail = (_a) => {
|
|
101
102
|
objectFit: 'cover',
|
102
103
|
width: '100%'
|
103
104
|
}), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
|
104
|
-
renderContent({ isPost })),
|
105
|
+
react_1.default.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
|
105
106
|
renderBtn(),
|
106
107
|
react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) },
|
107
|
-
renderContent({ isPost: false }),
|
108
|
+
react_1.default.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
|
108
109
|
renderBtn())));
|
109
110
|
};
|
110
111
|
exports.default = (0, react_1.memo)(CommodityDetail);
|
@@ -125,9 +125,9 @@ Made in Italy` })));
|
|
125
125
|
react_1.default.createElement("div", null,
|
126
126
|
react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
|
127
127
|
react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
|
128
|
-
react_1.default.createElement("div",
|
129
|
-
react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
|
130
|
-
react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
|
128
|
+
react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
|
129
|
+
react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
|
130
|
+
react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
|
131
131
|
(!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
|
132
132
|
productInfoText({ isPost }))),
|
133
133
|
react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
|