@pisell/materials 1.10.13 → 1.10.15

package/es/components/PisellProcedure/components/ProcedureHeader.js

@@ -33,7 +33,7 @@ import { getText } from "../../../locales";
  * @author Pisell Team
  */
 var ProcedureHeader = function ProcedureHeader(_ref) {
-  var _modalConfig$config2, _modalConfig$config3;
+  var _mergedStepsProps$mob, _mergedStepsProps$mob2, _modalConfig$config2, _modalConfig$config3;
   var headerProps = _ref.headerProps,
     currentStep = _ref.currentStep,
     className = _ref.className,
@@ -256,8 +256,10 @@ var ProcedureHeader = function ProcedureHeader(_ref) {
   }, actualLeftSlot), (headerProps === null || headerProps === void 0 ? void 0 : headerProps.showSteps) !== false && /*#__PURE__*/React.createElement("div", {
     className: "pisell-procedure-header__center"
   }, /*#__PURE__*/React.createElement(PisellSteps, _extends({}, mergedStepsProps, {
-    mobileMode: "auto",
-    mobileBreakpoint: 744
+    // 调用方可以根据自身页面形态覆盖移动端展示断点；
+    // 未配置时继续沿用 Procedure 原有的 744px 默认行为。
+    mobileMode: (_mergedStepsProps$mob = mergedStepsProps.mobileMode) !== null && _mergedStepsProps$mob !== void 0 ? _mergedStepsProps$mob : 'auto',
+    mobileBreakpoint: (_mergedStepsProps$mob2 = mergedStepsProps.mobileBreakpoint) !== null && _mergedStepsProps$mob2 !== void 0 ? _mergedStepsProps$mob2 : 744
   }))), showActualRightArea && /*#__PURE__*/React.createElement("div", {
     className: "pisell-procedure-header__right",
     onClick: function onClick() {

package/es/components/productCard/lineItem/BookingLineItem.js

@@ -173,7 +173,9 @@ var BookingLineItem = function BookingLineItem(props) {
     var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     if (!productDataSource || productDataSource !== null && productDataSource !== void 0 && productDataSource.isGift) return null;
     var _options$showProductP = options.showProductPromotion,
-      showProductPromotion = _options$showProductP === void 0 ? true : _options$showProductP;
+      showProductPromotion = _options$showProductP === void 0 ? true : _options$showProductP,
+      _options$showAmountFo = options.showAmountFooter,
+      showAmountFooter = _options$showAmountFo === void 0 ? true : _options$showAmountFo;
     var productPromotion = productDataSource !== null && productDataSource !== void 0 && (_productDataSource$pr = productDataSource.promotions) !== null && _productDataSource$pr !== void 0 && _productDataSource$pr.length ? /*#__PURE__*/React.createElement(Promotion, {
       promotions: productDataSource.promotions,
       onClick: function onClick(item) {
@@ -191,7 +193,7 @@ var BookingLineItem = function BookingLineItem(props) {
       isShowImage: isShowImage,
       isShowQuantityBadge: isShowQuantityBadge,
       type: cartSkuType
-    }), isShowAmountFooter ? /*#__PURE__*/React.createElement(AmountFooter, {
+    }), isShowAmountFooter && showAmountFooter ? /*#__PURE__*/React.createElement(AmountFooter, {
       item: productDataSource,
       hideDivider: false,
       type: "total"
@@ -247,6 +249,11 @@ var BookingLineItem = function BookingLineItem(props) {
   if (dataSource !== null && dataSource !== void 0 && dataSource.isGift) {
     return null;
   }
+
+  // inline 操作栏位于卡片内容右侧。价格栏如果继续放在左侧内容中，
+  // 宽度会被数量/删除操作列挤窄；将它提升到整个 wrapper 的下一行，
+  // 才能覆盖预约卡片的完整宽度。
+  var shouldRenderFullWidthAmountFooter = rightActionsDisplay === 'inline' && isShowAmountFooter && shouldRenderRelatedProduct;
   var cardContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classNames(PREFIX, "".concat(PREFIX, "--booking"), "".concat(PREFIX, "--").concat(type)),
     onClick: function onClick(e) {
@@ -296,7 +303,8 @@ var BookingLineItem = function BookingLineItem(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "__related-product-card")
   }, renderProductCard(relatedProductDataSource, dataSource, {
-    showProductPromotion: false
+    showProductPromotion: false,
+    showAmountFooter: !shouldRenderFullWidthAmountFooter
   }), renderPromotion, isShowAction && actionText ? /*#__PURE__*/React.createElement(Action, {
     item: dataSource,
     onAction: function onAction() {
@@ -307,11 +315,19 @@ var BookingLineItem = function BookingLineItem(props) {
     className: classNames("".concat(PREFIX, "-wrapper-container"), _defineProperty({}, "".concat(PREFIX, "-wrapper-container--inline"), rightActionsDisplay === 'inline'))
   }, rightActionsDisplay === 'inline' ? /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(PREFIX, "-wrapper"), "".concat(PREFIX, "-wrapper--inline"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-inline-main")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-inline-content")
   }, cardContent), /*#__PURE__*/React.createElement(InlineActions, {
     actions: bookingRightActions
-  })) : /*#__PURE__*/React.createElement(SwipeAction, {
+  })), shouldRenderFullWidthAmountFooter ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "__inline-amount-footer")
+  }, /*#__PURE__*/React.createElement(AmountFooter, {
+    item: relatedProductDataSource,
+    hideDivider: false,
+    type: "total"
+  })) : null) : /*#__PURE__*/React.createElement(SwipeAction, {
     closeOnAction: false,
     className: classNames("".concat(PREFIX, "-wrapper")),
     rightActions: bookingRightActions,

package/es/components/productCard/lineItem/index.less

@@ -15,10 +15,16 @@
     box-sizing: border-box;
     width: 100%;
     display: flex;
-    align-items: stretch;
+    flex-direction: column;
   }
 }
 
+.pisell-line-item-inline-main {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+}
+
 .pisell-line-item-inline-content {
   min-width: 0;
   flex: 1;
@@ -249,6 +255,13 @@
     padding: 6px 8px 8px;
   }
 
+  // inline 操作仅占上方主体，价格栏放在其下方并占满整个预约卡。
+  &__inline-amount-footer {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 8px 4px;
+  }
+
   &__section-title {
     color: #101828;
     font-size: 12px;

package/lib/components/PisellProcedure/components/ProcedureHeader.js

@@ -196,8 +196,8 @@ var ProcedureHeader = ({
     import_PisellSteps.default,
     {
       ...mergedStepsProps,
-      mobileMode: "auto",
-      mobileBreakpoint: 744
+      mobileMode: mergedStepsProps.mobileMode ?? "auto",
+      mobileBreakpoint: mergedStepsProps.mobileBreakpoint ?? 744
     }
   )), showActualRightArea && /* @__PURE__ */ import_react.default.createElement(
     "div",

package/lib/components/productCard/lineItem/BookingLineItem.js

@@ -171,7 +171,10 @@ var BookingLineItem = (props) => {
   const renderProductCard = (productDataSource, source, options = {}) => {
     var _a2;
     if (!productDataSource || (productDataSource == null ? void 0 : productDataSource.isGift)) return null;
-    const { showProductPromotion = true } = options;
+    const {
+      showProductPromotion = true,
+      showAmountFooter = true
+    } = options;
     const productPromotion = ((_a2 = productDataSource == null ? void 0 : productDataSource.promotions) == null ? void 0 : _a2.length) ? /* @__PURE__ */ import_react.default.createElement(
       import_Promotion.default,
       {
@@ -196,7 +199,7 @@ var BookingLineItem = (props) => {
         isShowQuantityBadge,
         type: cartSkuType
       }
-    ), isShowAmountFooter ? /* @__PURE__ */ import_react.default.createElement(
+    ), isShowAmountFooter && showAmountFooter ? /* @__PURE__ */ import_react.default.createElement(
       import_AmountFooter.default,
       {
         item: productDataSource,
@@ -255,6 +258,7 @@ var BookingLineItem = (props) => {
   if (dataSource == null ? void 0 : dataSource.isGift) {
     return null;
   }
+  const shouldRenderFullWidthAmountFooter = rightActionsDisplay === "inline" && isShowAmountFooter && shouldRenderRelatedProduct;
   const cardContent = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -308,7 +312,8 @@ var BookingLineItem = (props) => {
       !isShowBookingHeader ? renderDeleteButton(true) : null
     ),
     shouldRenderRelatedProduct ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: 0 } }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__related-product` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__related-product-card` }, renderProductCard(relatedProductDataSource, dataSource, {
-      showProductPromotion: false
+      showProductPromotion: false,
+      showAmountFooter: !shouldRenderFullWidthAmountFooter
     }), renderPromotion, isShowAction && actionText ? /* @__PURE__ */ import_react.default.createElement(
       import_Action.default,
       {
@@ -333,8 +338,15 @@ var BookingLineItem = (props) => {
           `${PREFIX}-wrapper--inline`
         )
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-inline-content` }, cardContent),
-      /* @__PURE__ */ import_react.default.createElement(import_inlineActions.default, { actions: bookingRightActions })
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-inline-main` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-inline-content` }, cardContent), /* @__PURE__ */ import_react.default.createElement(import_inlineActions.default, { actions: bookingRightActions })),
+      shouldRenderFullWidthAmountFooter ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}__inline-amount-footer` }, /* @__PURE__ */ import_react.default.createElement(
+        import_AmountFooter.default,
+        {
+          item: relatedProductDataSource,
+          hideDivider: false,
+          type: "total"
+        }
+      )) : null
     ) : /* @__PURE__ */ import_react.default.createElement(
       import_swipeAction.SwipeAction,
       {

package/lib/components/productCard/lineItem/index.less

@@ -15,10 +15,16 @@
     box-sizing: border-box;
     width: 100%;
     display: flex;
-    align-items: stretch;
+    flex-direction: column;
   }
 }
 
+.pisell-line-item-inline-main {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+}
+
 .pisell-line-item-inline-content {
   min-width: 0;
   flex: 1;
@@ -249,6 +255,13 @@
     padding: 6px 8px 8px;
   }
 
+  // inline 操作仅占上方主体，价格栏放在其下方并占满整个预约卡。
+  &__inline-amount-footer {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 8px 4px;
+  }
+
   &__section-title {
     color: #101828;
     font-size: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.10.13",
+  "version": "1.10.15",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",