@anker-in/headless-ui 1.1.34-alpha.1768461697532 → 1.1.34-alpha.1768472366452
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/EventSchedule/index.js +1 -1
- package/dist/cjs/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/cjs/biz-components/HeaderNavigation/MobileMenuComponents.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/MobileMenuComponents.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.js.map +2 -2
- package/dist/cjs/biz-components/PromotionalBar/index.js +1 -1
- package/dist/cjs/biz-components/PromotionalBar/index.js.map +2 -2
- package/dist/cjs/biz-components/Title/Countdown.js +1 -1
- package/dist/cjs/biz-components/Title/Countdown.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +2 -2
- package/dist/esm/biz-components/EventSchedule/index.js +1 -1
- package/dist/esm/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/MobileMenuComponents.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/MobileMenuComponents.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.js.map +2 -2
- package/dist/esm/biz-components/PromotionalBar/index.js +1 -1
- package/dist/esm/biz-components/PromotionalBar/index.js.map +2 -2
- package/dist/esm/biz-components/Title/Countdown.js +1 -1
- package/dist/esm/biz-components/Title/Countdown.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +2 -2
- package/dist/tokens/anker.css +1 -0
- package/dist/tokens/base.css +8 -0
- package/dist/tokens/solix.css +1 -0
- package/package.json +1 -1
- package/style.css +19 -0
- package/tailwind.config.js +1 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var rt=Object.create;var
|
|
1
|
+
"use strict";"use client";var rt=Object.create;var g=Object.defineProperty;var st=Object.getOwnPropertyDescriptor;var it=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 i of it(e))!at.call(t,i)&&i!==n&&g(t,i,{get:()=>e[i],enumerable:!(o=st(e,i))||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 ft={};lt(ft,{default:()=>ut});module.exports=ct(ft);var r=require("react/jsx-runtime"),s=M(require("react")),h=require("gsap"),b=require("gsap/dist/SplitText"),T=require("gsap/dist/ScrollTrigger"),a=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:i,caption:f,align:c}=t;return o?.textLink?(0,r.jsxs)("a",{className:(0,a.cn)({"aiui-dark":n==="dark"},"hover:text-brand-0 [&_svg_path]:hover:stroke-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"},e),href:(0,A.trackUrlRef)(o?.link,`${$}_${z}`),"data-headless-type-name":`${$}#${z}`,"data-headless-title-desc-button":`${i}#${f}`,children:[(0,r.jsx)("div",{className:(0,a.cn)("flex-1 truncate whitespace-nowrap",{"flex-none":c==="center"}),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 16 16",fill:"none",children:(0,r.jsx)("path",{d:"M5.52876 3.52876C5.78911 3.26841 6.21112 3.26841 6.47147 3.52876L10.4715 7.52876C10.7318 7.78911 10.7318 8.21112 10.4715 8.47147L6.47147 12.4715C6.21112 12.7318 5.78911 12.7318 5.52876 12.4715C5.26841 12.2111 5.26841 11.7891 5.52876 11.5288L9.0574 8.00011L5.52876 4.47147C5.26841 4.21112 5.26841 3.78911 5.52876 3.52876Z",stroke:n==="dark"?"#F5F6F7":"#080A0F"})})})]}):null},S=s.default.forwardRef(({data:t,className:e,as:n="h2",weight:o="bold"},i)=>{const{title:f,caption:c,subtitle:y,countdown:N,showCountdown:D=!1,theme:p="light",extensions:_,align:d="left"}=t,C=(0,s.useRef)(null),m=(0,s.useRef)(null),l=(0,s.useRef)(null),u=(0,s.useRef)(null),[U,O]=(0,s.useState)(!0),{ref:Z,inView:L}=(0,I.useInView)();(0,s.useImperativeHandle)(i,()=>C.current);const q=()=>{O(!1)};return(0,s.useEffect)(()=>{h.gsap.registerPlugin(b.SplitText,T.ScrollTrigger);function G(){if(!m.current)return;const J=m.current?.clientHeight||80;l.current&&l.current.revert(),u.current&&u.current.kill(),l.current=new b.SplitText(m.current,{type:"words",wordsClass:"word"});const w=l.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(),()=>{l.current&&l.current.revert(),u.current&&u.current.kill()}},[L]),(f||c)&&(0,r.jsxs)("div",{id:_?.id,className:"titleBottom title-box mb-6 flex items-end justify-between gap-2",ref:C,children:[(0,r.jsxs)("div",{ref:Z,className:(0,a.cn)("flex-1",e,{"aiui-dark":p==="dark","text-center":d==="center","text-left":d==="left"}),children:[(0,r.jsx)(x.Heading,{ref:m,as:n,size:4,html:c||f,weight:o,className:dt({theme:p})}),y&&(0,r.jsx)(x.Text,{html:y,as:"p",className:mt({theme:p})}),(0,r.jsx)(P,{data:t,className:(0,a.cn)({hidden:d==="left"})}),D&&N&&U&&(0,r.jsx)(B.default,{className:(0,a.cn)("mt-4 justify-start",{"justify-center":d==="center"}),config:N,onCountdownEnd:q,theme:p})]}),(0,r.jsx)(P,{data:t,className:(0,a.cn)({hidden:d==="center"})})]})});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:stroke-brand-0 flex items-center overflow-hidden text-
|
|
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,
|
|
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:stroke-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 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\n className={cn('flex-1 truncate whitespace-nowrap', {\n 'flex-none': align === 'center',\n })}\n >\n {extensions?.textLink}\n </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 16 16\" fill=\"none\">\n <path\n d=\"M5.52876 3.52876C5.78911 3.26841 6.21112 3.26841 6.47147 3.52876L10.4715 7.52876C10.7318 7.78911 10.7318 8.21112 10.4715 8.47147L6.47147 12.4715C6.21112 12.7318 5.78911 12.7318 5.52876 12.4715C5.26841 12.2111 5.26841 11.7891 5.52876 11.5288L9.0574 8.00011L5.52876 4.47147C5.26841 4.21112 5.26841 3.78911 5.52876 3.52876Z\"\n stroke={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\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 (title || caption) && (\n <div\n id={extensions?.id}\n className=\"titleBottom title-box mb-6 flex items-end justify-between gap-2\"\n ref={innerRef}\n >\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 <Heading\n ref={titleRef}\n as={as}\n size={4}\n html={caption || title}\n weight={weight}\n className={titleHeadingVariants({ theme })}\n />\n {subtitle && <Text html={subtitle} as=\"p\" className={subtitleVariants({ theme })} />}\n <TitleButton data={data} className={cn({ 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: align === 'center' })} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
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,8KACA,CAAE,iBAAkBA,IAAU,OAAQ,EACtC,CAAE,iBAAkBA,IAAU,MAAO,EACrC,CAAE,sBAAuBI,IAAU,QAAS,EAC5CL,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,OACC,aAAW,MAAG,oCAAqC,CACjD,YAAaC,IAAU,QACzB,CAAC,EAEA,SAAAH,GAAY,SACf,KACA,OAAC,OAAI,UAAU,2BACb,mBAAC,OAAI,MAAM,6BAA6B,MAAM,OAAO,OAAO,OAAO,QAAQ,YAAY,KAAK,OAC1F,mBAAC,QACC,EAAE,mUACF,OAAQD,IAAU,OAAS,UAAY,UACzC,EACF,EACF,GACF,EA9BgC,IAgCpC,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,GAGRlB,GAASC,OACR,QAAC,OACC,GAAIF,GAAY,GAChB,UAAU,kEACV,IAAKY,EAEL,qBAAC,OACC,IAAKM,EACL,aAAW,MAAG,SAAUpB,EAAW,CACjC,YAAaC,IAAU,OACvB,cAAeI,IAAU,SACzB,YAAaA,IAAU,MACzB,CAAC,EAED,oBAAC,WACC,IAAKU,EACL,GAAIP,EACJ,KAAM,EACN,KAAMJ,GAAWD,EACjB,OAAQM,EACR,UAAWb,GAAqB,CAAE,MAAAK,CAAM,CAAC,EAC3C,EACCU,MAAY,OAAC,QAAK,KAAMA,EAAU,GAAG,IAAI,UAAWd,GAAiB,CAAE,MAAAI,CAAM,CAAC,EAAG,KAClF,OAACH,EAAA,CAAY,KAAMC,EAAM,aAAW,MAAG,CAAE,OAAQM,IAAU,MAAO,CAAC,EAAG,EACrEQ,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,CAAE,OAAQM,IAAU,QAAS,CAAC,EAAG,GAC1E,CAGN,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
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as n,jsxs as f}from"react/jsx-runtime";import*as s from"react";import{cn as m}from"../../helpers/index.js";import{Text as P,Picture as C,Heading as F}from"../../components/index.js";import{Swiper as T,SwiperSlide as y}from"swiper/react";import x from"dayjs";import{cva as g}from"class-variance-authority";const z=(i,t)=>{const d=x(),o=x(i).startOf("day"),l=x(t).endOf("day");return d.isAfter(o)&&d.isBefore(l)},S=i=>z(i.startDate,i.endDate),R=g("h-1 w-full overflow-hidden",{variants:{state:{"active-light":"bg-[#F6CD4E]","inactive-light":"bg-[#EAEAEC]","active-dark":"bg-[#D79941]","inactive-dark":"bg-[#75787F]"}},defaultVariants:{state:"inactive-light"}}),j=g("size-4 rounded-full transition-colors",{variants:{state:{"active-light":"bg-[#F6CD4E]","inactive-light":"bg-[#EAEAEC]","active-dark":"bg-[#D79941]","inactive-dark":"bg-[#75787F]"}},defaultVariants:{state:"inactive-light"}}),A=g("font-bold leading-[1.2]",{variants:{state:{"active-light":"text-[#080A0F]","inactive-light":"text-[#4A4C56]","active-dark":"text-white","inactive-dark":"text-[#8A8D92]"}},defaultVariants:{state:"inactive-light"}}),H=g("laptop:h-[160px] rounded-box relative flex h-[120px] min-w-0 flex-col justify-between gap-2 overflow-hidden",{variants:{state:{"active-light":"bg-[#F4E8BC]","inactive-light":"bg-[#EAEAEC]","active-dark":"bg-[#D79941]","inactive-dark":"bg-[#1E2024]"}},defaultVariants:{state:"inactive-light"}}),$=({active:i,theme:t="light",className:d,index:o,nodeLength:l})=>{const r=`${i?"active":"inactive"}-${t}`,a=o===0,c=o===l-1;return f("div",{className:"relative my-2 flex h-1 w-full items-center justify-center",children:[n("div",{className:m(R({state:r}),a&&"rounded-l-full",c&&"rounded-r-full",d)}),n("div",{className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",children:n("div",{className:j({state:r})})})]})},O=(i,t)=>{if(i)return t?i.active:i.inactive},q=({active:i,item:t,theme:d="light",className:o,scheduleCount:l})=>{const r=s.useMemo(()=>O(t.icon,i),[t.icon,i]),a=`${i?"active":"inactive"}-${d}`;return f("div",{className:m(H({state:a}),o),children:[r&&n("div",{className:"laptop:w-[128px] desktop:w-[160px] absolute bottom-0 right-0 z-10 w-[120px]",children:n(C,{source:r.url,alt:r.alt,className:"aspect-square"})}),f("div",{className:"tablet:px-4 tablet:py-3 desktop:pl-6 desktop:pr-16 relative z-20 flex h-full flex-col justify-between p-4 pr-8",children:[n(F,{html:t.title,className:m(l>=4?"desktop:text-[24px]":"desktop:text-[32px]","laptop:text-[24px] line-clamp-1 text-[20px]",A({state:a}))}),n("div",{className:"flex flex-col gap-0.5",children:t.items.map((c,p)=>f("div",{className:"flex items-center gap-2",children:[c.icon&&n("div",{className:"desktop:size-6 size-5 shrink-0",children:n(C,{source:c.icon.url,alt:c.icon.alt,className:"size-full"})}),n(P,{html:c.label,className:m("lg-desktop:text-[18px] desktop:text-[16px] line-clamp-1 flex-1 text-[14px] leading-[1.4]",A({state:a}))})]},p))})]})]})},I=s.forwardRef(({classNames:i={},data:t},d)=>{const o=t.theme||"light",l=s.useRef(null),r=s.useRef(null),a=s.useRef(!1),c=s.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),p=s.useMemo(()=>t.scheduleList.findIndex(e=>S(e)),[t.scheduleList]),h=s.useCallback((e,v=!1)=>{const u=B=>{switch(B){case"mobile":return{slidesPerView:1.17};case"tablet":return e===2?{slidesPerView:2}:{slidesPerView:2.4};case"laptop":return e===2?{}:e===4?{slidesPerView:3.2}:{slidesPerView:e};case"desktop":return e===2?{slidesPerView:2}:{slidesPerView:e}}},w=u("mobile"),k=u("tablet"),N=u("laptop"),E=u("desktop");return v?{0:{...w,spaceBetween:12},768:{...k,spaceBetween:e===1?12:void 0},1024:{...N,spaceBetween:16},1440:{...E,spaceBetween:16}}:{0:w,768:k,1024:N,1440:E}},[]),L=s.useMemo(()=>h(c,!0),[c,h]),V=s.useMemo(()=>h(c,!1),[c,h]),b=t.showTimeline!==!1,D=s.useCallback(e=>{a.current||!r.current||(a.current=!0,r.current.slideTo(e.activeIndex,e.params.speed),setTimeout(()=>{a.current=!1},50))},[]),M=s.useCallback(e=>{a.current||!l.current||(a.current=!0,l.current.slideTo(e.activeIndex,e.params.speed),setTimeout(()=>{a.current=!1},50))},[]);return s.useEffect(()=>{l.current&&r.current&&p>=0&&setTimeout(()=>{a.current=!0,l.current?.slideTo(p,500),r.current?.slideTo(p,500),setTimeout(()=>{a.current=!1},600)},100)},[p]),f("div",{ref:d,className:m("tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] overflow-hidden px-4",i?.root),children:[b&&n(T,{breakpoints:V,className:"h-4 w-full !overflow-visible",onSwiper:e=>{r.current=e},onSlideChange:M,children:t.scheduleList.map((e,v)=>{const u=S(e);return n(y,{className:"",children:n($,{className:i?.timeline,active:u,theme:o,index:v,nodeLength:t.scheduleList.length})},"timelineNode"+v)})}),n(T,{breakpoints:L,className:"w-full !overflow-visible",onSwiper:e=>{l.current=e},onSlideChange:D,children:t.scheduleList.map((e,v)=>{const u=S(e);return n(y,{children:n(q,{active:u,className:m(b?"laptop:mt-4 mt-2":"",i?.eventScheduleCard),item:e,theme:o,scheduleCount:t.scheduleList.length})},"SwiperSlideItem"+v)})})]})});I.displayName="EventSchedule";var W=I;export{W as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/EventSchedule/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport type { Swiper as SwiperType } from 'swiper'\nimport dayjs from 'dayjs'\nimport { cva } from 'class-variance-authority'\nimport type { Media } from '../../types/props.js'\nexport type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard'\n\n/**\n * \u72B6\u6001\u5316\u56FE\u6807\u914D\u7F6E\n */\nexport interface StateIcon {\n /** \u6FC0\u6D3B\u72B6\u6001\u7684\u56FE\u6807 */\n active: Media\n /** \u975E\u6FC0\u6D3B\u72B6\u6001\u7684\u56FE\u6807 */\n inactive: Media\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleItem {\n /** \u6807\u9898 */\n title: string\n /** \u5F00\u59CB\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-01'\uFF09 */\n startDate: string\n /** \u7ED3\u675F\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-31'\uFF09 */\n endDate: string\n /**\n * \u5361\u7247\u80CC\u666F\u56FE\u6807\u914D\u7F6E\uFF0C\u72B6\u6001\u5316\u56FE\u6807\uFF08\u5FC5\u987B\u5305\u542B active \u548C inactive\uFF09\n *\n * @example\n * icon: {\n * active: { url: \"https://example.com/active-icon.svg\", alt: \"Active Icon\" },\n * inactive: { url: \"https://example.com/inactive-icon.svg\", alt: \"Inactive Icon\" }\n * }\n */\n icon?: StateIcon\n /** \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */\n items: {\n /** \u56FE\u6807 (SVG \u5B57\u7B26\u4E32\u6216 URL) */\n icon?: Media\n /** \u6587\u672C\u5185\u5BB9 */\n label: string\n }[]\n}\n\n/**\n * EventSchedule \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleData {\n /** \u65E5\u7A0B\u5217\u8868 */\n scheduleList: EventScheduleItem[]\n /** \u662F\u5426\u663E\u793A\u65F6\u95F4\u8F74\uFF0C\u9ED8\u8BA4\u4E3A true */\n showTimeline?: boolean\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n}\n\nexport interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: EventScheduleData\n classNames?: Partial<Record<EventScheduleSemanticName, string>>\n}\n\n/**\n * \u5224\u65AD\u5F53\u524D\u65F6\u95F4\u662F\u5426\u5728\u6307\u5B9A\u7684\u65F6\u95F4\u533A\u95F4\u5185\n * @param startDate \u5F00\u59CB\u65E5\u671F\n * @param endDate \u7ED3\u675F\u65E5\u671F\n * @returns \u662F\u5426\u5728\u533A\u95F4\u5185\n */\nconst isInTimeRange = (startDate: string, endDate: string): boolean => {\n const now = dayjs()\n const start = dayjs(startDate).startOf('day')\n const end = dayjs(endDate).endOf('day')\n return now.isAfter(start) && now.isBefore(end)\n}\n\n/**\n * \u83B7\u53D6\u6D3B\u52A8\u9879\u7684\u6FC0\u6D3B\u72B6\u6001\n * @param item \u6D3B\u52A8\u9879\n * @returns \u662F\u5426\u6FC0\u6D3B\n */\nconst getItemActiveStatus = (item: EventScheduleItem): boolean => {\n // \u5426\u5219\u6839\u636E\u65F6\u95F4\u533A\u95F4\u81EA\u52A8\u5224\u65AD\n return isInTimeRange(item.startDate, item.endDate)\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8FDB\u5EA6\u6761\u6FC0\u6D3B\u72B6\u6001\u6837\u5F0F\u53D8\u4F53\n */\nconst timelineProgressActiveVariants = cva('h-2 w-full overflow-hidden', {\n variants: {\n state: {\n 'active-light': 'bg-[#F6CD4E]',\n 'inactive-light': 'bg-[#EAEAEC]',\n 'active-dark': 'bg-[#D79941]',\n 'inactive-dark': 'bg-[#75787F]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n})\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u6FC0\u6D3B\u72B6\u6001\u6837\u5F0F\u53D8\u4F53\n */\nconst timelineNodeActiveVariants = cva('size-4 rounded-full transition-colors', {\n variants: {\n state: {\n 'active-light': 'bg-[#F6CD4E]',\n 'inactive-light': 'bg-[#EAEAEC]',\n 'active-dark': 'bg-[#D79941]',\n 'inactive-dark': 'bg-[#75787F]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n})\n\n/**\n * \u5361\u7247\u6587\u672C\u6837\u5F0F\u53D8\u4F53\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n variants: {\n state: {\n 'active-light': 'text-[#080A0F]',\n 'inactive-light': 'text-[#4A4C56]',\n 'active-dark': 'text-white',\n 'inactive-dark': 'text-[#8A8D92]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n})\n\n/**\n * \u5361\u7247\u5BB9\u5668\u6837\u5F0F\u53D8\u4F53\n */\nconst eventScheduleCardVariants = cva(\n 'laptop:h-[160px] rounded-box relative flex h-[120px] min-w-0 flex-col justify-between gap-2 overflow-hidden',\n {\n variants: {\n state: {\n 'active-light': 'bg-[#F4E8BC]',\n 'inactive-light': 'bg-[#EAEAEC]',\n 'active-dark': 'bg-[#D79941]',\n 'inactive-dark': 'bg-[#1E2024]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n }\n)\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6 Props\n */\ninterface TimelineNodeProps {\n /** \u662F\u5426\u6FC0\u6D3B\u72B6\u6001 */\n active: boolean\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u5F53\u524D\u8282\u70B9\u7D22\u5F15 */\n index: number\n /** \u8282\u70B9\u603B\u6570 */\n nodeLength: number\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6\n */\nconst TimelineNode = ({ active, theme = 'light', className, index, nodeLength }: TimelineNodeProps) => {\n // \u8BA1\u7B97\u7EC4\u5408\u72B6\u6001\n const state = `${active ? 'active' : 'inactive'}-${theme}` as\n | 'active-light'\n | 'inactive-light'\n | 'active-dark'\n | 'inactive-dark'\n\n // \u5224\u65AD\u9996\u5C3E\u4F4D\u7F6E\n const isFirst = index === 0\n const isLast = index === nodeLength - 1\n\n return (\n <div className=\"relative my-1 flex h-2 w-full items-center justify-center\">\n {/* \u8FDB\u5EA6\u6761\u80CC\u666F */}\n <div\n className={cn(\n timelineProgressActiveVariants({ state }),\n isFirst && 'rounded-l-full',\n isLast && 'rounded-r-full',\n className\n )}\n />\n {/* \u65F6\u95F4\u8282\u70B9\u5706\u70B9 */}\n <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\">\n <div className={timelineNodeActiveVariants({ state })} />\n </div>\n </div>\n )\n}\n\n/**\n * \u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u83B7\u53D6\u5BF9\u5E94\u7684\u56FE\u6807\n * @param icon \u72B6\u6001\u5316\u56FE\u6807\u914D\u7F6E\n * @param isActive \u662F\u5426\u6FC0\u6D3B\u72B6\u6001\n * @returns \u56FE\u6807 Media \u5BF9\u8C61\n */\nconst getIconByState = (icon: StateIcon | undefined, isActive: boolean): Media | undefined => {\n if (!icon) return undefined\n return isActive ? icon.active : icon.inactive\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u5361\u7247\u7EC4\u4EF6\n */\nconst EventScheduleCard = ({\n active,\n item,\n theme = 'light',\n className,\n}: {\n active: boolean\n item: EventScheduleItem\n theme?: 'light' | 'dark'\n className?: string\n}) => {\n const currentIcon = React.useMemo(() => {\n return getIconByState(item.icon, active)\n }, [item.icon, active])\n\n // \u8BA1\u7B97\u7EC4\u5408\u72B6\u6001\n const cardState = `${active ? 'active' : 'inactive'}-${theme}` as\n | 'active-light'\n | 'inactive-light'\n | 'active-dark'\n | 'inactive-dark'\n\n return (\n <div className={cn(eventScheduleCardVariants({ state: cardState }), className)}>\n {/* \u80CC\u666F\u56FE\u6807 */}\n {currentIcon && (\n <div className=\"laptop:w-[128px] desktop:w-[160px] absolute bottom-0 right-0 z-10 w-[120px]\">\n <Picture source={currentIcon.url} alt={currentIcon.alt} className=\"aspect-square\" />\n </div>\n )}\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"tablet:px-4 tablet:py-3 laptop:p-4 desktop:px-6 relative z-20 flex h-full flex-col justify-between px-6 py-4\">\n <Heading\n html={item.title}\n className={cn(\n 'desktop:text-[32px] laptop:text-[24px] line-clamp-1 text-[20px]',\n cardTextVariants({ state: cardState })\n )}\n />\n {/* \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */}\n <div className=\"flex flex-col gap-0.5\">\n {item.items.map((detail, index) => (\n <div key={index} className=\"flex items-center gap-2\">\n {/* \u56FE\u6807 */}\n {detail.icon && (\n <div className=\"desktop:size-6 size-5 shrink-0\">\n <Picture source={detail.icon.url} alt={detail.icon.alt} className=\"size-full\" />\n </div>\n )}\n {/* \u6587\u672C */}\n <Text\n html={detail.label}\n className={cn(\n 'lg-desktop:text-[18px] desktop:text-[16px] line-clamp-1 flex-1 text-[14px] leading-[1.4]',\n cardTextVariants({ state: cardState })\n )}\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * EventSchedule - \u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6\n *\n * @description \u663E\u793A\u6D3B\u52A8\u65E5\u7A0B\u65F6\u95F4\u8F74\u548C\u6D3B\u52A8\u5361\u7247\u5217\u8868\n */\nconst EventSchedule = React.forwardRef<HTMLDivElement, EventScheduleProps>(({ classNames = {}, data }, ref) => {\n const theme = data.theme || 'light'\n const swiperRef = React.useRef<SwiperType | null>(null)\n const timelineSwiperRef = React.useRef<SwiperType | null>(null)\n const isSyncingRef = React.useRef(false) // \u9632\u6B62\u5FAA\u73AF\u89E6\u53D1\n const itemsPerRow = React.useMemo(() => {\n return data?.scheduleList?.length || 2\n }, [data?.scheduleList])\n\n // \u8BA1\u7B97 active item \u7684\u7D22\u5F15\n const activeIndex = React.useMemo(() => {\n return data.scheduleList.findIndex(item => getItemActiveStatus(item))\n }, [data.scheduleList])\n\n /**\n * \u751F\u6210\u7EDF\u4E00\u7684 Swiper \u65AD\u70B9\u914D\u7F6E\n * @param itemsPerRow \u6BCF\u884C\u663E\u793A\u7684\u9879\u76EE\u6570\n * @param withSpaceBetween \u662F\u5426\u5305\u542B\u95F4\u8DDD\u914D\u7F6E\n * @returns Swiper \u65AD\u70B9\u914D\u7F6E\u5BF9\u8C61\n */\n const generateSwiperBreakpoints = React.useCallback((itemsPerRow: number, withSpaceBetween: boolean = false) => {\n // \u6839\u636E itemsPerRow \u786E\u5B9A\u4E0D\u540C\u65AD\u70B9\u4E0B\u7684 slidesPerView\n const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n switch (breakpoint) {\n case 'mobile':\n return { slidesPerView: 1.17 }\n case 'tablet':\n if (itemsPerRow === 2) return { slidesPerView: 2 }\n return { slidesPerView: 2.4 }\n case 'laptop':\n if (itemsPerRow === 2) return {}\n if (itemsPerRow === 4) return { slidesPerView: 3.2 }\n return { slidesPerView: itemsPerRow }\n case 'desktop':\n if (itemsPerRow === 2) return { slidesPerView: 2 }\n return { slidesPerView: itemsPerRow }\n }\n }\n\n const mobileConfig = getBreakpointConfig('mobile')\n const tabletConfig = getBreakpointConfig('tablet')\n const laptopConfig = getBreakpointConfig('laptop')\n const desktopConfig = getBreakpointConfig('desktop')\n\n // \u5982\u679C\u9700\u8981 spaceBetween\uFF0C\u5219\u6DFB\u52A0\u5230\u914D\u7F6E\u4E2D\n if (withSpaceBetween) {\n return {\n 0: { ...mobileConfig, spaceBetween: 12 },\n 768: { ...tabletConfig, spaceBetween: itemsPerRow === 1 ? 12 : undefined },\n 1024: { ...laptopConfig, spaceBetween: 16 },\n 1440: { ...desktopConfig, spaceBetween: 16 },\n }\n }\n\n return {\n 0: mobileConfig,\n 768: tabletConfig,\n 1024: laptopConfig,\n 1440: desktopConfig,\n }\n }, [])\n\n // \u6839\u636E itemsPerRow \u914D\u7F6E\u54CD\u5E94\u5F0F\u65AD\u70B9\uFF08\u5361\u7247 Swiper - \u5305\u542B\u95F4\u8DDD\uFF09\n const swiperBreakpoints = React.useMemo(() => {\n return generateSwiperBreakpoints(itemsPerRow, true)\n }, [itemsPerRow, generateSwiperBreakpoints])\n\n // \u65F6\u95F4\u8F74 Swiper \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0D\u5305\u542B\u95F4\u8DDD\uFF09\n const timeNodeSwiperBreakpoints = React.useMemo(() => {\n return generateSwiperBreakpoints(itemsPerRow, false)\n }, [itemsPerRow, generateSwiperBreakpoints])\n\n const showTimeline = data.showTimeline !== false // \u9ED8\u8BA4\u4E3A true\n\n // \u540C\u6B65\u4E24\u4E2A Swiper \u7684\u6ED1\u52A8\n const handleCardSwiperSlideChange = React.useCallback((swiper: SwiperType) => {\n if (isSyncingRef.current || !timelineSwiperRef.current) return\n isSyncingRef.current = true\n timelineSwiperRef.current.slideTo(swiper.activeIndex, swiper.params.speed)\n // \u5EF6\u8FDF\u91CD\u7F6E\u6807\u5FD7\uFF0C\u786E\u4FDD\u540C\u6B65\u5B8C\u6210\n setTimeout(() => {\n isSyncingRef.current = false\n }, 50)\n }, [])\n\n const handleTimelineSwiperSlideChange = React.useCallback((swiper: SwiperType) => {\n if (isSyncingRef.current || !swiperRef.current) return\n isSyncingRef.current = true\n swiperRef.current.slideTo(swiper.activeIndex, swiper.params.speed)\n // \u5EF6\u8FDF\u91CD\u7F6E\u6807\u5FD7\uFF0C\u786E\u4FDD\u540C\u6B65\u5B8C\u6210\n setTimeout(() => {\n isSyncingRef.current = false\n }, 50)\n }, [])\n\n // \u81EA\u52A8\u6EDA\u52A8\u5230 active item\n React.useEffect(() => {\n if (swiperRef.current && timelineSwiperRef.current && activeIndex >= 0) {\n // \u5EF6\u8FDF\u6267\u884C\uFF0C\u786E\u4FDD Swiper \u5DF2\u7ECF\u5B8C\u5168\u521D\u59CB\u5316\n setTimeout(() => {\n isSyncingRef.current = true\n swiperRef.current?.slideTo(activeIndex, 500)\n timelineSwiperRef.current?.slideTo(activeIndex, 500)\n setTimeout(() => {\n isSyncingRef.current = false\n }, 600)\n }, 100)\n }\n }, [activeIndex])\n\n return (\n <div\n ref={ref}\n className={cn(\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] overflow-hidden px-4',\n classNames?.root\n )}\n >\n {showTimeline && (\n <Swiper\n breakpoints={timeNodeSwiperBreakpoints}\n className=\"h-4 w-full !overflow-visible\"\n onSwiper={swiper => {\n timelineSwiperRef.current = swiper\n }}\n onSlideChange={handleTimelineSwiperSlideChange}\n >\n {data.scheduleList.map((item, index) => {\n const isActive = getItemActiveStatus(item)\n return (\n <SwiperSlide key={'timelineNode' + index} className=\"\">\n <TimelineNode\n className={classNames?.timeline}\n active={isActive}\n theme={theme}\n index={index}\n nodeLength={data.scheduleList.length}\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n )}\n <Swiper\n breakpoints={swiperBreakpoints}\n className=\"w-full !overflow-visible\"\n onSwiper={swiper => {\n swiperRef.current = swiper\n }}\n onSlideChange={handleCardSwiperSlideChange}\n >\n {data.scheduleList.map((item, index) => {\n const isActive = getItemActiveStatus(item)\n return (\n <SwiperSlide key={'SwiperSlideItem' + index}>\n <EventScheduleCard\n active={isActive}\n className={cn(showTimeline ? 'laptop:mt-4 mt-2' : '', classNames?.eventScheduleCard)}\n item={item}\n theme={theme}\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n </div>\n )\n})\n\nEventSchedule.displayName = 'EventSchedule'\nexport default EventSchedule\n\n// \u5BFC\u51FA\u7C7B\u578B\u4F9B\u5916\u90E8\u4F7F\u7528\n// export type { StateIcon, EventScheduleItem, EventScheduleData, EventScheduleProps }\n"],
|
|
5
|
-
"mappings": "aAmMI,OAEE,OAAAA,EAFF,QAAAC,MAAA,oBAjMJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,QAAAC,EAAM,WAAAC,EAAS,WAAAC,MAAe,4BACvC,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eAEpC,OAAOC,MAAW,QAClB,OAAS,OAAAC,MAAW,2BAmEpB,MAAMC,EAAgB,CAACC,EAAmBC,IAA6B,CACrE,MAAMC,EAAML,EAAM,EACZM,EAAQN,EAAMG,CAAS,EAAE,QAAQ,KAAK,EACtCI,EAAMP,EAAMI,CAAO,EAAE,MAAM,KAAK,EACtC,OAAOC,EAAI,QAAQC,CAAK,GAAKD,EAAI,SAASE,CAAG,CAC/C,EAOMC,EAAuBC,GAEpBP,EAAcO,EAAK,UAAWA,EAAK,OAAO,EAM7CC,EAAiCT,EAAI,8BAA+B,CACxE,SAAU,CACR,MAAO,CACL,eAAgB,eAChB,iBAAkB,eAClB,cAAe,eACf,gBAAiB,cACnB,CACF,EACA,gBAAiB,CACf,MAAO,gBACT,CACF,CAAC,EAKKU,EAA6BV,EAAI,wCAAyC,CAC9E,SAAU,CACR,MAAO,CACL,eAAgB,eAChB,iBAAkB,eAClB,cAAe,eACf,gBAAiB,cACnB,CACF,EACA,gBAAiB,CACf,MAAO,gBACT,CACF,CAAC,EAKKW,EAAmBX,EAAI,0BAA2B,CACtD,SAAU,CACR,MAAO,CACL,eAAgB,iBAChB,iBAAkB,iBAClB,cAAe,aACf,gBAAiB,gBACnB,CACF,EACA,gBAAiB,CACf,MAAO,gBACT,CACF,CAAC,EAKKY,EAA4BZ,EAChC,8GACA,CACE,SAAU,CACR,MAAO,CACL,eAAgB,eAChB,iBAAkB,eAClB,cAAe,eACf,gBAAiB,cACnB,CACF,EACA,gBAAiB,CACf,MAAO,gBACT,CACF,CACF,EAqBMa,EAAe,CAAC,CAAE,OAAAC,EAAQ,MAAAC,EAAQ,QAAS,UAAAC,EAAW,MAAAC,EAAO,WAAAC,CAAW,IAAyB,CAErG,MAAMC,EAAQ,GAAGL,EAAS,SAAW,UAAU,IAAIC,CAAK,GAOlDK,EAAUH,IAAU,EACpBI,EAASJ,IAAUC,EAAa,EAEtC,OACE3B,EAAC,OAAI,UAAU,4DAEb,UAAAD,EAAC,OACC,UAAWG,EACTgB,EAA+B,CAAE,MAAAU,CAAM,CAAC,EACxCC,GAAW,iBACXC,GAAU,iBACVL,CACF,EACF,EAEA1B,EAAC,OAAI,UAAU,8DACb,SAAAA,EAAC,OAAI,UAAWoB,EAA2B,CAAE,MAAAS,CAAM,CAAC,EAAG,EACzD,GACF,CAEJ,EAQMG,EAAiB,CAACC,EAA6BC,IAAyC,CAC5F,GAAKD,EACL,OAAOC,EAAWD,EAAK,OAASA,EAAK,QACvC,EAKME,EAAoB,CAAC,CACzB,OAAAX,EACA,KAAAN,EACA,MAAAO,EAAQ,QACR,UAAAC,CACF,
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "cn", "Text", "Picture", "Heading", "Swiper", "SwiperSlide", "dayjs", "cva", "isInTimeRange", "startDate", "endDate", "now", "start", "end", "getItemActiveStatus", "item", "timelineProgressActiveVariants", "timelineNodeActiveVariants", "cardTextVariants", "eventScheduleCardVariants", "TimelineNode", "active", "theme", "className", "index", "nodeLength", "state", "isFirst", "isLast", "getIconByState", "icon", "isActive", "EventScheduleCard", "currentIcon", "cardState", "detail", "EventSchedule", "classNames", "data", "ref", "swiperRef", "timelineSwiperRef", "isSyncingRef", "itemsPerRow", "activeIndex", "generateSwiperBreakpoints", "withSpaceBetween", "getBreakpointConfig", "breakpoint", "mobileConfig", "tabletConfig", "laptopConfig", "desktopConfig", "swiperBreakpoints", "timeNodeSwiperBreakpoints", "showTimeline", "handleCardSwiperSlideChange", "swiper", "handleTimelineSwiperSlideChange", "EventSchedule_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport type { Swiper as SwiperType } from 'swiper'\nimport dayjs from 'dayjs'\nimport { cva } from 'class-variance-authority'\nimport type { Media } from '../../types/props.js'\nexport type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard'\n\n/**\n * \u72B6\u6001\u5316\u56FE\u6807\u914D\u7F6E\n */\nexport interface StateIcon {\n /** \u6FC0\u6D3B\u72B6\u6001\u7684\u56FE\u6807 */\n active: Media\n /** \u975E\u6FC0\u6D3B\u72B6\u6001\u7684\u56FE\u6807 */\n inactive: Media\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleItem {\n /** \u6807\u9898 */\n title: string\n /** \u5F00\u59CB\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-01'\uFF09 */\n startDate: string\n /** \u7ED3\u675F\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-31'\uFF09 */\n endDate: string\n /**\n * \u5361\u7247\u80CC\u666F\u56FE\u6807\u914D\u7F6E\uFF0C\u72B6\u6001\u5316\u56FE\u6807\uFF08\u5FC5\u987B\u5305\u542B active \u548C inactive\uFF09\n *\n * @example\n * icon: {\n * active: { url: \"https://example.com/active-icon.svg\", alt: \"Active Icon\" },\n * inactive: { url: \"https://example.com/inactive-icon.svg\", alt: \"Inactive Icon\" }\n * }\n */\n icon?: StateIcon\n /** \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */\n items: {\n /** \u56FE\u6807 (SVG \u5B57\u7B26\u4E32\u6216 URL) */\n icon?: Media\n /** \u6587\u672C\u5185\u5BB9 */\n label: string\n }[]\n}\n\n/**\n * EventSchedule \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleData {\n /** \u65E5\u7A0B\u5217\u8868 */\n scheduleList: EventScheduleItem[]\n /** \u662F\u5426\u663E\u793A\u65F6\u95F4\u8F74\uFF0C\u9ED8\u8BA4\u4E3A true */\n showTimeline?: boolean\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n}\n\nexport interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: EventScheduleData\n classNames?: Partial<Record<EventScheduleSemanticName, string>>\n}\n\n/**\n * \u5224\u65AD\u5F53\u524D\u65F6\u95F4\u662F\u5426\u5728\u6307\u5B9A\u7684\u65F6\u95F4\u533A\u95F4\u5185\n * @param startDate \u5F00\u59CB\u65E5\u671F\n * @param endDate \u7ED3\u675F\u65E5\u671F\n * @returns \u662F\u5426\u5728\u533A\u95F4\u5185\n */\nconst isInTimeRange = (startDate: string, endDate: string): boolean => {\n const now = dayjs()\n const start = dayjs(startDate).startOf('day')\n const end = dayjs(endDate).endOf('day')\n return now.isAfter(start) && now.isBefore(end)\n}\n\n/**\n * \u83B7\u53D6\u6D3B\u52A8\u9879\u7684\u6FC0\u6D3B\u72B6\u6001\n * @param item \u6D3B\u52A8\u9879\n * @returns \u662F\u5426\u6FC0\u6D3B\n */\nconst getItemActiveStatus = (item: EventScheduleItem): boolean => {\n // \u5426\u5219\u6839\u636E\u65F6\u95F4\u533A\u95F4\u81EA\u52A8\u5224\u65AD\n return isInTimeRange(item.startDate, item.endDate)\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8FDB\u5EA6\u6761\u6FC0\u6D3B\u72B6\u6001\u6837\u5F0F\u53D8\u4F53\n */\nconst timelineProgressActiveVariants = cva('h-1 w-full overflow-hidden', {\n variants: {\n state: {\n 'active-light': 'bg-[#F6CD4E]',\n 'inactive-light': 'bg-[#EAEAEC]',\n 'active-dark': 'bg-[#D79941]',\n 'inactive-dark': 'bg-[#75787F]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n})\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u6FC0\u6D3B\u72B6\u6001\u6837\u5F0F\u53D8\u4F53\n */\nconst timelineNodeActiveVariants = cva('size-4 rounded-full transition-colors', {\n variants: {\n state: {\n 'active-light': 'bg-[#F6CD4E]',\n 'inactive-light': 'bg-[#EAEAEC]',\n 'active-dark': 'bg-[#D79941]',\n 'inactive-dark': 'bg-[#75787F]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n})\n\n/**\n * \u5361\u7247\u6587\u672C\u6837\u5F0F\u53D8\u4F53\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n variants: {\n state: {\n 'active-light': 'text-[#080A0F]',\n 'inactive-light': 'text-[#4A4C56]',\n 'active-dark': 'text-white',\n 'inactive-dark': 'text-[#8A8D92]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n})\n\n/**\n * \u5361\u7247\u5BB9\u5668\u6837\u5F0F\u53D8\u4F53\n */\nconst eventScheduleCardVariants = cva(\n 'laptop:h-[160px] rounded-box relative flex h-[120px] min-w-0 flex-col justify-between gap-2 overflow-hidden',\n {\n variants: {\n state: {\n 'active-light': 'bg-[#F4E8BC]',\n 'inactive-light': 'bg-[#EAEAEC]',\n 'active-dark': 'bg-[#D79941]',\n 'inactive-dark': 'bg-[#1E2024]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n }\n)\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6 Props\n */\ninterface TimelineNodeProps {\n /** \u662F\u5426\u6FC0\u6D3B\u72B6\u6001 */\n active: boolean\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u5F53\u524D\u8282\u70B9\u7D22\u5F15 */\n index: number\n /** \u8282\u70B9\u603B\u6570 */\n nodeLength: number\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6\n */\nconst TimelineNode = ({ active, theme = 'light', className, index, nodeLength }: TimelineNodeProps) => {\n // \u8BA1\u7B97\u7EC4\u5408\u72B6\u6001\n const state = `${active ? 'active' : 'inactive'}-${theme}` as\n | 'active-light'\n | 'inactive-light'\n | 'active-dark'\n | 'inactive-dark'\n\n // \u5224\u65AD\u9996\u5C3E\u4F4D\u7F6E\n const isFirst = index === 0\n const isLast = index === nodeLength - 1\n\n return (\n <div className=\"relative my-2 flex h-1 w-full items-center justify-center\">\n {/* \u8FDB\u5EA6\u6761\u80CC\u666F */}\n <div\n className={cn(\n timelineProgressActiveVariants({ state }),\n isFirst && 'rounded-l-full',\n isLast && 'rounded-r-full',\n className\n )}\n />\n {/* \u65F6\u95F4\u8282\u70B9\u5706\u70B9 */}\n <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\">\n <div className={timelineNodeActiveVariants({ state })} />\n </div>\n </div>\n )\n}\n\n/**\n * \u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u83B7\u53D6\u5BF9\u5E94\u7684\u56FE\u6807\n * @param icon \u72B6\u6001\u5316\u56FE\u6807\u914D\u7F6E\n * @param isActive \u662F\u5426\u6FC0\u6D3B\u72B6\u6001\n * @returns \u56FE\u6807 Media \u5BF9\u8C61\n */\nconst getIconByState = (icon: StateIcon | undefined, isActive: boolean): Media | undefined => {\n if (!icon) return undefined\n return isActive ? icon.active : icon.inactive\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u5361\u7247\u7EC4\u4EF6\n */\nconst EventScheduleCard = ({\n active,\n item,\n theme = 'light',\n className,\n scheduleCount,\n}: {\n active: boolean\n item: EventScheduleItem\n theme?: 'light' | 'dark'\n className?: string\n scheduleCount: number\n}) => {\n const currentIcon = React.useMemo(() => {\n return getIconByState(item.icon, active)\n }, [item.icon, active])\n\n // \u8BA1\u7B97\u7EC4\u5408\u72B6\u6001\n const cardState = `${active ? 'active' : 'inactive'}-${theme}` as\n | 'active-light'\n | 'inactive-light'\n | 'active-dark'\n | 'inactive-dark'\n\n return (\n <div className={cn(eventScheduleCardVariants({ state: cardState }), className)}>\n {/* \u80CC\u666F\u56FE\u6807 */}\n {currentIcon && (\n <div className=\"laptop:w-[128px] desktop:w-[160px] absolute bottom-0 right-0 z-10 w-[120px]\">\n <Picture source={currentIcon.url} alt={currentIcon.alt} className=\"aspect-square\" />\n </div>\n )}\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"tablet:px-4 tablet:py-3 desktop:pl-6 desktop:pr-16 relative z-20 flex h-full flex-col justify-between p-4 pr-8\">\n <Heading\n html={item.title}\n className={cn(\n scheduleCount >= 4 ? 'desktop:text-[24px]' : 'desktop:text-[32px]',\n 'laptop:text-[24px] line-clamp-1 text-[20px]',\n cardTextVariants({ state: cardState })\n )}\n />\n {/* \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */}\n <div className=\"flex flex-col gap-0.5\">\n {item.items.map((detail, index) => (\n <div key={index} className=\"flex items-center gap-2\">\n {/* \u56FE\u6807 */}\n {detail.icon && (\n <div className=\"desktop:size-6 size-5 shrink-0\">\n <Picture source={detail.icon.url} alt={detail.icon.alt} className=\"size-full\" />\n </div>\n )}\n {/* \u6587\u672C */}\n <Text\n html={detail.label}\n className={cn(\n 'lg-desktop:text-[18px] desktop:text-[16px] line-clamp-1 flex-1 text-[14px] leading-[1.4]',\n cardTextVariants({ state: cardState })\n )}\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * EventSchedule - \u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6\n *\n * @description \u663E\u793A\u6D3B\u52A8\u65E5\u7A0B\u65F6\u95F4\u8F74\u548C\u6D3B\u52A8\u5361\u7247\u5217\u8868\n */\nconst EventSchedule = React.forwardRef<HTMLDivElement, EventScheduleProps>(({ classNames = {}, data }, ref) => {\n const theme = data.theme || 'light'\n const swiperRef = React.useRef<SwiperType | null>(null)\n const timelineSwiperRef = React.useRef<SwiperType | null>(null)\n const isSyncingRef = React.useRef(false) // \u9632\u6B62\u5FAA\u73AF\u89E6\u53D1\n const itemsPerRow = React.useMemo(() => {\n return data?.scheduleList?.length || 2\n }, [data?.scheduleList])\n\n // \u8BA1\u7B97 active item \u7684\u7D22\u5F15\n const activeIndex = React.useMemo(() => {\n return data.scheduleList.findIndex(item => getItemActiveStatus(item))\n }, [data.scheduleList])\n\n /**\n * \u751F\u6210\u7EDF\u4E00\u7684 Swiper \u65AD\u70B9\u914D\u7F6E\n * @param itemsPerRow \u6BCF\u884C\u663E\u793A\u7684\u9879\u76EE\u6570\n * @param withSpaceBetween \u662F\u5426\u5305\u542B\u95F4\u8DDD\u914D\u7F6E\n * @returns Swiper \u65AD\u70B9\u914D\u7F6E\u5BF9\u8C61\n */\n const generateSwiperBreakpoints = React.useCallback((itemsPerRow: number, withSpaceBetween: boolean = false) => {\n // \u6839\u636E itemsPerRow \u786E\u5B9A\u4E0D\u540C\u65AD\u70B9\u4E0B\u7684 slidesPerView\n const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n switch (breakpoint) {\n case 'mobile':\n return { slidesPerView: 1.17 }\n case 'tablet':\n if (itemsPerRow === 2) return { slidesPerView: 2 }\n return { slidesPerView: 2.4 }\n case 'laptop':\n if (itemsPerRow === 2) return {}\n if (itemsPerRow === 4) return { slidesPerView: 3.2 }\n return { slidesPerView: itemsPerRow }\n case 'desktop':\n if (itemsPerRow === 2) return { slidesPerView: 2 }\n return { slidesPerView: itemsPerRow }\n }\n }\n\n const mobileConfig = getBreakpointConfig('mobile')\n const tabletConfig = getBreakpointConfig('tablet')\n const laptopConfig = getBreakpointConfig('laptop')\n const desktopConfig = getBreakpointConfig('desktop')\n\n // \u5982\u679C\u9700\u8981 spaceBetween\uFF0C\u5219\u6DFB\u52A0\u5230\u914D\u7F6E\u4E2D\n if (withSpaceBetween) {\n return {\n 0: { ...mobileConfig, spaceBetween: 12 },\n 768: { ...tabletConfig, spaceBetween: itemsPerRow === 1 ? 12 : undefined },\n 1024: { ...laptopConfig, spaceBetween: 16 },\n 1440: { ...desktopConfig, spaceBetween: 16 },\n }\n }\n\n return {\n 0: mobileConfig,\n 768: tabletConfig,\n 1024: laptopConfig,\n 1440: desktopConfig,\n }\n }, [])\n\n // \u6839\u636E itemsPerRow \u914D\u7F6E\u54CD\u5E94\u5F0F\u65AD\u70B9\uFF08\u5361\u7247 Swiper - \u5305\u542B\u95F4\u8DDD\uFF09\n const swiperBreakpoints = React.useMemo(() => {\n return generateSwiperBreakpoints(itemsPerRow, true)\n }, [itemsPerRow, generateSwiperBreakpoints])\n\n // \u65F6\u95F4\u8F74 Swiper \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0D\u5305\u542B\u95F4\u8DDD\uFF09\n const timeNodeSwiperBreakpoints = React.useMemo(() => {\n return generateSwiperBreakpoints(itemsPerRow, false)\n }, [itemsPerRow, generateSwiperBreakpoints])\n\n const showTimeline = data.showTimeline !== false // \u9ED8\u8BA4\u4E3A true\n\n // \u540C\u6B65\u4E24\u4E2A Swiper \u7684\u6ED1\u52A8\n const handleCardSwiperSlideChange = React.useCallback((swiper: SwiperType) => {\n if (isSyncingRef.current || !timelineSwiperRef.current) return\n isSyncingRef.current = true\n timelineSwiperRef.current.slideTo(swiper.activeIndex, swiper.params.speed)\n // \u5EF6\u8FDF\u91CD\u7F6E\u6807\u5FD7\uFF0C\u786E\u4FDD\u540C\u6B65\u5B8C\u6210\n setTimeout(() => {\n isSyncingRef.current = false\n }, 50)\n }, [])\n\n const handleTimelineSwiperSlideChange = React.useCallback((swiper: SwiperType) => {\n if (isSyncingRef.current || !swiperRef.current) return\n isSyncingRef.current = true\n swiperRef.current.slideTo(swiper.activeIndex, swiper.params.speed)\n // \u5EF6\u8FDF\u91CD\u7F6E\u6807\u5FD7\uFF0C\u786E\u4FDD\u540C\u6B65\u5B8C\u6210\n setTimeout(() => {\n isSyncingRef.current = false\n }, 50)\n }, [])\n\n // \u81EA\u52A8\u6EDA\u52A8\u5230 active item\n React.useEffect(() => {\n if (swiperRef.current && timelineSwiperRef.current && activeIndex >= 0) {\n // \u5EF6\u8FDF\u6267\u884C\uFF0C\u786E\u4FDD Swiper \u5DF2\u7ECF\u5B8C\u5168\u521D\u59CB\u5316\n setTimeout(() => {\n isSyncingRef.current = true\n swiperRef.current?.slideTo(activeIndex, 500)\n timelineSwiperRef.current?.slideTo(activeIndex, 500)\n setTimeout(() => {\n isSyncingRef.current = false\n }, 600)\n }, 100)\n }\n }, [activeIndex])\n\n return (\n <div\n ref={ref}\n className={cn(\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] overflow-hidden px-4',\n classNames?.root\n )}\n >\n {showTimeline && (\n <Swiper\n breakpoints={timeNodeSwiperBreakpoints}\n className=\"h-4 w-full !overflow-visible\"\n onSwiper={swiper => {\n timelineSwiperRef.current = swiper\n }}\n onSlideChange={handleTimelineSwiperSlideChange}\n >\n {data.scheduleList.map((item, index) => {\n const isActive = getItemActiveStatus(item)\n return (\n <SwiperSlide key={'timelineNode' + index} className=\"\">\n <TimelineNode\n className={classNames?.timeline}\n active={isActive}\n theme={theme}\n index={index}\n nodeLength={data.scheduleList.length}\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n )}\n <Swiper\n breakpoints={swiperBreakpoints}\n className=\"w-full !overflow-visible\"\n onSwiper={swiper => {\n swiperRef.current = swiper\n }}\n onSlideChange={handleCardSwiperSlideChange}\n >\n {data.scheduleList.map((item, index) => {\n const isActive = getItemActiveStatus(item)\n return (\n <SwiperSlide key={'SwiperSlideItem' + index}>\n <EventScheduleCard\n active={isActive}\n className={cn(showTimeline ? 'laptop:mt-4 mt-2' : '', classNames?.eventScheduleCard)}\n item={item}\n theme={theme}\n scheduleCount={data.scheduleList.length}\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n </div>\n )\n})\n\nEventSchedule.displayName = 'EventSchedule'\nexport default EventSchedule\n\n// \u5BFC\u51FA\u7C7B\u578B\u4F9B\u5916\u90E8\u4F7F\u7528\n// export type { StateIcon, EventScheduleItem, EventScheduleData, EventScheduleProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "cn", "Text", "Picture", "Heading", "Swiper", "SwiperSlide", "dayjs", "cva", "isInTimeRange", "startDate", "endDate", "now", "start", "end", "getItemActiveStatus", "item", "timelineProgressActiveVariants", "timelineNodeActiveVariants", "cardTextVariants", "eventScheduleCardVariants", "TimelineNode", "active", "theme", "className", "index", "nodeLength", "state", "isFirst", "isLast", "getIconByState", "icon", "isActive", "EventScheduleCard", "scheduleCount", "currentIcon", "cardState", "detail", "EventSchedule", "classNames", "data", "ref", "swiperRef", "timelineSwiperRef", "isSyncingRef", "itemsPerRow", "activeIndex", "generateSwiperBreakpoints", "withSpaceBetween", "getBreakpointConfig", "breakpoint", "mobileConfig", "tabletConfig", "laptopConfig", "desktopConfig", "swiperBreakpoints", "timeNodeSwiperBreakpoints", "showTimeline", "handleCardSwiperSlideChange", "swiper", "handleTimelineSwiperSlideChange", "EventSchedule_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as c,jsx as t,jsxs as r}from"react/jsx-runtime";import"react";import{Text as a,Link as p,Heading as d,Picture as u}from"../../components/index.js";import{cn as
|
|
1
|
+
import{Fragment as c,jsx as t,jsxs as r}from"react/jsx-runtime";import"react";import{Text as a,Link as p,Heading as d,Picture as u}from"../../components/index.js";import{cn as s}from"../../helpers/utils.js";import{DownArrow as f}from"./icons/index.js";import{SeriesProductItem as g}from"./SidebarDropdown.js";const w=({label:e,href:l,onClick:n,active:o,icon:i,className:b})=>{const m=r(c,{children:[r("div",{className:"flex items-center gap-4",children:[t(a,{html:e,className:s("text-sm font-bold leading-[1.4]",{underline:i})}),i&&t(a,{html:i,"aria-hidden":"true"})]}),t("svg",{className:`size-5 ${o?"rotate-90":""}`,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t("path",{d:"M9 5L16 12L9 19",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]});return l?t(p,{href:l,className:s("flex cursor-pointer items-center justify-between py-4 no-underline",b),onClick:n,children:m}):t("button",{onClick:n,className:s("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",b),"aria-expanded":o,children:m})},C=({matchSeriesMetadata:e,onSubSubCategoryItemClick:l,expanded:n})=>{const o=r(c,{children:[e?.label&&t(a,{html:e?.label,className:"text-sm font-bold leading-[1.4]"}),l&&t(f,{"aria-hidden":"true",className:s("size-5",{"rotate-180":n})})]});return l?t("button",{className:"tablet:pt-0 flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:l,"aria-expanded":n,children:o}):t("div",{className:"tablet:pt-0 flex items-center justify-between py-4",children:o})},L=({matchSeriesMetadata:e})=>t("div",{className:"laptop:gap-3 flex flex-col gap-2",children:!!e?.series?.length&&e?.series?.map((l,n)=>r("div",{children:[l.label&&t(a,{html:l.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#3D3D3F]"}),r("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!e?.banner&&t(p,{asChild:!e?.banner?.href,href:e?.banner?.href,children:r("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[t(u,{source:e?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),r("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[t(d,{size:2,html:e?.banner?.title||"Buy in Guide",className:s("font-bold text-white",{"text-black":e?.banner?.theme==="dark"})}),t(a,{html:e?.banner?.desc||"20.000mAh",className:s("text-sm font-bold text-white",{"text-black":e?.banner?.theme==="dark"})})]})]})}),l.products?.map((o,i)=>t(g,{position:i,product:o,seriesLabel:e?.label,isCollection:e?.isCollection},`seriesProductItem-${l?.label||""}-${n}-${i}`))]})]},`seriesItem-${l?.label||""}-${n}`))});export{w as MenuItem,L as SubSubCategoryContentComp,C as SubSubCategoryItemComp};
|
|
2
2
|
//# sourceMappingURL=MobileMenuComponents.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeaderNavigation/MobileMenuComponents.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { SeriesProductItem } from './SidebarDropdown.js'\n\n/**\n * \u79FB\u52A8\u7AEF\u83DC\u5355\u9879\n */\nexport const MenuItem = ({\n label,\n href,\n onClick,\n active,\n icon,\n className,\n}: {\n label: string\n href?: string\n onClick?: () => void\n active?: boolean\n icon?: string\n className?: string\n}) => {\n const content = (\n <>\n <div className=\"flex items-center gap-4\">\n <Text html={label} className={cn('text-sm font-bold leading-[1.4]', { underline: icon })} />\n {icon && <Text html={icon} aria-hidden=\"true\" />}\n </div>\n <svg\n className={`size-5 ${active ? 'rotate-90' : ''}`}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path d=\"M9 5L16 12L9 19\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </>\n )\n\n return href ? (\n <Link\n href={href}\n className={cn('flex cursor-pointer items-center justify-between py-4 no-underline', className)}\n onClick={onClick}\n >\n {content}\n </Link>\n ) : (\n <button\n onClick={onClick}\n className={cn(\n 'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left',\n className\n )}\n aria-expanded={active}\n >\n {content}\n </button>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u5B50\u5206\u7C7B\u6807\u9898\u7EC4\u4EF6\n */\nexport const SubSubCategoryItemComp = ({\n matchSeriesMetadata,\n onSubSubCategoryItemClick,\n expanded,\n}: {\n matchSeriesMetadata: any\n onSubSubCategoryItemClick?: () => void\n expanded?: boolean\n}) => {\n const content = (\n <>\n {matchSeriesMetadata?.label && (\n <Text html={matchSeriesMetadata?.label} className=\"text-sm font-bold leading-[1.4]\" />\n )}\n {onSubSubCategoryItemClick && (\n <DownArrow\n aria-hidden=\"true\"\n className={cn('size-5', {\n ['rotate-180']: expanded,\n })}\n />\n )}\n </>\n )\n\n return onSubSubCategoryItemClick ? (\n <button\n className=\"tablet:pt-0 flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left\"\n onClick={onSubSubCategoryItemClick}\n aria-expanded={expanded}\n >\n {content}\n </button>\n ) : (\n <div className=\"tablet:pt-0 flex items-center justify-between py-4\">{content}</div>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u5B50\u5206\u7C7B\u5185\u5BB9\u7EC4\u4EF6\n */\nexport const SubSubCategoryContentComp = ({ matchSeriesMetadata }: { matchSeriesMetadata: any }) => {\n return (\n <div className=\"laptop:gap-3 flex flex-col gap-2\">\n {!!matchSeriesMetadata?.series?.length &&\n matchSeriesMetadata?.series?.map((seriesItem: any, pIndex: number) => (\n <div key={`seriesItem-${pIndex}`}>\n {seriesItem.label && (\n <Text html={seriesItem.label} as=\"p\" className=\"mb-2 text-sm font-bold leading-[1.4] text-[#3D3D3F]\" />\n )}\n <div className=\"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2\">\n {!!matchSeriesMetadata?.banner && (\n <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Picture\n source={matchSeriesMetadata?.banner?.imageUrl}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n <Text\n html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n className={cn('text-sm font-bold text-white', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n )}\n {seriesItem.products?.map((product: any, index: number) => (\n <SeriesProductItem\n position={index}\n key={`seriesProductItem-${pIndex}-${index}`}\n product={product}\n seriesLabel={matchSeriesMetadata?.label}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { SeriesProductItem } from './SidebarDropdown.js'\n\n/**\n * \u79FB\u52A8\u7AEF\u83DC\u5355\u9879\n */\nexport const MenuItem = ({\n label,\n href,\n onClick,\n active,\n icon,\n className,\n}: {\n label: string\n href?: string\n onClick?: () => void\n active?: boolean\n icon?: string\n className?: string\n}) => {\n const content = (\n <>\n <div className=\"flex items-center gap-4\">\n <Text html={label} className={cn('text-sm font-bold leading-[1.4]', { underline: icon })} />\n {icon && <Text html={icon} aria-hidden=\"true\" />}\n </div>\n <svg\n className={`size-5 ${active ? 'rotate-90' : ''}`}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path d=\"M9 5L16 12L9 19\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </>\n )\n\n return href ? (\n <Link\n href={href}\n className={cn('flex cursor-pointer items-center justify-between py-4 no-underline', className)}\n onClick={onClick}\n >\n {content}\n </Link>\n ) : (\n <button\n onClick={onClick}\n className={cn(\n 'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left',\n className\n )}\n aria-expanded={active}\n >\n {content}\n </button>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u5B50\u5206\u7C7B\u6807\u9898\u7EC4\u4EF6\n */\nexport const SubSubCategoryItemComp = ({\n matchSeriesMetadata,\n onSubSubCategoryItemClick,\n expanded,\n}: {\n matchSeriesMetadata: any\n onSubSubCategoryItemClick?: () => void\n expanded?: boolean\n}) => {\n const content = (\n <>\n {matchSeriesMetadata?.label && (\n <Text html={matchSeriesMetadata?.label} className=\"text-sm font-bold leading-[1.4]\" />\n )}\n {onSubSubCategoryItemClick && (\n <DownArrow\n aria-hidden=\"true\"\n className={cn('size-5', {\n ['rotate-180']: expanded,\n })}\n />\n )}\n </>\n )\n\n return onSubSubCategoryItemClick ? (\n <button\n className=\"tablet:pt-0 flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left\"\n onClick={onSubSubCategoryItemClick}\n aria-expanded={expanded}\n >\n {content}\n </button>\n ) : (\n <div className=\"tablet:pt-0 flex items-center justify-between py-4\">{content}</div>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u5B50\u5206\u7C7B\u5185\u5BB9\u7EC4\u4EF6\n */\nexport const SubSubCategoryContentComp = ({ matchSeriesMetadata }: { matchSeriesMetadata: any }) => {\n return (\n <div className=\"laptop:gap-3 flex flex-col gap-2\">\n {!!matchSeriesMetadata?.series?.length &&\n matchSeriesMetadata?.series?.map((seriesItem: any, pIndex: number) => (\n <div key={`seriesItem-${seriesItem?.label || ''}-${pIndex}`}>\n {seriesItem.label && (\n <Text html={seriesItem.label} as=\"p\" className=\"mb-2 text-sm font-bold leading-[1.4] text-[#3D3D3F]\" />\n )}\n <div className=\"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2\">\n {!!matchSeriesMetadata?.banner && (\n <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Picture\n source={matchSeriesMetadata?.banner?.imageUrl}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n <Text\n html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n className={cn('text-sm font-bold text-white', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n )}\n {seriesItem.products?.map((product: any, index: number) => (\n <SeriesProductItem\n position={index}\n key={`seriesProductItem-${seriesItem?.label || ''}-${pIndex}-${index}`}\n product={product}\n seriesLabel={matchSeriesMetadata?.label}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Text", "Link", "Heading", "Picture", "cn", "DownArrow", "SeriesProductItem", "MenuItem", "label", "href", "onClick", "active", "icon", "className", "content", "SubSubCategoryItemComp", "matchSeriesMetadata", "onSubSubCategoryItemClick", "expanded", "SubSubCategoryContentComp", "seriesItem", "pIndex", "product", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as a,jsxs as i}from"react/jsx-runtime";import L,{useCallback as C,useEffect as P,useMemo as k,useRef as A,useState as F}from"react";import{Button as S,Container as z,Text as p,Link as w,Heading as _,Picture as j}from"../../components/index.js";import{cn as y,atobID as B}from"../../helpers/utils.js";import{DownArrow as E}from"./icons/index.js";import{useNavContext as $}from"./NavProvider.js";const O=L.memo(({sidebarCategoriesMetadata:l,seriesMetadata:u})=>{const{buildProps:b,onSidebarNavClick:h}=$(),[f,g]=F([]),[c,m]=F(-1),v=A(null),x=C(()=>{const t=l?.subcategories;if(!t?.length)return;const s=t.findIndex(o=>!!o?.subSubCategories),n=t.findIndex(o=>!o?.subSubCategories),r=t.map((o,d)=>({index:d,open:s===d||n===d}));g(r)},[l]);P(()=>{x()},[x]);const e=k(()=>{const t=l?.subcategories?.[f?.find(n=>n.open)?.index||0],s=u?.find(n=>n?.label?.toLowerCase()===t?.label?.toLowerCase())||{};if(t?.collections){const n=b?.categories?.[t?.collections]||{};return{label:s?.label,isCollection:!0,banner:s?.banner,primary:s?.primary,series:[{products:n?.products}]}}else if(t?.subSubCategories){const n=t?.subSubCategories?.[c],r=u?.find(o=>o?.label?.toLowerCase()===n?.label?.toLowerCase())||{};if(n?.collections){const o=b?.categories?.[n?.collections]||{};return{label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,series:[{products:o?.products}]}}else return r}else return s},[l,f,c,u,b]),N=C((t,s)=>{s?.subSubCategories?.length>0?m(0):m(-1),g(n=>n.map((r,o)=>({...r,open:o===t?!r.open:!1})))},[]),D=(t,s)=>{g(n=>n.map(r=>r.index===t?{...r,open:!0}:{...r,open:!1})),m(s)};return i(z,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[i("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:v,children:[a("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:l?.subcategories?.map((t,s)=>{const n=Array.isArray(t?.subSubCategories)&&t?.subSubCategories?.length>0,r=f?.find(o=>o.index===s)?.open;return i("div",{children:[i("button",{className:y("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!n&&r}),onClick:()=>{N(s,t),h?.(t,s)},"aria-expanded":n?r:void 0,"aria-haspopup":n?"true":void 0,children:[a(p,{html:t.label,className:"p-4 text-sm font-bold leading-[1.4]"}),n&&a(E,{"aria-hidden":"true",className:y("size-4",{"rotate-180":r})})]}),r&&a("div",{className:"flex flex-col",role:"menu",children:t.subSubCategories?.map((o,d)=>a("button",{onClick:()=>{D(s,d),h?.(o,d)},className:y("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":c===d}),role:"menuitem","aria-label":o.label,children:a(p,{html:o.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${s}-${d}`))})]},`${t?.label||""}subcategoryItem-${s}`)})}),l&&a("div",{className:"flex",children:i("div",{className:"flex flex-col gap-4",children:[l?.primary&&a(S,{as:"a",href:`${l?.primary?.url}?ref=${l?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:l?.primary?.label}),l?.secondary&&a(S,{as:"a",href:l?.secondary?.url,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:l?.secondary?.label})]})})]}),i("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(e).length>0&&i("div",{className:"mb-4 flex items-center justify-between",children:[i("div",{className:"flex items-center gap-2",children:[a(p,{html:e?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),e?.primary&&!e?.primary?.hide&&a(S,{as:"a",href:`${e?.primary?.url}?ref=${e?.label}_viewmore`,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:e?.primary?.label})]}),l?.guide?.label&&a(w,{href:l?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:l?.guide?.label})]}),a("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e?.series?.map((t,s)=>i("div",{children:[t.label&&a(p,{html:t.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i("div",{className:"grid grid-cols-3 gap-4",children:[!!e?.banner&&a(w,{asChild:!e?.banner?.href,href:e?.banner?.href,children:i("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[a(j,{source:e?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),i("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[a(_,{size:2,html:e?.banner?.title||"Buy in Guide",className:y("font-bold text-white",{"text-black":e?.banner?.theme==="dark"})}),a(p,{html:e?.banner?.desc||"20.000mAh",className:y("text-sm font-bold text-white",{"text-black":e?.banner?.theme==="dark"})})]})]})}),t.products?.map((n,r)=>a(R,{seriesLabel:e?.label,product:n,isCollection:e?.isCollection},`seriesProductItem-${t?.label||""}-${s}-${r}`))]})]},`seriesItem-${s}`))})]})]})});O.displayName="SidebarDropdown";const R=({product:l,isCollection:u,position:b,seriesLabel:h})=>{const{buildProps:f,onSeriesProductClick:g}=$();let c=u?l:f?.products?.find(e=>e.handle===l.handle);const m=c?.variants?.find(e=>e.sku===l.sku)||c?.variants?.[0],v=k(()=>`/products/${c?.handle}?variant=${B(m?.id)}`,[c?.handle,m?.id]),x=k(()=>c?.tags?.filter?.(e=>e?.startsWith?.("CLtag"))?.map?.(e=>e?.replace?.("CLtag:",""))?.slice?.(0,2),[c?.tags]);return m?.availableForSale?a(w,{href:v,onClick:e=>{e.preventDefault(),window.open(v,"_self"),g?.(c,b||0,h)},className:"no-underline hover:text-current",children:i("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",children:[a("div",{className:"shrink-0",children:a("img",{src:`${m?.image?.url||l?.images?.[0]?.url}&width=200`,loading:"lazy",alt:c?.title||l?.name,width:90,height:90,className:"size-[96px] object-contain"})}),i("div",{className:"relative",children:[a("div",{className:"flex gap-1",children:Array.isArray(x)&&x?.map((e,N)=>a(p,{as:"p",html:e,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]"},N))}),a(p,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:c?.title||l?.name}),l?.desc&&a(p,{as:"p",html:l?.desc,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null};export{R as SeriesProductItem,O as SidebarDropdown};
|
|
2
2
|
//# sourceMappingURL=SidebarDropdown.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeaderNavigation/SidebarDropdown.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn, atobID } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const SidebarDropdown = React.memo(\n ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n const { buildProps, onSidebarNavClick } = useNavContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n const initExpandedSubcategory = useCallback(() => {\n const subcategories = sidebarCategoriesMetadata?.subcategories\n if (!subcategories?.length) return\n\n const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n const expandedStates = subcategories.map((_: any, index: number) => ({\n index,\n open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n }))\n\n setExpandedSubcategory(expandedStates)\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n initExpandedSubcategory()\n }, [initExpandedSubcategory])\n\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n const matchSeriesMetadata = useMemo(() => {\n const subCategory =\n sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n const currentSeriesMetadata =\n seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n if (subCategory?.collections) {\n const category = buildProps?.categories?.[subCategory?.collections] || {}\n return {\n label: currentSeriesMetadata?.label,\n isCollection: true,\n banner: currentSeriesMetadata?.banner,\n primary: currentSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n if (subCategory?.subSubCategories) {\n const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n const currentActiveSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n ) || {}\n if (activeSubSubcategory?.collections) {\n const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n return {\n label: currentActiveSeriesMetadata?.label,\n isCollection: true,\n banner: currentActiveSeriesMetadata?.banner,\n primary: currentActiveSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n return currentActiveSeriesMetadata\n }\n } else {\n return currentSeriesMetadata\n }\n }\n }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata, buildProps])\n\n const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n }, [])\n\n const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n setExpandedSubcategory(prev =>\n prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n )\n setActiveSubSubcategoryIndex(subSubindex)\n }\n\n return (\n <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n <div\n className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n style={{\n userSelect: 'none',\n }}\n ref={sidebarDropdownRef}\n >\n <div\n className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n const hasSubSubCategory =\n Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n return (\n <div key={`subcategoryItem-${index}`}>\n <button\n className={cn(\n 'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n {\n 'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n }\n )}\n onClick={() => {\n handleSubcategoryOpen(index, subItem)\n onSidebarNavClick?.(subItem, index)\n }}\n aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n >\n <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n {hasSubSubCategory && (\n <DownArrow\n aria-hidden=\"true\"\n className={cn('size-4', {\n ['rotate-180']: isExpanded,\n })}\n />\n )}\n </button>\n {isExpanded && (\n <div className=\"flex flex-col\" role=\"menu\">\n {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n <button\n onClick={() => {\n handleSubSubcategoryOpen(index, subSubindex)\n onSidebarNavClick?.(subSubItem, subSubindex)\n }}\n key={`subSubItem-${index}-${subSubindex}`}\n className={cn(\n 'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n {\n 'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n }\n )}\n role=\"menuitem\"\n aria-label={subSubItem.label}\n >\n <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n </button>\n ))}\n </div>\n )}\n </div>\n )\n })}\n </div>\n {sidebarCategoriesMetadata && (\n <div className=\"flex\">\n <div className=\"flex flex-col gap-4\">\n {sidebarCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={`${sidebarCategoriesMetadata?.primary?.url}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n variant=\"primary\"\n size=\"lg\"\n className=\"lg-desktop:text-base text-sm\"\n >\n {sidebarCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {sidebarCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={sidebarCategoriesMetadata?.secondary?.url}\n variant=\"link\"\n size=\"lg\"\n iconClassName=\"size-4\"\n className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"flex-1 py-4\">\n {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n <div className=\"mb-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <Text\n html={matchSeriesMetadata?.label}\n className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.4]\"\n />\n {matchSeriesMetadata?.primary && !matchSeriesMetadata?.primary?.hide && (\n <Button\n as=\"a\"\n href={`${matchSeriesMetadata?.primary?.url}?ref=${matchSeriesMetadata?.label}_viewmore`}\n variant=\"link\"\n size=\"lg\"\n iconClassName=\"size-4\"\n className=\"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n )}\n </div>\n {sidebarCategoriesMetadata?.guide?.label && (\n <Link\n href={sidebarCategoriesMetadata?.guide?.url}\n className=\"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]\"\n >\n {sidebarCategoriesMetadata?.guide?.label}\n </Link>\n )}\n </div>\n )}\n <div\n className=\"flex h-[426px] flex-col gap-4 overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n <div key={`seriesItem-${seriesIndex}`}>\n {seriesItem.label && (\n <Text\n html={seriesItem.label}\n as=\"p\"\n className=\"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n <div className=\"grid grid-cols-3 gap-4\">\n {!!matchSeriesMetadata?.banner && (\n <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Picture\n source={matchSeriesMetadata?.banner?.imageUrl}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n <Text\n html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n className={cn('text-sm font-bold text-white', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n )}\n {seriesItem.products?.map((product: any, index: number) => (\n <SeriesProductItem\n seriesLabel={matchSeriesMetadata?.label}\n key={`seriesProductItem-${index}`}\n product={product}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n </Container>\n )\n }\n)\n\nSidebarDropdown.displayName = 'SidebarDropdown'\n\n/**\n * \u7CFB\u5217\u4EA7\u54C1\u9879\u7EC4\u4EF6\n */\nexport const SeriesProductItem = ({\n product,\n isCollection,\n position,\n seriesLabel,\n}: {\n product: any\n isCollection?: boolean\n position?: number\n seriesLabel?: string\n}) => {\n const { buildProps, onSeriesProductClick } = useNavContext()\n let productData = isCollection\n ? product\n : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n const variant =\n productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n const listingLink = useMemo(() => {\n return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n }, [productData?.handle, variant?.id])\n\n const tags = useMemo(() => {\n return productData?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [productData?.tags])\n\n if (!variant?.availableForSale) return null\n\n return (\n <Link\n href={listingLink}\n onClick={e => {\n e.preventDefault()\n window.open(listingLink, '_self')\n onSeriesProductClick?.(productData, position || 0, seriesLabel)\n }}\n className=\"no-underline hover:text-current\"\n >\n <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500\">\n <div className=\"shrink-0\">\n <img\n src={`${variant?.image?.url || product?.images?.[0]?.url}`}\n loading=\"lazy\"\n alt={productData?.title || product?.name}\n width={90}\n height={90}\n className=\"size-[96px] object-contain\"\n />\n </div>\n <div className=\"relative\">\n <div className=\"flex gap-1\">\n {Array.isArray(tags) &&\n tags?.map((tag: string, index: number) => (\n <Text\n key={index}\n as=\"p\"\n html={tag}\n className=\"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]\"\n />\n ))}\n </div>\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productData?.title || product?.name}\n />\n {product?.desc && (\n <Text\n as=\"p\"\n html={product?.desc}\n className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </Link>\n )\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn, atobID } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const SidebarDropdown = React.memo(\n ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n const { buildProps, onSidebarNavClick } = useNavContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n const initExpandedSubcategory = useCallback(() => {\n const subcategories = sidebarCategoriesMetadata?.subcategories\n if (!subcategories?.length) return\n\n const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n const expandedStates = subcategories.map((_: any, index: number) => ({\n index,\n open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n }))\n\n setExpandedSubcategory(expandedStates)\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n initExpandedSubcategory()\n }, [initExpandedSubcategory])\n\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n const matchSeriesMetadata = useMemo(() => {\n const subCategory =\n sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n const currentSeriesMetadata =\n seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n if (subCategory?.collections) {\n const category = buildProps?.categories?.[subCategory?.collections] || {}\n return {\n label: currentSeriesMetadata?.label,\n isCollection: true,\n banner: currentSeriesMetadata?.banner,\n primary: currentSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n if (subCategory?.subSubCategories) {\n const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n const currentActiveSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n ) || {}\n if (activeSubSubcategory?.collections) {\n const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n return {\n label: currentActiveSeriesMetadata?.label,\n isCollection: true,\n banner: currentActiveSeriesMetadata?.banner,\n primary: currentActiveSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n return currentActiveSeriesMetadata\n }\n } else {\n return currentSeriesMetadata\n }\n }\n }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata, buildProps])\n\n const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n }, [])\n\n const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n setExpandedSubcategory(prev =>\n prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n )\n setActiveSubSubcategoryIndex(subSubindex)\n }\n\n return (\n <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n <div\n className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n style={{\n userSelect: 'none',\n }}\n ref={sidebarDropdownRef}\n >\n <div\n className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n const hasSubSubCategory =\n Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n return (\n <div key={`${subItem?.label || ''}subcategoryItem-${index}`}>\n <button\n className={cn(\n 'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n {\n 'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n }\n )}\n onClick={() => {\n handleSubcategoryOpen(index, subItem)\n onSidebarNavClick?.(subItem, index)\n }}\n aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n >\n <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n {hasSubSubCategory && (\n <DownArrow\n aria-hidden=\"true\"\n className={cn('size-4', {\n ['rotate-180']: isExpanded,\n })}\n />\n )}\n </button>\n {isExpanded && (\n <div className=\"flex flex-col\" role=\"menu\">\n {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n <button\n onClick={() => {\n handleSubSubcategoryOpen(index, subSubindex)\n onSidebarNavClick?.(subSubItem, subSubindex)\n }}\n key={`subSubItem-${index}-${subSubindex}`}\n className={cn(\n 'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n {\n 'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n }\n )}\n role=\"menuitem\"\n aria-label={subSubItem.label}\n >\n <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n </button>\n ))}\n </div>\n )}\n </div>\n )\n })}\n </div>\n {sidebarCategoriesMetadata && (\n <div className=\"flex\">\n <div className=\"flex flex-col gap-4\">\n {sidebarCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={`${sidebarCategoriesMetadata?.primary?.url}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n variant=\"primary\"\n size=\"lg\"\n className=\"lg-desktop:text-base text-sm\"\n >\n {sidebarCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {sidebarCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={sidebarCategoriesMetadata?.secondary?.url}\n variant=\"link\"\n size=\"lg\"\n iconClassName=\"size-4\"\n className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"flex-1 py-4\">\n {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n <div className=\"mb-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <Text\n html={matchSeriesMetadata?.label}\n className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.4]\"\n />\n {matchSeriesMetadata?.primary && !matchSeriesMetadata?.primary?.hide && (\n <Button\n as=\"a\"\n href={`${matchSeriesMetadata?.primary?.url}?ref=${matchSeriesMetadata?.label}_viewmore`}\n variant=\"link\"\n size=\"lg\"\n iconClassName=\"size-4\"\n className=\"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n )}\n </div>\n {sidebarCategoriesMetadata?.guide?.label && (\n <Link\n href={sidebarCategoriesMetadata?.guide?.url}\n className=\"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]\"\n >\n {sidebarCategoriesMetadata?.guide?.label}\n </Link>\n )}\n </div>\n )}\n <div\n className=\"flex h-[426px] flex-col gap-4 overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n <div key={`seriesItem-${seriesIndex}`}>\n {seriesItem.label && (\n <Text\n html={seriesItem.label}\n as=\"p\"\n className=\"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n <div className=\"grid grid-cols-3 gap-4\">\n {!!matchSeriesMetadata?.banner && (\n <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Picture\n source={matchSeriesMetadata?.banner?.imageUrl}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n <Text\n html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n className={cn('text-sm font-bold text-white', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n )}\n {seriesItem.products?.map((product: any, index: number) => (\n <SeriesProductItem\n seriesLabel={matchSeriesMetadata?.label}\n key={`seriesProductItem-${seriesItem?.label || ''}-${seriesIndex}-${index}`}\n product={product}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n </Container>\n )\n }\n)\n\nSidebarDropdown.displayName = 'SidebarDropdown'\n\n/**\n * \u7CFB\u5217\u4EA7\u54C1\u9879\u7EC4\u4EF6\n */\nexport const SeriesProductItem = ({\n product,\n isCollection,\n position,\n seriesLabel,\n}: {\n product: any\n isCollection?: boolean\n position?: number\n seriesLabel?: string\n}) => {\n const { buildProps, onSeriesProductClick } = useNavContext()\n let productData = isCollection\n ? product\n : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n const variant =\n productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n const listingLink = useMemo(() => {\n return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n }, [productData?.handle, variant?.id])\n\n const tags = useMemo(() => {\n return productData?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [productData?.tags])\n\n if (!variant?.availableForSale) return null\n\n return (\n <Link\n href={listingLink}\n onClick={e => {\n e.preventDefault()\n window.open(listingLink, '_self')\n onSeriesProductClick?.(productData, position || 0, seriesLabel)\n }}\n className=\"no-underline hover:text-current\"\n >\n <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500\">\n <div className=\"shrink-0\">\n <img\n src={`${variant?.image?.url || product?.images?.[0]?.url}&width=200`}\n loading=\"lazy\"\n alt={productData?.title || product?.name}\n width={90}\n height={90}\n className=\"size-[96px] object-contain\"\n />\n </div>\n <div className=\"relative\">\n <div className=\"flex gap-1\">\n {Array.isArray(tags) &&\n tags?.map((tag: string, index: number) => (\n <Text\n key={index}\n as=\"p\"\n html={tag}\n className=\"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]\"\n />\n ))}\n </div>\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productData?.title || product?.name}\n />\n {product?.desc && (\n <Text\n as=\"p\"\n html={product?.desc}\n className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </Link>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useCallback", "useEffect", "useMemo", "useRef", "useState", "Button", "Container", "Text", "Link", "Heading", "Picture", "cn", "atobID", "DownArrow", "useNavContext", "SidebarDropdown", "sidebarCategoriesMetadata", "seriesMetadata", "buildProps", "onSidebarNavClick", "expandedSubcategory", "setExpandedSubcategory", "activeSubSubcategoryIndex", "setActiveSubSubcategoryIndex", "sidebarDropdownRef", "initExpandedSubcategory", "subcategories", "withSubSubCategoriesIndex", "item", "withoutSubSubCategoriesIndex", "expandedStates", "_", "index", "matchSeriesMetadata", "subCategory", "currentSeriesMetadata", "category", "activeSubSubcategory", "currentActiveSeriesMetadata", "handleSubcategoryOpen", "subcategoryItem", "prev", "i", "handleSubSubcategoryOpen", "subSubindex", "subItem", "hasSubSubCategory", "isExpanded", "subSubItem", "seriesItem", "seriesIndex", "product", "SeriesProductItem", "isCollection", "position", "seriesLabel", "onSeriesProductClick", "productData", "variant", "listingLink", "tags", "tag"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as a,jsxs as
|
|
1
|
+
"use client";import{jsx as a,jsxs as x}from"react/jsx-runtime";import*as f from"react";import{cn as p}from"../../helpers/index.js";import{Heading as v,Button as k,Picture as B}from"../../components/index.js";import{withLayout as M}from"../../shared/Styles.js";const P=o=>{if(!o)return;const{mobile:e,tablet:u,laptop:c,desktop:d,lgDesktop:h}=o,t=[],s=b=>b?.url,i=s(h),n=s(d),r=s(c),l=s(u),m=s(e);return i?t.push(i):n?t.push(n):r?t.push(r):l?t.push(l):m&&t.push(m),n&&i&&t.push(`${n} 1920`),r&&(n||i)&&t.push(`${r} 1440`),l&&(r||n||i)&&t.push(`${l} 1024`),m&&(l||r||n||i)&&t.push(`${m} 768`),t.length>0?t.join(", "):void 0},g=f.forwardRef(({classNames:o,data:e},u)=>{const{backgroundImage:c}=e,d=f.useMemo(()=>P(c),[c]);return a("div",{ref:u,className:p("laptop:h-[192px] lg-desktop:h-[240px] h-[240px]",o?.root),children:x("div",{className:"promotional-bar-content rounded-card relative h-full overflow-hidden",children:[x("div",{className:p("laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4",o?.content),children:[e.contentTitle&&a(v,{className:p("line-clamp-2 text-[#F5F6F7]",o?.title),html:e.contentTitle,size:3}),e.contentDesc&&a("p",{className:p("laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]",o?.description),dangerouslySetInnerHTML:{__html:e.contentDesc}}),a("div",{className:"laptop:mt-4 mt-2",children:e.buttonText&&a(k,{as:"a",variant:"link",className:p("!p-0 text-[#F5F6F7]",o?.button),href:e.buttonLink,iconClassName:"size-4",children:e.buttonText})})]}),a(B,{source:d,className:"absolute inset-0 z-10 ",imgClassName:"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]"})]})})});g.displayName="PromotionalBar";var F=M(g);export{F as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/PromotionalBar/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\nexport interface PromotionalBarSemanticName {\n root: 'root'\n content: 'content'\n title: 'title'\n description: 'description'\n button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n mobile?: Media\n /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n tablet?: Media\n /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n laptop?: Media\n /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n desktop?: Media\n /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n contentTitle?: string\n /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n contentDesc?: string\n /** \u6309\u94AE\u6587\u672C */\n buttonText?: string\n /** \u6309\u94AE\u94FE\u63A5 */\n buttonLink?: string\n /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: PromotionalBarData\n classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n if (!backgroundImage) return undefined\n\n const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n const parts: string[] = []\n\n // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n const getUrl = (media: Media | undefined): string | undefined => {\n return media?.url\n }\n\n // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n const lgDesktopUrl = getUrl(lgDesktop)\n const desktopUrl = getUrl(desktop)\n const laptopUrl = getUrl(laptop)\n const tabletUrl = getUrl(tablet)\n const mobileUrl = getUrl(mobile)\n\n if (lgDesktopUrl) parts.push(lgDesktopUrl)\n else if (desktopUrl) parts.push(desktopUrl)\n else if (laptopUrl) parts.push(laptopUrl)\n else if (tabletUrl) parts.push(tabletUrl)\n else if (mobileUrl) parts.push(mobileUrl)\n\n // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(({ classNames, data }, ref) => {\n const { backgroundImage } = data\n const pictureSource = React.useMemo(() => {\n return convertResponsiveImageToString(backgroundImage)\n }, [backgroundImage])\n return (\n <div ref={ref} className={cn('laptop:h-[192px] lg-desktop:h-[240px] h-[240px]', classNames?.root)}>\n {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n <div className=\"promotional-bar-content rounded-
|
|
5
|
-
"mappings": "aAwGQ,OAOI,OAAAA,EAPJ,QAAAC,MAAA,oBAtGR,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,MAAe,4BACzC,OAAS,cAAAC,MAAkB,yBAoD3B,MAAMC,EAAkCC,GAA+E,CACrH,GAAI,CAACA,EAAiB,OAEtB,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGnBC,EAAUC,GACPA,GAAO,IAIVC,EAAeF,EAAOF,CAAS,EAC/BK,EAAaH,EAAOH,CAAO,EAC3BO,EAAYJ,EAAOJ,CAAM,EACzBS,EAAYL,EAAOL,CAAM,EACzBW,EAAYN,EAAON,CAAM,EAE/B,OAAIQ,EAAcH,EAAM,KAAKG,CAAY,EAChCC,EAAYJ,EAAM,KAAKI,CAAU,EACjCC,EAAWL,EAAM,KAAKK,CAAS,EAC/BC,EAAWN,EAAM,KAAKM,CAAS,EAC/BC,GAAWP,EAAM,KAAKO,CAAS,EAGpCH,GAAcD,GAAcH,EAAM,KAAK,GAAGI,CAAU,OAAO,EAC3DC,IAAcD,GAAcD,IAAeH,EAAM,KAAK,GAAGK,CAAS,OAAO,EACzEC,IAAcD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGM,CAAS,OAAO,EACtFC,IAAcD,GAAaD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGO,CAAS,MAAM,EAE/FP,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMQ,EAAiBrB,EAAM,WAAgD,CAAC,CAAE,WAAAsB,EAAY,KAAAC,CAAK,EAAGC,IAAQ,CAC1G,KAAM,CAAE,gBAAAjB,CAAgB,EAAIgB,EACtBE,EAAgBzB,EAAM,QAAQ,IAC3BM,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,OACET,EAAC,OAAI,IAAK0B,EAAK,UAAWvB,EAAG,kDAAmDqB,GAAY,IAAI,EAE9F,SAAAvB,EAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\nexport interface PromotionalBarSemanticName {\n root: 'root'\n content: 'content'\n title: 'title'\n description: 'description'\n button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n mobile?: Media\n /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n tablet?: Media\n /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n laptop?: Media\n /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n desktop?: Media\n /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n contentTitle?: string\n /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n contentDesc?: string\n /** \u6309\u94AE\u6587\u672C */\n buttonText?: string\n /** \u6309\u94AE\u94FE\u63A5 */\n buttonLink?: string\n /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: PromotionalBarData\n classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n if (!backgroundImage) return undefined\n\n const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n const parts: string[] = []\n\n // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n const getUrl = (media: Media | undefined): string | undefined => {\n return media?.url\n }\n\n // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n const lgDesktopUrl = getUrl(lgDesktop)\n const desktopUrl = getUrl(desktop)\n const laptopUrl = getUrl(laptop)\n const tabletUrl = getUrl(tablet)\n const mobileUrl = getUrl(mobile)\n\n if (lgDesktopUrl) parts.push(lgDesktopUrl)\n else if (desktopUrl) parts.push(desktopUrl)\n else if (laptopUrl) parts.push(laptopUrl)\n else if (tabletUrl) parts.push(tabletUrl)\n else if (mobileUrl) parts.push(mobileUrl)\n\n // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(({ classNames, data }, ref) => {\n const { backgroundImage } = data\n const pictureSource = React.useMemo(() => {\n return convertResponsiveImageToString(backgroundImage)\n }, [backgroundImage])\n return (\n <div ref={ref} className={cn('laptop:h-[192px] lg-desktop:h-[240px] h-[240px]', classNames?.root)}>\n {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n <div className=\"promotional-bar-content rounded-card relative h-full overflow-hidden\">\n <div\n className={cn(\n 'laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4',\n classNames?.content\n )}\n >\n {data.contentTitle && (\n <Heading\n className={cn('line-clamp-2 text-[#F5F6F7]', classNames?.title)}\n html={data.contentTitle}\n size={3}\n />\n )}\n {data.contentDesc && (\n <p\n className={cn(\n 'laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]',\n classNames?.description\n )}\n dangerouslySetInnerHTML={{ __html: data.contentDesc }}\n />\n )}\n <div className=\"laptop:mt-4 mt-2\">\n {data.buttonText && (\n <Button\n as=\"a\"\n variant=\"link\"\n className={cn('!p-0 text-[#F5F6F7]', classNames?.button)}\n href={data.buttonLink}\n iconClassName=\"size-4\"\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n <Picture\n source={pictureSource}\n className=\"absolute inset-0 z-10 \"\n imgClassName=\"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]\"\n />\n </div>\n </div>\n )\n})\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default withLayout(PromotionalBar)\n"],
|
|
5
|
+
"mappings": "aAwGQ,OAOI,OAAAA,EAPJ,QAAAC,MAAA,oBAtGR,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,MAAe,4BACzC,OAAS,cAAAC,MAAkB,yBAoD3B,MAAMC,EAAkCC,GAA+E,CACrH,GAAI,CAACA,EAAiB,OAEtB,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGnBC,EAAUC,GACPA,GAAO,IAIVC,EAAeF,EAAOF,CAAS,EAC/BK,EAAaH,EAAOH,CAAO,EAC3BO,EAAYJ,EAAOJ,CAAM,EACzBS,EAAYL,EAAOL,CAAM,EACzBW,EAAYN,EAAON,CAAM,EAE/B,OAAIQ,EAAcH,EAAM,KAAKG,CAAY,EAChCC,EAAYJ,EAAM,KAAKI,CAAU,EACjCC,EAAWL,EAAM,KAAKK,CAAS,EAC/BC,EAAWN,EAAM,KAAKM,CAAS,EAC/BC,GAAWP,EAAM,KAAKO,CAAS,EAGpCH,GAAcD,GAAcH,EAAM,KAAK,GAAGI,CAAU,OAAO,EAC3DC,IAAcD,GAAcD,IAAeH,EAAM,KAAK,GAAGK,CAAS,OAAO,EACzEC,IAAcD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGM,CAAS,OAAO,EACtFC,IAAcD,GAAaD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGO,CAAS,MAAM,EAE/FP,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMQ,EAAiBrB,EAAM,WAAgD,CAAC,CAAE,WAAAsB,EAAY,KAAAC,CAAK,EAAGC,IAAQ,CAC1G,KAAM,CAAE,gBAAAjB,CAAgB,EAAIgB,EACtBE,EAAgBzB,EAAM,QAAQ,IAC3BM,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,OACET,EAAC,OAAI,IAAK0B,EAAK,UAAWvB,EAAG,kDAAmDqB,GAAY,IAAI,EAE9F,SAAAvB,EAAC,OAAI,UAAU,uEACb,UAAAA,EAAC,OACC,UAAWE,EACT,mLACAqB,GAAY,OACd,EAEC,UAAAC,EAAK,cACJzB,EAACI,EAAA,CACC,UAAWD,EAAG,8BAA+BqB,GAAY,KAAK,EAC9D,KAAMC,EAAK,aACX,KAAM,EACR,EAEDA,EAAK,aACJzB,EAAC,KACC,UAAWG,EACT,6HACAqB,GAAY,WACd,EACA,wBAAyB,CAAE,OAAQC,EAAK,WAAY,EACtD,EAEFzB,EAAC,OAAI,UAAU,mBACZ,SAAAyB,EAAK,YACJzB,EAACK,EAAA,CACC,GAAG,IACH,QAAQ,OACR,UAAWF,EAAG,sBAAuBqB,GAAY,MAAM,EACvD,KAAMC,EAAK,WACX,cAAc,SAEb,SAAAA,EAAK,WACR,EAEJ,GACF,EACAzB,EAACM,EAAA,CACC,OAAQqB,EACR,UAAU,yBACV,aAAa,uFACf,GACF,EACF,CAEJ,CAAC,EAEDJ,EAAe,YAAc,iBAC7B,IAAOK,EAAQrB,EAAWgB,CAAc",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "cn", "Heading", "Button", "Picture", "withLayout", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "tabletUrl", "mobileUrl", "PromotionalBar", "classNames", "data", "ref", "pictureSource", "PromotionalBar_default"]
|
|
7
7
|
}
|