@anker-in/headless-ui 1.1.64 → 1.1.66
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/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +8 -2
- package/dist/cjs/biz-components/HeroBanner/types.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- package/dist/cjs/biz-components/ImageOverlayShelf/index.js +1 -1
- package/dist/cjs/biz-components/ImageOverlayShelf/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/utils/index.d.ts +3 -0
- package/dist/cjs/biz-components/Listing/utils/index.js +1 -1
- package/dist/cjs/biz-components/Listing/utils/index.js.map +3 -3
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +1 -1
- package/dist/cjs/components/Countdown.d.ts +1 -0
- package/dist/cjs/components/Countdown.js +1 -1
- package/dist/cjs/components/Countdown.js.map +3 -3
- package/dist/cjs/helpers/ScrollLoadVideo.js +1 -1
- package/dist/cjs/helpers/ScrollLoadVideo.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/types.d.ts +8 -2
- package/dist/esm/biz-components/ImageOverlayShelf/index.js +1 -1
- package/dist/esm/biz-components/ImageOverlayShelf/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/utils/index.d.ts +3 -0
- package/dist/esm/biz-components/Listing/utils/index.js +1 -1
- package/dist/esm/biz-components/Listing/utils/index.js.map +3 -3
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +1 -1
- package/dist/esm/components/Countdown.d.ts +1 -0
- package/dist/esm/components/Countdown.js +1 -1
- package/dist/esm/components/Countdown.js.map +3 -3
- package/dist/esm/helpers/ScrollLoadVideo.js +1 -1
- package/dist/esm/helpers/ScrollLoadVideo.js.map +3 -3
- package/package.json +1 -1
- package/style.css +3 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var me=Object.create;var B=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var ge=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,be=Object.prototype.hasOwnProperty;var xe=(t,a)=>{for(var l in a)B(t,l,{get:a[l],enumerable:!0})},J=(t,a,l,N)=>{if(a&&typeof a=="object"||typeof a=="function")for(let g of ge(a))!be.call(t,g)&&g!==l&&B(t,g,{get:()=>a[g],enumerable:!(N=de(a,g))||N.enumerable});return t};var L=(t,a,l)=>(l=t!=null?me(fe(t)):{},J(a||!t||!t.__esModule?B(l,"default",{value:t,enumerable:!0}):l,t)),he=t=>J(B({},"__esModule",{value:!0}),t);var Be={};xe(Be,{default:()=>$e});module.exports=he(Be);var e=require("react/jsx-runtime"),r=L(require("react")),v=L(require("gsap")),w=require("gsap/dist/ScrollTrigger"),M=require("react-responsive"),O=require("react-intersection-observer"),W=L(require("../../helpers/ScrollLoadVideo.js")),o=require("../../components/index.js"),c=require("../../helpers/index.js"),k=require("class-variance-authority"),X=require("../../shared/Styles.js"),Y=require("../../hooks/useExposure.js"),V=require("../../shared/trackUrlRef.js"),ee=require("../../components/button.js"),te=require("../VideoModal/index.js");const m="image",d="hero_banner",ye=(0,k.cva)("hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]",center:"left-1/2 -translate-x-1/2 items-center text-center"}},defaultVariants:{align:"left"}}),ve=(0,k.cva)("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),we=(0,k.cva)("hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),ke=(0,k.cva)("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Ne=({size:t="base"})=>{const{width:a,height:l}=ee.sizeMap[t];return(0,e.jsx)("svg",{width:a,height:l,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},K=r.default.forwardRef(({data:t,className:a,classNames:l={},onSecondaryClick:N,onPrimaryClick:g},ae)=>{const{label:D,title:i,subtitle:p,endDate:E,endDate_tz:re,dateFormat:oe,pcImage:z,padImage:j,mobileImage:$,pcVideo:le,padVideo:se,mobileVideo:U,isShowVideo:ne,isVideoLoop:ie=!0,primaryButton:u,secondaryButton:s,theme:pe="light",size:H="default",titleSize:T,caption:I=[],blockLink:_,iconArray:ce,align:b="center"}=t,G=(0,M.useMediaQuery)({query:"(max-width: 768px)"}),F=(0,M.useMediaQuery)({query:"(max-width: 1024px)"}),[q,A]=(0,r.useState)(!1),{ref:ue,inView:Q}=(0,O.useInView)(),C=(0,r.useRef)(null),P=(0,r.useRef)(null),S=(0,r.useRef)(null),x=(0,r.useRef)(null),f=(0,r.useRef)(null);return(0,Y.useExposure)(f,{componentType:m,componentName:d,componentTitle:i,componentDescription:p}),(0,r.useImperativeHandle)(ae,()=>f.current),(0,r.useEffect)(()=>{v.default.registerPlugin(w.ScrollTrigger);function n(){if(!x.current)return;const R=f.current?.clientHeight||100;window.innerHeight<=R?C.current=w.ScrollTrigger.create({trigger:f.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:h=>{const y=h.progress*40-20;v.default.set(x.current,{yPercent:y})}}):(S.current=w.ScrollTrigger.create({trigger:f.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:h=>{const y=h.progress*20-20;v.default.set(x.current,{yPercent:y})}}),P.current=w.ScrollTrigger.create({trigger:f.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:h=>{const y=h.progress*20;v.default.set(x.current,{yPercent:y})}}))}return Q&&n(),()=>{C.current&&C.current.kill(),S.current&&S.current.kill(),P.current&&P.current.kill()}},[Q]),(0,e.jsx)("div",{ref:ue,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:f,className:(0,c.cn)(pe==="dark"?"aiui-dark":"","text-info-primary relative w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":H==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":H==="sm"},a),children:[_&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,V.trackUrlRef)(_,`${m}_${d}`),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${i}#${p}`,tabIndex:-1,"aria-hidden":"true","aria-label":i}),(0,e.jsx)("div",{ref:x,className:(0,c.cn)("absolute left-0 top-0 size-full"),children:ne?(0,e.jsx)(W.default,{poster:G?$?.url:F?j?.url||$?.url:z?.url,src:G?U?.url:F?se?.url||U?.url:le?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:ie,playsInline:!0}):(0,e.jsx)(o.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:z?.alt||"",source:`${z?.url||""} , ${j?.url??($?.url||"")} 1024, ${$?.url||""} 767`})}),(0,e.jsxs)("div",{className:ye({align:b}),children:[(0,e.jsxs)("div",{className:ve({align:b}),children:[D&&(0,e.jsx)(o.Text,{size:2,as:"p",className:(0,c.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:D}),i&&(0,e.jsx)(o.Heading,{as:T==="4"?"h1":"h2",html:i,className:(0,c.cn)("hero-banner-title",l.title),size:T?Number(T||"5"):H==="sm"?4:5}),p&&(0,e.jsx)(o.Text,{as:"p",size:2,className:(0,c.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:p}),E&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(o.Countdown,{endDate:E,endDate_tz:re,dateFormat:oe,variant:"spacious",align:b})})]}),(0,e.jsxs)("div",{className:we({align:b}),children:[s?.isShowPlayVideoButton&&s?.playVideoButtonText?(0,e.jsxs)(o.Button,{onClick:()=>A(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${i}#${p}#${s?.playVideoButtonText}`,children:[s?.playVideoButtonText," ",(0,e.jsx)(Ne,{size:"lg"})]}):s?.text?(0,e.jsxs)(o.Button,{"aria-label":i??p,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:s?.isCustomSecondaryButton?"button":"a",href:(0,V.trackUrlRef)(s?.link,`${m}_${d}`),onClick:n=>s?.isCustomSecondaryButton&&N?.(t,n,s?.customSecondaryEventId),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${i}#${p}#${s?.text}`,children:[s?.text,(0,e.jsx)("span",{className:"sr-only",children:i??p})]}):null,u&&u.text&&(0,e.jsx)(o.Button,{"aria-label":i??p,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:u?.isCustomPrimaryButton?"button":"a",href:(0,V.trackUrlRef)(u.link,`${m}_${d}`),onClick:n=>u?.isCustomPrimaryButton&&g?.(t,n,u?.customPrimaryEventId),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${i}#${p}#${u?.text}`,children:u.text})]}),(0,e.jsx)("div",{className:ke({align:b}),children:ce?.map(n=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(o.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:n?.pcImage?.alt||"",source:n?.pcImage?.url})},n?.pcImage?.url||n?.pcImage?.alt))})]}),I.length>0&&(0,e.jsx)("div",{className:(0,c.cn)("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",l.captionGroup),children:I.map((n,R)=>(0,e.jsxs)(r.default.Fragment,{children:[(0,e.jsx)(o.Text,{size:2,className:(0,c.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:n.title}),R<I.length-1&&(0,e.jsx)("div",{className:(0,c.cn)("bg-info-primary w-px")})]},n.title))}),q&&(0,e.jsx)(te.VideoModal,{visible:q,videoUrl:s?.videoUrl?.url,youTubeId:s?.youtubeId,onCloseModal:()=>A(!1)})]})})});K.displayName="HeroBanner";var $e=(0,X.withLayout)(K);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nexport type HeroBannerSemanticName =\n | 'root'\n | 'title'\n | 'subtitle'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<\n HTMLDivElement,\n HeroBannerProps & {\n classNames?: Partial<Record<HeroBannerSemanticName, string>>\n }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n isVideoLoop = true,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\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 useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n size === 'default',\n 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n {label && (\n <Text\n size={2}\n as=\"p\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title', classNames.title)}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} variant=\"spacious\" />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map(icon => (\n <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div\n className={cn(\n 'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n classNames.captionGroup\n )}\n >\n {caption.map((c, index) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
-
"mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,
|
|
6
|
-
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_button", "import_VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "isVideoLoop", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo", "e", "icon", "c", "index"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { cva } from 'class-variance-authority'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\n// CVA variants for align\nconst contentVariants = cva(\n 'hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n {\n variants: {\n align: {\n left: 'tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]',\n center: 'left-1/2 -translate-x-1/2 items-center text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst textVariants = cva(\n 'hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]',\n {\n variants: {\n align: {\n left: 'laptop:text-left',\n center: 'text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst buttonGroupVariants = cva('hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2', {\n variants: {\n align: {\n left: 'laptop:justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nconst iconGroupVariants = cva('hero-banner-icon-group flex items-center gap-2', {\n variants: {\n align: {\n left: 'justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nexport type HeroBannerSemanticName =\n | 'root'\n | 'title'\n | 'subtitle'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<\n HTMLDivElement,\n HeroBannerProps & {\n classNames?: Partial<Record<HeroBannerSemanticName, string>>\n }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n isVideoLoop = true,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n align = 'center',\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\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 useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n size === 'default',\n 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className={contentVariants({ align })}>\n <div className={textVariants({ align })}>\n {label && (\n <Text\n size={2}\n as=\"p\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title', classNames.title)}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n align={align}\n />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={buttonGroupVariants({ align })}>\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n onClick={e =>\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n onClick={e =>\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className={iconGroupVariants({ align })}>\n {iconArray?.map(icon => (\n <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div\n className={cn(\n 'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n classNames.captionGroup\n )}\n >\n {caption.map((c, index) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_helpers", "import_class_variance_authority", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_button", "import_VideoModal", "componentType", "componentName", "contentVariants", "textVariants", "buttonGroupVariants", "iconGroupVariants", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "isVideoLoop", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "align", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo", "e", "icon", "c", "index"]
|
|
7
7
|
}
|
|
@@ -31,6 +31,8 @@ export interface HeroBannerProps {
|
|
|
31
31
|
text: string;
|
|
32
32
|
link?: string;
|
|
33
33
|
isCustomPrimaryButton?: boolean;
|
|
34
|
+
/** 自定义事件ID，传递给 onPrimaryClick */
|
|
35
|
+
customPrimaryEventId?: string;
|
|
34
36
|
} & Omit<ButtonProps, 'children'>;
|
|
35
37
|
/** 次要按钮文本和配置 */
|
|
36
38
|
secondaryButton?: {
|
|
@@ -42,12 +44,16 @@ export interface HeroBannerProps {
|
|
|
42
44
|
videoUrl?: Media;
|
|
43
45
|
youtubeId?: string;
|
|
44
46
|
isCustomSecondaryButton?: boolean;
|
|
47
|
+
/** 自定义事件ID，传递给 onSecondaryClick */
|
|
48
|
+
customSecondaryEventId?: string;
|
|
45
49
|
} & Omit<ButtonProps, 'children'>;
|
|
46
50
|
/** 主题 */
|
|
47
51
|
theme?: Theme;
|
|
48
52
|
/** 大小, 默认default,单banner, 可选sm, 用于多banner场景 */
|
|
49
53
|
size?: 'default' | 'sm';
|
|
50
54
|
titleSize?: TitleSizeType;
|
|
55
|
+
/** 内容对齐方式 */
|
|
56
|
+
align?: 'left' | 'center';
|
|
51
57
|
/** 底部产品列表 */
|
|
52
58
|
caption?: Array<{
|
|
53
59
|
title: string;
|
|
@@ -55,7 +61,7 @@ export interface HeroBannerProps {
|
|
|
55
61
|
};
|
|
56
62
|
/** 自定义类名 */
|
|
57
63
|
className?: string;
|
|
58
|
-
onSecondaryClick?: (data: any, e: any) => void;
|
|
59
|
-
onPrimaryClick?: (data: any, e: any) => void;
|
|
64
|
+
onSecondaryClick?: (data: any, e: any, customPrimaryEventId?: string) => void;
|
|
65
|
+
onPrimaryClick?: (data: any, e: any, customSecondaryEventId?: string) => void;
|
|
60
66
|
}
|
|
61
67
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var n=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var l=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of s(t))!d.call(e,i)&&i!==a&&n(e,i,{get:()=>t[i],enumerable:!(o=r(t,i))||o.enumerable});return e};var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var l=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of s(t))!d.call(e,i)&&i!==a&&n(e,i,{get:()=>t[i],enumerable:!(o=r(t,i))||o.enumerable});return e};var m=e=>l(n({},"__esModule",{value:!0}),e);var y={};module.exports=m(y);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Media, Theme } from '../../types/props.js'\n\ntype TitleSizeType = '5' | '4' | '3' | '2' | '1'\nexport interface HeroBannerProps {\n data: {\n /** \u6807\u7B7E */\n label?: string\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n dateFormat?: string\n /** \u56FE\u6807\u5217\u8868 */\n iconArray?: Array<any>\n pcImage: Media\n padImage?: Media\n mobileImage: Media\n pcVideo?: Media\n padVideo?: Media\n mobileVideo?: Media\n isShowVideo?: boolean\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n blockLink?: string\n /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n isCustomPrimaryButton?: boolean\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n isShowPlayVideoButton?: boolean\n playVideoButtonText?: string\n playIcon?: boolean\n videoUrl?: Media\n youtubeId?: string\n isCustomSecondaryButton?: boolean\n } & Omit<ButtonProps, 'children'>\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u5927\u5C0F, \u9ED8\u8BA4default,\u5355banner, \u53EF\u9009sm, \u7528\u4E8E\u591Abanner\u573A\u666F */\n size?: 'default' | 'sm'\n titleSize?: TitleSizeType\n /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n caption?: Array<{\n title: string\n }>\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n onSecondaryClick?: (data: any, e: any) => void\n onPrimaryClick?: (data: any, e: any) => void\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Media, Theme } from '../../types/props.js'\n\ntype TitleSizeType = '5' | '4' | '3' | '2' | '1'\nexport interface HeroBannerProps {\n data: {\n /** \u6807\u7B7E */\n label?: string\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n dateFormat?: string\n /** \u56FE\u6807\u5217\u8868 */\n iconArray?: Array<any>\n pcImage: Media\n padImage?: Media\n mobileImage: Media\n pcVideo?: Media\n padVideo?: Media\n mobileVideo?: Media\n isShowVideo?: boolean\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n blockLink?: string\n /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n isCustomPrimaryButton?: boolean\n /** \u81EA\u5B9A\u4E49\u4E8B\u4EF6ID\uFF0C\u4F20\u9012\u7ED9 onPrimaryClick */\n customPrimaryEventId?: string\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n isShowPlayVideoButton?: boolean\n playVideoButtonText?: string\n playIcon?: boolean\n videoUrl?: Media\n youtubeId?: string\n isCustomSecondaryButton?: boolean\n /** \u81EA\u5B9A\u4E49\u4E8B\u4EF6ID\uFF0C\u4F20\u9012\u7ED9 onSecondaryClick */\n customSecondaryEventId?: string\n } & Omit<ButtonProps, 'children'>\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u5927\u5C0F, \u9ED8\u8BA4default,\u5355banner, \u53EF\u9009sm, \u7528\u4E8E\u591Abanner\u573A\u666F */\n size?: 'default' | 'sm'\n titleSize?: TitleSizeType\n /** \u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F */\n align?: 'left' | 'center'\n /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n caption?: Array<{\n title: string\n }>\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n onSecondaryClick?: (data: any, e: any, customPrimaryEventId?: string) => void\n onPrimaryClick?: (data: any, e: any, customSecondaryEventId?: string) => void\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var L=Object.create;var c=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var _=(e,t)=>{for(var r in t)c(e,r,{get:t[r],enumerable:!0})},f=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of A(t))!z.call(e,a)&&a!==r&&c(e,a,{get:()=>t[a],enumerable:!(i=V(t,a))||i.enumerable});return e};var y=(e,t,r)=>(r=e!=null?L(j(e)):{},f(t||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e)),W=e=>f(c({},"__esModule",{value:!0}),e);var K={};_(K,{ProductCard:()=>n.default,default:()=>J});module.exports=W(K);var o=require("react/jsx-runtime"),P=y(require("react")),d=require("../../helpers/utils.js"),l=require("swiper/react"),U=require("swiper/css"),C=require("../../components/text.js"),v=require("../../components/heading.js"),w=require("react"),n=y(require("./ProductCard.js")),S=require("../../hooks/useExposure.js");const q="shelf",G="image_overlay_shelf",g=(0,w.forwardRef)(({data:e,onLearnMore:t,onShopNow:r,onAddToCart:i,onProductImageClick:a,classNames:s,copy:T,breakpoints:
|
|
1
|
+
"use strict";"use client";var L=Object.create;var c=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var _=(e,t)=>{for(var r in t)c(e,r,{get:t[r],enumerable:!0})},f=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of A(t))!z.call(e,a)&&a!==r&&c(e,a,{get:()=>t[a],enumerable:!(i=V(t,a))||i.enumerable});return e};var y=(e,t,r)=>(r=e!=null?L(j(e)):{},f(t||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e)),W=e=>f(c({},"__esModule",{value:!0}),e);var K={};_(K,{ProductCard:()=>n.default,default:()=>J});module.exports=W(K);var o=require("react/jsx-runtime"),P=y(require("react")),d=require("../../helpers/utils.js"),l=require("swiper/react"),U=require("swiper/css"),C=require("../../components/text.js"),v=require("../../components/heading.js"),w=require("react"),n=y(require("./ProductCard.js")),S=require("../../hooks/useExposure.js");const q="shelf",G="image_overlay_shelf",g=(0,w.forwardRef)(({data:e,onLearnMore:t,onShopNow:r,onAddToCart:i,onProductImageClick:a,classNames:s,copy:T,breakpoints:x,className:B="",...O},I)=>{const m=P.useRef(null);(0,S.useExposure)(m,{componentType:q,componentName:G,componentTitle:e.title,componentDescription:e.description}),P.useImperativeHandle(I,()=>m.current);const{productsCard:p=[],showTags:b=!0,showOriginalPrice:D=!0,secondaryButtonText:M,secondaryButtonFun:N,primaryButtonText:R,primaryButtonFun:F}=e,H={showTags:b,showOriginalPrice:D,secondaryButtonText:M,secondaryButtonFun:N,primaryButtonText:R,primaryButtonFun:F,onLearnMore:t,onShopNow:r,onAddToCart:i,onProductImageClick:a,classNames:s,copy:T},k={0:{spaceBetween:12,slidesPerView:1.2},768:{spaceBetween:16,slidesPerView:p.length<=2?2:2.2},1024:{spaceBetween:16,slidesPerView:p.length<=2?2:3},1440:{spaceBetween:16,slidesPerView:Math.max(2,Math.min(4,p.length))}};return(0,o.jsxs)("div",{ref:m,className:(0,d.cn)("collection-shelves-wrap w-full",B,s?.root),...O,children:[e.title&&(0,o.jsx)(v.Heading,{as:"h2",size:4,className:(0,d.cn)("text-info-primary mb-4",s?.title),children:e.title}),e.description&&(0,o.jsx)(C.Text,{size:3,as:"p",className:(0,d.cn)("text-info-primary mb-6",s?.description),children:e.description}),(0,o.jsx)(l.Swiper,{spaceBetween:16,slidesPerView:"auto",className:"!overflow-visible",breakpoints:x||k,children:p.map((u,E)=>(0,o.jsx)(l.SwiperSlide,{children:(0,o.jsx)(n.default,{product:u,...H})},u.sku||E))})]})});g.displayName="ImageOverlayShelf";const h=g;h.ProductCard=n.default;var J=h;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ImageOverlayShelf/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport 'swiper/css'\n\nimport { Text } from '../../components/text.js'\nimport { Heading } from '../../components/heading.js'\nimport { forwardRef } from 'react'\n\nimport ProductCard from './ProductCard.js'\nimport type {\n ProductCardData,\n ProductCardProps,\n ButtonFunctionType,\n ImageOverlayShelfSemanticName,\n CopyConfig,\n} from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'shelf'\nconst componentName = 'image_overlay_shelf'\n\n// Re-export types for external use\nexport type {\n ButtonFunctionType,\n ProductCardData,\n ProductCardProps,\n ImageOverlayShelfSemanticName,\n CopyConfig,\n ImageObjectPosition,\n} from './types.js'\n\n/**\n * ImageOverlayShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface ImageOverlayShelfData {\n /** \u7EC4\u4EF6\u6807\u9898 */\n title?: string\n /** \u7EC4\u4EF6\u63CF\u8FF0 */\n description?: string\n /** \u4EA7\u54C1\u5217\u8868 */\n productsCard: ProductCardData[]\n /** \u662F\u5426\u663E\u793A\u6807\u7B7E */\n showTags?: boolean\n /** \u662F\u5426\u663E\u793A\u539F\u4EF7 */\n showOriginalPrice?: boolean\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u529F\u80FD */\n secondaryButtonFun?: ButtonFunctionType\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u529F\u80FD */\n primaryButtonFun?: ButtonFunctionType\n}\n\n/**\n * ImageOverlayShelf Props \u63A5\u53E3\n */\nexport interface ImageOverlayShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: ImageOverlayShelfData\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onShopNow?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddToCart?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n onProductImageClick?: (product: ProductCardData) => void\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<ImageOverlayShelfSemanticName, string>>\n /** \u6837\u5F0F\u7C7B\u540D */\n className?: string\n /** \u6587\u6848\u914D\u7F6E */\n copy?: CopyConfig\n /** \u65AD\u70B9\u914D\u7F6E */\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n}\n\n/**\n * ImageOverlayShelf \u590D\u5408\u7EC4\u4EF6\u7C7B\u578B\u5B9A\u4E49\n */\nexport interface ImageOverlayShelfComponent extends React.ForwardRefExoticComponent<\n ImageOverlayShelfProps & React.RefAttributes<HTMLDivElement>\n> {\n /** \u72EC\u7ACB\u7684 ProductCard \u7EC4\u4EF6 */\n ProductCard: typeof ProductCard\n}\n\n/**\n * \u5171\u4EAB Props \u7C7B\u578B\uFF08\u900F\u4F20\u7ED9 ProductCard\uFF09\n */\ntype SharedProductCardProps = Omit<ProductCardProps, 'product' | 'className'>\n\nconst ImageOverlayShelf = forwardRef<HTMLDivElement, ImageOverlayShelfProps>(\n (\n {\n data,\n onLearnMore,\n onShopNow,\n onAddToCart,\n onProductImageClick,\n classNames,\n copy,\n breakpoints,\n className = '',\n ...props\n },\n ref\n ) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: data.title,\n componentDescription: data.description,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const {\n productsCard: products = [],\n showTags = true,\n showOriginalPrice = true,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n } = data\n\n // \u6784\u5EFA\u5171\u4EAB props\uFF08\u900F\u4F20\u7ED9 ProductCard\uFF09\n const sharedProps: SharedProductCardProps = {\n showTags,\n showOriginalPrice,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n onLearnMore,\n onShopNow,\n onAddToCart,\n onProductImageClick,\n classNames,\n copy,\n }\n\n // \u9ED8\u8BA4\u65AD\u70B9\u914D\u7F6E\n const defaultBreakpoints = {\n 0: {\n spaceBetween: 12,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n slidesPerView: products.length <= 2 ? 2 : 2.2,\n },\n 1024: {\n spaceBetween: 16,\n slidesPerView: products.length <=
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,QAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAiLM,IAAAK,EAAA,6BAhLNC,EAAuB,oBACvBC,EAAmB,kCAEnBC,EAAoC,wBACpCC,EAAO,sBAEPC,EAAqB,oCACrBC,EAAwB,uCACxBH,EAA2B,iBAE3BI,EAAwB,+BAQxBC,EAA4B,sCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,sBAiFhBC,KAAoB,cACxB,CACE,CACE,KAAAC,EACA,YAAAC,EACA,UAAAC,EACA,YAAAC,EACA,oBAAAC,EACA,WAAAC,EACA,KAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAStB,EAAM,OAAuB,IAAI,KAEhD,eAAYsB,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBE,EAAK,MACrB,qBAAsBA,EAAK,WAC7B,CAAC,EAEDX,EAAM,oBAAoBqB,EAAK,IAAMC,EAAO,OAAyB,EAErE,KAAM,CACJ,aAAcC,EAAW,CAAC,EAC1B,SAAAC,EAAW,GACX,kBAAAC,EAAoB,GACpB,oBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,iBAAAC,CACF,EAAIlB,EAGEmB,EAAsC,CAC1C,SAAAN,EACA,kBAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,YAAAjB,EACA,UAAAC,EACA,YAAAC,EACA,oBAAAC,EACA,WAAAC,EACA,KAAAC,CACF,EAGMc,EAAqB,CACzB,EAAG,CACD,aAAc,GACd,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,cAAeR,EAAS,QAAU,EAAI,EAAI,GAC5C,EACA,KAAM,CACJ,aAAc,GACd,cAAeA,EAAS,QAAU,EAAI,EAAI,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport 'swiper/css'\n\nimport { Text } from '../../components/text.js'\nimport { Heading } from '../../components/heading.js'\nimport { forwardRef } from 'react'\n\nimport ProductCard from './ProductCard.js'\nimport type {\n ProductCardData,\n ProductCardProps,\n ButtonFunctionType,\n ImageOverlayShelfSemanticName,\n CopyConfig,\n} from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'shelf'\nconst componentName = 'image_overlay_shelf'\n\n// Re-export types for external use\nexport type {\n ButtonFunctionType,\n ProductCardData,\n ProductCardProps,\n ImageOverlayShelfSemanticName,\n CopyConfig,\n ImageObjectPosition,\n} from './types.js'\n\n/**\n * ImageOverlayShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface ImageOverlayShelfData {\n /** \u7EC4\u4EF6\u6807\u9898 */\n title?: string\n /** \u7EC4\u4EF6\u63CF\u8FF0 */\n description?: string\n /** \u4EA7\u54C1\u5217\u8868 */\n productsCard: ProductCardData[]\n /** \u662F\u5426\u663E\u793A\u6807\u7B7E */\n showTags?: boolean\n /** \u662F\u5426\u663E\u793A\u539F\u4EF7 */\n showOriginalPrice?: boolean\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u529F\u80FD */\n secondaryButtonFun?: ButtonFunctionType\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u529F\u80FD */\n primaryButtonFun?: ButtonFunctionType\n}\n\n/**\n * ImageOverlayShelf Props \u63A5\u53E3\n */\nexport interface ImageOverlayShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: ImageOverlayShelfData\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onShopNow?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddToCart?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n onProductImageClick?: (product: ProductCardData) => void\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<ImageOverlayShelfSemanticName, string>>\n /** \u6837\u5F0F\u7C7B\u540D */\n className?: string\n /** \u6587\u6848\u914D\u7F6E */\n copy?: CopyConfig\n /** \u65AD\u70B9\u914D\u7F6E */\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n}\n\n/**\n * ImageOverlayShelf \u590D\u5408\u7EC4\u4EF6\u7C7B\u578B\u5B9A\u4E49\n */\nexport interface ImageOverlayShelfComponent extends React.ForwardRefExoticComponent<\n ImageOverlayShelfProps & React.RefAttributes<HTMLDivElement>\n> {\n /** \u72EC\u7ACB\u7684 ProductCard \u7EC4\u4EF6 */\n ProductCard: typeof ProductCard\n}\n\n/**\n * \u5171\u4EAB Props \u7C7B\u578B\uFF08\u900F\u4F20\u7ED9 ProductCard\uFF09\n */\ntype SharedProductCardProps = Omit<ProductCardProps, 'product' | 'className'>\n\nconst ImageOverlayShelf = forwardRef<HTMLDivElement, ImageOverlayShelfProps>(\n (\n {\n data,\n onLearnMore,\n onShopNow,\n onAddToCart,\n onProductImageClick,\n classNames,\n copy,\n breakpoints,\n className = '',\n ...props\n },\n ref\n ) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: data.title,\n componentDescription: data.description,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const {\n productsCard: products = [],\n showTags = true,\n showOriginalPrice = true,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n } = data\n\n // \u6784\u5EFA\u5171\u4EAB props\uFF08\u900F\u4F20\u7ED9 ProductCard\uFF09\n const sharedProps: SharedProductCardProps = {\n showTags,\n showOriginalPrice,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n onLearnMore,\n onShopNow,\n onAddToCart,\n onProductImageClick,\n classNames,\n copy,\n }\n\n // \u9ED8\u8BA4\u65AD\u70B9\u914D\u7F6E\n const defaultBreakpoints = {\n 0: {\n spaceBetween: 12,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n slidesPerView: products.length <= 2 ? 2 : 2.2,\n },\n 1024: {\n spaceBetween: 16,\n slidesPerView: products.length <= 2 ? 2 : 3,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: Math.max(2, Math.min(4, products.length)),\n },\n }\n\n return (\n <div ref={boxRef} className={cn('collection-shelves-wrap w-full', className, classNames?.root)} {...props}>\n {/* \u6807\u9898\u533A\u57DF */}\n {data.title && (\n <Heading as=\"h2\" size={4} className={cn('text-info-primary mb-4', classNames?.title)}>\n {data.title}\n </Heading>\n )}\n {data.description && (\n <Text size={3} as=\"p\" className={cn('text-info-primary mb-6', classNames?.description)}>\n {data.description}\n </Text>\n )}\n\n {/* Swiper \u6A2A\u5411\u6ED1\u52A8\u5E03\u5C40 */}\n <Swiper\n spaceBetween={16}\n slidesPerView=\"auto\"\n className=\"!overflow-visible\"\n breakpoints={breakpoints || defaultBreakpoints}\n >\n {products.map((product, index) => (\n <SwiperSlide key={product.sku || index}>\n <ProductCard product={product} {...sharedProps} />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n )\n }\n)\n\nImageOverlayShelf.displayName = 'ImageOverlayShelf'\n\n// \u521B\u5EFA\u590D\u5408\u7EC4\u4EF6\nconst ImageOverlayShelfWithProductCard = ImageOverlayShelf as ImageOverlayShelfComponent\nImageOverlayShelfWithProductCard.ProductCard = ProductCard\n\nexport { ProductCard }\nexport default ImageOverlayShelfWithProductCard\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,QAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAiLM,IAAAK,EAAA,6BAhLNC,EAAuB,oBACvBC,EAAmB,kCAEnBC,EAAoC,wBACpCC,EAAO,sBAEPC,EAAqB,oCACrBC,EAAwB,uCACxBH,EAA2B,iBAE3BI,EAAwB,+BAQxBC,EAA4B,sCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,sBAiFhBC,KAAoB,cACxB,CACE,CACE,KAAAC,EACA,YAAAC,EACA,UAAAC,EACA,YAAAC,EACA,oBAAAC,EACA,WAAAC,EACA,KAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAStB,EAAM,OAAuB,IAAI,KAEhD,eAAYsB,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBE,EAAK,MACrB,qBAAsBA,EAAK,WAC7B,CAAC,EAEDX,EAAM,oBAAoBqB,EAAK,IAAMC,EAAO,OAAyB,EAErE,KAAM,CACJ,aAAcC,EAAW,CAAC,EAC1B,SAAAC,EAAW,GACX,kBAAAC,EAAoB,GACpB,oBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,iBAAAC,CACF,EAAIlB,EAGEmB,EAAsC,CAC1C,SAAAN,EACA,kBAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,YAAAjB,EACA,UAAAC,EACA,YAAAC,EACA,oBAAAC,EACA,WAAAC,EACA,KAAAC,CACF,EAGMc,EAAqB,CACzB,EAAG,CACD,aAAc,GACd,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,cAAeR,EAAS,QAAU,EAAI,EAAI,GAC5C,EACA,KAAM,CACJ,aAAc,GACd,cAAeA,EAAS,QAAU,EAAI,EAAI,CAC5C,EACA,KAAM,CACJ,aAAc,GACd,cAAe,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGA,EAAS,MAAM,CAAC,CACzD,CACF,EAEA,SACE,QAAC,OAAI,IAAKD,EAAQ,aAAW,MAAG,iCAAkCH,EAAWH,GAAY,IAAI,EAAI,GAAGI,EAEjG,UAAAT,EAAK,UACJ,OAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,yBAA0BK,GAAY,KAAK,EAChF,SAAAL,EAAK,MACR,EAEDA,EAAK,gBACJ,OAAC,QAAK,KAAM,EAAG,GAAG,IAAI,aAAW,MAAG,yBAA0BK,GAAY,WAAW,EAClF,SAAAL,EAAK,YACR,KAIF,OAAC,UACC,aAAc,GACd,cAAc,OACd,UAAU,oBACV,YAAaO,GAAea,EAE3B,SAAAR,EAAS,IAAI,CAACS,EAASC,OACtB,OAAC,eACC,mBAAC,EAAArC,QAAA,CAAY,QAASoC,EAAU,GAAGF,EAAa,GADhCE,EAAQ,KAAOC,CAEjC,CACD,EACH,GACF,CAEJ,CACF,EAEAvB,EAAkB,YAAc,oBAGhC,MAAMwB,EAAmCxB,EACzCwB,EAAiC,YAAc,EAAAtC,QAG/C,IAAOC,EAAQqC",
|
|
6
6
|
"names": ["ImageOverlayShelf_exports", "__export", "ProductCard", "ImageOverlayShelf_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_react", "import_css", "import_text", "import_heading", "import_ProductCard", "import_useExposure", "componentType", "componentName", "ImageOverlayShelf", "data", "onLearnMore", "onShopNow", "onAddToCart", "onProductImageClick", "classNames", "copy", "breakpoints", "className", "props", "ref", "boxRef", "products", "showTags", "showOriginalPrice", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "sharedProps", "defaultBreakpoints", "product", "index", "ImageOverlayShelfWithProductCard"]
|
|
7
7
|
}
|
|
@@ -9,6 +9,9 @@ export declare function optionsConstructor(options: ProductOption[]): Options;
|
|
|
9
9
|
*/
|
|
10
10
|
export declare const getFirstAvailableVariant: (product: Product) => ProductVariant;
|
|
11
11
|
export declare const getVariantBySku: (product: Product, sku: string) => ProductVariant | undefined;
|
|
12
|
+
export declare const languageMap: {
|
|
13
|
+
[key: string]: string;
|
|
14
|
+
};
|
|
12
15
|
export declare const languageTerritory: (locale: string) => string;
|
|
13
16
|
export declare function formatPrice({ amount, currencyCode, locale, maximumFractionDigits, minimumFractionDigits, removeTrailingZeros, }: {
|
|
14
17
|
amount: number;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var c=Object.defineProperty;var
|
|
1
|
+
"use strict";var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var v=(n,e)=>{for(var t in e)c(n,t,{get:e[t],enumerable:!0})},O=(n,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of S(e))!P.call(n,i)&&i!==t&&c(n,i,{get:()=>e[i],enumerable:!(r=b(e,i))||r.enumerable});return n};var E=n=>O(c({},"__esModule",{value:!0}),n);var V={};v(V,{formatPrice:()=>l,formatVariantPrice:()=>D,getFirstAvailableVariant:()=>L,getVariantBySku:()=>C,getVariantFromSelectedOptions:()=>F,languageMap:()=>m,languageTerritory:()=>d,optionsConstructor:()=>I});module.exports=E(V);var s=require("../const.js");function I(n){return n.reduce((e,t)=>(e[t.name]=t.values[0].label,e),{})}const L=n=>n.variants.find(e=>e.availableForSale)||n.variants[0],C=(n,e)=>n.variants.find(t=>t.sku===e),m={us:"en-US",uk:"en-GB",ca:"en-CA",au:"en-AU","eu-en":"en","eu-fr":"fr-FR","eu-it":"it-IT","eu-de":"de-DE","eu-es":"es-ES","cz-en":"en-CZ",nl:"nl-NL","dk-en":"en-DK","gr-en":"en-GR","mk-en":"en-MK","hu-en":"en-HU","se-en":"en-SE","hr-en":"en-HR","bg-en":"en-BG","ee-en":"en-EE","fi-en":"en-FI","lt-en":"en-LT",pl:"pl-PL","ro-en":"en-RO","si-en":"en-SI","sk-en":"en-SK","no-en":"en-NO","ad-en":"en-AD","al-en":"en-AL","ba-en":"en-BA","me-en":"en-ME","rs-en":"en-RS","gl-en":"en-GL","is-en":"en-IS","ua-en":"en-UA","by-en":"en-BY","md-en":"en-MD","lv-en":"en-LV","at-de":"de-AT","lu-de":"de-LU","li-de":"de-LI","va-it":"it-VA","sm-it":"it-SM","be-nl":"nl-BE","ae-en":"en-AE",nz:"en-NZ","sg-en":"en-SG","sa-en":"en-SA","vn-vi":"vi-VN",ie:"en-IE",tw:"zh-TW"},d=n=>m[n]||"en-US";function l({amount:n,currencyCode:e,locale:t,maximumFractionDigits:r,minimumFractionDigits:i,removeTrailingZeros:a=!1}){let o=new Intl.NumberFormat(d(t),{style:"currency",currency:e||"USD",minimumFractionDigits:r===0?0:i,maximumFractionDigits:r}).format(n);return["eu-de","eu-en","de","eu"].includes(t)&&(o=o?.toString()?.replace(/[\s]/g,"")),a&&(o=o.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),o}function D({amount:n,baseAmount:e,currencyCode:t,locale:r,maximumFractionDigits:i,minimumFractionDigits:a,removeTrailingZeros:u}){if(typeof Intl>"u")return{price:`${s.PRICE_SYMBOL[r]}${n}`,basePrice:`${s.PRICE_SYMBOL[r]}${e}`,discount:`${s.PRICE_SYMBOL[r]}${e-n||0}`};const o=e>n,f=new Intl.NumberFormat(d(r),{style:"percent"}),p=o?f.format((e-n)/e):null,g=l({amount:n,currencyCode:t,locale:r,removeTrailingZeros:u}),y=o?l({amount:e,currencyCode:t,locale:r,maximumFractionDigits:i,minimumFractionDigits:a,removeTrailingZeros:u}):void 0;return{price:g,basePrice:y,discount:p}}function F({product:n,selectedOptions:e}){return n.variants.find(t=>Object.entries(e).every(([r,i])=>t.options.find(a=>{if(a.__typename==="MultipleChoiceOption"&&a.name===r)return a.values.find(u=>u.label===i)})))}
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/biz-components/Listing/utils/index.ts"],
|
|
4
|
-
"sourcesContent": ["import { PRICE_SYMBOL } from '../const.js'\nimport type { Options, Product, ProductOption, ProductVariant } from '../types/product'\n\nexport function optionsConstructor(options: ProductOption[]): Options {\n return options.reduce((pre: any, cur: any) => {\n pre[cur.name] = cur.values[0].label\n return pre\n }, {})\n}\n\n/**\n * Returns the first available variant of a product.\n * If no variant is available, it returns the first variant in the list.\n *\n * @param product - The product object.\n * @returns The first available variant of the product.\n */\nexport const getFirstAvailableVariant = (product: Product) =>\n product.variants.find((variant: ProductVariant) => variant.availableForSale) || product.variants[0]\n\nexport const getVariantBySku = (product: Product, sku: string) =>\n product.variants.find((variant: ProductVariant) => variant.sku === sku)\n\nexport const
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,uBAAAC,EAAA,6BAAAC,EAAA,oBAAAC,EAAA,kCAAAC,EAAA,sBAAAC,EAAA,uBAAAC,IAAA,eAAAC,
|
|
6
|
-
"names": ["utils_exports", "__export", "formatPrice", "formatVariantPrice", "getFirstAvailableVariant", "getVariantBySku", "getVariantFromSelectedOptions", "languageTerritory", "optionsConstructor", "__toCommonJS", "import_const", "options", "pre", "cur", "product", "variant", "sku", "locale", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "formattedValue", "baseAmount", "hasDiscount", "formatDiscount", "discount", "price", "basePrice", "selectedOptions", "key", "value", "option", "v"]
|
|
4
|
+
"sourcesContent": ["import { PRICE_SYMBOL } from '../const.js'\nimport type { Options, Product, ProductOption, ProductVariant } from '../types/product'\n\nexport function optionsConstructor(options: ProductOption[]): Options {\n return options.reduce((pre: any, cur: any) => {\n pre[cur.name] = cur.values[0].label\n return pre\n }, {})\n}\n\n/**\n * Returns the first available variant of a product.\n * If no variant is available, it returns the first variant in the list.\n *\n * @param product - The product object.\n * @returns The first available variant of the product.\n */\nexport const getFirstAvailableVariant = (product: Product) =>\n product.variants.find((variant: ProductVariant) => variant.availableForSale) || product.variants[0]\n\nexport const getVariantBySku = (product: Product, sku: string) =>\n product.variants.find((variant: ProductVariant) => variant.sku === sku)\n\nexport const languageMap: { [key: string]: string } = {\n us: 'en-US',\n uk: 'en-GB',\n ca: 'en-CA',\n au: 'en-AU',\n 'eu-en': 'en',\n 'eu-fr': 'fr-FR',\n 'eu-it': 'it-IT',\n 'eu-de': 'de-DE',\n 'eu-es': 'es-ES',\n 'cz-en': 'en-CZ',\n nl: 'nl-NL',\n 'dk-en': 'en-DK',\n 'gr-en': 'en-GR',\n 'mk-en': 'en-MK',\n 'hu-en': 'en-HU',\n 'se-en': 'en-SE',\n 'hr-en': 'en-HR',\n 'bg-en': 'en-BG',\n 'ee-en': 'en-EE',\n 'fi-en': 'en-FI',\n 'lt-en': 'en-LT',\n pl: 'pl-PL',\n 'ro-en': 'en-RO',\n 'si-en': 'en-SI',\n 'sk-en': 'en-SK',\n 'no-en': 'en-NO',\n 'ad-en': 'en-AD',\n 'al-en': 'en-AL',\n 'ba-en': 'en-BA',\n 'me-en': 'en-ME',\n 'rs-en': 'en-RS',\n 'gl-en': 'en-GL',\n 'is-en': 'en-IS',\n 'ua-en': 'en-UA',\n 'by-en': 'en-BY',\n 'md-en': 'en-MD',\n 'lv-en': 'en-LV',\n 'at-de': 'de-AT',\n 'lu-de': 'de-LU',\n 'li-de': 'de-LI',\n 'va-it': 'it-VA',\n 'sm-it': 'it-SM',\n 'be-nl': 'nl-BE',\n 'ae-en': 'en-AE',\n nz: 'en-NZ',\n 'sg-en': 'en-SG',\n 'sa-en': 'en-SA',\n 'vn-vi': 'vi-VN',\n ie: 'en-IE',\n tw: 'zh-TW',\n}\n\nexport const languageTerritory = (locale: string) => languageMap[locale] || 'en-US'\n\nexport function formatPrice({\n amount,\n currencyCode,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros = false,\n}: {\n amount: number\n currencyCode: string\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n const formatCurrency = new Intl.NumberFormat(languageTerritory(locale), {\n style: 'currency',\n currency: currencyCode || 'USD',\n minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n maximumFractionDigits,\n })\n\n let formattedValue = formatCurrency.format(amount)\n\n if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n formattedValue = formattedValue?.toString()?.replace(/[\\s]/g, '')\n }\n\n if (removeTrailingZeros) {\n // Adjust the regex to match comma as decimal separator\n formattedValue = formattedValue\n .replace(/(\\.\\d*?[1-9])0+\\b/, '$1')\n .replace(/\\.0+\\b/, '')\n // eslint-disable-next-line no-useless-escape\n .replace(/(\\,\\d*?[1-9])0+\\b/, '$1')\n // eslint-disable-next-line no-useless-escape\n .replace(/\\,0+\\b/, '')\n }\n\n return formattedValue\n}\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n}: {\n baseAmount: number\n amount: number\n currencyCode: string\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n if (typeof Intl === 'undefined') {\n return {\n price: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${amount}`,\n basePrice: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount}`,\n discount: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount - amount || 0}`,\n }\n }\n\n const hasDiscount = baseAmount > amount\n const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {\n style: 'percent',\n })\n const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n\n const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n const basePrice = hasDiscount\n ? formatPrice({\n amount: baseAmount,\n currencyCode,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n })\n : undefined\n\n return { price, basePrice, discount }\n}\n\nexport function getVariantFromSelectedOptions({\n product,\n selectedOptions,\n}: {\n product: Product\n selectedOptions: Record<string, string>\n}) {\n return product.variants.find(variant => {\n return Object.entries(selectedOptions).every(([key, value]) =>\n variant.options.find(option => {\n if (option.__typename === 'MultipleChoiceOption' && option.name === key) {\n return option.values.find(v => v.label === value)\n }\n })\n )\n })\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["utils_exports", "__export", "formatPrice", "formatVariantPrice", "getFirstAvailableVariant", "getVariantBySku", "getVariantFromSelectedOptions", "languageMap", "languageTerritory", "optionsConstructor", "__toCommonJS", "import_const", "options", "pre", "cur", "product", "variant", "sku", "locale", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "formattedValue", "baseAmount", "hasDiscount", "formatDiscount", "discount", "price", "basePrice", "selectedOptions", "key", "value", "option", "v"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var rt=Object.create;var g=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var st=Object.getOwnPropertyNames;var ot=Object.getPrototypeOf,at=Object.prototype.hasOwnProperty;var lt=(t,e)=>{for(var n in e)g(t,n,{get:e[n],enumerable:!0})},V=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of st(e))!at.call(t,s)&&s!==n&&g(t,s,{get:()=>e[s],enumerable:!(o=it(e,s))||o.enumerable});return t};var M=(t,e,n)=>(n=t!=null?rt(ot(t)):{},V(e||!t||!t.__esModule?g(n,"default",{value:t,enumerable:!0}):n,t)),ct=t=>V(g({},"__esModule",{value:!0}),t);var
|
|
1
|
+
"use strict";"use client";var rt=Object.create;var g=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var st=Object.getOwnPropertyNames;var ot=Object.getPrototypeOf,at=Object.prototype.hasOwnProperty;var lt=(t,e)=>{for(var n in e)g(t,n,{get:e[n],enumerable:!0})},V=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of st(e))!at.call(t,s)&&s!==n&&g(t,s,{get:()=>e[s],enumerable:!(o=it(e,s))||o.enumerable});return t};var M=(t,e,n)=>(n=t!=null?rt(ot(t)):{},V(e||!t||!t.__esModule?g(n,"default",{value:t,enumerable:!0}):n,t)),ct=t=>V(g({},"__esModule",{value:!0}),t);var pt={};lt(pt,{default:()=>ut});module.exports=ct(pt);var r=require("react/jsx-runtime"),i=M(require("react")),h=require("gsap"),b=require("gsap/dist/SplitText"),T=require("gsap/dist/ScrollTrigger"),l=require("../../helpers/utils.js"),F=require("class-variance-authority"),x=require("../../components/index.js"),j=require("../../shared/Styles.js"),A=require("../../shared/trackUrlRef.js"),I=require("react-intersection-observer"),B=M(require("./Countdown.js"));const $="link",z="title",dt=(0,F.cva)("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),mt=(0,F.cva)("desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),P=({data:t,className:e})=>{const{theme:n="light",extensions:o,title:s,caption:p,align:c}=t;return o?.textLink?(0,r.jsxs)("a",{className:(0,l.cn)({"aiui-dark":n==="dark"},"hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":n==="light"},{"text-[#F5F6F7]":n==="dark"},{"justify-center mt-4":c==="center"},{"mt-1 laptop:mt-0":c==="left"},e),href:(0,A.trackUrlRef)(o?.link,`${$}_${z}`),"data-headless-type-name":`${$}#${z}`,"data-headless-title-desc-button":`${s}#${p}`,children:[(0,r.jsx)("div",{className:"truncate whitespace-nowrap",children:o?.textLink}),(0,r.jsx)("div",{className:"lg-desktop:size-5 size-4",children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 20 20",fill:"none",children:(0,r.jsx)("path",{d:"M6.91058 4.41083C7.23602 4.08539 7.76353 4.08539 8.08897 4.41083L13.089 9.41083C13.4144 9.73626 13.4144 10.2638 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2638 6.58514 14.7363 6.91058 14.4108L11.3214 10L6.91058 5.58921C6.58514 5.26377 6.58514 4.73626 6.91058 4.41083Z",fill:n==="dark"?"#F5F6F7":"#080A0F",className:"transition-all duration-[0.4s]"})})})]}):null},S=i.default.forwardRef(({data:t,className:e,as:n="h2",weight:o="bold"},s)=>{const{title:p,caption:c,subtitle:y,countdown:N,showCountdown:D=!1,theme:f="light",extensions:_,align:d="left"}=t,C=(0,i.useRef)(null),m=(0,i.useRef)(null),a=(0,i.useRef)(null),u=(0,i.useRef)(null),[U,O]=(0,i.useState)(!0),{ref:Z,inView:L}=(0,I.useInView)();(0,i.useImperativeHandle)(s,()=>C.current);const q=()=>{O(!1)};return(0,i.useEffect)(()=>{h.gsap.registerPlugin(b.SplitText,T.ScrollTrigger);function G(){if(!m.current)return;const J=m.current?.clientHeight||80;a.current&&a.current.revert(),u.current&&u.current.kill(),a.current=new b.SplitText(m.current,{type:"words",wordsClass:"word"});const w=a.current.words;h.gsap.set(w,{opacity:0}),u.current=T.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=4%",end:`bottom+=${J*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:K=>{const Q=K.progress,R=w.length||1,W=.5,v=1/R,E=v*(1-W),H=(R-1)*E+v,X=Math.min(1,H>0?Q/H:0);w.forEach((Y,tt)=>{const et=tt*E,nt=v;let k=(X-et)/nt;k=Math.max(0,Math.min(1,k)),h.gsap.set(Y,{opacity:k})})}})}return L&&G(),()=>{a.current&&a.current.revert(),u.current&&u.current.kill()}},[L]),(0,r.jsxs)("div",{id:_?.id,className:"titleBottom title-box flex items-end justify-between gap-2 pb-6",ref:C,children:[(0,r.jsxs)("div",{ref:Z,className:(0,l.cn)("flex-1",e,{"aiui-dark":f==="dark","text-center":d==="center","text-left":d==="left"}),children:[(c||p)&&(0,r.jsx)(x.Heading,{ref:m,as:n,size:4,html:c||p,weight:o,className:dt({theme:f})}),y&&(0,r.jsx)(x.Text,{html:y,as:"p",className:mt({theme:f})}),(0,r.jsx)(P,{data:t,className:(0,l.cn)({"laptop:hidden":d==="left"})}),D&&N&&U&&(0,r.jsx)(B.default,{className:(0,l.cn)("mt-4 justify-start",{"justify-center":d==="center"}),config:N,onCountdownEnd:q,theme:f})]}),(0,r.jsx)(P,{data:t,className:(0,l.cn)("hidden",{"laptop:flex":d==="left"})})]})});S.displayName="Title";var ut=(0,j.withLayout)(S);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\nimport Countdown from './Countdown.js'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n 'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\nconst TitleButton = ({ data, className }: { data: TitleProps['data']; className?: string }) => {\n const { theme = 'light', extensions, title, caption, align } = data\n if (!extensions?.textLink) return null\n return (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n { 'text-[#080A0F]': theme === 'light' },\n { 'text-[#F5F6F7]': theme === 'dark' },\n { 'justify-center mt-4': align === 'center' },\n { 'mt-1 laptop:mt-0': align === 'left' },\n className\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"lg-desktop:size-5 size-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M6.91058 4.41083C7.23602 4.08539 7.76353 4.08539 8.08897 4.41083L13.089 9.41083C13.4144 9.73626 13.4144 10.2638 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2638 6.58514 14.7363 6.91058 14.4108L11.3214 10L6.91058 5.58921C6.58514 5.26377 6.58514 4.73626 6.91058 4.41083Z\"\n fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n className=\"transition-all duration-[0.4s]\"\n />\n </svg>\n </div>\n </a>\n )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n const {\n title,\n caption,\n subtitle,\n countdown,\n showCountdown = false,\n theme = 'light',\n extensions,\n align = 'left',\n } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n const handleCountdownEnd = () => {\n setIsCountdownVisible(false)\n }\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div id={extensions?.id} className=\"titleBottom title-box
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\nimport Countdown from './Countdown.js'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n 'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\nconst TitleButton = ({ data, className }: { data: TitleProps['data']; className?: string }) => {\n const { theme = 'light', extensions, title, caption, align } = data\n if (!extensions?.textLink) return null\n return (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n { 'text-[#080A0F]': theme === 'light' },\n { 'text-[#F5F6F7]': theme === 'dark' },\n { 'justify-center mt-4': align === 'center' },\n { 'mt-1 laptop:mt-0': align === 'left' },\n className\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"lg-desktop:size-5 size-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M6.91058 4.41083C7.23602 4.08539 7.76353 4.08539 8.08897 4.41083L13.089 9.41083C13.4144 9.73626 13.4144 10.2638 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2638 6.58514 14.7363 6.91058 14.4108L11.3214 10L6.91058 5.58921C6.58514 5.26377 6.58514 4.73626 6.91058 4.41083Z\"\n fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n className=\"transition-all duration-[0.4s]\"\n />\n </svg>\n </div>\n </a>\n )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n const {\n title,\n caption,\n subtitle,\n countdown,\n showCountdown = false,\n theme = 'light',\n extensions,\n align = 'left',\n } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n const handleCountdownEnd = () => {\n setIsCountdownVisible(false)\n }\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div id={extensions?.id} className=\"titleBottom title-box flex items-end justify-between gap-2 pb-6\" ref={innerRef}>\n <div\n ref={inViewRef}\n className={cn('flex-1', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-left': align === 'left',\n })}\n >\n {(caption || title) && (\n <Heading\n ref={titleRef}\n as={as}\n size={4}\n html={caption || title}\n weight={weight}\n className={titleHeadingVariants({ theme })}\n />\n )}\n {subtitle && <Text html={subtitle} as=\"p\" className={subtitleVariants({ theme })} />}\n <TitleButton data={data} className={cn({ 'laptop:hidden': align === 'left' })} />\n {showCountdown && countdown && isCountdownVisible && (\n <Countdown\n className={cn('mt-4 justify-start', {\n 'justify-center': align === 'center',\n })}\n config={countdown}\n onCountdownEnd={handleCountdownEnd}\n theme={theme}\n />\n )}\n </div>\n <TitleButton data={data} className={cn('hidden', { ['laptop:flex']: align === 'left' })} />\n </div>\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
5
|
"mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAsDI,IAAAI,EAAA,6BArDJC,EAAwE,oBACxEC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAoB,oCACpBC,EAA8B,qCAC9BC,EAA2B,kCAE3BC,EAA4B,uCAC5BC,EAA0B,uCAC1BC,EAAsB,6BAEtB,MAAMC,EAAgB,OAChBC,EAAgB,QAKhBC,MAAuB,OAAI,GAAI,CACnC,SAAU,CACR,MAAO,CACL,MAAO,iBACP,KAAM,gBACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CAAC,EAKKC,MAAmB,OACvB,oHACA,CACE,SAAU,CACR,MAAO,CACL,MAAO,iBACP,KAAM,gBACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CACF,EAEMC,EAAc,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAwD,CAC7F,KAAM,CAAE,MAAAC,EAAQ,QAAS,WAAAC,EAAY,MAAAC,EAAO,QAAAC,EAAS,MAAAC,CAAM,EAAIN,EAC/D,OAAKG,GAAY,YAEf,QAAC,KACC,aAAW,MACT,CAAE,YAAaD,IAAU,MAAO,EAChC,4KACA,CAAE,iBAAkBA,IAAU,OAAQ,EACtC,CAAE,iBAAkBA,IAAU,MAAO,EACrC,CAAE,sBAAuBI,IAAU,QAAS,EAC5C,CAAE,mBAAoBA,IAAU,MAAO,EACvCL,CACF,EACA,QAAM,eAAYE,GAAY,KAAM,GAAGR,CAAa,IAAIC,CAAa,EAAE,EACvE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGQ,CAAK,IAAIC,CAAO,GAEpD,oBAAC,OAAI,UAAU,6BAA8B,SAAAF,GAAY,SAAS,KAClE,OAAC,OAAI,UAAU,2BACb,mBAAC,OAAI,MAAM,6BAA6B,MAAM,OAAO,OAAO,OAAO,QAAQ,YAAY,KAAK,OAC1F,mBAAC,QACC,EAAE,6TACF,KAAMD,IAAU,OAAS,UAAY,UACrC,UAAU,iCACZ,EACF,EACF,GACF,EA1BgC,IA4BpC,EAEMK,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAR,EAAM,UAAAC,EAAW,GAAAQ,EAAK,KAAM,OAAAC,EAAS,MAAO,EAAGC,IAAQ,CACnH,KAAM,CACJ,MAAAP,EACA,QAAAC,EACA,SAAAO,EACA,UAAAC,EACA,cAAAC,EAAgB,GAChB,MAAAZ,EAAQ,QACR,WAAAC,EACA,MAAAG,EAAQ,MACV,EAAIN,EACEe,KAAW,UAAuB,IAAI,EACtCC,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACjDC,KAAmB,UAA6B,IAAI,EAGpD,CAACC,EAAoBC,CAAqB,KAAI,YAAS,EAAI,EAE3D,CAAE,IAAKC,EAAW,OAAAC,CAAO,KAAI,aAAU,KAE7C,uBAAoBX,EAAK,IAAMI,EAAS,OAAyB,EAGjE,MAAMQ,EAAqB,IAAM,CAC/BH,EAAsB,EAAK,CAC7B,EAEA,sBAAU,IAAM,CACd,OAAK,eAAe,YAAW,eAAa,EAC5C,SAASI,GAAa,CACpB,GAAI,CAACR,EAAS,QAAS,OACvB,MAAMS,EAAST,EAAS,SAAS,cAAgB,GAC7CC,EAAkB,SACpBA,EAAkB,QAAQ,OAAO,EAE/BC,EAAiB,SACnBA,EAAiB,QAAQ,KAAK,EAEhCD,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMU,EAAQT,EAAkB,QAAQ,MACxC,OAAK,IAAIS,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BR,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASF,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWS,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,oBAAqB,GACrB,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,QAAU,EACxBI,EAAU,GACVC,EAAW,EAAIF,EACfG,EAAOD,GAAY,EAAID,GACvBG,GAAWJ,EAAQ,GAAKG,EAAOD,EAC/BG,EAAqB,KAAK,IAAI,EAAGD,EAAU,EAAIL,EAAWK,EAAU,CAAC,EAC3EP,EAAM,QAAQ,CAACS,EAAWC,KAAc,CACtC,MAAMC,GAAQD,GAAIJ,EACZM,GAAQP,EACd,IAAIQ,GAAWL,EAAqBG,IAASC,GAC7CC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGA,CAAO,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIjB,GACFE,EAAW,EAGN,IAAM,CACXP,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACI,CAAM,CAAC,KAGT,QAAC,OAAI,GAAInB,GAAY,GAAI,UAAU,kEAAkE,IAAKY,EACxG,qBAAC,OACC,IAAKM,EACL,aAAW,MAAG,SAAUpB,EAAW,CACjC,YAAaC,IAAU,OACvB,cAAeI,IAAU,SACzB,YAAaA,IAAU,MACzB,CAAC,EAEC,WAAAD,GAAWD,OACX,OAAC,WACC,IAAKY,EACL,GAAIP,EACJ,KAAM,EACN,KAAMJ,GAAWD,EACjB,OAAQM,EACR,UAAWb,GAAqB,CAAE,MAAAK,CAAM,CAAC,EAC3C,EAEDU,MAAY,OAAC,QAAK,KAAMA,EAAU,GAAG,IAAI,UAAWd,GAAiB,CAAE,MAAAI,CAAM,CAAC,EAAG,KAClF,OAACH,EAAA,CAAY,KAAMC,EAAM,aAAW,MAAG,CAAE,gBAAiBM,IAAU,MAAO,CAAC,EAAG,EAC9EQ,GAAiBD,GAAaM,MAC7B,OAAC,EAAAqB,QAAA,CACC,aAAW,MAAG,qBAAsB,CAClC,iBAAkBlC,IAAU,QAC9B,CAAC,EACD,OAAQO,EACR,eAAgBU,EAChB,MAAOrB,EACT,GAEJ,KACA,OAACH,EAAA,CAAY,KAAMC,EAAM,aAAW,MAAG,SAAU,CAAG,cAAgBM,IAAU,MAAO,CAAC,EAAG,GAC3F,CAEJ,CAAC,EAEDC,EAAM,YAAc,QAEpB,IAAO1B,MAAQ,cAAW0B,CAAK",
|
|
6
6
|
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_class_variance_authority", "import_components", "import_Styles", "import_trackUrlRef", "import_react_intersection_observer", "import_Countdown", "componentType", "componentName", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "className", "theme", "extensions", "title", "caption", "align", "Title", "React", "as", "weight", "ref", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Countdown"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const countdownVariants: (props?: ({
|
|
4
4
|
variant?: "outline" | "spacious" | null | undefined;
|
|
5
|
+
align?: "left" | "center" | null | undefined;
|
|
5
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
7
|
/**
|
|
7
8
|
* 时间标签配置接口
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var J=Object.create;var p=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var Q=(e,t)=>{for(var a in t)p(e,a,{get:t[a],enumerable:!0})},R=(e,t,a,N)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of q(t))!K.call(e,i)&&i!==a&&p(e,i,{get:()=>t[i],enumerable:!(N=$(t,i))||N.enumerable});return e};var U=(e,t,a)=>(a=e!=null?J(G(e)):{},R(t||!e||!e.__esModule?p(a,"default",{value:e,enumerable:!0}):a,e)),X=e=>R(p({},"__esModule",{value:!0}),e);var tt={};Q(tt,{default:()=>F});module.exports=X(tt);var n=require("react/jsx-runtime"),r=U(require("react")),d=require("class-variance-authority"),l=require("../helpers/index.js");const Y=(0,d.cva)("countdown-container flex w-full items-center",{variants:{variant:{outline:"gap-1",spacious:"gap-1"},align:{left:"justify-start",center:"justify-center"}},defaultVariants:{variant:"outline",align:"left"}}),f=(0,d.cva)("time-block border-box rounded-box-small flex flex-col items-center justify-center overflow-hidden text-center text-xs",{variants:{variant:{outline:"border-info-primary text-info-primary desktop:size-12 desktop:p-1 size-10 border bg-transparent p-[2px]",spacious:"bg-info-white text-info-primary desktop:size-12 desktop:p-1 size-10 p-[2px]"}},defaultVariants:{variant:"outline"}}),x=(0,d.cva)("time-number lg-desktop:text-[24px] desktop:leading-[120%] translate-y-[2px] whitespace-nowrap text-center text-[20px] font-bold leading-none"),M=(0,d.cva)("separator desktop:text-2xl text-xl font-bold",{variants:{variant:{outline:"text-info-primary",spacious:"text-info-primary"}},defaultVariants:{variant:"outline"}}),v=(e,t=2)=>String(Math.abs(e)).padStart(t,"0"),b=()=>({day:"Day",hour:"Hours",minute:"Mins",second:"Secs"}),Z=e=>{try{let t=e?.trim?.();return!t?.startsWith?.("{")||!t?.endsWith?.("}")?b():(t=t?.replace?.(/(\w+)\s*:/g,'"$1":'),{...b(),...JSON.parse(t)})}catch{return b()}},z=r.default.forwardRef(({className:e,endDate:t,endDate_tz:a,locale:N,timeLabels:i,dateFormat:g,onExpire:D,separator:w=":",hideWhenExpired:C=!0,variant:o,align:H,...I},j)=>{const u=(0,r.useMemo)(()=>i||(g?Z(g):b()),[i,g]),c=(0,r.useRef)(Date.parse(t)),[P,k]=(0,r.useState)(()=>{const s=c.current;return isNaN(s)?0:Math.max(0,s-Date.now())}),[h,T]=(0,r.useState)(()=>{const s=c.current;return!isNaN(s)&&s<=Date.now()});(0,r.useEffect)(()=>{c.current=Date.parse(t);const s=c.current,m=isNaN(s)?0:Math.max(0,s-Date.now()),y=!isNaN(s)&&s<=Date.now();k(m),T(y)},[t]),(0,r.useEffect)(()=>{if(h||isNaN(c.current))return;let s=!1;const m=()=>{const B=Date.now(),S=Math.max(0,c.current-B);k(S),S<=0&&!s&&(s=!0,T(!0),D?.())};m();const y=window.setInterval(m,1e3);return()=>clearInterval(y)},[D,h,t]);const V=Math.floor(P/1e3),O=V%60,E=Math.floor(V/60),W=E%60,L=Math.floor(E/60),_=L%24,A=Math.floor(L/24);return h&&C?null:(0,n.jsxs)("div",{ref:j,className:(0,l.cn)(Y({variant:o,align:H}),e),role:"timer","aria-live":"polite","aria-label":"countdown timer",...I,children:[(0,n.jsxs)("div",{className:(0,l.cn)(f({variant:o}),"time-days-box"),children:[(0,n.jsx)("div",{className:x(),children:v(A,2)}),(0,n.jsx)("div",{className:"truncate text-center text-[12px] font-bold",children:u.day})]}),(0,n.jsx)("div",{className:M({variant:o}),children:w}),(0,n.jsxs)("div",{className:(0,l.cn)(f({variant:o}),"time-hours-box"),children:[(0,n.jsx)("div",{className:x(),children:v(_,2)}),(0,n.jsx)("div",{className:"truncate text-center text-[12px] font-bold",children:u.hour})]}),(0,n.jsx)("div",{className:M({variant:o}),children:w}),(0,n.jsxs)("div",{className:(0,l.cn)(f({variant:o}),"time-minutes-box"),children:[(0,n.jsx)("div",{className:x(),children:v(W,2)}),(0,n.jsx)("div",{className:"truncate text-center text-[12px] font-bold",children:u.minute})]}),(0,n.jsx)("div",{className:M({variant:o}),children:w}),(0,n.jsxs)("div",{className:(0,l.cn)(f({variant:o}),"time-seconds-box"),children:[(0,n.jsx)("div",{className:x(),children:v(O,2)}),(0,n.jsx)("div",{className:"truncate text-center text-[12px] font-bold",children:u.second})]})]})});z.displayName="Countdown";var F=z;
|
|
2
2
|
//# sourceMappingURL=Countdown.js.map
|