@anker-in/headless-ui 1.0.1 → 1.0.3-alpha.1751019481221
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/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +3 -3
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/cjs/components/heading.js +1 -1
- package/dist/cjs/components/heading.js.map +2 -2
- package/dist/cjs/components/text.js +1 -1
- package/dist/cjs/components/text.js.map +2 -2
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +3 -3
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/dist/esm/components/heading.js +1 -1
- package/dist/esm/components/heading.js.map +2 -2
- package/dist/esm/components/text.js +1 -1
- package/dist/esm/components/text.js.map +2 -2
- package/package.json +1 -1
- package/style.css +6 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n <a\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration)}\n >\n <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n {configuration?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withStyles", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "gaTrack", "throttle", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "hoverIndexRef", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "throttleResize", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "item", "isExpanded", "AccordionCards_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n <a\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration)}\n >\n <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n {configuration?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading\n as=\"h3\"\n className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n >\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <a\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n <Button className={cn('mb-1.5 font-bold')}>{data?.primaryButton}</Button>\n </a>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withStyles(AccordionCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withStyles", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "gaTrack", "throttle", "Heading", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "hoverIndexRef", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "throttleResize", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "item", "isExpanded", "AccordionCards_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as o,jsxs as i}from"react/jsx-runtime";import x,{useImperativeHandle as h,useRef as y}from"react";import{cn as n}from"../../helpers/utils.js";import s from"../../components/picture.js";import{withStyles as v}from"../../shared/Styles.js";import b from"../Title/index.js";import g from"./SwiperCategory.js";import{useExposure as k}from"../../hooks/useExposure.js";import{trackUrlRef as f}from"../../shared/trackUrlRef.js";const m="image",c="category_banner",
|
|
1
|
+
"use client";import{jsx as o,jsxs as i}from"react/jsx-runtime";import x,{useImperativeHandle as h,useRef as y}from"react";import{cn as n}from"../../helpers/utils.js";import s from"../../components/picture.js";import{withStyles as v}from"../../shared/Styles.js";import b from"../Title/index.js";import g from"./SwiperCategory.js";import{useExposure as k}from"../../hooks/useExposure.js";import{trackUrlRef as f}from"../../shared/trackUrlRef.js";import{Heading as w}from"../../components/heading.js";const m="image",c="category_banner",N=(e,t)=>{const r=[];for(let a=0;a<e.length;a+=t)r.push(e.slice(a,a+t));return r},C=({data:e,configuration:t})=>i("div",{className:n("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("div",{className:"transition-all duration-300 group-hover:scale-110",children:o("a",{href:f(e?.link,`${m}_${c}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(s,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),o(w,{as:"h3",className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]}),I=({data:e,configuration:t})=>i("div",{className:n("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:f(e?.link,`${m}_${c}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(s,{alt:e?.image?.alt||"",className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||""})}),o("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),_=({data:e,configuration:t,index:r})=>i("div",{className:n("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:e?.link||"",onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(s,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:n("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),o("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),j=({data:e,configuration:t})=>o("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,a)=>e?.length===5?o(_,{index:a,data:r,configuration:t},a):o(I,{data:r,configuration:t},a))}),S=x.forwardRef((e,t)=>{const{data:r,className:a="",key:p,event:d}=e,u=r?.isShowSelect?r?.products:r?.productData,l=y(null);return h(t,()=>l.current),k(l,{componentType:m,componentName:c,componentTitle:r?.title}),i("div",{ref:l,className:n("w-full overflow-hidden",a,{"aiui-dark":r?.theme==="dark"}),children:[r?.title&&o(b,{data:{title:r?.title},className:"text-4xl"}),o("div",{className:"tablet:block hidden",children:o(g,{id:`Category${p}`,Slide:C,data:{list:u,configuration:{shape:r?.shape,event:d}}})}),o("div",{className:"tablet:hidden block",children:o(g,{id:`Category1${p}`,Slide:j,data:{list:N(u,6),configuration:{shape:r?.shape,event:d}}})}),o("div",{className:"h-7"})]})});var P=v(S);export{P as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n source={data?.image?.url || ''}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withStyles", "Title", "SwiperBox", "useExposure", "trackUrlRef", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "SingleItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "Category", "props", "ref", "className", "key", "event", "currentData", "innerRef", "Category_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n source={data?.image?.url || ''}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <Heading\n as=\"h3\"\n className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\"\n >\n {data?.name}\n </Heading>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden',\n 'hover:bg-info-white cursor-pointer px-3 py-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n className=\"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || ''}\n />\n </a>\n <p className=\"text-info-primary flex-1 truncate text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer p-4',\n index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a href={data?.link || ''} onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}>\n <Picture\n source={data?.image?.url || ''}\n alt={data?.image?.alt || ''}\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n index === 0 ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n )}\n />\n </a>\n <p className=\"text-info-primary line-clamp-2 text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return data?.length === 5 ? (\n <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n ) : (\n <SingleItem key={index} data={item} configuration={configuration} />\n )\n })}\n </div>\n )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n return (\n <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withStyles(Category)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withStyles", "Title", "SwiperBox", "useExposure", "trackUrlRef", "Heading", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "SingleItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "Category", "props", "ref", "className", "key", "event", "currentData", "innerRef", "Category_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import $,{useImperativeHandle as q,useRef as R}from"react";import{useGSAP as A}from"@gsap/react";import u from"gsap";import{ScrollTrigger as l}from"gsap/dist/ScrollTrigger";import{useMediaQuery as I}from"react-responsive";import C from"../../helpers/ScrollLoadVideo.js";import{Button as E,Heading as L,Picture as F,Text as G}from"../../components/index.js";import{cn as o}from"../../helpers/index.js";import{withStyles as Q}from"../../shared/Styles.js";import{useExposure as J}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";const d="image",g="hero_banner",M=$.forwardRef(({data:S,className:V},D)=>{const{title:x,subtitle:f,pcImage:v,padImage:U,mobileImage:k,pcVideo:N,padVideo:w,mobileVideo:i,isShowVideo:_,primaryButton:c,secondaryButton:m,theme:j="light",size:H="default",caption:b=[],blockLink:z}=S,B=I({query:"(max-width: 768px)"}),P=I({query:"(max-width: 1024px)"}),r=R(null),t=R(null);return J(t,{componentType:d,componentName:g,componentTitle:x,componentDescription:f}),q(D,()=>t.current),A(()=>{u.registerPlugin(l);function h(){if(!r.current)return;const a=t.current?.clientHeight||100;window.innerHeight<=a?l.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:s=>{const p=s.progress*40-20;u.set(r.current,{yPercent:p})}}):(l.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:s=>{const p=s.progress*20-20;u.set(r.current,{yPercent:p})}}),l.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:s=>{const p=s.progress*20;u.set(r.current,{yPercent:p})}}))}return setTimeout(()=>{h()},1e3),()=>{l.getAll().forEach(a=>a.kill())}},[]),n("div",{ref:t,"data-ui-component-id":"HeroBanner",className:o(j==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":H==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":H==="sm"},V),children:[z&&e("a",{className:"absolute inset-0 z-10",href:y(z,`${d}_${g}`),tabIndex:-1,"aria-hidden":"true"}),e("div",{ref:r,className:o("absolute left-0 top-0 size-full"),children:_?e(C,{poster:B?i?.url:P?w?.url||i?.url:N?.url,src:B?i?.url:P?w?.url||i?.url:N?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(F,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:v?.alt||"",source:`${v?.url||""} , ${U?.url??(k?.url||"")} 1024, ${k?.url||""} 767`})}),n("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[n("div",{className:"laptop:text-left max-w-[686px]",children:[x&&e(L,{as:"h2",size:5,className:o("hero-banner-title"),html:x}),f&&e(L,{as:"h3",className:o("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:f})]}),n("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[m&&m.text&&e("a",{href:y(m.link,`${d}_${g}`),children:e(E,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:m.text})}),c&&c.text&&e("a",{href:y(c.link,`${d}_${g}`),children:e(E,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:c.text})})]})]}),b.length>0&&e("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:b.map((h,a)=>n($.Fragment,{children:[e(G,{size:2,className:o("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:h.title}),a<b.length-1&&e("div",{className:o("bg-info-primary w-px")})]},a))})]})});M.displayName="HeroBanner";var pe=Q(M);export{pe as default};
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "useMediaQuery", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "size", "caption", "blockLink", "isMobile", "isPad", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n setTimeout(() => {\n gsapResize()\n }, 1000)\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n tabIndex={-1}\n aria-hidden=\"true\"\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "useMediaQuery", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "size", "caption", "blockLink", "isMobile", "isPad", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as x,jsx as e,jsxs as c}from"react/jsx-runtime";import J,{useState as l,useRef as m,useEffect as u,forwardRef as K}from"react";import{debounce as U}from"es-toolkit";import{useInView as X}from"react-intersection-observer";import{cn as f}from"../../helpers/utils.js";import{withStyles as Z}from"../../shared/Styles.js";import D from"../Slogan/index.js";import{YouTubePlayer as ee}from"../VideoModal/YouTubePlayer.js";import{Grid as te,GridItem as g}from"../../components/gird.js";import{Container as re}from"../../components/container.js";import se from"../BrandEquity/index.js";import ae from"../MemberEquity/index.js";import oe from"../Spacer/index.js";import ne from"gsap";import{convertLexicalToHTML as E}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as z}from"react-responsive";import ie from"../../helpers/ScrollLoadVideo.js";const P=({defaultConverters:o})=>({...o,text:r=>{const{node:t}=r;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),h=({children:o,spaceY:r,className:t})=>{const s=z({query:"(max-width: 768px)"});return e(re,{spaceY:r,className:f("!bg-transparent",t),children:c(te,{children:[!s&&e(g,{span:1}),e(g,{span:s?12:10,children:o}),!s&&e(g,{span:1})]})})},le=J.forwardRef(({children:o,id:r,components:t})=>{const s=m(null);return c("div",{ref:s,className:"relative z-10",children:[e(x,{children:o}),e(x,{children:t?.map(a=>{switch(a.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(h,{spaceY:"none",children:e(se,{data:a,style:a?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(h,{spaceY:"none",children:e(ae,{data:a,className:"w-full",style:a?.style})})});case"ipc-spacer":return e(oe,{data:a,style:a?.style,className:"!bg-transparent"});default:return null}})})]})}),ce=K(({className:o="",id:r,data:{title:t,videoTitle:s,mobVideo:a,mobImg:d,img:p,isYouTube:C,youtubePcId:N,youtubeMobileId:L,video:y,theme:k,shape:$,components:B}})=>{const M=m(null),v=m(null),{ref:Y,inView:R}=X(),[de,q]=l(0),[H,F]=l(!1),[j,G]=l(!1),I=m(null),V=typeof t=="string"?t:t&&E({data:t,converters:P});typeof s=="string"||s&&E({data:s,converters:P});const[Q,O]=l(0),[n,W]=l(!1),S=z({query:"(max-width: 768px)"});u(()=>{W(S)},[S]);const b=U(()=>{if(v.current){const w=v.current.getBoundingClientRect(),i=n?window.screen.height:window.innerHeight,_=window.scrollY||window.pageYOffset,A=w.bottom+_,T=document.documentElement.scrollHeight-A;O(T>i?i:T),q(i)}},2e3);return u(()=>{R&&!H&&(M.current?.play(),F(!0))},[R,H]),u(()=>(b(),window.addEventListener("resize",b),()=>{window.removeEventListener("resize",b)}),[]),u(()=>{function w(){const i=n?window.screen.height:window.innerHeight;ne.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${i*1.8}px bottom`,scrub:.2}}).from(`#${r} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${r} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${r} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}setTimeout(()=>{w()},1e3)},[]),c(x,{children:[e("div",{id:r,className:f("relative z-20 h-screen w-full",o,{"aiui-dark":k==="dark","rounded-box":$==="rounded"}),ref:I,children:e("div",{ref:Y,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2",children:e(h,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(D,{className:"sticky-title",data:{title:V||"",theme:k}})})})}),c("div",{ref:v,style:{marginBottom:`-${Q}px`},className:f(r,"relative mt-[-200vh]"),children:[e("div",{className:"sticky top-0 ",children:c("div",{className:f("media-cover","relative h-screen w-full"),children:[C?e(ee,{youTubeId:n&&L||N}):y?.url&&e(ie,{videoRef:M,poster:n&&d?.url?d?.url:p?.url,src:n&&a?.url?a?.url:y?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{G(!0)}}),p?.url&&(!y?.url||j)&&e("img",{src:n&&d?.url?d?.url:p?.url,alt:p?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)"}})]})}),e("div",{className:"relative h-screen w-full"}),e(le,{components:B}),e("div",{className:"relative h-screen w-full"})]})]})});var Te=Z(ce);export{Te as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withStyles", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "SubBox", "id", "components", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n ({\n className = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.2,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n setTimeout(() => {\n gsapResize()\n }, 1000)\n }, [])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2\"\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div ref={boxRef} style={{ marginBottom: `-${btb}px` }} className={cn(id, 'relative mt-[-200vh]')}>\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {isYouTube ? (\n <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n ) : (\n video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )\n )}\n {img?.url && (!video?.url || isEntered) && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{ backdropFilter: 'blur(0px)', WebkitBackdropFilter: 'blur(0px)' }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </>\n )\n }\n)\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withStyles", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "id", "components", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as _,jsx as a,jsxs as s}from"react/jsx-runtime";import $,{useState as S,useEffect as R,useRef as C}from"react";import{useMediaQuery as E}from"react-responsive";import{withStyles as j}from"../../shared/Styles.js";import M from"../../components/picture.js";import N from"../../components/button.js";import{Heading as P}from"../../components/heading.js";import"../../components/text.js";import{Grid as z,GridItem as V}from"../../components/gird.js";import H from"../Title/index.js";import{cn as I}from"../../helpers/utils.js";import y from"../SwiperBox/index.js";import{isVideo as G}from"../../shared/mimeType.js";import{Tabs as D,TabsList as U,TabsTrigger as Q,TabsContent as q}from"../../components/tabs.js";import{useExposure as A}from"../../hooks/useExposure.js";import{trackUrlRef as x}from"../../shared/trackUrlRef.js";import{gaTrack as O}from"../../shared/track.js";const h="image",w="p1_banner",k=({data:i,configuration:l,jIndex:o,spanType:r})=>{const[c,n]=S(!1),p=E({query:"(max-width: 768px)"}),f=C(null),d=()=>{if(r)switch(r){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(l?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};A(f,{componentType:h,componentName:w,position:o,componentTitle:i.title,componentDescription:i.description,navigation:l?.activeTab}),R(()=>{n(p)},[p]);const{theme:b="light",title:m,description:e,imageUrl:t,primaryButton:u,secondaryButton:g,imageMobileUrl:v,blockLink:B}=i,T="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return s("div",{className:I("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",d(),{"rounded-2xl":l?.shape==="rounded","aiui-dark":b==="dark","h-[480px]":c&&!l?.isTab,"h-[400px]":c&&l?.isTab},"text-info-primary"),ref:f,children:[B&&a("a",{className:"absolute inset-0 z-10",href:x(B,`${h}_${w}`),"aria-hidden":"true",tabIndex:-1}),s("div",{className:"absolute inset-0",children:[G(t?.mimeType)?a("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:a("source",{src:t?.url,type:"video/mp4"})}):a(M,{source:t?.url,alt:t?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${t?.width}/${t?.height}`}}),G(v?.mimeType)?a("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:a("source",{src:v?.url,type:"video/mp4"})}):a(M,{source:v?.url||t?.url,alt:v?.alt||t?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),s("div",{className:I("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-3",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":i?.width==="full"}),children:[s("div",{children:[a(P,{size:3,as:"h3",className:"item-title",html:m}),a(P,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:e})]}),s("div",{className:"lg-desktop:gap-3 flex gap-2",children:[g&&g.text&&a("a",{href:x(g.link,`${h}_${w}`),children:a(N,{className:T,variant:"secondary",children:g.text})}),u&&u.text&&a("a",{href:x(u.link,`${h}_${w}`),children:a(N,{className:T,variant:"primary",children:u.text})})]})]})]})]})},L=$.forwardRef((i,l)=>{const{shape:o,sectionTitle:r,groupByTab:c=!1,items:n=[],carousel:p}=i.data,f=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},d=n.map(e=>e.tabName).filter(Boolean).filter((e,t,u)=>u.indexOf(e)===t),b=(e,t)=>{switch(e){case 1:return 1;case 2:return 2;default:return t?2.3:3}},m=d.map(e=>({tabName:e,items:n.filter(t=>t.tabName===e)})).reduce((e,t)=>(e[t.tabName]=t.items,e),{});return s("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:l,className:"text-info-primary",children:[r&&a(H,{data:{title:r},className:"section-title"}),c?s(D,{shape:o,align:"left",defaultValue:d[0],children:[a(U,{children:d.map((e,t)=>a(Q,{value:e,onClick:()=>{O({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:h,component_name:w,component_title:r,component_position:1,navigation:e,button_name:e}})},children:e},t))}),d.map((e,t)=>a(q,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:s(_,{children:[a(y,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:m?.[e]||[],configuration:{shape:o,isTab:c,activeTab:e,num:m?.[e]?.length||0}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:b(m?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b(m?.[e]?.length||0)}}}),p&&p?.items.length>0?a(y,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:p?.items||[],configuration:{shape:o,isTab:c}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},t))]}):s(_,{children:[s(z,{className:"w-full",children:[n.map((e,t)=>a(V,{span:f(e.width??"full"),className:"laptop:block hidden",children:a(k,{data:e,configuration:{shape:o},jIndex:t,spanType:e.width})},`${e?.title||""}${t}`)),n.map((e,t)=>a(V,{span:f("full"),className:"laptop:hidden block",children:a(k,{data:e,configuration:{shape:o},jIndex:t,spanType:"full"})},`${e?.title||""}${t}`))]}),p&&p?.items.length>0?a(y,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:p?.items||[],configuration:{shape:o}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});L.displayName="MultiLayoutGraphicBlock";var ne=j(L);export{ne as default};
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|