@anker-in/headless-ui 1.1.9-alpha.1764843603699 → 1.1.9-alpha.1764915120297

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.
Files changed (9) hide show
  1. package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
  2. package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +3 -3
  3. package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js +1 -1
  4. package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map +3 -3
  5. package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
  6. package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +3 -3
  7. package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js +1 -1
  8. package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map +3 -3
  9. package/package.json +1 -1
package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var ae=Object.create;var B=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var se=(t,l)=>{for(var o in l)B(t,o,{get:l[o],enumerable:!0})},Y=(t,l,o,y)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of ie(l))!re.call(t,r)&&r!==o&&B(t,r,{get:()=>l[r],enumerable:!(y=le(l,r))||y.enumerable});return t};var ne=(t,l,o)=>(o=t!=null?ae(oe(t)):{},Y(l||!t||!t.__esModule?B(o,"default",{value:t,enumerable:!0}):o,t)),ce=t=>Y(B({},"__esModule",{value:!0}),t);var be={};se(be,{default:()=>me});module.exports=ce(be);var e=require("react/jsx-runtime"),j=require("../../../../AiuiProvider/index.js"),L=require("../../../../../components/index.js"),a=require("react"),x=require("swiper/react"),m=require("swiper/modules"),N=require("../../../../../helpers/index.js"),P=require("./types.js"),k=require("@radix-ui/react-tabs"),$=require("../../../BizProductProvider.js"),U=require("../../../hooks/use-variant-media.js"),Z=require("./components/SpecsModal.js"),q=ne(require("./components/CompareModal.js")),J=require("../../../utils/index.js"),Q=require("../../../../../shared/Styles.js"),X=require("../../../../../shared/track.js"),ee=require("../../../../../components/index.js");const K=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),O=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),de=()=>{const{copyWriting:t}=(0,j.useAiuiContext)(),{product:l,variant:o,selectedOptions:y}=(0,$.useBizProductContext)(),r=(0,U.useVariantMedia)({product:l,variant:o}),[b,w]=(0,a.useState)(null),C=(0,a.useRef)(null),f=o?.metafields?.component?.custom_media_list;let s,h,I,E;f&&f?.available?(s=f?.product||[],h=f?.scenarios||[],I=f?.keyFeatures||[],E=f?.video||[]):(s=r?.productList,h=r?.sceneList,I=r?.keyFeaturesList,E=r?.videoList);const u=(0,a.useMemo)(()=>[...s,...h,...E],[s,h,E]),g={productList:s,sceneList:h,keyFeaturesList:I,videoList:E},i=(0,a.useMemo)(()=>{const c=l?.payload?.components?.find(T=>T.componentKey==="ProductGallery")?.data||[],G=o?.payload?.components?.find(T=>T.componentKey==="ProductGallery")?.data||[];return c?.map(T=>{const z=G?.find(D=>T?.galleries===D?.galleries);let H=g[T?.galleries]||[];if(z?.images&&Array.isArray(z.images)&&z.images.length>0){const D=z.images.map(d=>{const _=[];if(d.image_1920&&d.image_1920.trim()&&_.push(`${d.image_1920} 1920`),d.image_1440&&d.image_1440.trim()&&_.push(`${d.image_1440} 1440`),d.image_1024&&d.image_1024.trim()&&_.push(`${d.image_1024} 1024`),d.image_768&&d.image_768.trim()&&_.push(`${d.image_768} 767`),d.image_390&&d.image_390.trim()&&_.push(`${d.image_390} 390`),_.length>0){const W=_.join(", ");return{image:{url:W,altText:T.comment?.content||""},_fromImages:!0,_responsiveSource:W}}return null}).filter(d=>d!==null);D.length>0&&(H=D)}return{...T,galleries:H}}).filter(T=>T.galleries.length>0)},[o?.payload,g,l?.payload]),[v,n]=(0,a.useState)(i?.[0]),[p,A]=(0,a.useState)(0),[M,S]=(0,a.useState)(null),V=(0,a.useCallback)(()=>{const c=(p+1)%i.length;A(c),n(i[c]),S(0)},[p,i]),R=(0,a.useCallback)(()=>{const c=p===0?i.length-1:p-1;A(c),n(i[c]);const G=i[c]?.galleries||[];S(G.length-1)},[p,i]);(0,a.useEffect)(()=>{p!=null&&requestAnimationFrame(()=>{C.current?.scrollToTab(p)})},[p]),(0,a.useEffect)(()=>{n(i[0]),A(0)},[o?.id]);const te=(c,G)=>{switch(c?.galleryTabType){case P.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(F,{...c,index:G,onNextTab:V,onPrevTab:R,targetSlideIndex:M,onSlideChange:()=>S(null)});case P.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(F,{...c,index:G,onNextTab:V,onPrevTab:R,targetSlideIndex:M,onSlideChange:()=>S(null)});case P.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(F,{...c,index:G,onNextTab:V,onPrevTab:R,targetSlideIndex:M,onSlideChange:()=>S(null)});case P.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(pe,{...c,onNextTab:V,onPrevTab:R,targetSlideIndex:M,onSlideChange:()=>S(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(k.Root,{className:"relative",value:v?.tabValue,defaultValue:i?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:i.map((c,G)=>(0,e.jsx)(k.Content,{className:"h-full",value:c.tabValue,children:te(c,G)},c.tabValue))}),(0,e.jsx)(ue,{ref:C,galleryTabs:i,activeGalleryTab:v,setActiveGalleryTab:n,setActiveTabIndex:A,setTargetSlideIndex:S})]})})},ue=(0,a.forwardRef)((t,l)=>{const{galleryTabs:o,activeGalleryTab:y,setActiveGalleryTab:r,setActiveTabIndex:b,setTargetSlideIndex:w}=t,{product:C}=(0,$.useBizProductContext)(),f=(0,a.useRef)(null),s=(0,a.useRef)(new Map),h=(0,a.useCallback)(u=>{if(f.current){const g=f.current,i=u.currentTarget,v=i.offsetLeft-g.offsetWidth/2+i.offsetWidth/2;g.scrollTo({left:v,behavior:"smooth"})}},[]),I=(0,a.useCallback)((u,g,i)=>{r(g),b(i),w(0),h(u)},[r,b,w,h]),E=(0,a.useCallback)(u=>{if(f.current&&o[u]){const g=f.current,i=o[u],v=s.current.get(i.tabValue);if(v){const n=v.offsetLeft-g.offsetWidth/2+v.offsetWidth/2;g.scrollTo({left:n,behavior:"smooth"})}}},[o]);return(0,a.useImperativeHandle)(l,()=>({scrollToTab:E})),(0,e.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,e.jsx)(k.List,{ref:f,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:o?.map((u,g)=>(0,e.jsx)(k.Trigger,{ref:i=>{i?s.current.set(u.tabValue,i):s.current.delete(u.tabValue)},className:(0,N.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",u.tabValue===y?.tabValue&&"bg-white"),onClick:i=>I(i,u,g),value:u.tabValue,children:u.tabLabel},u.tabValue+g))})}),(0,e.jsx)("div",{className:"laptop:gap-2 laptop:flex hidden",children:C.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(Z.SpecsModal,{})," | ",(0,e.jsx)(q.default,{})]})})]})}),F=(0,a.forwardRef)((t,l)=>{const{locale:o="us",copyWriting:y}=(0,j.useAiuiContext)(),{variant:r,totalSavings:b}=(0,$.useBizProductContext)(),w=(0,a.useRef)(null),[C,f]=(0,a.useState)(null),[s,h]=(0,a.useState)(null),I=(0,a.useRef)(null),[E,u]=(0,a.useState)(!1),g=(0,a.useMemo)(()=>{if(t?.galleryTabType===P.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===P.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,P.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),i=(0,a.useCallback)(()=>{s?.isBeginning?t.onPrevTab?.():s?.slidePrev()},[s,t]),v=(0,a.useCallback)(()=>{s?.isEnd?t.onNextTab?.():s?.slideNext()},[s,t]);return(0,a.useEffect)(()=>{s&&t.targetSlideIndex&&(s.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[s,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(x.Swiper,{ref:l,className:"h-full",onSwiper:h,onTouchEnd:(n,p)=>{n.isBeginning&&n.swipeDirection==="prev"?i():n.isEnd&&n.swipeDirection==="next"&&v()},pagination:{clickable:!0,el:w.current},thumbs:{swiper:C},modules:[m.Mousewheel,m.Thumbs,m.Navigation,m.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((n,p)=>{const A=`${t.tabValue}-${p}`,M=()=>{(0,X.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${r.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:p+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},S=n?._responsiveSource||n?.image?.url||"";return(0,e.jsx)(x.SwiperSlide,{className:"h-full",children:(0,e.jsx)(ee.ExposureDetector,{onExposure:M,exposureKey:A,threshold:.5,duration:2e3,className:"h-full",children:(0,e.jsx)(L.Picture,{source:S,alt:n?.image?.altText,className:(0,N.cn)("h-full",g),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+p)})}),r.availableForSale&&!!b&&!t.index&&(0,e.jsx)(L.Badge,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,J.formatPrice)({amount:b,currencyCode:r?.price?.currencyCode,locale:o})} ${y?.off}`}),(0,e.jsx)("div",{className:(0,N.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:i,children:(0,e.jsx)(K,{className:(0,N.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,N.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:v,children:(0,e.jsx)(O,{className:(0,N.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)(x.Swiper,{className:"flex items-center justify-between",onSwiper:f,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[m.Navigation,m.Thumbs],children:t?.galleries?.map((n,p)=>(0,e.jsx)(x.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,e.jsx)(L.Picture,{source:n.image?.url,alt:n.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+p))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(L.Picture,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,e.jsx)("div",{className:"relative max-w-[528px] overflow-hidden",children:(0,e.jsx)(x.Swiper,{modules:[m.Autoplay],loop:!0,className:"lg-desktop:h-11 h-10",direction:"vertical",autoplay:{delay:2e3,disableOnInteraction:!1},children:(0,e.jsx)(x.SwiperSlide,{children:(0,e.jsx)(L.Text,{html:t?.comment?.content,className:"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]"})})})})]})]}),(0,e.jsx)("div",{ref:w,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),pe=t=>{const[l,o]=(0,a.useState)(null),y=(0,a.useCallback)(()=>{l?.isBeginning?t.onPrevTab?.():l?.slidePrev()},[l,t]),r=(0,a.useCallback)(()=>{l?.isEnd?t.onNextTab?.():l?.slideNext()},[l,t]);return(0,a.useEffect)(()=>{l&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(l.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[l,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(x.Swiper,{className:"h-full",onSwiper:o,onTouchEnd:(b,w)=>{b.isBeginning&&b.swipeDirection==="prev"?y():b.isEnd&&b.swipeDirection==="next"&&r()},modules:[m.Mousewheel,m.Thumbs,m.Navigation,m.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((b,w)=>(0,e.jsx)(x.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full object-cover",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:b?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:b?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:b?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+w))}),(0,e.jsx)("div",{className:(0,N.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:y,children:(0,e.jsx)(K,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,N.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:r,children:(0,e.jsx)(O,{className:"tablet:size-10 lg-desktop:size-12"})})]})},fe=t=>(0,e.jsx)("div",{children:"3D View"});var me=(0,Q.withLayout)(de);
1
+ "use strict";var le=Object.create;var B=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var se=(t,l)=>{for(var o in l)B(t,o,{get:l[o],enumerable:!0})},O=(t,l,o,w)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of oe(l))!ne.call(t,s)&&s!==o&&B(t,s,{get:()=>l[s],enumerable:!(w=ie(l,s))||w.enumerable});return t};var ce=(t,l,o)=>(o=t!=null?le(re(t)):{},O(l||!t||!t.__esModule?B(o,"default",{value:t,enumerable:!0}):o,t)),de=t=>O(B({},"__esModule",{value:!0}),t);var ge={};se(ge,{default:()=>be});module.exports=de(ge);var e=require("react/jsx-runtime"),W=require("../../../../AiuiProvider/index.js"),_=require("../../../../../components/index.js"),a=require("react"),T=require("swiper/react"),b=require("swiper/modules"),C=require("../../../../../helpers/index.js"),A=require("./types.js"),I=require("@radix-ui/react-tabs"),H=require("../../../BizProductProvider.js"),Z=require("../../../hooks/use-variant-media.js"),J=require("./components/SpecsModal.js"),Q=ce(require("./components/CompareModal.js")),X=require("../../../utils/index.js"),ee=require("../../../../../shared/Styles.js"),te=require("../../../../../shared/track.js"),ae=require("../../../../../components/index.js"),Y=require("es-toolkit");const q=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),U=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),ue=()=>{const{copyWriting:t}=(0,W.useAiuiContext)(),{product:l,variant:o,selectedOptions:w}=(0,H.useBizProductContext)(),s=(0,Z.useVariantMedia)({product:l,variant:o}),[g,N]=(0,a.useState)(null),R=(0,a.useRef)(null),v=o?.metafields?.component?.custom_media_list;let d,S,E,L;v&&v?.available?(d=v?.product||[],S=v?.scenarios||[],E=v?.keyFeatures||[],L=v?.video||[]):(d=s?.productList,S=s?.sceneList,E=s?.keyFeaturesList,L=s?.videoList);const u=(0,a.useMemo)(()=>[...d,...S,...L],[d,S,L]),f={productList:d,sceneList:S,keyFeaturesList:E,videoList:L},i=(0,a.useMemo)(()=>{const n=l?.payload?.components?.find(h=>h.componentKey==="ProductGallery")?.data||[],p=o?.payload?.components?.find(h=>h.componentKey==="ProductGallery")?.data||[];return n?.map(h=>{const k=p?.find(F=>h?.galleries===F?.galleries);let D=f[h?.galleries]||[];if(k?.images&&Array.isArray(k.images)&&k.images.length>0){const F=k.images.map(m=>{const M=[];if(m.image_1920&&m.image_1920.trim()&&M.push(`${m.image_1920} 1920`),m.image_1440&&m.image_1440.trim()&&M.push(`${m.image_1440} 1440`),m.image_1024&&m.image_1024.trim()&&M.push(`${m.image_1024} 1024`),m.image_768&&m.image_768.trim()&&M.push(`${m.image_768} 767`),m.image_390&&m.image_390.trim()&&M.push(`${m.image_390} 390`),M.length>0){const K=M.join(", ");return{image:{url:K,altText:h.comment?.content||""},_fromImages:!0,_responsiveSource:K}}return null}).filter(m=>m!==null);F.length>0&&(D=F)}return{...h,galleries:D}}).filter(h=>h.galleries.length>0)},[o?.payload,f,l?.payload]),[x,r]=(0,a.useState)(i?.[0]),[c,P]=(0,a.useState)(0),[y,G]=(0,a.useState)(null),V=(0,a.useCallback)(()=>{const n=(c+1)%i.length;P(n),r(i[n]),G(0)},[c,i]),z=(0,a.useCallback)(()=>{const n=c===0?i.length-1:c-1;P(n),r(i[n]);const p=i[n]?.galleries||[];G(p.length-1)},[c,i]);(0,a.useEffect)(()=>{c!=null&&requestAnimationFrame(()=>{R.current?.scrollToTab(c)})},[c]),(0,a.useEffect)(()=>{r(i[0]),P(0)},[o?.id]);const $=(n,p)=>{switch(n?.galleryTabType){case A.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(j,{...n,index:p,onNextTab:V,onPrevTab:z,targetSlideIndex:y,onSlideChange:()=>G(null)});case A.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(j,{...n,index:p,onNextTab:V,onPrevTab:z,targetSlideIndex:y,onSlideChange:()=>G(null)});case A.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(j,{...n,index:p,onNextTab:V,onPrevTab:z,targetSlideIndex:y,onSlideChange:()=>G(null)});case A.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(me,{...n,onNextTab:V,onPrevTab:z,targetSlideIndex:y,onSlideChange:()=>G(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(I.Root,{className:"relative",value:x?.tabValue,defaultValue:i?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:i.map((n,p)=>(0,e.jsx)(I.Content,{className:"h-full",value:n.tabValue,children:$(n,p)},n.tabValue))}),(0,e.jsx)(pe,{ref:R,galleryTabs:i,activeGalleryTab:x,setActiveGalleryTab:r,setActiveTabIndex:P,setTargetSlideIndex:G})]})})},pe=(0,a.forwardRef)((t,l)=>{const{galleryTabs:o,activeGalleryTab:w,setActiveGalleryTab:s,setActiveTabIndex:g,setTargetSlideIndex:N}=t,{product:R}=(0,H.useBizProductContext)(),v=(0,a.useRef)(null),d=(0,a.useRef)(new Map),S=(0,a.useCallback)(u=>{if(v.current){const f=v.current,i=u.currentTarget,x=i.offsetLeft-f.offsetWidth/2+i.offsetWidth/2;f.scrollTo({left:x,behavior:"smooth"})}},[]),E=(0,a.useCallback)((u,f,i)=>{s(f),g(i),N(0),S(u)},[s,g,N,S]),L=(0,a.useCallback)(u=>{if(v.current&&o[u]){const f=v.current,i=o[u],x=d.current.get(i.tabValue);if(x){const r=x.offsetLeft-f.offsetWidth/2+x.offsetWidth/2;f.scrollTo({left:r,behavior:"smooth"})}}},[o]);return(0,a.useImperativeHandle)(l,()=>({scrollToTab:L})),(0,e.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,e.jsx)(I.List,{ref:v,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:o?.map((u,f)=>(0,e.jsx)(I.Trigger,{ref:i=>{i?d.current.set(u.tabValue,i):d.current.delete(u.tabValue)},className:(0,C.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",u.tabValue===w?.tabValue&&"bg-white"),onClick:i=>E(i,u,f),value:u.tabValue,children:u.tabLabel},u.tabValue+f))})}),(0,e.jsx)("div",{className:"laptop:gap-2 laptop:flex hidden",children:R.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(J.SpecsModal,{})," | ",(0,e.jsx)(Q.default,{})]})})]})}),j=(0,a.forwardRef)((t,l)=>{const{locale:o="us",copyWriting:w}=(0,W.useAiuiContext)(),{variant:s,totalSavings:g}=(0,H.useBizProductContext)(),N=(0,a.useRef)(null),[R,v]=(0,a.useState)(null),[d,S]=(0,a.useState)(null),[E,L]=(0,a.useState)([]),u=(0,a.useRef)(null),f=(0,a.useMemo)(()=>{if(t?.galleryTabType===A.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===A.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,A.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),i=(0,a.useCallback)(()=>{d?.isBeginning?t.onPrevTab?.():d?.slidePrev()},[d,t]),x=(0,a.useCallback)(()=>{d?.isEnd?t.onNextTab?.():d?.slideNext()},[d,t]);return(0,a.useEffect)(()=>{d&&t.targetSlideIndex&&(d.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[d,t.targetSlideIndex,t]),(0,a.useEffect)(()=>{const r=()=>{if(!t?.comment?.content||!u.current)return;const y=u.current;y.textContent="Test";const V=y.offsetHeight*2+2,$=t.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),n=[];let p="";for(let h=0;h<$.length;h++){const k=$[h],D=p?`${p} ${k}`:k;y.textContent=D,y.offsetHeight>V?p?(n.push(p),p=k):(n.push(k),p=""):p=D}p&&n.push(p),y.textContent="",L(n)},c=requestAnimationFrame(()=>{requestAnimationFrame(()=>{r()})}),P=()=>{r()};return window.addEventListener("resize",(0,Y.debounce)(P,500)),()=>{cancelAnimationFrame(c),window.removeEventListener("resize",(0,Y.debounce)(P,500))}},[t?.comment?.content]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(T.Swiper,{ref:l,className:"h-full",onSwiper:S,onTouchEnd:(r,c)=>{r.isBeginning&&r.swipeDirection==="prev"?i():r.isEnd&&r.swipeDirection==="next"&&x()},pagination:{clickable:!0,el:N.current},thumbs:{swiper:R},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((r,c)=>{const P=`${t.tabValue}-${c}`,y=()=>{(0,te.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${s.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:c+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},G=r?._responsiveSource||r?.image?.url||"";return(0,e.jsx)(T.SwiperSlide,{className:"h-full",children:(0,e.jsx)(ae.ExposureDetector,{onExposure:y,exposureKey:P,threshold:.5,duration:2e3,className:"h-full",children:(0,e.jsx)(_.Picture,{source:G,alt:r?.image?.altText,className:(0,C.cn)("h-full",f),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+c)})}),s.availableForSale&&!!g&&!t.index&&(0,e.jsx)(_.Badge,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,X.formatPrice)({amount:g,currencyCode:s?.price?.currencyCode,locale:o})} ${w?.off}`}),(0,e.jsx)("div",{className:(0,C.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:i,children:(0,e.jsx)(q,{className:(0,C.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,C.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:x,children:(0,e.jsx)(U,{className:(0,C.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)(T.Swiper,{className:"flex items-center justify-between",onSwiper:v,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[b.Navigation,b.Thumbs],children:t?.galleries?.map((r,c)=>(0,e.jsx)(T.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,e.jsx)(_.Picture,{source:r.image?.url,alt:r.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+c))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(_.Picture,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,e.jsxs)("div",{className:"relative max-w-[528px]",children:[(0,e.jsx)("div",{ref:u,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),(0,e.jsx)(T.Swiper,{modules:[b.Autoplay],loop:E.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:E.length>0?E.map((r,c)=>(0,e.jsx)(T.SwiperSlide,{children:(0,e.jsx)(_.Text,{html:r,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},c+"text-group")):(0,e.jsx)(T.SwiperSlide,{children:(0,e.jsx)(_.Text,{as:"div",html:t?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),(0,e.jsx)("div",{ref:N,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),me=t=>{const[l,o]=(0,a.useState)(null),w=(0,a.useCallback)(()=>{l?.isBeginning?t.onPrevTab?.():l?.slidePrev()},[l,t]),s=(0,a.useCallback)(()=>{l?.isEnd?t.onNextTab?.():l?.slideNext()},[l,t]);return(0,a.useEffect)(()=>{l&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(l.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[l,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(T.Swiper,{className:"h-full",onSwiper:o,onTouchEnd:(g,N)=>{g.isBeginning&&g.swipeDirection==="prev"?w():g.isEnd&&g.swipeDirection==="next"&&s()},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((g,N)=>(0,e.jsx)(T.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full object-cover",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:g?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:g?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:g?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+N))}),(0,e.jsx)("div",{className:(0,C.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:w,children:(0,e.jsx)(q,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,C.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:s,children:(0,e.jsx)(U,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ve=t=>(0,e.jsx)("div",{children:"3D View"});var be=(0,ee.withLayout)(ue);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
4
- "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Badge } from '../../../../../components/index.js'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n useEffect,\n type Dispatch,\n type SetStateAction,\n useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, selectedOptions } = useBizProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab: ProductGalleryProps =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n const variantProductGallery =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => {\n // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n const variantProductGalleryItem = variantProductGallery?.find(\n (variantItem: any) => item?.galleries === variantItem?.galleries\n )\n let galleries = galleryMap[item?.galleries] || []\n\n if (\n variantProductGalleryItem?.images &&\n Array.isArray(variantProductGalleryItem.images) &&\n variantProductGalleryItem.images.length > 0\n ) {\n // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n const imageGalleries = variantProductGalleryItem.images\n .map((imageItem: any) => {\n // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n const imageSourceParts: string[] = []\n if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n imageSourceParts.push(`${imageItem.image_1920} 1920`)\n }\n if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n imageSourceParts.push(`${imageItem.image_1440} 1440`)\n }\n if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n imageSourceParts.push(`${imageItem.image_1024} 1024`)\n }\n if (imageItem.image_768 && imageItem.image_768.trim()) {\n imageSourceParts.push(`${imageItem.image_768} 767`)\n }\n if (imageItem.image_390 && imageItem.image_390.trim()) {\n imageSourceParts.push(`${imageItem.image_390} 390`)\n }\n\n // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n if (imageSourceParts.length > 0) {\n const responsiveSource = imageSourceParts.join(', ')\n return {\n image: {\n url: responsiveSource,\n altText: item.comment?.content || '',\n },\n // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n _fromImages: true,\n _responsiveSource: responsiveSource,\n } as any\n }\n return null\n })\n .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n if (imageGalleries.length > 0) {\n galleries = imageGalleries\n }\n // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n }\n\n return {\n ...item,\n galleries,\n }\n })\n .filter((item: any) => item.galleries.length > 0)\n }, [variant?.payload, galleryMap, product?.payload])\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n const handleNextTab = useCallback(() => {\n const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n setActiveTabIndex(nextIndex)\n setActiveGalleryTab(galleryTabs[nextIndex])\n setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n }, [activeTabIndex, galleryTabs])\n\n // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n const handlePrevTab = useCallback(() => {\n const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n setActiveTabIndex(prevIndex)\n setActiveGalleryTab(galleryTabs[prevIndex])\n // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n setTargetSlideIndex(prevTabGalleries.length - 1)\n }, [activeTabIndex, galleryTabs])\n\n // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n useEffect(() => {\n if (activeTabIndex !== null && activeTabIndex !== undefined) {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n requestAnimationFrame(() => {\n productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n })\n }\n }, [activeTabIndex])\n\n useEffect(() => {\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n setActiveGalleryTab(galleryTabs[0])\n setActiveTabIndex(0)\n }, [variant?.id])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE_MAIN:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_FEATURES:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_SCENE:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return (\n <ProductGalleryTabVideo\n {...tab}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n <div className=\"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n ref={productGalleryTabRef}\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n setActiveTabIndex={setActiveTabIndex}\n setTargetSlideIndex={setTargetSlideIndex}\n />\n </Root>\n </div>\n )\n}\n\nexport interface ProductGalleryTabRef {\n scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n ProductGalleryTabRef,\n {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n setActiveTabIndex: Dispatch<SetStateAction<number>>\n setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n }\n>((props, ref) => {\n const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n const { product } = useBizProductContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = event.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n const handleGalleryTabClick = useCallback(\n (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n setActiveGalleryTab(item)\n setActiveTabIndex(index)\n setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n scrollToEvent(el)\n },\n [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n )\n\n // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n const scrollToTab = useCallback(\n (index: number) => {\n if (scrollContainerRef.current && galleryTabs[index]) {\n const container = scrollContainerRef.current\n const tabItem = galleryTabs[index]\n const button = triggerRefs.current.get(tabItem.tabValue)\n\n if (button) {\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n },\n [galleryTabs]\n )\n\n useImperativeHandle(ref, () => ({\n scrollToTab,\n }))\n\n return (\n <div className=\"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n <List\n ref={scrollContainerRef}\n className=\"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map((item, index) => {\n return (\n <Trigger\n ref={el => {\n if (el) {\n triggerRefs.current.set(item.tabValue, el)\n } else {\n triggerRefs.current.delete(item.tabValue)\n }\n }}\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={el => handleGalleryTabClick(el, item, index)}\n key={item.tabValue + index}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 laptop:flex hidden\">\n {product.metafields?.global?.specifications && (\n <>\n <SpecsModal /> | <CompareModal />\n </>\n )}\n </div>\n </div>\n )\n})\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, totalSavings } = useBizProductContext()\n const paginationRef = useRef<HTMLDivElement>(null)\n const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const commentRef = useRef<HTMLDivElement>(null)\n const [shouldScroll, setShouldScroll] = useState(false)\n\n const imageClassName = useMemo(() => {\n if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n // return '420px'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n // return '560px'\n }\n }, [props?.galleryTabType])\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && !!props.targetSlideIndex) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n // useEffect(() => {\n // if (commentRef.current) {\n // const container = commentRef.current\n // const contentHeight = container.scrollHeight\n // const containerHeight = container.clientHeight\n // const needsScroll = contentHeight > containerHeight\n // setShouldScroll(needsScroll)\n // }\n // }, [])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n ref={ref}\n className=\"h-full\"\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n const exposureKey = `${props.tabValue}-${jIndex}`\n\n // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n const handleExposure = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: props?.tabLabel || '',\n position: jIndex + 1,\n creative_id: '',\n component_title: '',\n component_description: '',\n navigation: '',\n },\n })\n }\n\n // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <ExposureDetector\n onExposure={handleExposure}\n exposureKey={exposureKey}\n threshold={0.5}\n duration={2000}\n className=\"h-full\"\n >\n <Picture\n source={pictureSource}\n alt={item?.image?.altText}\n className={cn('h-full', imageClassName)}\n imgClassName=\"object-cover h-full\"\n />\n </ExposureDetector>\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white\"\n >\n {`${formatPrice({\n amount: totalSavings,\n currencyCode: variant?.price?.currencyCode,\n locale: locale,\n })} ${copyWriting?.off}`}\n </Badge>\n )}\n <div\n className={cn(\n 'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n `swiper-button`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n <div\n className={cn(\n 'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n `swiper-button`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n {/* {props?.galleries?.map((item, jIndex) => {\n return (\n <Picture\n key={props?.id + 'SwiperSlideItem' + jIndex}\n source={item?.image?.url}\n alt={item?.image?.altText}\n className=\"h-full\"\n imgClassName=\"object-cover h-full\"\n />\n )\n })} */}\n <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n <div className=\"tablet:block hidden\">\n <Swiper\n className=\"flex items-center justify-between\"\n onSwiper={setThumbsSwiper}\n spaceBetween={12}\n slidesPerView={6}\n freeMode={true}\n watchSlidesProgress={true}\n modules={[Navigation, Thumbs]}\n >\n {props?.galleries?.map((item, jIndex) => (\n <SwiperSlide\n key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n imgClassName=\"object-cover h-full\"\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n {!props?.index && (\n <div className=\"flex items-center gap-2\">\n <Picture\n source={props?.comment?.avatar?.url}\n className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n imgClassName=\"object-cover \"\n />\n <div className=\"relative max-w-[528px] overflow-hidden\">\n <Swiper\n modules={[Autoplay]}\n loop\n className=\"lg-desktop:h-11 h-10\"\n direction=\"vertical\"\n autoplay={{ delay: 2000, disableOnInteraction: false }}\n >\n <SwiperSlide>\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n </Swiper>\n {/* <div\n ref={commentRef}\n className={cn('h-10', shouldScroll && 'animate-scroll-text')}\n >\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base text-sm font-bold text-[#080A0F]\"\n />\n </div> */}\n </div>\n </div>\n )}\n </div>\n <div\n ref={paginationRef}\n className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n className=\"h-full\"\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full object-cover\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n <div\n className={cn(\n 'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
5
- "mappings": "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",
6
- "names": ["ProductGallery_exports", "__export", "ProductGallery_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_react", "import_modules", "import_helpers", "import_types", "import_react_tabs", "import_BizProductProvider", "import_use_variant_media", "import_SpecsModal", "import_CompareModal", "import_utils", "import_Styles", "import_track", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "CompareModal", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "jIndex", "exposureKey", "handleExposure", "pictureSource", "ProductGalleryTab3DView"]
4
+ "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Badge } from '../../../../../components/index.js'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n useEffect,\n type Dispatch,\n type SetStateAction,\n useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\nimport { debounce } from 'es-toolkit'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, selectedOptions } = useBizProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab: ProductGalleryProps =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n const variantProductGallery =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => {\n // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n const variantProductGalleryItem = variantProductGallery?.find(\n (variantItem: any) => item?.galleries === variantItem?.galleries\n )\n let galleries = galleryMap[item?.galleries] || []\n\n if (\n variantProductGalleryItem?.images &&\n Array.isArray(variantProductGalleryItem.images) &&\n variantProductGalleryItem.images.length > 0\n ) {\n // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n const imageGalleries = variantProductGalleryItem.images\n .map((imageItem: any) => {\n // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n const imageSourceParts: string[] = []\n if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n imageSourceParts.push(`${imageItem.image_1920} 1920`)\n }\n if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n imageSourceParts.push(`${imageItem.image_1440} 1440`)\n }\n if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n imageSourceParts.push(`${imageItem.image_1024} 1024`)\n }\n if (imageItem.image_768 && imageItem.image_768.trim()) {\n imageSourceParts.push(`${imageItem.image_768} 767`)\n }\n if (imageItem.image_390 && imageItem.image_390.trim()) {\n imageSourceParts.push(`${imageItem.image_390} 390`)\n }\n\n // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n if (imageSourceParts.length > 0) {\n const responsiveSource = imageSourceParts.join(', ')\n return {\n image: {\n url: responsiveSource,\n altText: item.comment?.content || '',\n },\n // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n _fromImages: true,\n _responsiveSource: responsiveSource,\n } as any\n }\n return null\n })\n .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n if (imageGalleries.length > 0) {\n galleries = imageGalleries\n }\n // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n }\n\n return {\n ...item,\n galleries,\n }\n })\n .filter((item: any) => item.galleries.length > 0)\n }, [variant?.payload, galleryMap, product?.payload])\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n const handleNextTab = useCallback(() => {\n const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n setActiveTabIndex(nextIndex)\n setActiveGalleryTab(galleryTabs[nextIndex])\n setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n }, [activeTabIndex, galleryTabs])\n\n // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n const handlePrevTab = useCallback(() => {\n const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n setActiveTabIndex(prevIndex)\n setActiveGalleryTab(galleryTabs[prevIndex])\n // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n setTargetSlideIndex(prevTabGalleries.length - 1)\n }, [activeTabIndex, galleryTabs])\n\n // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n useEffect(() => {\n if (activeTabIndex !== null && activeTabIndex !== undefined) {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n requestAnimationFrame(() => {\n productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n })\n }\n }, [activeTabIndex])\n\n useEffect(() => {\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n setActiveGalleryTab(galleryTabs[0])\n setActiveTabIndex(0)\n }, [variant?.id])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE_MAIN:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_FEATURES:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_SCENE:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return (\n <ProductGalleryTabVideo\n {...tab}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n <div className=\"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n ref={productGalleryTabRef}\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n setActiveTabIndex={setActiveTabIndex}\n setTargetSlideIndex={setTargetSlideIndex}\n />\n </Root>\n </div>\n )\n}\n\nexport interface ProductGalleryTabRef {\n scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n ProductGalleryTabRef,\n {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n setActiveTabIndex: Dispatch<SetStateAction<number>>\n setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n }\n>((props, ref) => {\n const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n const { product } = useBizProductContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = event.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n const handleGalleryTabClick = useCallback(\n (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n setActiveGalleryTab(item)\n setActiveTabIndex(index)\n setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n scrollToEvent(el)\n },\n [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n )\n\n // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n const scrollToTab = useCallback(\n (index: number) => {\n if (scrollContainerRef.current && galleryTabs[index]) {\n const container = scrollContainerRef.current\n const tabItem = galleryTabs[index]\n const button = triggerRefs.current.get(tabItem.tabValue)\n\n if (button) {\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n },\n [galleryTabs]\n )\n\n useImperativeHandle(ref, () => ({\n scrollToTab,\n }))\n\n return (\n <div className=\"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n <List\n ref={scrollContainerRef}\n className=\"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map((item, index) => {\n return (\n <Trigger\n ref={el => {\n if (el) {\n triggerRefs.current.set(item.tabValue, el)\n } else {\n triggerRefs.current.delete(item.tabValue)\n }\n }}\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={el => handleGalleryTabClick(el, item, index)}\n key={item.tabValue + index}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 laptop:flex hidden\">\n {product.metafields?.global?.specifications && (\n <>\n <SpecsModal /> | <CompareModal />\n </>\n )}\n </div>\n </div>\n )\n})\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, totalSavings } = useBizProductContext()\n const paginationRef = useRef<HTMLDivElement>(null)\n const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const [textGroups, setTextGroups] = useState<string[]>([])\n const measureRef = useRef<HTMLDivElement>(null)\n\n const imageClassName = useMemo(() => {\n if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n // return '420px'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n // return '560px'\n }\n }, [props?.galleryTabType])\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && !!props.targetSlideIndex) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n // \u5C06\u6587\u672C\u63092\u884C\u4E00\u7EC4\u8FDB\u884C\u5206\u7EC4\n useEffect(() => {\n const calculateGroups = () => {\n if (!props?.comment?.content || !measureRef.current) return\n\n const measureEl = measureRef.current\n\n // \u5148\u6D4B\u91CF\u5355\u884C\u9AD8\u5EA6\n measureEl.textContent = 'Test'\n const singleLineHeight = measureEl.offsetHeight\n const twoLinesMaxHeight = singleLineHeight * 2 + 2 // 2\u884C\u7684\u6700\u5927\u9AD8\u5EA6\uFF0C\u52A02px\u5BB9\u5DEE\n\n // \u6E05\u7406HTML\u6807\u7B7E\u5E76\u5206\u5272\u5355\u8BCD\n const cleanText = props.comment.content\n .replace(/<[^>]*>/g, ' ')\n .replace(/\\s+/g, ' ')\n .trim()\n const words = cleanText.split(' ')\n const groups: string[] = []\n let currentGroup = ''\n\n for (let i = 0; i < words.length; i++) {\n const word = words[i]\n const testText = currentGroup ? `${currentGroup} ${word}` : word\n\n // \u76F4\u63A5\u5728 measureRef \u5143\u7D20\u4E0A\u6D4B\u91CF\n measureEl.textContent = testText\n const testHeight = measureEl.offsetHeight\n\n if (testHeight > twoLinesMaxHeight) {\n // \u5F53\u524D\u5355\u8BCD\u4F1A\u5BFC\u81F4\u8D85\u8FC72\u884C\uFF0C\u4FDD\u5B58\u4E4B\u524D\u7684\u7EC4\n if (currentGroup) {\n groups.push(currentGroup)\n currentGroup = word\n } else {\n // \u5355\u4E2A\u5355\u8BCD\u5C31\u8D85\u8FC72\u884C\uFF0C\u5F3A\u5236\u52A0\u5165\n groups.push(word)\n currentGroup = ''\n }\n } else {\n // \u8FD8\u57282\u884C\u4EE5\u5185\uFF0C\u7EE7\u7EED\u7D2F\u52A0\n currentGroup = testText\n }\n }\n\n // \u6DFB\u52A0\u6700\u540E\u4E00\u7EC4\n if (currentGroup) {\n groups.push(currentGroup)\n }\n\n // \u6E05\u7A7A\u6D4B\u91CF\u5143\u7D20\n measureEl.textContent = ''\n setTextGroups(groups)\n }\n\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDDDOM\u6E32\u67D3\u5B8C\u6210\u540E\u518D\u8BA1\u7B97\n const rafId = requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n calculateGroups()\n })\n })\n\n // \u76D1\u542C\u7A97\u53E3\u5927\u5C0F\u53D8\u5316\uFF0C\u91CD\u65B0\u8BA1\u7B97\u5206\u7EC4\n const handleResize = () => {\n calculateGroups()\n }\n\n window.addEventListener('resize', debounce(handleResize, 500))\n return () => {\n cancelAnimationFrame(rafId)\n window.removeEventListener('resize', debounce(handleResize, 500))\n }\n }, [props?.comment?.content])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n ref={ref}\n className=\"h-full\"\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n const exposureKey = `${props.tabValue}-${jIndex}`\n\n // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n const handleExposure = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: props?.tabLabel || '',\n position: jIndex + 1,\n creative_id: '',\n component_title: '',\n component_description: '',\n navigation: '',\n },\n })\n }\n\n // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <ExposureDetector\n onExposure={handleExposure}\n exposureKey={exposureKey}\n threshold={0.5}\n duration={2000}\n className=\"h-full\"\n >\n <Picture\n source={pictureSource}\n alt={item?.image?.altText}\n className={cn('h-full', imageClassName)}\n imgClassName=\"object-cover h-full\"\n />\n </ExposureDetector>\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white\"\n >\n {`${formatPrice({\n amount: totalSavings,\n currencyCode: variant?.price?.currencyCode,\n locale: locale,\n })} ${copyWriting?.off}`}\n </Badge>\n )}\n <div\n className={cn(\n 'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n `swiper-button`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n <div\n className={cn(\n 'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n `swiper-button`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n {/* {props?.galleries?.map((item, jIndex) => {\n return (\n <Picture\n key={props?.id + 'SwiperSlideItem' + jIndex}\n source={item?.image?.url}\n alt={item?.image?.altText}\n className=\"h-full\"\n imgClassName=\"object-cover h-full\"\n />\n )\n })} */}\n <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n <div className=\"tablet:block hidden\">\n <Swiper\n className=\"flex items-center justify-between\"\n onSwiper={setThumbsSwiper}\n spaceBetween={12}\n slidesPerView={6}\n freeMode={true}\n watchSlidesProgress={true}\n modules={[Navigation, Thumbs]}\n >\n {props?.galleries?.map((item, jIndex) => (\n <SwiperSlide\n key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n imgClassName=\"object-cover h-full\"\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n {!props?.index && (\n <div className=\"flex items-center gap-2\">\n <Picture\n source={props?.comment?.avatar?.url}\n className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n imgClassName=\"object-cover \"\n />\n <div className=\"relative max-w-[528px]\">\n {/* \u9690\u85CF\u7684\u6D4B\u91CF\u5143\u7D20 */}\n <div\n ref={measureRef}\n className=\"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0\"\n style={{ visibility: 'hidden' }}\n />\n <Swiper\n modules={[Autoplay]}\n loop={textGroups.length > 1}\n className=\"h-[44px]\"\n direction=\"vertical\"\n autoplay={{ delay: 5000, disableOnInteraction: false }}\n >\n {textGroups.length > 0 ? (\n textGroups.map((group, index) => (\n <SwiperSlide key={index + 'text-group'}>\n <Text\n html={group}\n as=\"div\"\n className=\"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n ))\n ) : (\n <SwiperSlide>\n <Text\n as=\"div\"\n html={props?.comment?.content}\n className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n )}\n </Swiper>\n </div>\n </div>\n )}\n </div>\n <div\n ref={paginationRef}\n className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n className=\"h-full\"\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full object-cover\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n <div\n className={cn(\n 'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
5
+ "mappings": "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",
6
+ "names": ["ProductGallery_exports", "__export", "ProductGallery_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_react", "import_modules", "import_helpers", "import_types", "import_react_tabs", "import_BizProductProvider", "import_use_variant_media", "import_SpecsModal", "import_CompareModal", "import_utils", "import_Styles", "import_track", "import_es_toolkit", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "CompareModal", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "textGroups", "setTextGroups", "measureRef", "imageClassName", "handlePrevClick", "handleNextClick", "calculateGroups", "measureEl", "twoLinesMaxHeight", "words", "groups", "currentGroup", "i", "word", "testText", "rafId", "handleResize", "jIndex", "exposureKey", "handleExposure", "pictureSource", "group", "ProductGalleryTab3DView"]
7
7
  }
package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},v=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of m(t))!p.call(e,o)&&o!==n&&i(e,o,{get:()=>t[o],enumerable:!(r=f(t,o))||r.enumerable});return e};var h=e=>v(i({},"__esModule",{value:!0}),e);var E={};g(E,{useScrollSpy:()=>u});module.exports=h(E);var c=require("react"),s=require("es-toolkit");const u=(e,t=100)=>{const[n,r]=(0,c.useState)("");return(0,c.useEffect)(()=>{const o=()=>{const w=Math.ceil(window.scrollY+t);for(let l=e.length-1;l>=0;l--){const d=document.getElementById(e[l]);if(d){const a=Math.ceil(d.getBoundingClientRect().top+window.scrollY);if(w>=a){r(e[l]);break}}}};return o(),window.addEventListener("scroll",(0,s.debounce)(o,50)),()=>{window.removeEventListener("scroll",(0,s.debounce)(o,50))}},[e,t]),n};
1
+ "use strict";var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var v=(e,o)=>{for(var n in o)i(e,n,{get:o[n],enumerable:!0})},S=(e,o,n,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of p(o))!g.call(e,t)&&t!==n&&i(e,t,{get:()=>o[t],enumerable:!(l=m(o,t))||l.enumerable});return e};var h=e=>S(i({},"__esModule",{value:!0}),e);var E={};v(E,{useScrollSpy:()=>a});module.exports=h(E);var r=require("react"),u=require("es-toolkit");const a=(e,o=100)=>{const[n,l]=(0,r.useState)("");return(0,r.useEffect)(()=>{const t=()=>{const w=Math.ceil(window.scrollY+o+10);for(let c=e.length-1;c>=0;c--){const d=document.getElementById(e[c]);if(d){const f=Math.ceil(d.getBoundingClientRect().top+window.scrollY);if(console.log(f,"offsetTop"),w>=f){l(e[c]);break}}}};t();const s=(0,u.debounce)(t,50);return window.addEventListener("scroll",s),()=>{window.removeEventListener("scroll",s)}},[e,o]),n};
2
2
  //# sourceMappingURL=useScrollSpy.js.map
package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.tsx"],
4
- "sourcesContent": ["import { useState, useEffect } from 'react'\nimport { debounce } from 'es-toolkit'\n\nconst useScrollSpy = (sectionIds: string[], offset = 100) => {\n const [activeId, setActiveId] = useState('')\n\n useEffect(() => {\n const handleScroll = () => {\n const scrollPosition = Math.ceil(window.scrollY + offset)\n\n // \u904D\u5386\u6240\u6709section\uFF0C\u627E\u5230\u5F53\u524D\u53EF\u89C6\u533A\u57DF\u5185\u7684section\n for (let i = sectionIds.length - 1; i >= 0; i--) {\n const section = document.getElementById(sectionIds[i])\n if (section) {\n const offsetTop = Math.ceil(section.getBoundingClientRect().top + window.scrollY)\n if (scrollPosition >= offsetTop) {\n setActiveId(sectionIds[i])\n break\n }\n }\n }\n }\n\n // \u521D\u59CB\u5316\u65F6\u6267\u884C\u4E00\u6B21\n handleScroll()\n\n // \u76D1\u542C\u6EDA\u52A8\u4E8B\u4EF6\n window.addEventListener('scroll', debounce(handleScroll, 50))\n\n return () => {\n window.removeEventListener('scroll', debounce(handleScroll, 50))\n }\n }, [sectionIds, offset])\n\n return activeId\n}\n\nexport { useScrollSpy }\n"],
5
- "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAoC,iBACpCC,EAAyB,sBAEzB,MAAMH,EAAe,CAACI,EAAsBC,EAAS,MAAQ,CAC3D,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAS,EAAE,EAE3C,sBAAU,IAAM,CACd,MAAMC,EAAe,IAAM,CACzB,MAAMC,EAAiB,KAAK,KAAK,OAAO,QAAUJ,CAAM,EAGxD,QAASK,EAAIN,EAAW,OAAS,EAAGM,GAAK,EAAGA,IAAK,CAC/C,MAAMC,EAAU,SAAS,eAAeP,EAAWM,CAAC,CAAC,EACrD,GAAIC,EAAS,CACX,MAAMC,EAAY,KAAK,KAAKD,EAAQ,sBAAsB,EAAE,IAAM,OAAO,OAAO,EAChF,GAAIF,GAAkBG,EAAW,CAC/BL,EAAYH,EAAWM,CAAC,CAAC,EACzB,KACF,CACF,CACF,CACF,EAGA,OAAAF,EAAa,EAGb,OAAO,iBAAiB,YAAU,YAASA,EAAc,EAAE,CAAC,EAErD,IAAM,CACX,OAAO,oBAAoB,YAAU,YAASA,EAAc,EAAE,CAAC,CACjE,CACF,EAAG,CAACJ,EAAYC,CAAM,CAAC,EAEhBC,CACT",
6
- "names": ["useScrollSpy_exports", "__export", "useScrollSpy", "__toCommonJS", "import_react", "import_es_toolkit", "sectionIds", "offset", "activeId", "setActiveId", "handleScroll", "scrollPosition", "i", "section", "offsetTop"]
4
+ "sourcesContent": ["import { useState, useEffect } from 'react'\nimport { debounce } from 'es-toolkit'\n\nconst useScrollSpy = (sectionIds: string[], offset = 100) => {\n const [activeId, setActiveId] = useState('')\n\n useEffect(() => {\n const handleScroll = () => {\n const scrollPosition = Math.ceil(window.scrollY + offset + 10)\n\n // \u904D\u5386\u6240\u6709section\uFF0C\u627E\u5230\u5F53\u524D\u53EF\u89C6\u533A\u57DF\u5185\u7684section\n for (let i = sectionIds.length - 1; i >= 0; i--) {\n const section = document.getElementById(sectionIds[i])\n if (section) {\n const offsetTop = Math.ceil(section.getBoundingClientRect().top + window.scrollY)\n console.log(offsetTop, 'offsetTop')\n if (scrollPosition >= offsetTop) {\n setActiveId(sectionIds[i])\n break\n }\n }\n }\n }\n\n // \u521D\u59CB\u5316\u65F6\u6267\u884C\u4E00\u6B21\n handleScroll()\n\n // \u521B\u5EFAdebounce\u51FD\u6570\u5E76\u4FDD\u5B58\u5F15\u7528\uFF0C\u786E\u4FDD\u80FD\u6B63\u786E\u79FB\u9664\u76D1\u542C\u5668\n const debouncedHandleScroll = debounce(handleScroll, 50)\n window.addEventListener('scroll', debouncedHandleScroll)\n\n return () => {\n window.removeEventListener('scroll', debouncedHandleScroll)\n }\n }, [sectionIds, offset])\n\n return activeId\n}\n\nexport { useScrollSpy }\n"],
5
+ "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAoC,iBACpCC,EAAyB,sBAEzB,MAAMH,EAAe,CAACI,EAAsBC,EAAS,MAAQ,CAC3D,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAS,EAAE,EAE3C,sBAAU,IAAM,CACd,MAAMC,EAAe,IAAM,CACzB,MAAMC,EAAiB,KAAK,KAAK,OAAO,QAAUJ,EAAS,EAAE,EAG7D,QAASK,EAAIN,EAAW,OAAS,EAAGM,GAAK,EAAGA,IAAK,CAC/C,MAAMC,EAAU,SAAS,eAAeP,EAAWM,CAAC,CAAC,EACrD,GAAIC,EAAS,CACX,MAAMC,EAAY,KAAK,KAAKD,EAAQ,sBAAsB,EAAE,IAAM,OAAO,OAAO,EAEhF,GADA,QAAQ,IAAIC,EAAW,WAAW,EAC9BH,GAAkBG,EAAW,CAC/BL,EAAYH,EAAWM,CAAC,CAAC,EACzB,KACF,CACF,CACF,CACF,EAGAF,EAAa,EAGb,MAAMK,KAAwB,YAASL,EAAc,EAAE,EACvD,cAAO,iBAAiB,SAAUK,CAAqB,EAEhD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,CACF,EAAG,CAACT,EAAYC,CAAM,CAAC,EAEhBC,CACT",
6
+ "names": ["useScrollSpy_exports", "__export", "useScrollSpy", "__toCommonJS", "import_react", "import_es_toolkit", "sectionIds", "offset", "activeId", "setActiveId", "handleScroll", "scrollPosition", "i", "section", "offsetTop", "debouncedHandleScroll"]
7
7
  }
package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Fragment as Te,jsx as e,jsxs as y}from"react/jsx-runtime";import{useAiuiContext as Z}from"../../../../AiuiProvider/index.js";import{Text as ae,Picture as F,Badge as le}from"../../../../../components/index.js";import{useCallback as w,useMemo as j,useState as G,forwardRef as q,useRef as A,useEffect as D,useImperativeHandle as ie}from"react";import{Swiper as B,SwiperSlide as $}from"swiper/react";import{Navigation as H,Mousewheel as J,Thumbs as W,Pagination as Q,Autoplay as oe}from"swiper/modules";import{cn as N}from"../../../../../helpers/index.js";import{GalleryTabType as L}from"./types.js";import{Content as re,List as se,Root as ne,Trigger as ce}from"@radix-ui/react-tabs";import{useBizProductContext as Y}from"../../../BizProductProvider.js";import{useVariantMedia as de}from"../../../hooks/use-variant-media.js";import{SpecsModal as ue}from"./components/SpecsModal.js";import pe from"./components/CompareModal.js";import{formatPrice as me}from"../../../utils/index.js";import{withLayout as be}from"../../../../../shared/Styles.js";import{gaTrack as ge}from"../../../../../shared/track.js";import{ExposureDetector as fe}from"../../../../../components/index.js";const X=t=>y("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),ee=t=>y("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),ve=()=>{const{copyWriting:t}=Z(),{product:r,variant:p,selectedOptions:E}=Y(),m=de({product:r,variant:p}),[d,h]=G(null),k=A(null),b=p?.metafields?.component?.custom_media_list;let l,f,_,S;b&&b?.available?(l=b?.product||[],f=b?.scenarios||[],_=b?.keyFeatures||[],S=b?.video||[]):(l=m?.productList,f=m?.sceneList,_=m?.keyFeaturesList,S=m?.videoList);const n=j(()=>[...l,...f,...S],[l,f,S]),u={productList:l,sceneList:f,keyFeaturesList:_,videoList:S},a=j(()=>{const o=r?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[],x=p?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[];return o?.map(v=>{const R=x?.find(z=>v?.galleries===z?.galleries);let O=u[v?.galleries]||[];if(R?.images&&Array.isArray(R.images)&&R.images.length>0){const z=R.images.map(s=>{const P=[];if(s.image_1920&&s.image_1920.trim()&&P.push(`${s.image_1920} 1920`),s.image_1440&&s.image_1440.trim()&&P.push(`${s.image_1440} 1440`),s.image_1024&&s.image_1024.trim()&&P.push(`${s.image_1024} 1024`),s.image_768&&s.image_768.trim()&&P.push(`${s.image_768} 767`),s.image_390&&s.image_390.trim()&&P.push(`${s.image_390} 390`),P.length>0){const U=P.join(", ");return{image:{url:U,altText:v.comment?.content||""},_fromImages:!0,_responsiveSource:U}}return null}).filter(s=>s!==null);z.length>0&&(O=z)}return{...v,galleries:O}}).filter(v=>v.galleries.length>0)},[p?.payload,u,r?.payload]),[g,i]=G(a?.[0]),[c,C]=G(0),[I,T]=G(null),M=w(()=>{const o=(c+1)%a.length;C(o),i(a[o]),T(0)},[c,a]),V=w(()=>{const o=c===0?a.length-1:c-1;C(o),i(a[o]);const x=a[o]?.galleries||[];T(x.length-1)},[c,a]);D(()=>{c!=null&&requestAnimationFrame(()=>{k.current?.scrollToTab(c)})},[c]),D(()=>{i(a[0]),C(0)},[p?.id]);const te=(o,x)=>{switch(o?.galleryTabType){case L.GALLERY_IMAGE_MAIN:return e(K,{...o,index:x,onNextTab:M,onPrevTab:V,targetSlideIndex:I,onSlideChange:()=>T(null)});case L.GALLERY_IMAGE_FEATURES:return e(K,{...o,index:x,onNextTab:M,onPrevTab:V,targetSlideIndex:I,onSlideChange:()=>T(null)});case L.GALLERY_IMAGE_SCENE:return e(K,{...o,index:x,onNextTab:M,onPrevTab:V,targetSlideIndex:I,onSlideChange:()=>T(null)});case L.GALLERY_VIDEO:return e(he,{...o,onNextTab:M,onPrevTab:V,targetSlideIndex:I,onSlideChange:()=>T(null)});default:return null}};return e("div",{id:"ipc-product-gallery",children:y(ne,{className:"relative",value:g?.tabValue,defaultValue:a?.[0]?.tabValue,children:[e("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:a.map((o,x)=>e(re,{className:"h-full",value:o.tabValue,children:te(o,x)},o.tabValue))}),e(ye,{ref:k,galleryTabs:a,activeGalleryTab:g,setActiveGalleryTab:i,setActiveTabIndex:C,setTargetSlideIndex:T})]})})},ye=q((t,r)=>{const{galleryTabs:p,activeGalleryTab:E,setActiveGalleryTab:m,setActiveTabIndex:d,setTargetSlideIndex:h}=t,{product:k}=Y(),b=A(null),l=A(new Map),f=w(n=>{if(b.current){const u=b.current,a=n.currentTarget,g=a.offsetLeft-u.offsetWidth/2+a.offsetWidth/2;u.scrollTo({left:g,behavior:"smooth"})}},[]),_=w((n,u,a)=>{m(u),d(a),h(0),f(n)},[m,d,h,f]),S=w(n=>{if(b.current&&p[n]){const u=b.current,a=p[n],g=l.current.get(a.tabValue);if(g){const i=g.offsetLeft-u.offsetWidth/2+g.offsetWidth/2;u.scrollTo({left:i,behavior:"smooth"})}}},[p]);return ie(r,()=>({scrollToTab:S})),y("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[e(se,{ref:b,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:p?.map((n,u)=>e(ce,{ref:a=>{a?l.current.set(n.tabValue,a):l.current.delete(n.tabValue)},className:N("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",n.tabValue===E?.tabValue&&"bg-white"),onClick:a=>_(a,n,u),value:n.tabValue,children:n.tabLabel},n.tabValue+u))})}),e("div",{className:"laptop:gap-2 laptop:flex hidden",children:k.metafields?.global?.specifications&&y(Te,{children:[e(ue,{})," | ",e(pe,{})]})})]})}),K=q((t,r)=>{const{locale:p="us",copyWriting:E}=Z(),{variant:m,totalSavings:d}=Y(),h=A(null),[k,b]=G(null),[l,f]=G(null),_=A(null),[S,n]=G(!1),u=j(()=>{if(t?.galleryTabType===L.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===L.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,L.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),a=w(()=>{l?.isBeginning?t.onPrevTab?.():l?.slidePrev()},[l,t]),g=w(()=>{l?.isEnd?t.onNextTab?.():l?.slideNext()},[l,t]);return D(()=>{l&&t.targetSlideIndex&&(l.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[l,t.targetSlideIndex,t]),y("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(B,{ref:r,className:"h-full",onSwiper:f,onTouchEnd:(i,c)=>{i.isBeginning&&i.swipeDirection==="prev"?a():i.isEnd&&i.swipeDirection==="next"&&g()},pagination:{clickable:!0,el:h.current},thumbs:{swiper:k},modules:[J,W,H,Q],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((i,c)=>{const C=`${t.tabValue}-${c}`,I=()=>{ge({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${m.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:c+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},T=i?._responsiveSource||i?.image?.url||"";return e($,{className:"h-full",children:e(fe,{onExposure:I,exposureKey:C,threshold:.5,duration:2e3,className:"h-full",children:e(F,{source:T,alt:i?.image?.altText,className:N("h-full",u),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+c)})}),m.availableForSale&&!!d&&!t.index&&e(le,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${me({amount:d,currencyCode:m?.price?.currencyCode,locale:p})} ${E?.off}`}),e("div",{className:N("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:a,children:e(X,{className:N("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:N("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:g,children:e(ee,{className:N("tablet:size-10 lg-desktop:size-12")})}),y("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[e("div",{className:"tablet:block hidden",children:e(B,{className:"flex items-center justify-between",onSwiper:b,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[H,W],children:t?.galleries?.map((i,c)=>e($,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:e(F,{source:i.image?.url,alt:i.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+c))})}),!t?.index&&y("div",{className:"flex items-center gap-2",children:[e(F,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),e("div",{className:"relative max-w-[528px] overflow-hidden",children:e(B,{modules:[oe],loop:!0,className:"lg-desktop:h-11 h-10",direction:"vertical",autoplay:{delay:2e3,disableOnInteraction:!1},children:e($,{children:e(ae,{html:t?.comment?.content,className:"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]"})})})})]})]}),e("div",{ref:h,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),he=t=>{const[r,p]=G(null),E=w(()=>{r?.isBeginning?t.onPrevTab?.():r?.slidePrev()},[r,t]),m=w(()=>{r?.isEnd?t.onNextTab?.():r?.slideNext()},[r,t]);return D(()=>{r&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(r.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[r,t.targetSlideIndex,t]),y("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(B,{className:"h-full",onSwiper:p,onTouchEnd:(d,h)=>{d.isBeginning&&d.swipeDirection==="prev"?E():d.isEnd&&d.swipeDirection==="next"&&m()},modules:[J,W,H,Q],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((d,h)=>e($,{className:"h-full",children:y("video",{controls:!0,className:"size-full object-cover",children:[e("track",{kind:"captions"}),e("source",{src:d?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:d?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:d?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+h))}),e("div",{className:N("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:E,children:e(X,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:N("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:m,children:e(ee,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ze=t=>e("div",{children:"3D View"});var De=be(ve);export{De as default};
1
+ import{Fragment as Te,jsx as e,jsxs as y}from"react/jsx-runtime";import{useAiuiContext as Z}from"../../../../AiuiProvider/index.js";import{Text as J,Picture as j,Badge as ie}from"../../../../../components/index.js";import{useCallback as L,useMemo as W,useState as P,forwardRef as Q,useRef as D,useEffect as F,useImperativeHandle as oe}from"react";import{Swiper as H,SwiperSlide as $}from"swiper/react";import{Navigation as Y,Mousewheel as X,Thumbs as K,Pagination as ee,Autoplay as re}from"swiper/modules";import{cn as k}from"../../../../../helpers/index.js";import{GalleryTabType as A}from"./types.js";import{Content as ne,List as se,Root as ce,Trigger as de}from"@radix-ui/react-tabs";import{useBizProductContext as O}from"../../../BizProductProvider.js";import{useVariantMedia as ue}from"../../../hooks/use-variant-media.js";import{SpecsModal as pe}from"./components/SpecsModal.js";import me from"./components/CompareModal.js";import{formatPrice as be}from"../../../utils/index.js";import{withLayout as ge}from"../../../../../shared/Styles.js";import{gaTrack as fe}from"../../../../../shared/track.js";import{ExposureDetector as ve}from"../../../../../components/index.js";import{debounce as te}from"es-toolkit";const ae=t=>y("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),le=t=>y("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),he=()=>{const{copyWriting:t}=Z(),{product:c,variant:m,selectedOptions:C}=O(),b=ue({product:c,variant:m}),[u,w]=P(null),I=D(null),g=m?.metafields?.component?.custom_media_list;let r,x,S,G;g&&g?.available?(r=g?.product||[],x=g?.scenarios||[],S=g?.keyFeatures||[],G=g?.video||[]):(r=b?.productList,x=b?.sceneList,S=b?.keyFeaturesList,G=b?.videoList);const n=W(()=>[...r,...x,...G],[r,x,G]),p={productList:r,sceneList:x,keyFeaturesList:S,videoList:G},a=W(()=>{const i=c?.payload?.components?.find(f=>f.componentKey==="ProductGallery")?.data||[],s=m?.payload?.components?.find(f=>f.componentKey==="ProductGallery")?.data||[];return i?.map(f=>{const E=s?.find(z=>f?.galleries===z?.galleries);let V=p[f?.galleries]||[];if(E?.images&&Array.isArray(E.images)&&E.images.length>0){const z=E.images.map(d=>{const _=[];if(d.image_1920&&d.image_1920.trim()&&_.push(`${d.image_1920} 1920`),d.image_1440&&d.image_1440.trim()&&_.push(`${d.image_1440} 1440`),d.image_1024&&d.image_1024.trim()&&_.push(`${d.image_1024} 1024`),d.image_768&&d.image_768.trim()&&_.push(`${d.image_768} 767`),d.image_390&&d.image_390.trim()&&_.push(`${d.image_390} 390`),_.length>0){const U=_.join(", ");return{image:{url:U,altText:f.comment?.content||""},_fromImages:!0,_responsiveSource:U}}return null}).filter(d=>d!==null);z.length>0&&(V=z)}return{...f,galleries:V}}).filter(f=>f.galleries.length>0)},[m?.payload,p,c?.payload]),[h,l]=P(a?.[0]),[o,N]=P(0),[v,T]=P(null),M=L(()=>{const i=(o+1)%a.length;N(i),l(a[i]),T(0)},[o,a]),R=L(()=>{const i=o===0?a.length-1:o-1;N(i),l(a[i]);const s=a[i]?.galleries||[];T(s.length-1)},[o,a]);F(()=>{o!=null&&requestAnimationFrame(()=>{I.current?.scrollToTab(o)})},[o]),F(()=>{l(a[0]),N(0)},[m?.id]);const B=(i,s)=>{switch(i?.galleryTabType){case A.GALLERY_IMAGE_MAIN:return e(q,{...i,index:s,onNextTab:M,onPrevTab:R,targetSlideIndex:v,onSlideChange:()=>T(null)});case A.GALLERY_IMAGE_FEATURES:return e(q,{...i,index:s,onNextTab:M,onPrevTab:R,targetSlideIndex:v,onSlideChange:()=>T(null)});case A.GALLERY_IMAGE_SCENE:return e(q,{...i,index:s,onNextTab:M,onPrevTab:R,targetSlideIndex:v,onSlideChange:()=>T(null)});case A.GALLERY_VIDEO:return e(xe,{...i,onNextTab:M,onPrevTab:R,targetSlideIndex:v,onSlideChange:()=>T(null)});default:return null}};return e("div",{id:"ipc-product-gallery",children:y(ce,{className:"relative",value:h?.tabValue,defaultValue:a?.[0]?.tabValue,children:[e("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:a.map((i,s)=>e(ne,{className:"h-full",value:i.tabValue,children:B(i,s)},i.tabValue))}),e(ye,{ref:I,galleryTabs:a,activeGalleryTab:h,setActiveGalleryTab:l,setActiveTabIndex:N,setTargetSlideIndex:T})]})})},ye=Q((t,c)=>{const{galleryTabs:m,activeGalleryTab:C,setActiveGalleryTab:b,setActiveTabIndex:u,setTargetSlideIndex:w}=t,{product:I}=O(),g=D(null),r=D(new Map),x=L(n=>{if(g.current){const p=g.current,a=n.currentTarget,h=a.offsetLeft-p.offsetWidth/2+a.offsetWidth/2;p.scrollTo({left:h,behavior:"smooth"})}},[]),S=L((n,p,a)=>{b(p),u(a),w(0),x(n)},[b,u,w,x]),G=L(n=>{if(g.current&&m[n]){const p=g.current,a=m[n],h=r.current.get(a.tabValue);if(h){const l=h.offsetLeft-p.offsetWidth/2+h.offsetWidth/2;p.scrollTo({left:l,behavior:"smooth"})}}},[m]);return oe(c,()=>({scrollToTab:G})),y("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[e(se,{ref:g,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:m?.map((n,p)=>e(de,{ref:a=>{a?r.current.set(n.tabValue,a):r.current.delete(n.tabValue)},className:k("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",n.tabValue===C?.tabValue&&"bg-white"),onClick:a=>S(a,n,p),value:n.tabValue,children:n.tabLabel},n.tabValue+p))})}),e("div",{className:"laptop:gap-2 laptop:flex hidden",children:I.metafields?.global?.specifications&&y(Te,{children:[e(pe,{})," | ",e(me,{})]})})]})}),q=Q((t,c)=>{const{locale:m="us",copyWriting:C}=Z(),{variant:b,totalSavings:u}=O(),w=D(null),[I,g]=P(null),[r,x]=P(null),[S,G]=P([]),n=D(null),p=W(()=>{if(t?.galleryTabType===A.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===A.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,A.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),a=L(()=>{r?.isBeginning?t.onPrevTab?.():r?.slidePrev()},[r,t]),h=L(()=>{r?.isEnd?t.onNextTab?.():r?.slideNext()},[r,t]);return F(()=>{r&&t.targetSlideIndex&&(r.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[r,t.targetSlideIndex,t]),F(()=>{const l=()=>{if(!t?.comment?.content||!n.current)return;const v=n.current;v.textContent="Test";const M=v.offsetHeight*2+2,B=t.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),i=[];let s="";for(let f=0;f<B.length;f++){const E=B[f],V=s?`${s} ${E}`:E;v.textContent=V,v.offsetHeight>M?s?(i.push(s),s=E):(i.push(E),s=""):s=V}s&&i.push(s),v.textContent="",G(i)},o=requestAnimationFrame(()=>{requestAnimationFrame(()=>{l()})}),N=()=>{l()};return window.addEventListener("resize",te(N,500)),()=>{cancelAnimationFrame(o),window.removeEventListener("resize",te(N,500))}},[t?.comment?.content]),y("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(H,{ref:c,className:"h-full",onSwiper:x,onTouchEnd:(l,o)=>{l.isBeginning&&l.swipeDirection==="prev"?a():l.isEnd&&l.swipeDirection==="next"&&h()},pagination:{clickable:!0,el:w.current},thumbs:{swiper:I},modules:[X,K,Y,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((l,o)=>{const N=`${t.tabValue}-${o}`,v=()=>{fe({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${b.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:o+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},T=l?._responsiveSource||l?.image?.url||"";return e($,{className:"h-full",children:e(ve,{onExposure:v,exposureKey:N,threshold:.5,duration:2e3,className:"h-full",children:e(j,{source:T,alt:l?.image?.altText,className:k("h-full",p),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+o)})}),b.availableForSale&&!!u&&!t.index&&e(ie,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${be({amount:u,currencyCode:b?.price?.currencyCode,locale:m})} ${C?.off}`}),e("div",{className:k("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:a,children:e(ae,{className:k("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:k("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:h,children:e(le,{className:k("tablet:size-10 lg-desktop:size-12")})}),y("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[e("div",{className:"tablet:block hidden",children:e(H,{className:"flex items-center justify-between",onSwiper:g,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[Y,K],children:t?.galleries?.map((l,o)=>e($,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:e(j,{source:l.image?.url,alt:l.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+o))})}),!t?.index&&y("div",{className:"flex items-center gap-2",children:[e(j,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),y("div",{className:"relative max-w-[528px]",children:[e("div",{ref:n,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),e(H,{modules:[re],loop:S.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:S.length>0?S.map((l,o)=>e($,{children:e(J,{html:l,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},o+"text-group")):e($,{children:e(J,{as:"div",html:t?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),e("div",{ref:w,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),xe=t=>{const[c,m]=P(null),C=L(()=>{c?.isBeginning?t.onPrevTab?.():c?.slidePrev()},[c,t]),b=L(()=>{c?.isEnd?t.onNextTab?.():c?.slideNext()},[c,t]);return F(()=>{c&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(c.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[c,t.targetSlideIndex,t]),y("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(H,{className:"h-full",onSwiper:m,onTouchEnd:(u,w)=>{u.isBeginning&&u.swipeDirection==="prev"?C():u.isEnd&&u.swipeDirection==="next"&&b()},modules:[X,K,Y,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((u,w)=>e($,{className:"h-full",children:y("video",{controls:!0,className:"size-full object-cover",children:[e("track",{kind:"captions"}),e("source",{src:u?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:u?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:u?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+w))}),e("div",{className:k("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:C,children:e(ae,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:k("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:b,children:e(le,{className:"tablet:size-10 lg-desktop:size-12"})})]})},Fe=t=>e("div",{children:"3D View"});var $e=ge(he);export{$e as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
4
- "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Badge } from '../../../../../components/index.js'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n useEffect,\n type Dispatch,\n type SetStateAction,\n useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, selectedOptions } = useBizProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab: ProductGalleryProps =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n const variantProductGallery =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => {\n // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n const variantProductGalleryItem = variantProductGallery?.find(\n (variantItem: any) => item?.galleries === variantItem?.galleries\n )\n let galleries = galleryMap[item?.galleries] || []\n\n if (\n variantProductGalleryItem?.images &&\n Array.isArray(variantProductGalleryItem.images) &&\n variantProductGalleryItem.images.length > 0\n ) {\n // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n const imageGalleries = variantProductGalleryItem.images\n .map((imageItem: any) => {\n // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n const imageSourceParts: string[] = []\n if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n imageSourceParts.push(`${imageItem.image_1920} 1920`)\n }\n if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n imageSourceParts.push(`${imageItem.image_1440} 1440`)\n }\n if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n imageSourceParts.push(`${imageItem.image_1024} 1024`)\n }\n if (imageItem.image_768 && imageItem.image_768.trim()) {\n imageSourceParts.push(`${imageItem.image_768} 767`)\n }\n if (imageItem.image_390 && imageItem.image_390.trim()) {\n imageSourceParts.push(`${imageItem.image_390} 390`)\n }\n\n // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n if (imageSourceParts.length > 0) {\n const responsiveSource = imageSourceParts.join(', ')\n return {\n image: {\n url: responsiveSource,\n altText: item.comment?.content || '',\n },\n // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n _fromImages: true,\n _responsiveSource: responsiveSource,\n } as any\n }\n return null\n })\n .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n if (imageGalleries.length > 0) {\n galleries = imageGalleries\n }\n // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n }\n\n return {\n ...item,\n galleries,\n }\n })\n .filter((item: any) => item.galleries.length > 0)\n }, [variant?.payload, galleryMap, product?.payload])\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n const handleNextTab = useCallback(() => {\n const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n setActiveTabIndex(nextIndex)\n setActiveGalleryTab(galleryTabs[nextIndex])\n setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n }, [activeTabIndex, galleryTabs])\n\n // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n const handlePrevTab = useCallback(() => {\n const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n setActiveTabIndex(prevIndex)\n setActiveGalleryTab(galleryTabs[prevIndex])\n // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n setTargetSlideIndex(prevTabGalleries.length - 1)\n }, [activeTabIndex, galleryTabs])\n\n // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n useEffect(() => {\n if (activeTabIndex !== null && activeTabIndex !== undefined) {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n requestAnimationFrame(() => {\n productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n })\n }\n }, [activeTabIndex])\n\n useEffect(() => {\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n setActiveGalleryTab(galleryTabs[0])\n setActiveTabIndex(0)\n }, [variant?.id])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE_MAIN:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_FEATURES:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_SCENE:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return (\n <ProductGalleryTabVideo\n {...tab}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n <div className=\"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n ref={productGalleryTabRef}\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n setActiveTabIndex={setActiveTabIndex}\n setTargetSlideIndex={setTargetSlideIndex}\n />\n </Root>\n </div>\n )\n}\n\nexport interface ProductGalleryTabRef {\n scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n ProductGalleryTabRef,\n {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n setActiveTabIndex: Dispatch<SetStateAction<number>>\n setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n }\n>((props, ref) => {\n const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n const { product } = useBizProductContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = event.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n const handleGalleryTabClick = useCallback(\n (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n setActiveGalleryTab(item)\n setActiveTabIndex(index)\n setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n scrollToEvent(el)\n },\n [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n )\n\n // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n const scrollToTab = useCallback(\n (index: number) => {\n if (scrollContainerRef.current && galleryTabs[index]) {\n const container = scrollContainerRef.current\n const tabItem = galleryTabs[index]\n const button = triggerRefs.current.get(tabItem.tabValue)\n\n if (button) {\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n },\n [galleryTabs]\n )\n\n useImperativeHandle(ref, () => ({\n scrollToTab,\n }))\n\n return (\n <div className=\"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n <List\n ref={scrollContainerRef}\n className=\"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map((item, index) => {\n return (\n <Trigger\n ref={el => {\n if (el) {\n triggerRefs.current.set(item.tabValue, el)\n } else {\n triggerRefs.current.delete(item.tabValue)\n }\n }}\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={el => handleGalleryTabClick(el, item, index)}\n key={item.tabValue + index}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 laptop:flex hidden\">\n {product.metafields?.global?.specifications && (\n <>\n <SpecsModal /> | <CompareModal />\n </>\n )}\n </div>\n </div>\n )\n})\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, totalSavings } = useBizProductContext()\n const paginationRef = useRef<HTMLDivElement>(null)\n const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const commentRef = useRef<HTMLDivElement>(null)\n const [shouldScroll, setShouldScroll] = useState(false)\n\n const imageClassName = useMemo(() => {\n if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n // return '420px'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n // return '560px'\n }\n }, [props?.galleryTabType])\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && !!props.targetSlideIndex) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n // useEffect(() => {\n // if (commentRef.current) {\n // const container = commentRef.current\n // const contentHeight = container.scrollHeight\n // const containerHeight = container.clientHeight\n // const needsScroll = contentHeight > containerHeight\n // setShouldScroll(needsScroll)\n // }\n // }, [])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n ref={ref}\n className=\"h-full\"\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n const exposureKey = `${props.tabValue}-${jIndex}`\n\n // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n const handleExposure = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: props?.tabLabel || '',\n position: jIndex + 1,\n creative_id: '',\n component_title: '',\n component_description: '',\n navigation: '',\n },\n })\n }\n\n // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <ExposureDetector\n onExposure={handleExposure}\n exposureKey={exposureKey}\n threshold={0.5}\n duration={2000}\n className=\"h-full\"\n >\n <Picture\n source={pictureSource}\n alt={item?.image?.altText}\n className={cn('h-full', imageClassName)}\n imgClassName=\"object-cover h-full\"\n />\n </ExposureDetector>\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white\"\n >\n {`${formatPrice({\n amount: totalSavings,\n currencyCode: variant?.price?.currencyCode,\n locale: locale,\n })} ${copyWriting?.off}`}\n </Badge>\n )}\n <div\n className={cn(\n 'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n `swiper-button`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n <div\n className={cn(\n 'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n `swiper-button`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n {/* {props?.galleries?.map((item, jIndex) => {\n return (\n <Picture\n key={props?.id + 'SwiperSlideItem' + jIndex}\n source={item?.image?.url}\n alt={item?.image?.altText}\n className=\"h-full\"\n imgClassName=\"object-cover h-full\"\n />\n )\n })} */}\n <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n <div className=\"tablet:block hidden\">\n <Swiper\n className=\"flex items-center justify-between\"\n onSwiper={setThumbsSwiper}\n spaceBetween={12}\n slidesPerView={6}\n freeMode={true}\n watchSlidesProgress={true}\n modules={[Navigation, Thumbs]}\n >\n {props?.galleries?.map((item, jIndex) => (\n <SwiperSlide\n key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n imgClassName=\"object-cover h-full\"\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n {!props?.index && (\n <div className=\"flex items-center gap-2\">\n <Picture\n source={props?.comment?.avatar?.url}\n className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n imgClassName=\"object-cover \"\n />\n <div className=\"relative max-w-[528px] overflow-hidden\">\n <Swiper\n modules={[Autoplay]}\n loop\n className=\"lg-desktop:h-11 h-10\"\n direction=\"vertical\"\n autoplay={{ delay: 2000, disableOnInteraction: false }}\n >\n <SwiperSlide>\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n </Swiper>\n {/* <div\n ref={commentRef}\n className={cn('h-10', shouldScroll && 'animate-scroll-text')}\n >\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base text-sm font-bold text-[#080A0F]\"\n />\n </div> */}\n </div>\n </div>\n )}\n </div>\n <div\n ref={paginationRef}\n className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n className=\"h-full\"\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full object-cover\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n <div\n className={cn(\n 'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "useImperativeHandle", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "Autoplay", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "withLayout", "gaTrack", "ExposureDetector", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "jIndex", "exposureKey", "handleExposure", "pictureSource", "ProductGalleryTab3DView", "ProductGallery_default"]
4
+ "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Badge } from '../../../../../components/index.js'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n useEffect,\n type Dispatch,\n type SetStateAction,\n useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\nimport { debounce } from 'es-toolkit'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, selectedOptions } = useBizProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab: ProductGalleryProps =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n const variantProductGallery =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => {\n // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n const variantProductGalleryItem = variantProductGallery?.find(\n (variantItem: any) => item?.galleries === variantItem?.galleries\n )\n let galleries = galleryMap[item?.galleries] || []\n\n if (\n variantProductGalleryItem?.images &&\n Array.isArray(variantProductGalleryItem.images) &&\n variantProductGalleryItem.images.length > 0\n ) {\n // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n const imageGalleries = variantProductGalleryItem.images\n .map((imageItem: any) => {\n // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n const imageSourceParts: string[] = []\n if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n imageSourceParts.push(`${imageItem.image_1920} 1920`)\n }\n if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n imageSourceParts.push(`${imageItem.image_1440} 1440`)\n }\n if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n imageSourceParts.push(`${imageItem.image_1024} 1024`)\n }\n if (imageItem.image_768 && imageItem.image_768.trim()) {\n imageSourceParts.push(`${imageItem.image_768} 767`)\n }\n if (imageItem.image_390 && imageItem.image_390.trim()) {\n imageSourceParts.push(`${imageItem.image_390} 390`)\n }\n\n // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n if (imageSourceParts.length > 0) {\n const responsiveSource = imageSourceParts.join(', ')\n return {\n image: {\n url: responsiveSource,\n altText: item.comment?.content || '',\n },\n // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n _fromImages: true,\n _responsiveSource: responsiveSource,\n } as any\n }\n return null\n })\n .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n if (imageGalleries.length > 0) {\n galleries = imageGalleries\n }\n // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n }\n\n return {\n ...item,\n galleries,\n }\n })\n .filter((item: any) => item.galleries.length > 0)\n }, [variant?.payload, galleryMap, product?.payload])\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n const handleNextTab = useCallback(() => {\n const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n setActiveTabIndex(nextIndex)\n setActiveGalleryTab(galleryTabs[nextIndex])\n setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n }, [activeTabIndex, galleryTabs])\n\n // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n const handlePrevTab = useCallback(() => {\n const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n setActiveTabIndex(prevIndex)\n setActiveGalleryTab(galleryTabs[prevIndex])\n // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n setTargetSlideIndex(prevTabGalleries.length - 1)\n }, [activeTabIndex, galleryTabs])\n\n // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n useEffect(() => {\n if (activeTabIndex !== null && activeTabIndex !== undefined) {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n requestAnimationFrame(() => {\n productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n })\n }\n }, [activeTabIndex])\n\n useEffect(() => {\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n setActiveGalleryTab(galleryTabs[0])\n setActiveTabIndex(0)\n }, [variant?.id])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE_MAIN:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_FEATURES:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_SCENE:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return (\n <ProductGalleryTabVideo\n {...tab}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n <div className=\"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n ref={productGalleryTabRef}\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n setActiveTabIndex={setActiveTabIndex}\n setTargetSlideIndex={setTargetSlideIndex}\n />\n </Root>\n </div>\n )\n}\n\nexport interface ProductGalleryTabRef {\n scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n ProductGalleryTabRef,\n {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n setActiveTabIndex: Dispatch<SetStateAction<number>>\n setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n }\n>((props, ref) => {\n const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n const { product } = useBizProductContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = event.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n const handleGalleryTabClick = useCallback(\n (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n setActiveGalleryTab(item)\n setActiveTabIndex(index)\n setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n scrollToEvent(el)\n },\n [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n )\n\n // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n const scrollToTab = useCallback(\n (index: number) => {\n if (scrollContainerRef.current && galleryTabs[index]) {\n const container = scrollContainerRef.current\n const tabItem = galleryTabs[index]\n const button = triggerRefs.current.get(tabItem.tabValue)\n\n if (button) {\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n },\n [galleryTabs]\n )\n\n useImperativeHandle(ref, () => ({\n scrollToTab,\n }))\n\n return (\n <div className=\"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n <List\n ref={scrollContainerRef}\n className=\"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map((item, index) => {\n return (\n <Trigger\n ref={el => {\n if (el) {\n triggerRefs.current.set(item.tabValue, el)\n } else {\n triggerRefs.current.delete(item.tabValue)\n }\n }}\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={el => handleGalleryTabClick(el, item, index)}\n key={item.tabValue + index}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 laptop:flex hidden\">\n {product.metafields?.global?.specifications && (\n <>\n <SpecsModal /> | <CompareModal />\n </>\n )}\n </div>\n </div>\n )\n})\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, totalSavings } = useBizProductContext()\n const paginationRef = useRef<HTMLDivElement>(null)\n const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const [textGroups, setTextGroups] = useState<string[]>([])\n const measureRef = useRef<HTMLDivElement>(null)\n\n const imageClassName = useMemo(() => {\n if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n // return '420px'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n // return '560px'\n }\n }, [props?.galleryTabType])\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && !!props.targetSlideIndex) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n // \u5C06\u6587\u672C\u63092\u884C\u4E00\u7EC4\u8FDB\u884C\u5206\u7EC4\n useEffect(() => {\n const calculateGroups = () => {\n if (!props?.comment?.content || !measureRef.current) return\n\n const measureEl = measureRef.current\n\n // \u5148\u6D4B\u91CF\u5355\u884C\u9AD8\u5EA6\n measureEl.textContent = 'Test'\n const singleLineHeight = measureEl.offsetHeight\n const twoLinesMaxHeight = singleLineHeight * 2 + 2 // 2\u884C\u7684\u6700\u5927\u9AD8\u5EA6\uFF0C\u52A02px\u5BB9\u5DEE\n\n // \u6E05\u7406HTML\u6807\u7B7E\u5E76\u5206\u5272\u5355\u8BCD\n const cleanText = props.comment.content\n .replace(/<[^>]*>/g, ' ')\n .replace(/\\s+/g, ' ')\n .trim()\n const words = cleanText.split(' ')\n const groups: string[] = []\n let currentGroup = ''\n\n for (let i = 0; i < words.length; i++) {\n const word = words[i]\n const testText = currentGroup ? `${currentGroup} ${word}` : word\n\n // \u76F4\u63A5\u5728 measureRef \u5143\u7D20\u4E0A\u6D4B\u91CF\n measureEl.textContent = testText\n const testHeight = measureEl.offsetHeight\n\n if (testHeight > twoLinesMaxHeight) {\n // \u5F53\u524D\u5355\u8BCD\u4F1A\u5BFC\u81F4\u8D85\u8FC72\u884C\uFF0C\u4FDD\u5B58\u4E4B\u524D\u7684\u7EC4\n if (currentGroup) {\n groups.push(currentGroup)\n currentGroup = word\n } else {\n // \u5355\u4E2A\u5355\u8BCD\u5C31\u8D85\u8FC72\u884C\uFF0C\u5F3A\u5236\u52A0\u5165\n groups.push(word)\n currentGroup = ''\n }\n } else {\n // \u8FD8\u57282\u884C\u4EE5\u5185\uFF0C\u7EE7\u7EED\u7D2F\u52A0\n currentGroup = testText\n }\n }\n\n // \u6DFB\u52A0\u6700\u540E\u4E00\u7EC4\n if (currentGroup) {\n groups.push(currentGroup)\n }\n\n // \u6E05\u7A7A\u6D4B\u91CF\u5143\u7D20\n measureEl.textContent = ''\n setTextGroups(groups)\n }\n\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDDDOM\u6E32\u67D3\u5B8C\u6210\u540E\u518D\u8BA1\u7B97\n const rafId = requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n calculateGroups()\n })\n })\n\n // \u76D1\u542C\u7A97\u53E3\u5927\u5C0F\u53D8\u5316\uFF0C\u91CD\u65B0\u8BA1\u7B97\u5206\u7EC4\n const handleResize = () => {\n calculateGroups()\n }\n\n window.addEventListener('resize', debounce(handleResize, 500))\n return () => {\n cancelAnimationFrame(rafId)\n window.removeEventListener('resize', debounce(handleResize, 500))\n }\n }, [props?.comment?.content])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n ref={ref}\n className=\"h-full\"\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n const exposureKey = `${props.tabValue}-${jIndex}`\n\n // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n const handleExposure = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: props?.tabLabel || '',\n position: jIndex + 1,\n creative_id: '',\n component_title: '',\n component_description: '',\n navigation: '',\n },\n })\n }\n\n // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <ExposureDetector\n onExposure={handleExposure}\n exposureKey={exposureKey}\n threshold={0.5}\n duration={2000}\n className=\"h-full\"\n >\n <Picture\n source={pictureSource}\n alt={item?.image?.altText}\n className={cn('h-full', imageClassName)}\n imgClassName=\"object-cover h-full\"\n />\n </ExposureDetector>\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white\"\n >\n {`${formatPrice({\n amount: totalSavings,\n currencyCode: variant?.price?.currencyCode,\n locale: locale,\n })} ${copyWriting?.off}`}\n </Badge>\n )}\n <div\n className={cn(\n 'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n `swiper-button`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n <div\n className={cn(\n 'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n `swiper-button`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n {/* {props?.galleries?.map((item, jIndex) => {\n return (\n <Picture\n key={props?.id + 'SwiperSlideItem' + jIndex}\n source={item?.image?.url}\n alt={item?.image?.altText}\n className=\"h-full\"\n imgClassName=\"object-cover h-full\"\n />\n )\n })} */}\n <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n <div className=\"tablet:block hidden\">\n <Swiper\n className=\"flex items-center justify-between\"\n onSwiper={setThumbsSwiper}\n spaceBetween={12}\n slidesPerView={6}\n freeMode={true}\n watchSlidesProgress={true}\n modules={[Navigation, Thumbs]}\n >\n {props?.galleries?.map((item, jIndex) => (\n <SwiperSlide\n key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n imgClassName=\"object-cover h-full\"\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n {!props?.index && (\n <div className=\"flex items-center gap-2\">\n <Picture\n source={props?.comment?.avatar?.url}\n className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n imgClassName=\"object-cover \"\n />\n <div className=\"relative max-w-[528px]\">\n {/* \u9690\u85CF\u7684\u6D4B\u91CF\u5143\u7D20 */}\n <div\n ref={measureRef}\n className=\"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0\"\n style={{ visibility: 'hidden' }}\n />\n <Swiper\n modules={[Autoplay]}\n loop={textGroups.length > 1}\n className=\"h-[44px]\"\n direction=\"vertical\"\n autoplay={{ delay: 5000, disableOnInteraction: false }}\n >\n {textGroups.length > 0 ? (\n textGroups.map((group, index) => (\n <SwiperSlide key={index + 'text-group'}>\n <Text\n html={group}\n as=\"div\"\n className=\"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n ))\n ) : (\n <SwiperSlide>\n <Text\n as=\"div\"\n html={props?.comment?.content}\n className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n )}\n </Swiper>\n </div>\n </div>\n )}\n </div>\n <div\n ref={paginationRef}\n className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n className=\"h-full\"\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full object-cover\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n <div\n className={cn(\n 'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "useImperativeHandle", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "Autoplay", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "withLayout", "gaTrack", "ExposureDetector", "debounce", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "textGroups", "setTextGroups", "measureRef", "imageClassName", "handlePrevClick", "handleNextClick", "calculateGroups", "measureEl", "twoLinesMaxHeight", "words", "groups", "currentGroup", "i", "word", "testText", "rafId", "handleResize", "jIndex", "exposureKey", "handleExposure", "pictureSource", "group", "ProductGalleryTab3DView", "ProductGallery_default"]
7
7
  }
package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js CHANGED
@@ -1,2 +1,2 @@
1
- import{useState as u,useEffect as w}from"react";import{debounce as l}from"es-toolkit";const a=(e,n=100)=>{const[c,i]=u("");return w(()=>{const o=()=>{const s=Math.ceil(window.scrollY+n);for(let t=e.length-1;t>=0;t--){const r=document.getElementById(e[t]);if(r){const d=Math.ceil(r.getBoundingClientRect().top+window.scrollY);if(s>=d){i(e[t]);break}}}};return o(),window.addEventListener("scroll",l(o,50)),()=>{window.removeEventListener("scroll",l(o,50))}},[e,n]),c};export{a as useScrollSpy};
1
+ import{useState as f,useEffect as u}from"react";import{debounce as a}from"es-toolkit";const w=(e,t=100)=>{const[i,s]=f("");return u(()=>{const n=()=>{const d=Math.ceil(window.scrollY+t+10);for(let o=e.length-1;o>=0;o--){const c=document.getElementById(e[o]);if(c){const r=Math.ceil(c.getBoundingClientRect().top+window.scrollY);if(console.log(r,"offsetTop"),d>=r){s(e[o]);break}}}};n();const l=a(n,50);return window.addEventListener("scroll",l),()=>{window.removeEventListener("scroll",l)}},[e,t]),i};export{w as useScrollSpy};
2
2
  //# sourceMappingURL=useScrollSpy.js.map
package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.tsx"],
4
- "sourcesContent": ["import { useState, useEffect } from 'react'\nimport { debounce } from 'es-toolkit'\n\nconst useScrollSpy = (sectionIds: string[], offset = 100) => {\n const [activeId, setActiveId] = useState('')\n\n useEffect(() => {\n const handleScroll = () => {\n const scrollPosition = Math.ceil(window.scrollY + offset)\n\n // \u904D\u5386\u6240\u6709section\uFF0C\u627E\u5230\u5F53\u524D\u53EF\u89C6\u533A\u57DF\u5185\u7684section\n for (let i = sectionIds.length - 1; i >= 0; i--) {\n const section = document.getElementById(sectionIds[i])\n if (section) {\n const offsetTop = Math.ceil(section.getBoundingClientRect().top + window.scrollY)\n if (scrollPosition >= offsetTop) {\n setActiveId(sectionIds[i])\n break\n }\n }\n }\n }\n\n // \u521D\u59CB\u5316\u65F6\u6267\u884C\u4E00\u6B21\n handleScroll()\n\n // \u76D1\u542C\u6EDA\u52A8\u4E8B\u4EF6\n window.addEventListener('scroll', debounce(handleScroll, 50))\n\n return () => {\n window.removeEventListener('scroll', debounce(handleScroll, 50))\n }\n }, [sectionIds, offset])\n\n return activeId\n}\n\nexport { useScrollSpy }\n"],
5
- "mappings": "AAAA,OAAS,YAAAA,EAAU,aAAAC,MAAiB,QACpC,OAAS,YAAAC,MAAgB,aAEzB,MAAMC,EAAe,CAACC,EAAsBC,EAAS,MAAQ,CAC3D,KAAM,CAACC,EAAUC,CAAW,EAAIP,EAAS,EAAE,EAE3C,OAAAC,EAAU,IAAM,CACd,MAAMO,EAAe,IAAM,CACzB,MAAMC,EAAiB,KAAK,KAAK,OAAO,QAAUJ,CAAM,EAGxD,QAASK,EAAIN,EAAW,OAAS,EAAGM,GAAK,EAAGA,IAAK,CAC/C,MAAMC,EAAU,SAAS,eAAeP,EAAWM,CAAC,CAAC,EACrD,GAAIC,EAAS,CACX,MAAMC,EAAY,KAAK,KAAKD,EAAQ,sBAAsB,EAAE,IAAM,OAAO,OAAO,EAChF,GAAIF,GAAkBG,EAAW,CAC/BL,EAAYH,EAAWM,CAAC,CAAC,EACzB,KACF,CACF,CACF,CACF,EAGA,OAAAF,EAAa,EAGb,OAAO,iBAAiB,SAAUN,EAASM,EAAc,EAAE,CAAC,EAErD,IAAM,CACX,OAAO,oBAAoB,SAAUN,EAASM,EAAc,EAAE,CAAC,CACjE,CACF,EAAG,CAACJ,EAAYC,CAAM,CAAC,EAEhBC,CACT",
6
- "names": ["useState", "useEffect", "debounce", "useScrollSpy", "sectionIds", "offset", "activeId", "setActiveId", "handleScroll", "scrollPosition", "i", "section", "offsetTop"]
4
+ "sourcesContent": ["import { useState, useEffect } from 'react'\nimport { debounce } from 'es-toolkit'\n\nconst useScrollSpy = (sectionIds: string[], offset = 100) => {\n const [activeId, setActiveId] = useState('')\n\n useEffect(() => {\n const handleScroll = () => {\n const scrollPosition = Math.ceil(window.scrollY + offset + 10)\n\n // \u904D\u5386\u6240\u6709section\uFF0C\u627E\u5230\u5F53\u524D\u53EF\u89C6\u533A\u57DF\u5185\u7684section\n for (let i = sectionIds.length - 1; i >= 0; i--) {\n const section = document.getElementById(sectionIds[i])\n if (section) {\n const offsetTop = Math.ceil(section.getBoundingClientRect().top + window.scrollY)\n console.log(offsetTop, 'offsetTop')\n if (scrollPosition >= offsetTop) {\n setActiveId(sectionIds[i])\n break\n }\n }\n }\n }\n\n // \u521D\u59CB\u5316\u65F6\u6267\u884C\u4E00\u6B21\n handleScroll()\n\n // \u521B\u5EFAdebounce\u51FD\u6570\u5E76\u4FDD\u5B58\u5F15\u7528\uFF0C\u786E\u4FDD\u80FD\u6B63\u786E\u79FB\u9664\u76D1\u542C\u5668\n const debouncedHandleScroll = debounce(handleScroll, 50)\n window.addEventListener('scroll', debouncedHandleScroll)\n\n return () => {\n window.removeEventListener('scroll', debouncedHandleScroll)\n }\n }, [sectionIds, offset])\n\n return activeId\n}\n\nexport { useScrollSpy }\n"],
5
+ "mappings": "AAAA,OAAS,YAAAA,EAAU,aAAAC,MAAiB,QACpC,OAAS,YAAAC,MAAgB,aAEzB,MAAMC,EAAe,CAACC,EAAsBC,EAAS,MAAQ,CAC3D,KAAM,CAACC,EAAUC,CAAW,EAAIP,EAAS,EAAE,EAE3C,OAAAC,EAAU,IAAM,CACd,MAAMO,EAAe,IAAM,CACzB,MAAMC,EAAiB,KAAK,KAAK,OAAO,QAAUJ,EAAS,EAAE,EAG7D,QAASK,EAAIN,EAAW,OAAS,EAAGM,GAAK,EAAGA,IAAK,CAC/C,MAAMC,EAAU,SAAS,eAAeP,EAAWM,CAAC,CAAC,EACrD,GAAIC,EAAS,CACX,MAAMC,EAAY,KAAK,KAAKD,EAAQ,sBAAsB,EAAE,IAAM,OAAO,OAAO,EAEhF,GADA,QAAQ,IAAIC,EAAW,WAAW,EAC9BH,GAAkBG,EAAW,CAC/BL,EAAYH,EAAWM,CAAC,CAAC,EACzB,KACF,CACF,CACF,CACF,EAGAF,EAAa,EAGb,MAAMK,EAAwBX,EAASM,EAAc,EAAE,EACvD,cAAO,iBAAiB,SAAUK,CAAqB,EAEhD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,CACF,EAAG,CAACT,EAAYC,CAAM,CAAC,EAEhBC,CACT",
6
+ "names": ["useState", "useEffect", "debounce", "useScrollSpy", "sectionIds", "offset", "activeId", "setActiveId", "handleScroll", "scrollPosition", "i", "section", "offsetTop", "debouncedHandleScroll"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.9-alpha.1764843603699",
3
+ "version": "1.1.9-alpha.1764915120297",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",