@anker-in/headless-ui 1.3.61 → 1.3.62-alpha.1787824403387
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/cjs/biz-components/ActiveShelf/ProductCard.d.ts +9 -0
- package/dist/cjs/biz-components/ActiveShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/ActiveShelf/ProductCard.js.map +3 -3
- package/dist/cjs/biz-components/ActiveShelf/index.d.ts +9 -0
- package/dist/cjs/biz-components/ActiveShelf/index.js +1 -1
- package/dist/cjs/biz-components/ActiveShelf/index.js.map +3 -3
- package/dist/cjs/biz-components/ActivitySchedule/index.js +1 -1
- package/dist/cjs/biz-components/ActivitySchedule/index.js.map +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/PriceAndActions.d.ts +6 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/PriceAndActions.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/PriceAndActions.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.d.ts +8 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/index.d.ts +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/index.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/index.js.map +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/types.d.ts +18 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/types.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/types.js.map +1 -1
- package/dist/cjs/biz-components/FooterNavigation/index.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.d.ts +6 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +4 -4
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CouponInit.d.ts +13 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CouponInit.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CouponInit.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CouponSuccess.d.ts +13 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CouponSuccess.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CouponSuccess.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CreditCouponListItem.d.ts +19 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CreditCouponListItem.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CreditCouponListItem.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/RedeemCouponModal.d.ts +18 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/RedeemCouponModal.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/RedeemCouponModal.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/index.d.ts +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/index.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/index.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/tracking.d.ts +33 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/tracking.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/tracking.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/types.d.ts +72 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/types.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/types.js.map +7 -0
- package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.js +1 -1
- package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.js.map +2 -2
- package/dist/cjs/biz-components/SceneShelfV3/ProductCard.d.ts +9 -0
- package/dist/cjs/biz-components/SceneShelfV3/ProductCard.js +1 -1
- package/dist/cjs/biz-components/SceneShelfV3/ProductCard.js.map +3 -3
- package/dist/cjs/biz-components/SceneShelfV3/index.d.ts +9 -0
- package/dist/cjs/biz-components/SceneShelfV3/index.js +1 -1
- package/dist/cjs/biz-components/SceneShelfV3/index.js.map +3 -3
- package/dist/cjs/biz-components/SecondaryBanner/index.d.ts +10 -0
- package/dist/cjs/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.d.ts +32 -18
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js.map +2 -2
- package/dist/cjs/biz-components/Specs/dropdown.d.ts +2 -1
- package/dist/cjs/biz-components/Specs/dropdown.js +2 -2
- package/dist/cjs/biz-components/Specs/dropdown.js.map +3 -3
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +3 -3
- package/dist/cjs/biz-components/index.d.ts +10 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/components/board.js +1 -1
- package/dist/cjs/components/board.js.map +3 -3
- package/dist/cjs/components/brand-strip.js +1 -1
- package/dist/cjs/components/brand-strip.js.map +3 -3
- package/dist/cjs/components/link.js +1 -1
- package/dist/cjs/components/link.js.map +3 -3
- package/dist/cjs/components/tabs.js +1 -1
- package/dist/cjs/components/tabs.js.map +2 -2
- package/dist/cjs/hooks/useDraggableScroll.js +1 -1
- package/dist/cjs/hooks/useDraggableScroll.js.map +2 -2
- package/dist/cjs/hooks/useExposure.d.ts +1 -1
- package/dist/cjs/hooks/useExposure.js +1 -1
- package/dist/cjs/hooks/useExposure.js.map +2 -2
- package/dist/cjs/hooks/useViewItemList.d.ts +1 -1
- package/dist/cjs/hooks/useViewItemList.js.map +2 -2
- package/dist/esm/biz-components/ActiveShelf/ProductCard.d.ts +9 -0
- package/dist/esm/biz-components/ActiveShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/ActiveShelf/ProductCard.js.map +3 -3
- package/dist/esm/biz-components/ActiveShelf/index.d.ts +9 -0
- package/dist/esm/biz-components/ActiveShelf/index.js +1 -1
- package/dist/esm/biz-components/ActiveShelf/index.js.map +3 -3
- package/dist/esm/biz-components/ActivitySchedule/index.js +1 -1
- package/dist/esm/biz-components/ActivitySchedule/index.js.map +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.d.ts +6 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.d.ts +8 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/index.d.ts +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/index.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/index.js.map +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/types.d.ts +18 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/types.js.map +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.d.ts +6 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +4 -4
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CouponInit.d.ts +13 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CouponInit.js +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CouponInit.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CouponSuccess.d.ts +13 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CouponSuccess.js +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CouponSuccess.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CreditCouponListItem.d.ts +19 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CreditCouponListItem.js +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/CreditCouponListItem.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/RedeemCouponModal.d.ts +18 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/RedeemCouponModal.js +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/RedeemCouponModal.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/index.d.ts +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/index.js +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/index.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/tracking.d.ts +33 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/tracking.js +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/tracking.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/types.d.ts +72 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/types.js +1 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/CreditCouponRedeem/types.js.map +7 -0
- package/dist/esm/biz-components/MediaSceneSwitcherV2/index.js +1 -1
- package/dist/esm/biz-components/MediaSceneSwitcherV2/index.js.map +3 -3
- package/dist/esm/biz-components/SceneShelfV3/ProductCard.d.ts +9 -0
- package/dist/esm/biz-components/SceneShelfV3/ProductCard.js +1 -1
- package/dist/esm/biz-components/SceneShelfV3/ProductCard.js.map +3 -3
- package/dist/esm/biz-components/SceneShelfV3/index.d.ts +9 -0
- package/dist/esm/biz-components/SceneShelfV3/index.js +1 -1
- package/dist/esm/biz-components/SceneShelfV3/index.js.map +3 -3
- package/dist/esm/biz-components/SecondaryBanner/index.d.ts +10 -0
- package/dist/esm/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/esm/biz-components/SecondaryBanner/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.d.ts +32 -18
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js +1 -1
- package/dist/esm/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js.map +2 -2
- package/dist/esm/biz-components/Specs/dropdown.d.ts +2 -1
- package/dist/esm/biz-components/Specs/dropdown.js +2 -2
- package/dist/esm/biz-components/Specs/dropdown.js.map +3 -3
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +3 -3
- package/dist/esm/biz-components/index.d.ts +10 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/dist/esm/components/board.js +1 -1
- package/dist/esm/components/board.js.map +3 -3
- package/dist/esm/components/brand-strip.js +1 -1
- package/dist/esm/components/brand-strip.js.map +3 -3
- package/dist/esm/components/link.js +1 -1
- package/dist/esm/components/link.js.map +3 -3
- package/dist/esm/components/tabs.js +1 -1
- package/dist/esm/components/tabs.js.map +2 -2
- package/dist/esm/hooks/useDraggableScroll.js +1 -1
- package/dist/esm/hooks/useDraggableScroll.js.map +2 -2
- package/dist/esm/hooks/useExposure.d.ts +1 -1
- package/dist/esm/hooks/useExposure.js +1 -1
- package/dist/esm/hooks/useExposure.js.map +2 -2
- package/dist/esm/hooks/useViewItemList.d.ts +1 -1
- package/dist/esm/hooks/useViewItemList.js.map +2 -2
- package/dist/tokens/oneAnker.css +2 -0
- package/package.json +1 -1
- package/style.css +76 -36
|
@@ -112,6 +112,15 @@ export interface ProductCardProps {
|
|
|
112
112
|
primaryButtonFun?: ButtonFunctionType;
|
|
113
113
|
/** 是否展示原价(删除线价格) */
|
|
114
114
|
showOriginalPrice?: boolean;
|
|
115
|
+
/**
|
|
116
|
+
* 原价区域渲染函数,用于在原价位置展示自定义内容(如 Save 金额文案)。
|
|
117
|
+
* 不传时使用默认的原价渲染(划线价)。
|
|
118
|
+
* @param product - 当前产品数据
|
|
119
|
+
* @param context - 渲染上下文(含 showOriginalPrice)
|
|
120
|
+
*/
|
|
121
|
+
renderOriginalPrice?: (product: ProductCardData, context: {
|
|
122
|
+
showOriginalPrice?: boolean;
|
|
123
|
+
}) => React.ReactNode;
|
|
115
124
|
/** 文案配置 */
|
|
116
125
|
copy?: CopyConfig;
|
|
117
126
|
onProductImageClick?: (product: ProductCardData) => void;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var q=Object.create;var p=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var
|
|
1
|
+
"use strict";"use client";var q=Object.create;var p=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var I=(e,i)=>{for(var r in i)p(e,r,{get:i[r],enumerable:!0})},C=(e,i,r,c)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of _(i))!E.call(e,s)&&s!==r&&p(e,s,{get:()=>i[s],enumerable:!(c=M(i,s))||c.enumerable});return e};var j=(e,i,r)=>(r=e!=null?q($(e)):{},C(i||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),H=e=>C(p({},"__esModule",{value:!0}),e);var V={};I(V,{ProductCard:()=>u,default:()=>K});module.exports=H(V);var a=require("react/jsx-runtime"),d=j(require("react")),n=require("../../helpers/index.js"),t=require("../../components/index.js");const O=5;function G(e,i,r,c){if(e===void 0)return!0;switch(e){case"always":return!0;case"never":return!1;case"below-quantity":return i===void 0?!0:r<=i;case"below-percentage":return i===void 0?!0:r/c*100<=i;default:return!0}}const u=d.forwardRef(({product:e,className:i,showTags:r=!0,stockDisplayMode:c,stockThresholdValue:s,onLearnMore:S,onShopNow:N,onAddToCart:B,classNames:o,secondaryButtonText:b,secondaryButtonFun:y,primaryButtonText:f,primaryButtonFun:v,showOriginalPrice:x,renderOriginalPrice:k,copy:g,onProductImageClick:h},D)=>{const[L,T]=d.useState(!1),[F,z]=d.useState(!1),A=d.useMemo(()=>e?.availableForSale&&e?.quantityAvailable<=0?O:e?.availableForSale?(e?.quantityAvailable??0)/(e?.totalInventory??1)*100:0,[e?.availableForSale,e?.quantityAvailable,e?.totalInventory]),w=async(l,m)=>{if(!l)return;const P=m==="primary"?T:z;P(!0);try{switch(l){case"buyNow":await N?.(e);break;case"addCart":await B?.(e);break;case"learnMore":await S?.(e);break;default:break}}finally{P(!1)}},R=e.availableForSale&&e.quantityAvailable<=0;return(0,a.jsx)(t.Card,{ref:D,className:(0,n.cn)("bg-container-primary hover:bg-container-secondary-0 flex h-full flex-col overflow-hidden border-none",i,o?.productCard),children:(0,a.jsxs)(t.CardContent,{className:"desktop:p-6 relative flex flex-1 flex-col justify-between p-4",children:[(0,a.jsx)("div",{className:"lg-desktop:h-[28px] flex h-[24px] gap-1",children:r&&e.tags?.map((l,m)=>l.label?(0,a.jsx)(t.Badge,{size:"sm",variant:l.variant||"outline",className:(0,n.cn)(l.variant==="promotional"?"ml-2":""),promotionalType:l.promotionalType,children:l.label},m):(0,a.jsx)(d.Fragment,{children:l},m))}),(0,a.jsx)("div",{className:"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden",children:(0,a.jsx)("a",{onClick:()=>h?.(e),...!h&&{href:e?.listingLink},rel:"noreferrer",children:(0,a.jsx)(t.Picture,{source:e.image,alt:e.name,className:"aspect-square size-full object-contain",imgClassName:"w-full h-full object-contain"})})}),(0,a.jsxs)("div",{className:"flex h-full flex-1 grow flex-col justify-between",children:[(0,a.jsxs)("div",{className:"mb-4",children:[(0,a.jsx)(t.Heading,{as:"h3",size:2,className:(0,n.cn)("text-info-primary mb-2 line-clamp-2 min-h-[2.4em]",o?.productTitle),html:e.custom_name||e.name}),e?.description&&(0,a.jsx)(t.Text,{size:2,className:(0,n.cn)("text-info-secondary desktop:line-clamp-2 desktop:min-h-[2.4em] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 min-h-[2.4em] text-[14px]",o?.productDescription),html:e.custom_description||e.description})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:(0,n.cn)("mb-2",o?.productPrice),children:(0,a.jsx)("div",{className:"flex items-baseline gap-2",children:e.availableForSale?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.Heading,{size:2,className:"text-info-primary",as:"h6",children:e.price}),k?k(e,{showOriginalPrice:x}):x&&e.originalPrice&&(0,a.jsx)(t.Heading,{size:2,className:(0,n.cn)("text-info-tertiary line-through",o?.originalPrice),as:"h6",children:e.originalPrice})]}):(0,a.jsx)(t.Heading,{size:2,className:"text-info-tertiary",children:g?.outOfStockLabel??"Sold Out"})})}),e?.priceLabel&&e?.availableForSale&&(0,a.jsx)(t.Text,{size:4,className:(0,n.cn)("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]",o?.productPriceLabel),children:e.priceLabel}),(0,a.jsxs)("div",{className:(0,n.cn)("lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2",o?.buttonGroup),children:[b&&(0,a.jsx)(t.Button,{variant:"secondary",size:"base",className:(0,n.cn)("tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center w-full whitespace-nowrap",o?.secondaryButton),onClick:()=>w(y,"secondary"),disabled:!e.availableForSale&&y!=="learnMore",loading:F,"data-headless-type-name":"ActiveShelf#ProductCard","data-headless-title-desc-button":`${e.custom_name||e.name}#${e.description||""}#${b}`,"data-headless-sku":e.sku,children:b}),f&&(0,a.jsx)(t.Button,{variant:"primary",size:"base",className:(0,n.cn)("tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center w-full whitespace-nowrap",o?.primaryButton),onClick:()=>w(v,"primary"),disabled:!e.availableForSale&&v!=="learnMore",loading:L,"data-headless-type-name":"ActiveShelf#ProductCard","data-headless-title-desc-button":`${e.custom_name||e.name}#${e.description||""}#${f}`,"data-headless-sku":e.sku,children:f})]}),G(c,s,e?.quantityAvailable??0,e?.totalInventory??0)&&(0,a.jsxs)("div",{className:"mt-4 space-y-2",children:[(0,a.jsx)(t.Progress,{value:A,max:100,min:0,size:"base",variant:"default","aria-label":"stock progress",classNames:{root:(0,n.cn)("bg-[var(--progress-track-bg,rgba(0,0,0,0.2))]",o?.stockTrack),progressBar:(0,n.cn)("bg-brand-0 transition-all duration-300 ease-in-out",o?.stockBar)}}),(0,a.jsx)(t.Text,{size:3,className:"text-info-tertiary text-[14px]",children:R?g?.limitedStock:g?.stockDisplayText?.replace("{count}",`${e.availableForSale?e.quantityAvailable:0}`)})]})]})]})]})})});u.displayName="ActiveShelf.ProductCard";var K=u;
|
|
2
2
|
//# sourceMappingURL=ProductCard.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ActiveShelf/ProductCard.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading, Progress } from '../../components/index.js'\n\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport type { BadgeProps } from '../../components/badge.js'\n\n/**\n * \u8D85\u5356\u65F6\u5E93\u5B58\u6761\u663E\u793A\u7684\u6700\u5C0F\u767E\u5206\u6BD4\n * \u9632\u6B62\u8D85\u5356\u65F6\u5E93\u5B58\u6761\u663E\u793A\u4E3A\u6EE1\u683C\uFF08100%\uFF09\u6216\u5B8C\u5168\u7A7A\uFF080%\uFF09\n */\nconst OVERSELLING_STOCK_PERCENTAGE = 5\n\n/**\n * \u8BED\u4E49\u5316\u7C7B\u540D\n */\nexport type ActiveShelfSemanticName =\n | 'root'\n | 'title'\n | 'description'\n | 'productCard'\n | 'productTitle'\n | 'productDescription'\n | 'productPriceLabel'\n | 'productPrice'\n | 'originalPrice'\n | 'buttonGroup'\n | 'secondaryButton'\n | 'primaryButton'\n | 'stockTrack'\n | 'stockBar'\n\n/**\n * \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n */\nexport type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage'\n\n/**\n * \u57FA\u7840\u4EA7\u54C1\u6570\u636E\u63A5\u53E3\uFF08\u6765\u81EA\u5916\u90E8\u6570\u636E\u6E90\uFF09\n */\nexport interface BaseProductData {\n sku: string\n name: string\n image: string\n value: string\n handle: string\n shopify_id: string\n custom_name?: string\n custom_description?: string\n}\n\n/**\n * Shopify \u53D8\u4F53\u6570\u636E\u63A5\u53E3\n */\nexport interface VariantData {\n /**\n * \u4EA7\u54C1\u63CF\u8FF0\n */\n description?: string\n /**\n * \u53D8\u4F53id\n */\n variantId: string\n\n /**\n * \u4EA7\u54C1\u94FE\u63A5, \u70B9\u51FB\u56FE\u7247\u7684\u65F6\u5019\u8DF3\u8F6C\u5230\u8BE5\u94FE\u63A5\n */\n listingLink: string\n /**\n * \u539F\u4EF7\n */\n originalPrice: string\n /**\n * \u73B0\u4EF7\n */\n price: string\n /**\n * \u4EF7\u683C\u4E0A\u9762\u5C55\u793A\u7684\u6807\u7B7E\u6587\u672C\n */\n priceLabel?: string\n /**\n * \u603B\u5E93\u5B58\n */\n totalInventory: number\n /**\n * \u53EF\u7528\u5E93\u5B58\u6570\u91CF\n */\n quantityAvailable: number\n /**\n * \u662F\u5426\u53EF\u552E\n */\n availableForSale: boolean\n\n /**\n * tags \u5217\u8868(\u4F1A\u5458\u4EF7\uFF0C\u6298\u6263\uFF0Cnew, hot\u7B49\u6807\u7B7E\u4FE1\u606F)\n */\n tags: Array<\n | {\n label: string\n variant: BadgeProps['variant']\n promotionalType?: BadgeProps['promotionalType']\n }\n | React.ReactNode\n >\n /**\n * \u901A\u7528\u6298\u6263\u6570\u636E\uFF0C\u5305\u62EC\u6298\u6263title, \u7C7B\u578B\u548C\u503C\n */\n coupon: any\n}\n\n/**\n * \u5B8C\u6574\u7684\u4EA7\u54C1\u5361\u7247\u6570\u636E\u63A5\u53E3\n */\nexport interface ProductCardData extends BaseProductData, VariantData {}\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6 Props\n */\nexport interface ProductCardProps {\n /** \u4EA7\u54C1\u6570\u636E */\n product: ProductCardData\n /** \u6837\u5F0F\u7C7B\u540D */\n className?: string\n /** \u662F\u5426\u5C55\u793A\u6807\u7B7E\u7CFB\u7EDF */\n showTags?: boolean\n /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F */\n stockDisplayMode?: StockDisplayMode\n /** \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09 */\n stockThresholdValue?: number\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onShopNow?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddToCart?: (product: ProductCardData) => void\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<ActiveShelfSemanticName, string>>\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u529F\u80FD */\n secondaryButtonFun?: ButtonFunctionType\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u529F\u80FD */\n primaryButtonFun?: ButtonFunctionType\n /** \u662F\u5426\u5C55\u793A\u539F\u4EF7\uFF08\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n showOriginalPrice?: boolean\n /** \u6587\u6848\u914D\u7F6E */\n copy?: CopyConfig\n onProductImageClick?: (product: ProductCardData) => void\n}\n\n/**\n * \u5224\u65AD\u662F\u5426\u5E94\u8BE5\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n * @param stockDisplayMode \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n * @param stockThresholdValue \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09\n * @param quantityAvailable \u53EF\u7528\u5E93\u5B58\u6570\u91CF\n * @param totalInventory \u603B\u5E93\u5B58\n * @returns \u662F\u5426\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n */\nfunction shouldShowStock(\n stockDisplayMode: StockDisplayMode | undefined,\n stockThresholdValue: number | undefined,\n quantityAvailable: number,\n totalInventory: number\n): boolean {\n // \u672A\u914D\u7F6E\u65F6\u9ED8\u8BA4\u663E\u793A\n if (stockDisplayMode === undefined) {\n return true\n }\n\n // \u6839\u636E\u5C55\u793A\u6A21\u5F0F\u5224\u65AD\n switch (stockDisplayMode) {\n case 'always':\n // \u603B\u662F\u663E\u793A\n return true\n\n case 'never':\n // \u6C38\u4E0D\u663E\u793A\n return false\n\n case 'below-quantity':\n // \u5F53\u5E93\u5B58\u6570\u91CF\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n if (stockThresholdValue === undefined) {\n return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n }\n\n return quantityAvailable <= stockThresholdValue\n\n case 'below-percentage':\n // \u5F53\u5E93\u5B58\u767E\u5206\u6BD4\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n if (stockThresholdValue === undefined) {\n return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n }\n return (quantityAvailable / totalInventory) * 100 <= stockThresholdValue\n\n default:\n // \u672A\u77E5\u6A21\u5F0F\u65F6\u9ED8\u8BA4\u663E\u793A\n return true\n }\n}\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nconst ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n (\n {\n product,\n className,\n showTags = true,\n stockDisplayMode,\n stockThresholdValue,\n onLearnMore,\n onShopNow,\n onAddToCart,\n classNames,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n showOriginalPrice,\n copy,\n onProductImageClick,\n },\n ref\n ) => {\n const [primaryLoading, setPrimaryLoading] = React.useState(false)\n const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n const stockPercentage = React.useMemo(() => {\n if (product?.availableForSale && product?.quantityAvailable <= 0) {\n return OVERSELLING_STOCK_PERCENTAGE\n }\n // \u4E0D\u53EF\u552E\u65F6\u663E\u793A0%\n if (!product?.availableForSale) {\n return 0\n }\n return ((product?.quantityAvailable ?? 0) / (product?.totalInventory ?? 1)) * 100\n }, [product?.availableForSale, product?.quantityAvailable, product?.totalInventory])\n\n // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n const handleButtonClick = async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n if (!buttonFun) return\n\n const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n setLoading(true)\n\n try {\n switch (buttonFun) {\n case 'buyNow':\n await onShopNow?.(product)\n break\n case 'addCart':\n await onAddToCart?.(product)\n break\n case 'learnMore':\n await onLearnMore?.(product)\n break\n default:\n break\n }\n } finally {\n setLoading(false)\n }\n }\n\n const overselling = product.availableForSale && product.quantityAvailable <= 0\n\n return (\n <Card\n ref={ref}\n className={cn(\n 'bg-container-primary hover:bg-container-secondary-0 flex h-full flex-col overflow-hidden border-none',\n className,\n classNames?.productCard\n )}\n >\n <CardContent className=\"desktop:p-6 relative flex flex-1 flex-col justify-between p-4\">\n {/* \u6807\u7B7E */}\n <div className=\"lg-desktop:h-[28px] flex h-[24px] gap-1\">\n {showTags &&\n product.tags?.map((tag: any, index) =>\n (tag as any).label ? (\n <Badge\n key={index}\n size=\"sm\"\n variant={(tag.variant as any) || 'outline'}\n className={cn(tag.variant === 'promotional' ? 'ml-2' : '')}\n promotionalType={tag.promotionalType}\n >\n {tag.label}\n </Badge>\n ) : (\n <React.Fragment key={index}>{tag}</React.Fragment>\n )\n )}\n </div>\n\n {/* \u4EA7\u54C1\u56FE\u533A\u57DF */}\n <div className=\"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden\">\n <a\n onClick={() => onProductImageClick?.(product)}\n {...(!onProductImageClick && {\n href: product?.listingLink,\n })}\n rel=\"noreferrer\"\n >\n <Picture\n source={product.image}\n alt={product.name}\n className=\"aspect-square size-full object-contain\"\n imgClassName=\"w-full h-full object-contain\"\n />\n </a>\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"flex h-full flex-1 grow flex-col justify-between\">\n {/* \u4EA7\u54C1\u4FE1\u606F */}\n <div className=\"mb-4\">\n <Heading\n as=\"h3\"\n size={2}\n className={cn('text-info-primary mb-2 line-clamp-2 min-h-[2.4em]', classNames?.productTitle)}\n html={product.custom_name || product.name}\n />\n {product?.description && (\n <Text\n size={2}\n className={cn(\n 'text-info-secondary desktop:line-clamp-2 desktop:min-h-[2.4em] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 min-h-[2.4em] text-[14px]',\n classNames?.productDescription\n )}\n html={product.custom_description || product.description}\n />\n )}\n </div>\n\n {/* \u4EF7\u683C\u533A\u57DF */}\n <div>\n <div className={cn('mb-2', classNames?.productPrice)}>\n <div className=\"flex items-baseline gap-2\">\n {product.availableForSale ? (\n <>\n <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n {product.price}\n </Heading>\n {showOriginalPrice && product.originalPrice && (\n <Heading\n size={2}\n className={cn('text-info-tertiary line-through', classNames?.originalPrice)}\n as=\"h6\"\n >\n {product.originalPrice}\n </Heading>\n )}\n </>\n ) : (\n <Heading size={2} className=\"text-info-tertiary\">\n {copy?.outOfStockLabel ?? 'Sold Out'}\n </Heading>\n )}\n </div>\n </div>\n\n {product?.priceLabel && product?.availableForSale && (\n <Text\n size={4}\n className={cn(\n 'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]',\n classNames?.productPriceLabel\n )}\n >\n {product.priceLabel}\n </Text>\n )}\n\n {/* \u6309\u94AE\u533A\u57DF */}\n <div className={cn('lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2', classNames?.buttonGroup)}>\n {secondaryButtonText && (\n <Button\n variant=\"secondary\"\n size=\"base\"\n className={cn(\n 'tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center w-full whitespace-nowrap',\n classNames?.secondaryButton\n )}\n onClick={() => handleButtonClick(secondaryButtonFun, 'secondary')}\n disabled={!product.availableForSale && secondaryButtonFun !== 'learnMore'}\n loading={secondaryLoading}\n data-headless-type-name=\"ActiveShelf#ProductCard\"\n data-headless-title-desc-button={`${product.custom_name || product.name}#${product.description || ''}#${secondaryButtonText}`}\n data-headless-sku={product.sku}\n >\n {secondaryButtonText}\n </Button>\n )}\n {primaryButtonText && (\n <Button\n variant=\"primary\"\n size=\"base\"\n className={cn(\n 'tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center w-full whitespace-nowrap',\n classNames?.primaryButton\n )}\n onClick={() => handleButtonClick(primaryButtonFun, 'primary')}\n disabled={!product.availableForSale && primaryButtonFun !== 'learnMore'}\n loading={primaryLoading}\n data-headless-type-name=\"ActiveShelf#ProductCard\"\n data-headless-title-desc-button={`${product.custom_name || product.name}#${product.description || ''}#${primaryButtonText}`}\n data-headless-sku={product.sku}\n >\n {primaryButtonText}\n </Button>\n )}\n </div>\n\n {/* \u5E93\u5B58\u4FE1\u606F */}\n {shouldShowStock(\n stockDisplayMode,\n stockThresholdValue,\n product?.quantityAvailable ?? 0,\n product?.totalInventory ?? 0\n ) && (\n <div className=\"mt-4 space-y-2\">\n <Progress\n value={stockPercentage}\n max={100}\n min={0}\n size=\"base\"\n variant=\"default\"\n aria-label=\"stock progress\"\n classNames={{\n root: cn('bg-[var(--progress-track-bg,rgba(0,0,0,0.2))]', classNames?.stockTrack),\n progressBar: cn('bg-brand-0 transition-all duration-300 ease-in-out', classNames?.stockBar),\n }}\n />\n <Text size={3} className=\"text-info-tertiary text-[14px]\">\n {overselling\n ? copy?.limitedStock\n : copy?.stockDisplayText?.replace(\n '{count}',\n `${product.availableForSale ? product.quantityAvailable : 0}`\n )}\n </Text>\n </div>\n )}\n </div>\n </div>\n </CardContent>\n </Card>\n )\n }\n)\n\nProductCard.displayName = 'ActiveShelf.ProductCard'\n\nexport { ProductCard }\nexport default ProductCard\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,
|
|
6
|
-
"names": ["ProductCard_exports", "__export", "ProductCard", "ProductCard_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "OVERSELLING_STOCK_PERCENTAGE", "shouldShowStock", "stockDisplayMode", "stockThresholdValue", "quantityAvailable", "totalInventory", "product", "className", "showTags", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "showOriginalPrice", "copy", "onProductImageClick", "ref", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "stockPercentage", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "overselling", "tag", "index"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading, Progress } from '../../components/index.js'\n\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport type { BadgeProps } from '../../components/badge.js'\n\n/**\n * \u8D85\u5356\u65F6\u5E93\u5B58\u6761\u663E\u793A\u7684\u6700\u5C0F\u767E\u5206\u6BD4\n * \u9632\u6B62\u8D85\u5356\u65F6\u5E93\u5B58\u6761\u663E\u793A\u4E3A\u6EE1\u683C\uFF08100%\uFF09\u6216\u5B8C\u5168\u7A7A\uFF080%\uFF09\n */\nconst OVERSELLING_STOCK_PERCENTAGE = 5\n\n/**\n * \u8BED\u4E49\u5316\u7C7B\u540D\n */\nexport type ActiveShelfSemanticName =\n | 'root'\n | 'title'\n | 'description'\n | 'productCard'\n | 'productTitle'\n | 'productDescription'\n | 'productPriceLabel'\n | 'productPrice'\n | 'originalPrice'\n | 'buttonGroup'\n | 'secondaryButton'\n | 'primaryButton'\n | 'stockTrack'\n | 'stockBar'\n\n/**\n * \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n */\nexport type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage'\n\n/**\n * \u57FA\u7840\u4EA7\u54C1\u6570\u636E\u63A5\u53E3\uFF08\u6765\u81EA\u5916\u90E8\u6570\u636E\u6E90\uFF09\n */\nexport interface BaseProductData {\n sku: string\n name: string\n image: string\n value: string\n handle: string\n shopify_id: string\n custom_name?: string\n custom_description?: string\n}\n\n/**\n * Shopify \u53D8\u4F53\u6570\u636E\u63A5\u53E3\n */\nexport interface VariantData {\n /**\n * \u4EA7\u54C1\u63CF\u8FF0\n */\n description?: string\n /**\n * \u53D8\u4F53id\n */\n variantId: string\n\n /**\n * \u4EA7\u54C1\u94FE\u63A5, \u70B9\u51FB\u56FE\u7247\u7684\u65F6\u5019\u8DF3\u8F6C\u5230\u8BE5\u94FE\u63A5\n */\n listingLink: string\n /**\n * \u539F\u4EF7\n */\n originalPrice: string\n /**\n * \u73B0\u4EF7\n */\n price: string\n /**\n * \u4EF7\u683C\u4E0A\u9762\u5C55\u793A\u7684\u6807\u7B7E\u6587\u672C\n */\n priceLabel?: string\n /**\n * \u603B\u5E93\u5B58\n */\n totalInventory: number\n /**\n * \u53EF\u7528\u5E93\u5B58\u6570\u91CF\n */\n quantityAvailable: number\n /**\n * \u662F\u5426\u53EF\u552E\n */\n availableForSale: boolean\n\n /**\n * tags \u5217\u8868(\u4F1A\u5458\u4EF7\uFF0C\u6298\u6263\uFF0Cnew, hot\u7B49\u6807\u7B7E\u4FE1\u606F)\n */\n tags: Array<\n | {\n label: string\n variant: BadgeProps['variant']\n promotionalType?: BadgeProps['promotionalType']\n }\n | React.ReactNode\n >\n /**\n * \u901A\u7528\u6298\u6263\u6570\u636E\uFF0C\u5305\u62EC\u6298\u6263title, \u7C7B\u578B\u548C\u503C\n */\n coupon: any\n}\n\n/**\n * \u5B8C\u6574\u7684\u4EA7\u54C1\u5361\u7247\u6570\u636E\u63A5\u53E3\n */\nexport interface ProductCardData extends BaseProductData, VariantData {}\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6 Props\n */\nexport interface ProductCardProps {\n /** \u4EA7\u54C1\u6570\u636E */\n product: ProductCardData\n /** \u6837\u5F0F\u7C7B\u540D */\n className?: string\n /** \u662F\u5426\u5C55\u793A\u6807\u7B7E\u7CFB\u7EDF */\n showTags?: boolean\n /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F */\n stockDisplayMode?: StockDisplayMode\n /** \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09 */\n stockThresholdValue?: number\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onShopNow?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddToCart?: (product: ProductCardData) => void\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<ActiveShelfSemanticName, string>>\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u529F\u80FD */\n secondaryButtonFun?: ButtonFunctionType\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u529F\u80FD */\n primaryButtonFun?: ButtonFunctionType\n /** \u662F\u5426\u5C55\u793A\u539F\u4EF7\uFF08\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n showOriginalPrice?: boolean\n /**\n * \u539F\u4EF7\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5728\u539F\u4EF7\u4F4D\u7F6E\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF08\u5982 Save \u91D1\u989D\u6587\u6848\uFF09\u3002\n * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u539F\u4EF7\u6E32\u67D3\uFF08\u5212\u7EBF\u4EF7\uFF09\u3002\n * @param product - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param context - \u6E32\u67D3\u4E0A\u4E0B\u6587\uFF08\u542B showOriginalPrice\uFF09\n */\n renderOriginalPrice?: (product: ProductCardData, context: { showOriginalPrice?: boolean }) => React.ReactNode\n /** \u6587\u6848\u914D\u7F6E */\n copy?: CopyConfig\n onProductImageClick?: (product: ProductCardData) => void\n}\n\n/**\n * \u5224\u65AD\u662F\u5426\u5E94\u8BE5\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n * @param stockDisplayMode \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n * @param stockThresholdValue \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09\n * @param quantityAvailable \u53EF\u7528\u5E93\u5B58\u6570\u91CF\n * @param totalInventory \u603B\u5E93\u5B58\n * @returns \u662F\u5426\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n */\nfunction shouldShowStock(\n stockDisplayMode: StockDisplayMode | undefined,\n stockThresholdValue: number | undefined,\n quantityAvailable: number,\n totalInventory: number\n): boolean {\n // \u672A\u914D\u7F6E\u65F6\u9ED8\u8BA4\u663E\u793A\n if (stockDisplayMode === undefined) {\n return true\n }\n\n // \u6839\u636E\u5C55\u793A\u6A21\u5F0F\u5224\u65AD\n switch (stockDisplayMode) {\n case 'always':\n // \u603B\u662F\u663E\u793A\n return true\n\n case 'never':\n // \u6C38\u4E0D\u663E\u793A\n return false\n\n case 'below-quantity':\n // \u5F53\u5E93\u5B58\u6570\u91CF\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n if (stockThresholdValue === undefined) {\n return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n }\n\n return quantityAvailable <= stockThresholdValue\n\n case 'below-percentage':\n // \u5F53\u5E93\u5B58\u767E\u5206\u6BD4\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n if (stockThresholdValue === undefined) {\n return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n }\n return (quantityAvailable / totalInventory) * 100 <= stockThresholdValue\n\n default:\n // \u672A\u77E5\u6A21\u5F0F\u65F6\u9ED8\u8BA4\u663E\u793A\n return true\n }\n}\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nconst ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n (\n {\n product,\n className,\n showTags = true,\n stockDisplayMode,\n stockThresholdValue,\n onLearnMore,\n onShopNow,\n onAddToCart,\n classNames,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n showOriginalPrice,\n renderOriginalPrice,\n copy,\n onProductImageClick,\n },\n ref\n ) => {\n const [primaryLoading, setPrimaryLoading] = React.useState(false)\n const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n const stockPercentage = React.useMemo(() => {\n if (product?.availableForSale && product?.quantityAvailable <= 0) {\n return OVERSELLING_STOCK_PERCENTAGE\n }\n // \u4E0D\u53EF\u552E\u65F6\u663E\u793A0%\n if (!product?.availableForSale) {\n return 0\n }\n return ((product?.quantityAvailable ?? 0) / (product?.totalInventory ?? 1)) * 100\n }, [product?.availableForSale, product?.quantityAvailable, product?.totalInventory])\n\n // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n const handleButtonClick = async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n if (!buttonFun) return\n\n const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n setLoading(true)\n\n try {\n switch (buttonFun) {\n case 'buyNow':\n await onShopNow?.(product)\n break\n case 'addCart':\n await onAddToCart?.(product)\n break\n case 'learnMore':\n await onLearnMore?.(product)\n break\n default:\n break\n }\n } finally {\n setLoading(false)\n }\n }\n\n const overselling = product.availableForSale && product.quantityAvailable <= 0\n\n return (\n <Card\n ref={ref}\n className={cn(\n 'bg-container-primary hover:bg-container-secondary-0 flex h-full flex-col overflow-hidden border-none',\n className,\n classNames?.productCard\n )}\n >\n <CardContent className=\"desktop:p-6 relative flex flex-1 flex-col justify-between p-4\">\n {/* \u6807\u7B7E */}\n <div className=\"lg-desktop:h-[28px] flex h-[24px] gap-1\">\n {showTags &&\n product.tags?.map((tag: any, index) =>\n (tag as any).label ? (\n <Badge\n key={index}\n size=\"sm\"\n variant={(tag.variant as any) || 'outline'}\n className={cn(tag.variant === 'promotional' ? 'ml-2' : '')}\n promotionalType={tag.promotionalType}\n >\n {tag.label}\n </Badge>\n ) : (\n <React.Fragment key={index}>{tag}</React.Fragment>\n )\n )}\n </div>\n\n {/* \u4EA7\u54C1\u56FE\u533A\u57DF */}\n <div className=\"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden\">\n <a\n onClick={() => onProductImageClick?.(product)}\n {...(!onProductImageClick && {\n href: product?.listingLink,\n })}\n rel=\"noreferrer\"\n >\n <Picture\n source={product.image}\n alt={product.name}\n className=\"aspect-square size-full object-contain\"\n imgClassName=\"w-full h-full object-contain\"\n />\n </a>\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"flex h-full flex-1 grow flex-col justify-between\">\n {/* \u4EA7\u54C1\u4FE1\u606F */}\n <div className=\"mb-4\">\n <Heading\n as=\"h3\"\n size={2}\n className={cn('text-info-primary mb-2 line-clamp-2 min-h-[2.4em]', classNames?.productTitle)}\n html={product.custom_name || product.name}\n />\n {product?.description && (\n <Text\n size={2}\n className={cn(\n 'text-info-secondary desktop:line-clamp-2 desktop:min-h-[2.4em] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 min-h-[2.4em] text-[14px]',\n classNames?.productDescription\n )}\n html={product.custom_description || product.description}\n />\n )}\n </div>\n\n {/* \u4EF7\u683C\u533A\u57DF */}\n <div>\n <div className={cn('mb-2', classNames?.productPrice)}>\n <div className=\"flex items-baseline gap-2\">\n {product.availableForSale ? (\n <>\n <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n {product.price}\n </Heading>\n {renderOriginalPrice\n ? renderOriginalPrice(product, { showOriginalPrice })\n : showOriginalPrice &&\n product.originalPrice && (\n <Heading\n size={2}\n className={cn('text-info-tertiary line-through', classNames?.originalPrice)}\n as=\"h6\"\n >\n {product.originalPrice}\n </Heading>\n )}\n </>\n ) : (\n <Heading size={2} className=\"text-info-tertiary\">\n {copy?.outOfStockLabel ?? 'Sold Out'}\n </Heading>\n )}\n </div>\n </div>\n\n {product?.priceLabel && product?.availableForSale && (\n <Text\n size={4}\n className={cn(\n 'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]',\n classNames?.productPriceLabel\n )}\n >\n {product.priceLabel}\n </Text>\n )}\n\n {/* \u6309\u94AE\u533A\u57DF */}\n <div className={cn('lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2', classNames?.buttonGroup)}>\n {secondaryButtonText && (\n <Button\n variant=\"secondary\"\n size=\"base\"\n className={cn(\n 'tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center w-full whitespace-nowrap',\n classNames?.secondaryButton\n )}\n onClick={() => handleButtonClick(secondaryButtonFun, 'secondary')}\n disabled={!product.availableForSale && secondaryButtonFun !== 'learnMore'}\n loading={secondaryLoading}\n data-headless-type-name=\"ActiveShelf#ProductCard\"\n data-headless-title-desc-button={`${product.custom_name || product.name}#${product.description || ''}#${secondaryButtonText}`}\n data-headless-sku={product.sku}\n >\n {secondaryButtonText}\n </Button>\n )}\n {primaryButtonText && (\n <Button\n variant=\"primary\"\n size=\"base\"\n className={cn(\n 'tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center w-full whitespace-nowrap',\n classNames?.primaryButton\n )}\n onClick={() => handleButtonClick(primaryButtonFun, 'primary')}\n disabled={!product.availableForSale && primaryButtonFun !== 'learnMore'}\n loading={primaryLoading}\n data-headless-type-name=\"ActiveShelf#ProductCard\"\n data-headless-title-desc-button={`${product.custom_name || product.name}#${product.description || ''}#${primaryButtonText}`}\n data-headless-sku={product.sku}\n >\n {primaryButtonText}\n </Button>\n )}\n </div>\n\n {/* \u5E93\u5B58\u4FE1\u606F */}\n {shouldShowStock(\n stockDisplayMode,\n stockThresholdValue,\n product?.quantityAvailable ?? 0,\n product?.totalInventory ?? 0\n ) && (\n <div className=\"mt-4 space-y-2\">\n <Progress\n value={stockPercentage}\n max={100}\n min={0}\n size=\"base\"\n variant=\"default\"\n aria-label=\"stock progress\"\n classNames={{\n root: cn('bg-[var(--progress-track-bg,rgba(0,0,0,0.2))]', classNames?.stockTrack),\n progressBar: cn('bg-brand-0 transition-all duration-300 ease-in-out', classNames?.stockBar),\n }}\n />\n <Text size={3} className=\"text-info-tertiary text-[14px]\">\n {overselling\n ? copy?.limitedStock\n : copy?.stockDisplayText?.replace(\n '{count}',\n `${product.availableForSale ? product.quantityAvailable : 0}`\n )}\n </Text>\n </div>\n )}\n </div>\n </div>\n </CardContent>\n </Card>\n )\n }\n)\n\nProductCard.displayName = 'ActiveShelf.ProductCard'\n\nexport { ProductCard }\nexport default ProductCard\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ProductCard_exports", "__export", "ProductCard", "ProductCard_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "OVERSELLING_STOCK_PERCENTAGE", "shouldShowStock", "stockDisplayMode", "stockThresholdValue", "quantityAvailable", "totalInventory", "product", "className", "showTags", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "showOriginalPrice", "renderOriginalPrice", "copy", "onProductImageClick", "ref", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "stockPercentage", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "overselling", "tag", "index"]
|
|
7
7
|
}
|
|
@@ -79,6 +79,15 @@ export interface ActiveShelfProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
79
79
|
onAddToCart?: (product: ProductCardData) => void;
|
|
80
80
|
/** 语义化类名 */
|
|
81
81
|
classNames?: Partial<Record<ActiveShelfSemanticName, string>>;
|
|
82
|
+
/**
|
|
83
|
+
* 原价区域渲染函数,用于在原价位置展示自定义内容(如 Save 金额文案)。
|
|
84
|
+
* 不传时使用默认的原价渲染(划线价)。
|
|
85
|
+
* @param product - 当前产品数据
|
|
86
|
+
* @param context - 渲染上下文(含 showOriginalPrice)
|
|
87
|
+
*/
|
|
88
|
+
renderOriginalPrice?: (product: ProductCardData, context: {
|
|
89
|
+
showOriginalPrice?: boolean;
|
|
90
|
+
}) => React.ReactNode;
|
|
82
91
|
}
|
|
83
92
|
/**
|
|
84
93
|
* ActiveShelf 复合组件类型定义
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var j=Object.create;var N=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var J=(i,o)=>{for(var r in o)N(i,r,{get:o[r],enumerable:!0})},O=(i,o,r,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of q(o))!G.call(i,n)&&n!==r&&N(i,n,{get:()=>o[n],enumerable:!(s=_(o,n))||s.enumerable});return i};var K=(i,o,r)=>(r=i!=null?j(Z(i)):{},O(o||!i||!i.__esModule?N(r,"default",{value:i,enumerable:!0}):r,i)),Q=i=>O(N({},"__esModule",{value:!0}),i);var ie={};J(ie,{default:()=>oe});module.exports=Q(ie);var t=require("react/jsx-runtime"),l=K(require("react")),E=require("../../helpers/index.js"),V=require("../../shared/Styles.js"),a=require("../../components/index.js"),R=require("swiper/react"),I=require("swiper/modules"),ae=require("swiper/css"),ne=require("swiper/css/navigation"),A=require("./ProductCard.js"),W=require("../../hooks/useExposure.js");const U="shelf",X="active_shelf",Y=({disabled:i})=>(0,t.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]",children:[(0,t.jsx)("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"currentColor",fillOpacity:i?"0.2":"0.6"}),(0,t.jsx)("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),ee=({disabled:i})=>(0,t.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]",children:[(0,t.jsx)("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"currentColor",fillOpacity:i?"0.2":"0.6"}),(0,t.jsx)("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),F=l.forwardRef(({products:i,layoutMode:o,className:r,copy:s,showTags:n,stockDisplayMode:c,stockThresholdValue:m,onLearnMore:P,onShopNow:B,onAddToCart:p,classNames:g,secondaryButtonText:y,secondaryButtonFun:f,primaryButtonText:T,primaryButtonFun:b,showOriginalPrice:v,renderOriginalPrice:w},M)=>{const C=l.useId().replace(/:/g,""),x=`swiper-button-next-custom-${C}`,L=`swiper-button-prev-custom-${C}`,[u,d]=l.useState({isBeginning:!0,isEnd:!1}),D=l.useRef(null),h=l.useCallback(()=>{const e=D.current;if(!e?.slides||e.slides.length===0)return;e.slides.forEach(k=>{k.style.height="auto"});const S=Array.from(e.slides).map(k=>k.scrollHeight),H=Math.max(...S);H>0&&e.slides.forEach(k=>{k.style.height=`${H}px`})},[]);return l.useEffect(()=>{const e=()=>{requestAnimationFrame(h)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[h]),i?.length===0?null:(0,t.jsx)("div",{ref:M,className:r,children:o==="flex"?(0,t.jsx)("div",{className:"lg-desktop:gap-4 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 laptop:gap-4 grid grid-cols-1 justify-start gap-3",children:i.map((e,S)=>(0,t.jsx)(A.ProductCard,{product:e,className:"shrink-0",showTags:n,stockDisplayMode:c,stockThresholdValue:m,onLearnMore:P,onShopNow:B,onAddToCart:p,classNames:g,secondaryButtonText:y,secondaryButtonFun:f,primaryButtonText:T,primaryButtonFun:b,showOriginalPrice:v,renderOriginalPrice:w,copy:s},e.shopify_id+"-"+e.sku||S))}):(0,t.jsxs)("div",{className:"group relative",children:[(0,t.jsx)(R.Swiper,{modules:[I.Navigation],spaceBetween:16,slidesPerView:"auto",navigation:{nextEl:`.${x}`,prevEl:`.${L}`},onSwiper:e=>{D.current=e,d({isBeginning:e.isBeginning,isEnd:e.isEnd}),setTimeout(h,100)},onReachEnd:()=>{d(e=>({...e,isEnd:!0}))},onReachBeginning:()=>{d(e=>({...e,isBeginning:!0}))},onFromEdge:()=>{d({isBeginning:!1,isEnd:!1})},className:"!overflow-visible",children:i.map((e,S)=>(0,t.jsx)(R.SwiperSlide,{className:"tablet:!w-[288px] desktop:!w-[316px] lg-desktop:!w-[404px] !w-[296px] overflow-hidden",children:(0,t.jsx)(A.ProductCard,{product:e,className:"w-full max-w-full",showTags:n,stockDisplayMode:c,stockThresholdValue:m,onLearnMore:P,onShopNow:B,onAddToCart:p,classNames:g,secondaryButtonText:y,secondaryButtonFun:f,primaryButtonText:T,primaryButtonFun:b,showOriginalPrice:v,renderOriginalPrice:w,copy:s})},e.shopify_id+"-"+e.sku||S))}),(0,t.jsx)("button",{className:`${L} tablet:block absolute left-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${u.isBeginning?"pointer-events-none opacity-0":"opacity-0 group-hover:opacity-100"}`,"aria-label":s?.previousSlideLabel,children:(0,t.jsx)(Y,{disabled:u.isBeginning})}),(0,t.jsx)("button",{className:`${x} tablet:block absolute right-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${u.isEnd?"pointer-events-none opacity-0":"opacity-0 group-hover:opacity-100"}`,"aria-label":s?.nextSlideLabel,children:(0,t.jsx)(ee,{disabled:u.isEnd})})]})})});F.displayName="ProductsList";const z=l.forwardRef(({className:i,data:o,onLearnMore:r,onShopNow:s,onAddToCart:n,classNames:c,renderOriginalPrice:m,...P},B)=>{const p=l.useRef(null);(0,W.useExposure)(p,{componentType:U,componentName:X,componentTitle:o.title,componentDescription:o.description}),l.useImperativeHandle(B,()=>p.current);const{theme:g="light",layoutMode:y="flex",showTags:f=!0,stockDisplayMode:T,stockThresholdValue:b,showOriginalPrice:v=!0,secondaryButtonText:w,primaryButtonText:M,secondaryButtonFun:C,primaryButtonFun:x,isShowTab:L=!0,copy:u}=o,d=u||{},D=o.productsTab&&o.productsTab.length>0,h=L&&D;return(0,t.jsxs)("div",{ref:p,className:(0,E.cn)("w-full",{"aiui-dark":g==="dark"},i,c?.root),style:{"--progress-track-bg":g==="dark"?"rgba(255, 255, 255, 0.2)":"rgba(0, 0, 0, 0.2)"},...P,children:[o.title&&(0,t.jsx)(a.Heading,{as:"h2",html:o.title,size:4,className:(0,E.cn)("text-info-primary mb-4",c?.title)}),o.description&&(0,t.jsx)(a.Text,{size:3,as:"p",html:o.description,className:(0,E.cn)("text-info-primary mb-6",c?.description)}),(0,t.jsxs)(a.Tabs,{defaultValue:o.productsTab?.[0]?.id,className:"w-full",children:[h&&(0,t.jsx)(a.TabsList,{className:"mb-6",children:o.productsTab?.map(e=>(0,t.jsx)(a.TabsTrigger,{value:e.id,children:e.tab},"tab-"+e.id))}),h?o.productsTab?.map(e=>(0,t.jsx)(a.TabsContent,{value:e.id,children:(0,t.jsx)(F,{products:e.data,layoutMode:y,copy:d,showTags:f,stockDisplayMode:T,stockThresholdValue:b,onLearnMore:r,onShopNow:s,onAddToCart:n,classNames:c,secondaryButtonText:w,secondaryButtonFun:C,primaryButtonText:M,primaryButtonFun:x,showOriginalPrice:v,renderOriginalPrice:m})},"tab-content-"+e.id)):(0,t.jsx)(F,{products:o.productsCard,layoutMode:y,copy:d,showTags:f,stockDisplayMode:T,stockThresholdValue:b,onLearnMore:r,onShopNow:s,onAddToCart:n,classNames:c,secondaryButtonText:w,secondaryButtonFun:C,primaryButtonText:M,primaryButtonFun:x,showOriginalPrice:v,renderOriginalPrice:m})]})]})});z.displayName="ActiveShelf";const $=z;$.ProductCard=A.ProductCard;const te=(0,V.withLayout)($);var oe=te;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ActiveShelf/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Text, Heading, Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/index.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\n// Import Swiper styles\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport {\n ProductCard,\n type ProductCardData,\n type ActiveShelfSemanticName,\n type StockDisplayMode,\n} from './ProductCard.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'shelf'\nconst componentName = 'active_shelf'\n\n/**\n * \u7EC4\u4EF6\u5E03\u5C40\u6A21\u5F0F\n */\nexport type ActiveShelfLayoutMode = 'flex' | 'horizontal'\n\n/**\n * Code Channel \u914D\u7F6E - \u6298\u6263\u524D\u7F00\n */\nexport type CodeChannelConfig = string\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]\"\n >\n <path\n d=\"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]\"\n >\n <path\n d=\"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n/**\n * \u4EA7\u54C1\u5206\u7EC4Tab\u6570\u636E\u63A5\u53E3\n */\nexport interface ProductTab {\n /** Tab ID */\n id: string\n /** Tab \u6807\u9898 */\n tab: string\n /** \u8BE5\u5206\u7EC4\u4E0B\u7684\u4EA7\u54C1\u6570\u636E */\n data: ProductCardData[]\n}\n\n/**\n * ActiveShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface ActiveShelfData {\n theme?: 'light' | 'dark'\n /** \u7EC4\u4EF6\u6807\u9898 */\n title?: string\n /** \u7EC4\u4EF6\u63CF\u8FF0 */\n description?: string\n /** \u5206\u7EC4\u4EA7\u54C1Tab\u5217\u8868 */\n productsTab?: ProductTab[]\n /** \u662F\u5426\u663E\u793A Tab\uFF08\u9ED8\u8BA4\uFF1Atrue\uFF09 */\n isShowTab?: boolean\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n secondaryButtonFun: ButtonFunctionType\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n primaryButtonFun: ButtonFunctionType\n /** \u5E03\u5C40\u6A21\u5F0F\uFF1A\u7F51\u683C\u5E03\u5C40\u6216\u6A2A\u5411\u6ED1\u52A8 */\n layoutMode?: ActiveShelfLayoutMode\n /** Code Channel \u914D\u7F6E - \u6298\u6263\u524D\u7F00 */\n codeChannel?: CodeChannelConfig\n /** \u662F\u5426\u5C55\u793A\u4F1A\u5458\u4EF7\u683C */\n showMemberPrice?: boolean\n /** \u662F\u5426\u5C55\u793A\u6298\u6263\u6807\u7B7E */\n showDiscount?: boolean\n /** \u662F\u5426\u5C55\u793A\u6807\u7B7E\u7CFB\u7EDF */\n showTags?: boolean\n /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F */\n stockDisplayMode?: StockDisplayMode\n /** \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09 */\n stockThresholdValue?: number\n /**\n * \u5E93\u5B58\u6587\u672C\u6A21\u677F\uFF0C\u652F\u6301 {count} \u5360\u4F4D\u7B26\n */\n stockDisplayText?: string\n /** \u662F\u5426\u5C55\u793A\u539F\u4EF7\uFF08\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n showOriginalPrice?: boolean\n /** \u6587\u6848\u914D\u7F6E */\n copy?: CopyConfig\n /**\n * \u4EA7\u54C1\u5217\u8868\uFF08\u5F53\u4E0D\u4F7F\u7528 Tab \u5206\u7EC4\u65F6\u53EF\u76F4\u63A5\u4F20\u5165\u4EA7\u54C1\u5217\u8868\uFF09\n */\n productsCard: ProductCardData[]\n}\n\nexport interface ActiveShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: ActiveShelfData\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onShopNow?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddToCart?: (product: ProductCardData) => void\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<ActiveShelfSemanticName, string>>\n}\n\n/**\n * ActiveShelf \u590D\u5408\u7EC4\u4EF6\u7C7B\u578B\u5B9A\u4E49\n */\nexport interface ActiveShelfComponent extends React.ForwardRefExoticComponent<\n ActiveShelfProps & React.RefAttributes<HTMLDivElement>\n> {\n /** \u72EC\u7ACB\u7684 ProductCard \u7EC4\u4EF6 */\n ProductCard: typeof ProductCard\n}\n\n/**\n * \u4EA7\u54C1\u5217\u8868\u7EC4\u4EF6 Props\n */\ninterface ProductsListProps {\n products: ProductCardData[]\n layoutMode: ActiveShelfLayoutMode\n className?: string\n copy?: CopyConfig\n showTags?: boolean\n stockDisplayMode?: StockDisplayMode\n stockThresholdValue?: number\n onLearnMore?: (product: ProductCardData) => void\n onShopNow?: (product: ProductCardData) => void\n onAddToCart?: (product: ProductCardData) => void\n classNames?: Partial<Record<ActiveShelfSemanticName, string>>\n secondaryButtonText?: string\n secondaryButtonFun?: ButtonFunctionType\n primaryButtonText?: string\n primaryButtonFun?: ButtonFunctionType\n showOriginalPrice?: boolean\n}\n\n/**\n * \u4EA7\u54C1\u5217\u8868\u7EC4\u4EF6 - \u652F\u6301\u7F51\u683C\u548C\u6A2A\u5411\u6ED1\u52A8\u4E24\u79CD\u5E03\u5C40\n */\nconst ProductsList = React.forwardRef<HTMLDivElement, ProductsListProps>(\n (\n {\n products,\n layoutMode,\n className,\n copy,\n showTags,\n stockDisplayMode,\n stockThresholdValue,\n onLearnMore,\n onShopNow,\n onAddToCart,\n classNames,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n showOriginalPrice,\n },\n ref\n ) => {\n // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n const id = React.useId().replace(/:/g, '')\n // \u9884\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE\u9009\u62E9\u5668\uFF0C\u907F\u514D\u591A\u6B21\u62FC\u63A5\n const nextButtonClass = `swiper-button-next-custom-${id}`\n const prevButtonClass = `swiper-button-prev-custom-${id}`\n\n // Swiper \u5BFC\u822A\u72B6\u6001\n const [swiperState, setSwiperState] = React.useState({\n isBeginning: true,\n isEnd: false,\n })\n\n // Swiper \u5B9E\u4F8B\u5F15\u7528\n const swiperRef = React.useRef<any>(null)\n\n // \u8BA1\u7B97\u5E76\u8BBE\u7F6E\u6240\u6709 slide \u4E3A\u6700\u9AD8\u9AD8\u5EA6\n const equalizeSlideHeights = React.useCallback(() => {\n const swiper = swiperRef.current\n if (!swiper?.slides || swiper.slides.length === 0) return\n\n // \u5148\u91CD\u7F6E\u6240\u6709 slide \u9AD8\u5EA6\u4EE5\u83B7\u53D6\u771F\u5B9E\u5185\u5BB9\u9AD8\u5EA6\n swiper.slides.forEach((slide: HTMLElement) => {\n slide.style.height = 'auto'\n })\n\n // \u8BA1\u7B97\u6700\u5927\u9AD8\u5EA6\n // @ts-ignore\n const heights = Array.from(swiper.slides).map((slide: HTMLElement) => slide.scrollHeight)\n const maxHeight = Math.max(...heights)\n\n // \u8BBE\u7F6E\u6240\u6709 slide \u4E3A\u6700\u5927\u9AD8\u5EA6\n if (maxHeight > 0) {\n swiper.slides.forEach((slide: HTMLElement) => {\n slide.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n // \u76D1\u542C\u7A97\u53E3 resize \u91CD\u65B0\u8BA1\u7B97\u9AD8\u5EA6\n React.useEffect(() => {\n const handleResize = () => {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u66F4\u65B0\u5B8C\u6210\n requestAnimationFrame(equalizeSlideHeights)\n }\n\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [equalizeSlideHeights])\n\n if (products?.length === 0) {\n return null\n }\n\n return (\n <div ref={ref} className={className}>\n {layoutMode === 'flex' ? (\n /* \u7F51\u683C\u5E03\u5C40 */\n <div className=\"lg-desktop:gap-4 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 laptop:gap-4 grid grid-cols-1 justify-start gap-3\">\n {products.map((product, index) => (\n <ProductCard\n key={product.shopify_id + '-' + product.sku || index}\n product={product}\n className=\"shrink-0\"\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n copy={copy}\n />\n ))}\n </div>\n ) : (\n /* Swiper \u6A2A\u5411\u6ED1\u52A8\u5E03\u5C40 */\n <div className=\"group relative\">\n <Swiper\n modules={[Navigation]}\n spaceBetween={16}\n slidesPerView=\"auto\"\n navigation={{\n nextEl: `.${nextButtonClass}`,\n prevEl: `.${prevButtonClass}`,\n }}\n onSwiper={swiper => {\n swiperRef.current = swiper\n setSwiperState({\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd,\n })\n // \u5EF6\u8FDF\u6267\u884C\u4EE5\u786E\u4FDD\u5185\u5BB9\u6E32\u67D3\u5B8C\u6210\n setTimeout(equalizeSlideHeights, 100)\n }}\n onReachEnd={() => {\n setSwiperState(prev => ({ ...prev, isEnd: true }))\n }}\n onReachBeginning={() => {\n setSwiperState(prev => ({ ...prev, isBeginning: true }))\n }}\n onFromEdge={() => {\n setSwiperState({ isBeginning: false, isEnd: false })\n }}\n className=\"!overflow-visible\"\n >\n {products.map((product, index) => (\n <SwiperSlide\n key={product.shopify_id + '-' + product.sku || index}\n className=\"tablet:!w-[288px] desktop:!w-[316px] lg-desktop:!w-[404px] !w-[296px] overflow-hidden\"\n >\n <ProductCard\n product={product}\n className=\"w-full max-w-full\"\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n copy={copy}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE - \u9ED8\u8BA4\u9690\u85CF\uFF0Chover \u65F6\u663E\u793A\uFF0Cdisabled \u65F6\u9690\u85CF */}\n <button\n className={`${prevButtonClass} tablet:block absolute left-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-0 group-hover:opacity-100'}`}\n aria-label={copy?.previousSlideLabel}\n >\n <PrevIcon disabled={swiperState.isBeginning} />\n </button>\n <button\n className={`${nextButtonClass} tablet:block absolute right-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-0 group-hover:opacity-100'}`}\n aria-label={copy?.nextSlideLabel}\n >\n <NextIcon disabled={swiperState.isEnd} />\n </button>\n </div>\n )}\n </div>\n )\n }\n)\n\nProductsList.displayName = 'ProductsList'\n\n/**\n * ActiveShelf - \u6D3B\u52A8\u8D27\u67B6\n *\n * @description \u80FD\u591F\u5B9E\u65F6\u663E\u793A\u5546\u54C1\u5E93\u5B58\u4FE1\u606F\u548C\u4F1A\u5458\u4EF7\u7684\u8D27\u67B6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C\u591A\u79CD\u914D\u7F6E\u9009\u9879\n */\nconst ActiveShelf = React.forwardRef<HTMLDivElement, ActiveShelfProps>(\n ({ className, data, onLearnMore, onShopNow, onAddToCart, classNames, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: data.title,\n componentDescription: data.description,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // \u4ECE data \u4E2D\u89E3\u6784\u914D\u7F6E\u9879\uFF0C\u5E76\u8BBE\u7F6E\u9ED8\u8BA4\u503C\n const {\n theme = 'light',\n layoutMode = 'flex',\n showTags = true,\n stockDisplayMode,\n stockThresholdValue,\n showOriginalPrice = true,\n secondaryButtonText,\n primaryButtonText,\n secondaryButtonFun,\n primaryButtonFun,\n isShowTab = true,\n copy,\n } = data\n\n // \u6784\u5EFA copy \u914D\u7F6E\uFF0C\u4F7F\u7528\u4F20\u5165\u7684 copy \u914D\u7F6E\n const finalCopy: CopyConfig = copy || {}\n\n // \u83B7\u53D6\u8981\u663E\u793A\u7684\u4EA7\u54C1\u6570\u636E\n const hasTabData = data.productsTab && data.productsTab.length > 0\n const shouldShowTab = isShowTab && hasTabData\n\n return (\n <div\n ref={boxRef}\n className={cn(\n 'w-full',\n {\n 'aiui-dark': theme === 'dark',\n },\n className,\n classNames?.root\n )}\n style={\n {\n '--progress-track-bg': theme === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)',\n } as React.CSSProperties\n }\n {...props}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {data.title && (\n <Heading as=\"h2\" html={data.title} size={4} className={cn('text-info-primary mb-4', classNames?.title)} />\n )}\n {data.description && (\n <Text\n size={3}\n as=\"p\"\n html={data.description}\n className={cn('text-info-primary mb-6', classNames?.description)}\n />\n )}\n\n {/* \u4EA7\u54C1\u5C55\u793A\u533A\u57DF */}\n\n <Tabs defaultValue={data.productsTab?.[0]?.id} className=\"w-full\">\n {shouldShowTab && (\n <TabsList className=\"mb-6\">\n {data.productsTab?.map(tab => (\n <TabsTrigger key={'tab-' + tab.id} value={tab.id}>\n {tab.tab}\n </TabsTrigger>\n ))}\n </TabsList>\n )}\n {shouldShowTab ? (\n data.productsTab?.map(tab => (\n <TabsContent key={'tab-content-' + tab.id} value={tab.id}>\n <ProductsList\n products={tab.data}\n layoutMode={layoutMode}\n copy={finalCopy}\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n />\n </TabsContent>\n ))\n ) : (\n <ProductsList\n products={data.productsCard}\n layoutMode={layoutMode}\n copy={finalCopy}\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n />\n )}\n </Tabs>\n </div>\n )\n }\n)\n\nActiveShelf.displayName = 'ActiveShelf'\n\n// \u521B\u5EFA\u590D\u5408\u7EC4\u4EF6\nconst ActiveShelfWithProductCard = ActiveShelf as ActiveShelfComponent\nActiveShelfWithProductCard.ProductCard = ProductCard\n\nconst ActiveShelfWrapped = withLayout(ActiveShelfWithProductCard)\n\nexport default ActiveShelfWrapped\nexport type { StockDisplayMode, ActiveShelfSemanticName, ProductCardData }\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,KAAA,eAAAC,EAAAH,IAoCE,IAAAI,EAAA,6BAlCFC,EAAuB,oBACvBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwE,qCAExEC,EAAoC,wBACpCC,EAA2B,0BAG3BC,GAAO,sBACPC,GAAO,iCAEPC,EAKO,4BACPC,EAA4B,sCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,eAYhBC,EAAW,CAAC,CAAE,SAAAC,CAAS,OAC3B,QAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,2EAEV,oBAAC,QACC,EAAE,2GACF,KAAK,eACL,YAAaA,EAAW,MAAQ,MAClC,KACA,OAAC,QAAK,EAAE,qBAAqB,OAAO,QAAQ,YAAY,IAAI,cAAc,QAAQ,eAAe,QAAQ,GAC3G,EAGIC,
|
|
6
|
-
"names": ["ActiveShelf_exports", "__export", "ActiveShelf_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_Styles", "import_components", "import_react", "import_modules", "import_css", "import_navigation", "import_ProductCard", "import_useExposure", "componentType", "componentName", "PrevIcon", "disabled", "NextIcon", "ProductsList", "products", "layoutMode", "className", "copy", "showTags", "stockDisplayMode", "stockThresholdValue", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "showOriginalPrice", "ref", "id", "nextButtonClass", "prevButtonClass", "swiperState", "setSwiperState", "swiperRef", "equalizeSlideHeights", "swiper", "slide", "heights", "maxHeight", "handleResize", "product", "index", "prev", "ActiveShelf", "data", "props", "boxRef", "theme", "isShowTab", "finalCopy", "hasTabData", "shouldShowTab", "tab", "ActiveShelfWithProductCard", "ActiveShelfWrapped"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Text, Heading, Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/index.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\n// Import Swiper styles\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport {\n ProductCard,\n type ProductCardData,\n type ActiveShelfSemanticName,\n type StockDisplayMode,\n} from './ProductCard.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'shelf'\nconst componentName = 'active_shelf'\n\n/**\n * \u7EC4\u4EF6\u5E03\u5C40\u6A21\u5F0F\n */\nexport type ActiveShelfLayoutMode = 'flex' | 'horizontal'\n\n/**\n * Code Channel \u914D\u7F6E - \u6298\u6263\u524D\u7F00\n */\nexport type CodeChannelConfig = string\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]\"\n >\n <path\n d=\"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]\"\n >\n <path\n d=\"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n/**\n * \u4EA7\u54C1\u5206\u7EC4Tab\u6570\u636E\u63A5\u53E3\n */\nexport interface ProductTab {\n /** Tab ID */\n id: string\n /** Tab \u6807\u9898 */\n tab: string\n /** \u8BE5\u5206\u7EC4\u4E0B\u7684\u4EA7\u54C1\u6570\u636E */\n data: ProductCardData[]\n}\n\n/**\n * ActiveShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface ActiveShelfData {\n theme?: 'light' | 'dark'\n /** \u7EC4\u4EF6\u6807\u9898 */\n title?: string\n /** \u7EC4\u4EF6\u63CF\u8FF0 */\n description?: string\n /** \u5206\u7EC4\u4EA7\u54C1Tab\u5217\u8868 */\n productsTab?: ProductTab[]\n /** \u662F\u5426\u663E\u793A Tab\uFF08\u9ED8\u8BA4\uFF1Atrue\uFF09 */\n isShowTab?: boolean\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n secondaryButtonFun: ButtonFunctionType\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n primaryButtonFun: ButtonFunctionType\n /** \u5E03\u5C40\u6A21\u5F0F\uFF1A\u7F51\u683C\u5E03\u5C40\u6216\u6A2A\u5411\u6ED1\u52A8 */\n layoutMode?: ActiveShelfLayoutMode\n /** Code Channel \u914D\u7F6E - \u6298\u6263\u524D\u7F00 */\n codeChannel?: CodeChannelConfig\n /** \u662F\u5426\u5C55\u793A\u4F1A\u5458\u4EF7\u683C */\n showMemberPrice?: boolean\n /** \u662F\u5426\u5C55\u793A\u6298\u6263\u6807\u7B7E */\n showDiscount?: boolean\n /** \u662F\u5426\u5C55\u793A\u6807\u7B7E\u7CFB\u7EDF */\n showTags?: boolean\n /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F */\n stockDisplayMode?: StockDisplayMode\n /** \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09 */\n stockThresholdValue?: number\n /**\n * \u5E93\u5B58\u6587\u672C\u6A21\u677F\uFF0C\u652F\u6301 {count} \u5360\u4F4D\u7B26\n */\n stockDisplayText?: string\n /** \u662F\u5426\u5C55\u793A\u539F\u4EF7\uFF08\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n showOriginalPrice?: boolean\n /** \u6587\u6848\u914D\u7F6E */\n copy?: CopyConfig\n /**\n * \u4EA7\u54C1\u5217\u8868\uFF08\u5F53\u4E0D\u4F7F\u7528 Tab \u5206\u7EC4\u65F6\u53EF\u76F4\u63A5\u4F20\u5165\u4EA7\u54C1\u5217\u8868\uFF09\n */\n productsCard: ProductCardData[]\n}\n\nexport interface ActiveShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: ActiveShelfData\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onShopNow?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddToCart?: (product: ProductCardData) => void\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<ActiveShelfSemanticName, string>>\n /**\n * \u539F\u4EF7\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5728\u539F\u4EF7\u4F4D\u7F6E\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF08\u5982 Save \u91D1\u989D\u6587\u6848\uFF09\u3002\n * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u539F\u4EF7\u6E32\u67D3\uFF08\u5212\u7EBF\u4EF7\uFF09\u3002\n * @param product - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param context - \u6E32\u67D3\u4E0A\u4E0B\u6587\uFF08\u542B showOriginalPrice\uFF09\n */\n renderOriginalPrice?: (product: ProductCardData, context: { showOriginalPrice?: boolean }) => React.ReactNode\n}\n\n/**\n * ActiveShelf \u590D\u5408\u7EC4\u4EF6\u7C7B\u578B\u5B9A\u4E49\n */\nexport interface ActiveShelfComponent extends React.ForwardRefExoticComponent<\n ActiveShelfProps & React.RefAttributes<HTMLDivElement>\n> {\n /** \u72EC\u7ACB\u7684 ProductCard \u7EC4\u4EF6 */\n ProductCard: typeof ProductCard\n}\n\n/**\n * \u4EA7\u54C1\u5217\u8868\u7EC4\u4EF6 Props\n */\ninterface ProductsListProps {\n products: ProductCardData[]\n layoutMode: ActiveShelfLayoutMode\n className?: string\n copy?: CopyConfig\n showTags?: boolean\n stockDisplayMode?: StockDisplayMode\n stockThresholdValue?: number\n onLearnMore?: (product: ProductCardData) => void\n onShopNow?: (product: ProductCardData) => void\n onAddToCart?: (product: ProductCardData) => void\n classNames?: Partial<Record<ActiveShelfSemanticName, string>>\n secondaryButtonText?: string\n secondaryButtonFun?: ButtonFunctionType\n primaryButtonText?: string\n primaryButtonFun?: ButtonFunctionType\n showOriginalPrice?: boolean\n renderOriginalPrice?: (product: ProductCardData, context: { showOriginalPrice?: boolean }) => React.ReactNode\n}\n\n/**\n * \u4EA7\u54C1\u5217\u8868\u7EC4\u4EF6 - \u652F\u6301\u7F51\u683C\u548C\u6A2A\u5411\u6ED1\u52A8\u4E24\u79CD\u5E03\u5C40\n */\nconst ProductsList = React.forwardRef<HTMLDivElement, ProductsListProps>(\n (\n {\n products,\n layoutMode,\n className,\n copy,\n showTags,\n stockDisplayMode,\n stockThresholdValue,\n onLearnMore,\n onShopNow,\n onAddToCart,\n classNames,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n showOriginalPrice,\n renderOriginalPrice,\n },\n ref\n ) => {\n // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n const id = React.useId().replace(/:/g, '')\n // \u9884\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE\u9009\u62E9\u5668\uFF0C\u907F\u514D\u591A\u6B21\u62FC\u63A5\n const nextButtonClass = `swiper-button-next-custom-${id}`\n const prevButtonClass = `swiper-button-prev-custom-${id}`\n\n // Swiper \u5BFC\u822A\u72B6\u6001\n const [swiperState, setSwiperState] = React.useState({\n isBeginning: true,\n isEnd: false,\n })\n\n // Swiper \u5B9E\u4F8B\u5F15\u7528\n const swiperRef = React.useRef<any>(null)\n\n // \u8BA1\u7B97\u5E76\u8BBE\u7F6E\u6240\u6709 slide \u4E3A\u6700\u9AD8\u9AD8\u5EA6\n const equalizeSlideHeights = React.useCallback(() => {\n const swiper = swiperRef.current\n if (!swiper?.slides || swiper.slides.length === 0) return\n\n // \u5148\u91CD\u7F6E\u6240\u6709 slide \u9AD8\u5EA6\u4EE5\u83B7\u53D6\u771F\u5B9E\u5185\u5BB9\u9AD8\u5EA6\n swiper.slides.forEach((slide: HTMLElement) => {\n slide.style.height = 'auto'\n })\n\n // \u8BA1\u7B97\u6700\u5927\u9AD8\u5EA6\n // @ts-ignore\n const heights = Array.from(swiper.slides).map((slide: HTMLElement) => slide.scrollHeight)\n const maxHeight = Math.max(...heights)\n\n // \u8BBE\u7F6E\u6240\u6709 slide \u4E3A\u6700\u5927\u9AD8\u5EA6\n if (maxHeight > 0) {\n swiper.slides.forEach((slide: HTMLElement) => {\n slide.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n // \u76D1\u542C\u7A97\u53E3 resize \u91CD\u65B0\u8BA1\u7B97\u9AD8\u5EA6\n React.useEffect(() => {\n const handleResize = () => {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u66F4\u65B0\u5B8C\u6210\n requestAnimationFrame(equalizeSlideHeights)\n }\n\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [equalizeSlideHeights])\n\n if (products?.length === 0) {\n return null\n }\n\n return (\n <div ref={ref} className={className}>\n {layoutMode === 'flex' ? (\n /* \u7F51\u683C\u5E03\u5C40 */\n <div className=\"lg-desktop:gap-4 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 laptop:gap-4 grid grid-cols-1 justify-start gap-3\">\n {products.map((product, index) => (\n <ProductCard\n key={product.shopify_id + '-' + product.sku || index}\n product={product}\n className=\"shrink-0\"\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n renderOriginalPrice={renderOriginalPrice}\n copy={copy}\n />\n ))}\n </div>\n ) : (\n /* Swiper \u6A2A\u5411\u6ED1\u52A8\u5E03\u5C40 */\n <div className=\"group relative\">\n <Swiper\n modules={[Navigation]}\n spaceBetween={16}\n slidesPerView=\"auto\"\n navigation={{\n nextEl: `.${nextButtonClass}`,\n prevEl: `.${prevButtonClass}`,\n }}\n onSwiper={swiper => {\n swiperRef.current = swiper\n setSwiperState({\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd,\n })\n // \u5EF6\u8FDF\u6267\u884C\u4EE5\u786E\u4FDD\u5185\u5BB9\u6E32\u67D3\u5B8C\u6210\n setTimeout(equalizeSlideHeights, 100)\n }}\n onReachEnd={() => {\n setSwiperState(prev => ({ ...prev, isEnd: true }))\n }}\n onReachBeginning={() => {\n setSwiperState(prev => ({ ...prev, isBeginning: true }))\n }}\n onFromEdge={() => {\n setSwiperState({ isBeginning: false, isEnd: false })\n }}\n className=\"!overflow-visible\"\n >\n {products.map((product, index) => (\n <SwiperSlide\n key={product.shopify_id + '-' + product.sku || index}\n className=\"tablet:!w-[288px] desktop:!w-[316px] lg-desktop:!w-[404px] !w-[296px] overflow-hidden\"\n >\n <ProductCard\n product={product}\n className=\"w-full max-w-full\"\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n renderOriginalPrice={renderOriginalPrice}\n copy={copy}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE - \u9ED8\u8BA4\u9690\u85CF\uFF0Chover \u65F6\u663E\u793A\uFF0Cdisabled \u65F6\u9690\u85CF */}\n <button\n className={`${prevButtonClass} tablet:block absolute left-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-0 group-hover:opacity-100'}`}\n aria-label={copy?.previousSlideLabel}\n >\n <PrevIcon disabled={swiperState.isBeginning} />\n </button>\n <button\n className={`${nextButtonClass} tablet:block absolute right-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-0 group-hover:opacity-100'}`}\n aria-label={copy?.nextSlideLabel}\n >\n <NextIcon disabled={swiperState.isEnd} />\n </button>\n </div>\n )}\n </div>\n )\n }\n)\n\nProductsList.displayName = 'ProductsList'\n\n/**\n * ActiveShelf - \u6D3B\u52A8\u8D27\u67B6\n *\n * @description \u80FD\u591F\u5B9E\u65F6\u663E\u793A\u5546\u54C1\u5E93\u5B58\u4FE1\u606F\u548C\u4F1A\u5458\u4EF7\u7684\u8D27\u67B6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C\u591A\u79CD\u914D\u7F6E\u9009\u9879\n */\nconst ActiveShelf = React.forwardRef<HTMLDivElement, ActiveShelfProps>(\n ({ className, data, onLearnMore, onShopNow, onAddToCart, classNames, renderOriginalPrice, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: data.title,\n componentDescription: data.description,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // \u4ECE data \u4E2D\u89E3\u6784\u914D\u7F6E\u9879\uFF0C\u5E76\u8BBE\u7F6E\u9ED8\u8BA4\u503C\n const {\n theme = 'light',\n layoutMode = 'flex',\n showTags = true,\n stockDisplayMode,\n stockThresholdValue,\n showOriginalPrice = true,\n secondaryButtonText,\n primaryButtonText,\n secondaryButtonFun,\n primaryButtonFun,\n isShowTab = true,\n copy,\n } = data\n\n // \u6784\u5EFA copy \u914D\u7F6E\uFF0C\u4F7F\u7528\u4F20\u5165\u7684 copy \u914D\u7F6E\n const finalCopy: CopyConfig = copy || {}\n\n // \u83B7\u53D6\u8981\u663E\u793A\u7684\u4EA7\u54C1\u6570\u636E\n const hasTabData = data.productsTab && data.productsTab.length > 0\n const shouldShowTab = isShowTab && hasTabData\n\n return (\n <div\n ref={boxRef}\n className={cn(\n 'w-full',\n {\n 'aiui-dark': theme === 'dark',\n },\n className,\n classNames?.root\n )}\n style={\n {\n '--progress-track-bg': theme === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)',\n } as React.CSSProperties\n }\n {...props}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {data.title && (\n <Heading as=\"h2\" html={data.title} size={4} className={cn('text-info-primary mb-4', classNames?.title)} />\n )}\n {data.description && (\n <Text\n size={3}\n as=\"p\"\n html={data.description}\n className={cn('text-info-primary mb-6', classNames?.description)}\n />\n )}\n\n {/* \u4EA7\u54C1\u5C55\u793A\u533A\u57DF */}\n\n <Tabs defaultValue={data.productsTab?.[0]?.id} className=\"w-full\">\n {shouldShowTab && (\n <TabsList className=\"mb-6\">\n {data.productsTab?.map(tab => (\n <TabsTrigger key={'tab-' + tab.id} value={tab.id}>\n {tab.tab}\n </TabsTrigger>\n ))}\n </TabsList>\n )}\n {shouldShowTab ? (\n data.productsTab?.map(tab => (\n <TabsContent key={'tab-content-' + tab.id} value={tab.id}>\n <ProductsList\n products={tab.data}\n layoutMode={layoutMode}\n copy={finalCopy}\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n renderOriginalPrice={renderOriginalPrice}\n />\n </TabsContent>\n ))\n ) : (\n <ProductsList\n products={data.productsCard}\n layoutMode={layoutMode}\n copy={finalCopy}\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n renderOriginalPrice={renderOriginalPrice}\n />\n )}\n </Tabs>\n </div>\n )\n }\n)\n\nActiveShelf.displayName = 'ActiveShelf'\n\n// \u521B\u5EFA\u590D\u5408\u7EC4\u4EF6\nconst ActiveShelfWithProductCard = ActiveShelf as ActiveShelfComponent\nActiveShelfWithProductCard.ProductCard = ProductCard\n\nconst ActiveShelfWrapped = withLayout(ActiveShelfWithProductCard)\n\nexport default ActiveShelfWrapped\nexport type { StockDisplayMode, ActiveShelfSemanticName, ProductCardData }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ActiveShelf_exports", "__export", "ActiveShelf_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_Styles", "import_components", "import_react", "import_modules", "import_css", "import_navigation", "import_ProductCard", "import_useExposure", "componentType", "componentName", "PrevIcon", "disabled", "NextIcon", "ProductsList", "products", "layoutMode", "className", "copy", "showTags", "stockDisplayMode", "stockThresholdValue", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "showOriginalPrice", "renderOriginalPrice", "ref", "id", "nextButtonClass", "prevButtonClass", "swiperState", "setSwiperState", "swiperRef", "equalizeSlideHeights", "swiper", "slide", "heights", "maxHeight", "handleResize", "product", "index", "prev", "ActiveShelf", "data", "props", "boxRef", "theme", "isShowTab", "finalCopy", "hasTabData", "shouldShowTab", "tab", "ActiveShelfWithProductCard", "ActiveShelfWrapped"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var C=Object.create;var p=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var a in t)p(e,a,{get:t[a],enumerable:!0})},
|
|
1
|
+
"use strict";"use client";var C=Object.create;var p=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var a in t)p(e,a,{get:t[a],enumerable:!0})},w=(e,t,a,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of V(t))!I.call(e,s)&&s!==a&&p(e,s,{get:()=>t[s],enumerable:!(c=P(t,s))||c.enumerable});return e};var L=(e,t,a)=>(a=e!=null?C(z(e)):{},w(t||!e||!e.__esModule?p(a,"default",{value:e,enumerable:!0}):a,e)),E=e=>w(p({},"__esModule",{value:!0}),e);var R={};B(R,{default:()=>M});module.exports=E(R);var i=require("react/jsx-runtime"),v=L(require("react")),d=require("../../helpers/index.js"),l=require("../../components/index.js"),f=require("class-variance-authority"),h=require("swiper/react"),y=require("../../shared/Styles.js");const j=(0,f.cva)("rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3",{variants:{state:{"active-light":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","active-dark":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","inactive-light":"bg-[#EAEAEC]","inactive-dark":"bg-[#1E2024]"},size:{small:"laptop:h-[160px] h-[120px]",large:"laptop:h-[240px] h-[200px]"}},defaultVariants:{state:"inactive-light",size:"small"}}),u=(0,f.cva)("font-bold leading-[1.2]",{variants:{state:{"active-light":"text-white","active-dark":"text-white","inactive-light":"text-[#080A0F]","inactive-dark":"text-white"}},defaultVariants:{state:"inactive-light"}}),g=v.memo(({item:e,theme:t="light",className:a,size:c})=>{const s=e.isActive||!1,o=`${s?"active":"inactive"}-${t}`;return(0,i.jsx)("div",{className:(0,d.cn)(j({state:o,size:c}),a),"data-ui-component-id":"ActivityScheduleCard",children:(0,i.jsxs)(l.Link,{asChild:!e?.link,href:e?.link,className:"size-full no-underline hover:text-current",children:[(s?e.activeIcon:e.inactiveIcon)&&(0,i.jsx)("div",{className:"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]",children:(0,i.jsx)(l.Picture,{source:s?e.activeIcon.url:e.inactiveIcon.url,alt:s?e.activeIcon.alt:e.inactiveIcon.alt,className:"aspect-square"})}),(0,i.jsxs)("div",{className:"relative z-20 flex h-full flex-col justify-between",children:[(0,i.jsx)(l.Heading,{as:"h3",size:3,html:e.title,className:(0,d.cn)(u({state:o}))}),(0,i.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,i.jsx)("div",{className:"flex flex-col justify-end overflow-hidden",children:(0,i.jsx)(l.Heading,{as:"h4",size:2,html:e.subtitle,className:(0,d.cn)(" line-clamp-2",u({state:o}))})}),c==="large"&&e.description&&(0,i.jsx)(l.Text,{html:e.description,className:(0,d.cn)("lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]",u({state:o}))})]})]})]})})});g.displayName="ActivityScheduleCard";const x=v.forwardRef(({classNames:e={},data:t,...a},c)=>{const s=t.theme||"light",o=t.size||"small",r=v.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),k=v.useMemo(()=>{const n=N=>{switch(N){case"mobile":return{slidesPerView:1.17,spaceBetween:12};case"tablet":return r===2?{slidesPerView:2,spaceBetween:12}:{slidesPerView:2.4,spaceBetween:12};case"laptop":return r===2?{}:r===4?{slidesPerView:3.2,spaceBetween:16}:{slidesPerView:r,spaceBetween:16};case"desktop":return r===2?{slidesPerView:2,spaceBetween:16}:{slidesPerView:r,spaceBetween:16}}},m=n("mobile"),S=n("tablet"),b=n("laptop"),A=n("desktop");return{0:m,768:S,1024:b,1440:A}},[r]);return(0,i.jsx)(l.Container,{ref:c,className:(0,d.cn)(e?.root),childClassName:"overflow-hidden","data-ui-component-id":"ActivitySchedule",...a,children:(0,i.jsx)(h.Swiper,{breakpoints:k,className:"w-full !overflow-visible",children:t.scheduleList.map((n,m)=>(0,i.jsx)(h.SwiperSlide,{children:(0,i.jsx)(g,{item:n,theme:s,size:o,className:e?.card})},"activityScheduleCardItem"+m))})})});x.displayName="ActivitySchedule";var M=(0,y.withLayout)(x);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ActivitySchedule/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Heading, Container, Link } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { ActivityScheduleProps, ActivityScheduleItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { withLayout } from '../../shared/Styles.js'\n\n/**\n * Card style variants for activity schedule\n */\nconst activityCardVariants = cva(\n 'rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3',\n {\n variants: {\n state: {\n // Active state - gradient background\n 'active-light': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n 'active-dark': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n // Inactive state - solid background\n 'inactive-light': 'bg-[#EAEAEC]',\n 'inactive-dark': 'bg-[#1E2024]',\n },\n size: {\n // Small size - 120px height with responsive scaling\n small: 'laptop:h-[160px] h-[120px]',\n // Large size - 200px height with responsive scaling\n large: 'laptop:h-[240px] h-[200px]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n size: 'small',\n },\n }\n)\n\n/**\n * Text style variants for card\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n variants: {\n state: {\n // Active state - white text\n 'active-light': 'text-white',\n 'active-dark': 'text-white',\n // Inactive state - dark text\n 'inactive-light': 'text-[#080A0F]',\n 'inactive-dark': 'text-white',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n})\n\n/**\n * Activity Schedule Card Component\n */\nconst ActivityScheduleCard = React.memo(\n ({\n item,\n theme = 'light',\n className,\n size,\n }: {\n item: ActivityScheduleItem\n theme?: 'light' | 'dark'\n className?: string\n size: 'small' | 'large'\n }) => {\n const isActive = item.isActive || false\n\n // Calculate combined state\n const cardState = `${isActive ? 'active' : 'inactive'}-${theme}` as\n | 'active-light'\n | 'active-dark'\n | 'inactive-light'\n | 'inactive-dark'\n\n return (\n <div\n className={cn(activityCardVariants({ state: cardState, size }), className)}\n data-ui-component-id=\"ActivityScheduleCard\"\n >\n <Link asChild={!item?.link} href={item?.link} className=\"size-full no-underline hover:text-current\">\n {/* Background decoration icon - show activeIcon when active, inactiveIcon when inactive */}\n {(isActive ? item.activeIcon : item.inactiveIcon) && (\n <div className=\"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]\">\n <Picture\n source={isActive ? item.activeIcon!.url : item.inactiveIcon!.url}\n alt={isActive ? item.activeIcon!.alt : item.inactiveIcon!.alt}\n className=\"aspect-square\"\n />\n </div>\n )}\n\n {/* Content area */}\n <div className=\"relative z-20 flex h-full flex-col justify-between\">\n {/* Title */}\n <Heading as=\"h3\" size={3} html={item.title} className={cn(cardTextVariants({ state: cardState }))} />\n\n <div className=\"flex flex-col gap-1\">\n {/* Subtitle */}\n <div className=\"flex flex-col justify-end overflow-hidden\">\n <Heading\n as=\"h4\"\n size={2}\n html={item.subtitle}\n className={cn(' line-clamp-2', cardTextVariants({ state: cardState }))}\n />\n </div>\n {/* Detailed description - only show when size is large */}\n {size === 'large' && item.description && (\n <Text\n html={item.description}\n className={cn(\n 'lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]',\n cardTextVariants({ state: cardState })\n )}\n />\n )}\n </div>\n </div>\n </Link>\n </div>\n )\n }\n)\n\nActivityScheduleCard.displayName = 'ActivityScheduleCard'\n\n/**\n * ActivitySchedule - Activity Schedule Component\n *\n * @description Display activity schedule card list with active/inactive states, theme switching, and responsive layout\n */\nconst ActivitySchedule = React.forwardRef<HTMLDivElement, ActivityScheduleProps>(\n ({ classNames = {}, data, ...rest }, ref) => {\n const theme = data.theme || 'light'\n const size = data.size || '
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Heading, Container, Link } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { ActivityScheduleProps, ActivityScheduleItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { withLayout } from '../../shared/Styles.js'\n\n/**\n * Card style variants for activity schedule\n */\nconst activityCardVariants = cva(\n 'rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3',\n {\n variants: {\n state: {\n // Active state - gradient background\n 'active-light': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n 'active-dark': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n // Inactive state - solid background\n 'inactive-light': 'bg-[#EAEAEC]',\n 'inactive-dark': 'bg-[#1E2024]',\n },\n size: {\n // Small size - 120px height with responsive scaling\n small: 'laptop:h-[160px] h-[120px]',\n // Large size - 200px height with responsive scaling\n large: 'laptop:h-[240px] h-[200px]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n size: 'small',\n },\n }\n)\n\n/**\n * Text style variants for card\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n variants: {\n state: {\n // Active state - white text\n 'active-light': 'text-white',\n 'active-dark': 'text-white',\n // Inactive state - dark text\n 'inactive-light': 'text-[#080A0F]',\n 'inactive-dark': 'text-white',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n})\n\n/**\n * Activity Schedule Card Component\n */\nconst ActivityScheduleCard = React.memo(\n ({\n item,\n theme = 'light',\n className,\n size,\n }: {\n item: ActivityScheduleItem\n theme?: 'light' | 'dark'\n className?: string\n size: 'small' | 'large'\n }) => {\n const isActive = item.isActive || false\n\n // Calculate combined state\n const cardState = `${isActive ? 'active' : 'inactive'}-${theme}` as\n | 'active-light'\n | 'active-dark'\n | 'inactive-light'\n | 'inactive-dark'\n\n return (\n <div\n className={cn(activityCardVariants({ state: cardState, size }), className)}\n data-ui-component-id=\"ActivityScheduleCard\"\n >\n <Link asChild={!item?.link} href={item?.link} className=\"size-full no-underline hover:text-current\">\n {/* Background decoration icon - show activeIcon when active, inactiveIcon when inactive */}\n {(isActive ? item.activeIcon : item.inactiveIcon) && (\n <div className=\"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]\">\n <Picture\n source={isActive ? item.activeIcon!.url : item.inactiveIcon!.url}\n alt={isActive ? item.activeIcon!.alt : item.inactiveIcon!.alt}\n className=\"aspect-square\"\n />\n </div>\n )}\n\n {/* Content area */}\n <div className=\"relative z-20 flex h-full flex-col justify-between\">\n {/* Title */}\n <Heading as=\"h3\" size={3} html={item.title} className={cn(cardTextVariants({ state: cardState }))} />\n\n <div className=\"flex flex-col gap-1\">\n {/* Subtitle */}\n <div className=\"flex flex-col justify-end overflow-hidden\">\n <Heading\n as=\"h4\"\n size={2}\n html={item.subtitle}\n className={cn(' line-clamp-2', cardTextVariants({ state: cardState }))}\n />\n </div>\n {/* Detailed description - only show when size is large */}\n {size === 'large' && item.description && (\n <Text\n html={item.description}\n className={cn(\n 'lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]',\n cardTextVariants({ state: cardState })\n )}\n />\n )}\n </div>\n </div>\n </Link>\n </div>\n )\n }\n)\n\nActivityScheduleCard.displayName = 'ActivityScheduleCard'\n\n/**\n * ActivitySchedule - Activity Schedule Component\n *\n * @description Display activity schedule card list with active/inactive states, theme switching, and responsive layout\n */\nconst ActivitySchedule = React.forwardRef<HTMLDivElement, ActivityScheduleProps>(\n ({ classNames = {}, data, ...rest }, ref) => {\n const theme = data.theme || 'light'\n const size = data.size || 'small'\n\n const itemsPerRow = React.useMemo(() => {\n return data?.scheduleList?.length || 2\n }, [data?.scheduleList])\n\n const swiperBreakpoints = React.useMemo(() => {\n const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n switch (breakpoint) {\n case 'mobile':\n return { slidesPerView: 1.17, spaceBetween: 12 }\n case 'tablet':\n if (itemsPerRow === 2) return { slidesPerView: 2, spaceBetween: 12 }\n return { slidesPerView: 2.4, spaceBetween: 12 }\n case 'laptop':\n if (itemsPerRow === 2) return {}\n if (itemsPerRow === 4) return { slidesPerView: 3.2, spaceBetween: 16 }\n return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n case 'desktop':\n if (itemsPerRow === 2) return { slidesPerView: 2, spaceBetween: 16 }\n return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n }\n }\n\n const mobileConfig = getBreakpointConfig('mobile')\n const tabletConfig = getBreakpointConfig('tablet')\n const laptopConfig = getBreakpointConfig('laptop')\n const desktopConfig = getBreakpointConfig('desktop')\n\n return {\n 0: mobileConfig,\n 768: tabletConfig,\n 1024: laptopConfig,\n 1440: desktopConfig,\n }\n }, [itemsPerRow])\n\n return (\n <Container\n ref={ref}\n className={cn(classNames?.root)}\n childClassName=\"overflow-hidden\"\n data-ui-component-id=\"ActivitySchedule\"\n {...rest}\n >\n <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n {data.scheduleList.map((item, index) => (\n <SwiperSlide key={'activityScheduleCardItem' + index}>\n <ActivityScheduleCard item={item} theme={theme} size={size} className={classNames?.card} />\n </SwiperSlide>\n ))}\n </Swiper>\n </Container>\n )\n }\n)\n\nActivitySchedule.displayName = 'ActivitySchedule'\n\nexport default withLayout(ActivitySchedule)\nexport type { ActivityScheduleProps, ActivityScheduleData, ActivityScheduleItem } from './types.js'\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["ActivitySchedule_exports", "__export", "ActivitySchedule_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_class_variance_authority", "import_react", "import_Styles", "activityCardVariants", "cardTextVariants", "ActivityScheduleCard", "item", "theme", "className", "size", "isActive", "cardState", "ActivitySchedule", "classNames", "data", "rest", "ref", "itemsPerRow", "swiperBreakpoints", "getBreakpointConfig", "breakpoint", "mobileConfig", "tabletConfig", "laptopConfig", "desktopConfig", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var j=Object.create;var d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,r)=>{for(var
|
|
1
|
+
"use strict";"use client";var j=Object.create;var d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,r)=>{for(var a in r)d(e,a,{get:r[a],enumerable:!0})},k=(e,r,a,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of L(r))!A.call(e,o)&&o!==a&&d(e,o,{get:()=>r[o],enumerable:!(i=P(r,o))||i.enumerable});return e};var N=(e,r,a)=>(a=e!=null?j(z(e)):{},k(r||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),D=e=>k(d({},"__esModule",{value:!0}),e);var F={};H(F,{default:()=>C});module.exports=D(F);var t=require("react/jsx-runtime"),s=require("react"),l=require("../../helpers/utils.js"),y=N(require("../../components/picture.js")),E=require("../../shared/Styles.js"),S=require("react-responsive"),M=require("../../hooks/useExposure.js"),c=require("swiper/react"),p=require("swiper/modules"),B=N(require("../Title/index.js"));const R="copy",Q="store_benefits",$=(e,r)=>{const a=[];for(let i=0;i<e.length;i+=r)a.push(e.slice(i,i+r));return a},w=(0,s.forwardRef)(({data:{items:e=[],itemShape:r,title:a,theme:i},className:o},u)=>{const[x,T]=(0,s.useState)(!1),v=(0,S.useMediaQuery)({query:"(max-width: 768px)"}),b=(0,s.useRef)(null),f=(0,s.useRef)(null);(0,s.useImperativeHandle)(u,()=>f.current),(0,M.useExposure)(f,{componentType:R,componentName:Q}),(0,s.useEffect)(()=>{T(v)},[v]);const I=x?$(e,3):e;return(0,t.jsxs)("div",{ref:f,className:(0,l.cn)("brand-equity-wrapper w-full",{"aiui-dark":i==="dark"},o),children:[a&&(0,t.jsx)(B.default,{data:{title:a}}),x?(0,t.jsxs)(c.Swiper,{className:(0,l.cn)(o),modules:[p.FreeMode,p.Mousewheel,p.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:b.current},breakpoints:{0:{spaceBetween:12}},children:[I?.map((n,m)=>(0,t.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(n)&&n?.map((g,h)=>(0,t.jsx)(q,{data:g,itemShape:r,index:h,theme:g.theme??i},h))},"SwiperSlide"+m)),(0,t.jsx)("div",{ref:b,className:"mt-3 flex justify-center"})]}):(0,t.jsx)("div",{className:(0,l.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((n,m)=>(0,t.jsx)(q,{data:n,itemShape:r,index:m,theme:n.theme??i},m))})]})}),q=({data:e,itemShape:r,index:a,theme:i})=>(0,t.jsxs)("div",{className:(0,l.cn)("brand-equity-item",`brand-equity-item-${a+1}`,e.containerName?`brand-equity-item--${e.containerName}`:void 0,"bg-container-secondary-1 box-border flex w-full flex-col p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(a),"bg-container-primary":i==="dark"},"rounded-box",e.className),children:[(0,t.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,t.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.type==="avatar"?(0,t.jsx)("div",{className:"flex shrink-0 -space-x-2",children:e?.avatarList?.map((o,u)=>(0,t.jsx)("div",{className:(0,l.cn)("border-container-primary size-[30px] overflow-hidden rounded-full border-2","relative inline-block shrink-0","lg-desktop:size-[36px]"),children:(0,t.jsx)(y.default,{source:o.avatar?.url,alt:o.avatar?.alt,className:"size-full object-cover"})},u))}):(0,t.jsx)("div",{className:"lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,t.jsx)(y.default,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),(0,t.jsx)("p",{className:"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]});w.displayName="BrandEquity";var C=(0,E.withLayout)(w);
|
|
2
2
|
//# sourceMappingURL=BrandEquity.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img, Theme } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape, title, theme }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', { 'aiui-dark': theme === 'dark' }, className)}>\n {title && <Title data={{ title: title }} />}\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandEquityItem
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8CkB,IAAAI,EAAA,6BA7ClBC,EAA6E,iBAE7EC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAI3BC,EAA8B,4BAC9BC,EAA4B,sCAE5BL,EAAoC,wBACpCM,EAAiD,0BACjDC,EAAkB,gCAElB,MAAMC,EAAgB,OAChBC,EAAgB,iBAEhBC,EAAa,CAACC,EAA6BC,IAAiB,CAChE,MAAMC,EAAS,CAAC,EAChB,
|
|
6
|
-
"names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_react_responsive", "import_useExposure", "import_modules", "import_Title", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img, Theme } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape, title, theme }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', { 'aiui-dark': theme === 'dark' }, className)}>\n {title && <Title data={{ title: title }} />}\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandEquityItem\n key={index}\n data={item}\n itemShape={itemShape}\n index={index}\n theme={item.theme ?? theme}\n />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem\n key={index}\n data={item}\n itemShape={itemShape}\n index={index}\n theme={item.theme ?? theme}\n />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandEquityItem = ({\n data,\n itemShape,\n index,\n theme,\n}: {\n data: BrandEquityItemProps\n itemShape?: 'round' | 'square'\n index: number\n theme?: Theme\n}) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n `brand-equity-item-${index + 1}`,\n data.containerName ? `brand-equity-item--${data.containerName}` : undefined,\n 'bg-container-secondary-1 box-border flex w-full flex-col p-4',\n 'desktop:p-6 justify-between',\n 'laptop:col-span-3 lg-desktop:p-8',\n 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n 'bg-container-primary': theme === 'dark',\n },\n 'rounded-box',\n data.className\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex shrink-0 -space-x-2\">\n {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'border-container-primary size-[30px] overflow-hidden rounded-full border-2',\n 'relative inline-block shrink-0',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <div className=\"lg-desktop:size-[36px] size-[30px] shrink-0\">\n <Picture\n className=\"size-full object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nBrandEquity.displayName = 'BrandEquity'\n\nexport default withLayout(BrandEquity)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_react_responsive", "import_useExposure", "import_modules", "import_Title", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "BrandEquity", "items", "itemShape", "title", "theme", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "Title", "item", "jIndex", "index", "BrandEquityItem", "data", "Picture"]
|
|
7
7
|
}
|
|
@@ -16,6 +16,12 @@ export interface PriceAndActionsProps extends React.HTMLAttributes<HTMLDivElemen
|
|
|
16
16
|
trackingDescription?: string;
|
|
17
17
|
trackingSku?: string;
|
|
18
18
|
classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>;
|
|
19
|
+
/**
|
|
20
|
+
* 原价区域渲染函数,用于在原价位置展示自定义内容(如 Save 金额文案)。
|
|
21
|
+
* 不传时使用默认的原价渲染(划线价)。
|
|
22
|
+
* @param originalPrice - 格式化后的原价文本
|
|
23
|
+
*/
|
|
24
|
+
renderOriginalPrice?: (originalPrice: string | undefined) => React.ReactNode;
|
|
19
25
|
}
|
|
20
26
|
declare const PriceAndActions: React.ForwardRefExoticComponent<PriceAndActionsProps & React.RefAttributes<HTMLDivElement>>;
|
|
21
27
|
export default PriceAndActions;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var A=Object.create;var d=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var z=(e,t)=>{for(var r in t)d(e,r,{get:t[r],enumerable:!0})},h=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of S(t))!T.call(e,n)&&n!==r&&d(e,n,{get:()=>t[n],enumerable:!(o=B(t,n))||o.enumerable});return e};var y=(e,t,r)=>(r=e!=null?A(L(e)):{},h(t||!e||!e.__esModule?d(r,"default",{value:e,enumerable:!0}):r,e)),G=e=>h(d({},"__esModule",{value:!0}),e);var R={};z(R,{default:()=>M});module.exports=G(R);var a=require("react/jsx-runtime"),H=y(require("react")),i=require("../../helpers/index.js"),l=y(require("../../components/button.js")),c=require("../../components/text.js"),p=require("../../components/index.js");const N=H.forwardRef(({currentPrice:e,originalPrice:t,priceLabel:r,learnMoreText:o="Learn More",shopNowText:n="Shop Now",soldOutText:P="Sold out",onLearnMore:v,onShopNow:b,availableForSale:m,learnMoreLoading:w,shopNowLoading:C,className:O,trackingTitle:u,trackingDescription:g,trackingSku:x,classNames:s,renderOriginalPrice:f},k)=>(0,a.jsxs)("div",{ref:k,className:(0,i.cn)("flex w-full flex-col justify-center gap-2",O),children:[(0,a.jsx)("div",{className:"flex w-full items-center gap-2",children:m?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(p.Heading,{size:2,className:(0,i.cn)("text-info-primary"),children:e}),f?f(t):t&&(0,a.jsx)(p.Heading,{size:2,className:(0,i.cn)("text-info-tertiary line-through",s?.productCardOriginalPrice),children:t})]}):(0,a.jsx)(c.Text,{size:4,className:(0,i.cn)("text-info-primary text-2xl leading-[1.2] tracking-[-0.48px]","tablet:text-xl tablet:tracking-[-0.4px]"),children:P})}),r&&(0,a.jsx)(c.Text,{size:4,className:(0,i.cn)("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",s?.productCardPriceLabel),children:r}),(0,a.jsxs)("div",{className:(0,i.cn)("flex w-full items-stretch gap-3","tablet:gap-2"),children:[(0,a.jsx)(l.default,{variant:"secondary",size:"lg",onClick:v,loading:w,className:(0,i.cn)("min-w-0 flex-1 whitespace-normal text-center",s?.productCardBtnGroup),"data-headless-type-name":"BuyOneGetOneShelf#ProductCard","data-headless-title-desc-button":`${u||""}#${g||""}#${o}`,"data-headless-sku":x,children:o}),(0,a.jsx)(l.default,{variant:"primary",size:"lg",onClick:b,disabled:!m,loading:C,className:(0,i.cn)("min-w-0 flex-1 whitespace-normal text-center",s?.productCardBtnGroup),"data-headless-type-name":"BuyOneGetOneShelf#ProductCard","data-headless-title-desc-button":`${u||""}#${g||""}#${n}`,"data-headless-sku":x,children:n})]})]}));N.displayName="PriceAndActions";var M=N;
|
|
2
2
|
//# sourceMappingURL=PriceAndActions.js.map
|