pb-sxp-ui 1.0.3-alpha.3 → 1.0.3-alpha.4

package/dist/index.css

@@ -62,6 +62,7 @@
 
 .pb-commondity {
   position: relative;
+  height: 100%;
 }
 .pb-commondity-content {
   padding: 21px 19px 80px;
@@ -162,14 +163,16 @@
       -ms-flex: 1;
           flex: 1;
 }
-.pb-commondityDiroNew-content-top-price {
-  font-size: 13px;
-  font-weight: bold;
+.pb-commondityDiroNew-content-top-right {
   -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
           flex-shrink: 0;
   margin-left: 35px;
 }
+.pb-commondityDiroNew-content-top-right-price {
+  font-size: 13px;
+  font-weight: bold;
+}
 .pb-commondityDiroNew-content-collection {
   font-size: 13px;
   color: #757575;
@@ -1453,6 +1456,7 @@ button.swiper-pagination-bullet {
   height: 100%;
   -o-object-fit: contain;
      object-fit: contain;
+  display: block;
 }
 .flex {
   display: -webkit-box;

package/dist/index.js

@@ -8209,7 +8209,7 @@ var Modal$1 = memo(Modal);
  * @Author: binruan@chatlabs.com
  * @Date: 2023-12-26 16:11:34
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-02 18:52:59
+ * @LastEditTime: 2024-04-09 11:00:07
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\ExpandableText.tsx
  *
  */
@@ -8252,7 +8252,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
                     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) + 4;
+                    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);
@@ -8320,15 +8320,16 @@ const CommodityDetail$1 = (_a) => {
     const width = isPreview ? 375 : window.innerWidth;
     const renderContent = ({ isPost }) => {
         var _a, _b, _c;
-        return (React.createElement("div", { className: 'pb-commondity-content' },
-            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'),
-            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'),
-            React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
-            React.createElement(ExpandableText$1, { 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
+        return (React.createElement("div", null,
+            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'),
+            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'),
+            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),
+            React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
+                React.createElement(ExpandableText$1, { 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
             bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
             collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
             necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
-            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 })));
+            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 }))));
     };
     const renderBtn = () => {
         var _a;
@@ -8367,10 +8368,10 @@ const CommodityDetail$1 = (_a) => {
                         objectFit: 'cover',
                         width: '100%'
                     }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
-            renderContent({ isPost })),
+            React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
         renderBtn(),
         React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) },
-            renderContent({ isPost: false }),
+            React.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
             renderBtn())));
 };
 var CommodityDetailComponent = memo(CommodityDetail$1);
@@ -8816,9 +8817,9 @@ Made in Italy` })));
                     React.createElement("div", null,
                         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'),
                         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')),
-                    React.createElement("div", null,
-                        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),
-                        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 : '税费'))),
+                    React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
+                        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),
+                        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 : '税费'))),
                 (!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')),
                 productInfoText({ isPost }))),
         React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));