@anker-in/headless-ui 1.3.47 → 1.3.48
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var ct=Object.create;var w=Object.defineProperty;var ut=Object.getOwnPropertyDescriptor;var mt=Object.getOwnPropertyNames;var pt=Object.getPrototypeOf,ft=Object.prototype.hasOwnProperty;var ht=(t,n)=>{for(var e in n)w(t,e,{get:n[e],enumerable:!0})},S=(t,n,e,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of mt(n))!ft.call(t,r)&&r!==e&&w(t,r,{get:()=>n[r],enumerable:!(s=ut(n,r))||s.enumerable});return t};var gt=(t,n,e)=>(e=t!=null?ct(pt(t)):{},S(n||!t||!t.__esModule?w(e,"default",{value:t,enumerable:!0}):e,t)),xt=t=>S(w({},"__esModule",{value:!0}),t);var kt={};ht(kt,{default:()=>yt});module.exports=xt(kt);var i=require("react/jsx-runtime"),a=gt(require("react")),b=require("gsap"),F=require("gsap/dist/SplitText"),H=require("gsap/dist/ScrollTrigger"),l=require("../../helpers/utils.js"),L=require("class-variance-authority"),d=require("../../components/index.js"),j=require("../../shared/Styles.js"),O=require("../../shared/trackUrlRef.js"),U=require("react-intersection-observer");const $="link",_="title";function wt(t){if(!t)return!1;if(typeof t=="string")return t.trim().length>0;const n=t?.root?.children;return!Array.isArray(n)||n.length===0?!1:n.some(e=>{const s=e?.children;return!Array.isArray(s)||s.length===0?!1:s.some(r=>typeof r?.text=="string"&&r.text.length>0)})}const bt=(0,L.cva)("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),vt=(0,L.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"}}),B=({data:t,onClick:n,className:e})=>{const{theme:s="light",extensions:r,title:f,caption:v,align:h}=t;if(!r?.textLink)return null;const g=r?.link?(0,O.trackUrlRef)(r.link,`${$}_${_}`):void 0;return(0,i.jsxs)("a",{className:(0,l.cn)({"aiui-dark":s==="dark"},"hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":s==="light"},{"text-[#F5F6F7]":s==="dark"},{"justify-center mt-4":h==="center"},{"mt-1 laptop:mt-0":h==="left"},e),...g?{href:g}:{},"data-headless-type-name":`${$}#${_}`,"data-headless-title-desc-button":`${f}#${v}`,...n?{onClick:n}:{},children:[(0,i.jsx)("div",{className:"truncate whitespace-nowrap",children:r?.textLink}),(0,i.jsx)("div",{className:"lg-desktop:size-5 size-4",children:(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 16 16",fill:"none",children:(0,i.jsx)("path",{d:"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z",fill:s==="dark"?"#F5F6F7":"#080A0F",className:"transition-all duration-[0.4s]"})})})]})},I=a.default.forwardRef(({data:t,className:n,classNames:e,as:s="h2",weight:r="bold",onButtonClick:f,id:v,...h},g)=>{const{title:C,titleSize:W=4,caption:D,subtitle:M,content:E,countdown:o,showCountdown:Z=!1,theme:x="light",extensions:z,align:u="left"}=t,R=(0,a.useRef)(null),m=(0,a.useRef)(null),c=(0,a.useRef)(null),p=(0,a.useRef)(null),[q,G]=(0,a.useState)(!0),{ref:J,inView:V}=(0,U.useInView)();(0,a.useImperativeHandle)(g,()=>R.current);const K=()=>{G(!1)},Q=o?.targetDateTime||o?.targetDate||"",X=o?.targetDateTime_tz,Y=o?.labels?{day:o.labels.days||"Day",hour:o.labels.hours||"Hours",minute:o.labels.minutes||"Mins",second:o.labels.seconds||"Secs"}:void 0;return(0,a.useEffect)(()=>{b.gsap.registerPlugin(F.SplitText,H.ScrollTrigger);function tt(){if(!m.current)return;const et=m.current?.clientHeight||80;c.current&&c.current.revert(),p.current&&p.current.kill(),c.current=new F.SplitText(m.current,{type:"words",wordsClass:"word"});const y=c.current.words;b.gsap.set(y,{opacity:0}),p.current=H.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=4%",end:`bottom+=${et*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:nt=>{const rt=nt.progress,A=y.length||1,it=.5,k=1/A,N=k*(1-it),P=(A-1)*N+k,st=Math.min(1,P>0?rt/P:0);y.forEach((ot,at)=>{const lt=at*N,dt=k;let T=(st-lt)/dt;T=Math.max(0,Math.min(1,T)),b.gsap.set(ot,{opacity:T})})}})}return V&&tt(),()=>{c.current&&c.current.revert(),p.current&&p.current.kill()}},[V]),(0,i.jsxs)("div",{id:z?.id?z?.id:v,className:(0,l.cn)("titleBottom title-box flex items-end justify-between gap-2 pb-6",n,e?.wrapper),...h,ref:R,children:[(0,i.jsxs)("div",{ref:J,className:(0,l.cn)("flex-1",e?.container,{"aiui-dark":x==="dark","text-center":u==="center","text-left":u==="left"}),children:[(D||C)&&(0,i.jsx)(d.Heading,{ref:m,as:s,size:W,html:D||C,weight:r,className:(0,l.cn)(bt({theme:x}),e?.title)}),M&&(0,i.jsx)(d.Text,{html:M,as:"div",className:(0,l.cn)(vt({theme:x}),e?.subtitle)}),wt(E)&&(0,i.jsx)(d.Text,{html:E,as:"div",size:4,className:(0,l.cn)("title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]",e?.content)}),(0,i.jsx)(B,{data:t,className:(0,l.cn)({"laptop:hidden":u==="left"},e?.button),onClick:f}),Z&&o&&q&&(0,i.jsx)(d.Countdown,{endDate:Q,endDate_tz:X,timeLabels:Y,showDays:o?.showDays,showHours:o?.showHours,showMinutes:o?.showMinutes,showSeconds:o?.showSeconds,theme:x,onExpire:K,hideWhenExpired:!0,align:u==="center"?"center":"left",className:(0,l.cn)("mt-4",e?.countdown)})]}),(0,i.jsx)(B,{data:t,className:(0,l.cn)("hidden",{"laptop:flex":u==="left"},e?.button),onClick:f})]})});I.displayName="Title";var yt=(0,j.withLayout)(I);
|
|
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, Countdown, type HeadingProps } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitlePropsBase } from './types.js'\n\nexport interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {}\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u5224\u65AD content \u5B57\u6BB5\u662F\u5426\u6709\u5B9E\u9645\u53EF\u89C1\u5185\u5BB9\u3002\n * - string\uFF1A\u53BB\u6389\u7A7A\u767D\u540E\u975E\u7A7A\u5373\u6709\u5185\u5BB9\n * - SerializedEditorState\uFF1A\u68C0\u67E5 root.children \u5185\u662F\u5426\u5B58\u5728\u975E\u7A7A\u6587\u672C\u8282\u70B9\uFF0C\n * \u907F\u514D convertLexicalToHTML \u628A\u7A7A\u6587\u6863\u8F93\u51FA\u4E3A <div class=\"payload-richtext\"></div>\n */\nfunction hasVisibleContent(content: string | { root?: { children?: unknown[] } } | null | undefined): boolean {\n if (!content) return false\n if (typeof content === 'string') return content.trim().length > 0\n const children = content?.root?.children\n if (!Array.isArray(children) || children.length === 0) return false\n return children.some((node: any) => {\n const nodeChildren = node?.children\n if (!Array.isArray(nodeChildren) || nodeChildren.length === 0) return false\n return nodeChildren.some((child: any) => typeof child?.text === 'string' && child.text.length > 0)\n })\n}\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 = ({\n data,\n onClick,\n className,\n}: {\n data: TitleProps['data']\n onClick?: () => void\n className?: string\n}) => {\n const { theme = 'light', extensions, title, caption, align } = data\n if (!extensions?.textLink) return null\n\n const href = extensions?.link ? trackUrlRef(extensions.link, `${componentType}_${componentName}`) : undefined\n\n return (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n { 'text-[#080A0F]': theme === 'light' },\n { 'text-[#F5F6F7]': theme === 'dark' },\n { 'justify-center mt-4': align === 'center' },\n { 'mt-1 laptop:mt-0': align === 'left' },\n className\n )}\n {...(href ? { href } : {})}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n {...(onClick ? { onClick } : {})}\n >\n <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"lg-desktop:size-5 size-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z\"\n fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n className=\"transition-all duration-[0.4s]\"\n />\n </svg>\n </div>\n </a>\n )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n ({ data, className, classNames, as = 'h2', weight = 'bold', onButtonClick, ...rest }, ref) => {\n const {\n title,\n titleSize = 4,\n caption,\n subtitle,\n content,\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 // CMS field mapping: new targetDateTime > legacy targetDate\n const countdownEndDate = countdown?.targetDateTime || countdown?.targetDate || ''\n const countdownTz = countdown?.targetDateTime_tz\n // Label mapping: plural keys (Title CMS format) \u2192 atomic Countdown format\n const countdownLabels = countdown?.labels\n ? {\n day: countdown.labels.days || 'Day',\n hour: countdown.labels.hours || 'Hours',\n minute: countdown.labels.minutes || 'Mins',\n second: countdown.labels.seconds || 'Secs',\n }\n : undefined\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div\n id={extensions?.id}\n className={cn(\n 'titleBottom title-box flex items-end justify-between gap-2 pb-6',\n className,\n classNames?.wrapper\n )}\n {...rest}\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1', classNames?.container, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-left': align === 'left',\n })}\n >\n {(caption || title) && (\n <Heading\n ref={titleRef}\n as={as}\n size={titleSize as HeadingProps['size']}\n html={caption || title}\n weight={weight}\n className={cn(titleHeadingVariants({ theme }), classNames?.title)}\n />\n )}\n {subtitle && (\n <Text html={subtitle} as=\"div\" className={cn(subtitleVariants({ theme }), classNames?.subtitle)} />\n )}\n {hasVisibleContent(content) && (\n <Text\n html={content}\n as=\"div\"\n size={4}\n className={cn(\n 'title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]',\n classNames?.content\n )}\n />\n )}\n <TitleButton\n data={data}\n className={cn({ 'laptop:hidden': align === 'left' }, classNames?.button)}\n onClick={onButtonClick}\n />\n {showCountdown && countdown && isCountdownVisible && (\n <Countdown\n endDate={countdownEndDate}\n endDate_tz={countdownTz}\n timeLabels={countdownLabels}\n showDays={countdown?.showDays}\n showHours={countdown?.showHours}\n showMinutes={countdown?.showMinutes}\n showSeconds={countdown?.showSeconds}\n theme={theme}\n onExpire={handleCountdownEnd}\n hideWhenExpired={true}\n align={align === 'center' ? 'center' : 'left'}\n className={cn('mt-4', classNames?.countdown)}\n />\n )}\n </div>\n <TitleButton\n data={data}\n className={cn('hidden', { ['laptop:flex']: align === 'left' }, classNames?.button)}\n onClick={onButtonClick}\n />\n </div>\n )\n }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
-
"mappings": "olBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAoFI,IAAAI,EAAA,6BAnFJC,EAAwE,qBACxEC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAoB,oCACpBC,EAA4D,qCAC5DC,EAA2B,kCAI3BC,EAA4B,uCAC5BC,EAA0B,uCAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAQtB,SAASC,GAAkBC,EAAmF,CAC5G,GAAI,CAACA,EAAS,MAAO,GACrB,GAAI,OAAOA,GAAY,SAAU,OAAOA,EAAQ,KAAK,EAAE,OAAS,EAChE,MAAMC,EAAWD,GAAS,MAAM,SAChC,MAAI,CAAC,MAAM,QAAQC,CAAQ,GAAKA,EAAS,SAAW,EAAU,GACvDA,EAAS,KAAMC,GAAc,CAClC,MAAMC,EAAeD,GAAM,SAC3B,MAAI,CAAC,MAAM,QAAQC,CAAY,GAAKA,EAAa,SAAW,EAAU,GAC/DA,EAAa,KAAMC,GAAe,OAAOA,GAAO,MAAS,UAAYA,EAAM,KAAK,OAAS,CAAC,CACnG,CAAC,CACH,CAKA,MAAMC,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,CACnB,KAAAC,EACA,QAAAC,EACA,UAAAC,CACF,IAIM,CACJ,KAAM,CAAE,MAAAC,EAAQ,QAAS,WAAAC,EAAY,MAAAC,EAAO,QAAAC,EAAS,MAAAC,CAAM,EAAIP,EAC/D,GAAI,CAACI,GAAY,SAAU,OAAO,KAElC,MAAMI,EAAOJ,GAAY,QAAO,eAAYA,EAAW,KAAM,GAAGf,CAAa,IAAIC,CAAa,EAAE,EAAI,OAEpG,SACE,QAAC,KACC,aAAW,MACT,CAAE,YAAaa,IAAU,MAAO,EAChC,2LACA,CAAE,iBAAkBA,IAAU,OAAQ,EACtC,CAAE,iBAAkBA,IAAU,MAAO,EACrC,CAAE,sBAAuBI,IAAU,QAAS,EAC5C,CAAE,mBAAoBA,IAAU,MAAO,EACvCL,CACF,EACC,GAAIM,EAAO,CAAE,KAAAA,CAAK,EAAI,CAAC,EACxB,0BAAyB,GAAGnB,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAO,GACnD,GAAIL,EAAU,CAAE,QAAAA,CAAQ,EAAI,CAAC,EAE9B,oBAAC,OAAI,UAAU,6BAA8B,SAAAG,GAAY,SAAS,KAClE,OAAC,OAAI,UAAU,2BACb,mBAAC,OAAI,MAAM,6BAA6B,MAAM,OAAO,OAAO,OAAO,QAAQ,YAAY,KAAK,OAC1F,mBAAC,QACC,EAAE,gUACF,KAAMD,IAAU,OAAS,UAAY,UACrC,UAAU,iCACZ,EACF,EACF,GACF,CAEJ,EAEMM,EAAQ,EAAAC,QAAM,WAClB,CAAC,CAAE,KAAAV,EAAM,UAAAE,EAAW,WAAAS,EAAY,GAAAC,EAAK,KAAM,OAAAC,EAAS,OAAQ,cAAAC,EAAe,GAAGC,CAAK,EAAGC,IAAQ,
|
|
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", "componentType", "componentName", "hasVisibleContent", "content", "children", "node", "nodeChildren", "child", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "onClick", "className", "theme", "extensions", "title", "caption", "align", "href", "Title", "React", "classNames", "as", "weight", "onButtonClick", "rest", "ref", "titleSize", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "countdownEndDate", "countdownTz", "countdownLabels", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity"]
|
|
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, Countdown, type HeadingProps } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitlePropsBase } from './types.js'\n\nexport interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {}\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u5224\u65AD content \u5B57\u6BB5\u662F\u5426\u6709\u5B9E\u9645\u53EF\u89C1\u5185\u5BB9\u3002\n * - string\uFF1A\u53BB\u6389\u7A7A\u767D\u540E\u975E\u7A7A\u5373\u6709\u5185\u5BB9\n * - SerializedEditorState\uFF1A\u68C0\u67E5 root.children \u5185\u662F\u5426\u5B58\u5728\u975E\u7A7A\u6587\u672C\u8282\u70B9\uFF0C\n * \u907F\u514D convertLexicalToHTML \u628A\u7A7A\u6587\u6863\u8F93\u51FA\u4E3A <div class=\"payload-richtext\"></div>\n */\nfunction hasVisibleContent(content: string | { root?: { children?: unknown[] } } | null | undefined): boolean {\n if (!content) return false\n if (typeof content === 'string') return content.trim().length > 0\n const children = content?.root?.children\n if (!Array.isArray(children) || children.length === 0) return false\n return children.some((node: any) => {\n const nodeChildren = node?.children\n if (!Array.isArray(nodeChildren) || nodeChildren.length === 0) return false\n return nodeChildren.some((child: any) => typeof child?.text === 'string' && child.text.length > 0)\n })\n}\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 = ({\n data,\n onClick,\n className,\n}: {\n data: TitleProps['data']\n onClick?: () => void\n className?: string\n}) => {\n const { theme = 'light', extensions, title, caption, align } = data\n if (!extensions?.textLink) return null\n\n const href = extensions?.link ? trackUrlRef(extensions.link, `${componentType}_${componentName}`) : undefined\n\n return (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n { 'text-[#080A0F]': theme === 'light' },\n { 'text-[#F5F6F7]': theme === 'dark' },\n { 'justify-center mt-4': align === 'center' },\n { 'mt-1 laptop:mt-0': align === 'left' },\n className\n )}\n {...(href ? { href } : {})}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n {...(onClick ? { onClick } : {})}\n >\n <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"lg-desktop:size-5 size-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z\"\n fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n className=\"transition-all duration-[0.4s]\"\n />\n </svg>\n </div>\n </a>\n )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n ({ data, className, classNames, as = 'h2', weight = 'bold', onButtonClick, id, ...rest }, ref) => {\n const {\n title,\n titleSize = 4,\n caption,\n subtitle,\n content,\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 // CMS field mapping: new targetDateTime > legacy targetDate\n const countdownEndDate = countdown?.targetDateTime || countdown?.targetDate || ''\n const countdownTz = countdown?.targetDateTime_tz\n // Label mapping: plural keys (Title CMS format) \u2192 atomic Countdown format\n const countdownLabels = countdown?.labels\n ? {\n day: countdown.labels.days || 'Day',\n hour: countdown.labels.hours || 'Hours',\n minute: countdown.labels.minutes || 'Mins',\n second: countdown.labels.seconds || 'Secs',\n }\n : undefined\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div\n id={extensions?.id ? extensions?.id : id}\n className={cn(\n 'titleBottom title-box flex items-end justify-between gap-2 pb-6',\n className,\n classNames?.wrapper\n )}\n {...rest}\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1', classNames?.container, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-left': align === 'left',\n })}\n >\n {(caption || title) && (\n <Heading\n ref={titleRef}\n as={as}\n size={titleSize as HeadingProps['size']}\n html={caption || title}\n weight={weight}\n className={cn(titleHeadingVariants({ theme }), classNames?.title)}\n />\n )}\n {subtitle && (\n <Text html={subtitle} as=\"div\" className={cn(subtitleVariants({ theme }), classNames?.subtitle)} />\n )}\n {hasVisibleContent(content) && (\n <Text\n html={content}\n as=\"div\"\n size={4}\n className={cn(\n 'title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]',\n classNames?.content\n )}\n />\n )}\n <TitleButton\n data={data}\n className={cn({ 'laptop:hidden': align === 'left' }, classNames?.button)}\n onClick={onButtonClick}\n />\n {showCountdown && countdown && isCountdownVisible && (\n <Countdown\n endDate={countdownEndDate}\n endDate_tz={countdownTz}\n timeLabels={countdownLabels}\n showDays={countdown?.showDays}\n showHours={countdown?.showHours}\n showMinutes={countdown?.showMinutes}\n showSeconds={countdown?.showSeconds}\n theme={theme}\n onExpire={handleCountdownEnd}\n hideWhenExpired={true}\n align={align === 'center' ? 'center' : 'left'}\n className={cn('mt-4', classNames?.countdown)}\n />\n )}\n </div>\n <TitleButton\n data={data}\n className={cn('hidden', { ['laptop:flex']: align === 'left' }, classNames?.button)}\n onClick={onButtonClick}\n />\n </div>\n )\n }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
+
"mappings": "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",
|
|
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", "componentType", "componentName", "hasVisibleContent", "content", "children", "node", "nodeChildren", "child", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "onClick", "className", "theme", "extensions", "title", "caption", "align", "href", "Title", "React", "classNames", "as", "weight", "onButtonClick", "id", "rest", "ref", "titleSize", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "countdownEndDate", "countdownTz", "countdownLabels", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as i,jsxs as k}from"react/jsx-runtime";import
|
|
1
|
+
"use client";import{jsx as i,jsxs as k}from"react/jsx-runtime";import ot,{useEffect as at,useRef as g,useImperativeHandle as lt,useState as dt}from"react";import{gsap as y}from"gsap";import{SplitText as V}from"gsap/dist/SplitText";import{ScrollTrigger as A}from"gsap/dist/ScrollTrigger";import{cn as o}from"../../helpers/utils.js";import{cva as N}from"class-variance-authority";import{Heading as ct,Text as P,Countdown as ut}from"../../components/index.js";import{withLayout as mt}from"../../shared/Styles.js";import{trackUrlRef as pt}from"../../shared/trackUrlRef.js";import{useInView as ft}from"react-intersection-observer";const S="link",$="title";function ht(n){if(!n)return!1;if(typeof n=="string")return n.trim().length>0;const a=n?.root?.children;return!Array.isArray(a)||a.length===0?!1:a.some(e=>{const r=e?.children;return!Array.isArray(r)||r.length===0?!1:r.some(s=>typeof s?.text=="string"&&s.text.length>0)})}const gt=N("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),xt=N("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"}}),_=({data:n,onClick:a,className:e})=>{const{theme:r="light",extensions:s,title:m,caption:x,align:p}=n;if(!s?.textLink)return null;const f=s?.link?pt(s.link,`${S}_${$}`):void 0;return k("a",{className:o({"aiui-dark":r==="dark"},"hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":r==="light"},{"text-[#F5F6F7]":r==="dark"},{"justify-center mt-4":p==="center"},{"mt-1 laptop:mt-0":p==="left"},e),...f?{href:f}:{},"data-headless-type-name":`${S}#${$}`,"data-headless-title-desc-button":`${m}#${x}`,...a?{onClick:a}:{},children:[i("div",{className:"truncate whitespace-nowrap",children:s?.textLink}),i("div",{className:"lg-desktop:size-5 size-4",children:i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 16 16",fill:"none",children:i("path",{d:"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z",fill:r==="dark"?"#F5F6F7":"#080A0F",className:"transition-all duration-[0.4s]"})})})]})},B=ot.forwardRef(({data:n,className:a,classNames:e,as:r="h2",weight:s="bold",onButtonClick:m,id:x,...p},f)=>{const{title:T,titleSize:I=4,caption:F,subtitle:H,content:L,countdown:t,showCountdown:j=!1,theme:h="light",extensions:C,align:d="left"}=n,D=g(null),c=g(null),l=g(null),u=g(null),[O,U]=dt(!0),{ref:W,inView:M}=ft();lt(f,()=>D.current);const Z=()=>{U(!1)},q=t?.targetDateTime||t?.targetDate||"",G=t?.targetDateTime_tz,J=t?.labels?{day:t.labels.days||"Day",hour:t.labels.hours||"Hours",minute:t.labels.minutes||"Mins",second:t.labels.seconds||"Secs"}:void 0;return at(()=>{y.registerPlugin(V,A);function K(){if(!c.current)return;const Q=c.current?.clientHeight||80;l.current&&l.current.revert(),u.current&&u.current.kill(),l.current=new V(c.current,{type:"words",wordsClass:"word"});const w=l.current.words;y.set(w,{opacity:0}),u.current=A.create({trigger:c.current,start:"bottom bottom-=4%",end:`bottom+=${Q*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:X=>{const Y=X.progress,E=w.length||1,tt=.5,b=1/E,z=b*(1-tt),R=(E-1)*z+b,et=Math.min(1,R>0?Y/R:0);w.forEach((nt,rt)=>{const it=rt*z,st=b;let v=(et-it)/st;v=Math.max(0,Math.min(1,v)),y.set(nt,{opacity:v})})}})}return M&&K(),()=>{l.current&&l.current.revert(),u.current&&u.current.kill()}},[M]),k("div",{id:C?.id?C?.id:x,className:o("titleBottom title-box flex items-end justify-between gap-2 pb-6",a,e?.wrapper),...p,ref:D,children:[k("div",{ref:W,className:o("flex-1",e?.container,{"aiui-dark":h==="dark","text-center":d==="center","text-left":d==="left"}),children:[(F||T)&&i(ct,{ref:c,as:r,size:I,html:F||T,weight:s,className:o(gt({theme:h}),e?.title)}),H&&i(P,{html:H,as:"div",className:o(xt({theme:h}),e?.subtitle)}),ht(L)&&i(P,{html:L,as:"div",size:4,className:o("title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]",e?.content)}),i(_,{data:n,className:o({"laptop:hidden":d==="left"},e?.button),onClick:m}),j&&t&&O&&i(ut,{endDate:q,endDate_tz:G,timeLabels:J,showDays:t?.showDays,showHours:t?.showHours,showMinutes:t?.showMinutes,showSeconds:t?.showSeconds,theme:h,onExpire:Z,hideWhenExpired:!0,align:d==="center"?"center":"left",className:o("mt-4",e?.countdown)})]}),i(_,{data:n,className:o("hidden",{"laptop:flex":d==="left"},e?.button),onClick:m})]})});B.displayName="Title";var Dt=mt(B);export{Dt as default};
|
|
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, Countdown, type HeadingProps } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitlePropsBase } from './types.js'\n\nexport interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {}\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u5224\u65AD content \u5B57\u6BB5\u662F\u5426\u6709\u5B9E\u9645\u53EF\u89C1\u5185\u5BB9\u3002\n * - string\uFF1A\u53BB\u6389\u7A7A\u767D\u540E\u975E\u7A7A\u5373\u6709\u5185\u5BB9\n * - SerializedEditorState\uFF1A\u68C0\u67E5 root.children \u5185\u662F\u5426\u5B58\u5728\u975E\u7A7A\u6587\u672C\u8282\u70B9\uFF0C\n * \u907F\u514D convertLexicalToHTML \u628A\u7A7A\u6587\u6863\u8F93\u51FA\u4E3A <div class=\"payload-richtext\"></div>\n */\nfunction hasVisibleContent(content: string | { root?: { children?: unknown[] } } | null | undefined): boolean {\n if (!content) return false\n if (typeof content === 'string') return content.trim().length > 0\n const children = content?.root?.children\n if (!Array.isArray(children) || children.length === 0) return false\n return children.some((node: any) => {\n const nodeChildren = node?.children\n if (!Array.isArray(nodeChildren) || nodeChildren.length === 0) return false\n return nodeChildren.some((child: any) => typeof child?.text === 'string' && child.text.length > 0)\n })\n}\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 = ({\n data,\n onClick,\n className,\n}: {\n data: TitleProps['data']\n onClick?: () => void\n className?: string\n}) => {\n const { theme = 'light', extensions, title, caption, align } = data\n if (!extensions?.textLink) return null\n\n const href = extensions?.link ? trackUrlRef(extensions.link, `${componentType}_${componentName}`) : undefined\n\n return (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n { 'text-[#080A0F]': theme === 'light' },\n { 'text-[#F5F6F7]': theme === 'dark' },\n { 'justify-center mt-4': align === 'center' },\n { 'mt-1 laptop:mt-0': align === 'left' },\n className\n )}\n {...(href ? { href } : {})}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n {...(onClick ? { onClick } : {})}\n >\n <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"lg-desktop:size-5 size-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z\"\n fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n className=\"transition-all duration-[0.4s]\"\n />\n </svg>\n </div>\n </a>\n )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n ({ data, className, classNames, as = 'h2', weight = 'bold', onButtonClick, ...rest }, ref) => {\n const {\n title,\n titleSize = 4,\n caption,\n subtitle,\n content,\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 // CMS field mapping: new targetDateTime > legacy targetDate\n const countdownEndDate = countdown?.targetDateTime || countdown?.targetDate || ''\n const countdownTz = countdown?.targetDateTime_tz\n // Label mapping: plural keys (Title CMS format) \u2192 atomic Countdown format\n const countdownLabels = countdown?.labels\n ? {\n day: countdown.labels.days || 'Day',\n hour: countdown.labels.hours || 'Hours',\n minute: countdown.labels.minutes || 'Mins',\n second: countdown.labels.seconds || 'Secs',\n }\n : undefined\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div\n id={extensions?.id}\n className={cn(\n 'titleBottom title-box flex items-end justify-between gap-2 pb-6',\n className,\n classNames?.wrapper\n )}\n {...rest}\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1', classNames?.container, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-left': align === 'left',\n })}\n >\n {(caption || title) && (\n <Heading\n ref={titleRef}\n as={as}\n size={titleSize as HeadingProps['size']}\n html={caption || title}\n weight={weight}\n className={cn(titleHeadingVariants({ theme }), classNames?.title)}\n />\n )}\n {subtitle && (\n <Text html={subtitle} as=\"div\" className={cn(subtitleVariants({ theme }), classNames?.subtitle)} />\n )}\n {hasVisibleContent(content) && (\n <Text\n html={content}\n as=\"div\"\n size={4}\n className={cn(\n 'title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]',\n classNames?.content\n )}\n />\n )}\n <TitleButton\n data={data}\n className={cn({ 'laptop:hidden': align === 'left' }, classNames?.button)}\n onClick={onButtonClick}\n />\n {showCountdown && countdown && isCountdownVisible && (\n <Countdown\n endDate={countdownEndDate}\n endDate_tz={countdownTz}\n timeLabels={countdownLabels}\n showDays={countdown?.showDays}\n showHours={countdown?.showHours}\n showMinutes={countdown?.showMinutes}\n showSeconds={countdown?.showSeconds}\n theme={theme}\n onExpire={handleCountdownEnd}\n hideWhenExpired={true}\n align={align === 'center' ? 'center' : 'left'}\n className={cn('mt-4', classNames?.countdown)}\n />\n )}\n </div>\n <TitleButton\n data={data}\n className={cn('hidden', { ['laptop:flex']: align === 'left' }, classNames?.button)}\n onClick={onButtonClick}\n />\n </div>\n )\n }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
-
"mappings": "aAoFI,OAeE,OAAAA,EAfF,QAAAC,MAAA,oBAnFJ,OAAOC,IAAS,aAAAC,GAAW,UAAAC,EAAQ,uBAAAC,GAAqB,YAAAC,OAAgB,QACxE,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,OAAAC,MAAW,2BACpB,OAAS,WAAAC,GAAS,QAAAC,EAAM,aAAAC,OAAoC,4BAC5D,OAAS,cAAAC,OAAkB,yBAI3B,OAAS,eAAAC,OAAmB,8BAC5B,OAAS,aAAAC,OAAiB,8BAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAQtB,SAASC,GAAkBC,EAAmF,CAC5G,GAAI,CAACA,EAAS,MAAO,GACrB,GAAI,OAAOA,GAAY,SAAU,OAAOA,EAAQ,KAAK,EAAE,OAAS,EAChE,MAAMC,EAAWD,GAAS,MAAM,SAChC,MAAI,CAAC,MAAM,QAAQC,CAAQ,GAAKA,EAAS,SAAW,EAAU,GACvDA,EAAS,KAAMC,GAAc,CAClC,MAAMC,EAAeD,GAAM,SAC3B,MAAI,CAAC,MAAM,QAAQC,CAAY,GAAKA,EAAa,SAAW,EAAU,GAC/DA,EAAa,KAAMC,GAAe,OAAOA,GAAO,MAAS,UAAYA,EAAM,KAAK,OAAS,CAAC,CACnG,CAAC,CACH,CAKA,MAAMC,GAAuBf,EAAI,GAAI,CACnC,SAAU,CACR,MAAO,CACL,MAAO,iBACP,KAAM,gBACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CAAC,EAKKgB,GAAmBhB,EACvB,oHACA,CACE,SAAU,CACR,MAAO,CACL,MAAO,iBACP,KAAM,gBACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CACF,EAEMiB,EAAc,CAAC,CACnB,KAAAC,EACA,QAAAC,EACA,UAAAC,CACF,IAIM,CACJ,KAAM,CAAE,MAAAC,EAAQ,QAAS,WAAAC,EAAY,MAAAC,EAAO,QAAAC,EAAS,MAAAC,CAAM,EAAIP,EAC/D,GAAI,CAACI,GAAY,SAAU,OAAO,KAElC,MAAMI,EAAOJ,GAAY,KAAOjB,GAAYiB,EAAW,KAAM,GAAGf,CAAa,IAAIC,CAAa,EAAE,EAAI,OAEpG,OACElB,EAAC,KACC,UAAWS,EACT,CAAE,YAAasB,IAAU,MAAO,EAChC,2LACA,CAAE,iBAAkBA,IAAU,OAAQ,EACtC,CAAE,iBAAkBA,IAAU,MAAO,EACrC,CAAE,sBAAuBI,IAAU,QAAS,EAC5C,CAAE,mBAAoBA,IAAU,MAAO,EACvCL,CACF,EACC,GAAIM,EAAO,CAAE,KAAAA,CAAK,EAAI,CAAC,EACxB,0BAAyB,GAAGnB,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAO,GACnD,GAAIL,EAAU,CAAE,QAAAA,CAAQ,EAAI,CAAC,EAE9B,UAAA9B,EAAC,OAAI,UAAU,6BAA8B,SAAAiC,GAAY,SAAS,EAClEjC,EAAC,OAAI,UAAU,2BACb,SAAAA,EAAC,OAAI,MAAM,6BAA6B,MAAM,OAAO,OAAO,OAAO,QAAQ,YAAY,KAAK,OAC1F,SAAAA,EAAC,QACC,EAAE,gUACF,KAAMgC,IAAU,OAAS,UAAY,UACrC,UAAU,iCACZ,EACF,EACF,GACF,CAEJ,EAEMM,EAAQpC,GAAM,WAClB,CAAC,CAAE,KAAA2B,EAAM,UAAAE,EAAW,WAAAQ,EAAY,GAAAC,EAAK,KAAM,OAAAC,EAAS,OAAQ,cAAAC,EAAe,GAAGC,CAAK,EAAGC,IAAQ,
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useState", "gsap", "SplitText", "ScrollTrigger", "cn", "cva", "Heading", "Text", "Countdown", "withLayout", "trackUrlRef", "useInView", "componentType", "componentName", "hasVisibleContent", "content", "children", "node", "nodeChildren", "child", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "onClick", "className", "theme", "extensions", "title", "caption", "align", "href", "Title", "classNames", "as", "weight", "onButtonClick", "rest", "ref", "titleSize", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "countdownEndDate", "countdownTz", "countdownLabels", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
|
|
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, Countdown, type HeadingProps } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitlePropsBase } from './types.js'\n\nexport interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {}\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u5224\u65AD content \u5B57\u6BB5\u662F\u5426\u6709\u5B9E\u9645\u53EF\u89C1\u5185\u5BB9\u3002\n * - string\uFF1A\u53BB\u6389\u7A7A\u767D\u540E\u975E\u7A7A\u5373\u6709\u5185\u5BB9\n * - SerializedEditorState\uFF1A\u68C0\u67E5 root.children \u5185\u662F\u5426\u5B58\u5728\u975E\u7A7A\u6587\u672C\u8282\u70B9\uFF0C\n * \u907F\u514D convertLexicalToHTML \u628A\u7A7A\u6587\u6863\u8F93\u51FA\u4E3A <div class=\"payload-richtext\"></div>\n */\nfunction hasVisibleContent(content: string | { root?: { children?: unknown[] } } | null | undefined): boolean {\n if (!content) return false\n if (typeof content === 'string') return content.trim().length > 0\n const children = content?.root?.children\n if (!Array.isArray(children) || children.length === 0) return false\n return children.some((node: any) => {\n const nodeChildren = node?.children\n if (!Array.isArray(nodeChildren) || nodeChildren.length === 0) return false\n return nodeChildren.some((child: any) => typeof child?.text === 'string' && child.text.length > 0)\n })\n}\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 = ({\n data,\n onClick,\n className,\n}: {\n data: TitleProps['data']\n onClick?: () => void\n className?: string\n}) => {\n const { theme = 'light', extensions, title, caption, align } = data\n if (!extensions?.textLink) return null\n\n const href = extensions?.link ? trackUrlRef(extensions.link, `${componentType}_${componentName}`) : undefined\n\n return (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n { 'text-[#080A0F]': theme === 'light' },\n { 'text-[#F5F6F7]': theme === 'dark' },\n { 'justify-center mt-4': align === 'center' },\n { 'mt-1 laptop:mt-0': align === 'left' },\n className\n )}\n {...(href ? { href } : {})}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n {...(onClick ? { onClick } : {})}\n >\n <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"lg-desktop:size-5 size-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z\"\n fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n className=\"transition-all duration-[0.4s]\"\n />\n </svg>\n </div>\n </a>\n )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n ({ data, className, classNames, as = 'h2', weight = 'bold', onButtonClick, id, ...rest }, ref) => {\n const {\n title,\n titleSize = 4,\n caption,\n subtitle,\n content,\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 // CMS field mapping: new targetDateTime > legacy targetDate\n const countdownEndDate = countdown?.targetDateTime || countdown?.targetDate || ''\n const countdownTz = countdown?.targetDateTime_tz\n // Label mapping: plural keys (Title CMS format) \u2192 atomic Countdown format\n const countdownLabels = countdown?.labels\n ? {\n day: countdown.labels.days || 'Day',\n hour: countdown.labels.hours || 'Hours',\n minute: countdown.labels.minutes || 'Mins',\n second: countdown.labels.seconds || 'Secs',\n }\n : undefined\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div\n id={extensions?.id ? extensions?.id : id}\n className={cn(\n 'titleBottom title-box flex items-end justify-between gap-2 pb-6',\n className,\n classNames?.wrapper\n )}\n {...rest}\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1', classNames?.container, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-left': align === 'left',\n })}\n >\n {(caption || title) && (\n <Heading\n ref={titleRef}\n as={as}\n size={titleSize as HeadingProps['size']}\n html={caption || title}\n weight={weight}\n className={cn(titleHeadingVariants({ theme }), classNames?.title)}\n />\n )}\n {subtitle && (\n <Text html={subtitle} as=\"div\" className={cn(subtitleVariants({ theme }), classNames?.subtitle)} />\n )}\n {hasVisibleContent(content) && (\n <Text\n html={content}\n as=\"div\"\n size={4}\n className={cn(\n 'title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]',\n classNames?.content\n )}\n />\n )}\n <TitleButton\n data={data}\n className={cn({ 'laptop:hidden': align === 'left' }, classNames?.button)}\n onClick={onButtonClick}\n />\n {showCountdown && countdown && isCountdownVisible && (\n <Countdown\n endDate={countdownEndDate}\n endDate_tz={countdownTz}\n timeLabels={countdownLabels}\n showDays={countdown?.showDays}\n showHours={countdown?.showHours}\n showMinutes={countdown?.showMinutes}\n showSeconds={countdown?.showSeconds}\n theme={theme}\n onExpire={handleCountdownEnd}\n hideWhenExpired={true}\n align={align === 'center' ? 'center' : 'left'}\n className={cn('mt-4', classNames?.countdown)}\n />\n )}\n </div>\n <TitleButton\n data={data}\n className={cn('hidden', { ['laptop:flex']: align === 'left' }, classNames?.button)}\n onClick={onButtonClick}\n />\n </div>\n )\n }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useState", "gsap", "SplitText", "ScrollTrigger", "cn", "cva", "Heading", "Text", "Countdown", "withLayout", "trackUrlRef", "useInView", "componentType", "componentName", "hasVisibleContent", "content", "children", "node", "nodeChildren", "child", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "onClick", "className", "theme", "extensions", "title", "caption", "align", "href", "Title", "classNames", "as", "weight", "onButtonClick", "id", "rest", "ref", "titleSize", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "countdownEndDate", "countdownTz", "countdownLabels", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
|
|
7
7
|
}
|