@anker-in/headless-ui 1.3.51 → 1.3.53
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/ImageTextOverlay/index.js +1 -1
- package/dist/cjs/biz-components/ImageTextOverlay/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +2 -2
- package/dist/esm/biz-components/ImageTextOverlay/index.js +1 -1
- package/dist/esm/biz-components/ImageTextOverlay/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var H=Object.create;var v=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var l in t)v(e,l,{get:t[l],enumerable:!0})},S=(e,t,l,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of F(t))!Q.call(e,o)&&o!==l&&v(e,o,{get:()=>t[o],enumerable:!(s=V(t,o))||s.enumerable});return e};var N=(e,t,l)=>(l=e!=null?H(G(e)):{},S(t||!e||!e.__esModule?v(l,"default",{value:e,enumerable:!0}):l,e)),K=e=>S(v({},"__esModule",{value:!0}),e);var ae={};q(ae,{default:()=>te});module.exports=K(ae);var a=require("react/jsx-runtime"),T=N(require("react")),n=require("react"),r=require("../../helpers/utils.js"),P=require("../../components/heading.js"),D=require("../../components/text.js"),_=N(require("../../components/picture.js")),w=require("../../hooks/useExposure.js"),A=require("../../shared/Styles.js"),z=require("../../shared/trackUrlRef.js"),L=require("../../helpers/utils.js"),B=require("../AiuiProvider/index.js"),E=require("react-responsive"),b=require("swiper/react"),M=require("swiper/modules"),re=require("swiper/css"),oe=require("swiper/css/pagination");const U="content",x="image_text_overlay",I="image",$="image-text-overlay-mobile-pagination",y={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},W=e=>{if(!e)return"";const t=[];return e.lgDesktop?.url&&t.push(`${e.lgDesktop.url}`),e.desktop?.url&&t.push(`${e.desktop.url} ${y.desktop}`),e.laptop?.url&&t.push(`${e.laptop.url} ${y.laptop}`),e.tablet?.url&&t.push(`${e.tablet.url} ${y.tablet}`),e.default?.url&&t.push(`${e.default.url} ${y.default}`),t.join(", ")},J=e=>e&&(e.default?.alt||e.tablet?.alt||e.laptop?.alt||e.desktop?.alt||e.lgDesktop?.alt)||"",X=(e,t)=>{const l=[];for(let s=0;s<e.length;s+=t)l.push(e.slice(s,s+t));return l},Y=e=>{switch(e){case 2:return"grid-cols-1 tablet:grid-cols-2";case 3:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3";case 4:return"grid-cols-1 tablet:grid-cols-2";case 5:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6";case 6:return"grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3";default:return e<=1?"grid-cols-1":"grid-cols-1 laptop:grid-cols-3"}},Z=(e,t)=>t===5?e<2?"laptop:col-span-3":"laptop:col-span-2":"",ee=(e,t)=>{switch(e){case 2:case 4:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]";case 3:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";case 5:return t<2?"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]":"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";case 6:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";default:return e<=1?"aspect-[358/240]":"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]"}},R=({item:e,index:t,count:l,classNames:s})=>{const o=W(e.backgroundImage),d=J(e.backgroundImage),p=Z(t,l),m=T.useRef(null),{locale:k="us",pageHandle:g}=(0,B.useAiuiContext)();(0,w.useExposure)(m,{componentType:I,componentName:x,position:t+1,componentTitle:e.title,componentDescription:e.subtitle});const i=e.link?(0,L.getLocalizedPath)(e.link,k):void 0,f=i?(0,z.trackUrlRef)(i,`${g??""}_${I}_${x}`):void 0,h=`${e.title}#${e.subtitle||""}#${e.title}`,u=ee(l,t);return(0,a.jsxs)("div",{ref:m,className:(0,r.cn)("image-text-overlay-card rounded-card",{"aiui-dark":e.theme==="dark"},"desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4",u,p,s?.card),children:[f&&(0,a.jsx)("a",{href:f,className:"absolute inset-0 z-20","aria-label":e.title,"data-headless-type-name":`${I}#${x}`,"data-headless-title-desc-button":h}),e.backgroundImage?.isShowVideo?(0,a.jsxs)(a.Fragment,{children:[e.backgroundImage?.mobileVideo&&(0,a.jsx)("video",{className:(0,r.cn)("image-text-overlay-card-image","laptop:hidden absolute inset-0 size-full object-cover",s?.cardImage),src:e.backgroundImage.mobileVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),e.backgroundImage?.desktopVideo&&(0,a.jsx)("video",{className:(0,r.cn)("image-text-overlay-card-image","laptop:block absolute inset-0 hidden size-full object-cover",s?.cardImage),src:e.backgroundImage.desktopVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0})]}):o&&(0,a.jsx)(_.default,{source:o,alt:d||e.title,className:(0,r.cn)("image-text-overlay-card-image","absolute inset-0 size-full",s?.cardImage),imgClassName:"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105"}),(0,a.jsxs)("div",{className:(0,r.cn)("image-text-overlay-card-content","relative z-10 flex w-full flex-col gap-1",s?.cardContent),children:[(0,a.jsx)(P.Heading,{as:"h4",size:2,weight:"bold",html:e.title,className:(0,r.cn)("image-text-overlay-card-title text-info-primary line-clamp-1","w-full leading-[1.2] tracking-[-0.04em]","desktop:text-xl lg-desktop:text-2xl text-lg",s?.cardTitle)}),e.subtitle&&(0,a.jsx)(D.Text,{as:"p",size:"none",weight:"bold",html:e.subtitle,className:(0,r.cn)("image-text-overlay-card-subtitle text-info-primary line-clamp-1","w-full truncate leading-[1.4] tracking-[-0.02em]","lg-desktop:text-base text-sm",l<=3&&"lg-desktop:text-lg",s?.cardSubtitle)})]})]})},C=(0,n.forwardRef)(({data:e,className:t,classNames:l={},...s},o)=>{const d=T.useRef(null),{items:p=[]}=e,[m,k]=(0,n.useState)(!1),g=(0,E.useMediaQuery)({query:"(max-width: 767px)"});if((0,n.useEffect)(()=>{k(g)},[g]),(0,w.useExposure)(d,{componentType:U,componentName:x}),T.useImperativeHandle(o,()=>d.current),!p.length)return null;const i=p.length,f=i>3&&m,h=X(p,3);return(0,a.jsx)("div",{ref:d,className:(0,r.cn)("image-text-overlay-root",t,l.root),"data-ui-component-id":"ImageTextOverlay",...s,children:f?(0,a.jsxs)("div",{className:"image-text-overlay-mobile-swiper relative pb-8",children:[(0,a.jsx)(b.Swiper,{className:"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch",modules:[M.Pagination],slidesPerView:1,pagination:{clickable:!0,el:`.${$}`,bulletClass:"image-text-overlay-bullet",bulletActiveClass:"image-text-overlay-bullet-active"},spaceBetween:16,children:h.map((u,c)=>(0,a.jsx)(b.SwiperSlide,{className:"!h-auto",children:(0,a.jsx)("div",{className:"flex flex-col gap-4",children:u.map((j,O)=>(0,a.jsx)(R,{item:j,index:c*3+O,count:i,classNames:l},c*3+O))})},c))}),(0,a.jsx)("div",{className:"absolute inset-x-0 bottom-0 z-10 flex justify-center",children:(0,a.jsx)("div",{className:(0,r.cn)($,"flex items-center justify-center gap-2 text-center","[&_.swiper-pagination-bullet]:m-0","[&_.swiper-pagination-bullet]:shrink-0","[&_.swiper-pagination-bullet]:opacity-100")})}),(0,a.jsx)("style",{children:`
|
|
2
2
|
.image-text-overlay-bullet {
|
|
3
3
|
display: inline-block;
|
|
4
4
|
width: 8px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ImageTextOverlay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Picture from '../../components/picture.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n} from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination'\n\nexport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n}\n\nconst componentType = 'content'\nconst componentName = 'image_text_overlay'\nconst imageComponentType = 'image'\nconst MOBILE_SWIPER_PAGINATION_CLASS = 'image-text-overlay-mobile-pagination'\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5927\u5230\u5C0F\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"lgDesktopUrl, desktopUrl 1919, laptopUrl 1439, tabletUrl 1024, defaultUrl 767\"\n */\nconst buildResponsiveSource = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF08\u65E0\u65AD\u70B9\u503C\uFF09\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getBackgroundAlt = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n// ============================================================================\n// \u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D \u2014\u2014 \u6839\u636E items \u6570\u91CF\u52A8\u6001\u51B3\u5B9A\u7F51\u683C\u5217\u6570\n//\n// Figma \u8BBE\u8BA1\u89C4\u8303\u603B\u7ED3:\n//\n// | Count | <768 (mobile) | 768-1024 (tablet) | 1025-1440 (laptop) | 1441-1920 (desktop) | \u22651921 (lg-desktop) |\n// |-------|---------------|--------------------|--------------------|---------------------|--------------------|\n// | 2 | 1col | 2col | 2col | 2col | 2col |\n// | 3 | 1col | 2col (2+1) | 3col | 3col | 3col |\n// | 4 | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) |\n// | 5 | 2col (3 rows) | 2col (3 rows) | 2+3 (5col flex) | 2+3 (5col flex) | 2+3 (5col flex) |\n// | 6 | 2col (3 rows) | 2col (3 rows) | 3col (2 rows) | 3col (2 rows) | 3col (2 rows) |\n//\n// ============================================================================\n\n/**\n * \u5C06\u6570\u7EC4\u6309\u6307\u5B9A\u5927\u5C0F\u5206\u7EC4\n */\nconst chunkArray = <T,>(arr: T[], size: number): T[][] => {\n const chunks: T[][] = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\nconst getGridClasses = (count: number): string => {\n switch (count) {\n case 2:\n // mobile: 1col, tablet+: 2col\n return 'grid-cols-1 tablet:grid-cols-2'\n case 3:\n // mobile: 1col, tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3'\n case 4:\n // mobile: 2col, tablet+: 2col (uniform)\n return 'grid-cols-1 tablet:grid-cols-2'\n case 5:\n // mobile/tablet: 2col grid, laptop+: use flex layout instead (2+3 pattern)\n // We handle laptop+ separately via flex, grid for mobile/tablet only\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6'\n case 6:\n // mobile/tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3'\n default:\n if (count <= 1) return 'grid-cols-1'\n // fallback: 2col mobile, 3col laptop+\n return 'grid-cols-1 laptop:grid-cols-3'\n }\n}\n\n/**\n * \u83B7\u53D6\u5355\u4E2A item \u7684 span \u7C7B\u540D (\u4EC5\u7528\u4E8E count=3 tablet \u548C count=5 laptop+)\n */\nconst getItemSpanClasses = (index: number, count: number): string => {\n if (count === 5) {\n // laptop+: \u7B2C1\u884C 2 items \u5404 span 3, \u7B2C2\u884C 3 items \u5404 span 2\n if (index < 2) return 'laptop:col-span-3'\n return 'laptop:col-span-2'\n }\n return ''\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u5BBD\u9AD8\u6BD4\u7C7B\u540D\n * \u6839\u636E items \u6570\u91CF\u548C\u65AD\u70B9\u52A8\u6001\u8BA1\u7B97\uFF0C\u786E\u4FDD\u56FE\u7247\u4E0D\u88AB\u622A\u65AD\n */\nconst getAspectRatioClasses = (count: number, index: number): string => {\n switch (count) {\n case 2:\n case 4:\n // \u59CB\u7EC8 2 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n case 3:\n // tablet 2 \u5217, laptop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 5:\n // tablet 2 \u5217, laptop+ \u7279\u6B8A flex (\u9996\u884C 2 \u4E2A\u5404\u5360 50%, \u6B21\u884C 3 \u4E2A\u5404\u5360 33%)\n // \u7B2C\u4E00\u884C\uFF08index 0-1\uFF09\u7528 2 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u7B2C\u4E8C\u884C\uFF08index 2-4\uFF09\u7528 3 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u786E\u4FDD\u9AD8\u5EA6\u4E00\u81F4\n if (index < 2) {\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 6:\n // tablet/laptop 2 \u5217, desktop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n default:\n if (count <= 1) return 'aspect-[358/240]'\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n}\n\n/**\n * ImageTextOverlayCard - \u5355\u4E2A\u56FE\u6587\u53E0\u52A0\u5361\u7247\n */\nconst ImageTextOverlayCard: React.FC<{\n item: ImageTextOverlayItem\n index: number\n count: number\n classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>\n}> = ({ item, index, count, classNames }) => {\n const responsiveSource = buildResponsiveSource(item.backgroundImage)\n const defaultAlt = getBackgroundAlt(item.backgroundImage)\n const spanClasses = getItemSpanClasses(index, count)\n const imageRef = React.useRef<HTMLDivElement>(null)\n const { locale = 'us', pageHandle } = useAiuiContext()\n\n useExposure(imageRef, {\n componentType: imageComponentType,\n componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.subtitle,\n })\n\n const localizedLink = item.link ? getLocalizedPath(item.link, locale) : undefined\n const trackedLink = localizedLink\n ? trackUrlRef(localizedLink, `${pageHandle ?? ''}_${imageComponentType}_${componentName}`)\n : undefined\n const titleDescButton = `${item.title}#${item.subtitle || ''}#${item.title}`\n\n const aspectRatioClasses = getAspectRatioClasses(count, index)\n\n return (\n <div\n ref={imageRef}\n className={cn(\n 'image-text-overlay-card rounded-card',\n { 'aiui-dark': item.theme === 'dark' },\n 'desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4',\n aspectRatioClasses,\n spanClasses,\n classNames?.card\n )}\n >\n {/* \u6574\u5361\u94FE\u63A5 */}\n {trackedLink && (\n <a\n href={trackedLink}\n className=\"absolute inset-0 z-20\"\n aria-label={item.title}\n data-headless-type-name={`${imageComponentType}#${componentName}`}\n data-headless-title-desc-button={titleDescButton}\n />\n )}\n\n {/* \u80CC\u666F\u5A92\u4F53\uFF1A\u89C6\u9891\u6216\u56FE\u7247 */}\n {item.backgroundImage?.isShowVideo ? (\n <>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 (<1025px) */}\n {item.backgroundImage?.mobileVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:hidden absolute inset-0 size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.mobileVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {/* \u684C\u9762\u7AEF\u89C6\u9891 (>=1025px) */}\n {item.backgroundImage?.desktopVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:block absolute inset-0 hidden size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.desktopVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n </>\n ) : (\n responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || item.title}\n className={cn('image-text-overlay-card-image', 'absolute inset-0 size-full', classNames?.cardImage)}\n imgClassName=\"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105\"\n />\n )\n )}\n\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'image-text-overlay-card-content',\n 'relative z-10 flex w-full flex-col gap-1',\n classNames?.cardContent\n )}\n >\n <Heading\n as=\"h4\"\n size={2}\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-title text-info-primary line-clamp-1',\n 'w-full leading-[1.2] tracking-[-0.04em]',\n // \u5B57\u53F7: mobile/tablet/laptop 18px, desktop 20px, lg-desktop 24px\n 'desktop:text-xl lg-desktop:text-2xl text-lg',\n classNames?.cardTitle\n )}\n >\n {item.title}\n </Heading>\n\n {item.subtitle && (\n <Text\n as=\"p\"\n size=\"none\"\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-subtitle text-info-primary line-clamp-1',\n 'w-full truncate leading-[1.4] tracking-[-0.02em]',\n // \u5B57\u53F7: mobile/tablet/laptop 14px, desktop 14px, lg-desktop 18px (count<=3) or 16px (count>3)\n 'lg-desktop:text-base text-sm',\n count <= 3 && 'lg-desktop:text-lg',\n classNames?.cardSubtitle\n )}\n >\n {item.subtitle}\n </Text>\n )}\n </div>\n </div>\n )\n}\n\n/**\n * ImageTextOverlay - \u56FE\u6587\u53E0\u52A0\u7EC4\u4EF6\n *\n * @description \u4EE5\u80CC\u666F\u56FE\u4E3A\u4E3B\u7684\u5361\u7247\u5E03\u5C40\u7EC4\u4EF6\uFF0C\u6807\u9898\u548C\u526F\u6807\u9898\u53E0\u52A0\u663E\u793A\u5728\u56FE\u7247\u5E95\u90E8\u3002\n * \u652F\u6301 2-6 \u4E2A items \u7684\u81EA\u52A8\u54CD\u5E94\u5F0F\u7F51\u683C\u5E03\u5C40\uFF0C\u6BCF\u4E2A item \u7684 backgroundImage\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9 (default/tablet/laptop/desktop/lgDesktop)\u3002\n *\n * @example\n * ```tsx\n * <ImageTextOverlay\n * data={{\n * items: [\n * {\n * backgroundImage: {\n * default: { url: '/bg-mobile.jpg', alt: 'feature' },\n * tablet: { url: '/bg-tablet.jpg', alt: 'feature' },\n * laptop: { url: '/bg-laptop.jpg', alt: 'feature' },\n * desktop: { url: '/bg-desktop.jpg', alt: 'feature' },\n * lgDesktop: { url: '/bg-xl.jpg', alt: 'feature' },\n * },\n * title: '300+ AI brainwave audios',\n * subtitle: 'Charge in a Flash, Share in a Dash',\n * },\n * {\n * backgroundImage: { default: { url: '/bg2.jpg', alt: '' } },\n * title: '20+ white noise sounds',\n * subtitle: 'Power to Drive Your Prime',\n * },\n * ],\n * theme: 'dark',\n * }}\n * />\n * ```\n */\nconst ImageTextOverlay = forwardRef<HTMLDivElement, ImageTextOverlayProps>(\n ({ data, className, classNames = {}, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const { items = [] } = data\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 767px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n useExposure(boxRef, {\n componentType,\n componentName,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n if (!items.length) return null\n\n const count = items.length\n const useSwiper = count > 3 && isMobile\n const chunkedItems = chunkArray(items, 3)\n\n return (\n <div\n ref={boxRef}\n className={cn('image-text-overlay-root', className, classNames.root)}\n data-ui-component-id=\"ImageTextOverlay\"\n {...props}\n >\n {useSwiper ? (\n <div className=\"image-text-overlay-mobile-swiper relative pb-8\">\n <Swiper\n className=\"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n modules={[Pagination]}\n slidesPerView={1}\n pagination={{\n clickable: true,\n el: `.${MOBILE_SWIPER_PAGINATION_CLASS}`,\n bulletClass: 'image-text-overlay-bullet',\n bulletActiveClass: 'image-text-overlay-bullet-active',\n }}\n spaceBetween={16}\n >\n {chunkedItems.map((group, gIndex) => (\n <SwiperSlide key={gIndex} className=\"!h-auto\">\n <div className=\"flex flex-col gap-4\">\n {group.map((item, index) => (\n <ImageTextOverlayCard\n key={gIndex * 3 + index}\n item={item}\n index={gIndex * 3 + index}\n count={count}\n classNames={classNames}\n />\n ))}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"absolute inset-x-0 bottom-0 z-10 flex justify-center\">\n <div\n className={cn(\n MOBILE_SWIPER_PAGINATION_CLASS,\n 'flex items-center justify-center gap-2 text-center',\n '[&_.swiper-pagination-bullet]:m-0',\n '[&_.swiper-pagination-bullet]:shrink-0',\n '[&_.swiper-pagination-bullet]:opacity-100'\n )}\n />\n </div>\n <style>{`\n .image-text-overlay-bullet {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 9999px;\n background: #767880;\n transition: all 0.3s ease;\n }\n\n .image-text-overlay-bullet-active {\n width: 32px;\n height: 8px;\n border-radius: 9999px;\n background: #080A0F;\n }\n `}</style>\n </div>\n ) : (\n <div className={cn('image-text-overlay-grid', 'grid gap-4', getGridClasses(count), classNames.grid)}>\n {items.map((item, index) => (\n <ImageTextOverlayCard key={index} item={item} index={index} count={count} classNames={classNames} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nImageTextOverlay.displayName = 'ImageTextOverlay'\n\nexport default withLayout(ImageTextOverlay)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Picture from '../../components/picture.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n} from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination'\n\nexport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n}\n\nconst componentType = 'content'\nconst componentName = 'image_text_overlay'\nconst imageComponentType = 'image'\nconst MOBILE_SWIPER_PAGINATION_CLASS = 'image-text-overlay-mobile-pagination'\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5927\u5230\u5C0F\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"lgDesktopUrl, desktopUrl 1919, laptopUrl 1439, tabletUrl 1024, defaultUrl 767\"\n */\nconst buildResponsiveSource = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF08\u65E0\u65AD\u70B9\u503C\uFF09\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getBackgroundAlt = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n// ============================================================================\n// \u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D \u2014\u2014 \u6839\u636E items \u6570\u91CF\u52A8\u6001\u51B3\u5B9A\u7F51\u683C\u5217\u6570\n//\n// Figma \u8BBE\u8BA1\u89C4\u8303\u603B\u7ED3:\n//\n// | Count | <768 (mobile) | 768-1024 (tablet) | 1025-1440 (laptop) | 1441-1920 (desktop) | \u22651921 (lg-desktop) |\n// |-------|---------------|--------------------|--------------------|---------------------|--------------------|\n// | 2 | 1col | 2col | 2col | 2col | 2col |\n// | 3 | 1col | 2col (2+1) | 3col | 3col | 3col |\n// | 4 | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) |\n// | 5 | 2col (3 rows) | 2col (3 rows) | 2+3 (5col flex) | 2+3 (5col flex) | 2+3 (5col flex) |\n// | 6 | 2col (3 rows) | 2col (3 rows) | 3col (2 rows) | 3col (2 rows) | 3col (2 rows) |\n//\n// ============================================================================\n\n/**\n * \u5C06\u6570\u7EC4\u6309\u6307\u5B9A\u5927\u5C0F\u5206\u7EC4\n */\nconst chunkArray = <T,>(arr: T[], size: number): T[][] => {\n const chunks: T[][] = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\nconst getGridClasses = (count: number): string => {\n switch (count) {\n case 2:\n // mobile: 1col, tablet+: 2col\n return 'grid-cols-1 tablet:grid-cols-2'\n case 3:\n // mobile: 1col, tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3'\n case 4:\n // mobile: 2col, tablet+: 2col (uniform)\n return 'grid-cols-1 tablet:grid-cols-2'\n case 5:\n // mobile/tablet: 2col grid, laptop+: use flex layout instead (2+3 pattern)\n // We handle laptop+ separately via flex, grid for mobile/tablet only\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6'\n case 6:\n // mobile/tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3'\n default:\n if (count <= 1) return 'grid-cols-1'\n // fallback: 2col mobile, 3col laptop+\n return 'grid-cols-1 laptop:grid-cols-3'\n }\n}\n\n/**\n * \u83B7\u53D6\u5355\u4E2A item \u7684 span \u7C7B\u540D (\u4EC5\u7528\u4E8E count=3 tablet \u548C count=5 laptop+)\n */\nconst getItemSpanClasses = (index: number, count: number): string => {\n if (count === 5) {\n // laptop+: \u7B2C1\u884C 2 items \u5404 span 3, \u7B2C2\u884C 3 items \u5404 span 2\n if (index < 2) return 'laptop:col-span-3'\n return 'laptop:col-span-2'\n }\n return ''\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u5BBD\u9AD8\u6BD4\u7C7B\u540D\n * \u6839\u636E items \u6570\u91CF\u548C\u65AD\u70B9\u52A8\u6001\u8BA1\u7B97\uFF0C\u786E\u4FDD\u56FE\u7247\u4E0D\u88AB\u622A\u65AD\n */\nconst getAspectRatioClasses = (count: number, index: number): string => {\n switch (count) {\n case 2:\n case 4:\n // \u59CB\u7EC8 2 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n case 3:\n // tablet 2 \u5217, laptop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 5:\n // tablet 2 \u5217, laptop+ \u7279\u6B8A flex (\u9996\u884C 2 \u4E2A\u5404\u5360 50%, \u6B21\u884C 3 \u4E2A\u5404\u5360 33%)\n // \u7B2C\u4E00\u884C\uFF08index 0-1\uFF09\u7528 2 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u7B2C\u4E8C\u884C\uFF08index 2-4\uFF09\u7528 3 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u786E\u4FDD\u9AD8\u5EA6\u4E00\u81F4\n if (index < 2) {\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 6:\n // tablet/laptop 2 \u5217, desktop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n default:\n if (count <= 1) return 'aspect-[358/240]'\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n}\n\n/**\n * ImageTextOverlayCard - \u5355\u4E2A\u56FE\u6587\u53E0\u52A0\u5361\u7247\n */\nconst ImageTextOverlayCard: React.FC<{\n item: ImageTextOverlayItem\n index: number\n count: number\n classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>\n}> = ({ item, index, count, classNames }) => {\n const responsiveSource = buildResponsiveSource(item.backgroundImage)\n const defaultAlt = getBackgroundAlt(item.backgroundImage)\n const spanClasses = getItemSpanClasses(index, count)\n const imageRef = React.useRef<HTMLDivElement>(null)\n const { locale = 'us', pageHandle } = useAiuiContext()\n\n useExposure(imageRef, {\n componentType: imageComponentType,\n componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.subtitle,\n })\n\n const localizedLink = item.link ? getLocalizedPath(item.link, locale) : undefined\n const trackedLink = localizedLink\n ? trackUrlRef(localizedLink, `${pageHandle ?? ''}_${imageComponentType}_${componentName}`)\n : undefined\n const titleDescButton = `${item.title}#${item.subtitle || ''}#${item.title}`\n\n const aspectRatioClasses = getAspectRatioClasses(count, index)\n\n return (\n <div\n ref={imageRef}\n className={cn(\n 'image-text-overlay-card rounded-card',\n { 'aiui-dark': item.theme === 'dark' },\n 'desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4',\n aspectRatioClasses,\n spanClasses,\n classNames?.card\n )}\n >\n {/* \u6574\u5361\u94FE\u63A5 */}\n {trackedLink && (\n <a\n href={trackedLink}\n className=\"absolute inset-0 z-20\"\n aria-label={item.title}\n data-headless-type-name={`${imageComponentType}#${componentName}`}\n data-headless-title-desc-button={titleDescButton}\n />\n )}\n\n {/* \u80CC\u666F\u5A92\u4F53\uFF1A\u89C6\u9891\u6216\u56FE\u7247 */}\n {item.backgroundImage?.isShowVideo ? (\n <>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 (<1025px) */}\n {item.backgroundImage?.mobileVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:hidden absolute inset-0 size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.mobileVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {/* \u684C\u9762\u7AEF\u89C6\u9891 (>=1025px) */}\n {item.backgroundImage?.desktopVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:block absolute inset-0 hidden size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.desktopVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n </>\n ) : (\n responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || item.title}\n className={cn('image-text-overlay-card-image', 'absolute inset-0 size-full', classNames?.cardImage)}\n imgClassName=\"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105\"\n />\n )\n )}\n\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'image-text-overlay-card-content',\n 'relative z-10 flex w-full flex-col gap-1',\n classNames?.cardContent\n )}\n >\n <Heading\n as=\"h4\"\n size={2}\n weight=\"bold\"\n html={item.title}\n className={cn(\n 'image-text-overlay-card-title text-info-primary line-clamp-1',\n 'w-full leading-[1.2] tracking-[-0.04em]',\n // \u5B57\u53F7: mobile/tablet/laptop 18px, desktop 20px, lg-desktop 24px\n 'desktop:text-xl lg-desktop:text-2xl text-lg',\n classNames?.cardTitle\n )}\n />\n\n {item.subtitle && (\n <Text\n as=\"p\"\n size=\"none\"\n weight=\"bold\"\n html={item.subtitle}\n className={cn(\n 'image-text-overlay-card-subtitle text-info-primary line-clamp-1',\n 'w-full truncate leading-[1.4] tracking-[-0.02em]',\n // \u5B57\u53F7: mobile/tablet/laptop 14px, desktop 14px, lg-desktop 18px (count<=3) or 16px (count>3)\n 'lg-desktop:text-base text-sm',\n count <= 3 && 'lg-desktop:text-lg',\n classNames?.cardSubtitle\n )}\n />\n )}\n </div>\n </div>\n )\n}\n\n/**\n * ImageTextOverlay - \u56FE\u6587\u53E0\u52A0\u7EC4\u4EF6\n *\n * @description \u4EE5\u80CC\u666F\u56FE\u4E3A\u4E3B\u7684\u5361\u7247\u5E03\u5C40\u7EC4\u4EF6\uFF0C\u6807\u9898\u548C\u526F\u6807\u9898\u53E0\u52A0\u663E\u793A\u5728\u56FE\u7247\u5E95\u90E8\u3002\n * \u652F\u6301 2-6 \u4E2A items \u7684\u81EA\u52A8\u54CD\u5E94\u5F0F\u7F51\u683C\u5E03\u5C40\uFF0C\u6BCF\u4E2A item \u7684 backgroundImage\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9 (default/tablet/laptop/desktop/lgDesktop)\u3002\n *\n * @example\n * ```tsx\n * <ImageTextOverlay\n * data={{\n * items: [\n * {\n * backgroundImage: {\n * default: { url: '/bg-mobile.jpg', alt: 'feature' },\n * tablet: { url: '/bg-tablet.jpg', alt: 'feature' },\n * laptop: { url: '/bg-laptop.jpg', alt: 'feature' },\n * desktop: { url: '/bg-desktop.jpg', alt: 'feature' },\n * lgDesktop: { url: '/bg-xl.jpg', alt: 'feature' },\n * },\n * title: '300+ AI brainwave audios',\n * subtitle: 'Charge in a Flash, Share in a Dash',\n * },\n * {\n * backgroundImage: { default: { url: '/bg2.jpg', alt: '' } },\n * title: '20+ white noise sounds',\n * subtitle: 'Power to Drive Your Prime',\n * },\n * ],\n * theme: 'dark',\n * }}\n * />\n * ```\n */\nconst ImageTextOverlay = forwardRef<HTMLDivElement, ImageTextOverlayProps>(\n ({ data, className, classNames = {}, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const { items = [] } = data\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 767px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n useExposure(boxRef, {\n componentType,\n componentName,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n if (!items.length) return null\n\n const count = items.length\n const useSwiper = count > 3 && isMobile\n const chunkedItems = chunkArray(items, 3)\n\n return (\n <div\n ref={boxRef}\n className={cn('image-text-overlay-root', className, classNames.root)}\n data-ui-component-id=\"ImageTextOverlay\"\n {...props}\n >\n {useSwiper ? (\n <div className=\"image-text-overlay-mobile-swiper relative pb-8\">\n <Swiper\n className=\"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n modules={[Pagination]}\n slidesPerView={1}\n pagination={{\n clickable: true,\n el: `.${MOBILE_SWIPER_PAGINATION_CLASS}`,\n bulletClass: 'image-text-overlay-bullet',\n bulletActiveClass: 'image-text-overlay-bullet-active',\n }}\n spaceBetween={16}\n >\n {chunkedItems.map((group, gIndex) => (\n <SwiperSlide key={gIndex} className=\"!h-auto\">\n <div className=\"flex flex-col gap-4\">\n {group.map((item, index) => (\n <ImageTextOverlayCard\n key={gIndex * 3 + index}\n item={item}\n index={gIndex * 3 + index}\n count={count}\n classNames={classNames}\n />\n ))}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"absolute inset-x-0 bottom-0 z-10 flex justify-center\">\n <div\n className={cn(\n MOBILE_SWIPER_PAGINATION_CLASS,\n 'flex items-center justify-center gap-2 text-center',\n '[&_.swiper-pagination-bullet]:m-0',\n '[&_.swiper-pagination-bullet]:shrink-0',\n '[&_.swiper-pagination-bullet]:opacity-100'\n )}\n />\n </div>\n <style>{`\n .image-text-overlay-bullet {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 9999px;\n background: #767880;\n transition: all 0.3s ease;\n }\n\n .image-text-overlay-bullet-active {\n width: 32px;\n height: 8px;\n border-radius: 9999px;\n background: #080A0F;\n }\n `}</style>\n </div>\n ) : (\n <div className={cn('image-text-overlay-grid', 'grid gap-4', getGridClasses(count), classNames.grid)}>\n {items.map((item, index) => (\n <ImageTextOverlayCard key={index} item={item} index={index} count={count} classNames={classNames} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nImageTextOverlay.displayName = 'ImageTextOverlay'\n\nexport default withLayout(ImageTextOverlay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ImageTextOverlay_exports", "__export", "ImageTextOverlay_default", "__toCommonJS", "import_jsx_runtime", "React", "import_react", "import_utils", "import_heading", "import_text", "import_picture", "import_useExposure", "import_Styles", "import_trackUrlRef", "import_AiuiProvider", "import_react_responsive", "import_modules", "import_css", "import_pagination", "componentType", "componentName", "imageComponentType", "MOBILE_SWIPER_PAGINATION_CLASS", "BREAKPOINTS", "buildResponsiveSource", "backgroundImage", "sources", "getBackgroundAlt", "chunkArray", "arr", "size", "chunks", "i", "getGridClasses", "count", "getItemSpanClasses", "index", "getAspectRatioClasses", "ImageTextOverlayCard", "item", "classNames", "responsiveSource", "defaultAlt", "spanClasses", "imageRef", "locale", "pageHandle", "localizedLink", "trackedLink", "titleDescButton", "aspectRatioClasses", "Picture", "ImageTextOverlay", "data", "className", "props", "ref", "boxRef", "items", "isMobile", "setIsMobile", "mediaQuery", "useSwiper", "chunkedItems", "group", "gIndex"]
|
|
7
7
|
}
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
.dialog-close-icon {
|
|
3
3
|
color: ${o?.closeColor||"#1D1D1F"};
|
|
4
4
|
}
|
|
5
|
-
`}),(0,e.jsxs)(c.Root,{value:o?.title,className:"w-full overflow-hidden",children:[i?.map(t=>(0,e.jsx)(c.Content,{value:t.title,children:(0,e.jsx)(a.Picture,{source:`${t?.img}, ${t?.mobileImg} 767`,className:"laptop-md:h-[480px] h-[304px] w-full",alt:t?.title||"",imgClassName:"object-cover h-full"})},t.title)),(0,e.jsxs)("div",{className:"laptop-md:py-6 w-full overflow-visible bg-white py-4",children:[(0,e.jsx)("div",{ref:d,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"laptop-md:px-6 overflow-x-auto px-4",children:(0,e.jsx)("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:(0,e.jsx)(c.List,{className:"flex w-max p-1",children:i?.map((t,u)=>(0,e.jsx)(c.Trigger,{ref:g=>{g&&(s.current[u]=g)},className:(0,v.cn)("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",t.title===o?.title&&"bg-white"),onClick:()=>{p(t),r(t),l(t?.title)},value:t.title,children:(0,e.jsx)(a.Text,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},u+t.title))})})}),(0,e.jsx)("div",{className:"laptop-md:px-6 mt-4 px-4",children:i?.map((t,u)=>(0,e.jsx)(c.Content,{value:t.title,className:"laptop-md:text-[18px] text-[14px] font-bold"
|
|
5
|
+
`}),(0,e.jsxs)(c.Root,{value:o?.title,className:"w-full overflow-hidden",children:[i?.map(t=>(0,e.jsx)(c.Content,{value:t.title,children:(0,e.jsx)(a.Picture,{source:`${t?.img}, ${t?.mobileImg} 767`,className:"laptop-md:h-[480px] h-[304px] w-full",alt:t?.title||"",imgClassName:"object-cover h-full"})},t.title)),(0,e.jsxs)("div",{className:"laptop-md:py-6 w-full overflow-visible bg-white py-4",children:[(0,e.jsx)("div",{ref:d,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"laptop-md:px-6 overflow-x-auto px-4",children:(0,e.jsx)("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:(0,e.jsx)(c.List,{className:"flex w-max p-1",children:i?.map((t,u)=>(0,e.jsx)(c.Trigger,{ref:g=>{g&&(s.current[u]=g)},className:(0,v.cn)("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",t.title===o?.title&&"bg-white"),onClick:()=>{p(t),r(t),l(t?.title)},value:t.title,children:(0,e.jsx)(a.Text,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},u+t.title))})})}),(0,e.jsx)("div",{className:"laptop-md:px-6 mt-4 px-4",children:i?.map((t,u)=>(0,e.jsx)(c.Content,{value:t.title,children:(0,e.jsx)(a.Text,{html:t.description,className:"laptop-md:text-[18px] text-[14px] font-bold"})},u+t.title))})]})]})]})};var P=(0,w.withLayout)(A);
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n const { variant } = useBizProductContext()\n const [open, setOpen] = useState(false)\n\n const productHighlightData = useComponentData('ProductHighlight') ?? {}\n\n const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n const gaTrackEvent = useCallback(\n (buttonName?: string) => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n position: productHighlightData?.title || '',\n button_name: buttonName || productHighlightData?.view || '',\n },\n })\n },\n [productHighlightData?.title, productHighlightData?.view, variant.sku]\n )\n\n if (!Reflect.ownKeys(productHighlightData).length) return null\n\n return (\n <div className=\"ipc-product-detail-highlight\">\n <div className=\"flex items-center justify-between\">\n {productHighlightData?.title && (\n <Text\n className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\"\n html={productHighlightData?.title}\n />\n )}\n <Dialog open={open} onOpenChange={setOpen}>\n {productHighlightData?.view && (\n <DialogTrigger asChild>\n <Button\n variant=\"link\"\n className=\"!p-0 text-[14px] lg-desktop:text-[16px] font-bold\"\n onClick={() => gaTrackEvent()}\n >\n {productHighlightData?.view}\n </Button>\n </DialogTrigger>\n )}\n <ProductHighlightModal\n ksp={productHighlightData?.ksp || []}\n activeKspItem={activeKspItem}\n setActiveKspItem={setActiveKspItem}\n gaTrackEvent={gaTrackEvent}\n />\n </Dialog>\n </div>\n <ul className=\"lg-desktop:mt-4 mt-3 flex list-disc flex-col gap-1 pl-5\">\n {productHighlightData?.ksp?.map((item: any) => (\n <li key={item?.title} className=\"product-highlight-item cursor-pointer\">\n <Text\n size={3}\n onClick={() => {\n if (!item?.img) return\n setActiveKspItem(item)\n setOpen(true)\n gaTrackEvent(item?.title)\n }}\n className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]\"\n html={item?.title}\n />\n </li>\n ))}\n </ul>\n </div>\n )\n}\n\nconst ProductHighlightModal = ({\n ksp,\n activeKspItem,\n setActiveKspItem,\n gaTrackEvent,\n}: {\n ksp: any[]\n activeKspItem: any\n setActiveKspItem: (_activeKspItem: any) => void\n gaTrackEvent: (_buttonName: string) => void\n}) => {\n const highlightRef = useRef<HTMLButtonElement[]>([])\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n const autoScrollToActiveItem = useCallback(\n (activeKspItem: any) => {\n const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n const curRef = highlightRef.current[curIndex]\n\n if (curRef && scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n },\n [ksp]\n )\n\n useEffect(() => {\n if (!activeKspItem) return\n // setActiveKspItem(clickActiveKspItem)\n\n // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n setTimeout(() => {\n autoScrollToActiveItem(activeKspItem)\n }, 100)\n }, [autoScrollToActiveItem, activeKspItem])\n\n return (\n <DialogContent className=\"tablet:max-w-[90vw] tablet:w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4\">\n <style>{`\n .dialog-close-icon {\n color: ${activeKspItem?.closeColor || '#1D1D1F'};\n }\n `}</style>\n <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n {ksp?.map(item => (\n <Content value={item.title} key={item.title}>\n <Picture\n source={`${item?.img}, ${item?.mobileImg} 767`}\n className=\"laptop-md:h-[480px] h-[304px] w-full\"\n alt={item?.title || ''}\n imgClassName=\"object-cover h-full\"\n />\n </Content>\n ))}\n <div className=\"laptop-md:py-6 w-full overflow-visible bg-white py-4\">\n <div\n ref={scrollContainerRef}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n className=\"laptop-md:px-6 overflow-x-auto px-4\"\n >\n <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n <List className=\"flex w-max p-1\">\n {ksp?.map((item, index) => (\n <Trigger\n ref={el => {\n if (el) {\n highlightRef.current[index] = el\n }\n }}\n className={cn(\n 'lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n item.title === activeKspItem?.title && 'bg-white'\n )}\n onClick={() => {\n autoScrollToActiveItem(item)\n setActiveKspItem(item)\n gaTrackEvent(item?.title)\n }}\n key={index + item.title}\n value={item.title}\n >\n <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n </Trigger>\n ))}\n </List>\n </div>\n </div>\n <div className=\"laptop-md:px-6 mt-4 px-4\">\n {ksp?.map((item, index) => (\n <Content\n value={item.title}\n key={index + item.title}\n className=\"laptop-md:text-[18px] text-[14px] font-bold\"
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n const { variant } = useBizProductContext()\n const [open, setOpen] = useState(false)\n\n const productHighlightData = useComponentData('ProductHighlight') ?? {}\n\n const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n const gaTrackEvent = useCallback(\n (buttonName?: string) => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n position: productHighlightData?.title || '',\n button_name: buttonName || productHighlightData?.view || '',\n },\n })\n },\n [productHighlightData?.title, productHighlightData?.view, variant.sku]\n )\n\n if (!Reflect.ownKeys(productHighlightData).length) return null\n\n return (\n <div className=\"ipc-product-detail-highlight\">\n <div className=\"flex items-center justify-between\">\n {productHighlightData?.title && (\n <Text\n className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\"\n html={productHighlightData?.title}\n />\n )}\n <Dialog open={open} onOpenChange={setOpen}>\n {productHighlightData?.view && (\n <DialogTrigger asChild>\n <Button\n variant=\"link\"\n className=\"!p-0 text-[14px] lg-desktop:text-[16px] font-bold\"\n onClick={() => gaTrackEvent()}\n >\n {productHighlightData?.view}\n </Button>\n </DialogTrigger>\n )}\n <ProductHighlightModal\n ksp={productHighlightData?.ksp || []}\n activeKspItem={activeKspItem}\n setActiveKspItem={setActiveKspItem}\n gaTrackEvent={gaTrackEvent}\n />\n </Dialog>\n </div>\n <ul className=\"lg-desktop:mt-4 mt-3 flex list-disc flex-col gap-1 pl-5\">\n {productHighlightData?.ksp?.map((item: any) => (\n <li key={item?.title} className=\"product-highlight-item cursor-pointer\">\n <Text\n size={3}\n onClick={() => {\n if (!item?.img) return\n setActiveKspItem(item)\n setOpen(true)\n gaTrackEvent(item?.title)\n }}\n className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]\"\n html={item?.title}\n />\n </li>\n ))}\n </ul>\n </div>\n )\n}\n\nconst ProductHighlightModal = ({\n ksp,\n activeKspItem,\n setActiveKspItem,\n gaTrackEvent,\n}: {\n ksp: any[]\n activeKspItem: any\n setActiveKspItem: (_activeKspItem: any) => void\n gaTrackEvent: (_buttonName: string) => void\n}) => {\n const highlightRef = useRef<HTMLButtonElement[]>([])\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n const autoScrollToActiveItem = useCallback(\n (activeKspItem: any) => {\n const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n const curRef = highlightRef.current[curIndex]\n\n if (curRef && scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n },\n [ksp]\n )\n\n useEffect(() => {\n if (!activeKspItem) return\n // setActiveKspItem(clickActiveKspItem)\n\n // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n setTimeout(() => {\n autoScrollToActiveItem(activeKspItem)\n }, 100)\n }, [autoScrollToActiveItem, activeKspItem])\n\n return (\n <DialogContent className=\"tablet:max-w-[90vw] tablet:w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4\">\n <style>{`\n .dialog-close-icon {\n color: ${activeKspItem?.closeColor || '#1D1D1F'};\n }\n `}</style>\n <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n {ksp?.map(item => (\n <Content value={item.title} key={item.title}>\n <Picture\n source={`${item?.img}, ${item?.mobileImg} 767`}\n className=\"laptop-md:h-[480px] h-[304px] w-full\"\n alt={item?.title || ''}\n imgClassName=\"object-cover h-full\"\n />\n </Content>\n ))}\n <div className=\"laptop-md:py-6 w-full overflow-visible bg-white py-4\">\n <div\n ref={scrollContainerRef}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n className=\"laptop-md:px-6 overflow-x-auto px-4\"\n >\n <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n <List className=\"flex w-max p-1\">\n {ksp?.map((item, index) => (\n <Trigger\n ref={el => {\n if (el) {\n highlightRef.current[index] = el\n }\n }}\n className={cn(\n 'lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n item.title === activeKspItem?.title && 'bg-white'\n )}\n onClick={() => {\n autoScrollToActiveItem(item)\n setActiveKspItem(item)\n gaTrackEvent(item?.title)\n }}\n key={index + item.title}\n value={item.title}\n >\n <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n </Trigger>\n ))}\n </List>\n </div>\n </div>\n <div className=\"laptop-md:px-6 mt-4 px-4\">\n {ksp?.map((item, index) => (\n <Content\n value={item.title}\n key={index + item.title}\n >\n <Text html={item.description} className=\"laptop-md:text-[18px] text-[14px] font-bold\" />\n </Content>\n ))}\n </div>\n </div>\n </Root>\n </DialogContent>\n )\n}\n\nexport default withLayout(ProductHighlight)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "import_useComponentData", "import_Styles", "import_track", "ProductHighlight", "variant", "open", "setOpen", "productHighlightData", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "item", "ksp", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{Fragment as W,jsx as a,jsxs as x}from"react/jsx-runtime";import*as k from"react";import{forwardRef as $,useEffect as R,useState as C}from"react";import{cn as r}from"../../helpers/utils.js";import{Heading as P}from"../../components/heading.js";import{Text as D}from"../../components/text.js";import _ from"../../components/picture.js";import{useExposure as I}from"../../hooks/useExposure.js";import{withLayout as A}from"../../shared/Styles.js";import{trackUrlRef as z}from"../../shared/trackUrlRef.js";import{getLocalizedPath as L}from"../../helpers/utils.js";import{useAiuiContext as B}from"../AiuiProvider/index.js";import{useMediaQuery as E}from"react-responsive";import{Swiper as
|
|
1
|
+
"use client";import{Fragment as W,jsx as a,jsxs as x}from"react/jsx-runtime";import*as k from"react";import{forwardRef as $,useEffect as R,useState as C}from"react";import{cn as r}from"../../helpers/utils.js";import{Heading as P}from"../../components/heading.js";import{Text as D}from"../../components/text.js";import _ from"../../components/picture.js";import{useExposure as I}from"../../hooks/useExposure.js";import{withLayout as A}from"../../shared/Styles.js";import{trackUrlRef as z}from"../../shared/trackUrlRef.js";import{getLocalizedPath as L}from"../../helpers/utils.js";import{useAiuiContext as B}from"../AiuiProvider/index.js";import{useMediaQuery as E}from"react-responsive";import{Swiper as M,SwiperSlide as j}from"swiper/react";import{Pagination as H}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const V="content",f="image_text_overlay",h="image",w="image-text-overlay-mobile-pagination",v={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},F=e=>{if(!e)return"";const t=[];return e.lgDesktop?.url&&t.push(`${e.lgDesktop.url}`),e.desktop?.url&&t.push(`${e.desktop.url} ${v.desktop}`),e.laptop?.url&&t.push(`${e.laptop.url} ${v.laptop}`),e.tablet?.url&&t.push(`${e.tablet.url} ${v.tablet}`),e.default?.url&&t.push(`${e.default.url} ${v.default}`),t.join(", ")},G=e=>e&&(e.default?.alt||e.tablet?.alt||e.laptop?.alt||e.desktop?.alt||e.lgDesktop?.alt)||"",Q=(e,t)=>{const s=[];for(let l=0;l<e.length;l+=t)s.push(e.slice(l,l+t));return s},q=e=>{switch(e){case 2:return"grid-cols-1 tablet:grid-cols-2";case 3:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3";case 4:return"grid-cols-1 tablet:grid-cols-2";case 5:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6";case 6:return"grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3";default:return e<=1?"grid-cols-1":"grid-cols-1 laptop:grid-cols-3"}},K=(e,t)=>t===5?e<2?"laptop:col-span-3":"laptop:col-span-2":"",U=(e,t)=>{switch(e){case 2:case 4:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]";case 3:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";case 5:return t<2?"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]":"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";case 6:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";default:return e<=1?"aspect-[358/240]":"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]"}},O=({item:e,index:t,count:s,classNames:l})=>{const d=F(e.backgroundImage),c=G(e.backgroundImage),i=K(t,s),u=k.useRef(null),{locale:y="us",pageHandle:m}=B();I(u,{componentType:h,componentName:f,position:t+1,componentTitle:e.title,componentDescription:e.subtitle});const o=e.link?L(e.link,y):void 0,g=o?z(o,`${m??""}_${h}_${f}`):void 0,b=`${e.title}#${e.subtitle||""}#${e.title}`,n=U(s,t);return x("div",{ref:u,className:r("image-text-overlay-card rounded-card",{"aiui-dark":e.theme==="dark"},"desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4",n,i,l?.card),children:[g&&a("a",{href:g,className:"absolute inset-0 z-20","aria-label":e.title,"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":b}),e.backgroundImage?.isShowVideo?x(W,{children:[e.backgroundImage?.mobileVideo&&a("video",{className:r("image-text-overlay-card-image","laptop:hidden absolute inset-0 size-full object-cover",l?.cardImage),src:e.backgroundImage.mobileVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),e.backgroundImage?.desktopVideo&&a("video",{className:r("image-text-overlay-card-image","laptop:block absolute inset-0 hidden size-full object-cover",l?.cardImage),src:e.backgroundImage.desktopVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0})]}):d&&a(_,{source:d,alt:c||e.title,className:r("image-text-overlay-card-image","absolute inset-0 size-full",l?.cardImage),imgClassName:"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105"}),x("div",{className:r("image-text-overlay-card-content","relative z-10 flex w-full flex-col gap-1",l?.cardContent),children:[a(P,{as:"h4",size:2,weight:"bold",html:e.title,className:r("image-text-overlay-card-title text-info-primary line-clamp-1","w-full leading-[1.2] tracking-[-0.04em]","desktop:text-xl lg-desktop:text-2xl text-lg",l?.cardTitle)}),e.subtitle&&a(D,{as:"p",size:"none",weight:"bold",html:e.subtitle,className:r("image-text-overlay-card-subtitle text-info-primary line-clamp-1","w-full truncate leading-[1.4] tracking-[-0.02em]","lg-desktop:text-base text-sm",s<=3&&"lg-desktop:text-lg",l?.cardSubtitle)})]})]})},S=$(({data:e,className:t,classNames:s={},...l},d)=>{const c=k.useRef(null),{items:i=[]}=e,[u,y]=C(!1),m=E({query:"(max-width: 767px)"});if(R(()=>{y(m)},[m]),I(c,{componentType:V,componentName:f}),k.useImperativeHandle(d,()=>c.current),!i.length)return null;const o=i.length,g=o>3&&u,b=Q(i,3);return a("div",{ref:c,className:r("image-text-overlay-root",t,s.root),"data-ui-component-id":"ImageTextOverlay",...l,children:g?x("div",{className:"image-text-overlay-mobile-swiper relative pb-8",children:[a(M,{className:"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch",modules:[H],slidesPerView:1,pagination:{clickable:!0,el:`.${w}`,bulletClass:"image-text-overlay-bullet",bulletActiveClass:"image-text-overlay-bullet-active"},spaceBetween:16,children:b.map((n,p)=>a(j,{className:"!h-auto",children:a("div",{className:"flex flex-col gap-4",children:n.map((N,T)=>a(O,{item:N,index:p*3+T,count:o,classNames:s},p*3+T))})},p))}),a("div",{className:"absolute inset-x-0 bottom-0 z-10 flex justify-center",children:a("div",{className:r(w,"flex items-center justify-center gap-2 text-center","[&_.swiper-pagination-bullet]:m-0","[&_.swiper-pagination-bullet]:shrink-0","[&_.swiper-pagination-bullet]:opacity-100")})}),a("style",{children:`
|
|
2
2
|
.image-text-overlay-bullet {
|
|
3
3
|
display: inline-block;
|
|
4
4
|
width: 8px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ImageTextOverlay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Picture from '../../components/picture.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n} from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination'\n\nexport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n}\n\nconst componentType = 'content'\nconst componentName = 'image_text_overlay'\nconst imageComponentType = 'image'\nconst MOBILE_SWIPER_PAGINATION_CLASS = 'image-text-overlay-mobile-pagination'\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5927\u5230\u5C0F\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"lgDesktopUrl, desktopUrl 1919, laptopUrl 1439, tabletUrl 1024, defaultUrl 767\"\n */\nconst buildResponsiveSource = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF08\u65E0\u65AD\u70B9\u503C\uFF09\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getBackgroundAlt = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n// ============================================================================\n// \u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D \u2014\u2014 \u6839\u636E items \u6570\u91CF\u52A8\u6001\u51B3\u5B9A\u7F51\u683C\u5217\u6570\n//\n// Figma \u8BBE\u8BA1\u89C4\u8303\u603B\u7ED3:\n//\n// | Count | <768 (mobile) | 768-1024 (tablet) | 1025-1440 (laptop) | 1441-1920 (desktop) | \u22651921 (lg-desktop) |\n// |-------|---------------|--------------------|--------------------|---------------------|--------------------|\n// | 2 | 1col | 2col | 2col | 2col | 2col |\n// | 3 | 1col | 2col (2+1) | 3col | 3col | 3col |\n// | 4 | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) |\n// | 5 | 2col (3 rows) | 2col (3 rows) | 2+3 (5col flex) | 2+3 (5col flex) | 2+3 (5col flex) |\n// | 6 | 2col (3 rows) | 2col (3 rows) | 3col (2 rows) | 3col (2 rows) | 3col (2 rows) |\n//\n// ============================================================================\n\n/**\n * \u5C06\u6570\u7EC4\u6309\u6307\u5B9A\u5927\u5C0F\u5206\u7EC4\n */\nconst chunkArray = <T,>(arr: T[], size: number): T[][] => {\n const chunks: T[][] = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\nconst getGridClasses = (count: number): string => {\n switch (count) {\n case 2:\n // mobile: 1col, tablet+: 2col\n return 'grid-cols-1 tablet:grid-cols-2'\n case 3:\n // mobile: 1col, tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3'\n case 4:\n // mobile: 2col, tablet+: 2col (uniform)\n return 'grid-cols-1 tablet:grid-cols-2'\n case 5:\n // mobile/tablet: 2col grid, laptop+: use flex layout instead (2+3 pattern)\n // We handle laptop+ separately via flex, grid for mobile/tablet only\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6'\n case 6:\n // mobile/tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3'\n default:\n if (count <= 1) return 'grid-cols-1'\n // fallback: 2col mobile, 3col laptop+\n return 'grid-cols-1 laptop:grid-cols-3'\n }\n}\n\n/**\n * \u83B7\u53D6\u5355\u4E2A item \u7684 span \u7C7B\u540D (\u4EC5\u7528\u4E8E count=3 tablet \u548C count=5 laptop+)\n */\nconst getItemSpanClasses = (index: number, count: number): string => {\n if (count === 5) {\n // laptop+: \u7B2C1\u884C 2 items \u5404 span 3, \u7B2C2\u884C 3 items \u5404 span 2\n if (index < 2) return 'laptop:col-span-3'\n return 'laptop:col-span-2'\n }\n return ''\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u5BBD\u9AD8\u6BD4\u7C7B\u540D\n * \u6839\u636E items \u6570\u91CF\u548C\u65AD\u70B9\u52A8\u6001\u8BA1\u7B97\uFF0C\u786E\u4FDD\u56FE\u7247\u4E0D\u88AB\u622A\u65AD\n */\nconst getAspectRatioClasses = (count: number, index: number): string => {\n switch (count) {\n case 2:\n case 4:\n // \u59CB\u7EC8 2 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n case 3:\n // tablet 2 \u5217, laptop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 5:\n // tablet 2 \u5217, laptop+ \u7279\u6B8A flex (\u9996\u884C 2 \u4E2A\u5404\u5360 50%, \u6B21\u884C 3 \u4E2A\u5404\u5360 33%)\n // \u7B2C\u4E00\u884C\uFF08index 0-1\uFF09\u7528 2 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u7B2C\u4E8C\u884C\uFF08index 2-4\uFF09\u7528 3 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u786E\u4FDD\u9AD8\u5EA6\u4E00\u81F4\n if (index < 2) {\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 6:\n // tablet/laptop 2 \u5217, desktop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n default:\n if (count <= 1) return 'aspect-[358/240]'\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n}\n\n/**\n * ImageTextOverlayCard - \u5355\u4E2A\u56FE\u6587\u53E0\u52A0\u5361\u7247\n */\nconst ImageTextOverlayCard: React.FC<{\n item: ImageTextOverlayItem\n index: number\n count: number\n classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>\n}> = ({ item, index, count, classNames }) => {\n const responsiveSource = buildResponsiveSource(item.backgroundImage)\n const defaultAlt = getBackgroundAlt(item.backgroundImage)\n const spanClasses = getItemSpanClasses(index, count)\n const imageRef = React.useRef<HTMLDivElement>(null)\n const { locale = 'us', pageHandle } = useAiuiContext()\n\n useExposure(imageRef, {\n componentType: imageComponentType,\n componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.subtitle,\n })\n\n const localizedLink = item.link ? getLocalizedPath(item.link, locale) : undefined\n const trackedLink = localizedLink\n ? trackUrlRef(localizedLink, `${pageHandle ?? ''}_${imageComponentType}_${componentName}`)\n : undefined\n const titleDescButton = `${item.title}#${item.subtitle || ''}#${item.title}`\n\n const aspectRatioClasses = getAspectRatioClasses(count, index)\n\n return (\n <div\n ref={imageRef}\n className={cn(\n 'image-text-overlay-card rounded-card',\n { 'aiui-dark': item.theme === 'dark' },\n 'desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4',\n aspectRatioClasses,\n spanClasses,\n classNames?.card\n )}\n >\n {/* \u6574\u5361\u94FE\u63A5 */}\n {trackedLink && (\n <a\n href={trackedLink}\n className=\"absolute inset-0 z-20\"\n aria-label={item.title}\n data-headless-type-name={`${imageComponentType}#${componentName}`}\n data-headless-title-desc-button={titleDescButton}\n />\n )}\n\n {/* \u80CC\u666F\u5A92\u4F53\uFF1A\u89C6\u9891\u6216\u56FE\u7247 */}\n {item.backgroundImage?.isShowVideo ? (\n <>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 (<1025px) */}\n {item.backgroundImage?.mobileVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:hidden absolute inset-0 size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.mobileVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {/* \u684C\u9762\u7AEF\u89C6\u9891 (>=1025px) */}\n {item.backgroundImage?.desktopVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:block absolute inset-0 hidden size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.desktopVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n </>\n ) : (\n responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || item.title}\n className={cn('image-text-overlay-card-image', 'absolute inset-0 size-full', classNames?.cardImage)}\n imgClassName=\"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105\"\n />\n )\n )}\n\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'image-text-overlay-card-content',\n 'relative z-10 flex w-full flex-col gap-1',\n classNames?.cardContent\n )}\n >\n <Heading\n as=\"h4\"\n size={2}\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-title text-info-primary line-clamp-1',\n 'w-full leading-[1.2] tracking-[-0.04em]',\n // \u5B57\u53F7: mobile/tablet/laptop 18px, desktop 20px, lg-desktop 24px\n 'desktop:text-xl lg-desktop:text-2xl text-lg',\n classNames?.cardTitle\n )}\n >\n {item.title}\n </Heading>\n\n {item.subtitle && (\n <Text\n as=\"p\"\n size=\"none\"\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-subtitle text-info-primary line-clamp-1',\n 'w-full truncate leading-[1.4] tracking-[-0.02em]',\n // \u5B57\u53F7: mobile/tablet/laptop 14px, desktop 14px, lg-desktop 18px (count<=3) or 16px (count>3)\n 'lg-desktop:text-base text-sm',\n count <= 3 && 'lg-desktop:text-lg',\n classNames?.cardSubtitle\n )}\n >\n {item.subtitle}\n </Text>\n )}\n </div>\n </div>\n )\n}\n\n/**\n * ImageTextOverlay - \u56FE\u6587\u53E0\u52A0\u7EC4\u4EF6\n *\n * @description \u4EE5\u80CC\u666F\u56FE\u4E3A\u4E3B\u7684\u5361\u7247\u5E03\u5C40\u7EC4\u4EF6\uFF0C\u6807\u9898\u548C\u526F\u6807\u9898\u53E0\u52A0\u663E\u793A\u5728\u56FE\u7247\u5E95\u90E8\u3002\n * \u652F\u6301 2-6 \u4E2A items \u7684\u81EA\u52A8\u54CD\u5E94\u5F0F\u7F51\u683C\u5E03\u5C40\uFF0C\u6BCF\u4E2A item \u7684 backgroundImage\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9 (default/tablet/laptop/desktop/lgDesktop)\u3002\n *\n * @example\n * ```tsx\n * <ImageTextOverlay\n * data={{\n * items: [\n * {\n * backgroundImage: {\n * default: { url: '/bg-mobile.jpg', alt: 'feature' },\n * tablet: { url: '/bg-tablet.jpg', alt: 'feature' },\n * laptop: { url: '/bg-laptop.jpg', alt: 'feature' },\n * desktop: { url: '/bg-desktop.jpg', alt: 'feature' },\n * lgDesktop: { url: '/bg-xl.jpg', alt: 'feature' },\n * },\n * title: '300+ AI brainwave audios',\n * subtitle: 'Charge in a Flash, Share in a Dash',\n * },\n * {\n * backgroundImage: { default: { url: '/bg2.jpg', alt: '' } },\n * title: '20+ white noise sounds',\n * subtitle: 'Power to Drive Your Prime',\n * },\n * ],\n * theme: 'dark',\n * }}\n * />\n * ```\n */\nconst ImageTextOverlay = forwardRef<HTMLDivElement, ImageTextOverlayProps>(\n ({ data, className, classNames = {}, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const { items = [] } = data\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 767px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n useExposure(boxRef, {\n componentType,\n componentName,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n if (!items.length) return null\n\n const count = items.length\n const useSwiper = count > 3 && isMobile\n const chunkedItems = chunkArray(items, 3)\n\n return (\n <div\n ref={boxRef}\n className={cn('image-text-overlay-root', className, classNames.root)}\n data-ui-component-id=\"ImageTextOverlay\"\n {...props}\n >\n {useSwiper ? (\n <div className=\"image-text-overlay-mobile-swiper relative pb-8\">\n <Swiper\n className=\"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n modules={[Pagination]}\n slidesPerView={1}\n pagination={{\n clickable: true,\n el: `.${MOBILE_SWIPER_PAGINATION_CLASS}`,\n bulletClass: 'image-text-overlay-bullet',\n bulletActiveClass: 'image-text-overlay-bullet-active',\n }}\n spaceBetween={16}\n >\n {chunkedItems.map((group, gIndex) => (\n <SwiperSlide key={gIndex} className=\"!h-auto\">\n <div className=\"flex flex-col gap-4\">\n {group.map((item, index) => (\n <ImageTextOverlayCard\n key={gIndex * 3 + index}\n item={item}\n index={gIndex * 3 + index}\n count={count}\n classNames={classNames}\n />\n ))}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"absolute inset-x-0 bottom-0 z-10 flex justify-center\">\n <div\n className={cn(\n MOBILE_SWIPER_PAGINATION_CLASS,\n 'flex items-center justify-center gap-2 text-center',\n '[&_.swiper-pagination-bullet]:m-0',\n '[&_.swiper-pagination-bullet]:shrink-0',\n '[&_.swiper-pagination-bullet]:opacity-100'\n )}\n />\n </div>\n <style>{`\n .image-text-overlay-bullet {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 9999px;\n background: #767880;\n transition: all 0.3s ease;\n }\n\n .image-text-overlay-bullet-active {\n width: 32px;\n height: 8px;\n border-radius: 9999px;\n background: #080A0F;\n }\n `}</style>\n </div>\n ) : (\n <div className={cn('image-text-overlay-grid', 'grid gap-4', getGridClasses(count), classNames.grid)}>\n {items.map((item, index) => (\n <ImageTextOverlayCard key={index} item={item} index={index} count={count} classNames={classNames} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nImageTextOverlay.displayName = 'ImageTextOverlay'\n\nexport default withLayout(ImageTextOverlay)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Picture from '../../components/picture.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n} from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination'\n\nexport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n}\n\nconst componentType = 'content'\nconst componentName = 'image_text_overlay'\nconst imageComponentType = 'image'\nconst MOBILE_SWIPER_PAGINATION_CLASS = 'image-text-overlay-mobile-pagination'\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5927\u5230\u5C0F\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"lgDesktopUrl, desktopUrl 1919, laptopUrl 1439, tabletUrl 1024, defaultUrl 767\"\n */\nconst buildResponsiveSource = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF08\u65E0\u65AD\u70B9\u503C\uFF09\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getBackgroundAlt = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n// ============================================================================\n// \u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D \u2014\u2014 \u6839\u636E items \u6570\u91CF\u52A8\u6001\u51B3\u5B9A\u7F51\u683C\u5217\u6570\n//\n// Figma \u8BBE\u8BA1\u89C4\u8303\u603B\u7ED3:\n//\n// | Count | <768 (mobile) | 768-1024 (tablet) | 1025-1440 (laptop) | 1441-1920 (desktop) | \u22651921 (lg-desktop) |\n// |-------|---------------|--------------------|--------------------|---------------------|--------------------|\n// | 2 | 1col | 2col | 2col | 2col | 2col |\n// | 3 | 1col | 2col (2+1) | 3col | 3col | 3col |\n// | 4 | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) |\n// | 5 | 2col (3 rows) | 2col (3 rows) | 2+3 (5col flex) | 2+3 (5col flex) | 2+3 (5col flex) |\n// | 6 | 2col (3 rows) | 2col (3 rows) | 3col (2 rows) | 3col (2 rows) | 3col (2 rows) |\n//\n// ============================================================================\n\n/**\n * \u5C06\u6570\u7EC4\u6309\u6307\u5B9A\u5927\u5C0F\u5206\u7EC4\n */\nconst chunkArray = <T,>(arr: T[], size: number): T[][] => {\n const chunks: T[][] = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\nconst getGridClasses = (count: number): string => {\n switch (count) {\n case 2:\n // mobile: 1col, tablet+: 2col\n return 'grid-cols-1 tablet:grid-cols-2'\n case 3:\n // mobile: 1col, tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3'\n case 4:\n // mobile: 2col, tablet+: 2col (uniform)\n return 'grid-cols-1 tablet:grid-cols-2'\n case 5:\n // mobile/tablet: 2col grid, laptop+: use flex layout instead (2+3 pattern)\n // We handle laptop+ separately via flex, grid for mobile/tablet only\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6'\n case 6:\n // mobile/tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3'\n default:\n if (count <= 1) return 'grid-cols-1'\n // fallback: 2col mobile, 3col laptop+\n return 'grid-cols-1 laptop:grid-cols-3'\n }\n}\n\n/**\n * \u83B7\u53D6\u5355\u4E2A item \u7684 span \u7C7B\u540D (\u4EC5\u7528\u4E8E count=3 tablet \u548C count=5 laptop+)\n */\nconst getItemSpanClasses = (index: number, count: number): string => {\n if (count === 5) {\n // laptop+: \u7B2C1\u884C 2 items \u5404 span 3, \u7B2C2\u884C 3 items \u5404 span 2\n if (index < 2) return 'laptop:col-span-3'\n return 'laptop:col-span-2'\n }\n return ''\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u5BBD\u9AD8\u6BD4\u7C7B\u540D\n * \u6839\u636E items \u6570\u91CF\u548C\u65AD\u70B9\u52A8\u6001\u8BA1\u7B97\uFF0C\u786E\u4FDD\u56FE\u7247\u4E0D\u88AB\u622A\u65AD\n */\nconst getAspectRatioClasses = (count: number, index: number): string => {\n switch (count) {\n case 2:\n case 4:\n // \u59CB\u7EC8 2 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n case 3:\n // tablet 2 \u5217, laptop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 5:\n // tablet 2 \u5217, laptop+ \u7279\u6B8A flex (\u9996\u884C 2 \u4E2A\u5404\u5360 50%, \u6B21\u884C 3 \u4E2A\u5404\u5360 33%)\n // \u7B2C\u4E00\u884C\uFF08index 0-1\uFF09\u7528 2 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u7B2C\u4E8C\u884C\uFF08index 2-4\uFF09\u7528 3 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u786E\u4FDD\u9AD8\u5EA6\u4E00\u81F4\n if (index < 2) {\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 6:\n // tablet/laptop 2 \u5217, desktop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n default:\n if (count <= 1) return 'aspect-[358/240]'\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n}\n\n/**\n * ImageTextOverlayCard - \u5355\u4E2A\u56FE\u6587\u53E0\u52A0\u5361\u7247\n */\nconst ImageTextOverlayCard: React.FC<{\n item: ImageTextOverlayItem\n index: number\n count: number\n classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>\n}> = ({ item, index, count, classNames }) => {\n const responsiveSource = buildResponsiveSource(item.backgroundImage)\n const defaultAlt = getBackgroundAlt(item.backgroundImage)\n const spanClasses = getItemSpanClasses(index, count)\n const imageRef = React.useRef<HTMLDivElement>(null)\n const { locale = 'us', pageHandle } = useAiuiContext()\n\n useExposure(imageRef, {\n componentType: imageComponentType,\n componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.subtitle,\n })\n\n const localizedLink = item.link ? getLocalizedPath(item.link, locale) : undefined\n const trackedLink = localizedLink\n ? trackUrlRef(localizedLink, `${pageHandle ?? ''}_${imageComponentType}_${componentName}`)\n : undefined\n const titleDescButton = `${item.title}#${item.subtitle || ''}#${item.title}`\n\n const aspectRatioClasses = getAspectRatioClasses(count, index)\n\n return (\n <div\n ref={imageRef}\n className={cn(\n 'image-text-overlay-card rounded-card',\n { 'aiui-dark': item.theme === 'dark' },\n 'desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4',\n aspectRatioClasses,\n spanClasses,\n classNames?.card\n )}\n >\n {/* \u6574\u5361\u94FE\u63A5 */}\n {trackedLink && (\n <a\n href={trackedLink}\n className=\"absolute inset-0 z-20\"\n aria-label={item.title}\n data-headless-type-name={`${imageComponentType}#${componentName}`}\n data-headless-title-desc-button={titleDescButton}\n />\n )}\n\n {/* \u80CC\u666F\u5A92\u4F53\uFF1A\u89C6\u9891\u6216\u56FE\u7247 */}\n {item.backgroundImage?.isShowVideo ? (\n <>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 (<1025px) */}\n {item.backgroundImage?.mobileVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:hidden absolute inset-0 size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.mobileVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {/* \u684C\u9762\u7AEF\u89C6\u9891 (>=1025px) */}\n {item.backgroundImage?.desktopVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:block absolute inset-0 hidden size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.desktopVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n </>\n ) : (\n responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || item.title}\n className={cn('image-text-overlay-card-image', 'absolute inset-0 size-full', classNames?.cardImage)}\n imgClassName=\"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105\"\n />\n )\n )}\n\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'image-text-overlay-card-content',\n 'relative z-10 flex w-full flex-col gap-1',\n classNames?.cardContent\n )}\n >\n <Heading\n as=\"h4\"\n size={2}\n weight=\"bold\"\n html={item.title}\n className={cn(\n 'image-text-overlay-card-title text-info-primary line-clamp-1',\n 'w-full leading-[1.2] tracking-[-0.04em]',\n // \u5B57\u53F7: mobile/tablet/laptop 18px, desktop 20px, lg-desktop 24px\n 'desktop:text-xl lg-desktop:text-2xl text-lg',\n classNames?.cardTitle\n )}\n />\n\n {item.subtitle && (\n <Text\n as=\"p\"\n size=\"none\"\n weight=\"bold\"\n html={item.subtitle}\n className={cn(\n 'image-text-overlay-card-subtitle text-info-primary line-clamp-1',\n 'w-full truncate leading-[1.4] tracking-[-0.02em]',\n // \u5B57\u53F7: mobile/tablet/laptop 14px, desktop 14px, lg-desktop 18px (count<=3) or 16px (count>3)\n 'lg-desktop:text-base text-sm',\n count <= 3 && 'lg-desktop:text-lg',\n classNames?.cardSubtitle\n )}\n />\n )}\n </div>\n </div>\n )\n}\n\n/**\n * ImageTextOverlay - \u56FE\u6587\u53E0\u52A0\u7EC4\u4EF6\n *\n * @description \u4EE5\u80CC\u666F\u56FE\u4E3A\u4E3B\u7684\u5361\u7247\u5E03\u5C40\u7EC4\u4EF6\uFF0C\u6807\u9898\u548C\u526F\u6807\u9898\u53E0\u52A0\u663E\u793A\u5728\u56FE\u7247\u5E95\u90E8\u3002\n * \u652F\u6301 2-6 \u4E2A items \u7684\u81EA\u52A8\u54CD\u5E94\u5F0F\u7F51\u683C\u5E03\u5C40\uFF0C\u6BCF\u4E2A item \u7684 backgroundImage\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9 (default/tablet/laptop/desktop/lgDesktop)\u3002\n *\n * @example\n * ```tsx\n * <ImageTextOverlay\n * data={{\n * items: [\n * {\n * backgroundImage: {\n * default: { url: '/bg-mobile.jpg', alt: 'feature' },\n * tablet: { url: '/bg-tablet.jpg', alt: 'feature' },\n * laptop: { url: '/bg-laptop.jpg', alt: 'feature' },\n * desktop: { url: '/bg-desktop.jpg', alt: 'feature' },\n * lgDesktop: { url: '/bg-xl.jpg', alt: 'feature' },\n * },\n * title: '300+ AI brainwave audios',\n * subtitle: 'Charge in a Flash, Share in a Dash',\n * },\n * {\n * backgroundImage: { default: { url: '/bg2.jpg', alt: '' } },\n * title: '20+ white noise sounds',\n * subtitle: 'Power to Drive Your Prime',\n * },\n * ],\n * theme: 'dark',\n * }}\n * />\n * ```\n */\nconst ImageTextOverlay = forwardRef<HTMLDivElement, ImageTextOverlayProps>(\n ({ data, className, classNames = {}, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const { items = [] } = data\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 767px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n useExposure(boxRef, {\n componentType,\n componentName,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n if (!items.length) return null\n\n const count = items.length\n const useSwiper = count > 3 && isMobile\n const chunkedItems = chunkArray(items, 3)\n\n return (\n <div\n ref={boxRef}\n className={cn('image-text-overlay-root', className, classNames.root)}\n data-ui-component-id=\"ImageTextOverlay\"\n {...props}\n >\n {useSwiper ? (\n <div className=\"image-text-overlay-mobile-swiper relative pb-8\">\n <Swiper\n className=\"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n modules={[Pagination]}\n slidesPerView={1}\n pagination={{\n clickable: true,\n el: `.${MOBILE_SWIPER_PAGINATION_CLASS}`,\n bulletClass: 'image-text-overlay-bullet',\n bulletActiveClass: 'image-text-overlay-bullet-active',\n }}\n spaceBetween={16}\n >\n {chunkedItems.map((group, gIndex) => (\n <SwiperSlide key={gIndex} className=\"!h-auto\">\n <div className=\"flex flex-col gap-4\">\n {group.map((item, index) => (\n <ImageTextOverlayCard\n key={gIndex * 3 + index}\n item={item}\n index={gIndex * 3 + index}\n count={count}\n classNames={classNames}\n />\n ))}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"absolute inset-x-0 bottom-0 z-10 flex justify-center\">\n <div\n className={cn(\n MOBILE_SWIPER_PAGINATION_CLASS,\n 'flex items-center justify-center gap-2 text-center',\n '[&_.swiper-pagination-bullet]:m-0',\n '[&_.swiper-pagination-bullet]:shrink-0',\n '[&_.swiper-pagination-bullet]:opacity-100'\n )}\n />\n </div>\n <style>{`\n .image-text-overlay-bullet {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 9999px;\n background: #767880;\n transition: all 0.3s ease;\n }\n\n .image-text-overlay-bullet-active {\n width: 32px;\n height: 8px;\n border-radius: 9999px;\n background: #080A0F;\n }\n `}</style>\n </div>\n ) : (\n <div className={cn('image-text-overlay-grid', 'grid gap-4', getGridClasses(count), classNames.grid)}>\n {items.map((item, index) => (\n <ImageTextOverlayCard key={index} item={item} index={index} count={count} classNames={classNames} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nImageTextOverlay.displayName = 'ImageTextOverlay'\n\nexport default withLayout(ImageTextOverlay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "forwardRef", "useEffect", "useState", "cn", "Heading", "Text", "Picture", "useExposure", "withLayout", "trackUrlRef", "getLocalizedPath", "useAiuiContext", "useMediaQuery", "Swiper", "SwiperSlide", "Pagination", "componentType", "componentName", "imageComponentType", "MOBILE_SWIPER_PAGINATION_CLASS", "BREAKPOINTS", "buildResponsiveSource", "backgroundImage", "sources", "getBackgroundAlt", "chunkArray", "arr", "size", "chunks", "i", "getGridClasses", "count", "getItemSpanClasses", "index", "getAspectRatioClasses", "ImageTextOverlayCard", "item", "classNames", "responsiveSource", "defaultAlt", "spanClasses", "imageRef", "locale", "pageHandle", "localizedLink", "trackedLink", "titleDescButton", "aspectRatioClasses", "ImageTextOverlay", "data", "className", "props", "ref", "boxRef", "items", "isMobile", "setIsMobile", "mediaQuery", "useSwiper", "chunkedItems", "group", "gIndex", "ImageTextOverlay_default"]
|
|
7
7
|
}
|
|
@@ -2,5 +2,5 @@ import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Text as g,Picture as w,
|
|
|
2
2
|
.dialog-close-icon {
|
|
3
3
|
color: ${i?.closeColor||"#1D1D1F"};
|
|
4
4
|
}
|
|
5
|
-
`}),r(D,{value:i?.title,className:"w-full overflow-hidden",children:[l?.map(t=>e(f,{value:t.title,children:e(w,{source:`${t?.img}, ${t?.mobileImg} 767`,className:"laptop-md:h-[480px] h-[304px] w-full",alt:t?.title||"",imgClassName:"object-cover h-full"})},t.title)),r("div",{className:"laptop-md:py-6 w-full overflow-visible bg-white py-4",children:[e("div",{ref:n,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"laptop-md:px-6 overflow-x-auto px-4",children:e("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:e(T,{className:"flex w-max p-1",children:l?.map((t,s)=>e(E,{ref:c=>{c&&(d.current[s]=c)},className:A("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",t.title===i?.title&&"bg-white"),onClick:()=>{a(t),p(t),o(t?.title)},value:t.title,children:e(g,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},s+t.title))})})}),e("div",{className:"laptop-md:px-6 mt-4 px-4",children:l?.map((t,s)=>e(f,{value:t.title,className:"laptop-md:text-[18px] text-[14px] font-bold"
|
|
5
|
+
`}),r(D,{value:i?.title,className:"w-full overflow-hidden",children:[l?.map(t=>e(f,{value:t.title,children:e(w,{source:`${t?.img}, ${t?.mobileImg} 767`,className:"laptop-md:h-[480px] h-[304px] w-full",alt:t?.title||"",imgClassName:"object-cover h-full"})},t.title)),r("div",{className:"laptop-md:py-6 w-full overflow-visible bg-white py-4",children:[e("div",{ref:n,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"laptop-md:px-6 overflow-x-auto px-4",children:e("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:e(T,{className:"flex w-max p-1",children:l?.map((t,s)=>e(E,{ref:c=>{c&&(d.current[s]=c)},className:A("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",t.title===i?.title&&"bg-white"),onClick:()=>{a(t),p(t),o(t?.title)},value:t.title,children:e(g,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},s+t.title))})})}),e("div",{className:"laptop-md:px-6 mt-4 px-4",children:l?.map((t,s)=>e(f,{value:t.title,children:e(g,{html:t.description,className:"laptop-md:text-[18px] text-[14px] font-bold"})},s+t.title))})]})]})]})};var q=R(I);export{q as default};
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n const { variant } = useBizProductContext()\n const [open, setOpen] = useState(false)\n\n const productHighlightData = useComponentData('ProductHighlight') ?? {}\n\n const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n const gaTrackEvent = useCallback(\n (buttonName?: string) => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n position: productHighlightData?.title || '',\n button_name: buttonName || productHighlightData?.view || '',\n },\n })\n },\n [productHighlightData?.title, productHighlightData?.view, variant.sku]\n )\n\n if (!Reflect.ownKeys(productHighlightData).length) return null\n\n return (\n <div className=\"ipc-product-detail-highlight\">\n <div className=\"flex items-center justify-between\">\n {productHighlightData?.title && (\n <Text\n className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\"\n html={productHighlightData?.title}\n />\n )}\n <Dialog open={open} onOpenChange={setOpen}>\n {productHighlightData?.view && (\n <DialogTrigger asChild>\n <Button\n variant=\"link\"\n className=\"!p-0 text-[14px] lg-desktop:text-[16px] font-bold\"\n onClick={() => gaTrackEvent()}\n >\n {productHighlightData?.view}\n </Button>\n </DialogTrigger>\n )}\n <ProductHighlightModal\n ksp={productHighlightData?.ksp || []}\n activeKspItem={activeKspItem}\n setActiveKspItem={setActiveKspItem}\n gaTrackEvent={gaTrackEvent}\n />\n </Dialog>\n </div>\n <ul className=\"lg-desktop:mt-4 mt-3 flex list-disc flex-col gap-1 pl-5\">\n {productHighlightData?.ksp?.map((item: any) => (\n <li key={item?.title} className=\"product-highlight-item cursor-pointer\">\n <Text\n size={3}\n onClick={() => {\n if (!item?.img) return\n setActiveKspItem(item)\n setOpen(true)\n gaTrackEvent(item?.title)\n }}\n className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]\"\n html={item?.title}\n />\n </li>\n ))}\n </ul>\n </div>\n )\n}\n\nconst ProductHighlightModal = ({\n ksp,\n activeKspItem,\n setActiveKspItem,\n gaTrackEvent,\n}: {\n ksp: any[]\n activeKspItem: any\n setActiveKspItem: (_activeKspItem: any) => void\n gaTrackEvent: (_buttonName: string) => void\n}) => {\n const highlightRef = useRef<HTMLButtonElement[]>([])\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n const autoScrollToActiveItem = useCallback(\n (activeKspItem: any) => {\n const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n const curRef = highlightRef.current[curIndex]\n\n if (curRef && scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n },\n [ksp]\n )\n\n useEffect(() => {\n if (!activeKspItem) return\n // setActiveKspItem(clickActiveKspItem)\n\n // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n setTimeout(() => {\n autoScrollToActiveItem(activeKspItem)\n }, 100)\n }, [autoScrollToActiveItem, activeKspItem])\n\n return (\n <DialogContent className=\"tablet:max-w-[90vw] tablet:w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4\">\n <style>{`\n .dialog-close-icon {\n color: ${activeKspItem?.closeColor || '#1D1D1F'};\n }\n `}</style>\n <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n {ksp?.map(item => (\n <Content value={item.title} key={item.title}>\n <Picture\n source={`${item?.img}, ${item?.mobileImg} 767`}\n className=\"laptop-md:h-[480px] h-[304px] w-full\"\n alt={item?.title || ''}\n imgClassName=\"object-cover h-full\"\n />\n </Content>\n ))}\n <div className=\"laptop-md:py-6 w-full overflow-visible bg-white py-4\">\n <div\n ref={scrollContainerRef}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n className=\"laptop-md:px-6 overflow-x-auto px-4\"\n >\n <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n <List className=\"flex w-max p-1\">\n {ksp?.map((item, index) => (\n <Trigger\n ref={el => {\n if (el) {\n highlightRef.current[index] = el\n }\n }}\n className={cn(\n 'lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n item.title === activeKspItem?.title && 'bg-white'\n )}\n onClick={() => {\n autoScrollToActiveItem(item)\n setActiveKspItem(item)\n gaTrackEvent(item?.title)\n }}\n key={index + item.title}\n value={item.title}\n >\n <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n </Trigger>\n ))}\n </List>\n </div>\n </div>\n <div className=\"laptop-md:px-6 mt-4 px-4\">\n {ksp?.map((item, index) => (\n <Content\n value={item.title}\n key={index + item.title}\n className=\"laptop-md:text-[18px] text-[14px] font-bold\"
|
|
5
|
-
"mappings": "AAsCU,cAAAA,EAKF,QAAAC,MALE,oBAtCV,OAAS,QAAAC,EAAM,WAAAC,EAAS,UAAAC,EAAQ,UAAAC,EAAQ,iBAAAC,EAAe,iBAAAC,MAAqB,wCAC5E,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAC7C,OAAS,eAAAC,EAAa,aAAAC,EAAoB,UAAAC,EAAQ,YAAAC,MAAgB,QAClE,OAAS,MAAAC,MAAU,qCACnB,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,oBAAAC,MAAwB,wCACjC,OAAS,cAAAC,MAAkB,qCAC3B,OAAS,WAAAC,MAAe,oCAExB,MAAMC,EAAmB,IAAM,CAC7B,KAAM,CAAE,QAAAC,CAAQ,EAAIL,EAAqB,EACnC,CAACM,EAAMC,CAAO,EAAIT,EAAS,EAAK,EAEhCU,EAAuBP,EAAiB,kBAAkB,GAAK,CAAC,EAEhE,CAACQ,EAAeC,CAAgB,EAAIZ,EAASU,GAAsB,MAAM,CAAC,CAAC,EAE3EG,EAAehB,EAClBiB,GAAwB,CACvBT,EAAQ,CACN,MAAO,WACP,WAAY,YACZ,iBAAkB,CAChB,WAAY,sBAAsBE,EAAQ,GAAG,GAC7C,SAAUG,GAAsB,OAAS,GACzC,YAAaI,GAAcJ,GAAsB,MAAQ,EAC3D,CACF,CAAC,CACH,EACA,CAACA,GAAsB,MAAOA,GAAsB,KAAMH,EAAQ,GAAG,CACvE,EAEA,OAAK,QAAQ,QAAQG,CAAoB,EAAE,OAGzCxB,EAAC,OAAI,UAAU,+BACb,UAAAA,EAAC,OAAI,UAAU,oCACZ,UAAAwB,GAAsB,OACrBzB,EAACE,EAAA,CACC,UAAU,6DACV,KAAMuB,GAAsB,MAC9B,EAEFxB,EAACI,EAAA,CAAO,KAAMkB,EAAM,aAAcC,EAC/B,UAAAC,GAAsB,MACrBzB,EAACO,EAAA,CAAc,QAAO,GACpB,SAAAP,EAACI,EAAA,CACC,QAAQ,OACR,UAAU,oDACV,QAAS,IAAMwB,EAAa,EAE3B,SAAAH,GAAsB,KACzB,EACF,EAEFzB,EAAC8B,EAAA,CACC,IAAKL,GAAsB,KAAO,CAAC,EACnC,cAAeC,EACf,iBAAkBC,EAClB,aAAcC,EAChB,GACF,GACF,EACA5B,EAAC,MAAG,UAAU,0DACX,SAAAyB,GAAsB,KAAK,IAAKM,GAC/B/B,EAAC,MAAqB,UAAU,wCAC9B,SAAAA,EAACE,EAAA,CACC,KAAM,EACN,QAAS,IAAM,CACR6B,GAAM,MACXJ,EAAiBI,CAAI,EACrBP,EAAQ,EAAI,EACZI,EAAaG,GAAM,KAAK,EAC1B,EACA,UAAU,wHACV,KAAMA,GAAM,MACd,GAXOA,GAAM,KAYf,CACD,EACH,GACF,EAhDwD,IAkD5D,EAEMD,EAAwB,CAAC,CAC7B,IAAAE,EACA,cAAAN,EACA,iBAAAC,EACA,aAAAC,CACF,IAKM,CACJ,MAAMK,EAAenB,EAA4B,CAAC,CAAC,EAC7CoB,EAAqBpB,EAAuB,IAAI,EAEhDqB,EAAyBvB,EAC5Bc,GAAuB,CACtB,MAAMU,EAAWJ,EAAI,UAAUD,GAAQA,EAAK,QAAUL,GAAe,KAAK,EACpEW,EAASJ,EAAa,QAAQG,CAAQ,EAE5C,GAAIC,GAAUH,EAAmB,QAAS,CACxC,MAAMI,EAAYJ,EAAmB,QAC/BK,EAASF,EACTG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EAExFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EACA,CAACR,CAAG,CACN,EAEA,OAAAnB,EAAU,IAAM,CACTa,GAIL,WAAW,IAAM,CACfS,EAAuBT,CAAa,CACtC,EAAG,GAAG,CACR,EAAG,CAACS,EAAwBT,CAAa,CAAC,EAGxCzB,EAACK,EAAA,CAAc,UAAU,mMACvB,UAAAN,EAAC,SAAO;AAAA;AAAA,mBAEK0B,GAAe,YAAc,SAAS;AAAA;AAAA,QAEjD,EACFzB,EAACS,EAAA,CAAK,MAAOgB,GAAe,MAAO,UAAU,yBAC1C,UAAAM,GAAK,IAAID,GACR/B,EAACQ,EAAA,CAAQ,MAAOuB,EAAK,MACnB,SAAA/B,EAACG,EAAA,CACC,OAAQ,GAAG4B,GAAM,GAAG,KAAKA,GAAM,SAAS,OACxC,UAAU,uCACV,IAAKA,GAAM,OAAS,GACpB,aAAa,sBACf,GAN+BA,EAAK,KAOtC,CACD,EACD9B,EAAC,OAAI,UAAU,uDACb,UAAAD,EAAC,OACC,IAAKkC,EACL,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACA,UAAU,sCAEV,SAAAlC,EAAC,OAAI,UAAU,iCACb,SAAAA,EAACS,EAAA,CAAK,UAAU,iBACb,SAAAuB,GAAK,IAAI,CAACD,EAAMU,IACfzC,EAACW,EAAA,CACC,IAAK+B,GAAM,CACLA,IACFT,EAAa,QAAQQ,CAAK,EAAIC,EAElC,EACA,UAAW1B,EACT,oEACAe,EAAK,QAAUL,GAAe,OAAS,UACzC,EACA,QAAS,IAAM,CACbS,EAAuBJ,CAAI,EAC3BJ,EAAiBI,CAAI,EACrBH,EAAaG,GAAM,KAAK,CAC1B,EAEA,MAAOA,EAAK,MAEZ,SAAA/B,EAACE,EAAA,CAAK,KAAM6B,EAAK,MAAO,UAAU,sCAAsC,GAHnEU,EAAQV,EAAK,KAIpB,CACD,EACH,EACF,EACF,EACA/B,EAAC,OAAI,UAAU,2BACZ,SAAAgC,GAAK,IAAI,CAACD,EAAMU,IACfzC,EAACQ,EAAA,CACC,MAAOuB,EAAK,
|
|
4
|
+
"sourcesContent": ["import { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n const { variant } = useBizProductContext()\n const [open, setOpen] = useState(false)\n\n const productHighlightData = useComponentData('ProductHighlight') ?? {}\n\n const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n const gaTrackEvent = useCallback(\n (buttonName?: string) => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n position: productHighlightData?.title || '',\n button_name: buttonName || productHighlightData?.view || '',\n },\n })\n },\n [productHighlightData?.title, productHighlightData?.view, variant.sku]\n )\n\n if (!Reflect.ownKeys(productHighlightData).length) return null\n\n return (\n <div className=\"ipc-product-detail-highlight\">\n <div className=\"flex items-center justify-between\">\n {productHighlightData?.title && (\n <Text\n className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\"\n html={productHighlightData?.title}\n />\n )}\n <Dialog open={open} onOpenChange={setOpen}>\n {productHighlightData?.view && (\n <DialogTrigger asChild>\n <Button\n variant=\"link\"\n className=\"!p-0 text-[14px] lg-desktop:text-[16px] font-bold\"\n onClick={() => gaTrackEvent()}\n >\n {productHighlightData?.view}\n </Button>\n </DialogTrigger>\n )}\n <ProductHighlightModal\n ksp={productHighlightData?.ksp || []}\n activeKspItem={activeKspItem}\n setActiveKspItem={setActiveKspItem}\n gaTrackEvent={gaTrackEvent}\n />\n </Dialog>\n </div>\n <ul className=\"lg-desktop:mt-4 mt-3 flex list-disc flex-col gap-1 pl-5\">\n {productHighlightData?.ksp?.map((item: any) => (\n <li key={item?.title} className=\"product-highlight-item cursor-pointer\">\n <Text\n size={3}\n onClick={() => {\n if (!item?.img) return\n setActiveKspItem(item)\n setOpen(true)\n gaTrackEvent(item?.title)\n }}\n className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]\"\n html={item?.title}\n />\n </li>\n ))}\n </ul>\n </div>\n )\n}\n\nconst ProductHighlightModal = ({\n ksp,\n activeKspItem,\n setActiveKspItem,\n gaTrackEvent,\n}: {\n ksp: any[]\n activeKspItem: any\n setActiveKspItem: (_activeKspItem: any) => void\n gaTrackEvent: (_buttonName: string) => void\n}) => {\n const highlightRef = useRef<HTMLButtonElement[]>([])\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n const autoScrollToActiveItem = useCallback(\n (activeKspItem: any) => {\n const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n const curRef = highlightRef.current[curIndex]\n\n if (curRef && scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n },\n [ksp]\n )\n\n useEffect(() => {\n if (!activeKspItem) return\n // setActiveKspItem(clickActiveKspItem)\n\n // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n setTimeout(() => {\n autoScrollToActiveItem(activeKspItem)\n }, 100)\n }, [autoScrollToActiveItem, activeKspItem])\n\n return (\n <DialogContent className=\"tablet:max-w-[90vw] tablet:w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4\">\n <style>{`\n .dialog-close-icon {\n color: ${activeKspItem?.closeColor || '#1D1D1F'};\n }\n `}</style>\n <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n {ksp?.map(item => (\n <Content value={item.title} key={item.title}>\n <Picture\n source={`${item?.img}, ${item?.mobileImg} 767`}\n className=\"laptop-md:h-[480px] h-[304px] w-full\"\n alt={item?.title || ''}\n imgClassName=\"object-cover h-full\"\n />\n </Content>\n ))}\n <div className=\"laptop-md:py-6 w-full overflow-visible bg-white py-4\">\n <div\n ref={scrollContainerRef}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n className=\"laptop-md:px-6 overflow-x-auto px-4\"\n >\n <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n <List className=\"flex w-max p-1\">\n {ksp?.map((item, index) => (\n <Trigger\n ref={el => {\n if (el) {\n highlightRef.current[index] = el\n }\n }}\n className={cn(\n 'lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n item.title === activeKspItem?.title && 'bg-white'\n )}\n onClick={() => {\n autoScrollToActiveItem(item)\n setActiveKspItem(item)\n gaTrackEvent(item?.title)\n }}\n key={index + item.title}\n value={item.title}\n >\n <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n </Trigger>\n ))}\n </List>\n </div>\n </div>\n <div className=\"laptop-md:px-6 mt-4 px-4\">\n {ksp?.map((item, index) => (\n <Content\n value={item.title}\n key={index + item.title}\n >\n <Text html={item.description} className=\"laptop-md:text-[18px] text-[14px] font-bold\" />\n </Content>\n ))}\n </div>\n </div>\n </Root>\n </DialogContent>\n )\n}\n\nexport default withLayout(ProductHighlight)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "Text", "Picture", "Button", "Dialog", "DialogContent", "DialogTrigger", "Content", "List", "Root", "Trigger", "useCallback", "useEffect", "useRef", "useState", "cn", "useBizProductContext", "useComponentData", "withLayout", "gaTrack", "ProductHighlight", "variant", "open", "setOpen", "productHighlightData", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "item", "ksp", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el", "ProductHighlight_default"]
|
|
7
7
|
}
|