@anker-in/headless-ui 1.1.9-alpha.1765253378005 → 1.1.9-alpha.1765274523036
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/FeatureCards/FeatureCards.js +1 -1
- package/dist/cjs/biz-components/FeatureCards/FeatureCards.js.map +2 -2
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/cjs/biz-components/ImageWithText/types.d.ts +0 -2
- package/dist/cjs/biz-components/ImageWithText/types.js.map +1 -1
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +2 -2
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +2 -2
- package/dist/cjs/biz-components/ProductNav/ProductNav.js +1 -1
- package/dist/cjs/biz-components/ProductNav/ProductNav.js.map +3 -3
- package/dist/cjs/shared/Styles.d.ts +2 -2
- package/dist/cjs/shared/Styles.js +1 -1
- package/dist/cjs/shared/Styles.js.map +3 -3
- package/dist/esm/biz-components/FeatureCards/FeatureCards.js +1 -1
- package/dist/esm/biz-components/FeatureCards/FeatureCards.js.map +2 -2
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/esm/biz-components/ImageWithText/types.d.ts +0 -2
- package/dist/esm/biz-components/ImageWithText/types.js.map +1 -1
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +2 -2
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +2 -2
- package/dist/esm/biz-components/ProductNav/ProductNav.js +1 -1
- package/dist/esm/biz-components/ProductNav/ProductNav.js.map +3 -3
- package/dist/esm/shared/Styles.d.ts +2 -2
- package/dist/esm/shared/Styles.js +1 -1
- package/dist/esm/shared/Styles.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ImageWithText/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface ImageWithTextItem {\n /** \u529F\u80FD\u56FE\u6807 */\n icon: Media\n /** \u529F\u80FD\u6807\u9898 */\n text: string\n /** \u529F\u80FD\u63CF\u8FF0 */\n desc: string\n}\n\n/** \u6309\u94AE\u914D\u7F6E */\nexport interface ButtonConfig {\n /** \u6309\u94AE\u6587\u5B57 */\n text: string\n /** \u8DF3\u8F6C\u94FE\u63A5 */\n link: string\n /** \u6309\u94AE\u7C7B\u578B\uFF0C\u9ED8\u8BA4 primary */\n variant?: 'primary' | 'secondary'\n}\n\nexport interface ImageWithTextTabItem {\n /**\n * \u684C\u9762\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n */\n image: Media\n /**\n * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > imgPad > image\uFF09\n */\n imgPad?: Media\n /**\n * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > imageMob > image\uFF09\n */\n imageMob?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n video?: Media\n /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n padVideo?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n mobVideo?: Media\n /** Tab \u6807\u9898 */\n title: string\n}\n\nexport type MediaType = 'image' | 'video'\nexport type LayoutPosition = 'left' | 'right' | 'top' | 'bottom'\nexport type TextAlign = 'left' | 'center'\n\n/** \u5217\u6570\u679A\u4E3E\u7C7B\u578B */\nexport enum Cols {\n One = '1',\n Two = '2',\n Three = '3',\n Four = '4',\n}\n\nexport interface ImageWithTextProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n subtitle?: string\n /** \u63CF\u8FF0\u6587\u672C\uFF08\u901A\u5E38\u662F\u5927\u53F7\u9AD8\u4EAE\u6587\u672C\uFF0C\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n desc?: string\n /** \u63CF\u8FF0\u6587\u672C\u56FE\u6807\uFF08\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n descIcon?: string\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 dark */\n theme?: Theme\n /** \u5E03\u5C40\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4 left\u3002\u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\uFF08left/right/top/bottom\uFF09 */\n layout?: LayoutPosition\n /** \u5A92\u4F53\u7C7B\u578B\uFF0C\u9ED8\u8BA4 image\u3002\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301 image \u548C video */\n mediaType?: MediaType\n /** \u6587\u672C\u533A\u57DF\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u9ED8\u8BA4 left\u3002\u652F\u6301\u5DE6\u5BF9\u9F50\u548C\u5C45\u4E2D\u5BF9\u9F50 */\n textAlign?: TextAlign\n /**\n * PC\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n */\n image?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n video?: Media\n /**\n * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > padImage > image\uFF09\n */\n padImage?: Media\n /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n padVideo?: Media\n /**\n * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > mobileImage > image\uFF09\n */\n mobileImage?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n mobVideo?: Media\n /** \u529F\u80FD\u9879\u5217\u8868\uFF08\u53EF\u9009\uFF0C\u7528\u4E8E\u5C55\u793A\u529F\u80FD\u7279\u6027\u5217\u8868\uFF09 */\n items?: ImageWithTextItem[]\n /** Tab\u6570\u636E\u5217\u8868\uFF08TabWithImage\u6A21\u5F0F\uFF0C\u5F53\u5B58\u5728\u65F6\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09 */\n datalist?: ImageWithTextTabItem[]\n /** \
|
|
4
|
+
"sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface ImageWithTextItem {\n /** \u529F\u80FD\u56FE\u6807 */\n icon: Media\n /** \u529F\u80FD\u6807\u9898 */\n text: string\n /** \u529F\u80FD\u63CF\u8FF0 */\n desc: string\n}\n\n/** \u6309\u94AE\u914D\u7F6E */\nexport interface ButtonConfig {\n /** \u6309\u94AE\u6587\u5B57 */\n text: string\n /** \u8DF3\u8F6C\u94FE\u63A5 */\n link: string\n /** \u6309\u94AE\u7C7B\u578B\uFF0C\u9ED8\u8BA4 primary */\n variant?: 'primary' | 'secondary'\n}\n\nexport interface ImageWithTextTabItem {\n /**\n * \u684C\u9762\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n */\n image: Media\n /**\n * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > imgPad > image\uFF09\n */\n imgPad?: Media\n /**\n * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > imageMob > image\uFF09\n */\n imageMob?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n video?: Media\n /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n padVideo?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n mobVideo?: Media\n /** Tab \u6807\u9898 */\n title: string\n}\n\nexport type MediaType = 'image' | 'video'\nexport type LayoutPosition = 'left' | 'right' | 'top' | 'bottom'\nexport type TextAlign = 'left' | 'center'\n\n/** \u5217\u6570\u679A\u4E3E\u7C7B\u578B */\nexport enum Cols {\n One = '1',\n Two = '2',\n Three = '3',\n Four = '4',\n}\n\nexport interface ImageWithTextProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n subtitle?: string\n /** \u63CF\u8FF0\u6587\u672C\uFF08\u901A\u5E38\u662F\u5927\u53F7\u9AD8\u4EAE\u6587\u672C\uFF0C\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n desc?: string\n /** \u63CF\u8FF0\u6587\u672C\u56FE\u6807\uFF08\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n descIcon?: string\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 dark */\n theme?: Theme\n /** \u5E03\u5C40\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4 left\u3002\u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\uFF08left/right/top/bottom\uFF09 */\n layout?: LayoutPosition\n /** \u5A92\u4F53\u7C7B\u578B\uFF0C\u9ED8\u8BA4 image\u3002\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301 image \u548C video */\n mediaType?: MediaType\n /** \u6587\u672C\u533A\u57DF\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u9ED8\u8BA4 left\u3002\u652F\u6301\u5DE6\u5BF9\u9F50\u548C\u5C45\u4E2D\u5BF9\u9F50 */\n textAlign?: TextAlign\n /**\n * PC\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n */\n image?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n video?: Media\n /**\n * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > padImage > image\uFF09\n */\n padImage?: Media\n /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n padVideo?: Media\n /**\n * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > mobileImage > image\uFF09\n */\n mobileImage?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n mobVideo?: Media\n /** \u529F\u80FD\u9879\u5217\u8868\uFF08\u53EF\u9009\uFF0C\u7528\u4E8E\u5C55\u793A\u529F\u80FD\u7279\u6027\u5217\u8868\uFF09 */\n items?: ImageWithTextItem[]\n /** Tab\u6570\u636E\u5217\u8868\uFF08TabWithImage\u6A21\u5F0F\uFF0C\u5F53\u5B58\u5728\u65F6\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09 */\n datalist?: ImageWithTextTabItem[]\n /** \u6309\u94AE\u914D\u7F6E */\n button?: ButtonConfig\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
5
5
|
"mappings": "AAuDO,IAAKA,OACVA,EAAA,IAAM,IACNA,EAAA,IAAM,IACNA,EAAA,MAAQ,IACRA,EAAA,KAAO,IAJGA,OAAA",
|
|
6
6
|
"names": ["Cols"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{Fragment as G,jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as M,useRef as f,useEffect as j,forwardRef as R,useImperativeHandle as H}from"react";import{useMediaQuery as z}from"react-responsive";import{cn as n}from"../../helpers/utils.js";import{withLayout as V}from"../../shared/Styles.js";import{Heading as
|
|
1
|
+
"use client";import{Fragment as G,jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as M,useRef as f,useEffect as j,forwardRef as R,useImperativeHandle as H}from"react";import{useMediaQuery as z}from"react-responsive";import{cn as n}from"../../helpers/utils.js";import{withLayout as V}from"../../shared/Styles.js";import{Heading as h,Text as C,Picture as w}from"../../components/index.js";import{useExposure as U}from"../../hooks/useExposure.js";import{Swiper as _,SwiperSlide as q}from"swiper/react";import{Autoplay as $}from"swiper/modules";import"swiper/css";const S="media",A="media_scene_switcher",v=3e3,O=({data:i,configuration:c,theme:o})=>{const d=f(null),t=c?.isActive||!1;return U(d,{componentType:S,componentName:A,componentTitle:i?.title,position:(c?.index??0)+1}),r("div",{ref:d,className:n("media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors","relative text-[#6D6D6F]",t?"opacity-100":"opacity-60",{"bg-[#1D1D1F] text-white":t,"bg-[#EAEAEC] text-[1D1D1F]":t&&o==="light"}),onClick:()=>c?.onItemClick?.(c?.index??0),children:[r("div",{className:"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]",children:[e("div",{className:"media-scene-switcher-item-title flex-1",children:e(h,{as:"h6",size:2,html:i?.title})}),e("div",{className:n("media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]",o==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":o==="dark"&&t}),children:e(h,{as:"h6",size:2,html:i?.tag})})]}),e("div",{className:n("media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full",{"media-scene-switcher-progress-active":t}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:t?`progress-bar ${v}ms ease-out`:"none"}})]})},Q=({data:i,configuration:c,theme:o})=>{const d=f(null),t=c?.isActive||!1,m=z({query:"(max-width: 768px)"});U(d,{componentType:S,componentName:A,componentTitle:i?.title,position:(c?.index??0)+1});const l=m&&i?.mobVideoUrl?.url?i.mobVideoUrl.url:i?.videoUrl?.url,p=m&&i?.mobImageUrl?.url?i.mobImageUrl.url:i?.imageUrl?.url,b=p||i?.videoUrl?.thumbnailURL||"";return r("div",{ref:d,className:n("media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] max-w-full flex-col overflow-hidden",{"aiui-dark":o==="dark"}),children:[e("div",{className:"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden",children:l?e("video",{src:l,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:b,className:"size-full object-cover"}):p?e(w,{className:"size-full",imgClassName:"size-full object-cover",source:p,alt:i?.title||""}):null}),r("div",{className:n("media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]","text-[#6D6D6F]",{"bg-[#1D1D1F] text-white":t,"bg-[#EAEAEC] text-[1D1D1F]":t&&o==="light"}),children:[e("div",{className:"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1",children:e(h,{as:"h6",size:2,html:i?.title})}),e("div",{className:n("media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]",o==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":o==="dark"&&t}),children:e(h,{as:"h6",size:1,html:i?.tag})})]}),e("div",{className:n("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":t}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:t?`progress-bar ${v}ms ease-out`:"none"}})]})},F=R(({className:i="",data:c,id:o},d)=>{const{title:t,subtitle:m,items:l=[],theme:p="light",layout:b,titleIcon:u}=c||{},[g,N]=M(0),[T,B]=M(0),k=f(null),x=f(0),D=z({query:"(max-width: 1023px)"});H(d,()=>k.current),U(k,{componentType:S,componentName:A,componentTitle:t}),j(()=>{if(!(D||l.length===0))return x.current=window.setInterval(()=>{N(s=>(s+1)%l.length)},v),()=>{x.current&&window.clearInterval(x.current)}},[D,l.length]);const P=s=>{N(s),x.current&&window.clearInterval(x.current),x.current=window.setInterval(()=>{N(a=>(a+1)%l.length)},v)},y=l[g],J=y?.videoUrl?.url,W=y?.imageUrl?.url||y?.videoUrl?.thumbnailURL||"";return r(G,{children:[e("style",{children:`
|
|
2
2
|
@keyframes progress-bar {
|
|
3
3
|
from {
|
|
4
4
|
transform: translate3d(-100%, 0, 0);
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
transform: translate3d(0, 0, 0);
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
|
-
`}),r("section",{id:o,ref:k,className:n("media-scene-switcher text-info-primary w-full
|
|
10
|
+
`}),r("section",{id:o,ref:k,className:n("media-scene-switcher text-info-primary w-full",{"aiui-dark":p==="dark"},i),children:[r("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[e("div",{className:n("media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",{"order-1":b==="right"}),children:l.map((s,a)=>{const E=s?.videoUrl?.url,I=s?.imageUrl?.url,L=I||s?.videoUrl?.thumbnailURL||"";return e("div",{className:n("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":a===g}),children:E?e("video",{src:E,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:L,className:"size-full object-cover"}):I?e(w,{className:"size-full",imgClassName:"size-full object-cover",source:I,alt:s?.title||""}):null},s.id||a)})}),r("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[r("div",{className:"media-scene-switcher-header flex flex-col",children:[r("div",{className:"desktop:gap-2 flex items-center gap-1",children:[t&&e(h,{as:"h3",html:t,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),u&&e(w,{source:u.url,alt:u.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),m&&e(C,{as:"span",size:4,html:m,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]"})]}),e("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:l.map((s,a)=>e(O,{data:s,configuration:{index:a,isActive:a===g,onItemClick:P},theme:p},s.id||a))})]})]}),r("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[r("div",{className:"media-scene-switcher-mobile-header",children:[r("div",{className:"desktop:gap-2 flex items-center gap-1",children:[t&&e(h,{as:"h2",html:t,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]"}),u&&e(w,{source:u.url,alt:u.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),m&&e(C,{as:"span",size:4,html:m,className:"media-scene-switcher-subtitle text-[14px]"})]}),e("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:e(_,{onSlideChange:s=>B(s.realIndex),initialSlide:0,modules:[$],loop:l.length>1,autoplay:l.length>1?{delay:v,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:l.map((s,a)=>e(q,{className:"!h-auto !w-[296px] max-w-full",children:e(Q,{data:s,configuration:{index:a,isActive:a===T},theme:p})},s.id||a))})})]})]})]})});F.displayName="MediaSceneSwitcher";var ae=V(F);export{ae as default};
|
|
11
11
|
//# sourceMappingURL=MediaSceneSwitcher.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n data: MediaSceneSwitcherItem\n configuration?: {\n index: number\n isActive?: boolean\n onItemClick?: (index: number) => void\n }\n theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n 'relative text-[#6D6D6F]',\n isActive ? 'opacity-100' : 'opacity-60',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n >\n <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n <div className=\"media-scene-switcher-item-title flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div\n className={cn(\n 'media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]',\n theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n {\n '!border-[#F5F6F7]': theme === 'dark' && isActive,\n }\n )}\n >\n <Heading as=\"h6\" size={2} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, 0, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n ref={ref}\n className={cn('media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n })}\n >\n <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n {videoUrl ? (\n <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n ) : imageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={imageUrl}\n alt={data?.title || ''}\n />\n ) : null}\n </div>\n <div\n className={cn(\n 'media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]',\n 'text-[#6D6D6F]',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n >\n <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div\n className={cn(\n 'media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]',\n theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n {\n '!border-[#F5F6F7]': theme === 'dark' && isActive,\n }\n )}\n >\n <Heading as=\"h6\" size={1} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, 0, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(({ className = '', data, id }, ref) => {\n const { title, subtitle, items = [], theme = 'light', layout, titleIcon } = data || {}\n const [currentIndex, setCurrentIndex] = useState(0)\n const [activeIndex, setActiveIndex] = useState(0)\n const innerRef = useRef<HTMLDivElement>(null)\n const intervalRef = useRef<number>(0)\n const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n // Auto-play functionality for desktop\n useEffect(() => {\n if (isMobile || items.length === 0) return\n\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [isMobile, items.length])\n\n const handleItemClick = (index: number) => {\n setCurrentIndex(index)\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n }\n\n const currentItem = items[currentIndex]\n const videoUrl = currentItem?.videoUrl?.url\n const imageUrl = currentItem?.imageUrl?.url\n const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n return (\n <>\n <style>{`\n @keyframes progress-bar {\n from {\n transform: translate3d(-100%, 0, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n `}</style>\n <section\n id={id}\n ref={innerRef}\n className={cn(\n 'media-scene-switcher text-info-primary w-full overflow-hidden',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* Desktop Layout */}\n <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n <div\n className={cn(\n 'media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden',\n {\n 'order-1': layout === 'right',\n }\n )}\n >\n {items.map((item, index) => {\n const itemVideoUrl = item?.videoUrl?.url\n const itemImageUrl = item?.imageUrl?.url\n const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n key={item.id || index}\n className={cn(\n 'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n {\n 'inline-block': index === currentIndex,\n }\n )}\n >\n {itemVideoUrl ? (\n <video\n src={itemVideoUrl}\n playsInline\n autoPlay\n loop\n muted\n poster={itemPosterUrl}\n className=\"size-full object-cover\"\n />\n ) : itemImageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={itemImageUrl}\n alt={item?.title || ''}\n />\n ) : null}\n </div>\n )\n })}\n </div>\n\n <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n <div className=\"media-scene-switcher-header flex flex-col\">\n <div className=\"desktop:gap-2 flex items-center gap-1\">\n {title && (\n <Heading\n as=\"h3\"\n html={title}\n size={4}\n className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n />\n )}\n {titleIcon && (\n <Picture\n source={titleIcon.url}\n alt={titleIcon.alt || 'title icon'}\n className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n imgClassName=\"!w-auto h-full\"\n />\n )}\n </div>\n\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n {items.map((item, index) => (\n <DesktopItem\n key={item.id || index}\n data={item}\n configuration={{\n index,\n isActive: index === currentIndex,\n onItemClick: handleItemClick,\n }}\n theme={theme}\n />\n ))}\n </div>\n </div>\n </div>\n\n {/* Mobile Layout */}\n <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n <div className=\"media-scene-switcher-mobile-header\">\n <div className=\"desktop:gap-2 flex items-center gap-1\">\n {title && (\n <Heading\n as=\"h2\"\n html={title}\n size={2}\n className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]\"\n />\n )}\n {titleIcon && (\n <Picture\n source={titleIcon.url}\n alt={titleIcon.alt || 'title icon'}\n className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n imgClassName=\"!w-auto h-full\"\n />\n )}\n </div>\n {subtitle && (\n <Text as=\"span\" size={4} html={subtitle} className=\"media-scene-switcher-subtitle text-[14px]\" />\n )}\n </div>\n\n <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n <Swiper\n onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n initialSlide={0}\n modules={[Autoplay]}\n loop={items.length > 1}\n autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n spaceBetween={12}\n slidesPerView=\"auto\"\n watchSlidesProgress={true}\n className=\"w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px]\">\n <MobileItem\n data={item}\n configuration={{\n index,\n isActive: index === activeIndex,\n }}\n theme={theme}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </section>\n </>\n )\n})\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
|
|
5
|
-
"mappings": "aAoDM,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n data: MediaSceneSwitcherItem\n configuration?: {\n index: number\n isActive?: boolean\n onItemClick?: (index: number) => void\n }\n theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n 'relative text-[#6D6D6F]',\n isActive ? 'opacity-100' : 'opacity-60',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n >\n <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n <div className=\"media-scene-switcher-item-title flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div\n className={cn(\n 'media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]',\n theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n {\n '!border-[#F5F6F7]': theme === 'dark' && isActive,\n }\n )}\n >\n <Heading as=\"h6\" size={2} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, 0, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n ref={ref}\n className={cn(\n 'media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] max-w-full flex-col overflow-hidden',\n {\n 'aiui-dark': theme === 'dark',\n }\n )}\n >\n <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n {videoUrl ? (\n <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n ) : imageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={imageUrl}\n alt={data?.title || ''}\n />\n ) : null}\n </div>\n <div\n className={cn(\n 'media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]',\n 'text-[#6D6D6F]',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n >\n <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div\n className={cn(\n 'media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]',\n theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n {\n '!border-[#F5F6F7]': theme === 'dark' && isActive,\n }\n )}\n >\n <Heading as=\"h6\" size={1} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, 0, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(({ className = '', data, id }, ref) => {\n const { title, subtitle, items = [], theme = 'light', layout, titleIcon } = data || {}\n const [currentIndex, setCurrentIndex] = useState(0)\n const [activeIndex, setActiveIndex] = useState(0)\n const innerRef = useRef<HTMLDivElement>(null)\n const intervalRef = useRef<number>(0)\n const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n // Auto-play functionality for desktop\n useEffect(() => {\n if (isMobile || items.length === 0) return\n\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [isMobile, items.length])\n\n const handleItemClick = (index: number) => {\n setCurrentIndex(index)\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n }\n\n const currentItem = items[currentIndex]\n const videoUrl = currentItem?.videoUrl?.url\n const imageUrl = currentItem?.imageUrl?.url\n const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n return (\n <>\n <style>{`\n @keyframes progress-bar {\n from {\n transform: translate3d(-100%, 0, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n }\n `}</style>\n <section\n id={id}\n ref={innerRef}\n className={cn(\n 'media-scene-switcher text-info-primary w-full',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* Desktop Layout */}\n <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n <div\n className={cn(\n 'media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden',\n {\n 'order-1': layout === 'right',\n }\n )}\n >\n {items.map((item, index) => {\n const itemVideoUrl = item?.videoUrl?.url\n const itemImageUrl = item?.imageUrl?.url\n const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n key={item.id || index}\n className={cn(\n 'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n {\n 'inline-block': index === currentIndex,\n }\n )}\n >\n {itemVideoUrl ? (\n <video\n src={itemVideoUrl}\n playsInline\n autoPlay\n loop\n muted\n poster={itemPosterUrl}\n className=\"size-full object-cover\"\n />\n ) : itemImageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={itemImageUrl}\n alt={item?.title || ''}\n />\n ) : null}\n </div>\n )\n })}\n </div>\n\n <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n <div className=\"media-scene-switcher-header flex flex-col\">\n <div className=\"desktop:gap-2 flex items-center gap-1\">\n {title && (\n <Heading\n as=\"h3\"\n html={title}\n size={4}\n className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n />\n )}\n {titleIcon && (\n <Picture\n source={titleIcon.url}\n alt={titleIcon.alt || 'title icon'}\n className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n imgClassName=\"!w-auto h-full\"\n />\n )}\n </div>\n\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n {items.map((item, index) => (\n <DesktopItem\n key={item.id || index}\n data={item}\n configuration={{\n index,\n isActive: index === currentIndex,\n onItemClick: handleItemClick,\n }}\n theme={theme}\n />\n ))}\n </div>\n </div>\n </div>\n\n {/* Mobile Layout */}\n <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n <div className=\"media-scene-switcher-mobile-header\">\n <div className=\"desktop:gap-2 flex items-center gap-1\">\n {title && (\n <Heading\n as=\"h2\"\n html={title}\n size={2}\n className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]\"\n />\n )}\n {titleIcon && (\n <Picture\n source={titleIcon.url}\n alt={titleIcon.alt || 'title icon'}\n className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n imgClassName=\"!w-auto h-full\"\n />\n )}\n </div>\n {subtitle && (\n <Text as=\"span\" size={4} html={subtitle} className=\"media-scene-switcher-subtitle text-[14px]\" />\n )}\n </div>\n\n <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n <Swiper\n onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n initialSlide={0}\n modules={[Autoplay]}\n loop={items.length > 1}\n autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n spaceBetween={12}\n slidesPerView=\"auto\"\n watchSlidesProgress={true}\n className=\"w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px] max-w-full\">\n <MobileItem\n data={item}\n configuration={{\n index,\n isActive: index === activeIndex,\n }}\n theme={theme}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </section>\n </>\n )\n})\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "useMediaQuery", "cn", "withLayout", "Heading", "Text", "Picture", "useExposure", "Swiper", "SwiperSlide", "Autoplay", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "theme", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "MediaSceneSwitcher", "className", "id", "title", "subtitle", "items", "layout", "titleIcon", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper", "MediaSceneSwitcher_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useState as T,useEffect as u,forwardRef as L,useImperativeHandle as P,useRef as C}from"react";import{cn as c}from"../../helpers/utils.js";import{withLayout as S}from"../../shared/Styles.js";import{Button as v,Text as x}from"../../components/index.js";import{useExposure as H}from"../../hooks/useExposure.js";import*as m from"@radix-ui/react-popover";const M="navigation",D="product_nav",R=l=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...l,children:t("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),h=L(({className:l="",data:f,id:k},g)=>{const{tabLinks:p=[],anchorList:w=[],textLink:n,buyBtn:s,theme:b="light"}=f||{},[y,N]=T(""),i=C(null);P(g,()=>i.current),H(i,{componentType:M,componentName:D}),u(()=>{const e=()=>{N(window.location.hash)};return e(),window.addEventListener("hashchange",e),()=>{window.removeEventListener("hashchange",e)}},[]),u(()=>{const e=document.querySelectorAll(".header"),o=[];return e.forEach(d=>{const r=d;o.push({element:r,originalPosition:r.style.position||getComputedStyle(r).position}),r.style.position="relative"}),()=>{o.forEach(({element:d,originalPosition:r})=>{d.style.position=r==="static"?"":r})}},[]);const E=e=>{e.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})};return a("div",{id:k,ref:i,className:c("product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0",{"aiui-dark":b==="dark"},l),children:[a("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[a("div",{className:"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]",children:[a("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[p.map((e,o)=>a("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[t("a",{href:e.link,className:c("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":o!==0,"hidden desktop:block":o===1}),children:t("span",{children:e.label})}),o!==p.length-1&&t("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},e.link||o)),p.length>1&&a(m.Root,{children:[t(m.Trigger,{asChild:!0,children:t("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block","aria-label":"More products",children:t(R,{className:"text-[#1D1D1F]"})})}),t(m.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:p.slice(1).map(e=>t("a",{href:e.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:t("span",{children:e.label})},e.link))})]})]}),a("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[n?.link&&t("a",{href:n.link,target:n.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:t(x,{size:2,className:"text-nowrap",children:n.text})}),s?.link&&t(v,{as:"a",href:s.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:s.text})]})]}),t("div",{className:"product-nav-anchors hide-scrollbar laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px]",children:w.map(e=>a("a",{href:`#${e.id}`,className:"product-nav-anchor-link",onClick:o=>{E(o)},children:[t(x,{size:2,className:"product-nav-anchor-text text-nowrap",children:e.label}),t("div",{className:c("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"bg-brand-color":y===`#${e.id}`})})]},e.id))})]}),a("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[n?.link&&t("a",{href:n.link,target:n.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:t(x,{size:2,className:"text-nowrap",children:n.text})}),s?.link&&t(v,{as:"a",href:s.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:s.text})]})]})});h.displayName="ProductNav";var I=S(h);export{I as default};
|
|
2
2
|
//# sourceMappingURL=ProductNav.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ProductNav/ProductNav.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M5 7.5L10 12.5L15 7.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(({ className = '', data, id }, ref) => {\n const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n const [hash, setHash] = useState('')\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n // \u76D1\u542Chash\u53D8\u5316\n useEffect(() => {\n const handleHashChange = () => {\n setHash(window.location.hash)\n }\n handleHashChange()\n window.addEventListener('hashchange', handleHashChange)\n return () => {\n window.removeEventListener('hashchange', handleHashChange)\n }\n }, [])\n\n // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n const handleAnchorClick = (e: React.MouseEvent) => {\n const target = e.target as HTMLElement\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n })\n }\n\n return (\n <div\n id={id}\n ref={innerRef}\n className={cn(\n 'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n {/* Tab Links Section */}\n <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n {tabLinks.map((tabLink, index) => {\n return (\n <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n <a\n href={tabLink.link}\n className={cn(\n 'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n {\n 'text-[#6D6D6F]': index !== 0,\n 'hidden desktop:block': index === 1,\n }\n )}\n // onClick={() => onShowSpecs?.(false)}\n >\n <span>{tabLink.label}</span>\n </a>\n {index !== tabLinks.length - 1 && (\n <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n )}\n </div>\n )\n })}\n\n {/* Mobile Dropdown */}\n {tabLinks.length > 1 && (\n <Popover.Root>\n <Popover.Trigger asChild>\n <button\n className=\"product-nav-dropdown-trigger desktop:hidden -ml-
|
|
5
|
-
"mappings": "aAeM,cAAAA,
|
|
6
|
-
"names": ["jsx", "jsxs", "useState", "useEffect", "forwardRef", "useImperativeHandle", "useRef", "cn", "withLayout", "Button", "Text", "useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "hash", "setHash", "innerRef", "handleHashChange", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M5 7.5L10 12.5L15 7.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(({ className = '', data, id }, ref) => {\n const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n const [hash, setHash] = useState('')\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n // \u76D1\u542Chash\u53D8\u5316\n useEffect(() => {\n const handleHashChange = () => {\n setHash(window.location.hash)\n }\n handleHashChange()\n window.addEventListener('hashchange', handleHashChange)\n return () => {\n window.removeEventListener('hashchange', handleHashChange)\n }\n }, [])\n\n // \u8BBE\u7F6E\u9875\u9762\u4E2Dheader\u5143\u7D20\u7684position\u4E3Arelative\n useEffect(() => {\n const headerElements = document.querySelectorAll('.header')\n const originalStyles: { element: HTMLElement; originalPosition: string }[] = []\n\n headerElements.forEach(element => {\n const htmlElement = element as HTMLElement\n // \u4FDD\u5B58\u539F\u59CB\u6837\u5F0F\n originalStyles.push({\n element: htmlElement,\n originalPosition: htmlElement.style.position || getComputedStyle(htmlElement).position,\n })\n // \u8BBE\u7F6E\u4E3Arelative\n htmlElement.style.position = 'relative'\n })\n\n // \u6E05\u7406\u51FD\u6570\uFF1A\u6062\u590D\u539F\u59CB\u6837\u5F0F\n return () => {\n originalStyles.forEach(({ element, originalPosition }) => {\n element.style.position = originalPosition === 'static' ? '' : originalPosition\n })\n }\n }, [])\n\n // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n const handleAnchorClick = (e: React.MouseEvent) => {\n const target = e.target as HTMLElement\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n })\n }\n\n return (\n <div\n id={id}\n ref={innerRef}\n className={cn(\n 'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n {/* Tab Links Section */}\n <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n {tabLinks.map((tabLink, index) => {\n return (\n <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n <a\n href={tabLink.link}\n className={cn(\n 'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n {\n 'text-[#6D6D6F]': index !== 0,\n 'hidden desktop:block': index === 1,\n }\n )}\n // onClick={() => onShowSpecs?.(false)}\n >\n <span>{tabLink.label}</span>\n </a>\n {index !== tabLinks.length - 1 && (\n <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n )}\n </div>\n )\n })}\n\n {/* Mobile Dropdown */}\n {tabLinks.length > 1 && (\n <Popover.Root>\n <Popover.Trigger asChild>\n <button\n className=\"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block\"\n aria-label=\"More products\"\n >\n <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n </button>\n </Popover.Trigger>\n <Popover.Content\n className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n style={{\n boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n }}\n side=\"bottom\"\n align=\"end\"\n alignOffset={10}\n sideOffset={10}\n >\n {tabLinks.slice(1).map(tabLink => (\n <a\n key={tabLink.link}\n href={tabLink.link}\n className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n >\n <span>{tabLink.label}</span>\n </a>\n ))}\n </Popover.Content>\n </Popover.Root>\n )}\n </div>\n\n {/* Mobile Actions */}\n <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* Anchor Navigation */}\n <div className=\"product-nav-anchors hide-scrollbar laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px]\">\n {anchorList.map(anchor => (\n <a\n key={anchor.id}\n href={`#${anchor.id}`}\n className=\"product-nav-anchor-link\"\n onClick={e => {\n handleAnchorClick(e)\n }}\n >\n <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n {anchor.label}\n </Text>\n <div\n className={cn(\n 'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n {\n 'bg-brand-color': hash === `#${anchor.id}`,\n }\n )}\n />\n </a>\n ))}\n </div>\n </div>\n\n {/* Desktop Actions */}\n <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n )\n})\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "useState", "useEffect", "forwardRef", "useImperativeHandle", "useRef", "cn", "withLayout", "Button", "Text", "useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "hash", "setHash", "innerRef", "handleHashChange", "headerElements", "originalStyles", "element", "htmlElement", "originalPosition", "handleAnchorClick", "tabLink", "index", "anchor", "e", "ProductNav_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as I,jsx as o,jsxs as B}from"react/jsx-runtime";import f,{useMemo as d}from"react";import{simpleHash as C}from"./simpleHash.js";import $ from"./getKeyPropsString.js";import{Grid as R,GridItem as N}from"../components/grid.js";import{Container as k}from"../components/container.js";import w from"./ErrorBoundary.js";const h={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},x={12:"tablet:col-start-1 tablet:col-end-13",10:"tablet:col-start-2 tablet:col-end-12",8:"tablet:col-start-3 tablet:col-end-11",6:"tablet:col-start-4 tablet:col-end-10",4:"tablet:col-start-5 tablet:col-end-9"},m=t=>{const n=$(t);return`style_${C(n)}`},T=t=>{const{style:n,uid:s,disabled:r}=t;return{style:n,uid:s,disabled:r}},G=({style:t,uid:n=m({}),disabled:s=!1})=>!t||s?null:o("style",{suppressHydrationWarning:!0,"data-style-id":n,children:`.block-${n} { ${t} }`}),K=(t,n)=>{const s=d(()=>t?.uid||m({...t,data:n}),[n,t]),r=d(()=>o(G,{...t,uid:s}),[t,s]);return{className:`block-${s} `,StyleComponent:r,uid:s}},j=t=>{const{desktopSpan:n,mobileSpan:s}=t?.container||{},r=s?h[s]:"",a=n?x[n]:"";return`${r} ${a}`.trim()};function D(t,n){const s=f.forwardRef((r,a)=>{const l=T(r),y=e=>e?typeof e=="string"?e:Object.entries(e).map(([g,P])=>`${g.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${P}`).join("; ")+";":"",c=[n?.style,l?.style].map(y).filter(e=>!!e).map(e=>e.trim().endsWith(";")?e:`${e};`).join(" "),u={...n,...l,...c&&{style:c}},{className:i,StyleComponent:p}=K(u,r?.data),S=e=>o(k,{className:`${i} ${e?.className}`,children:o(R,{className:"container_grid",children:o(N,{className:j(e),children:o(t,{...e,ref:a})})})}),b=e=>o(t,{...e,className:`${i} ${e?.className}`,ref:a});return o(I,{children:B(w,{children:[p,Reflect.ownKeys(r?.container||{})?.length>0?S(r):b(r)]})})});return s.displayName=t.displayName||t.name||"Component",s}export{T as getStylesProps,K as useStyles,D as withLayout};
|
|
2
2
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/shared/Styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/grid.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n 12: 'col-start-1 col-end-13',\n 10: 'col-start-2 col-end-12',\n 8: 'col-start-3 col-end-11',\n 6: 'col-start-4 col-end-10',\n 4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n 12: 'tablet:col-start-1 tablet:col-end-13',\n 10: 'tablet:col-start-2 tablet:col-end-12',\n 8: 'tablet:col-start-3 tablet:col-end-11',\n 6: 'tablet:col-start-4 tablet:col-end-10',\n 4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n container?: {\n /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n desktopSpan: number\n /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n mobileSpan: number\n }\n}\n\nexport interface StylesProps {\n /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n style?: string\n /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n uid?: string\n /** \u662F\u5426\u7981\u7528 */\n disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n const keyString = getKeyPropsString(props)\n return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n const { style, uid, disabled } = props\n return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n const { desktopSpan, mobileSpan } = props?.container || {}\n const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n WrappedComponent: React.ComponentType<P>,\n defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n const withLayout = React.forwardRef<\n any,\n Omit<P, keyof StylesProps> &\n Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n >((props, ref) => {\n const finalStyleProps = {\n ...defaultLayoutProps,\n ...
|
|
5
|
-
"mappings": "AAkES,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "withLayout", "WrappedComponent", "defaultLayoutProps", "ref", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/grid.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n 12: 'col-start-1 col-end-13',\n 10: 'col-start-2 col-end-12',\n 8: 'col-start-3 col-end-11',\n 6: 'col-start-4 col-end-10',\n 4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n 12: 'tablet:col-start-1 tablet:col-end-13',\n 10: 'tablet:col-start-2 tablet:col-end-12',\n 8: 'tablet:col-start-3 tablet:col-end-11',\n 6: 'tablet:col-start-4 tablet:col-end-10',\n 4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n container?: {\n /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n desktopSpan: number\n /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n mobileSpan: number\n }\n}\n\nexport interface StylesProps {\n /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32\u6216\u5BF9\u8C61 */\n style?: string | React.CSSProperties\n /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n uid?: string\n /** \u662F\u5426\u7981\u7528 */\n disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n const keyString = getKeyPropsString(props)\n return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n const { style, uid, disabled } = props\n return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n const { desktopSpan, mobileSpan } = props?.container || {}\n const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n WrappedComponent: React.ComponentType<P>,\n defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n const withLayout = React.forwardRef<\n any,\n Omit<P, keyof StylesProps> &\n Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n >((props, ref) => {\n const propsStyleProps = getStylesProps(props)\n\n // \u5C06 style \u5BF9\u8C61\u8F6C\u6362\u4E3A\u5B57\u7B26\u4E32\n const styleToString = (style: string | React.CSSProperties | undefined): string => {\n if (!style) return ''\n if (typeof style === 'string') return style\n return (\n Object.entries(style)\n .map(([key, value]) => {\n const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()\n return `${cssKey}: ${value}`\n })\n .join('; ') + ';'\n )\n }\n\n // \u5408\u5E76 style \u5B57\u6BB5\uFF0C\u907F\u514D\u8986\u76D6\uFF0C\u786E\u4FDD\u6BCF\u4E2A\u6837\u5F0F\u90FD\u4EE5\u5206\u53F7\u7ED3\u5C3E\n const mergedStyle = [defaultLayoutProps?.style, propsStyleProps?.style]\n .map(styleToString)\n .filter((style): style is string => Boolean(style))\n .map(style => (style.trim().endsWith(';') ? style : `${style};`))\n .join(' ')\n\n const finalStyleProps = {\n ...defaultLayoutProps,\n ...propsStyleProps,\n ...(mergedStyle && { style: mergedStyle }),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n const WithContainerWrapper = (props: any) => {\n return (\n <Container className={`${className} ${(props as any)?.className}`}>\n <Grid className=\"container_grid\">\n <GridItem className={getContainerClassName(props)}>\n <WrappedComponent {...(props as unknown as P)} ref={ref} />\n </GridItem>\n </Grid>\n </Container>\n )\n }\n\n const WithoutContainerWrapper = (props: any) => {\n return (\n <WrappedComponent\n {...(props as unknown as P)}\n className={`${className} ${(props as any)?.className}`}\n ref={ref}\n />\n )\n }\n\n return (\n <>\n <ErrorBoundary>\n {StyleComponent}\n {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n ? WithContainerWrapper(props)\n : WithoutContainerWrapper(props)}\n </ErrorBoundary>\n </>\n )\n })\n\n // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n return withLayout\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "withLayout", "WrappedComponent", "defaultLayoutProps", "ref", "propsStyleProps", "styleToString", "key", "value", "mergedStyle", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
|
|
7
7
|
}
|