@anker-in/headless-ui 1.1.80 → 1.1.81
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.d.ts +36 -1
- package/dist/cjs/biz-components/ActivitySchedule/index.d.ts +3 -1
- package/dist/cjs/biz-components/AiuiProvider/index.d.ts +13 -1
- package/dist/cjs/biz-components/AiuiProvider/index.js +1 -1
- package/dist/cjs/biz-components/AiuiProvider/index.js.map +3 -3
- package/dist/cjs/biz-components/AiuiProvider/useAutoTracking.d.ts +17 -0
- package/dist/cjs/biz-components/AiuiProvider/useAutoTracking.js +2 -0
- package/dist/cjs/biz-components/AiuiProvider/useAutoTracking.js.map +7 -0
- package/dist/cjs/biz-components/AnchorNavigation/index.d.ts +2 -7
- package/dist/cjs/biz-components/AnchorNavigation/index.js +1 -1
- package/dist/cjs/biz-components/AnchorNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/AplusDesc/index.d.ts +17 -1
- package/dist/cjs/biz-components/BrandCardLink/BrandCardLink.d.ts +2 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.d.ts +2 -1
- package/dist/cjs/biz-components/Category/index.d.ts +1 -1
- package/dist/cjs/biz-components/CreativeModule/index.d.ts +7 -1
- package/dist/cjs/biz-components/DownLoad/index.d.ts +6 -1
- package/dist/cjs/biz-components/Evaluate/index.d.ts +1 -1
- package/dist/cjs/biz-components/Faq/Faq.d.ts +3 -2
- package/dist/cjs/biz-components/FeatureCards/FeatureCards.d.ts +3 -1
- package/dist/cjs/biz-components/FeatureShowcase/FeatureShowcase.d.ts +3 -1
- package/dist/cjs/biz-components/Features/index.d.ts +8 -1
- package/dist/cjs/biz-components/FootCharger/index.d.ts +7 -1
- package/dist/cjs/biz-components/FooterNavigation/index.d.ts +2 -1
- package/dist/cjs/biz-components/GiftBox/index.d.ts +3 -1
- package/dist/cjs/biz-components/GiftShelf/index.d.ts +3 -1
- package/dist/cjs/biz-components/GiftTierShelf/index.d.ts +3 -1
- package/dist/cjs/biz-components/Graphic/index.d.ts +1 -1
- package/dist/cjs/biz-components/GraphicAttractionBlock/index.d.ts +1 -1
- package/dist/cjs/biz-components/GraphicMore/index.d.ts +7 -1
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.d.ts +10 -2
- package/dist/cjs/biz-components/HeaderNavigation/index.d.ts +3 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.d.ts +5 -1
- package/dist/cjs/biz-components/ImageTextFeature/ImageTextFeature.d.ts +3 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.d.ts +3 -1
- package/dist/cjs/biz-components/Ksp/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.d.ts +11 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.d.ts +26 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.d.ts +11 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/index.d.ts +2 -1
- package/dist/cjs/biz-components/Marquee/Marquee.d.ts +3 -2
- package/dist/cjs/biz-components/MarqueeReview/index.d.ts +1 -1
- package/dist/cjs/biz-components/MediaEndorsement/index.d.ts +2 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.d.ts +2 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerMulti/index.d.ts +2 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.d.ts +5 -1
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts +2 -1
- package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.d.ts +1 -1
- package/dist/cjs/biz-components/MemberEquity/index.d.ts +3 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +17 -2
- package/dist/cjs/biz-components/NavigationSearch/index.d.ts +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js.map +3 -3
- package/dist/cjs/biz-components/ProductCompare/index.d.ts +1 -1
- package/dist/cjs/biz-components/ProductHero/ProductHero.d.ts +3 -1
- package/dist/cjs/biz-components/ProductNav/ProductNav.d.ts +2 -1
- package/dist/cjs/biz-components/PromotionalBar/index.d.ts +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/index.d.ts +2 -7
- package/dist/cjs/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/index.js.map +3 -3
- package/dist/cjs/biz-components/SelectStore/index.d.ts +7 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.d.ts +3 -1
- package/dist/cjs/biz-components/Slogan/index.d.ts +3 -1
- package/dist/cjs/biz-components/Spacer/index.d.ts +3 -1
- package/dist/cjs/biz-components/Specs/index.d.ts +1 -1
- package/dist/cjs/biz-components/SpecsComparison/SpecsComparison.d.ts +3 -1
- package/dist/cjs/biz-components/TabWithImage/TabWithImage.d.ts +3 -1
- package/dist/cjs/biz-components/Tabs/Tabs.d.ts +3 -1
- package/dist/cjs/biz-components/TabsGroup/index.d.ts +3 -1
- package/dist/cjs/biz-components/TabsWithMedia/TabsWithMedia.d.ts +3 -1
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.d.ts +3 -1
- package/dist/cjs/biz-components/Title/index.d.ts +1 -1
- package/dist/cjs/biz-components/VideoFeature/VideoFeature.d.ts +3 -1
- package/dist/cjs/biz-components/WheelLottery/index.d.ts +1 -1
- package/dist/cjs/biz-components/WhyChoose/WhyChoose.d.ts +3 -2
- package/dist/cjs/helpers/ScrollLoadVideo.js +1 -1
- package/dist/cjs/helpers/ScrollLoadVideo.js.map +2 -2
- package/dist/cjs/shared/Styles.d.ts +2 -1
- package/dist/cjs/shared/Styles.js +1 -1
- package/dist/cjs/shared/Styles.js.map +2 -2
- package/dist/esm/biz-components/AccordionCards/index.d.ts +36 -1
- package/dist/esm/biz-components/ActivitySchedule/index.d.ts +3 -1
- package/dist/esm/biz-components/AiuiProvider/index.d.ts +13 -1
- package/dist/esm/biz-components/AiuiProvider/index.js +1 -1
- package/dist/esm/biz-components/AiuiProvider/index.js.map +3 -3
- package/dist/esm/biz-components/AiuiProvider/useAutoTracking.d.ts +17 -0
- package/dist/esm/biz-components/AiuiProvider/useAutoTracking.js +2 -0
- package/dist/esm/biz-components/AiuiProvider/useAutoTracking.js.map +7 -0
- package/dist/esm/biz-components/AnchorNavigation/index.d.ts +2 -7
- package/dist/esm/biz-components/AnchorNavigation/index.js +1 -1
- package/dist/esm/biz-components/AnchorNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/AplusDesc/index.d.ts +17 -1
- package/dist/esm/biz-components/BrandCardLink/BrandCardLink.d.ts +2 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.d.ts +2 -1
- package/dist/esm/biz-components/Category/index.d.ts +1 -1
- package/dist/esm/biz-components/CreativeModule/index.d.ts +7 -1
- package/dist/esm/biz-components/DownLoad/index.d.ts +6 -1
- package/dist/esm/biz-components/Evaluate/index.d.ts +1 -1
- package/dist/esm/biz-components/Faq/Faq.d.ts +3 -2
- package/dist/esm/biz-components/FeatureCards/FeatureCards.d.ts +3 -1
- package/dist/esm/biz-components/FeatureShowcase/FeatureShowcase.d.ts +3 -1
- package/dist/esm/biz-components/Features/index.d.ts +8 -1
- package/dist/esm/biz-components/FootCharger/index.d.ts +7 -1
- package/dist/esm/biz-components/FooterNavigation/index.d.ts +2 -1
- package/dist/esm/biz-components/GiftBox/index.d.ts +3 -1
- package/dist/esm/biz-components/GiftShelf/index.d.ts +3 -1
- package/dist/esm/biz-components/GiftTierShelf/index.d.ts +3 -1
- package/dist/esm/biz-components/Graphic/index.d.ts +1 -1
- package/dist/esm/biz-components/GraphicAttractionBlock/index.d.ts +1 -1
- package/dist/esm/biz-components/GraphicMore/index.d.ts +7 -1
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.d.ts +10 -2
- package/dist/esm/biz-components/HeaderNavigation/index.d.ts +3 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.d.ts +5 -1
- package/dist/esm/biz-components/ImageTextFeature/ImageTextFeature.d.ts +3 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.d.ts +3 -1
- package/dist/esm/biz-components/Ksp/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.d.ts +11 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.d.ts +26 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.d.ts +11 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/index.d.ts +2 -1
- package/dist/esm/biz-components/Marquee/Marquee.d.ts +3 -2
- package/dist/esm/biz-components/MarqueeReview/index.d.ts +1 -1
- package/dist/esm/biz-components/MediaEndorsement/index.d.ts +2 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.d.ts +2 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerMulti/index.d.ts +2 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.d.ts +5 -1
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts +2 -1
- package/dist/esm/biz-components/MediaSceneSwitcherV2/index.d.ts +1 -1
- package/dist/esm/biz-components/MemberEquity/index.d.ts +3 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +17 -2
- package/dist/esm/biz-components/NavigationSearch/index.d.ts +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js.map +3 -3
- package/dist/esm/biz-components/ProductCompare/index.d.ts +1 -1
- package/dist/esm/biz-components/ProductHero/ProductHero.d.ts +3 -1
- package/dist/esm/biz-components/ProductNav/ProductNav.d.ts +2 -1
- package/dist/esm/biz-components/PromotionalBar/index.d.ts +1 -1
- package/dist/esm/biz-components/SecondaryBanner/index.d.ts +2 -7
- package/dist/esm/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/esm/biz-components/SecondaryBanner/index.js.map +3 -3
- package/dist/esm/biz-components/SelectStore/index.d.ts +7 -1
- package/dist/esm/biz-components/ShelfDisplay/index.d.ts +3 -1
- package/dist/esm/biz-components/Slogan/index.d.ts +3 -1
- package/dist/esm/biz-components/Spacer/index.d.ts +3 -1
- package/dist/esm/biz-components/Specs/index.d.ts +1 -1
- package/dist/esm/biz-components/SpecsComparison/SpecsComparison.d.ts +3 -1
- package/dist/esm/biz-components/TabWithImage/TabWithImage.d.ts +3 -1
- package/dist/esm/biz-components/Tabs/Tabs.d.ts +3 -1
- package/dist/esm/biz-components/TabsGroup/index.d.ts +3 -1
- package/dist/esm/biz-components/TabsWithMedia/TabsWithMedia.d.ts +3 -1
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.d.ts +3 -1
- package/dist/esm/biz-components/Title/index.d.ts +1 -1
- package/dist/esm/biz-components/VideoFeature/VideoFeature.d.ts +3 -1
- package/dist/esm/biz-components/WheelLottery/index.d.ts +1 -1
- package/dist/esm/biz-components/WhyChoose/WhyChoose.d.ts +3 -2
- package/dist/esm/helpers/ScrollLoadVideo.js +1 -1
- package/dist/esm/helpers/ScrollLoadVideo.js.map +2 -2
- package/dist/esm/shared/Styles.d.ts +2 -1
- package/dist/esm/shared/Styles.js +1 -1
- package/dist/esm/shared/Styles.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\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 MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: {\n title,\n videoTitle,\n btnText,\n youtubeId,\n video,\n mobileVideo,\n theme,\n img,\n shape,\n titleAnimation = 'fade-in',\n ...dataRest\n },\n ...rest\n },\n ref\n ) => {\n const { sticky } = dataRest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const btnFadeInRef = useRef<HTMLButtonElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = 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 }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\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 if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n if (btnFadeInRef.current) {\n gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n }\n },\n })\n }\n\n function gsapVideoHeightResize() {\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom top`,\n // markers: true,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n setVideoHeightProgress(progress)\n },\n })\n }\n\n if (inView) {\n gsapResize()\n gsapVideoHeightResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n heightTriggerRef.current && heightTriggerRef.current.kill()\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n {...rest}\n ref={titleRef}\n className={cn(\n 'pointer-events-none relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div\n {...(!sticky ? rest : {})}\n style={\n sticky\n ? {\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }\n : { zIndex: 5 }\n }\n className={cn('relative', className)}\n >\n <div className=\"sticky top-0 \">\n <div\n id={id}\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && (\n <div\n className={cn(\n 'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n )}\n >\n {title_html && (\n <div\n ref={titleFadeInRef}\n className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {btnText && (\n <Button\n ref={btnFadeInRef}\n variant=\"link\"\n className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n </Button>\n )}\n </div>\n )}\n <div\n className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n >\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full !h-auto\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block min-h-screen w-full\"\n videoClassName=\"object-cover w-full h-auto\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n {sticky && (\n <div\n className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n )}\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
-
"mappings": "aAuMM,mBAAAA,GAmBc,OAAAC,EAFJ,QAAAC,MAjBV,oBAtMN,OAAS,YAAAC,EAAU,UAAAC,EAAQ,WAAAC,GAAS,aAAAC,EAAW,cAAAC,GAAY,uBAAAC,OAA2B,QACtF,OAAS,YAAAC,OAAgB,SACzB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAOC,MAAY,6BACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAS,wBAAAC,MAA4B,oCAGrC,OAAS,aAAAC,OAAiB,8BAE1B,OAAS,eAAAC,OAAmB,6BAC5B,OAAOC,MAAqB,mCAC5B,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,OAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAGtBJ,EAAK,eAAeE,EAAeD,EAAS,EAE5C,MAAMI,GAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,GAAkBpB,GACtB,CACE,CACE,UAAAqB,EAAY,GACZ,GAAAC,EACA,WAAAC,EACA,KAAM,CACJ,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,YAAAC,GACA,MAAAC,EACA,IAAAC,EACA,MAAAC,EACA,eAAAC,EAAiB,UACjB,GAAGC,EACL,EACA,GAAGC,CACL,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIH,GACb,CAACI,EAAWC,CAAY,EAAI3C,EAAS,EAAK,EAC1C,CAAC4C,EAAKC,EAAM,EAAI7C,EAAS,CAAC,EAC1B,CAAC8C,GAAaC,EAAc,EAAI/C,EAAS,CAAC,EAC1C,CAACgD,EAAqBC,EAAsB,EAAIjD,EAAS,CAAC,EAC1D,CAACkD,EAASC,CAAU,EAAInD,EAAkB,EAAK,EAE/CoD,EAAWnD,EAAyB,IAAI,EACxCoD,EAAQpD,EAAyB,IAAI,EACrCqD,EAAWrD,EAAuB,IAAI,EACtCsD,EAAiBtD,EAAuB,IAAI,EAC5CuD,EAAWvD,EAAuB,IAAI,EACtCwD,EAAoBxD,EAAyB,IAAI,EACjDyD,EAAezD,EAA0B,IAAI,EAC7C0D,EAAmB1D,EAA6B,IAAI,EACpD2D,EAAmB3D,EAA6B,IAAI,EACpD,CAAE,IAAK4D,GAAW,OAAAC,CAAO,EAAIlD,GAAU,EAE7CP,GAAoBmC,GAAK,IAAMc,EAAS,OAAyB,EAEjE,MAAMS,EACJ,OAAOnC,GAAU,SAAWA,EAAQA,GAASjB,EAAqB,CAAE,KAAMiB,EAAO,WAAYR,EAAe,CAAC,EACzG4C,EACJ,OAAOnC,GAAe,SAClBA,EACAA,GAAclB,EAAqB,CAAE,KAAMkB,EAAY,WAAYT,EAAe,CAAC,EAEzFjB,EAAU,IAAM,CACV2D,GACFV,EAAS,SAAS,KAAK,EACvBT,EAAa,EAAI,IAEjBS,EAAS,SAAS,MAAM,EACxBT,EAAa,EAAK,EAEtB,EAAG,CAACmB,CAAM,CAAC,EAEX,MAAMG,EAAwB3D,GAAS,IAAM,CAC3C,GAAIgD,EAAS,QAAS,CACpB,MAAMY,EAAOZ,EAAS,QAAQ,sBAAsB,EAC9Ca,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CxB,GAAOyB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIhB,EAAS,QAAS,CACpB,MAAMR,EAAcQ,EAAS,QAAQ,aAC/Ba,EAAe,OAAO,YAC5BpB,GAAeD,EAAcqB,CAAY,CAC3C,CACF,EAAG,GAAG,EAENhE,EAAU,KACR8D,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,EAEL9D,EAAU,IAAM,CACd,SAASoE,GAAa,CACpB,GAAI,CAAChB,EAAe,SAAWlB,IAAmB,UAAW,OAC7D,MAAMmC,EAASjB,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAIzC,GAAUuC,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMkB,EAAQhB,EAAkB,QAAQ,MACxC1C,EAAK,IAAI0D,EAAO,CAAE,QAAS,CAAE,CAAC,EAC1Bf,EAAa,SAAS3C,EAAK,IAAI2C,EAAa,QAAS,CAAE,QAAS,CAAE,CAAC,EACvEC,EAAiB,QAAU1C,EAAc,OAAO,CAC9C,QAASqC,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQkB,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,GAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,GAAU,EAAIE,GAC3BI,GAAQL,IAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CpE,EAAK,IAAIgE,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACDpE,EAAK,IAAIsC,EAAM,QAAS,CAAE,QAASsB,CAAS,CAAC,EACzCjB,EAAa,SACf3C,EAAK,IAAI2C,EAAa,QAAS,CAAE,QAASiB,GAAY,GAAM,EAAI,CAAE,CAAC,CAEvE,CACF,CAAC,CACH,CAEA,SAASS,GAAwB,CAC/BxB,EAAiB,QAAU3C,EAAc,OAAO,CAC9C,QAASqC,EAAS,QAClB,MAAO,gBACP,IAAK,aAEL,MAAO,GACP,SAAWoB,GAAc,CACvB,MAAMC,EAAWD,EAAK,SACtBzB,GAAuB0B,CAAQ,CACjC,CACF,CAAC,CACH,CAEA,OAAIb,IACFS,EAAW,EACXa,EAAsB,GAGjB,IAAM,CACX3B,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DE,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACvB,EAAgByB,CAAM,CAAC,EAE3BjD,GAAY2C,EAAU,CACpB,cAAArC,GACA,cAAAD,GACA,eAAgB6C,CAClB,CAAC,EAED,MAAMsB,GAAcnF,GAAQ,IACtB4D,GAAUd,EAAsB,GAAKA,EAAsB,GAAY,EACvEc,EAAe,EACZ,EACN,CAACd,EAAqBc,CAAM,CAAC,EAE1BwB,EACJ,6NACF,OACEvF,EAAAF,GAAA,CACG,UAAA4C,GACC3C,EAAC,OACE,GAAGyC,EACJ,IAAKe,EACL,UAAW/C,EACT,oCACA+E,EACA,CACE,YAAapD,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,SAAA3B,EAAC,OAAI,IAAK+D,GACP,UAACxB,GACAtC,EAAC,OAAI,UAAU,yGACZ,UAAAgE,GAAc,CAACrB,GACd5C,EAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQiE,CAAW,EAChD,EAEDC,GAAmBtB,GAClB5C,EAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQkE,CAAgB,EACrD,EAEDlC,GACChC,EAACW,EAAA,CACC,QAAQ,OACR,UAAWF,EAAG,kDAAkD,EAChE,QAAS,IAAM,CACb4C,EAAW,EAAI,EAYfxB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,EAEF/B,EAAC,OACE,GAAK0C,EAAgB,CAAC,EAARF,EACf,MACEE,EACI,CACE,aAAc,IAAIG,CAAG,KACrB,UAAW,IAAIE,EAAW,KAC1B,OAAQuC,EACV,EACA,CAAE,OAAQ,CAAE,EAElB,UAAW9E,EAAG,WAAYkB,CAAS,EAEnC,UAAA3B,EAAC,OAAI,UAAU,gBACb,SAAAC,EAAC,OACC,GAAI2B,EACJ,UAAWnB,EAAG,2BAA4BkC,EAAS,kBAAoB6C,EAAQ,CAC7E,YAAapD,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,WAClBtC,EAAC,OACC,UAAWQ,EACT,wFACAkC,EAAS,qDAAuD,cAClE,EAEC,UAAAsB,GACCjE,EAAC,OACC,IAAKyD,EACL,UAAU,kHACV,wBAAyB,CAAE,OAAQQ,CAAW,EAChD,EAEDjC,GACChC,EAACW,EAAA,CACC,IAAKiD,EACL,QAAQ,OACR,UAAWnD,EAAG,2EAA2E,EACzF,QAAS,IAAM,CACb4C,EAAW,EAAI,EACfxB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EACH,GAEJ,EAEF/B,EAAC,OACC,UAAU,6DACV,MAAO,CAAE,OAAQ,GAAG,IAAMiD,EAAsB,GAAG,IAAK,EAExD,UAAAlD,EAACgB,EAAA,CACC,SAAUsC,EACV,OAAQjB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,wCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\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 MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: {\n title,\n videoTitle,\n btnText,\n youtubeId,\n video,\n mobileVideo,\n theme,\n img,\n shape,\n titleAnimation = 'fade-in',\n ...dataRest\n },\n ...rest\n },\n ref\n ) => {\n const { sticky } = dataRest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const btnFadeInRef = useRef<HTMLButtonElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = 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 }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\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 if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n if (btnFadeInRef.current) {\n gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n }\n },\n })\n }\n\n function gsapVideoHeightResize() {\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom top`,\n // markers: true,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n setVideoHeightProgress(progress)\n },\n })\n }\n\n if (inView) {\n gsapResize()\n gsapVideoHeightResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n heightTriggerRef.current && heightTriggerRef.current.kill()\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n {...rest}\n ref={titleRef}\n className={cn(\n 'pointer-events-none relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div\n {...(!sticky ? rest : {})}\n style={\n sticky\n ? {\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }\n : { zIndex: 5 }\n }\n className={cn('relative', className)}\n >\n <div className=\"sticky top-0 \">\n <div\n id={id}\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && (\n <div\n className={cn(\n 'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n )}\n >\n {title_html && (\n <div\n ref={titleFadeInRef}\n className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {btnText && (\n <Button\n ref={btnFadeInRef}\n variant=\"link\"\n className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n </Button>\n )}\n </div>\n )}\n <div\n className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n >\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full !h-auto\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline=\"true\"\n x5-playsinline=\"true\"\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block min-h-screen w-full\"\n videoClassName=\"object-cover w-full h-auto\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline=\"true\"\n x5-playsinline=\"true\"\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n {sticky && (\n <div\n className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n )}\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "btnFadeInRef", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "aspect", "MediaPlayerBase_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
import type { MediaPlayerMultiProps } from './types.js';
|
|
2
|
+
declare const _default: import("react").ForwardRefExoticComponent<MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
2
3
|
export default _default;
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { MediaPlayerBaseProps } from './types.js';
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<MediaPlayerBaseProps & React.RefAttributes<{
|
|
4
|
+
mediaPlayerStickyRef: HTMLDivElement;
|
|
5
|
+
}> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
2
6
|
export default _default;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { MediaSceneSwitcherProps } from './types.js';
|
|
1
2
|
import 'swiper/css';
|
|
2
|
-
declare const _default:
|
|
3
|
+
declare const _default: import("react").ForwardRefExoticComponent<MediaSceneSwitcherProps & import("react").RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
3
4
|
export default _default;
|
|
@@ -54,5 +54,5 @@ export interface MediaSceneSwitcherV2Props extends React.HTMLAttributes<HTMLDivE
|
|
|
54
54
|
/** 场景切换回调 */
|
|
55
55
|
onSceneChange?: (index: number, scene: MediaSceneSwitcherV2Item) => void;
|
|
56
56
|
}
|
|
57
|
-
declare const _default:
|
|
57
|
+
declare const _default: React.ForwardRefExoticComponent<MediaSceneSwitcherV2Props & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
58
58
|
export default _default;
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { MemberEquityProps } from './types.js';
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<MemberEquityProps & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & React.RefAttributes<any>>;
|
|
2
4
|
export default _default;
|
|
@@ -1,4 +1,19 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { MultiLayoutGraphicBlockProps, Item } from './types';
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
4
|
+
onSecondaryButtonClick?: () => void;
|
|
5
|
+
onPrimaryButtonClick?: () => void;
|
|
6
|
+
data: {
|
|
7
|
+
shape?: import("../../types/props").Shape;
|
|
8
|
+
sectionTitle?: string;
|
|
9
|
+
groupByTab?: boolean;
|
|
10
|
+
items: ({
|
|
11
|
+
width?: "full" | "half" | "one-third";
|
|
12
|
+
} & Item)[];
|
|
13
|
+
carousel?: {
|
|
14
|
+
items: Item[];
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
} & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
3
18
|
export default _default;
|
|
4
19
|
export type { MultiLayoutGraphicBlockProps };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { NavigationSearchProps } from './types.js';
|
|
2
2
|
export declare const canSearch: (target: any) => boolean;
|
|
3
|
-
declare const
|
|
4
|
-
export default
|
|
3
|
+
declare const _default: import("react").ForwardRefExoticComponent<NavigationSearchProps & import("react").RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
4
|
+
export default _default;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{Fragment as E,jsx as o,jsxs as s}from"react/jsx-runtime";import{Picture as w,Text as l,Button as j,Container as M,Link as v,Heading as L,Grid as V,GridItem as R}from"../../components/index.js";import{Search as J,Close as O}from"../HeaderNavigation/icons/index.js";import{forwardRef as Q,useCallback as C,useMemo as D,useState as F,useEffect as U,useRef as X}from"react";import{useAiuiContext as Y}from"../AiuiProvider/index.js";import{getLocalizedPath as n}from"../../helpers/utils.js";import{SearchStatus as h}from"./types.js";import{debounce as
|
|
1
|
+
import{Fragment as E,jsx as o,jsxs as s}from"react/jsx-runtime";import{Picture as w,Text as l,Button as j,Container as M,Link as v,Heading as L,Grid as V,GridItem as R}from"../../components/index.js";import{Search as J,Close as O}from"../HeaderNavigation/icons/index.js";import{forwardRef as Q,useCallback as C,useMemo as D,useState as F,useEffect as U,useRef as X}from"react";import{useAiuiContext as Y}from"../AiuiProvider/index.js";import{getLocalizedPath as n}from"../../helpers/utils.js";import{withLayout as Z}from"../../shared/Styles.js";import{SearchStatus as h}from"./types.js";import{debounce as ee}from"es-toolkit";import{cn as g,atobID as I,highlightSearchWord as te}from"../../helpers/utils.js";const oe=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),S=Q(({data:t,onSearch:c,onClose:p,searchResult:i,isSearching:d,keywords:m,className:P,...T},B)=>{const{locale:a="us",copyWriting:ae}=Y(),[r,A]=F(""),[k,y]=F(!1),f=X(null);U(()=>{f.current&&f.current.focus({preventScroll:!0})},[]);const _=ee(e=>{c(e)},300),z=C(e=>{e.key==="Enter"&&!k&&window.open(n(`${t?.moreLink}?q=${r.toLowerCase()}`,a),"_self")},[k,r,a,t?.moreLink]),W=D(()=>Array.isArray(m)&&m?.length?m.map(e=>e.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(e=>e.popularWord):[],[m,t?.popularWords]),q=C(e=>{switch(e.__typename||e.type){case"Product":return n(`/products${e.path}?q=${r.toLowerCase()}`,a);case"Article":return n(`/blogs/${e.blog.handle}/${e.handle.replace("storefront-","")}?q=${r.toLowerCase()}`,a);default:break}},[r,a]),N=D(()=>{if(r){if(i?.totalCount)return h.Predict;if(!d)return h.Empty}else return h.Default},[i?.totalCount,r,d]);return s(M,{childClassName:"!bg-white",...T,className:g("relative",P),ref:B,children:[o("style",{children:`
|
|
2
2
|
.navigation-search-component input:-webkit-autofill,
|
|
3
3
|
.navigation-search-component input:-webkit-autofill:hover,
|
|
4
4
|
.navigation-search-component input:-webkit-autofill:focus {
|
|
@@ -7,5 +7,5 @@ import{Fragment as E,jsx as o,jsxs as s}from"react/jsx-runtime";import{Picture a
|
|
|
7
7
|
transition: background-color 9999s ease-in-out 0s !important;
|
|
8
8
|
caret-color: #000;
|
|
9
9
|
}
|
|
10
|
-
`}),s("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black",children:[o("input",{ref:f,value:r,onCompositionStart:()=>y(!0),onCompositionEnd:()=>y(!1),onKeyDown:z,onChange:e=>{A(e.target.value),e.target.value&&_(e.target.value)},type:"text",className:"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none",placeholder:t?.placeholder}),s("div",{className:"flex items-center gap-3",children:[o(J,{className:"size-5 cursor-pointer",onClick:()=>c(r)}),o("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),o(O,{className:"size-5 cursor-pointer",onClick:p})]})]}),o("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:N===h.Predict?s(E,{children:[s("div",{children:[s("div",{className:"flex items-center gap-1",children:[o(l,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i?.items?.length>6&&o(j,{as:"a",iconClassName:"size-4",href:n(`${t?.moreLink}?q=${r.toLowerCase()}`,a),className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),o("div",{className:"mt-2 flex flex-col",children:i?.items?.filter(e=>
|
|
10
|
+
`}),s("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black",children:[o("input",{ref:f,value:r,onCompositionStart:()=>y(!0),onCompositionEnd:()=>y(!1),onKeyDown:z,onChange:e=>{A(e.target.value),e.target.value&&_(e.target.value)},type:"text",className:"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none",placeholder:t?.placeholder}),s("div",{className:"flex items-center gap-3",children:[o(J,{className:"size-5 cursor-pointer",onClick:()=>c(r)}),o("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),o(O,{className:"size-5 cursor-pointer",onClick:p})]})]}),o("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:N===h.Predict?s(E,{children:[s("div",{children:[s("div",{className:"flex items-center gap-1",children:[o(l,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i?.items?.length>6&&o(j,{as:"a",iconClassName:"size-4",href:n(`${t?.moreLink}?q=${r.toLowerCase()}`,a),className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),o("div",{className:"mt-2 flex flex-col",children:i?.items?.filter(e=>oe(e)).slice(0,6)?.map(e=>o(v,{className:"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:q(e),children:o(l,{html:te(e.title,r),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},e.id))})]}),s("div",{children:[o(l,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&o(v,{asChild:!t?.advertisingLink,href:n(t?.advertisingLink,a),children:s("div",{className:"rounded-sidebar-shelf relative",children:[o(w,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(L,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:g("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),o(l,{html:t?.advertisingSubtitle||"20.000mAh",className:g("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),i?.items?.filter(e=>e.type.toLowerCase()==="product").slice(0,t?.advertisingBgImg?.url?7:8)?.map(e=>{const u=e?.variants?.[0],b=`${u?.image?.url||e?.images?.[0]?.url}`,x=e?.title||e?.name,G=e?.description,H=e?.badge||"",K=n(`/products/${e?.handle}?variant=${I(u?.id)}`,a);return o($,{productImage:b,productName:x,productDesc:G,productBadge:H,listingLink:K},e.id)})]})]},"predict-advertising-card")]}):s(E,{children:[N===h.Empty&&o(l,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{children:[o(l,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"mt-2",children:[o(se,{data:t,keywords:W,locale:a}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&o(V,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(e=>o(R,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:o("a",{href:n(`${t?.moreLink}?q=${e?.popularPage.toLowerCase()}`,a),className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:e?.popularPage})},e?.id))})]})]}),s("div",{children:[o(l,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&o(v,{asChild:!t?.advertisingLink,href:n(t?.advertisingLink,a),children:s("div",{className:"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[o(w,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(L,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:g("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),o(l,{html:t?.advertisingSubtitle||"20.000mAh",className:g("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),t?.hotProducts?.slice(0,t?.advertisingBgImg?.url?7:8)?.map(e=>{const u=e?.custom_description,b=e?.badge||"",x=n(`/products/${e?.handle}?variant=${I(e?.shopify_id)}`,a);return o($,{productImage:e?.image,productName:e?.name,productDesc:u,productBadge:b,listingLink:x},e.shopify_id||e.id)})]})]},"empty-advertising-card")]})})]})});S.displayName="NavigationSearch";const $=({productImage:t,productName:c,productDesc:p,productBadge:i,className:d,listingLink:m})=>o(v,{href:m,className:"block no-underline hover:text-current",children:s("div",{className:g("rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",d),children:[o("div",{className:"shrink-0",children:o("img",{src:t,loading:"lazy",alt:c,width:90,height:90,className:"size-[96px] object-contain"})}),s("div",{className:"relative",children:[o("div",{className:" h-[24px] ",children:i&&o(l,{as:"p",html:i,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"})}),s("div",{children:[o(l,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:c}),p&&o(l,{as:"p",html:p,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]})}),se=({data:t,keywords:c,locale:p})=>o("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:c?.map((i,d)=>o("a",{href:n(`${t?.moreLink}?q=${i?.toLowerCase()}`,p),className:"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:i},d))});var ue=Z(S);export{oe as canSearch,ue as default};
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/NavigationSearch/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n return !(\n target.metafields?.global?.HideSearch ||\n target.metafields?.seo?.hidden ||\n target.metafields?.seo?.setting?.noindex\n )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n ({ data, onSearch, onClose, searchResult, isSearching, keywords, className, ...rest }, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const [searchValue, setSearchValue] = useState('')\n const [isComposing, setIsComposing] = useState(false)\n const inputRef = useRef<HTMLInputElement>(null)\n\n // \u81EA\u52A8\u805A\u7126\u5230\u8F93\u5165\u6846\uFF08\u963B\u6B62\u6EDA\u52A8\u884C\u4E3A\uFF09\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.focus({ preventScroll: true })\n }\n }, [])\n\n const debouncedFunction = debounce((value: string) => {\n onSearch(value)\n }, 300)\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && !isComposing) {\n window.open(getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale), '_self')\n }\n },\n [isComposing, searchValue, locale, data?.moreLink]\n )\n\n const searchKeywords = useMemo(() => {\n if (Array.isArray(keywords) && keywords?.length) {\n return keywords.map((keyword: any) => keyword.search_term)\n }\n if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n return data?.popularWords.map((word: any) => word.popularWord)\n }\n return []\n }, [keywords, data?.popularWords])\n\n const getLink = useCallback(\n (item: any) => {\n const type = item.__typename || item.type\n switch (type) {\n case 'Product':\n return getLocalizedPath(`/products${item.path}?q=${searchValue.toLowerCase()}`, locale)\n case 'Article':\n return getLocalizedPath(\n `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`,\n locale\n )\n default:\n break\n }\n },\n [searchValue, locale]\n )\n\n const searchStatus = useMemo(() => {\n if (!searchValue) {\n // \u6CA1\u6709\u641C\u7D22\u503C\n return SearchStatus.Default\n } else if (searchResult?.totalCount) {\n // \u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Predict\n } else if (!isSearching) {\n // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Empty\n }\n }, [searchResult?.totalCount, searchValue, isSearching])\n\n return (\n <Container childClassName=\"!bg-white\" {...rest} className={cn('relative', className)} ref={ref}>\n <style>\n {`\n .navigation-search-component input:-webkit-autofill,\n .navigation-search-component input:-webkit-autofill:hover,\n .navigation-search-component input:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n -webkit-text-fill-color: #000 !important;\n transition: background-color 9999s ease-in-out 0s !important;\n caret-color: #000;\n }\n `}\n </style>\n <div className=\"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black\">\n <input\n ref={inputRef}\n value={searchValue}\n onCompositionStart={() => setIsComposing(true)}\n onCompositionEnd={() => setIsComposing(false)}\n onKeyDown={handleKeyDown}\n onChange={e => {\n setSearchValue(e.target.value)\n if (e.target.value) {\n debouncedFunction(e.target.value)\n }\n }}\n type=\"text\"\n className=\"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none\"\n placeholder={data?.placeholder}\n />\n <div className=\"flex items-center gap-3\">\n <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n <div className=\"h-[20px] w-px bg-[#E4E5E6]\" />\n <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n </div>\n </div>\n <div className=\"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black\">\n {searchStatus === SearchStatus.Predict ? (\n <>\n <div>\n <div className=\"flex items-center gap-1\">\n <Text html={data?.suggestText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n {searchResult?.items?.length > 6 && (\n <Button\n as=\"a\"\n iconClassName=\"size-4\"\n href={getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale)}\n className=\"!p-0 !text-sm font-bold leading-[1.2]\"\n variant=\"link\"\n >\n {data?.moreText}\n </Button>\n )}\n </div>\n <div className=\"mt-2 flex flex-col\">\n {searchResult?.items\n ?.filter((item: any) => canSearch(item))\n .slice(0, 6)\n ?.map((item: any) => (\n <Link\n className=\"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current\"\n href={getLink(item)}\n key={item.id}\n >\n <Text\n html={highlightSearchWord(item.title, searchValue)}\n className=\"cursor-pointer text-sm font-bold leading-[1.4]\"\n />\n </Link>\n ))}\n </div>\n </div>\n <div key=\"predict-advertising-card\">\n <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n {data?.advertisingBgImg?.url && (\n <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n <div className=\"rounded-sidebar-shelf relative\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className={cn('text-sm font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n )}\n {searchResult?.items\n ?.filter((item: any) => item.type.toLowerCase() === 'product')\n .slice(0, data?.advertisingBgImg?.url ? 7 : 8)\n ?.map((item: any) => {\n const variant = item?.variants?.[0]\n const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n const productName = item?.title || item?.name\n const productDesc = item?.description\n const productBadge = item?.badge || ''\n const listingLink = getLocalizedPath(\n `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`,\n locale\n )\n return (\n <SearchProduct\n productImage={productImage}\n productName={productName}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n ) : (\n <>\n {searchStatus === SearchStatus.Empty && (\n <Text\n html={data?.noResultText}\n as=\"p\"\n className=\"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n <div>\n <Text html={data?.popularText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"mt-2\">\n <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n <Grid className=\"laptop:gap-4 laptop:mt-4 mt-3 gap-3\">\n {data?.popularPages?.map((item: any) => (\n <GridItem\n key={item?.id}\n className=\"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]\"\n >\n <a\n href={getLocalizedPath(`${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`, locale)}\n className=\"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]\"\n >\n {item?.popularPage}\n </a>\n </GridItem>\n ))}\n </Grid>\n )}\n </div>\n </div>\n <div key=\"empty-advertising-card\">\n <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n {data?.advertisingBgImg?.url && (\n <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n <div className=\"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className={cn('text-sm font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n )}\n {data?.hotProducts?.slice(0, data?.advertisingBgImg?.url ? 7 : 8)?.map((item: any) => {\n const productDesc = item?.custom_description\n const productBadge = item?.badge || ''\n const listingLink = getLocalizedPath(\n `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`,\n locale\n )\n return (\n <SearchProduct\n productImage={item?.image}\n productName={item?.name}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.shopify_id || item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n )}\n </div>\n </Container>\n )\n }\n)\n\nNavigationSearch.displayName = 'NavigationSearch'\n\nconst SearchProduct = ({\n productImage,\n productName,\n productDesc,\n productBadge,\n className,\n listingLink,\n}: {\n productImage: string\n productName: string\n productDesc: string\n productBadge: string\n className?: string\n listingLink: string\n}) => {\n return (\n <Link href={listingLink} className=\"block no-underline hover:text-current\">\n <div\n className={cn(\n 'rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500',\n className\n )}\n >\n <div className=\"shrink-0\">\n <img\n src={productImage}\n loading=\"lazy\"\n alt={productName}\n width={90}\n height={90}\n className=\"size-[96px] object-contain\"\n />\n </div>\n <div className=\"relative\">\n <div className=\" h-[24px] \">\n {productBadge && (\n <Text\n as=\"p\"\n html={productBadge}\n className=\"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n />\n )}\n </div>\n <div>\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productName}\n />\n {productDesc && (\n <Text\n as=\"p\"\n html={productDesc}\n className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </div>\n </Link>\n )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n return (\n <div className=\"laptop:gap-4 flex flex-wrap gap-3\">\n {keywords?.map((keyword: any, index) => (\n <a\n href={getLocalizedPath(`${data?.moreLink}?q=${keyword?.toLowerCase()}`, locale)}\n key={index}\n className=\"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]\"\n >\n {keyword}\n </a>\n ))}\n </div>\n )\n}\n\nexport default NavigationSearch\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Picture", "Text", "Button", "Container", "Link", "Heading", "Grid", "GridItem", "SearchIcon", "CloseIcon", "forwardRef", "useCallback", "useMemo", "useState", "useEffect", "useRef", "useAiuiContext", "getLocalizedPath", "SearchStatus", "debounce", "cn", "atobID", "highlightSearchWord", "canSearch", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "className", "rest", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "inputRef", "debouncedFunction", "value", "handleKeyDown", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "index", "NavigationSearch_default"]
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n return !(\n target.metafields?.global?.HideSearch ||\n target.metafields?.seo?.hidden ||\n target.metafields?.seo?.setting?.noindex\n )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n ({ data, onSearch, onClose, searchResult, isSearching, keywords, className, ...rest }, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const [searchValue, setSearchValue] = useState('')\n const [isComposing, setIsComposing] = useState(false)\n const inputRef = useRef<HTMLInputElement>(null)\n\n // \u81EA\u52A8\u805A\u7126\u5230\u8F93\u5165\u6846\uFF08\u963B\u6B62\u6EDA\u52A8\u884C\u4E3A\uFF09\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.focus({ preventScroll: true })\n }\n }, [])\n\n const debouncedFunction = debounce((value: string) => {\n onSearch(value)\n }, 300)\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && !isComposing) {\n window.open(getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale), '_self')\n }\n },\n [isComposing, searchValue, locale, data?.moreLink]\n )\n\n const searchKeywords = useMemo(() => {\n if (Array.isArray(keywords) && keywords?.length) {\n return keywords.map((keyword: any) => keyword.search_term)\n }\n if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n return data?.popularWords.map((word: any) => word.popularWord)\n }\n return []\n }, [keywords, data?.popularWords])\n\n const getLink = useCallback(\n (item: any) => {\n const type = item.__typename || item.type\n switch (type) {\n case 'Product':\n return getLocalizedPath(`/products${item.path}?q=${searchValue.toLowerCase()}`, locale)\n case 'Article':\n return getLocalizedPath(\n `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`,\n locale\n )\n default:\n break\n }\n },\n [searchValue, locale]\n )\n\n const searchStatus = useMemo(() => {\n if (!searchValue) {\n // \u6CA1\u6709\u641C\u7D22\u503C\n return SearchStatus.Default\n } else if (searchResult?.totalCount) {\n // \u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Predict\n } else if (!isSearching) {\n // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Empty\n }\n }, [searchResult?.totalCount, searchValue, isSearching])\n\n return (\n <Container childClassName=\"!bg-white\" {...rest} className={cn('relative', className)} ref={ref}>\n <style>\n {`\n .navigation-search-component input:-webkit-autofill,\n .navigation-search-component input:-webkit-autofill:hover,\n .navigation-search-component input:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n -webkit-text-fill-color: #000 !important;\n transition: background-color 9999s ease-in-out 0s !important;\n caret-color: #000;\n }\n `}\n </style>\n <div className=\"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black\">\n <input\n ref={inputRef}\n value={searchValue}\n onCompositionStart={() => setIsComposing(true)}\n onCompositionEnd={() => setIsComposing(false)}\n onKeyDown={handleKeyDown}\n onChange={e => {\n setSearchValue(e.target.value)\n if (e.target.value) {\n debouncedFunction(e.target.value)\n }\n }}\n type=\"text\"\n className=\"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none\"\n placeholder={data?.placeholder}\n />\n <div className=\"flex items-center gap-3\">\n <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n <div className=\"h-[20px] w-px bg-[#E4E5E6]\" />\n <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n </div>\n </div>\n <div className=\"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black\">\n {searchStatus === SearchStatus.Predict ? (\n <>\n <div>\n <div className=\"flex items-center gap-1\">\n <Text html={data?.suggestText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n {searchResult?.items?.length > 6 && (\n <Button\n as=\"a\"\n iconClassName=\"size-4\"\n href={getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale)}\n className=\"!p-0 !text-sm font-bold leading-[1.2]\"\n variant=\"link\"\n >\n {data?.moreText}\n </Button>\n )}\n </div>\n <div className=\"mt-2 flex flex-col\">\n {searchResult?.items\n ?.filter((item: any) => canSearch(item))\n .slice(0, 6)\n ?.map((item: any) => (\n <Link\n className=\"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current\"\n href={getLink(item)}\n key={item.id}\n >\n <Text\n html={highlightSearchWord(item.title, searchValue)}\n className=\"cursor-pointer text-sm font-bold leading-[1.4]\"\n />\n </Link>\n ))}\n </div>\n </div>\n <div key=\"predict-advertising-card\">\n <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n {data?.advertisingBgImg?.url && (\n <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n <div className=\"rounded-sidebar-shelf relative\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className={cn('text-sm font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n )}\n {searchResult?.items\n ?.filter((item: any) => item.type.toLowerCase() === 'product')\n .slice(0, data?.advertisingBgImg?.url ? 7 : 8)\n ?.map((item: any) => {\n const variant = item?.variants?.[0]\n const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n const productName = item?.title || item?.name\n const productDesc = item?.description\n const productBadge = item?.badge || ''\n const listingLink = getLocalizedPath(\n `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`,\n locale\n )\n return (\n <SearchProduct\n productImage={productImage}\n productName={productName}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n ) : (\n <>\n {searchStatus === SearchStatus.Empty && (\n <Text\n html={data?.noResultText}\n as=\"p\"\n className=\"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n <div>\n <Text html={data?.popularText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"mt-2\">\n <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n <Grid className=\"laptop:gap-4 laptop:mt-4 mt-3 gap-3\">\n {data?.popularPages?.map((item: any) => (\n <GridItem\n key={item?.id}\n className=\"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]\"\n >\n <a\n href={getLocalizedPath(`${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`, locale)}\n className=\"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]\"\n >\n {item?.popularPage}\n </a>\n </GridItem>\n ))}\n </Grid>\n )}\n </div>\n </div>\n <div key=\"empty-advertising-card\">\n <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n {data?.advertisingBgImg?.url && (\n <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n <div className=\"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className={cn('text-sm font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n )}\n {data?.hotProducts?.slice(0, data?.advertisingBgImg?.url ? 7 : 8)?.map((item: any) => {\n const productDesc = item?.custom_description\n const productBadge = item?.badge || ''\n const listingLink = getLocalizedPath(\n `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`,\n locale\n )\n return (\n <SearchProduct\n productImage={item?.image}\n productName={item?.name}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.shopify_id || item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n )}\n </div>\n </Container>\n )\n }\n)\n\nNavigationSearch.displayName = 'NavigationSearch'\n\nconst SearchProduct = ({\n productImage,\n productName,\n productDesc,\n productBadge,\n className,\n listingLink,\n}: {\n productImage: string\n productName: string\n productDesc: string\n productBadge: string\n className?: string\n listingLink: string\n}) => {\n return (\n <Link href={listingLink} className=\"block no-underline hover:text-current\">\n <div\n className={cn(\n 'rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500',\n className\n )}\n >\n <div className=\"shrink-0\">\n <img\n src={productImage}\n loading=\"lazy\"\n alt={productName}\n width={90}\n height={90}\n className=\"size-[96px] object-contain\"\n />\n </div>\n <div className=\"relative\">\n <div className=\" h-[24px] \">\n {productBadge && (\n <Text\n as=\"p\"\n html={productBadge}\n className=\"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n />\n )}\n </div>\n <div>\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productName}\n />\n {productDesc && (\n <Text\n as=\"p\"\n html={productDesc}\n className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </div>\n </Link>\n )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n return (\n <div className=\"laptop:gap-4 flex flex-wrap gap-3\">\n {keywords?.map((keyword: any, index) => (\n <a\n href={getLocalizedPath(`${data?.moreLink}?q=${keyword?.toLowerCase()}`, locale)}\n key={index}\n className=\"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]\"\n >\n {keyword}\n </a>\n ))}\n </div>\n )\n}\n\nexport default withLayout(NavigationSearch)\n"],
|
|
5
|
+
"mappings": "AA6FQ,OAqCI,YAAAA,EArCJ,OAAAC,EA6BE,QAAAC,MA7BF,oBA5FR,OAAS,WAAAC,EAAS,QAAAC,EAAM,UAAAC,EAAQ,aAAAC,EAAW,QAAAC,EAAM,WAAAC,EAAS,QAAAC,EAAM,YAAAC,MAAgB,4BAChF,OAAS,UAAUC,EAAY,SAASC,MAAiB,qCACzD,OAAS,cAAAC,EAAY,eAAAC,EAAa,WAAAC,EAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QAE9E,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,oBAAAC,MAAwB,yBACjC,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,gBAAAC,MAAoB,aAE7B,OAAS,YAAAC,OAAgB,aACzB,OAAS,MAAAC,EAAI,UAAAC,EAAQ,uBAAAC,OAA2B,yBAEzC,MAAMC,GAAaC,GACjB,EACLA,EAAO,YAAY,QAAQ,YAC3BA,EAAO,YAAY,KAAK,QACxBA,EAAO,YAAY,KAAK,SAAS,SAI/BC,EAAmBhB,EACvB,CAAC,CAAE,KAAAiB,EAAM,SAAAC,EAAU,QAAAC,EAAS,aAAAC,EAAc,YAAAC,EAAa,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAK,EAAGC,IAAQ,CAC7F,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,EAAY,EAAIrB,EAAe,EAEhD,CAACsB,EAAaC,CAAc,EAAI1B,EAAS,EAAE,EAC3C,CAAC2B,EAAaC,CAAc,EAAI5B,EAAS,EAAK,EAC9C6B,EAAW3B,EAAyB,IAAI,EAG9CD,EAAU,IAAM,CACV4B,EAAS,SACXA,EAAS,QAAQ,MAAM,CAAE,cAAe,EAAK,CAAC,CAElD,EAAG,CAAC,CAAC,EAEL,MAAMC,EAAoBvB,GAAUwB,GAAkB,CACpDhB,EAASgB,CAAK,CAChB,EAAG,GAAG,EAEAC,EAAgBlC,EACnB,GAA6C,CACxC,EAAE,MAAQ,SAAW,CAAC6B,GACxB,OAAO,KAAKvB,EAAiB,GAAGU,GAAM,QAAQ,MAAMW,EAAY,YAAY,CAAC,GAAIF,CAAM,EAAG,OAAO,CAErG,EACA,CAACI,EAAaF,EAAaF,EAAQT,GAAM,QAAQ,CACnD,EAEMmB,EAAiBlC,EAAQ,IACzB,MAAM,QAAQoB,CAAQ,GAAKA,GAAU,OAChCA,EAAS,IAAKe,GAAiBA,EAAQ,WAAW,EAEvD,MAAM,QAAQpB,GAAM,YAAY,GAAKA,GAAM,cAAc,OACpDA,GAAM,aAAa,IAAKqB,GAAcA,EAAK,WAAW,EAExD,CAAC,EACP,CAAChB,EAAUL,GAAM,YAAY,CAAC,EAE3BsB,EAAUtC,EACbuC,GAAc,CAEb,OADaA,EAAK,YAAcA,EAAK,KACvB,CACZ,IAAK,UACH,OAAOjC,EAAiB,YAAYiC,EAAK,IAAI,MAAMZ,EAAY,YAAY,CAAC,GAAIF,CAAM,EACxF,IAAK,UACH,OAAOnB,EACL,UAAUiC,EAAK,KAAK,MAAM,IAAIA,EAAK,OAAO,QAAQ,cAAe,EAAE,CAAC,MAAMZ,EAAY,YAAY,CAAC,GACnGF,CACF,EACF,QACE,KACJ,CACF,EACA,CAACE,EAAaF,CAAM,CACtB,EAEMe,EAAevC,EAAQ,IAAM,CACjC,GAAK0B,EAGE,IAAIR,GAAc,WAEvB,OAAOX,EAAa,QACf,GAAI,CAACY,EAEV,OAAOZ,EAAa,UANpB,QAAOA,EAAa,OAQxB,EAAG,CAACW,GAAc,WAAYQ,EAAaP,CAAW,CAAC,EAEvD,OACEhC,EAACI,EAAA,CAAU,eAAe,YAAa,GAAG+B,EAAM,UAAWb,EAAG,WAAYY,CAAS,EAAG,IAAKE,EACzF,UAAArC,EAAC,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAUH,EACAC,EAAC,OAAI,UAAU,+JACb,UAAAD,EAAC,SACC,IAAK4C,EACL,MAAOJ,EACP,mBAAoB,IAAMG,EAAe,EAAI,EAC7C,iBAAkB,IAAMA,EAAe,EAAK,EAC5C,UAAWI,EACX,SAAU,GAAK,CACbN,EAAe,EAAE,OAAO,KAAK,EACzB,EAAE,OAAO,OACXI,EAAkB,EAAE,OAAO,KAAK,CAEpC,EACA,KAAK,OACL,UAAU,sHACV,YAAahB,GAAM,YACrB,EACA5B,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACU,EAAA,CAAW,UAAU,wBAAwB,QAAS,IAAMoB,EAASU,CAAW,EAAG,EACpFxC,EAAC,OAAI,UAAU,6BAA6B,EAC5CA,EAACW,EAAA,CAAU,UAAU,wBAAwB,QAASoB,EAAS,GACjE,GACF,EACA/B,EAAC,OAAI,UAAU,kEACZ,SAAAqD,IAAiBhC,EAAa,QAC7BpB,EAAAF,EAAA,CACE,UAAAE,EAAC,OACC,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACG,EAAA,CAAK,KAAM0B,GAAM,YAAa,UAAU,iDAAiD,EACzFG,GAAc,OAAO,OAAS,GAC7BhC,EAACI,EAAA,CACC,GAAG,IACH,cAAc,SACd,KAAMe,EAAiB,GAAGU,GAAM,QAAQ,MAAMW,EAAY,YAAY,CAAC,GAAIF,CAAM,EACjF,UAAU,wCACV,QAAQ,OAEP,SAAAT,GAAM,SACT,GAEJ,EACA7B,EAAC,OAAI,UAAU,qBACZ,SAAAgC,GAAc,OACX,OAAQoB,GAAc1B,GAAU0B,CAAI,CAAC,EACtC,MAAM,EAAG,CAAC,GACT,IAAKA,GACLpD,EAACM,EAAA,CACC,UAAU,sFACV,KAAM6C,EAAQC,CAAI,EAGlB,SAAApD,EAACG,EAAA,CACC,KAAMsB,GAAoB2B,EAAK,MAAOZ,CAAW,EACjD,UAAU,iDACZ,GALKY,EAAK,EAMZ,CACD,EACL,GACF,EACAnD,EAAC,OACC,UAAAD,EAACG,EAAA,CAAK,KAAM0B,GAAM,gBAAiB,UAAU,iDAAiD,EAC9F5B,EAAC,OAAI,UAAU,mIACZ,UAAA4B,GAAM,kBAAkB,KACvB7B,EAACM,EAAA,CAAK,QAAS,CAACuB,GAAM,gBAAiB,KAAMV,EAAiBU,GAAM,gBAAiBS,CAAM,EACzF,SAAArC,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACE,EAAA,CACC,OAAQ2B,GAAM,kBAAkB,IAChC,UAAU,6BACV,aAAa,sBACf,EACA5B,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACO,EAAA,CACC,KAAM,EACN,KAAMsB,GAAM,kBAAoB,eAChC,UAAWN,EAAG,uBAAwB,CACpC,aAAcM,GAAM,mBAAqB,MAC3C,CAAC,EACH,EACA7B,EAACG,EAAA,CACC,KAAM0B,GAAM,qBAAuB,YACnC,UAAWN,EAAG,+BAAgC,CAC5C,aAAcM,GAAM,mBAAqB,MAC3C,CAAC,EACH,GACF,GACF,EACF,EAEDG,GAAc,OACX,OAAQoB,GAAcA,EAAK,KAAK,YAAY,IAAM,SAAS,EAC5D,MAAM,EAAGvB,GAAM,kBAAkB,IAAM,EAAI,CAAC,GAC3C,IAAKuB,GAAc,CACnB,MAAME,EAAUF,GAAM,WAAW,CAAC,EAC5BG,EAAe,GAAGD,GAAS,OAAO,KAAOF,GAAM,SAAS,CAAC,GAAG,GAAG,GAC/DI,EAAcJ,GAAM,OAASA,GAAM,KACnCK,EAAcL,GAAM,YACpBM,EAAeN,GAAM,OAAS,GAC9BO,EAAcxC,EAClB,aAAaiC,GAAM,MAAM,YAAY5B,EAAO8B,GAAS,EAAY,CAAC,GAClEhB,CACF,EACA,OACEtC,EAAC4D,EAAA,CACC,aAAcL,EACd,YAAaC,EACb,YAAaC,EACb,aAAcC,EACd,YAAaC,GACRP,EAAK,EACZ,CAEJ,CAAC,GACL,IArDO,0BAsDT,GACF,EAEAnD,EAAAF,EAAA,CACG,UAAAsD,IAAiBhC,EAAa,OAC7BrB,EAACG,EAAA,CACC,KAAM0B,GAAM,aACZ,GAAG,IACH,UAAU,gFACZ,EAEF5B,EAAC,OACC,UAAAD,EAACG,EAAA,CAAK,KAAM0B,GAAM,YAAa,UAAU,iDAAiD,EAC1F5B,EAAC,OAAI,UAAU,OACb,UAAAD,EAAC6D,GAAA,CAAc,KAAMhC,EAAM,SAAUmB,EAAgB,OAAQV,EAAQ,EACpE,MAAM,QAAQT,GAAM,YAAY,GAAK,CAAC,CAACA,GAAM,cAAc,QAC1D7B,EAACQ,EAAA,CAAK,UAAU,sCACb,SAAAqB,GAAM,cAAc,IAAKuB,GACxBpD,EAACS,EAAA,CAEC,UAAU,gGAEV,SAAAT,EAAC,KACC,KAAMmB,EAAiB,GAAGU,GAAM,QAAQ,MAAMuB,GAAM,YAAY,YAAY,CAAC,GAAId,CAAM,EACvF,UAAU,8DAET,SAAAc,GAAM,YACT,GARKA,GAAM,EASb,CACD,EACH,GAEJ,GACF,EACAnD,EAAC,OACC,UAAAD,EAACG,EAAA,CAAK,KAAM0B,GAAM,gBAAiB,UAAU,iDAAiD,EAC9F5B,EAAC,OAAI,UAAU,mIACZ,UAAA4B,GAAM,kBAAkB,KACvB7B,EAACM,EAAA,CAAK,QAAS,CAACuB,GAAM,gBAAiB,KAAMV,EAAiBU,GAAM,gBAAiBS,CAAM,EACzF,SAAArC,EAAC,OAAI,UAAU,iIACb,UAAAD,EAACE,EAAA,CACC,OAAQ2B,GAAM,kBAAkB,IAChC,UAAU,6BACV,aAAa,sBACf,EACA5B,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACO,EAAA,CACC,KAAM,EACN,KAAMsB,GAAM,kBAAoB,eAChC,UAAWN,EAAG,uBAAwB,CACpC,aAAcM,GAAM,mBAAqB,MAC3C,CAAC,EACH,EACA7B,EAACG,EAAA,CACC,KAAM0B,GAAM,qBAAuB,YACnC,UAAWN,EAAG,+BAAgC,CAC5C,aAAcM,GAAM,mBAAqB,MAC3C,CAAC,EACH,GACF,GACF,EACF,EAEDA,GAAM,aAAa,MAAM,EAAGA,GAAM,kBAAkB,IAAM,EAAI,CAAC,GAAG,IAAKuB,GAAc,CACpF,MAAMK,EAAcL,GAAM,mBACpBM,EAAeN,GAAM,OAAS,GAC9BO,EAAcxC,EAClB,aAAaiC,GAAM,MAAM,YAAY5B,EAAO4B,GAAM,UAAoB,CAAC,GACvEd,CACF,EACA,OACEtC,EAAC4D,EAAA,CACC,aAAcR,GAAM,MACpB,YAAaA,GAAM,KACnB,YAAaK,EACb,aAAcC,EACd,YAAaC,GACRP,EAAK,YAAcA,EAAK,EAC/B,CAEJ,CAAC,GACH,IA/CO,wBAgDT,GACF,EAEJ,GACF,CAEJ,CACF,EAEAxB,EAAiB,YAAc,mBAE/B,MAAMgC,EAAgB,CAAC,CACrB,aAAAL,EACA,YAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAvB,EACA,YAAAwB,CACF,IASI3D,EAACM,EAAA,CAAK,KAAMqD,EAAa,UAAU,wCACjC,SAAA1D,EAAC,OACC,UAAWsB,EACT,sIACAY,CACF,EAEA,UAAAnC,EAAC,OAAI,UAAU,WACb,SAAAA,EAAC,OACC,IAAKuD,EACL,QAAQ,OACR,IAAKC,EACL,MAAO,GACP,OAAQ,GACR,UAAU,6BACZ,EACF,EACAvD,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,OAAI,UAAU,aACZ,SAAA0D,GACC1D,EAACG,EAAA,CACC,GAAG,IACH,KAAMuD,EACN,UAAU,gIACZ,EAEJ,EACAzD,EAAC,OACC,UAAAD,EAACG,EAAA,CACC,UAAU,iGACV,KAAMqD,EACR,EACCC,GACCzD,EAACG,EAAA,CACC,GAAG,IACH,KAAMsD,EACN,UAAU,sFACZ,GAEJ,GACF,GACF,EACF,EAIEI,GAAgB,CAAC,CAAE,KAAAhC,EAAM,SAAAK,EAAU,OAAAI,CAAO,IAE5CtC,EAAC,OAAI,UAAU,oCACZ,SAAAkC,GAAU,IAAI,CAACe,EAAca,IAC5B9D,EAAC,KACC,KAAMmB,EAAiB,GAAGU,GAAM,QAAQ,MAAMoB,GAAS,YAAY,CAAC,GAAIX,CAAM,EAE9E,UAAU,qHAET,SAAAW,GAHIa,CAIP,CACD,EACH,EAIJ,IAAOC,GAAQ3C,EAAWQ,CAAgB",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Picture", "Text", "Button", "Container", "Link", "Heading", "Grid", "GridItem", "SearchIcon", "CloseIcon", "forwardRef", "useCallback", "useMemo", "useState", "useEffect", "useRef", "useAiuiContext", "getLocalizedPath", "withLayout", "SearchStatus", "debounce", "cn", "atobID", "highlightSearchWord", "canSearch", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "className", "rest", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "inputRef", "debouncedFunction", "value", "handleKeyDown", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "index", "NavigationSearch_default"]
|
|
7
7
|
}
|
|
@@ -44,5 +44,5 @@ export interface ProductCompareProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
44
44
|
theme?: Theme;
|
|
45
45
|
};
|
|
46
46
|
}
|
|
47
|
-
declare const _default: any
|
|
47
|
+
declare const _default: import("react").ForwardRefExoticComponent<ProductCompareProps & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & import("react").RefAttributes<any>>;
|
|
48
48
|
export default _default;
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ProductHeroProps } from './types.js';
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<ProductHeroProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
2
4
|
export default _default;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
import type { ProductNavProps } from './types.js';
|
|
2
|
+
declare const _default: import("react").ForwardRefExoticComponent<ProductNavProps & import("react").RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
2
3
|
export default _default;
|
|
@@ -42,5 +42,5 @@ export interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement
|
|
|
42
42
|
data: PromotionalBarData;
|
|
43
43
|
classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>;
|
|
44
44
|
}
|
|
45
|
-
declare const _default:
|
|
45
|
+
declare const _default: React.ForwardRefExoticComponent<PromotionalBarProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
46
46
|
export default _default;
|
|
@@ -87,10 +87,5 @@ export interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement>
|
|
|
87
87
|
*/
|
|
88
88
|
jumpOptions?: JumpOptions;
|
|
89
89
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
*
|
|
93
|
-
* @description 是指用户进入二级页面后,无需滚动页面就能在第一屏(即"首屏")看到的、通常横跨整个浏览器窗口宽度的核心视觉区域。
|
|
94
|
-
*/
|
|
95
|
-
declare const SecondaryBanner: React.ForwardRefExoticComponent<SecondaryBannerProps & React.RefAttributes<HTMLElement>>;
|
|
96
|
-
export default SecondaryBanner;
|
|
90
|
+
declare const _default: React.ForwardRefExoticComponent<SecondaryBannerProps & React.RefAttributes<HTMLElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
91
|
+
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import*as x from"react";import{cva as E}from"class-variance-authority";import k from"jump.js";import{cn as a,getLocalizedPath as v}from"../../helpers/index.js";import{Text as
|
|
1
|
+
"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import*as x from"react";import{cva as E}from"class-variance-authority";import k from"jump.js";import{cn as a,getLocalizedPath as v}from"../../helpers/index.js";import{Text as h,Button as B,Heading as J,Picture as R,Countdown as V}from"../../components/index.js";import W from"../Media/index.js";import{useAiuiContext as $}from"../AiuiProvider/index.js";import{withLayout as F}from"../index.js";const _=E("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),T=x.forwardRef(({className:I,classNames:n={},data:t,jumpOptions:z={},...M},N)=>{const{pcImage:S,padImage:C,mobileImage:D,isVideoLoop:L=!0,endDate:u,endDate_tz:O,dateFormat:P,size:c="base",iconArray:m,theme:j="light",primaryButton:o,secondaryButton:i,title:w,titleTag:A="h1"}=t,{locale:b="us"}=$(),g={...{duration:500,offset:0},...z},d=x.useId(),l=w?`${d}-title`:void 0,f=t.subtitle?`${d}-subtitle`:void 0,y=t.superTitle?`${d}-super-title`:void 0,H=[y,f].filter(Boolean).join(" ")||void 0;return p("section",{ref:N,role:"banner","aria-labelledby":l,"aria-describedby":H,className:a({"aiui-dark":j==="dark"},_({size:c}),I,n?.root),...M,children:[e(W,{pcImage:S,padImage:C,mobileImage:D,className:a("absolute inset-0 size-full object-cover",{"h-fit":c==="xlg"}),imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:L,playsInline:!0,autoPlay:!0}),p("div",{className:a("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left",n?.content),children:[p("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[t.superTitle&&e(h,{as:"p",size:2,id:y,className:a("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",n?.superTitle),html:t.superTitle}),t.title&&e(J,{as:A,size:["xlg","lg"].includes(c)?5:4,id:l,className:a("banner-title ",n?.title),html:t.title}),t.subtitle&&e(h,{as:"p",size:3,id:f,className:a("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",n?.subtitle),html:t.subtitle})]}),u&&e("div",{className:"banner-countdown",children:e(V,{endDate:u,endDate_tz:O,dateFormat:P,variant:"spacious",className:"lg-desktop:mt-8 mt-6"})}),p("div",{className:a("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",n?.buttonGroup),children:[i?.text&&e(B,{variant:"secondary",onClick:r=>{if(i.link?.startsWith("#")){r.preventDefault();const s=document.querySelector(i.link);s&&k(s,g)}i.onClick?.()},className:a("",n?.secondaryButton),"aria-describedby":l,...i.link&&!i.link.startsWith("#")?{as:"a",href:v(i.link,b)}:{},children:i.text}),o?.text&&e(B,{onClick:r=>{if(o.link?.startsWith("#")){r.preventDefault();const s=document.querySelector(o.link);s&&k(s,g)}o.onClick?.()},className:a("",n?.primaryButton),"aria-describedby":l,...o.link&&!o.link.startsWith("#")?{as:"a",href:v(o.link,b)}:{},children:o.text})]}),Array.isArray(m)&&m.length>0&&e("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:m.map((r,s)=>r.pcImage?e(R,{source:r.pcImage.url,alt:r.pcImage.alt||`icon ${s+1}`,role:"img",className:"laptop:h-auto h-[48px] max-w-none",imgClassName:"h-full"},s):null)})]})]})});T.displayName="SecondaryBanner";var ee=F(T);export{ee as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SecondaryBanner/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport jump from 'jump.js'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E3B\u6807\u9898\u6807\u7B7E\n * @default 'h1'\n */\n titleTag?: 'h1' | 'h2'\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, jumpOptions = {}, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = true,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n title,\n titleTag = 'h1',\n } = data\n\n const { locale = 'us' } = useAiuiContext()\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className={cn('absolute inset-0 size-full object-cover', {\n 'h-fit': size === 'xlg',\n })}\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as={titleTag}\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"lg-desktop:mt-8 mt-6\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton.onClick?.()\n }}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link && !secondaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(secondaryButton.link, locale) }\n : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton.onClick?.()\n }}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link && !primaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(primaryButton.link, locale) }\n : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"laptop:h-auto h-[48px] max-w-none\"\n imgClassName=\"h-full\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default SecondaryBanner\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "cva", "jump", "cn", "getLocalizedPath", "Text", "Button", "Heading", "Picture", "Countdown", "Media", "useAiuiContext", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "jumpOptions", "props", "ref", "pcImage", "padImage", "mobileImage", "isVideoLoop", "endDate", "endDate_tz", "dateFormat", "size", "icons", "theme", "primaryButton", "secondaryButton", "title", "titleTag", "locale", "mergedJumpOptions", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "e", "element", "icon", "index", "SecondaryBanner_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport jump from 'jump.js'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { withLayout } from '../index.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E3B\u6807\u9898\u6807\u7B7E\n * @default 'h1'\n */\n titleTag?: 'h1' | 'h2'\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, jumpOptions = {}, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = true,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n title,\n titleTag = 'h1',\n } = data\n\n const { locale = 'us' } = useAiuiContext()\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className={cn('absolute inset-0 size-full object-cover', {\n 'h-fit': size === 'xlg',\n })}\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as={titleTag}\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"lg-desktop:mt-8 mt-6\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton.onClick?.()\n }}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link && !secondaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(secondaryButton.link, locale) }\n : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton.onClick?.()\n }}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link && !primaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(primaryButton.link, locale) }\n : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"laptop:h-auto h-[48px] max-w-none\"\n imgClassName=\"h-full\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default withLayout(SecondaryBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "cva", "jump", "cn", "getLocalizedPath", "Text", "Button", "Heading", "Picture", "Countdown", "Media", "useAiuiContext", "withLayout", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "jumpOptions", "props", "ref", "pcImage", "padImage", "mobileImage", "isVideoLoop", "endDate", "endDate_tz", "dateFormat", "size", "icons", "theme", "primaryButton", "secondaryButton", "title", "titleTag", "locale", "mergedJumpOptions", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "e", "element", "icon", "index", "SecondaryBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import type { Img } from '../../types/props.js';
|
|
2
3
|
export type SelectStoreDataType = {
|
|
3
4
|
title: string;
|
|
@@ -7,5 +8,10 @@ export type SelectStoreDataType = {
|
|
|
7
8
|
padImg: Img;
|
|
8
9
|
miniImg: Img;
|
|
9
10
|
};
|
|
10
|
-
|
|
11
|
+
interface SelectStoreType extends React.HTMLAttributes<HTMLDivElement> {
|
|
12
|
+
data: {
|
|
13
|
+
list: SelectStoreDataType[];
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
declare const _default: React.ForwardRefExoticComponent<SelectStoreType & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & React.RefAttributes<any>>;
|
|
11
17
|
export default _default;
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ShelfDisplayProps } from './shelfDisplay.js';
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<ShelfDisplayProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
2
4
|
export default _default;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { SloganProps } from './types.js';
|
|
1
3
|
export declare const componentType = "copy";
|
|
2
4
|
export declare const componentName = "brand_slogan";
|
|
3
|
-
declare const _default:
|
|
5
|
+
declare const _default: React.ForwardRefExoticComponent<SloganProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
4
6
|
export default _default;
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { SpacerProps } from './types.js';
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
2
4
|
export default _default;
|