@anker-in/headless-ui 1.3.19 → 1.3.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/BuyOneGetOneShelf/PriceAndActions.d.ts +1 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/PriceAndActions.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/PriceAndActions.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.d.ts +1 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductImage.d.ts +2 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductImage.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductImage.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductInfo.d.ts +2 -5
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductInfo.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductInfo.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/types.d.ts +2 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/types.js.map +1 -1
- package/dist/cjs/biz-components/EventSchedule/index.d.ts +2 -2
- package/dist/cjs/biz-components/EventSchedule/index.js +1 -1
- package/dist/cjs/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +2 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.d.ts +22 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js +2 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js.map +7 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.d.ts +18 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js.map +1 -1
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +3 -3
- package/dist/cjs/shared/Styles.d.ts +2 -0
- package/dist/cjs/shared/Styles.js +1 -1
- package/dist/cjs/shared/Styles.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.d.ts +1 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.d.ts +1 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductImage.d.ts +2 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductImage.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductImage.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductInfo.d.ts +2 -5
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductInfo.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductInfo.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/types.d.ts +2 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/types.js.map +1 -1
- package/dist/esm/biz-components/EventSchedule/index.d.ts +2 -2
- package/dist/esm/biz-components/EventSchedule/index.js +1 -1
- package/dist/esm/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +2 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.d.ts +22 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js +2 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js.map +7 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/types.d.ts +18 -0
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +3 -3
- package/dist/esm/shared/Styles.d.ts +2 -0
- package/dist/esm/shared/Styles.js +1 -1
- package/dist/esm/shared/Styles.js.map +3 -3
- package/package.json +1 -1
- package/style.css +21 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var W=Object.create;var _=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var se=(s,a)=>{for(var o in a)_(s,o,{get:a[o],enumerable:!0})},D=(s,a,o,k)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of ee(a))!ae.call(s,p)&&p!==o&&_(s,p,{get:()=>a[p],enumerable:!(k=X(a,p))||k.enumerable});return s};var C=(s,a,o)=>(o=s!=null?W(te(s)):{},D(a||!s||!s.__esModule?_(o,"default",{value:s,enumerable:!0}):o,s)),le=s=>D(_({},"__esModule",{value:!0}),s);var ie={};se(ie,{default:()=>oe});module.exports=le(ie);var e=require("react/jsx-runtime"),r=C(require("react")),Q=require("react-responsive"),Y=require("../../shared/Styles.js"),R=C(require("../../components/picture.js")),U=C(require("../../components/button.js")),E=require("../../components/heading.js"),q=require("../VideoModal/index.js"),I=require("../../components/grid.js"),O=C(require("../Title/index.js")),i=require("../../helpers/utils.js"),S=C(require("../SwiperBox/index.js")),H=require("../../shared/mimeType.js"),y=require("../../components/tabs.js"),Z=require("../../hooks/useExposure.js"),z=require("../../shared/trackUrlRef.js"),F=require("../AiuiProvider/index.js"),J=require("../../shared/track.js");const g="image",v="p1_banner",L=({data:s,configuration:a,jIndex:o,spanType:k,title:p,onSecondaryButtonClick:M,onPrimaryButtonClick:j})=>{const[w,n]=(0,r.useState)(!1),P=(0,Q.useMediaQuery)({query:"(max-width: 768px)"}),B=(0,r.useRef)(null),b=()=>{if(k)switch(k){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(a?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,Z.useExposure)(B,{componentType:g,componentName:v,position:o,componentTitle:s.title,componentDescription:s.description,navigation:a?.activeTab}),(0,r.useEffect)(()=>{n(P)},[P]);const{theme:G="light",title:c,description:h,imageUrl:d,primaryButton:x,secondaryButton:f,imageMobileUrl:u,blockLink:N,video:T,youtubeId:m,isYouTube:V,id:$}=s,t="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,i.cn)("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",b(),{"rounded-2xl":a?.shape==="rounded","aiui-dark":G==="dark","h-[400px]":w},"text-info-primary"),ref:B,children:[(N||f.link)&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,z.trackUrlRef)((0,i.getLocalizedPath)(N||f.link||"",a?.locale||"us"),`${g}_${v}`),"data-headless-type-name":`${g}#${v}`,"data-headless-title-desc-button":`${c}#${h}`,"data-headless-nav-position":`${a?.activeTab}#${o}`,"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,H.isVideo)(d?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:(0,e.jsx)("source",{src:d?.url,type:"video/mp4"})}):(0,e.jsx)(R.default,{source:d?.url,alt:d?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${d?.width}/${d?.height}`}}),(0,H.isVideo)(u?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:(0,e.jsx)("source",{src:u?.url,type:"video/mp4"})}):(0,e.jsx)(R.default,{source:u?.url||d?.url,alt:u?.alt||d?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),(0,e.jsxs)("div",{className:(0,i.cn)("pointer-events-none absolute inset-0 z-20 flex flex-col",k==="full"?"laptop:justify-center justify-end":"justify-end"),children:[(0,e.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4",children:[(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)(E.Heading,{size:3,as:"h3",className:"item-title",html:c}),(0,e.jsx)(E.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",html:h})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[f&&f.text&&(0,e.jsxs)(U.default,{"aria-label":c??h,className:(0,i.cn)(t,"link-left"),variant:"secondary",as:"a","data-track":`${$}-link-left`,onClick:()=>{M?.(s)},href:(0,z.trackUrlRef)((0,i.getLocalizedPath)(f.link||"",a?.locale||"us"),`${g}_${v}`),"data-headless-type-name":`${g}#${v}`,"data-headless-title-desc-button":`${c}#${h}#${f.text}`,"data-headless-nav-position":`${a?.activeTab}#${o}`,children:[f.text,(0,e.jsx)("span",{className:"sr-only",children:c??h})]}),x&&x.text&&(0,e.jsx)(U.default,{"aria-label":c??h,className:(0,i.cn)(t,"link-right"),variant:"primary","data-track":`${$}-link-right`,as:"a",onClick:()=>{j?.(s)},href:(0,z.trackUrlRef)((0,i.getLocalizedPath)(x.link||"",a?.locale||"us"),`${g}_${v}`),"data-headless-type-name":`${g}#${v}`,"data-headless-title-desc-button":`${c}#${h}#${x.text}`,"data-headless-nav-position":`${a?.activeTab}#${o}`,children:x.text})]})]}),(T?.url||m)&&(0,e.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4",children:(0,e.jsx)("button",{onClick:()=>{a?.onVideoPlayBtnClick?.(V&&m?m:T?.url||m,V)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]})]})},A=r.default.forwardRef((s,a)=>{const{data:o,className:k,onSecondaryButtonClick:p,onPrimaryButtonClick:M,...j}=s,{shape:w,sectionTitle:n,groupByTab:P=!1,items:B=[],carousel:b}=o,[G,c]=(0,r.useState)(!1),[h,d]=(0,r.useState)(""),[x,f]=(0,r.useState)(""),{locale:u="us"}=(0,F.useAiuiContext)(),N=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},T=B.map(t=>t.tabName).filter(Boolean).filter((t,l,K)=>K.indexOf(t)===l),m=(t,l)=>{c(!0),l?f?.(t||""):d?.(t||"")},V=(t,l)=>{switch(t){case 1:return 1;case 2:return 2;default:return l?2.3:3}},$=T.map(t=>({tabName:t,items:B.filter(l=>l.tabName===t)})).reduce((t,l)=>(t[l.tabName]=l.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:a,...j,className:(0,i.cn)("multiLayoutGraphicBlock","text-info-primary",k),children:[n&&(0,e.jsx)(O.default,{data:{title:n},className:"section-title"}),P?(0,e.jsxs)(y.Tabs,{shape:w,align:"left",defaultValue:(0,i.spaceToHyphen)(T[0]),children:[(0,e.jsx)(y.TabsList,{children:T.map((t,l)=>(0,e.jsx)(y.TabsTrigger,{value:(0,i.spaceToHyphen)(t),onClick:()=>{(0,J.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:g,component_name:v,component_title:n,component_position:1,navigation:t,button_name:t}})},children:t},l))}),T.map((t,l)=>(0,e.jsx)(y.TabsContent,{value:(0,i.spaceToHyphen)(t),className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(S.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:$?.[t]||[],configuration:{shape:w,isTab:P,activeTab:t,title:n,num:$?.[t]?.length||0,locale:u,onVideoPlayBtnClick:m,onSecondaryButtonClick:p,onPrimaryButtonClick:M}},Slide:L,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:V($?.[t]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:V($?.[t]?.length||0)}}}),b&&b?.items.length>0?(0,e.jsx)(S.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:b?.items||[],configuration:{shape:w,isTab:P,locale:u,onVideoPlayBtnClick:m,title:n,onSecondaryButtonClick:p,onPrimaryButtonClick:M}},Slide:L,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},l))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(I.Grid,{className:"w-full",children:[B.map((t,l)=>(0,e.jsx)(I.GridItem,{span:N(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(L,{data:t,configuration:{shape:w,locale:u,onVideoPlayBtnClick:m,title:n},jIndex:l,spanType:t.width,onSecondaryButtonClick:p,onPrimaryButtonClick:M})},`${t?.title||""}${l}`)),B.map((t,l)=>(0,e.jsx)(I.GridItem,{span:N("full"),className:"laptop:hidden block",children:(0,e.jsx)(L,{data:t,configuration:{shape:w,locale:u,onVideoPlayBtnClick:m,title:n},jIndex:l,spanType:"full"})},`${t?.title||""}${l}`))]}),b&&b?.items.length>0?(0,e.jsx)(S.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:b?.items||[],configuration:{shape:w,locale:u,onVideoPlayBtnClick:m,title:n,onSecondaryButtonClick:p,onPrimaryButtonClick:M}},Slide:L,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),G&&(0,e.jsx)(q.VideoModal,{visible:G,youTubeId:x,videoUrl:h,onCloseModal:()=>c(!1)})]})});A.displayName="MultiLayoutGraphicBlock";var oe=(0,Y.withLayout)(A);
|
|
1
|
+
"use strict";var X=Object.create;var _=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var le=(s,a)=>{for(var o in a)_(s,o,{get:a[o],enumerable:!0})},D=(s,a,o,h)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of te(a))!se.call(s,p)&&p!==o&&_(s,p,{get:()=>a[p],enumerable:!(h=ee(a,p))||h.enumerable});return s};var N=(s,a,o)=>(o=s!=null?X(ae(s)):{},D(a||!s||!s.__esModule?_(o,"default",{value:s,enumerable:!0}):o,s)),oe=s=>D(_({},"__esModule",{value:!0}),s);var pe={};le(pe,{default:()=>ie});module.exports=oe(pe);var e=require("react/jsx-runtime"),n=N(require("react")),Q=require("react-responsive"),Y=N(require("./MultiLayoutGraphicBlockCarousel.js")),q=require("../../shared/Styles.js"),j=N(require("../../components/picture.js")),E=N(require("../../components/button.js")),H=require("../../components/heading.js"),O=require("../VideoModal/index.js"),I=require("../../components/grid.js"),Z=N(require("../Title/index.js")),i=require("../../helpers/utils.js"),z=N(require("../SwiperBox/index.js")),U=require("../../shared/mimeType.js"),B=require("../../components/tabs.js"),F=require("../../hooks/useExposure.js"),R=require("../../shared/trackUrlRef.js"),J=require("../AiuiProvider/index.js"),K=require("../../shared/track.js");const y="image",v="p1_banner",L=({data:s,configuration:a,jIndex:o,spanType:h,title:p,onSecondaryButtonClick:x,onPrimaryButtonClick:G})=>{const[w,r]=(0,n.useState)(!1),$=(0,Q.useMediaQuery)({query:"(max-width: 768px)"}),b=(0,n.useRef)(null),g=()=>{if(h)switch(h){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(a?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,F.useExposure)(b,{componentType:y,componentName:v,position:o,componentTitle:s.title,componentDescription:s.description,navigation:a?.activeTab}),(0,n.useEffect)(()=>{r($)},[$]);const{theme:S="light",title:c,description:f,imageUrl:d,primaryButton:T,secondaryButton:k,imageMobileUrl:u,blockLink:C,video:M,youtubeId:m,isYouTube:V,id:P}=s,t="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,i.cn)("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",g(),{"rounded-2xl":a?.shape==="rounded","aiui-dark":S==="dark","h-[400px]":w},"text-info-primary"),ref:b,children:[(C||k.link)&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,R.trackUrlRef)((0,i.getLocalizedPath)(C||k.link||"",a?.locale||"us"),`${y}_${v}`),"data-headless-type-name":`${y}#${v}`,"data-headless-title-desc-button":`${c}#${f}`,"data-headless-nav-position":`${a?.activeTab}#${o}`,"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,U.isVideo)(d?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:(0,e.jsx)("source",{src:d?.url,type:"video/mp4"})}):(0,e.jsx)(j.default,{source:d?.url,alt:d?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${d?.width}/${d?.height}`}}),(0,U.isVideo)(u?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:(0,e.jsx)("source",{src:u?.url,type:"video/mp4"})}):(0,e.jsx)(j.default,{source:u?.url||d?.url,alt:u?.alt||d?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),(0,e.jsxs)("div",{className:(0,i.cn)("pointer-events-none absolute inset-0 z-20 flex flex-col",h==="full"?"laptop:justify-center justify-end":"justify-end"),children:[(0,e.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4",children:[(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)(H.Heading,{size:3,as:"h3",className:"item-title",html:c}),(0,e.jsx)(H.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",html:f})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[k&&k.text&&(0,e.jsxs)(E.default,{"aria-label":c??f,className:(0,i.cn)(t,"link-left"),variant:"secondary",as:"a","data-track":`${P}-link-left`,onClick:()=>{x?.(s)},href:(0,R.trackUrlRef)((0,i.getLocalizedPath)(k.link||"",a?.locale||"us"),`${y}_${v}`),"data-headless-type-name":`${y}#${v}`,"data-headless-title-desc-button":`${c}#${f}#${k.text}`,"data-headless-nav-position":`${a?.activeTab}#${o}`,children:[k.text,(0,e.jsx)("span",{className:"sr-only",children:c??f})]}),T&&T.text&&(0,e.jsx)(E.default,{"aria-label":c??f,className:(0,i.cn)(t,"link-right"),variant:"primary","data-track":`${P}-link-right`,as:"a",onClick:()=>{G?.(s)},href:(0,R.trackUrlRef)((0,i.getLocalizedPath)(T.link||"",a?.locale||"us"),`${y}_${v}`),"data-headless-type-name":`${y}#${v}`,"data-headless-title-desc-button":`${c}#${f}#${T.text}`,"data-headless-nav-position":`${a?.activeTab}#${o}`,children:T.text})]})]}),(M?.url||m)&&(0,e.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4",children:(0,e.jsx)("button",{onClick:()=>{a?.onVideoPlayBtnClick?.(V&&m?m:M?.url||m,V)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]})]})},A=n.default.forwardRef((s,a)=>{const{data:o,className:h,onSecondaryButtonClick:p,onPrimaryButtonClick:x,...G}=s,{shape:w,sectionTitle:r,groupByTab:$=!1,items:b=[],carousel:g}=o,[S,c]=(0,n.useState)(!1),[f,d]=(0,n.useState)(""),[T,k]=(0,n.useState)(""),{locale:u="us"}=(0,J.useAiuiContext)(),C=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},M=b.map(t=>t.tabName).filter(Boolean).filter((t,l,W)=>W.indexOf(t)===l),m=(t,l)=>{c(!0),l?k?.(t||""):d?.(t||"")},V=(t,l)=>{switch(t){case 1:return 1;case 2:return 2;default:return l?2.3:3}},P=M.map(t=>({tabName:t,items:b.filter(l=>l.tabName===t)})).reduce((t,l)=>(t[l.tabName]=l.items,t),{});return o.mode==="carousel"&&b.length>0?(0,e.jsx)(Y.default,{data:o,onPrimaryButtonClick:x,onSecondaryButtonClick:p,className:h,ref:a,...G}):(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:a,...G,className:(0,i.cn)("multiLayoutGraphicBlock","text-info-primary",h),children:[r&&(0,e.jsx)(Z.default,{data:{title:r},className:"section-title"}),$?(0,e.jsxs)(B.Tabs,{shape:w,align:"left",defaultValue:(0,i.spaceToHyphen)(M[0]),children:[(0,e.jsx)(B.TabsList,{children:M.map((t,l)=>(0,e.jsx)(B.TabsTrigger,{value:(0,i.spaceToHyphen)(t),onClick:()=>{(0,K.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:y,component_name:v,component_title:r,component_position:1,navigation:t,button_name:t}})},children:t},l))}),M.map((t,l)=>(0,e.jsx)(B.TabsContent,{value:(0,i.spaceToHyphen)(t),className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(z.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:P?.[t]||[],configuration:{shape:w,isTab:$,activeTab:t,title:r,num:P?.[t]?.length||0,locale:u,onVideoPlayBtnClick:m,onSecondaryButtonClick:p,onPrimaryButtonClick:x}},Slide:L,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:V(P?.[t]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:V(P?.[t]?.length||0)}}}),g&&g?.items.length>0?(0,e.jsx)(z.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:g?.items||[],configuration:{shape:w,isTab:$,locale:u,onVideoPlayBtnClick:m,title:r,onSecondaryButtonClick:p,onPrimaryButtonClick:x}},Slide:L,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},l))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(I.Grid,{className:"w-full",children:[b.map((t,l)=>(0,e.jsx)(I.GridItem,{span:C(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(L,{data:t,configuration:{shape:w,locale:u,onVideoPlayBtnClick:m,title:r},jIndex:l,spanType:t.width,onSecondaryButtonClick:p,onPrimaryButtonClick:x})},`${t?.title||""}${l}`)),b.map((t,l)=>(0,e.jsx)(I.GridItem,{span:C("full"),className:"laptop:hidden block",children:(0,e.jsx)(L,{data:t,configuration:{shape:w,locale:u,onVideoPlayBtnClick:m,title:r},jIndex:l,spanType:"full"})},`${t?.title||""}${l}`))]}),g&&g?.items.length>0?(0,e.jsx)(z.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:g?.items||[],configuration:{shape:w,locale:u,onVideoPlayBtnClick:m,title:r,onSecondaryButtonClick:p,onPrimaryButtonClick:x}},Slide:L,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),S&&(0,e.jsx)(O.VideoModal,{visible:S,youTubeId:T,videoUrl:f,onCloseModal:()=>c(!1)})]})});A.displayName="MultiLayoutGraphicBlock";var ie=(0,q.withLayout)(A,{container:{desktopSpan:12,mobileSpan:12}});
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n title: titleProp,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n title?: string\n onSecondaryButtonClick?: (data: Item) => void\n onPrimaryButtonClick?: (data: Item) => void\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 'one-third':\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n id,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper cursor-pointer',\n 'text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {(blockLink || secondaryButton.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n </div>\n <div\n className={cn(\n 'pointer-events-none absolute inset-0 z-20 flex flex-col',\n spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n )}\n >\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n data-track={`${id}-link-left`}\n onClick={() => {\n onSecondaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n data-track={`${id}-link-right`}\n as=\"a\"\n onClick={() => {\n onPrimaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n {(video?.url || youtubeId) && (\n <div className=\"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4\">\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(\n isYouTube && youtubeId ? youtubeId : video?.url || youtubeId,\n isYouTube\n )\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section\n data-ui-component-id=\"MultiLayoutGraphicBlock\"\n ref={ref}\n {...rest}\n className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={spaceToHyphen(tabName!)}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n title: sectionTitle,\n num: tabItemsMaps?.[tabName]?.length || 0,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{\n list: carousel?.items || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock\n data={item}\n configuration={{\n shape: shape,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={item.width}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock\n data={item}\n configuration={{\n shape: shape,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={'full'}\n />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: carousel?.items || [],\n configuration: {\n shape: shape,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_grid", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "data", "className", "rest", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport MultiLayoutGraphicBlockCarouselImpl from './MultiLayoutGraphicBlockCarousel.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n title: titleProp,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n title?: string\n onSecondaryButtonClick?: (data: Item) => void\n onPrimaryButtonClick?: (data: Item) => void\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 'one-third':\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n id,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper cursor-pointer',\n 'text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {(blockLink || secondaryButton.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n </div>\n <div\n className={cn(\n 'pointer-events-none absolute inset-0 z-20 flex flex-col',\n spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n )}\n >\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n data-track={`${id}-link-left`}\n onClick={() => {\n onSecondaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n data-track={`${id}-link-right`}\n as=\"a\"\n onClick={() => {\n onPrimaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n {(video?.url || youtubeId) && (\n <div className=\"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4\">\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(\n isYouTube && youtubeId ? youtubeId : video?.url || youtubeId,\n isYouTube\n )\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n // Carousel mode early return \u2014 MUST be after all hooks (React rules of hooks)\n if (data.mode === 'carousel' && items.length > 0) {\n return (\n <MultiLayoutGraphicBlockCarouselImpl\n data={data}\n onPrimaryButtonClick={onPrimaryButtonClick}\n onSecondaryButtonClick={onSecondaryButtonClick}\n className={className}\n ref={ref as React.Ref<HTMLElement>}\n {...rest}\n />\n )\n }\n\n return (\n <section\n data-ui-component-id=\"MultiLayoutGraphicBlock\"\n ref={ref}\n {...rest}\n className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={spaceToHyphen(tabName!)}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n title: sectionTitle,\n num: tabItemsMaps?.[tabName]?.length || 0,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{\n list: carousel?.items || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock\n data={item}\n configuration={{\n shape: shape,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={item.width}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock\n data={item}\n configuration={{\n shape: shape,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={'full'}\n />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: carousel?.items || [],\n configuration: {\n shape: shape,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock, {\n container: { desktopSpan: 12, mobileSpan: 12 },\n})\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_MultiLayoutGraphicBlockCarousel", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_grid", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "data", "className", "rest", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlockCarouselImpl", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { MultiLayoutGraphicBlockProps } from './types.js';
|
|
3
|
+
import 'swiper/css';
|
|
4
|
+
import 'swiper/css/navigation';
|
|
5
|
+
import 'swiper/css/pagination';
|
|
6
|
+
interface MultiLayoutGraphicBlockCarouselProps extends React.HTMLAttributes<HTMLElement> {
|
|
7
|
+
data: MultiLayoutGraphicBlockProps['data'];
|
|
8
|
+
onSecondaryButtonClick?: () => void;
|
|
9
|
+
onPrimaryButtonClick?: () => void;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* MultiLayoutGraphicBlockCarousel — full-width banner carousel for MultiLayoutGraphicBlock.
|
|
13
|
+
*
|
|
14
|
+
* Architecture:
|
|
15
|
+
* - slidesPerView=1, loop=true, each Item occupies full-width slide
|
|
16
|
+
* - Arrow buttons: tablet+ visible, hover/focus-within show (matches SecondaryBannerCarousel)
|
|
17
|
+
* - Dots: banner-dot class, active=bg-info-primary w-8 h-2, inactive=bg-info-quaternary size-2
|
|
18
|
+
* - Video pause/play on slide change
|
|
19
|
+
* - No withLayout wrapper (carousel is inner implementation)
|
|
20
|
+
*/
|
|
21
|
+
declare const MultiLayoutGraphicBlockCarousel: React.ForwardRefExoticComponent<MultiLayoutGraphicBlockCarouselProps & React.RefAttributes<HTMLElement>>;
|
|
22
|
+
export default MultiLayoutGraphicBlockCarousel;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";"use client";var F=Object.create;var x=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Y=(o,i)=>{for(var r in i)x(o,r,{get:i[r],enumerable:!0})},z=(o,i,r,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let u of K(i))!X.call(o,u)&&u!==r&&x(o,u,{get:()=>i[u],enumerable:!(m=J(i,u))||m.enumerable});return o};var T=(o,i,r)=>(r=o!=null?F(Q(o)):{},z(i||!o||!o.__esModule?x(r,"default",{value:o,enumerable:!0}):r,o)),Z=o=>z(x({},"__esModule",{value:!0}),o);var ae={};Y(ae,{default:()=>oe});module.exports=Z(ae);var t=require("react/jsx-runtime"),a=T(require("react")),N=require("swiper/react"),c=require("swiper/modules"),s=require("../../helpers/index.js"),_=T(require("../Title/index.js")),p=require("../../components/index.js"),j=require("../../components/text.js"),L=require("../../shared/mimeType.js"),I=require("../AiuiProvider/index.js"),re=require("swiper/css"),ne=require("swiper/css/navigation"),se=require("swiper/css/pagination");const ee=()=>(0,t.jsxs)("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,t.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,t.jsx)("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),te=()=>(0,t.jsxs)("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,t.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,t.jsx)("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),E={sm:"laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]",base:"laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]",lg:"laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]"},P=a.default.forwardRef(({data:o,className:i,onSecondaryButtonClick:r,onPrimaryButtonClick:m,...u},U)=>{const h=o.items||[],v=o.carouselConfig,A=(v?.showArrows??!0)&&h.length>1,S=v?.showDots??!0,d=v?.autoplaySeconds,R=v?.size??"base",f=(0,a.useRef)(null),[H,D]=(0,a.useState)(0),[g,G]=(0,a.useState)(null),b=(0,a.useRef)(h.map(()=>a.default.createRef()));(0,a.useEffect)(()=>{const e=f.current;!e||!g||e.pagination&&(e.pagination.el=g,e.pagination.init(),e.pagination.render(),e.pagination.update())},[g]);const B=(h[H]?.theme??"light")==="dark";(0,a.useEffect)(()=>{const e=()=>{const l=f.current;if(l)if(document.visibilityState==="hidden")l.autoplay?.stop();else{l.autoplay?.start();const y=l.realIndex??0;b.current.forEach((n,k)=>{n.current&&n.current.querySelectorAll("video").forEach(w=>{k!==y&&w.pause()})})}};return document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[]);const q=d!=null&&d>0?[c.Navigation,c.Pagination,c.Autoplay]:[c.Navigation,c.Pagination],O=d!=null&&d>0?{delay:Math.max(d*1e3,3e3),disableOnInteraction:!1}:!1,V=(0,a.useCallback)(e=>{const l=e.realIndex;b.current.forEach((n,k)=>{k!==l&&n.current&&n.current.querySelectorAll("video").forEach(w=>{w.pause(),w.currentTime=0})});const y=b.current[l];y?.current&&y.current.querySelectorAll("video").forEach(n=>{n.paused&&n.play()?.catch(()=>{})}),D(l)},[]),{locale:C}=(0,I.useAiuiContext)(),W=E[R]??E.base,{sectionTitle:M,shape:$}=o;return(0,t.jsxs)("section",{ref:U,className:(0,s.cn)("multilayout-graphic-block-carousel group relative w-full","laptop:overflow-hidden","laptop:block flex flex-col",W,{"aiui-dark":B},i),...u,children:[M&&(0,t.jsx)(_.default,{data:{title:M},className:"section-title"}),(0,t.jsxs)("div",{className:"laptop:h-full laptop:pb-0 relative shrink-0 pb-5",children:[(0,t.jsx)(N.Swiper,{className:"laptop:h-full h-[400px]",onSwiper:e=>f.current=e,onSlideChange:V,modules:q,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,autoplay:O,pagination:S?{clickable:!0,el:g,renderBullet:(e,l)=>`<span class="${l} banner-dot"></span>`}:!1,children:h.map((e,l)=>(0,t.jsx)(N.SwiperSlide,{className:"h-full",children:(0,t.jsxs)("div",{ref:b.current[l],className:(0,s.cn)("item-wrapper text-info-primary relative size-full overflow-hidden",{"aiui-dark":e.theme==="dark","rounded-2xl":$==="rounded"}),children:[(e.blockLink||e.secondaryButton?.link)&&(0,t.jsx)("a",{className:"absolute inset-0 z-10",href:(0,s.getLocalizedPath)(e.blockLink||e.secondaryButton?.link||"",C||"us"),"aria-hidden":"true",tabIndex:-1}),(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,L.isVideo)(e.imageUrl?.mimeType)?(0,t.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:(0,t.jsx)("source",{src:e.imageUrl?.url,type:"video/mp4"})}):(0,t.jsx)(p.Picture,{source:e.imageUrl?.url,alt:e.imageUrl?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full object-cover"}),(0,L.isVideo)(e.imageMobileUrl?.mimeType)?(0,t.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:(0,t.jsx)("source",{src:e.imageMobileUrl?.url,type:"video/mp4"})}):(0,t.jsx)(p.Picture,{source:e.imageMobileUrl?.url||e.imageUrl?.url,alt:e.imageMobileUrl?.alt||e.imageUrl?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full object-cover"})]}),(0,t.jsx)("div",{className:"laptop:justify-center pointer-events-none absolute inset-0 z-20 flex flex-col justify-end",children:(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4",children:[(0,t.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,t.jsx)(p.Heading,{size:3,as:"h3",className:"item-title",html:e.title}),(0,t.jsx)(j.Text,{className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:e.description})]}),(0,t.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[e.secondaryButton?.text&&(0,t.jsxs)(p.Button,{"aria-label":e.title??e.description,className:"link-left",variant:"secondary",as:"a",href:(0,s.getLocalizedPath)(e.secondaryButton.link||"",C||"us"),onClick:r,children:[e.secondaryButton.text,(0,t.jsx)("span",{className:"sr-only",children:e.title??e.description})]}),e.primaryButton?.text&&(0,t.jsxs)(p.Button,{"aria-label":e.title??e.description,className:"link-right",variant:"primary",as:"a",href:(0,s.getLocalizedPath)(e.primaryButton.link||"",C||"us"),onClick:m,children:[e.primaryButton.text,(0,t.jsx)("span",{className:"sr-only",children:e.title??e.description})]})]})]})})]})},l))}),A&&(0,t.jsxs)("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[(0,t.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>f.current?.slidePrev(),"aria-label":"Previous slide",children:(0,t.jsx)(ee,{})}),(0,t.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>f.current?.slideNext(),"aria-label":"Next slide",children:(0,t.jsx)(te,{})})]}),S&&(0,t.jsx)("div",{ref:G,className:(0,s.cn)("multilayout-carousel-pagination swiper-pagination","[&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary","[&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8","[&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2","[&_.banner-dot]:rounded-full [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out","[&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100","absolute !left-1/2 z-20 flex !w-auto !-translate-x-1/2 items-center justify-center gap-2","laptop:!bottom-4 lg-desktop:!bottom-6 !bottom-0",{"aiui-dark":B})})]})]})});P.displayName="MultiLayoutGraphicBlockCarousel";var oe=P;
|
|
2
|
+
//# sourceMappingURL=MultiLayoutGraphicBlockCarousel.js.map
|
package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useCallback, useState, useEffect } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport Title from '../Title/index.js'\nimport { Button, Heading, Picture } from '../../components/index.js'\nimport { Text } from '../../components/text.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { MultiLayoutGraphicBlockProps } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n <svg\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n// \u2500\u2500 Size \u2192 aspect-ratio mapping (aligned with grid full-width) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// \u53C2\u8003 MultiLayoutGraphicBlock.tsx handleAspect() \u4E2D spanType='full' \u7684\u6BD4\u4F8B\n// mobile: h-400px \u56FA\u5B9A\u9AD8\u5EA6\uFF0Ctablet+: aspect-ratio \u5BF9\u9F50 grid full-width\n\nconst sizeClasses: Record<string, string> = {\n sm: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n base: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n lg: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n}\n\n// \u2500\u2500 Props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface MultiLayoutGraphicBlockCarouselProps extends React.HTMLAttributes<HTMLElement> {\n data: MultiLayoutGraphicBlockProps['data']\n onSecondaryButtonClick?: () => void\n onPrimaryButtonClick?: () => void\n}\n\n/**\n * MultiLayoutGraphicBlockCarousel \u2014 full-width banner carousel for MultiLayoutGraphicBlock.\n *\n * Architecture:\n * - slidesPerView=1, loop=true, each Item occupies full-width slide\n * - Arrow buttons: tablet+ visible, hover/focus-within show (matches SecondaryBannerCarousel)\n * - Dots: banner-dot class, active=bg-info-primary w-8 h-2, inactive=bg-info-quaternary size-2\n * - Video pause/play on slide change\n * - No withLayout wrapper (carousel is inner implementation)\n */\nconst MultiLayoutGraphicBlockCarousel = React.forwardRef<HTMLElement, MultiLayoutGraphicBlockCarouselProps>(\n ({ data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest }, ref) => {\n const items = data.items || []\n const carousel = data.carouselConfig\n\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n const showDots = carousel?.showDots ?? true\n const autoplaySeconds = carousel?.autoplaySeconds\n const size = carousel?.size ?? 'base'\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [activeIndex, setActiveIndex] = useState(0)\n const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)\n\n // Slide container refs for imperative video pause via querySelectorAll\n const slideContainerRefs = useRef<React.RefObject<HTMLDivElement>[]>(\n items.map(() => React.createRef<HTMLDivElement>())\n )\n\n // paginationEl \u6302\u8F7D\u540E\u91CD\u65B0\u7ED1\u5B9A Swiper pagination\n // \u89E3\u51B3 next/dynamic + ssr:false \u73AF\u5883\u4E0B Swiper \u521D\u59CB\u5316\u65F6 paginationEl \u5C1A\u4E3A null \u7684\u65F6\u5E8F\u95EE\u9898\n useEffect(() => {\n const swiper = swiperRef.current\n if (!swiper || !paginationEl) return\n if (swiper.pagination) {\n swiper.pagination.el = paginationEl\n swiper.pagination.init()\n swiper.pagination.render()\n swiper.pagination.update()\n }\n }, [paginationEl])\n\n const activeTheme = items[activeIndex]?.theme ?? 'light'\n const isDark = activeTheme === 'dark'\n\n useEffect(() => {\n const handleVisibilityChange = () => {\n const swiper = swiperRef.current\n if (!swiper) return\n\n if (document.visibilityState === 'hidden') {\n swiper.autoplay?.stop()\n } else {\n swiper.autoplay?.start()\n const currentIndex = swiper.realIndex ?? 0\n slideContainerRefs.current.forEach((cRef, i) => {\n if (!cRef.current) return\n cRef.current.querySelectorAll('video').forEach(v => {\n if (i !== currentIndex) v.pause()\n })\n })\n }\n }\n document.addEventListener('visibilitychange', handleVisibilityChange)\n return () => document.removeEventListener('visibilitychange', handleVisibilityChange)\n }, [])\n\n const swiperModules =\n autoplaySeconds != null && autoplaySeconds > 0 ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds != null && autoplaySeconds > 0\n ? { delay: Math.max(autoplaySeconds * 1000, 3000), disableOnInteraction: false }\n : false\n\n const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n slideContainerRefs.current.forEach((cRef, i) => {\n if (i !== newIndex && cRef.current) {\n cRef.current.querySelectorAll('video').forEach(v => {\n v.pause()\n v.currentTime = 0\n })\n }\n })\n const activeContainer = slideContainerRefs.current[newIndex]\n if (activeContainer?.current) {\n activeContainer.current.querySelectorAll('video').forEach(v => {\n if (v.paused) {\n const p = v.play()\n p?.catch(() => {})\n }\n })\n }\n setActiveIndex(newIndex)\n }, [])\n\n const { locale } = useAiuiContext()\n const currentSizeClasses = sizeClasses[size] ?? sizeClasses.base\n const { sectionTitle, shape } = data\n\n return (\n <section\n ref={ref}\n className={cn(\n 'multilayout-graphic-block-carousel group relative w-full',\n 'laptop:overflow-hidden',\n 'laptop:block flex flex-col',\n currentSizeClasses,\n { 'aiui-dark': isDark },\n className\n )}\n {...rest}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n <div className=\"laptop:h-full laptop:pb-0 relative shrink-0 pb-5\">\n <Swiper\n className=\"laptop:h-full h-[400px]\"\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: paginationEl,\n renderBullet: (_index: number, className: string) =>\n `<span class=\"${className} banner-dot\"></span>`,\n }\n : false\n }\n >\n {items.map((item, index) => (\n <SwiperSlide key={index} className=\"h-full\">\n <div\n ref={slideContainerRefs.current[index]}\n className={cn('item-wrapper text-info-primary relative size-full overflow-hidden', {\n 'aiui-dark': item.theme === 'dark',\n 'rounded-2xl': shape === 'rounded',\n })}\n >\n {/* Block link overlay */}\n {(item.blockLink || item.secondaryButton?.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={getLocalizedPath(item.blockLink || item.secondaryButton?.link || '', locale || 'us')}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n\n {/* Background media */}\n <div className=\"absolute inset-0\">\n {isVideo(item.imageUrl?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"tablet:block hidden size-full overflow-hidden object-cover\"\n >\n <source src={item.imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={item.imageUrl?.url}\n alt={item.imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full object-cover\"\n />\n )}\n {isVideo(item.imageMobileUrl?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"tablet:hidden block size-full overflow-hidden object-cover\"\n >\n <source src={item.imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={item.imageMobileUrl?.url || item.imageUrl?.url}\n alt={item.imageMobileUrl?.alt || item.imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full object-cover\"\n />\n )}\n </div>\n\n {/* Text content */}\n <div className=\"laptop:justify-center pointer-events-none absolute inset-0 z-20 flex flex-col justify-end\">\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={item.title} />\n <Text\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={item.description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {item.secondaryButton?.text && (\n <Button\n aria-label={item.title ?? item.description}\n className=\"link-left\"\n variant=\"secondary\"\n as=\"a\"\n href={getLocalizedPath(item.secondaryButton.link || '', locale || 'us')}\n onClick={onSecondaryButtonClick}\n >\n {item.secondaryButton.text}\n <span className=\"sr-only\">{item.title ?? item.description}</span>\n </Button>\n )}\n {item.primaryButton?.text && (\n <Button\n aria-label={item.title ?? item.description}\n className=\"link-right\"\n variant=\"primary\"\n as=\"a\"\n href={getLocalizedPath(item.primaryButton.link || '', locale || 'us')}\n onClick={onPrimaryButtonClick}\n >\n {item.primaryButton.text}\n <span className=\"sr-only\">{item.title ?? item.description}</span>\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* Arrow navigation */}\n {showArrowControls && (\n <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous slide\"\n >\n <ChevronLeft />\n </button>\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next slide\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {/* Pagination dots */}\n {showDots && (\n <div\n ref={setPaginationEl}\n className={cn(\n 'multilayout-carousel-pagination swiper-pagination',\n '[&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary',\n '[&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8',\n '[&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2',\n '[&_.banner-dot]:rounded-full [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out',\n '[&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100',\n 'absolute !left-1/2 z-20 flex !w-auto !-translate-x-1/2 items-center justify-center gap-2',\n 'laptop:!bottom-4 lg-desktop:!bottom-6 !bottom-0',\n { 'aiui-dark': isDark }\n )}\n />\n )}\n </div>\n </section>\n )\n }\n)\n\nMultiLayoutGraphicBlockCarousel.displayName = 'MultiLayoutGraphicBlockCarousel'\n\nexport default MultiLayoutGraphicBlockCarousel\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MultiLayoutGraphicBlockCarousel_exports", "__export", "MultiLayoutGraphicBlockCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_helpers", "import_Title", "import_components", "import_text", "import_mimeType", "import_AiuiProvider", "import_css", "import_navigation", "import_pagination", "ChevronLeft", "ChevronRight", "sizeClasses", "MultiLayoutGraphicBlockCarousel", "React", "data", "className", "onSecondaryButtonClick", "onPrimaryButtonClick", "rest", "ref", "items", "carousel", "showArrowControls", "showDots", "autoplaySeconds", "size", "swiperRef", "activeIndex", "setActiveIndex", "paginationEl", "setPaginationEl", "slideContainerRefs", "swiper", "isDark", "handleVisibilityChange", "currentIndex", "cRef", "i", "v", "swiperModules", "autoplayConfig", "handleSlideChange", "newIndex", "activeContainer", "locale", "currentSizeClasses", "sectionTitle", "shape", "Title", "s", "_index", "item", "index"]
|
|
7
|
+
}
|
|
@@ -23,13 +23,31 @@ export type Item = {
|
|
|
23
23
|
isYouTube?: boolean;
|
|
24
24
|
id?: string;
|
|
25
25
|
};
|
|
26
|
+
export interface MultiLayoutCarouselConfig {
|
|
27
|
+
/** 是否显示 prev/next arrow 导航，items ≥ 2 时有效。默认 true */
|
|
28
|
+
showArrows?: boolean;
|
|
29
|
+
/** 是否显示 dots 分页指示器。默认 true */
|
|
30
|
+
showDots?: boolean;
|
|
31
|
+
/** 循环播放（Swiper loop）。默认 true */
|
|
32
|
+
loop?: boolean;
|
|
33
|
+
/** 自动轮播间隔秒数。未设置或 ≤ 0 时不自动轮播 */
|
|
34
|
+
autoplaySeconds?: number;
|
|
35
|
+
/**
|
|
36
|
+
* Slide 宽高比尺寸，控制 carousel wrapper 高度。
|
|
37
|
+
* sm — 短横幅；base — 标准高度（默认）；lg — 大尺寸
|
|
38
|
+
* @default 'base'
|
|
39
|
+
*/
|
|
40
|
+
size?: 'sm' | 'base' | 'lg';
|
|
41
|
+
}
|
|
26
42
|
export type MultiLayoutGraphicBlockProps = React.HTMLAttributes<HTMLElement> & {
|
|
27
43
|
onSecondaryButtonClick?: () => void;
|
|
28
44
|
onPrimaryButtonClick?: () => void;
|
|
29
45
|
data: {
|
|
30
46
|
shape?: Shape;
|
|
31
47
|
sectionTitle?: string;
|
|
48
|
+
mode?: 'grid' | 'carousel';
|
|
32
49
|
groupByTab?: boolean;
|
|
50
|
+
carouselConfig?: MultiLayoutCarouselConfig;
|
|
33
51
|
items: ({
|
|
34
52
|
width?: 'full' | 'half' | 'one-third';
|
|
35
53
|
} & Item)[];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var u=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of s(t))!l.call(e,o)&&o!==n&&r(e,o,{get:()=>t[o],enumerable:!(i=a(t,o))||i.enumerable});return e};var g=e=>u(r({},"__esModule",{value:!0}),e);var p={};module.exports=g(p);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/types.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n theme?: Theme\n title: string\n description: string\n imageUrl: Media\n imageMobileUrl?: Media\n tabName?: string\n width?: 'full' | 'half' | 'one-third'\n blockLink?: string\n primaryButton: {\n text: string\n link: string\n }\n secondaryButton: {\n text: string\n link: string\n }\n video?: {\n url: string\n }\n youtubeId?: string\n isYouTube?: boolean\n id?: string\n}\n\nexport type MultiLayoutGraphicBlockProps = React.HTMLAttributes<HTMLElement> & {\n onSecondaryButtonClick?: () => void\n onPrimaryButtonClick?: () => void\n data: {\n shape?: Shape\n sectionTitle?: string\n groupByTab?: boolean\n items: ({\n width?: 'full' | 'half' | 'one-third'\n } & Item)[]\n carousel?: {\n items: Item[]\n }\n }\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n theme?: Theme\n title: string\n description: string\n imageUrl: Media\n imageMobileUrl?: Media\n tabName?: string\n width?: 'full' | 'half' | 'one-third'\n blockLink?: string\n primaryButton: {\n text: string\n link: string\n }\n secondaryButton: {\n text: string\n link: string\n }\n video?: {\n url: string\n }\n youtubeId?: string\n isYouTube?: boolean\n id?: string\n}\n\nexport interface MultiLayoutCarouselConfig {\n /** \u662F\u5426\u663E\u793A prev/next arrow \u5BFC\u822A\uFF0Citems \u2265 2 \u65F6\u6709\u6548\u3002\u9ED8\u8BA4 true */\n showArrows?: boolean\n /** \u662F\u5426\u663E\u793A dots \u5206\u9875\u6307\u793A\u5668\u3002\u9ED8\u8BA4 true */\n showDots?: boolean\n /** \u5FAA\u73AF\u64AD\u653E\uFF08Swiper loop\uFF09\u3002\u9ED8\u8BA4 true */\n loop?: boolean\n /** \u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\u79D2\u6570\u3002\u672A\u8BBE\u7F6E\u6216 \u2264 0 \u65F6\u4E0D\u81EA\u52A8\u8F6E\u64AD */\n autoplaySeconds?: number\n /**\n * Slide \u5BBD\u9AD8\u6BD4\u5C3A\u5BF8\uFF0C\u63A7\u5236 carousel wrapper \u9AD8\u5EA6\u3002\n * sm \u2014 \u77ED\u6A2A\u5E45\uFF1Bbase \u2014 \u6807\u51C6\u9AD8\u5EA6\uFF08\u9ED8\u8BA4\uFF09\uFF1Blg \u2014 \u5927\u5C3A\u5BF8\n * @default 'base'\n */\n size?: 'sm' | 'base' | 'lg'\n}\n\nexport type MultiLayoutGraphicBlockProps = React.HTMLAttributes<HTMLElement> & {\n onSecondaryButtonClick?: () => void\n onPrimaryButtonClick?: () => void\n data: {\n shape?: Shape\n sectionTitle?: string\n mode?: 'grid' | 'carousel'\n groupByTab?: boolean\n carouselConfig?: MultiLayoutCarouselConfig\n items: ({\n width?: 'full' | 'half' | 'one-third'\n } & Item)[]\n carousel?: {\n items: Item[]\n }\n }\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var Y=Object.create;var h=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var ne=(o,a)=>{for(var p in a)h(o,p,{get:a[p],enumerable:!0})},A=(o,a,p,k)=>{if(a&&typeof a=="object"||typeof a=="function")for(let x of ee(a))!se.call(o,x)&&x!==p&&h(o,x,{get:()=>a[x],enumerable:!(k=Z(a,x))||k.enumerable});return o};var F=(o,a,p)=>(p=o!=null?Y(te(o)):{},A(a||!o||!o.__esModule?h(p,"default",{value:o,enumerable:!0}):p,o)),oe=o=>A(h({},"__esModule",{value:!0}),o);var le={};ne(le,{default:()=>ae});module.exports=oe(le);var e=require("react/jsx-runtime"),H=F(require("./dropdown.js")),P=require("../AiuiProvider/index.js"),R=require("react-responsive"),m=require("react"),I=require("../../shared/Styles.js"),_=require("../ShelfDisplay/shelfDisplay.js"),r=require("../../components/index.js"),$=require("../../helpers/index.js"),b=F(require("react"));const j=b.default.forwardRef(({data:o,buildData:a,onChange:p,onSecondaryChange:k,className:x,...O},U)=>{const g=(0,R.useMediaQuery)({query:"(max-width: 768px)"}),[d,w]=(0,m.useState)({}),[y,V]=(0,m.useState)([]),[S,L]=(0,m.useState)(!1),[N,M]=(0,m.useState)({}),D=(0,b.useRef)(null),{locale:B="us",currencyDisplay:z,trackingData:q}=(0,P.useAiuiContext)(),Q=q?.showComparePrice??!0,{LeftMenu:C,RightMenu:E,DefaultSelectMenu:v}=(0,m.useMemo)(()=>o?.data||{},[o?.data]),W=t=>{try{const n=new URL(t).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(n)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(t)}},G=(t,s)=>{const n=t?.variants?.find?.(f=>f?.sku===t?.sku),l=n?.coupons?.[0],{price:u,basePrice:i}=(0,_.formatVariantPrice)({locale:B||"us",amount:l?l?.variant_price4wscode:n?.price,baseAmount:l?n?.price:0,currencyDisplay:z,currencyCode:t?.price?.currencyCode||"USD"}),c=typeof v?.buttonText=="string"?v?.buttonText:v?.buttonText?.[String(s)]||"";return(0,e.jsxs)("div",{className:"specs-sku-node-wrap box-border",children:[(0,e.jsxs)(r.Text,{className:"md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold",onClick:()=>{if(y?.length<=1)return null;M({...N,[s]:!N?.[s]})},children:[(0,e.jsxs)("div",{className:"flex items-center justify-between overflow-hidden",children:[(0,e.jsx)("div",{className:"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base",title:d?.[s]?.name||"",children:d?.[s]?.name||""}),y?.length>1?(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:(0,e.jsx)("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}):null]}),(0,e.jsx)(H.default,{index:s,list:y,active:d,setActive:w,visible:N,setVisible:M})]}),(0,e.jsx)("div",{className:"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]",children:(0,e.jsx)(r.Picture,{source:n?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover hover:scale-105 transition-all duration-300"})}),(0,e.jsx)("div",{className:"lg-desktop:text-2xl mb-2 mt-6 text-xl font-bold",children:(0,e.jsx)("div",{className:"lg-desktop:min-h-[32px] flex min-h-[28px] items-center",children:n?.availableForSale?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"specs-sku-node-price text-[#080A0F]",children:u||""}),Q&&i&&(0,e.jsx)("div",{className:"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through",children:i})]}):null})}),c?(0,e.jsx)(r.Button,{onClick:()=>{p?.(t,s)},className:"specs-sku-node-button",children:c}):null]})},J=t=>t&&typeof t!="string"?(0,e.jsxs)("div",{className:"size-full",children:[(0,e.jsx)("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:t?.text||""}}),(0,e.jsx)(r.Picture,{source:t?.imgUrl,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"})]}):(0,e.jsx)("div",{className:"break-all",children:W(t)?(0,e.jsx)(r.Picture,{source:t,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"}):(0,e.jsx)("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:t||""}})}),T=t=>t.map((s,n)=>{const l=n===0;return(0,e.jsxs)("div",{className:"l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] specs-product-node-wrap",children:[(0,e.jsx)(r.Heading,{as:"h3",html:s||"",className:"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm"}),(0,e.jsx)("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${S?3:2} specs-product-node-body col-span-2 grid flex-1 py-6`,children:Object.keys(d)?.map?.(u=>{const i=d?.[u],c=E?.menus?.find?.(f=>f?.handle===i?.handle)?.subTitle;return J(c?.[s])})})]},s)}),K=t=>{if(!d)return;const{subTitle:s,isProduct:n}=t;return n?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]",children:[t?.title&&(0,e.jsx)(r.Heading,{as:"h3",html:t?.title||"",className:"l:hidden specs-item-product-title"}),(0,e.jsx)("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${S?3:2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`,children:Object.keys(d)?.map((l,u)=>{const i=d?.[l],c=a?.products?.find?.(f=>f?.handle===i?.handle);return(0,e.jsx)("div",{children:G({...c,item:l,sku:i?.sku},u)},l)})})]}),t?.categoryLabel&&(0,e.jsx)(r.Heading,{size:2,as:"h4",html:t?.categoryLabel||"",className:"desktop:p-6 specs-item-product-category py-6"}),s?.length?T(s):null]}):T(s)};return(0,b.useImperativeHandle)(U,()=>D.current),(0,m.useEffect)(()=>{if(!a?.products?.length)return;const t=v?.sku?.split?.(",")||[],s=g&&t?.length>2?t?.slice(0,2):t;let n={};s?.forEach?.((u,i)=>{const c=a?.products?.find?.(f=>{if(f?.variants?.find?.(X=>X?.sku===u))return!0});c&&(n={...n,[i]:{sku:u,name:c?.name||c?.title,handle:c?.handle}})});const l=a?.products?.filter(u=>E?.menus?.find(i=>i?.handle===u?.handle));w(n),V(l),L(t?.length>2&&!g)},[a,g]),(0,m.useEffect)(()=>{if(g){const t=Object.keys(d||{});if(t?.length>2){const s=t?.slice?.(0,2);let n={};s?.forEach?.(l=>{n={...n,[l]:d?.[l]}}),L(!1),w(n)}}},[g]),(0,e.jsx)("div",{...O,className:(0,$.cn)("specs-wrapper w-full overflow-hidden bg-[#F5F5F7]",x),ref:D,children:C?.data?(0,e.jsx)("div",{className:"specs-wrapper-content box-border w-full overflow-hidden",children:C?.data?.map?.((t,s)=>(0,e.jsx)("div",{className:"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0",children:K(t)},s))}):null})});j.displayName="Specs";var ae=(0,I.withLayout)(j);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Specs/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport DropDown from './dropdown.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nexport interface SpecsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n data?: any\n buildData?: any\n onChange?: (product: any, index: number) => void\n onSecondaryChange?: (data: any) => void\n}\n\nconst Specs = React.forwardRef<HTMLDivElement, SpecsProps>(\n ({ data, buildData, onChange, onSecondaryChange, className, ...rest }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const [active, setActive] = useState<any>({})\n const [menuList, setMenuList] = useState<any[]>([])\n const [isShowMax, setIsShowMax] = useState<boolean>(false)\n const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n const { locale = 'us', currencyDisplay } = useAiuiContext()\n\n const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n const isImageUrl = (urlPath: string) => {\n try {\n const url = new URL(urlPath)\n const path = url.pathname.toLowerCase()\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n } catch (e) {\n // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n }\n }\n\n const skuNode = (product: any, index: number) => {\n const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku)\n const coupon = findSku?.coupons?.[0]\n const { price, basePrice } = formatVariantPrice({\n locale: locale || 'us',\n amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n baseAmount: coupon ? findSku?.price : 0,\n currencyDisplay,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n const buttonTextValue =\n typeof DefaultSelectMenu?.buttonText === 'string'\n ? DefaultSelectMenu?.buttonText\n : DefaultSelectMenu?.buttonText?.[String(index)] || ''\n return (\n <div className=\"specs-sku-node-wrap box-border\">\n <Text\n className={`md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold`}\n onClick={() => {\n if (menuList?.length <= 1) return null\n\n setVisibleActive({\n ...visibleActive,\n [index]: !visibleActive?.[index],\n })\n }}\n >\n <div className=\"flex items-center justify-between overflow-hidden\">\n <div\n className=\"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base\"\n title={active?.[index]?.name || ''}\n >\n {active?.[index]?.name || ''}\n </div>\n {menuList?.length > 1 ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n className=\"openDropDown\"\n >\n <path\n d=\"M6 9.5L12 15.5L18 9.5\"\n stroke=\"#1D1D1F\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n ) : null}\n </div>\n <DropDown\n index={index}\n list={menuList}\n active={active}\n setActive={setActive}\n visible={visibleActive}\n setVisible={setVisibleActive}\n />\n </Text>\n <div className=\"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]\">\n <Picture\n source={findSku?.image?.url || ''}\n className=\"aspect-h-[280] aspect-w-[280]\"\n imgClassName=\"w-full h-full object-cover hover:scale-105 transition-all duration-300\"\n />\n </div>\n <div className=\"lg-desktop:text-2xl mb-2 mt-6 text-xl font-bold\">\n <div className=\"lg-desktop:min-h-[32px] flex min-h-[28px] items-center\">\n {findSku?.availableForSale ? (\n <>\n <div className=\"specs-sku-node-price text-[#080A0F]\">{price || ''}</div>\n {basePrice && (\n <div className=\"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through\">\n {basePrice}\n </div>\n )}\n </>\n ) : null}\n </div>\n </div>\n {buttonTextValue ? (\n <Button\n onClick={() => {\n onChange?.(product, index)\n }}\n className=\"specs-sku-node-button\"\n >\n {buttonTextValue}\n </Button>\n ) : null}\n </div>\n )\n }\n\n const normalNode = (v: any) => {\n if (v && typeof v !== 'string') {\n return (\n <div className=\"size-full\">\n <p\n className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n dangerouslySetInnerHTML={{\n __html: v?.text || '',\n }}\n />\n <Picture\n source={v?.imgUrl}\n className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )\n }\n return (\n <div className=\"break-all\">\n {isImageUrl(v) ? (\n <Picture\n source={v}\n className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n ) : (\n <p\n className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n dangerouslySetInnerHTML={{\n __html: v || '',\n }}\n />\n )}\n </div>\n )\n }\n\n const productNode = (data: any) => {\n return data.map((st: any, idx: number) => {\n const isFirstParameter = idx === 0\n return (\n <div\n key={st}\n className={`l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n >\n <Heading\n as=\"h3\"\n html={st || ''}\n className=\"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm\"\n />\n <div\n className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-product-node-body col-span-2 grid flex-1 py-6`}\n >\n {Object.keys(active)?.map?.((item: string) => {\n const currentData = active?.[item]\n const currentMenus = RightMenu?.menus?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )?.subTitle\n return normalNode(currentMenus?.[st])\n })}\n </div>\n </div>\n )\n })\n }\n\n // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n const childrenNode = (node: any) => {\n if (!active) return\n const { subTitle, isProduct } = node\n // \u5982\u679C\u662F\u4EA7\u54C1\n if (isProduct) {\n return (\n <>\n <div\n className={`l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]`}\n >\n {node?.title && (\n <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />\n )}\n <div\n className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`}\n >\n {Object.keys(active)?.map((item: string, index: number) => {\n const currentData = active?.[item]\n const currentProduct = buildData?.products?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )\n return (\n <div key={item}>{skuNode({ ...currentProduct, item: item, sku: currentData?.sku }, index)}</div>\n )\n })}\n </div>\n </div>\n {node?.categoryLabel && (\n <Heading\n size={2}\n as=\"h4\"\n html={node?.categoryLabel || ''}\n className=\"desktop:p-6 specs-item-product-category py-6\"\n />\n )}\n {subTitle?.length ? productNode(subTitle) : null}\n </>\n )\n }\n return productNode(subTitle)\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (!buildData?.products?.length) return\n const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n const limitedSkus = isMobile && skus?.length > 2 ? skus?.slice(0, 2) : skus\n let currentActive = {}\n limitedSkus?.forEach?.((sku: string, index: number) => {\n const findData = buildData?.products?.find?.((item: any) => {\n const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n if (findSku) return true\n })\n if (findData) {\n currentActive = {\n ...currentActive,\n [index]: {\n sku: sku,\n name: findData?.name || findData?.title,\n handle: findData?.handle,\n },\n }\n }\n })\n const currentMenu = buildData?.products?.filter((item: any) => {\n return RightMenu?.menus?.find((params: any) => params?.handle === item?.handle)\n })\n setActive(currentActive)\n setMenuList(currentMenu)\n setIsShowMax(skus?.length > 2 && !isMobile)\n }, [buildData, isMobile])\n\n useEffect(() => {\n if (isMobile) {\n const currentActive = Object.keys(active || {})\n if (currentActive?.length > 2) {\n const newActive = currentActive?.slice?.(0, 2)\n let newShowActive = {}\n newActive?.forEach?.((item: string) => {\n newShowActive = { ...newShowActive, [item]: active?.[item] }\n })\n setIsShowMax(false)\n setActive(newShowActive)\n }\n }\n }, [isMobile])\n\n return (\n <div {...rest} className={cn('specs-wrapper w-full overflow-hidden bg-[#F5F5F7]', className)} ref={innerRef}>\n {LeftMenu?.data ? (\n <div className=\"specs-wrapper-content box-border w-full overflow-hidden\">\n {LeftMenu?.data?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0\"\n >\n {childrenNode(item)}\n </div>\n )\n })}\n </div>\n ) : null}\n </div>\n )\n }\n)\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Specs_exports", "__export", "Specs_default", "__toCommonJS", "import_jsx_runtime", "import_dropdown", "import_AiuiProvider", "import_react_responsive", "import_react", "import_Styles", "import_shelfDisplay", "import_components", "import_helpers", "Specs", "React", "data", "buildData", "onChange", "onSecondaryChange", "className", "rest", "ref", "isMobile", "active", "setActive", "menuList", "setMenuList", "isShowMax", "setIsShowMax", "visibleActive", "setVisibleActive", "innerRef", "locale", "currencyDisplay", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findSku", "item", "coupon", "price", "basePrice", "buttonTextValue", "DropDown", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "limitedSkus", "currentActive", "sku", "findData", "currentMenu", "params", "newActive", "newShowActive"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport DropDown from './dropdown.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nexport interface SpecsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n data?: any\n buildData?: any\n onChange?: (product: any, index: number) => void\n onSecondaryChange?: (data: any) => void\n}\n\nconst Specs = React.forwardRef<HTMLDivElement, SpecsProps>(\n ({ data, buildData, onChange, onSecondaryChange, className, ...rest }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const [active, setActive] = useState<any>({})\n const [menuList, setMenuList] = useState<any[]>([])\n const [isShowMax, setIsShowMax] = useState<boolean>(false)\n const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n const { locale = 'us', currencyDisplay, trackingData } = useAiuiContext()\n\n /** \u662F\u5426\u663E\u793A\u539F\u4EF7\uFF08\u5212\u7EBF\u4EF7\uFF09\uFF0C\u9ED8\u8BA4\u663E\u793A */\n const showComparePrice = trackingData?.showComparePrice ?? true\n\n const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n const isImageUrl = (urlPath: string) => {\n try {\n const url = new URL(urlPath)\n const path = url.pathname.toLowerCase()\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n } catch (e) {\n // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n }\n }\n\n const skuNode = (product: any, index: number) => {\n const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku)\n const coupon = findSku?.coupons?.[0]\n const { price, basePrice } = formatVariantPrice({\n locale: locale || 'us',\n amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n baseAmount: coupon ? findSku?.price : 0,\n currencyDisplay,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n const buttonTextValue =\n typeof DefaultSelectMenu?.buttonText === 'string'\n ? DefaultSelectMenu?.buttonText\n : DefaultSelectMenu?.buttonText?.[String(index)] || ''\n return (\n <div className=\"specs-sku-node-wrap box-border\">\n <Text\n className={`md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold`}\n onClick={() => {\n if (menuList?.length <= 1) return null\n\n setVisibleActive({\n ...visibleActive,\n [index]: !visibleActive?.[index],\n })\n }}\n >\n <div className=\"flex items-center justify-between overflow-hidden\">\n <div\n className=\"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base\"\n title={active?.[index]?.name || ''}\n >\n {active?.[index]?.name || ''}\n </div>\n {menuList?.length > 1 ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n className=\"openDropDown\"\n >\n <path\n d=\"M6 9.5L12 15.5L18 9.5\"\n stroke=\"#1D1D1F\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n ) : null}\n </div>\n <DropDown\n index={index}\n list={menuList}\n active={active}\n setActive={setActive}\n visible={visibleActive}\n setVisible={setVisibleActive}\n />\n </Text>\n <div className=\"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]\">\n <Picture\n source={findSku?.image?.url || ''}\n className=\"aspect-h-[280] aspect-w-[280]\"\n imgClassName=\"w-full h-full object-cover hover:scale-105 transition-all duration-300\"\n />\n </div>\n <div className=\"lg-desktop:text-2xl mb-2 mt-6 text-xl font-bold\">\n <div className=\"lg-desktop:min-h-[32px] flex min-h-[28px] items-center\">\n {findSku?.availableForSale ? (\n <>\n <div className=\"specs-sku-node-price text-[#080A0F]\">{price || ''}</div>\n {showComparePrice && basePrice && (\n <div className=\"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through\">\n {basePrice}\n </div>\n )}\n </>\n ) : null}\n </div>\n </div>\n {buttonTextValue ? (\n <Button\n onClick={() => {\n onChange?.(product, index)\n }}\n className=\"specs-sku-node-button\"\n >\n {buttonTextValue}\n </Button>\n ) : null}\n </div>\n )\n }\n\n const normalNode = (v: any) => {\n if (v && typeof v !== 'string') {\n return (\n <div className=\"size-full\">\n <p\n className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n dangerouslySetInnerHTML={{\n __html: v?.text || '',\n }}\n />\n <Picture\n source={v?.imgUrl}\n className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )\n }\n return (\n <div className=\"break-all\">\n {isImageUrl(v) ? (\n <Picture\n source={v}\n className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n ) : (\n <p\n className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n dangerouslySetInnerHTML={{\n __html: v || '',\n }}\n />\n )}\n </div>\n )\n }\n\n const productNode = (data: any) => {\n return data.map((st: any, idx: number) => {\n const isFirstParameter = idx === 0\n return (\n <div\n key={st}\n className={`l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n >\n <Heading\n as=\"h3\"\n html={st || ''}\n className=\"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm\"\n />\n <div\n className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-product-node-body col-span-2 grid flex-1 py-6`}\n >\n {Object.keys(active)?.map?.((item: string) => {\n const currentData = active?.[item]\n const currentMenus = RightMenu?.menus?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )?.subTitle\n return normalNode(currentMenus?.[st])\n })}\n </div>\n </div>\n )\n })\n }\n\n // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n const childrenNode = (node: any) => {\n if (!active) return\n const { subTitle, isProduct } = node\n // \u5982\u679C\u662F\u4EA7\u54C1\n if (isProduct) {\n return (\n <>\n <div\n className={`l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]`}\n >\n {node?.title && (\n <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />\n )}\n <div\n className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`}\n >\n {Object.keys(active)?.map((item: string, index: number) => {\n const currentData = active?.[item]\n const currentProduct = buildData?.products?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )\n return (\n <div key={item}>{skuNode({ ...currentProduct, item: item, sku: currentData?.sku }, index)}</div>\n )\n })}\n </div>\n </div>\n {node?.categoryLabel && (\n <Heading\n size={2}\n as=\"h4\"\n html={node?.categoryLabel || ''}\n className=\"desktop:p-6 specs-item-product-category py-6\"\n />\n )}\n {subTitle?.length ? productNode(subTitle) : null}\n </>\n )\n }\n return productNode(subTitle)\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (!buildData?.products?.length) return\n const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n const limitedSkus = isMobile && skus?.length > 2 ? skus?.slice(0, 2) : skus\n let currentActive = {}\n limitedSkus?.forEach?.((sku: string, index: number) => {\n const findData = buildData?.products?.find?.((item: any) => {\n const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n if (findSku) return true\n })\n if (findData) {\n currentActive = {\n ...currentActive,\n [index]: {\n sku: sku,\n name: findData?.name || findData?.title,\n handle: findData?.handle,\n },\n }\n }\n })\n const currentMenu = buildData?.products?.filter((item: any) => {\n return RightMenu?.menus?.find((params: any) => params?.handle === item?.handle)\n })\n setActive(currentActive)\n setMenuList(currentMenu)\n setIsShowMax(skus?.length > 2 && !isMobile)\n }, [buildData, isMobile])\n\n useEffect(() => {\n if (isMobile) {\n const currentActive = Object.keys(active || {})\n if (currentActive?.length > 2) {\n const newActive = currentActive?.slice?.(0, 2)\n let newShowActive = {}\n newActive?.forEach?.((item: string) => {\n newShowActive = { ...newShowActive, [item]: active?.[item] }\n })\n setIsShowMax(false)\n setActive(newShowActive)\n }\n }\n }, [isMobile])\n\n return (\n <div {...rest} className={cn('specs-wrapper w-full overflow-hidden bg-[#F5F5F7]', className)} ref={innerRef}>\n {LeftMenu?.data ? (\n <div className=\"specs-wrapper-content box-border w-full overflow-hidden\">\n {LeftMenu?.data?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0\"\n >\n {childrenNode(item)}\n </div>\n )\n })}\n </div>\n ) : null}\n </div>\n )\n }\n)\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Specs_exports", "__export", "Specs_default", "__toCommonJS", "import_jsx_runtime", "import_dropdown", "import_AiuiProvider", "import_react_responsive", "import_react", "import_Styles", "import_shelfDisplay", "import_components", "import_helpers", "Specs", "React", "data", "buildData", "onChange", "onSecondaryChange", "className", "rest", "ref", "isMobile", "active", "setActive", "menuList", "setMenuList", "isShowMax", "setIsShowMax", "visibleActive", "setVisibleActive", "innerRef", "locale", "currencyDisplay", "trackingData", "showComparePrice", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findSku", "item", "coupon", "price", "basePrice", "buttonTextValue", "DropDown", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "limitedSkus", "currentActive", "sku", "findData", "currentMenu", "params", "newActive", "newShowActive"]
|
|
7
7
|
}
|
|
@@ -10,6 +10,7 @@ export interface StylesProps {
|
|
|
10
10
|
uid?: string;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
containerClassName?: string;
|
|
13
|
+
idx?: string;
|
|
13
14
|
}
|
|
14
15
|
type LayoutProps<P> = Omit<P, keyof StylesProps | keyof ContainerProps> & StylesProps & ContainerProps;
|
|
15
16
|
type StaticComponentProperties<T> = Omit<T, keyof React.ComponentType<any> | 'displayName' | 'prototype'>;
|
|
@@ -18,6 +19,7 @@ export declare const useStyles: (styleProps: Partial<StylesProps>, data?: Record
|
|
|
18
19
|
readonly className: `block-${string} `;
|
|
19
20
|
readonly StyleComponent: import("react/jsx-runtime").JSX.Element;
|
|
20
21
|
readonly uid: string;
|
|
22
|
+
readonly idx: string | undefined;
|
|
21
23
|
};
|
|
22
24
|
export declare function withLayout<T extends React.ComponentType<any>>(WrappedComponent: T, defaultLayoutProps?: Partial<StylesProps & ContainerProps>): React.ForwardRefExoticComponent<LayoutProps<React.ComponentProps<T>> & React.RefAttributes<unknown>> & StaticComponentProperties<T>;
|
|
23
25
|
export {};
|