@anker-in/headless-ui 1.1.9-alpha.1764588298949 → 1.1.9-alpha.1764670339416
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/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PaidShipping/LearnMore.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/LearnMore.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.d.ts +2 -0
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js +2 -0
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map +7 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +2 -2
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +2 -2
- package/dist/cjs/biz-components/ProductHero/ProductHero.js +1 -1
- package/dist/cjs/biz-components/ProductHero/ProductHero.js.map +2 -2
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PaidShipping/LearnMore.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/LearnMore.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.d.ts +2 -0
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js +2 -0
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map +7 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +2 -2
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +2 -2
- package/dist/esm/biz-components/ProductHero/ProductHero.js +1 -1
- package/dist/esm/biz-components/ProductHero/ProductHero.js.map +2 -2
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var xe=Object.create;var M=Object.defineProperty;var ue=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var ve=Object.getPrototypeOf,he=Object.prototype.hasOwnProperty;var ge=(l,n)=>{for(var h in n)M(l,h,{get:n[h],enumerable:!0})},Y=(l,n,h,_)=>{if(n&&typeof n=="object"||typeof n=="function")for(let g of fe(n))!he.call(l,g)&&g!==h&&M(l,g,{get:()=>n[g],enumerable:!(_=ue(n,g))||_.enumerable});return l};var _e=(l,n,h)=>(h=l!=null?xe(ve(l)):{},Y(n||!l||!l.__esModule?M(h,"default",{value:l,enumerable:!0}):h,l)),be=l=>Y(M({},"__esModule",{value:!0}),l);var Ne={};ge(Ne,{default:()=>ke});module.exports=be(Ne);var e=require("react/jsx-runtime"),i=_e(require("react")),r=require("../../components/index.js"),m=require("../../helpers/utils.js"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),ie=require("../../hooks/useIntersectionObserver.js"),y=require("framer-motion"),w=require("./types.js");const we="image",ye="image_with_text",Z=i.default.forwardRef(({data:l,className:n},h)=>{const{title:_,subtitle:g,desc:I,descIcon:z,image:k,padImage:H,mobileImage:j,theme:ae="dark",items:W=[],layout:oe="left",mediaType:le="image",datalist:d=[],video:R,padVideo:A,mobVideo:q,cols:V=w.Cols.One,button:N,textAlign:s="left"}=l,x=oe,E=(0,i.useRef)(null),P=(0,i.useRef)(null),S=(0,i.useRef)(null),D=(0,i.useRef)(null),$=(0,i.useRef)(null),[u,se]=(0,i.useState)(0),B=(0,i.useRef)([]),[C,re]=(0,i.useState)({left:0,width:0}),[b,F]=(0,i.useState)(""),[O,G]=(0,i.useState)(""),[J,K]=(0,i.useState)(""),c=d.length>0,T=le==="video";(0,te.useExposure)(E,{componentType:we,componentName:ye,componentTitle:_,componentDescription:g}),(0,i.useImperativeHandle)(h,()=>E.current),(0,i.useEffect)(()=>{if(d.length>0){const t=B.current[u];if(t){const{offsetLeft:o,offsetWidth:a}=t;re({left:o,width:a})}}},[u,d.length]);const[Q,me]=(0,i.useState)(!1);(0,ie.useIntersectionObserverDelay)($,{once:!0,threshold:.01,callback:()=>{me(!0)}}),(0,i.useEffect)(()=>{if(!Q||!T)return;let t="",o="",a="";if(c&&d[u]){const f=d[u];t=f.video?.url||"",o=f.padVideo?.url||t,a=f.mobVideo?.url||t}else t=R?.url||"",o=A?.url||t,a=q?.url||t;t&&F(t),o&&G(o),a&&K(a),setTimeout(()=>{[P.current?.querySelector("video"),S.current?.querySelector("video"),D.current?.querySelector("video")].forEach(v=>{v&&(v.load(),v.play().catch(()=>{}))})},200)},[Q,T,c,u,d,R?.url,A?.url,q?.url]);const de=(t,o)=>{if(se(t),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),T&&c&&d[t]){const a=d[t];a.video?.url&&F(a.video.url),a.padVideo?.url&&G(a.padVideo.url),a.mobVideo?.url&&K(a.mobVideo.url),setTimeout(()=>{[P.current?.querySelector("video"),S.current?.querySelector("video"),D.current?.querySelector("video")].forEach(v=>{v&&(v.load(),v.play().catch(()=>{}))})},300)}},ne=()=>!L||!N?.text?null:(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":s==="center","flex justify-start":s==="left"}),children:(0,e.jsx)(r.Button,{as:"a",href:N.link,variant:N.variant||"secondary",size:"base",className:"image-with-text__button",children:N.text})}),p=W.length>0,L=!!N,U=()=>{if(c&&d[u]){const t=d[u];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return k?`${k?.url},${H?.url||k?.url} 1024, ${j?.url||k?.url} 768`:""},X=()=>{if(c){const f=d[u],v=f.image?.url,ce=f.imgPad?.url||v,pe=f.imageMob?.url||v;return(0,e.jsx)(y.AnimatePresence,{mode:"wait",children:(0,e.jsx)(y.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:v,src:b,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:S,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ce,src:O||b,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:J||b,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},f.video?.url||f.image?.url)})}const t=k?.url,o=H?.url||t,a=j?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:b,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:S,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:O||b,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:J||b,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return(0,e.jsxs)("section",{ref:E,"data-ui-component-id":"ImageWithText",className:(0,m.cn)("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!c,"flex-col":!c&&(x==="top"||x==="bottom"),"items-center":x==="left"||x==="right","flex-col laptop:flex-row":!c&&(x==="left"||x==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":c,"aiui-dark":ae==="dark"},n),children:[c&&(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":s==="left","text-center":s==="center"}),children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(r.Heading,{as:"h3",size:4,html:_,className:"image-with-text__title"}),(0,e.jsx)(r.Text,{as:"p",size:1,html:I,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":s==="center"}),children:(0,e.jsxs)("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:C.left,width:C.width}}),d.map((t,o)=>(0,e.jsx)("div",{ref:a=>{B.current[o]=a},onClick:a=>de(o,a),className:(0,m.cn)("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",u===o?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(r.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),!c&&(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__content flex flex-col",{"justify-center":!L,"justify-between":L,"w-full laptop:w-fit":p,"items-start":s==="left","items-center":s==="center","text-left":s==="left","text-center":s==="center","laptop:order-1":x==="left"}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__main-content",{"flex flex-col":L}),children:[(0,e.jsx)(r.Heading,{as:"h2",size:4,html:_,className:(0,m.cn)("image-with-text__title",{"w-full":p,"text-left":p&&s==="left","text-center":p&&s==="center"})}),g&&(0,e.jsx)(r.Text,{as:"p",size:p?4:3,html:g,className:(0,m.cn)("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!p,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":p,"text-left":p&&s==="left","text-center":p&&s==="center"})}),!p&&(I||z)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[z&&(0,e.jsx)("img",{src:z,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),I&&(0,e.jsx)(r.Heading,{as:"h4",size:5,html:I,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),p&&(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":x==="top"||x==="bottom","grid-cols-1":V===w.Cols.One,"grid-cols-2":V===w.Cols.Two,"grid-cols-3":V===w.Cols.Three,"grid-cols-4":V===w.Cols.Four}),children:W.map((t,o)=>(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__item",{"text-center":s==="center"}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":s==="center","justify-start":s==="left"}),children:[(0,e.jsx)(r.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),(0,e.jsx)(r.Heading,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(r.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},o))})]}),ne()]}),(0,e.jsx)("div",{ref:$,className:(0,m.cn)("image-with-text__media-wrapper",{"w-[60%] shrink-0":x==="left"||x==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":p,"laptop:basis-[63%] desktop:basis-[57%]":p&&x==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":c}),children:c?T?X():(0,e.jsx)(y.AnimatePresence,{mode:"wait",children:(0,e.jsx)(y.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(r.Picture,{source:U(),alt:d[u].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},d[u].image?.url)}):T?X():(0,e.jsx)(r.Picture,{source:U(),className:(0,m.cn)("image-with-text__image rounded-box laptop:rounded-box")})})]})});Z.displayName="ImageWithText";var ke=(0,ee.withLayout)(Z);
|
|
1
|
+
"use strict";"use client";var xe=Object.create;var D=Object.defineProperty;var ue=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var he=Object.getPrototypeOf,ve=Object.prototype.hasOwnProperty;var ge=(r,c)=>{for(var v in c)D(r,v,{get:c[v],enumerable:!0})},X=(r,c,v,w)=>{if(c&&typeof c=="object"||typeof c=="function")for(let g of fe(c))!ve.call(r,g)&&g!==v&&D(r,g,{get:()=>c[g],enumerable:!(w=ue(c,g))||w.enumerable});return r};var be=(r,c,v)=>(v=r!=null?xe(he(r)):{},X(c||!r||!r.__esModule?D(v,"default",{value:r,enumerable:!0}):v,r)),we=r=>X(D({},"__esModule",{value:!0}),r);var Te={};ge(Te,{default:()=>Ne});module.exports=we(Te);var e=require("react/jsx-runtime"),i=be(require("react")),l=require("../../components/index.js"),m=require("../../helpers/utils.js"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),ie=require("../../hooks/useIntersectionObserver.js"),k=require("framer-motion"),y=require("./types.js");const _e="image",ye="image_with_text",ke=(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:(0,e.jsx)("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),Y=i.default.forwardRef(({data:r,className:c},v)=>{const{title:w,subtitle:g,desc:I,descIcon:z,image:N,padImage:H,mobileImage:j,theme:ae="dark",items:R=[],layout:oe="left",mediaType:le="image",datalist:d=[],video:W,padVideo:C,mobVideo:A,cols:L=y.Cols.One,button:b,textAlign:n="left"}=r,a=oe,E=(0,i.useRef)(null),V=(0,i.useRef)(null),P=(0,i.useRef)(null),S=(0,i.useRef)(null),q=(0,i.useRef)(null),[u,se]=(0,i.useState)(0),B=(0,i.useRef)([]),[$,re]=(0,i.useState)({left:0,width:0}),[_,F]=(0,i.useState)(""),[O,Z]=(0,i.useState)(""),[G,J]=(0,i.useState)(""),p=d.length>0,T=le==="video";(0,te.useExposure)(E,{componentType:_e,componentName:ye,componentTitle:w,componentDescription:g}),(0,i.useImperativeHandle)(v,()=>E.current),(0,i.useEffect)(()=>{if(d.length>0){const t=B.current[u];if(t){const{offsetLeft:s,offsetWidth:o}=t;re({left:s,width:o})}}},[u,d.length]);const[K,ne]=(0,i.useState)(!1);(0,ie.useIntersectionObserverDelay)(q,{once:!0,threshold:.01,callback:()=>{ne(!0)}}),(0,i.useEffect)(()=>{if(!K||!T)return;let t="",s="",o="";if(p&&d[u]){const f=d[u];t=f.video?.url||"",s=f.padVideo?.url||t,o=f.mobVideo?.url||t}else t=W?.url||"",s=C?.url||t,o=A?.url||t;t&&F(t),s&&Z(s),o&&J(o),setTimeout(()=>{[V.current?.querySelector("video"),P.current?.querySelector("video"),S.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},200)},[K,T,p,u,d,W?.url,C?.url,A?.url]);const me=(t,s)=>{if(se(t),s.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),T&&p&&d[t]){const o=d[t];o.video?.url&&F(o.video.url),o.padVideo?.url&&Z(o.padVideo.url),o.mobVideo?.url&&J(o.mobVideo.url),setTimeout(()=>{[V.current?.querySelector("video"),P.current?.querySelector("video"),S.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},300)}},de=()=>!M||!b?.text?null:(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":n==="center","flex justify-start":n==="left","laptop:hidden":a==="top"||a==="bottom"}),children:(0,e.jsx)(l.Button,{as:"a",href:b.link,variant:b.variant||"secondary",size:"base",className:"image-with-text__button",children:b.text})}),x=R.length>0,M=!!b,Q=()=>{if(p&&d[u]){const t=d[u];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return N?`${N?.url},${H?.url||N?.url} 1024, ${j?.url||N?.url} 768`:""},U=()=>{if(p){const f=d[u],h=f.image?.url,ce=f.imgPad?.url||h,pe=f.imageMob?.url||h;return(0,e.jsx)(k.AnimatePresence,{mode:"wait",children:(0,e.jsx)(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:V,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:h,src:_,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ce,src:O||_,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:S,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:G||_,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},f.video?.url||f.image?.url)})}const t=N?.url,s=H?.url||t,o=j?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:V,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:_,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:s,src:O||_,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:S,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:G||_,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return(0,e.jsxs)("section",{ref:E,"data-ui-component-id":"ImageWithText",className:(0,m.cn)("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!p,"flex-col":!p&&(a==="top"||a==="bottom"),"items-center":a==="left"||a==="right","flex-col laptop:flex-row":!p&&(a==="left"||a==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":p,"aiui-dark":ae==="dark"},c),children:[p&&(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":n==="left","text-center":n==="center"}),children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(l.Heading,{as:"h3",size:4,html:w,className:"image-with-text__title"}),(0,e.jsx)(l.Text,{as:"p",size:1,html:I,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":n==="center"}),children:(0,e.jsxs)("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:$.left,width:$.width}}),d.map((t,s)=>(0,e.jsx)("div",{ref:o=>{B.current[s]=o},onClick:o=>me(s,o),className:(0,m.cn)("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",u===s?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(l.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},s))]})})]}),!p&&(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__content flex flex-col",{"justify-center":!M,"justify-between":M,"w-full laptop:w-fit":x,"items-start":n==="left","items-center":n==="center","text-left":n==="left","text-center":n==="center","laptop:order-1":a==="left"}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__main-content",{"flex flex-col":M}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__header",{"items-end justify-between gap-16 hidden laptop:flex":(a==="top"||a==="bottom")&&b?.text}),children:[(0,e.jsxs)("div",{className:"image-with-text__title-wrapper flex flex-col",children:[(0,e.jsx)(l.Heading,{as:"h2",size:4,html:w,className:(0,m.cn)("image-with-text__title",{"w-full":x,"text-left":x&&n==="left","text-center":x&&n==="center"})}),g&&(0,e.jsx)(l.Text,{as:"p",size:x?4:3,html:g,className:(0,m.cn)("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!x,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":x,"text-left":x&&n==="left","text-center":x&&n==="center"})})]}),(a==="top"||a==="bottom")&&b?.text&&(0,e.jsx)(l.Link,{href:b.link,className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:ke,children:b.text})]}),!x&&(I||z)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[z&&(0,e.jsx)("img",{src:z,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),I&&(0,e.jsx)(l.Heading,{as:"h4",size:5,html:I,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),x&&(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":a==="top"||a==="bottom","grid-cols-1":L===y.Cols.One,"grid-cols-2":L===y.Cols.Two,"grid-cols-3":L===y.Cols.Three,"grid-cols-4":L===y.Cols.Four}),children:R.map((t,s)=>(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__item",{"text-center":n==="center"}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":n==="center","justify-start":n==="left"}),children:[(0,e.jsx)(l.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),(0,e.jsx)(l.Heading,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(l.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},s))})]}),de()]}),(0,e.jsx)("div",{ref:q,className:(0,m.cn)("image-with-text__media-wrapper",{"w-[60%] shrink-0":a==="left"||a==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":x,"laptop:basis-[63%] desktop:basis-[57%]":x&&a==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":p,"!max-w-none !max-h-none aspect-auto":a==="top"||a==="bottom"}),children:p?T?U():(0,e.jsx)(k.AnimatePresence,{mode:"wait",children:(0,e.jsx)(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(l.Picture,{source:Q(),alt:d[u].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},d[u].image?.url)}):T?U():(0,e.jsx)(l.Picture,{source:Q(),className:(0,m.cn)("image-with-text__image rounded-box laptop:rounded-box")})})]})});Y.displayName="ImageWithText";var Ne=(0,ee.withLayout)(Y);
|
|
2
2
|
//# sourceMappingURL=ImageWithText.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\nimport { Cols } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n desc,\n descIcon,\n image,\n padImage,\n mobileImage,\n theme = 'dark',\n items = [],\n layout = 'left',\n mediaType = 'image',\n datalist = [],\n video,\n padVideo,\n mobVideo,\n cols = Cols.One,\n button,\n textAlign = 'left',\n } = data\n\n const effectiveLayout = layout\n\n const boxRef = useRef<HTMLDivElement>(null)\n const desktopVideoRef = useRef<HTMLDivElement>(null)\n const tabletVideoRef = useRef<HTMLDivElement>(null)\n const mobileVideoRef = useRef<HTMLDivElement>(null)\n const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n // Tab\u72B6\u6001\u7BA1\u7406\n const [activeIndex, setActiveIndex] = useState(0)\n const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n const isTabMode = datalist.length > 0\n\n // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n const isVideo = mediaType === 'video'\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n useEffect(() => {\n if (datalist.length > 0) {\n const current = tabRefs.current[activeIndex]\n if (current) {\n const { offsetLeft, offsetWidth } = current\n setSliderStyle({ left: offsetLeft, width: offsetWidth })\n }\n }\n }, [activeIndex, datalist.length])\n\n // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n const [videoIntersected, setVideoIntersected] = useState(false)\n\n // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n useIntersectionObserverDelay(mediaWrapperRef, {\n once: true,\n threshold: 0.01,\n callback: () => {\n setVideoIntersected(true)\n },\n })\n\n // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n useEffect(() => {\n if (!videoIntersected || !isVideo) return\n\n // \u786E\u5B9A\u89C6\u9891\u6E90\n let desktopSrc = ''\n let tabletSrc = ''\n let mobileSrc = ''\n\n if (isTabMode && datalist[activeIndex]) {\n const activeTab = datalist[activeIndex]\n desktopSrc = activeTab.video?.url || ''\n tabletSrc = activeTab.padVideo?.url || desktopSrc\n mobileSrc = activeTab.mobVideo?.url || desktopSrc\n } else {\n desktopSrc = video?.url || ''\n tabletSrc = padVideo?.url || desktopSrc\n mobileSrc = mobVideo?.url || desktopSrc\n }\n\n // \u8BBE\u7F6E\u89C6\u9891\u6E90\n if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n setTimeout(() => {\n const videos = [\n desktopVideoRef.current?.querySelector('video'),\n tabletVideoRef.current?.querySelector('video'),\n mobileVideoRef.current?.querySelector('video'),\n ]\n\n videos.forEach(videoElement => {\n if (videoElement) {\n videoElement.load()\n videoElement.play().catch(() => {\n // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n })\n }\n })\n }, 200)\n }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n setActiveIndex(index)\n ;(e.target as HTMLElement).scrollIntoView({\n behavior: 'smooth',\n inline: 'center',\n block: 'nearest',\n })\n\n // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n if (isVideo && isTabMode && datalist[index]) {\n const activeTab = datalist[index]\n\n // \u66F4\u65B0\u89C6\u9891\u6E90\n if (activeTab.video?.url) {\n setLoadedDesktopVideoSrc(activeTab.video.url)\n }\n if (activeTab.padVideo?.url) {\n setLoadedTabletVideoSrc(activeTab.padVideo.url)\n }\n if (activeTab.mobVideo?.url) {\n setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n }\n\n // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n setTimeout(() => {\n const videos = [\n desktopVideoRef.current?.querySelector('video'),\n tabletVideoRef.current?.querySelector('video'),\n mobileVideoRef.current?.querySelector('video'),\n ]\n\n videos.forEach(video => {\n if (video) {\n video.load()\n video.play().catch(() => {\n // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n })\n }\n })\n }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n }\n }\n\n // \u6E32\u67D3\u6309\u94AE\n const renderButton = () => {\n if (!hasButton || !button?.text) return null\n\n return (\n <div\n className={cn('image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]', {\n 'flex justify-center': textAlign === 'center',\n 'flex justify-start': textAlign === 'left',\n })}\n >\n <Button\n as=\"a\"\n href={button.link}\n variant={button.variant || 'secondary'}\n size=\"base\"\n className=\"image-with-text__button\"\n >\n {button.text}\n </Button>\n </div>\n )\n }\n\n // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n const hasItems = items.length > 0\n\n // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n const hasButton = Boolean(button)\n\n // \u83B7\u53D6\u56FE\u7247\u6E90\n const getImageSource = () => {\n if (isTabMode && datalist[activeIndex]) {\n const activeTab = datalist[activeIndex]\n return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n }\n if (image) {\n return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n }\n return ''\n }\n\n // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n const renderVideo = () => {\n if (isTabMode) {\n const activeTab = datalist[activeIndex]\n // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n const desktopPoster = activeTab.image?.url\n const tabletPoster = activeTab.imgPad?.url || desktopPoster\n const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n return (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={activeTab.video?.url || activeTab.image?.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n >\n <div className=\"image-with-text__video-wrapper rounded-box overflow-hidden\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n ></video>\n </div>\n </div>\n </motion.div>\n </AnimatePresence>\n )\n }\n\n // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n const desktopPoster = image?.url\n const tabletPoster = padImage?.url || desktopPoster\n const mobilePoster = mobileImage?.url || desktopPoster\n\n return (\n <div className=\"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n ></video>\n </div>\n </div>\n )\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ImageWithText\"\n className={cn(\n 'image-with-text text-info-primary',\n {\n // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n 'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n 'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n 'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n 'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n 'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n // \u4E3B\u9898\u6837\u5F0F\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n {isTabMode && (\n <div\n className={cn(\n 'image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center',\n {\n 'text-left': textAlign === 'left',\n 'text-center': textAlign === 'center',\n }\n )}\n >\n <div className=\"image-with-text__header\">\n <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n <Text\n as={'p'}\n size={1}\n html={desc}\n className=\"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n />\n </div>\n\n <div\n className={cn(\n 'image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll',\n {\n 'flex justify-center': textAlign === 'center',\n }\n )}\n >\n <div className=\"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n {/* \u6ED1\u52A8\u80CC\u666F */}\n <div\n className=\"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out\"\n style={{\n left: sliderStyle.left,\n width: sliderStyle.width,\n }}\n />\n\n {/* Tab Items */}\n {datalist.map((item: ImageWithTextTabItem, index: number) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n onClick={e => handleTabClick(index, e)}\n className={cn(\n 'image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]',\n activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n )}\n >\n <Heading\n as=\"h1\"\n size={1}\n html={item?.title}\n className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n {!isTabMode && (\n <div\n className={cn('image-with-text__content flex flex-col', {\n // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n 'justify-center': !hasButton,\n 'justify-between': hasButton,\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'w-full laptop:w-fit': hasItems,\n // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n 'items-start': textAlign === 'left',\n 'items-center': textAlign === 'center',\n // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n 'text-left': textAlign === 'left',\n 'text-center': textAlign === 'center',\n // order\u63A7\u5236\n 'laptop:order-1': effectiveLayout === 'left',\n })}\n >\n {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n <Heading\n as={'h2'}\n size={4}\n html={title}\n className={cn('image-with-text__title', {\n 'w-full': hasItems,\n 'text-left': hasItems && textAlign === 'left',\n 'text-center': hasItems && textAlign === 'center',\n })}\n />\n {subtitle && (\n <Text\n as={'p'}\n size={hasItems ? 4 : 3}\n html={subtitle}\n className={cn(\n 'image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n {\n 'laptop:mt-[16px]': !hasItems,\n 'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n 'text-left': hasItems && textAlign === 'left',\n 'text-center': hasItems && textAlign === 'center',\n }\n )}\n />\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n {!hasItems && (desc || descIcon) && (\n <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n {descIcon && (\n <img\n src={descIcon}\n alt=\"icon\"\n className=\"image-with-text__description-icon desktop:size-[48px] size-[36px]\"\n />\n )}\n {desc && (\n <Heading\n as={'h4'}\n size={5}\n html={desc}\n className=\"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]\"\n />\n )}\n </div>\n )}\n\n {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n {hasItems && (\n <div\n className={cn('image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6', {\n '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n 'grid-cols-1': cols === Cols.One,\n 'grid-cols-2': cols === Cols.Two,\n 'grid-cols-3': cols === Cols.Three,\n 'grid-cols-4': cols === Cols.Four,\n })}\n >\n {items.map((item: ImageWithTextItem, index: number) => (\n <div\n key={index}\n className={cn('image-with-text__item', {\n 'text-center': textAlign === 'center',\n })}\n >\n <div\n className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n 'justify-center': textAlign === 'center',\n 'justify-start': textAlign === 'left',\n })}\n >\n <Picture\n source={item.icon?.url}\n alt={item.icon?.alt}\n className=\"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]\"\n imgClassName=\"h-full !w-full\"\n />\n <Heading\n size={4}\n as=\"h6\"\n className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n >\n {item.text}\n </Heading>\n </div>\n <Text\n size={4}\n as=\"p\"\n html={item.desc}\n className=\"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]\"\n />\n </div>\n ))}\n </div>\n )}\n </div>\n\n {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n {renderButton()}\n </div>\n )}\n\n {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n <div\n ref={mediaWrapperRef}\n className={cn('image-with-text__media-wrapper', {\n 'w-[60%] shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n hasItems,\n 'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n // TabWithImage\u6A21\u5F0F\n 'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n isTabMode,\n })}\n >\n {isTabMode ? (\n // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n isVideo ? (\n renderVideo()\n ) : (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={datalist[activeIndex].image?.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n >\n <Picture\n source={getImageSource()}\n alt={datalist[activeIndex].image?.alt}\n className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n />\n </motion.div>\n </AnimatePresence>\n )\n ) : isVideo ? (\n // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n renderVideo()\n ) : (\n // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n )}\n </div>\n </section>\n )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
|
|
5
|
-
"mappings": "olBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,
|
|
6
|
-
"names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_useIntersectionObserver", "import_framer_motion", "import_types", "componentType", "componentName", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "cols", "button", "textAlign", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "mediaWrapperRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "isTabMode", "isVideo", "current", "offsetLeft", "offsetWidth", "videoIntersected", "setVideoIntersected", "desktopSrc", "tabletSrc", "mobileSrc", "activeTab", "videoElement", "handleTabClick", "index", "e", "renderButton", "hasButton", "hasItems", "getImageSource", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Button, Link } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\nimport { Cols } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ArrowRight = (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z\"\n fill=\"currentColor\"\n />\n </svg>\n)\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n desc,\n descIcon,\n image,\n padImage,\n mobileImage,\n theme = 'dark',\n items = [],\n layout = 'left',\n mediaType = 'image',\n datalist = [],\n video,\n padVideo,\n mobVideo,\n cols = Cols.One,\n button,\n textAlign = 'left',\n } = data\n\n const effectiveLayout = layout\n\n const boxRef = useRef<HTMLDivElement>(null)\n const desktopVideoRef = useRef<HTMLDivElement>(null)\n const tabletVideoRef = useRef<HTMLDivElement>(null)\n const mobileVideoRef = useRef<HTMLDivElement>(null)\n const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n // Tab\u72B6\u6001\u7BA1\u7406\n const [activeIndex, setActiveIndex] = useState(0)\n const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n const isTabMode = datalist.length > 0\n\n // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n const isVideo = mediaType === 'video'\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n useEffect(() => {\n if (datalist.length > 0) {\n const current = tabRefs.current[activeIndex]\n if (current) {\n const { offsetLeft, offsetWidth } = current\n setSliderStyle({ left: offsetLeft, width: offsetWidth })\n }\n }\n }, [activeIndex, datalist.length])\n\n // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n const [videoIntersected, setVideoIntersected] = useState(false)\n\n // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n useIntersectionObserverDelay(mediaWrapperRef, {\n once: true,\n threshold: 0.01,\n callback: () => {\n setVideoIntersected(true)\n },\n })\n\n // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n useEffect(() => {\n if (!videoIntersected || !isVideo) return\n\n // \u786E\u5B9A\u89C6\u9891\u6E90\n let desktopSrc = ''\n let tabletSrc = ''\n let mobileSrc = ''\n\n if (isTabMode && datalist[activeIndex]) {\n const activeTab = datalist[activeIndex]\n desktopSrc = activeTab.video?.url || ''\n tabletSrc = activeTab.padVideo?.url || desktopSrc\n mobileSrc = activeTab.mobVideo?.url || desktopSrc\n } else {\n desktopSrc = video?.url || ''\n tabletSrc = padVideo?.url || desktopSrc\n mobileSrc = mobVideo?.url || desktopSrc\n }\n\n // \u8BBE\u7F6E\u89C6\u9891\u6E90\n if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n setTimeout(() => {\n const videos = [\n desktopVideoRef.current?.querySelector('video'),\n tabletVideoRef.current?.querySelector('video'),\n mobileVideoRef.current?.querySelector('video'),\n ]\n\n videos.forEach(videoElement => {\n if (videoElement) {\n videoElement.load()\n videoElement.play().catch(() => {\n // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n })\n }\n })\n }, 200)\n }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n setActiveIndex(index)\n ;(e.target as HTMLElement).scrollIntoView({\n behavior: 'smooth',\n inline: 'center',\n block: 'nearest',\n })\n\n // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n if (isVideo && isTabMode && datalist[index]) {\n const activeTab = datalist[index]\n\n // \u66F4\u65B0\u89C6\u9891\u6E90\n if (activeTab.video?.url) {\n setLoadedDesktopVideoSrc(activeTab.video.url)\n }\n if (activeTab.padVideo?.url) {\n setLoadedTabletVideoSrc(activeTab.padVideo.url)\n }\n if (activeTab.mobVideo?.url) {\n setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n }\n\n // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n setTimeout(() => {\n const videos = [\n desktopVideoRef.current?.querySelector('video'),\n tabletVideoRef.current?.querySelector('video'),\n mobileVideoRef.current?.querySelector('video'),\n ]\n\n videos.forEach(video => {\n if (video) {\n video.load()\n video.play().catch(() => {\n // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n })\n }\n })\n }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n }\n }\n\n // \u6E32\u67D3\u6309\u94AE\n const renderButton = () => {\n if (!hasButton || !button?.text) return null\n return (\n <div\n className={cn('image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]', {\n 'flex justify-center': textAlign === 'center',\n 'flex justify-start': textAlign === 'left',\n 'laptop:hidden': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n })}\n >\n <Button\n as=\"a\"\n href={button.link}\n variant={button.variant || 'secondary'}\n size=\"base\"\n className=\"image-with-text__button\"\n >\n {button.text}\n </Button>\n </div>\n )\n }\n\n // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n const hasItems = items.length > 0\n\n // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n const hasButton = Boolean(button)\n\n // \u83B7\u53D6\u56FE\u7247\u6E90\n const getImageSource = () => {\n if (isTabMode && datalist[activeIndex]) {\n const activeTab = datalist[activeIndex]\n return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n }\n if (image) {\n return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n }\n return ''\n }\n\n // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n const renderVideo = () => {\n if (isTabMode) {\n const activeTab = datalist[activeIndex]\n // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n const desktopPoster = activeTab.image?.url\n const tabletPoster = activeTab.imgPad?.url || desktopPoster\n const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n return (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={activeTab.video?.url || activeTab.image?.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n >\n <div className=\"image-with-text__video-wrapper rounded-box overflow-hidden\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n ></video>\n </div>\n </div>\n </motion.div>\n </AnimatePresence>\n )\n }\n\n // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n const desktopPoster = image?.url\n const tabletPoster = padImage?.url || desktopPoster\n const mobilePoster = mobileImage?.url || desktopPoster\n\n return (\n <div className=\"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n ></video>\n </div>\n </div>\n )\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ImageWithText\"\n className={cn(\n 'image-with-text text-info-primary',\n {\n // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n 'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n 'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n 'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n 'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n 'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n // \u4E3B\u9898\u6837\u5F0F\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n {isTabMode && (\n <div\n className={cn(\n 'image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center',\n {\n 'text-left': textAlign === 'left',\n 'text-center': textAlign === 'center',\n }\n )}\n >\n <div className=\"image-with-text__header\">\n <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n <Text\n as={'p'}\n size={1}\n html={desc}\n className=\"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n />\n </div>\n\n <div\n className={cn(\n 'image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll',\n {\n 'flex justify-center': textAlign === 'center',\n }\n )}\n >\n <div className=\"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n {/* \u6ED1\u52A8\u80CC\u666F */}\n <div\n className=\"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out\"\n style={{\n left: sliderStyle.left,\n width: sliderStyle.width,\n }}\n />\n\n {/* Tab Items */}\n {datalist.map((item: ImageWithTextTabItem, index: number) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n onClick={e => handleTabClick(index, e)}\n className={cn(\n 'image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]',\n activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n )}\n >\n <Heading\n as=\"h1\"\n size={1}\n html={item?.title}\n className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n {!isTabMode && (\n <div\n className={cn('image-with-text__content flex flex-col', {\n // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n 'justify-center': !hasButton,\n 'justify-between': hasButton,\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'w-full laptop:w-fit': hasItems,\n // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n 'items-start': textAlign === 'left',\n 'items-center': textAlign === 'center',\n // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n 'text-left': textAlign === 'left',\n 'text-center': textAlign === 'center',\n // order\u63A7\u5236\n 'laptop:order-1': effectiveLayout === 'left',\n })}\n >\n {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n <div\n className={cn('image-with-text__header', {\n 'items-end justify-between gap-16 hidden laptop:flex':\n (effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text,\n })}\n >\n <div className=\"image-with-text__title-wrapper flex flex-col\">\n <Heading\n as={'h2'}\n size={4}\n html={title}\n className={cn('image-with-text__title', {\n 'w-full': hasItems,\n 'text-left': hasItems && textAlign === 'left',\n 'text-center': hasItems && textAlign === 'center',\n })}\n />\n {subtitle && (\n <Text\n as={'p'}\n size={hasItems ? 4 : 3}\n html={subtitle}\n className={cn(\n 'image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n {\n 'laptop:mt-[16px]': !hasItems,\n 'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n 'text-left': hasItems && textAlign === 'left',\n 'text-center': hasItems && textAlign === 'center',\n }\n )}\n />\n )}\n </div>\n {(effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text && (\n <Link\n href={button.link}\n className=\"laptop:flex hidden whitespace-nowrap no-underline\"\n suffixIcon={ArrowRight}\n >\n {button.text}\n </Link>\n )}\n </div>\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n {!hasItems && (desc || descIcon) && (\n <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n {descIcon && (\n <img\n src={descIcon}\n alt=\"icon\"\n className=\"image-with-text__description-icon desktop:size-[48px] size-[36px]\"\n />\n )}\n {desc && (\n <Heading\n as={'h4'}\n size={5}\n html={desc}\n className=\"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]\"\n />\n )}\n </div>\n )}\n\n {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n {hasItems && (\n <div\n className={cn('image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6', {\n '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n 'grid-cols-1': cols === Cols.One,\n 'grid-cols-2': cols === Cols.Two,\n 'grid-cols-3': cols === Cols.Three,\n 'grid-cols-4': cols === Cols.Four,\n })}\n >\n {items.map((item: ImageWithTextItem, index: number) => (\n <div\n key={index}\n className={cn('image-with-text__item', {\n 'text-center': textAlign === 'center',\n })}\n >\n <div\n className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n 'justify-center': textAlign === 'center',\n 'justify-start': textAlign === 'left',\n })}\n >\n <Picture\n source={item.icon?.url}\n alt={item.icon?.alt}\n className=\"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]\"\n imgClassName=\"h-full !w-full\"\n />\n <Heading\n size={4}\n as=\"h6\"\n className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n >\n {item.text}\n </Heading>\n </div>\n <Text\n size={4}\n as=\"p\"\n html={item.desc}\n className=\"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]\"\n />\n </div>\n ))}\n </div>\n )}\n </div>\n\n {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n {renderButton()}\n </div>\n )}\n\n {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n <div\n ref={mediaWrapperRef}\n className={cn('image-with-text__media-wrapper', {\n 'w-[60%] shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n hasItems,\n 'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n // TabWithImage\u6A21\u5F0F\n 'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n isTabMode,\n '!max-w-none !max-h-none aspect-auto': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n })}\n >\n {isTabMode ? (\n // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n isVideo ? (\n renderVideo()\n ) : (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={datalist[activeIndex].image?.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n >\n <Picture\n source={getImageSource()}\n alt={datalist[activeIndex].image?.alt}\n className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n />\n </motion.div>\n </AnimatePresence>\n )\n ) : isVideo ? (\n // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n renderVideo()\n ) : (\n // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n )}\n </div>\n </section>\n )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_useIntersectionObserver", "import_framer_motion", "import_types", "componentType", "componentName", "ArrowRight", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "cols", "button", "textAlign", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "mediaWrapperRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "isTabMode", "isVideo", "current", "offsetLeft", "offsetWidth", "videoIntersected", "setVideoIntersected", "desktopSrc", "tabletSrc", "mobileSrc", "activeTab", "videoElement", "handleTabClick", "index", "e", "renderButton", "hasButton", "hasItems", "getImageSource", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var s=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(o,e)=>{for(var i in e)s(o,i,{get:e[i],enumerable:!0})},f=(o,e,i,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of c(e))!d.call(o,a)&&a!==i&&s(o,a,{get:()=>e[a],enumerable:!(p=x(e,a))||p.enumerable});return o};var g=o=>f(s({},"__esModule",{value:!0}),o);var N={};m(N,{default:()=>v});module.exports=g(N);var t=require("react/jsx-runtime"),l=require("../../../../components/index.js"),n=require("../../../AiuiProvider/index.js"),r=require("../../../../helpers/index.js");const u=o=>{const{className:e,setOpenShippingPolicyModal:i,metafields:p}=o,{copyWriting:a}=(0,n.useAiuiContext)();return(0,t.jsxs)("div",{tabIndex:-1,className:(0,r.cn)("from-4.29% to-101.05% laptop:rounded-2xl laptop:py-5 relative items-start gap-[16px] overflow-hidden rounded-xl bg-gradient-to-r from-[rgba(215,245,254,0.24)] to-[rgba(215,245,254,0.80)] p-4 text-[#1F2021] md:py-[16px]","flex flex-col",e),children:[(0,t.jsx)(l.Picture,{source:p?.shippingPolicyIcon,className:"absolute -bottom-10 -right-10 z-[1] size-[150px]"}),(0,t.jsxs)("div",{className:"relative z-10 flex w-full items-start justify-between",children:[(0,t.jsxs)("div",{className:"laptop:gap-2 lg-desktop:gap-4 flex flex-col gap-3",children:[(0,t.jsx)(l.Text,{size:2,className:"laptop:text-[16px] lg-desktop:text-[18px] text-[14px]",children:p?.shippingPolicyTitle}),(0,t.jsx)(l.Text,{size:1,as:"p",className:"laptop:text-[14px] text-[12px] text-[#6D6D6F]",children:p?.loginBeforeCheckoutNote})]}),(0,t.jsx)(l.Button,{variant:"link",className:"laptop:inline-flex hidden whitespace-nowrap !p-0",onClick:()=>{i(!0)},children:a?.learnMore})]}),(0,t.jsx)(l.Button,{variant:"link",className:"laptop:hidden inline-flex p-0",onClick:()=>{i(!0)},children:a?.learnMore})]})};var v=u;
|
|
2
2
|
//# sourceMappingURL=LearnMore.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/LearnMore.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Button, Picture, Text } from '../../../../components/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { cn } from '../../../../helpers/index.js'\n\nconst LearnMore = (props: any) => {\n const { className, setOpenShippingPolicyModal, metafields } = props\n const {
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["LearnMore_exports", "__export", "LearnMore_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_helpers", "LearnMore", "props", "className", "setOpenShippingPolicyModal", "metafields", "
|
|
4
|
+
"sourcesContent": ["import { Button, Picture, Text } from '../../../../components/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { cn } from '../../../../helpers/index.js'\n\nconst LearnMore = (props: any) => {\n const { className, setOpenShippingPolicyModal, metafields } = props\n const { copyWriting } = useAiuiContext()\n\n return (\n <div\n tabIndex={-1}\n className={cn(\n 'from-4.29% to-101.05% laptop:rounded-2xl laptop:py-5 relative items-start gap-[16px] overflow-hidden rounded-xl bg-gradient-to-r from-[rgba(215,245,254,0.24)] to-[rgba(215,245,254,0.80)] p-4 text-[#1F2021] md:py-[16px]',\n 'flex flex-col',\n className\n )}\n >\n <Picture source={metafields?.shippingPolicyIcon} className=\"absolute -bottom-10 -right-10 z-[1] size-[150px]\" />\n <div className=\"relative z-10 flex w-full items-start justify-between\">\n <div className=\"laptop:gap-2 lg-desktop:gap-4 flex flex-col gap-3\">\n <Text size={2} className=\"laptop:text-[16px] lg-desktop:text-[18px] text-[14px]\">\n {metafields?.shippingPolicyTitle}\n </Text>\n <Text size={1} as=\"p\" className=\"laptop:text-[14px] text-[12px] text-[#6D6D6F]\">\n {metafields?.loginBeforeCheckoutNote}\n </Text>\n </div>\n <Button\n variant=\"link\"\n className=\"laptop:inline-flex hidden whitespace-nowrap !p-0\"\n onClick={() => {\n setOpenShippingPolicyModal(true)\n }}\n >\n {copyWriting?.learnMore}\n </Button>\n </div>\n\n <Button\n variant=\"link\"\n className=\"laptop:hidden inline-flex p-0\"\n onClick={() => {\n setOpenShippingPolicyModal(true)\n }}\n >\n {copyWriting?.learnMore}\n </Button>\n </div>\n )\n}\n\nexport default LearnMore\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiBM,IAAAI,EAAA,6BAjBNC,EAAsC,2CACtCC,EAA+B,0CAC/BC,EAAmB,wCAEnB,MAAMC,EAAaC,GAAe,CAChC,KAAM,CAAE,UAAAC,EAAW,2BAAAC,EAA4B,WAAAC,CAAW,EAAIH,EACxD,CAAE,YAAAI,CAAY,KAAI,kBAAe,EAEvC,SACE,QAAC,OACC,SAAU,GACV,aAAW,MACT,6NACA,gBACAH,CACF,EAEA,oBAAC,WAAQ,OAAQE,GAAY,mBAAoB,UAAU,mDAAmD,KAC9G,QAAC,OAAI,UAAU,wDACb,qBAAC,OAAI,UAAU,oDACb,oBAAC,QAAK,KAAM,EAAG,UAAU,wDACtB,SAAAA,GAAY,oBACf,KACA,OAAC,QAAK,KAAM,EAAG,GAAG,IAAI,UAAU,gDAC7B,SAAAA,GAAY,wBACf,GACF,KACA,OAAC,UACC,QAAQ,OACR,UAAU,mDACV,QAAS,IAAM,CACbD,EAA2B,EAAI,CACjC,EAEC,SAAAE,GAAa,UAChB,GACF,KAEA,OAAC,UACC,QAAQ,OACR,UAAU,gCACV,QAAS,IAAM,CACbF,EAA2B,EAAI,CACjC,EAEC,SAAAE,GAAa,UAChB,GACF,CAEJ,EAEA,IAAOX,EAAQM",
|
|
6
|
+
"names": ["LearnMore_exports", "__export", "LearnMore_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_helpers", "LearnMore", "props", "className", "setOpenShippingPolicyModal", "metafields", "copyWriting"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var d=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var h=(e,t)=>{for(var p in t)d(e,p,{get:t[p],enumerable:!0})},N=(e,t,p,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of g(t))!v.call(e,r)&&r!==p&&d(e,r,{get:()=>t[r],enumerable:!(l=y(t,r))||l.enumerable});return e};var E=e=>N(d({},"__esModule",{value:!0}),e);var C={};h(C,{default:()=>k});module.exports=E(C);var o=require("react/jsx-runtime"),x=require("../../utils/index.js"),s=require("../../../AiuiProvider/index.js"),n=require("../../../../components/index.js"),a=require("../../../../helpers/index.js"),m=require("./type.js");const w=({item:e,index:t,active:p,toggleShipping:l,currencyCode:r,metafields:b,className:c=""})=>{const{copyWriting:u,locale:f="us"}=(0,s.useAiuiContext)();return(0,o.jsxs)("div",{role:"button",tabIndex:0,onKeyDown:i=>{(i.key==="Enter"||i.key===" ")&&l(e,t)},className:(0,a.cn)("laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer justify-between gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]",{"cursor-not-allowed opacity-60":e.disabled,"border-brand":p},c),onClick:()=>l(e,t),children:[(0,o.jsxs)("div",{className:"relative",children:[(0,o.jsx)(n.Text,{className:(0,a.cn)("laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]",{}),as:"p",html:e.title}),(0,o.jsx)(n.Text,{className:(0,a.cn)("laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]",{}),as:"p",html:e.subtitle})]}),(0,o.jsx)(n.Text,{className:(0,a.cn)("relative my-auto h-fit text-xl font-bold",{}),as:"p",html:e.price?(0,x.formatPrice)({amount:e.price,currencyCode:r,locale:f,removeTrailingZeros:!0}):u?.free}),e.mode!==m.ShippingMethodMode.FREE&&(0,o.jsx)("div",{className:(0,a.cn)("bg-brand absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white"),children:b?.memberOnly})]})};var k=w;
|
|
2
2
|
//# sourceMappingURL=ShippingMethod.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingMethod.tsx"],
|
|
4
|
-
"sourcesContent": ["import { formatPrice } from '../../utils/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { Text } from '../../../../components/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ShippingMethodMode } from './type.js'\n\nconst ShippingMethod = ({\n item,\n index,\n active,\n toggleShipping,\n currencyCode,\n metafields,\n className = '',\n}: {\n item: any\n index: number\n active: boolean\n toggleShipping: (item: any, index: number) => void\n currencyCode: string\n metafields: any\n className?: string\n}) => {\n const {
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ShippingMethod_exports", "__export", "ShippingMethod_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_AiuiProvider", "import_components", "import_helpers", "import_type", "ShippingMethod", "item", "index", "active", "toggleShipping", "currencyCode", "metafields", "className", "
|
|
4
|
+
"sourcesContent": ["import { formatPrice } from '../../utils/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { Text } from '../../../../components/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ShippingMethodMode } from './type.js'\n\nconst ShippingMethod = ({\n item,\n index,\n active,\n toggleShipping,\n currencyCode,\n metafields,\n className = '',\n}: {\n item: any\n index: number\n active: boolean\n toggleShipping: (item: any, index: number) => void\n currencyCode: string\n metafields: any\n className?: string\n}) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n\n return (\n <div\n role=\"button\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n toggleShipping(item, index)\n }\n }}\n className={cn(\n 'laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer justify-between gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]',\n {\n 'cursor-not-allowed opacity-60': item.disabled,\n 'border-brand': active,\n },\n className\n )}\n onClick={() => toggleShipping(item, index)}\n >\n <div className=\"relative\">\n <Text\n className={cn('laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]', {})}\n as=\"p\"\n html={item.title}\n />\n <Text\n className={cn('laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]', {})}\n as=\"p\"\n html={item.subtitle}\n />\n </div>\n\n <Text\n className={cn('relative my-auto h-fit text-xl font-bold', {})}\n as=\"p\"\n html={\n item.price\n ? formatPrice({\n amount: item.price,\n currencyCode,\n locale,\n removeTrailingZeros: true,\n })\n : copyWriting?.free\n }\n />\n {item.mode !== ShippingMethodMode.FREE && (\n <div\n className={cn(\n 'bg-brand absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white'\n )}\n >\n {metafields?.memberOnly}\n </div>\n )}\n </div>\n )\n}\n\nexport default ShippingMethod\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4CM,IAAAI,EAAA,6BA5CNC,EAA4B,gCAC5BC,EAA+B,0CAC/BC,EAAqB,2CACrBC,EAAmB,wCACnBC,EAAmC,qBAEnC,MAAMC,EAAiB,CAAC,CACtB,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,eAAAC,EACA,aAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,EACd,IAQM,CACJ,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAEtD,SACE,QAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWC,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCN,EAAeH,EAAMC,CAAK,CAE9B,EACA,aAAW,MACT,kKACA,CACE,gCAAiCD,EAAK,SACtC,eAAgBE,CAClB,EACAI,CACF,EACA,QAAS,IAAMH,EAAeH,EAAMC,CAAK,EAEzC,qBAAC,OAAI,UAAU,WACb,oBAAC,QACC,aAAW,MAAG,gFAAiF,CAAC,CAAC,EACjG,GAAG,IACH,KAAMD,EAAK,MACb,KACA,OAAC,QACC,aAAW,MAAG,iFAAkF,CAAC,CAAC,EAClG,GAAG,IACH,KAAMA,EAAK,SACb,GACF,KAEA,OAAC,QACC,aAAW,MAAG,2CAA4C,CAAC,CAAC,EAC5D,GAAG,IACH,KACEA,EAAK,SACD,eAAY,CACV,OAAQA,EAAK,MACb,aAAAI,EACA,OAAAI,EACA,oBAAqB,EACvB,CAAC,EACDD,GAAa,KAErB,EACCP,EAAK,OAAS,qBAAmB,SAChC,OAAC,OACC,aAAW,MACT,wIACF,EAEC,SAAAK,GAAY,WACf,GAEJ,CAEJ,EAEA,IAAOd,EAAQQ",
|
|
6
|
+
"names": ["ShippingMethod_exports", "__export", "ShippingMethod_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_AiuiProvider", "import_components", "import_helpers", "import_type", "ShippingMethod", "item", "index", "active", "toggleShipping", "currencyCode", "metafields", "className", "copyWriting", "locale", "e"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var h=Object.create;var
|
|
1
|
+
"use strict";var h=Object.create;var x=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var k=(a,r)=>{for(var o in r)x(a,o,{get:r[o],enumerable:!0})},b=(a,r,o,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of G(r))!I.call(a,s)&&s!==o&&x(a,s,{get:()=>r[s],enumerable:!(d=E(r,s))||d.enumerable});return a};var z=(a,r,o)=>(o=a!=null?h(w(a)):{},b(r||!a||!a.__esModule?x(o,"default",{value:a,enumerable:!0}):o,a)),P=a=>b(x({},"__esModule",{value:!0}),a);var F={};k(F,{default:()=>_});module.exports=P(F);var e=require("react/jsx-runtime"),u=require("react"),t=require("../../../../../../components/index.js"),v=require("../../../../BizProductProvider.js"),N=z(require("./Select.js")),y=require("../../../../../AiuiProvider/index.js"),f=require("../../../../utils/index.js"),D=require("./ShopifyColorOption.js");const T=()=>{const{locale:a="us",copyWriting:r}=(0,y.useAiuiContext)(),{compareData:o,product:d}=(0,v.useBizProductContext)(),[s,g]=(0,u.useState)();(0,u.useEffect)(()=>{g(o?.availableCompareList[0]?.handle)},[o?.availableCompareList]);const m=[o?.currentProductCompareData?.product,o?.availableCompareList.find(l=>l.handle===s)?.product].filter(Boolean);return o?.specificationKeys?(0,e.jsxs)(t.Dialog,{children:[(0,e.jsx)(t.DialogTrigger,{className:"text-base font-bold leading-[1.4]",children:r?.compare}),(0,e.jsxs)(t.DialogContent,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,e.jsx)(t.DialogHeader,{className:"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4",children:(0,e.jsx)(t.DialogTitle,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:r?.compare})}),(0,e.jsxs)("div",{className:"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4",children:[(0,e.jsxs)(t.Grid,{className:"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4",children:[(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:r?.product||"Product"})}),(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)(t.Text,{as:"div",className:"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold",html:o.currentProductCompareData?.shortName||d.title})}),s&&(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)(N.default,{className:"rounded-btn h-[48px] px-4",value:s,onChange:l=>{g(l)},list:o.options})})]}),(0,e.jsxs)(t.Grid,{className:"laptop:gap-8 laptop:py-3 grid-cols-3 py-4",children:[(0,e.jsx)(t.GridItem,{span:1}),m.map((l,i)=>(0,e.jsx)(t.GridItem,{span:1,className:"flex items-center",children:(0,e.jsx)("img",{src:l.images[0].url,alt:l.title,className:"size-[100px]",role:"presentation"})},i))]}),(0,e.jsxs)(t.Grid,{className:"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)(t.GridItem,{span:1}),m.map((l,i)=>{const p=l.variants[0];return(0,e.jsx)(t.GridItem,{span:1,className:"flex h-full",children:(0,e.jsx)("div",{className:"flex flex-col gap-[8px]",children:p.price.amount<9999999&&(0,e.jsx)("div",{className:"flex items-center gap-[8px]",children:(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)("span",{className:"text-[18px] font-bold",children:(0,f.formatPrice)({locale:a,amount:p?.coupons?.[0]?.variant_price4wscode||p.price.amount,currencyCode:p.price.currencyCode})}),Number(p?.coupons?.[0]?.variant_price4wscode)>0&&(0,e.jsx)("span",{className:"text-[18px] font-bold text-[#6D6D6F] line-through",children:(0,f.formatPrice)({locale:a,amount:p.price.amount,currencyCode:p.price.currencyCode})})]})})})},i)})]}),(0,e.jsxs)(t.Grid,{className:"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:r?.color||"Color"})}),m.map((l,i)=>{const p=l.options?.find(c=>["color","colour","couleur"].find(n=>c.name.toLowerCase().includes(n)))?.values.map(c=>c.label);return(0,e.jsx)(t.GridItem,{span:1,className:"flex h-full",children:p?.length&&(0,e.jsx)("div",{className:"flex items-center gap-4",children:p.map(c=>(0,e.jsx)(D.ShopifyColorOption,{label:c,className:"size-6"},c))})},i)})]}),(0,e.jsx)(t.Grid,{className:"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]",children:o.specificationKeys?.map(l=>(0,e.jsxs)(t.GridItem,{span:12,className:"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:l}),m.map((i,p)=>{let n=i.metafields?.global?.specifications?.find(C=>C?.key===l)?.value||"";switch(n.trim().toLowerCase()){case"true":n="\u2714\uFE0F";break;case"false":n="\u274C";break;default:break}return(0,e.jsx)("div",{className:"flex items-center",children:(0,e.jsx)(t.Text,{className:"text-[16px] font-bold text-[#1D1D1F]",html:n})},p)})]},l))})]})]})]}):null};var _=T;
|
|
2
2
|
//# sourceMappingURL=CompareModal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n Grid,\n GridItem,\n Text,\n Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { compareData, product } = useBizProductContext()\n const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n useEffect(() => {\n setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n }, [compareData?.availableCompareList])\n\n const products = [\n compareData?.currentProductCompareData!?.product,\n compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n ].filter(Boolean) as CompareItem['product'][]\n\n if (!compareData?.specificationKeys) return null\n\n return (\n <Dialog>\n <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n {copyWriting?.compare}\n </DialogTitle>\n </DialogHeader>\n <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n </GridItem>\n <GridItem span={1}>\n <Text\n as=\"div\"\n className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n html={compareData.currentProductCompareData?.shortName || product.title}\n ></Text>\n </GridItem>\n {selectedProductHandle && (\n <GridItem span={1}>\n <Select\n className=\"rounded-btn h-[48px] px-4\"\n value={selectedProductHandle}\n onChange={value => {\n setSelectedProductHandle(value)\n }}\n list={compareData.options!}\n />\n </GridItem>\n )}\n </Grid>\n <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n return (\n <GridItem key={productIndex} span={1} className=\"flex items-center\">\n <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n const variant = product.variants[0]\n return (\n <GridItem span={1} key={productIndex} className=\"flex h-full\">\n {/* Price with original price */}\n <div className=\"flex flex-col gap-[8px]\">\n {variant.price.amount < 9999999 && (\n <div className=\"flex items-center gap-[8px]\">\n {/* <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div> */}\n <div className=\"flex items-center gap-[6px]\">\n <span className=\"text-[18px] font-bold\">\n {formatPrice({\n locale,\n amount: variant?.coupons?.[0]?.variant_price4wscode || variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n {Number(variant?.coupons?.[0]?.variant_price4wscode) > 0 && (\n <span className=\"text-[18px] font-bold text-[#6D6D6F] line-through\">\n {formatPrice({\n locale,\n amount: variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n )}\n </div>\n </div>\n )}\n {/* <Button variant=\"primary\" size=\"lg\">\n {copyWriting?.shopNow || 'Shop Now'}\n </Button> */}\n </div>\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{copyWriting?.color || 'Color'}</div>\n </GridItem>\n {products.map((product, productIndex) => {\n const colors = product.options\n ?.find(option =>\n ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n )\n ?.values.map(value => value.label)\n return (\n <GridItem span={1} key={productIndex} className=\"flex h-full\">\n {colors?.length && (\n <div className=\"flex items-center gap-4\">\n {colors.map(label => (\n <ShopifyColorOption key={label} label={label} className=\"size-6\" />\n ))}\n </div>\n )}\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]\">\n {compareData.specificationKeys?.map((key: string) => {\n return (\n <GridItem\n span={12}\n className=\"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\"\n key={key}\n >\n {/* Detail value */}\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{key}</div>\n {/* Product Values */}\n {products.map((product, productIndex) => {\n const value =\n product.metafields?.global?.specifications?.find(\n (specification: { key: string }) => specification?.key === key\n )?.value || ''\n let text = value\n switch (text.trim().toLowerCase()) {\n case 'true':\n text = '\u2714\uFE0F'\n break\n case 'false':\n text = '\u274C'\n break\n default:\n break\n }\n return (\n <div key={productIndex} className=\"flex items-center\">\n {/* Other details */}\n <
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n Grid,\n GridItem,\n Text,\n Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { compareData, product } = useBizProductContext()\n const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n useEffect(() => {\n setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n }, [compareData?.availableCompareList])\n\n const products = [\n compareData?.currentProductCompareData!?.product,\n compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n ].filter(Boolean) as CompareItem['product'][]\n\n if (!compareData?.specificationKeys) return null\n\n return (\n <Dialog>\n <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n {copyWriting?.compare}\n </DialogTitle>\n </DialogHeader>\n <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n </GridItem>\n <GridItem span={1}>\n <Text\n as=\"div\"\n className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n html={compareData.currentProductCompareData?.shortName || product.title}\n ></Text>\n </GridItem>\n {selectedProductHandle && (\n <GridItem span={1}>\n <Select\n className=\"rounded-btn h-[48px] px-4\"\n value={selectedProductHandle}\n onChange={value => {\n setSelectedProductHandle(value)\n }}\n list={compareData.options!}\n />\n </GridItem>\n )}\n </Grid>\n <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n return (\n <GridItem key={productIndex} span={1} className=\"flex items-center\">\n <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n const variant = product.variants[0]\n return (\n <GridItem span={1} key={productIndex} className=\"flex h-full\">\n {/* Price with original price */}\n <div className=\"flex flex-col gap-[8px]\">\n {variant.price.amount < 9999999 && (\n <div className=\"flex items-center gap-[8px]\">\n {/* <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div> */}\n <div className=\"flex items-center gap-[6px]\">\n <span className=\"text-[18px] font-bold\">\n {formatPrice({\n locale,\n amount: variant?.coupons?.[0]?.variant_price4wscode || variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n {Number(variant?.coupons?.[0]?.variant_price4wscode) > 0 && (\n <span className=\"text-[18px] font-bold text-[#6D6D6F] line-through\">\n {formatPrice({\n locale,\n amount: variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n )}\n </div>\n </div>\n )}\n {/* <Button variant=\"primary\" size=\"lg\">\n {copyWriting?.shopNow || 'Shop Now'}\n </Button> */}\n </div>\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{copyWriting?.color || 'Color'}</div>\n </GridItem>\n {products.map((product, productIndex) => {\n const colors = product.options\n ?.find(option =>\n ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n )\n ?.values.map(value => value.label)\n return (\n <GridItem span={1} key={productIndex} className=\"flex h-full\">\n {colors?.length && (\n <div className=\"flex items-center gap-4\">\n {colors.map(label => (\n <ShopifyColorOption key={label} label={label} className=\"size-6\" />\n ))}\n </div>\n )}\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]\">\n {compareData.specificationKeys?.map((key: string) => {\n return (\n <GridItem\n span={12}\n className=\"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\"\n key={key}\n >\n {/* Detail value */}\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{key}</div>\n {/* Product Values */}\n {products.map((product, productIndex) => {\n const value =\n product.metafields?.global?.specifications?.find(\n (specification: { key: string }) => specification?.key === key\n )?.value || ''\n let text = value\n switch (text.trim().toLowerCase()) {\n case 'true':\n text = '\u2714\uFE0F'\n break\n case 'false':\n text = '\u274C'\n break\n default:\n break\n }\n return (\n <div key={productIndex} className=\"flex items-center\">\n {/* Other details */}\n <Text className=\"text-[16px] font-bold text-[#1D1D1F]\" html={text}></Text>\n </div>\n )\n })}\n </GridItem>\n )\n })}\n </Grid>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport default CompareModal\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCM,IAAAI,EAAA,6BArCNC,EAAoC,iBACpCC,EAUO,iDACPC,EAAqC,6CAErCC,EAAmB,0BACnBC,EAA+B,gDAC/BC,EAA4B,sCAC5BC,EAAmC,mCAEnC,MAAMC,EAAe,IAAM,CACzB,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAChD,CAAE,YAAAC,EAAa,QAAAC,CAAQ,KAAI,wBAAqB,EAChD,CAACC,EAAuBC,CAAwB,KAAI,YAAiB,KAE3E,aAAU,IAAM,CACdA,EAAyBH,GAAa,qBAAqB,CAAC,GAAG,MAAM,CACvE,EAAG,CAACA,GAAa,oBAAoB,CAAC,EAEtC,MAAMI,EAAW,CACfJ,GAAa,2BAA4B,QACzCA,GAAa,qBAAqB,KAAKC,GAAWA,EAAQ,SAAWC,CAAqB,GAAG,OAC/F,EAAE,OAAO,OAAO,EAEhB,OAAKF,GAAa,qBAGhB,QAAC,UACC,oBAAC,iBAAc,UAAU,oCAAqC,SAAAD,GAAa,QAAQ,KACnF,QAAC,iBACC,iBAAiB,UACjB,UAAU,wPAEV,oBAAC,gBAAa,UAAU,qDACtB,mBAAC,eAAY,UAAU,qDACpB,SAAAA,GAAa,QAChB,EACF,KACA,QAAC,OAAI,UAAU,uDACb,qBAAC,QAAK,UAAU,uDACd,oBAAC,YAAS,KAAM,EACd,mBAAC,OAAI,UAAU,uCAAwC,SAAAA,GAAa,SAAW,UAAU,EAC3F,KACA,OAAC,YAAS,KAAM,EACd,mBAAC,QACC,GAAG,MACH,UAAU,mGACV,KAAMC,EAAY,2BAA2B,WAAaC,EAAQ,MACnE,EACH,EACCC,MACC,OAAC,YAAS,KAAM,EACd,mBAAC,EAAAG,QAAA,CACC,UAAU,4BACV,MAAOH,EACP,SAAUI,GAAS,CACjBH,EAAyBG,CAAK,CAChC,EACA,KAAMN,EAAY,QACpB,EACF,GAEJ,KACA,QAAC,QAAK,UAAU,4CACd,oBAAC,YAAS,KAAM,EAAG,EAClBI,EAAS,IAAI,CAACH,EAASM,OAEpB,OAAC,YAA4B,KAAM,EAAG,UAAU,oBAC9C,mBAAC,OAAI,IAAKN,EAAQ,OAAO,CAAC,EAAE,IAAK,IAAKA,EAAQ,MAAO,UAAU,eAAe,KAAK,eAAe,GADrFM,CAEf,CAEH,GACH,KACA,QAAC,QAAK,UAAU,iFACd,oBAAC,YAAS,KAAM,EAAG,EAClBH,EAAS,IAAI,CAACH,EAASM,IAAiB,CACvC,MAAMC,EAAUP,EAAQ,SAAS,CAAC,EAClC,SACE,OAAC,YAAS,KAAM,EAAsB,UAAU,cAE9C,mBAAC,OAAI,UAAU,0BACZ,SAAAO,EAAQ,MAAM,OAAS,YACtB,OAAC,OAAI,UAAU,8BAEb,oBAAC,OAAI,UAAU,8BACb,oBAAC,QAAK,UAAU,wBACb,2BAAY,CACX,OAAAV,EACA,OAAQU,GAAS,UAAU,CAAC,GAAG,sBAAwBA,EAAQ,MAAM,OACrE,aAAcA,EAAQ,MAAM,YAC9B,CAAC,EACH,EACC,OAAOA,GAAS,UAAU,CAAC,GAAG,oBAAoB,EAAI,MACrD,OAAC,QAAK,UAAU,oDACb,2BAAY,CACX,OAAAV,EACA,OAAQU,EAAQ,MAAM,OACtB,aAAcA,EAAQ,MAAM,YAC9B,CAAC,EACH,GAEJ,EACF,EAKJ,GA7BsBD,CA8BxB,CAEJ,CAAC,GACH,KACA,QAAC,QAAK,UAAU,iFACd,oBAAC,YAAS,KAAM,EACd,mBAAC,OAAI,UAAU,uCAAwC,SAAAR,GAAa,OAAS,QAAQ,EACvF,EACCK,EAAS,IAAI,CAACH,EAASM,IAAiB,CACvC,MAAME,EAASR,EAAQ,SACnB,KAAKS,GACL,CAAC,QAAS,SAAU,SAAS,EAAE,KAAKC,GAAaD,EAAO,KAAK,YAAY,EAAE,SAASC,CAAS,CAAC,CAChG,GACE,OAAO,IAAIL,GAASA,EAAM,KAAK,EACnC,SACE,OAAC,YAAS,KAAM,EAAsB,UAAU,cAC7C,SAAAG,GAAQ,WACP,OAAC,OAAI,UAAU,0BACZ,SAAAA,EAAO,IAAIG,MACV,OAAC,sBAA+B,MAAOA,EAAO,UAAU,UAA/BA,CAAwC,CAClE,EACH,GANoBL,CAQxB,CAEJ,CAAC,GACH,KACA,OAAC,QAAK,UAAU,yEACb,SAAAP,EAAY,mBAAmB,IAAKa,MAEjC,QAAC,YACC,KAAM,GACN,UAAU,mGAIV,oBAAC,OAAI,UAAU,uCAAwC,SAAAA,EAAI,EAE1DT,EAAS,IAAI,CAACH,EAASM,IAAiB,CAKvC,IAAIO,EAHFb,EAAQ,YAAY,QAAQ,gBAAgB,KACzCc,GAAmCA,GAAe,MAAQF,CAC7D,GAAG,OAAS,GAEd,OAAQC,EAAK,KAAK,EAAE,YAAY,EAAG,CACjC,IAAK,OACHA,EAAO,eACP,MACF,IAAK,QACHA,EAAO,SACP,MACF,QACE,KACJ,CACA,SACE,OAAC,OAAuB,UAAU,oBAEhC,mBAAC,QAAK,UAAU,uCAAuC,KAAMA,EAAM,GAF3DP,CAGV,CAEJ,CAAC,IA3BIM,CA4BP,CAEH,EACH,GACF,GACF,GACF,EAvJ0C,IAyJ9C,EAEA,IAAO1B,EAAQU",
|
|
6
6
|
"names": ["CompareModal_exports", "__export", "CompareModal_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_BizProductProvider", "import_Select", "import_AiuiProvider", "import_utils", "import_ShopifyColorOption", "CompareModal", "locale", "copyWriting", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "Select", "value", "productIndex", "variant", "colors", "option", "predicate", "label", "key", "text", "specification"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var v=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var H=(n,o)=>{for(var s in o)v(n,s,{get:o[s],enumerable:!0})},L=(n,o,s,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of k(o))!E.call(n,i)&&i!==s&&v(n,i,{get:()=>o[i],enumerable:!(c=T(o,i))||c.enumerable});return n};var M=n=>L(v({},"__esModule",{value:!0}),n);var I={};H(I,{default:()=>P});module.exports=M(I);var r=require("react/jsx-runtime"),d=require("../../../../../helpers/index.js"),t=require("react"),w=require("./useScrollSpy.js"),g=require("es-toolkit");const z=({tabs:n,onSpyNavItemClick:o,className:s,renderRating:c})=>{const[i,S]=(0,t.useState)(0),p=(0,t.useMemo)(()=>c?[...n,{label:"Reviews",id:"ipc-review",href:""}]:n,[n,c]),y=(0,t.useMemo)(()=>p.map(e=>e.id),[p]),u=(0,g.debounce)(()=>{const e=document.querySelector("#purchase-bar");e&&S(e.getBoundingClientRect().height)},500);(0,t.useEffect)(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[u]);const a=(0,w.useScrollSpy)(y,i),f=(0,t.useRef)(null),m=(0,t.useRef)(new Map),x=(0,t.useCallback)(e=>{o?.(e)},[o]);(0,t.useEffect)(()=>{if(!a||!f.current)return;const e=m.current.get(a);if(!e)return;const l=f.current,h=e.getBoundingClientRect(),b=l.getBoundingClientRect(),R=h.left+h.width/2-b.left,B=b.width/2,C=R-B;l.scrollTo({left:l.scrollLeft+C,behavior:"smooth"})},[a]);const N=(0,t.useCallback)((e,l)=>{l?m.current.set(e,l):m.current.delete(e)},[]);return(0,r.jsx)("div",{ref:f,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:(0,d.cn)("overflow-x-auto",s),children:(0,r.jsx)("div",{className:"tablet:gap-8 flex gap-6",children:p?.map(e=>(0,r.jsx)("button",{ref:l=>N(e.id,l),children:e.id==="ipc-review"?(0,r.jsxs)("div",{className:"relative shrink-0 whitespace-nowrap py-[10px]",children:[c,(0,r.jsx)("div",{className:(0,d.cn)("laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":a===e.id})})]}):(0,r.jsxs)("div",{className:(0,d.cn)("laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]",{"text-[#1d1d1f]":a===e.id}),onClick:()=>x(e),children:[e.label,(0,r.jsx)("div",{className:(0,d.cn)("laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":a===e.id})})]})},e.id))})})};var P=z;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../../../../../helpers/index.js'\nimport { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\n\n// \u81EA\u5B9A\u4E49 hook\uFF1A\u76D1\u542C\u9875\u9762\u6EDA\u52A8\uFF0C\u81EA\u52A8\u66F4\u65B0\u5F53\u524D\u6FC0\u6D3B\u7684 tab\nconst useScrollSpy = (tabs: ScrollSpyNavItem[], onActiveChange?: (tab: ScrollSpyNavItem) => void) => {\n const [activeTab, setActiveTab] = useState<ScrollSpyNavItem | null>(null)\n const observerRef = useRef<IntersectionObserver | null>(null)\n const sectionsRef = useRef<Map<string, ScrollSpyNavItem>>(new Map())\n const isManualScrollRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u4E3A\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\n const activeTabRef = useRef<ScrollSpyNavItem | null>(null) // \u7528 ref \u5B58\u50A8\u5F53\u524D\u6FC0\u6D3B\u7684 tab\uFF0C\u907F\u514D\u95ED\u5305\u95EE\u9898\n\n // \u540C\u6B65 activeTab \u5230 ref\n useEffect(() => {\n activeTabRef.current = activeTab\n }, [activeTab])\n\n useEffect(() => {\n if (!tabs || tabs.length === 0) return\n\n // \u6E05\u7406\u4E4B\u524D\u7684 observer\n if (observerRef.current) {\n observerRef.current.disconnect()\n }\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const purchaseBar = document.getElementById('purchase-bar')\n const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n // \u521B\u5EFA Map \u5B58\u50A8 section \u4FE1\u606F\n sectionsRef.current.clear()\n const elements: Element[] = []\n\n tabs.forEach(tab => {\n const id = tab.id || tab.href?.replace('#', '')\n const element = document.getElementById(id)\n if (element) {\n sectionsRef.current.set(id, tab)\n elements.push(element)\n }\n })\n\n if (elements.length === 0) {\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\u5143\u7D20\uFF0C\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab \u4E3A\u6FC0\u6D3B\u72B6\u6001\n setActiveTab(tabs[0])\n return\n }\n\n // \u4F7F\u7528 IntersectionObserver \u76D1\u542C\u5143\u7D20\u8FDB\u5165\u89C6\u53E3\n const observerOptions: IntersectionObserverInit = {\n root: null,\n rootMargin: `-${navHeight}px 0px -50% 0px`, // \u4E0A\u65B9\u504F\u79FB\u5BFC\u822A\u680F\u9AD8\u5EA6\uFF0C\u4E0B\u65B9\u504F\u79FB50%\u89C6\u53E3\u9AD8\u5EA6\n threshold: [0, 0.25, 0.5, 0.75, 1],\n }\n\n const observerCallback: IntersectionObserverCallback = entries => {\n // \u5982\u679C\u662F\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\uFF0C\u4E0D\u8981\u66F4\u65B0\u72B6\u6001\n if (isManualScrollRef.current) {\n return\n }\n\n // \u68C0\u67E5\u662F\u5426\u6EDA\u52A8\u5230\u9875\u9762\u9876\u90E8\uFF08\u7279\u6B8A\u5904\u7406\u7B2C\u4E00\u4E2A\u5143\u7D20\uFF09\n const scrollTop = window.scrollY || document.documentElement.scrollTop\n if (scrollTop < navHeight + 50) {\n // \u5728\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n const firstTab = tabs[0]\n if (firstTab && activeTabRef.current?.id !== firstTab.id) {\n console.log('\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:', firstTab.label)\n setActiveTab(firstTab)\n onActiveChange?.(firstTab)\n }\n return\n }\n\n // \u627E\u51FA\u6240\u6709\u6B63\u5728\u4EA4\u53C9\u7684 entries\n const intersectingEntries = entries\n .filter(entry => entry.isIntersecting)\n .sort((a, b) => {\n // \u6309\u7167\u5143\u7D20\u5728\u9875\u9762\u4E0A\u7684\u4F4D\u7F6E\u6392\u5E8F\uFF08\u4ECE\u4E0A\u5230\u4E0B\uFF09\n return a.boundingClientRect.top - b.boundingClientRect.top\n })\n\n if (intersectingEntries.length > 0) {\n // \u9009\u62E9\u6700\u4E0A\u9762\u7684\u6B63\u5728\u4EA4\u53C9\u7684\u5143\u7D20\n const topEntry = intersectingEntries[0]\n const id = topEntry.target.id\n const tab = sectionsRef.current.get(id)\n\n if (tab) {\n setActiveTab(tab)\n onActiveChange?.(tab)\n }\n } else {\n // \u5982\u679C\u6CA1\u6709\u5143\u7D20\u6B63\u5728\u4EA4\u53C9\uFF0C\u627E\u51FA\u6700\u63A5\u8FD1\u89C6\u53E3\u9876\u90E8\u7684\u5143\u7D20\n const sortedEntries = [...entries].sort((a, b) => {\n return Math.abs(a.boundingClientRect.top) - Math.abs(b.boundingClientRect.top)\n })\n\n if (sortedEntries.length > 0) {\n const closestEntry = sortedEntries[0]\n const id = closestEntry.target.id\n const tab = sectionsRef.current.get(id)\n\n if (tab) {\n setActiveTab(tab)\n onActiveChange?.(tab)\n }\n }\n }\n }\n\n observerRef.current = new IntersectionObserver(observerCallback, observerOptions)\n\n // \u89C2\u5BDF\u6240\u6709 section \u5143\u7D20\n elements.forEach(element => {\n observerRef.current?.observe(element)\n })\n\n // \u6DFB\u52A0\u6EDA\u52A8\u4E8B\u4EF6\u76D1\u542C\uFF0C\u5904\u7406\u9875\u9762\u9876\u90E8\u7684\u60C5\u51B5\n const handleScroll = () => {\n if (isManualScrollRef.current) {\n return\n }\n\n const scrollTop = window.scrollY || document.documentElement.scrollTop\n // \u5982\u679C\u6EDA\u52A8\u5230\u63A5\u8FD1\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n if (scrollTop < navHeight + 50) {\n const firstTab = tabs[0]\n if (firstTab) {\n setActiveTab(firstTab)\n onActiveChange?.(firstTab)\n }\n }\n }\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n\n return () => {\n if (observerRef.current) {\n observerRef.current.disconnect()\n }\n window.removeEventListener('scroll', handleScroll)\n }\n }, [tabs, onActiveChange])\n\n // \u521D\u59CB\u5316\u65F6\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab\n useEffect(() => {\n if (!activeTab && tabs && tabs.length > 0) {\n setActiveTab(tabs[0])\n }\n }, [tabs, activeTab])\n\n // \u624B\u52A8\u8BBE\u7F6E\u6FC0\u6D3B tab \u5E76\u6EDA\u52A8\u5230\u5BF9\u5E94\u4F4D\u7F6E\n const handleSetActiveTab = useCallback((tab: ScrollSpyNavItem) => {\n setActiveTab(tab)\n\n // \u6EDA\u52A8\u5230\u5BF9\u5E94\u7684\u951A\u70B9\n const id = tab.id || tab.href?.replace('#', '')\n const element = document.getElementById(id)\n\n if (element) {\n const purchaseBar = document.getElementById('purchase-bar')\n const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n // \u8BBE\u7F6E\u624B\u52A8\u6EDA\u52A8\u6807\u5FD7\n isManualScrollRef.current = true\n\n // \u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF08\u5143\u7D20\u9876\u90E8 - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u95F4\u8DDD\uFF09\n const elementTop = element.getBoundingClientRect().top + window.scrollY\n const scrollToPosition = elementTop - navHeight - 10\n\n window.scrollTo({\n top: scrollToPosition,\n behavior: 'smooth',\n })\n\n // \u6EDA\u52A8\u7ED3\u675F\u540E\u91CD\u7F6E\u6807\u5FD7\n setTimeout(() => {\n isManualScrollRef.current = false\n }, 1000) // 1\u79D2\u540E\u91CD\u7F6E\uFF0C\u786E\u4FDD\u6EDA\u52A8\u52A8\u753B\u5B8C\u6210\n }\n }, [])\n\n return { activeTab: activeTab || tabs?.[0], setActiveTab: handleSetActiveTab }\n}\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n const combinedTabs = useMemo(() => {\n if (renderRating) {\n return [...tabs, { label: 'Reviews', id: 'review', href: '' }]\n }\n return tabs\n }, [tabs, renderRating])\n\n const { activeTab, setActiveTab } = useScrollSpy(combinedTabs)\n\n // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const onTabClick = useCallback(\n (tab: ScrollSpyNavItem) => {\n setActiveTab(tab)\n onSpyNavItemClick?.(tab)\n },\n [onSpyNavItemClick, setActiveTab]\n )\n\n // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n useEffect(() => {\n if (!activeTab || !scrollContainerRef.current) return\n\n const activeTabElement = tabRefs.current.get(activeTab.id)\n if (!activeTabElement) return\n\n const container = scrollContainerRef.current\n const tabRect = activeTabElement.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n\n // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n const containerCenter = containerRect.width / 2\n const scrollOffset = tabCenter - containerCenter\n\n container.scrollTo({\n left: container.scrollLeft + scrollOffset,\n behavior: 'smooth',\n })\n }, [activeTab?.id])\n\n // \u8BBE\u7F6E tab ref\n const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n if (element) {\n tabRefs.current.set(tabId, element)\n } else {\n tabRefs.current.delete(tabId)\n }\n }, [])\n\n // \u684C\u9762\u7AEF\u6E32\u67D3\n return (\n <div\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n className={cn('overflow-x-auto', className)}\n >\n <div className=\"tablet:gap-8 flex gap-6\">\n {combinedTabs?.map(tab => (\n <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n {tab.id === 'review' ? (\n <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n {renderRating}\n <div\n className={cn(\n 'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </div>\n ) : (\n <div\n className={cn(\n 'laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n {\n 'text-[#1d1d1f]': activeTab?.id === tab.id,\n }\n )}\n onClick={() => onTabClick(tab)}\n >\n {tab.label}\n <div\n className={cn(\n 'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </div>\n )}\n </button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ScrollSpyNav\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ScrollSpyNav_exports", "__export", "ScrollSpyNav_default", "__toCommonJS", "import_jsx_runtime", "import_helpers", "import_react", "
|
|
4
|
+
"sourcesContent": ["import { cn } from '../../../../../helpers/index.js'\nimport { useCallback, useRef, useMemo, useEffect, useState } from 'react'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { useScrollSpy } from './useScrollSpy.js'\nimport { debounce } from 'es-toolkit'\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n const [purchaseBarHeight, setPurchaseBarHeight] = useState(0)\n const combinedTabs = useMemo(() => {\n if (renderRating) {\n return [...tabs, { label: 'Reviews', id: 'ipc-review', href: '' }]\n }\n return tabs\n }, [tabs, renderRating])\n\n const sectionIds = useMemo(() => {\n return combinedTabs.map(tab => tab.id)\n }, [combinedTabs])\n\n const debouncedHandleResize = debounce(() => {\n const purchaseBar = document.querySelector('#purchase-bar')\n if (purchaseBar) {\n setPurchaseBarHeight(purchaseBar.getBoundingClientRect().height)\n }\n }, 500)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [debouncedHandleResize])\n\n const activeId = useScrollSpy(sectionIds, purchaseBarHeight)\n\n // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const onTabClick = useCallback(\n (tab: ScrollSpyNavItem) => {\n onSpyNavItemClick?.(tab)\n },\n [onSpyNavItemClick]\n )\n\n // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n useEffect(() => {\n if (!activeId || !scrollContainerRef.current) return\n\n const activeTabElement = tabRefs.current.get(activeId)\n if (!activeTabElement) return\n\n const container = scrollContainerRef.current\n const tabRect = activeTabElement.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n\n // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n const containerCenter = containerRect.width / 2\n const scrollOffset = tabCenter - containerCenter\n\n container.scrollTo({\n left: container.scrollLeft + scrollOffset,\n behavior: 'smooth',\n })\n }, [activeId])\n\n // \u8BBE\u7F6E tab ref\n const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n if (element) {\n tabRefs.current.set(tabId, element)\n } else {\n tabRefs.current.delete(tabId)\n }\n }, [])\n\n return (\n <div\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n className={cn('overflow-x-auto', className)}\n >\n <div className=\"tablet:gap-8 flex gap-6\">\n {combinedTabs?.map(tab => (\n <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n {tab.id === 'ipc-review' ? (\n <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n {renderRating}\n <div\n className={cn(\n 'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeId === tab.id,\n }\n )}\n />\n </div>\n ) : (\n <div\n className={cn(\n 'laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n {\n 'text-[#1d1d1f]': activeId === tab.id,\n }\n )}\n onClick={() => onTabClick(tab)}\n >\n {tab.label}\n <div\n className={cn(\n 'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeId === tab.id,\n }\n )}\n />\n </div>\n )}\n </button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ScrollSpyNav\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyFc,IAAAI,EAAA,6BAzFdC,EAAmB,2CACnBC,EAAkE,iBAElEC,EAA6B,6BAC7BC,EAAyB,sBAEzB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,kBAAAC,EAAmB,UAAAC,EAAW,aAAAC,CAAa,IAAyB,CAEhG,KAAM,CAACC,EAAmBC,CAAoB,KAAI,YAAS,CAAC,EACtDC,KAAe,WAAQ,IACvBH,EACK,CAAC,GAAGH,EAAM,CAAE,MAAO,UAAW,GAAI,aAAc,KAAM,EAAG,CAAC,EAE5DA,EACN,CAACA,EAAMG,CAAY,CAAC,EAEjBI,KAAa,WAAQ,IAClBD,EAAa,IAAIE,GAAOA,EAAI,EAAE,EACpC,CAACF,CAAY,CAAC,EAEXG,KAAwB,YAAS,IAAM,CAC3C,MAAMC,EAAc,SAAS,cAAc,eAAe,EACtDA,GACFL,EAAqBK,EAAY,sBAAsB,EAAE,MAAM,CAEnE,EAAG,GAAG,KAEN,aAAU,KACRD,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAACA,CAAqB,CAAC,EAE1B,MAAME,KAAW,gBAAaJ,EAAYH,CAAiB,EAGrDQ,KAAqB,UAAuB,IAAI,EAChDC,KAAU,UAAuC,IAAI,GAAK,EAE1DC,KAAa,eAChBN,GAA0B,CACzBP,IAAoBO,CAAG,CACzB,EACA,CAACP,CAAiB,CACpB,KAGA,aAAU,IAAM,CACd,GAAI,CAACU,GAAY,CAACC,EAAmB,QAAS,OAE9C,MAAMG,EAAmBF,EAAQ,QAAQ,IAAIF,CAAQ,EACrD,GAAI,CAACI,EAAkB,OAEvB,MAAMC,EAAYJ,EAAmB,QAC/BK,EAAUF,EAAiB,sBAAsB,EACjDG,EAAgBF,EAAU,sBAAsB,EAGhDG,EAAYF,EAAQ,KAAOA,EAAQ,MAAQ,EAAIC,EAAc,KAC7DE,EAAkBF,EAAc,MAAQ,EACxCG,EAAeF,EAAYC,EAEjCJ,EAAU,SAAS,CACjB,KAAMA,EAAU,WAAaK,EAC7B,SAAU,QACZ,CAAC,CACH,EAAG,CAACV,CAAQ,CAAC,EAGb,MAAMW,KAAY,eAAY,CAACC,EAAeC,IAAsC,CAC9EA,EACFX,EAAQ,QAAQ,IAAIU,EAAOC,CAAO,EAElCX,EAAQ,QAAQ,OAAOU,CAAK,CAEhC,EAAG,CAAC,CAAC,EAEL,SACE,OAAC,OACC,IAAKX,EACL,MAAO,CAAE,eAAgB,OAAQ,gBAAiB,MAAO,EACzD,aAAW,MAAG,kBAAmBV,CAAS,EAE1C,mBAAC,OAAI,UAAU,0BACZ,SAAAI,GAAc,IAAIE,MACjB,OAAC,UAAoB,IAAKiB,GAAMH,EAAUd,EAAI,GAAIiB,CAAE,EACjD,SAAAjB,EAAI,KAAO,gBACV,QAAC,OAAI,UAAU,gDACZ,UAAAL,KACD,OAAC,OACC,aAAW,MACT,iHACA,CACE,SAAUQ,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,KAEA,QAAC,OACC,aAAW,MACT,0GACA,CACE,iBAAkBG,IAAaH,EAAI,EACrC,CACF,EACA,QAAS,IAAMM,EAAWN,CAAG,EAE5B,UAAAA,EAAI,SACL,OAAC,OACC,aAAW,MACT,iHACA,CACE,SAAUG,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,GAhCSA,EAAI,EAkCjB,CACD,EACH,EACF,CAEJ,EAEA,IAAOhB,EAAQO",
|
|
6
|
+
"names": ["ScrollSpyNav_exports", "__export", "ScrollSpyNav_default", "__toCommonJS", "import_jsx_runtime", "import_helpers", "import_react", "import_useScrollSpy", "import_es_toolkit", "ScrollSpyNav", "tabs", "onSpyNavItemClick", "className", "renderRating", "purchaseBarHeight", "setPurchaseBarHeight", "combinedTabs", "sectionIds", "tab", "debouncedHandleResize", "purchaseBar", "activeId", "scrollContainerRef", "tabRefs", "onTabClick", "activeTabElement", "container", "tabRect", "containerRect", "tabCenter", "containerCenter", "scrollOffset", "setTabRef", "tabId", "element", "el"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},v=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of m(t))!p.call(e,o)&&o!==n&&i(e,o,{get:()=>t[o],enumerable:!(r=f(t,o))||r.enumerable});return e};var h=e=>v(i({},"__esModule",{value:!0}),e);var E={};g(E,{useScrollSpy:()=>u});module.exports=h(E);var c=require("react"),s=require("es-toolkit");const u=(e,t=100)=>{const[n,r]=(0,c.useState)("");return(0,c.useEffect)(()=>{const o=()=>{const w=Math.ceil(window.scrollY+t);for(let l=e.length-1;l>=0;l--){const d=document.getElementById(e[l]);if(d){const a=Math.ceil(d.getBoundingClientRect().top+window.scrollY);if(w>=a){r(e[l]);break}}}};return o(),window.addEventListener("scroll",(0,s.debounce)(o,50)),()=>{window.removeEventListener("scroll",(0,s.debounce)(o,50))}},[e,t]),n};
|
|
2
|
+
//# sourceMappingURL=useScrollSpy.js.map
|