@anker-in/headless-ui 1.1.9-alpha.1764822725414 → 1.1.9-alpha.1764847194553

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.
Files changed (27) hide show
  1. package/dist/cjs/biz-components/Category/SwiperCategory.d.ts +1 -1
  2. package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
  3. package/dist/cjs/biz-components/Category/SwiperCategory.js.map +3 -3
  4. package/dist/cjs/biz-components/Category/index.js +1 -1
  5. package/dist/cjs/biz-components/Category/index.js.map +3 -3
  6. package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
  7. package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +3 -3
  8. package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js +1 -1
  9. package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map +3 -3
  10. package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
  11. package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
  12. package/dist/cjs/stories/shelfDisplay.stories.js +1 -1
  13. package/dist/cjs/stories/shelfDisplay.stories.js.map +3 -3
  14. package/dist/esm/biz-components/Category/SwiperCategory.d.ts +1 -1
  15. package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
  16. package/dist/esm/biz-components/Category/SwiperCategory.js.map +3 -3
  17. package/dist/esm/biz-components/Category/index.js +1 -1
  18. package/dist/esm/biz-components/Category/index.js.map +3 -3
  19. package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
  20. package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +3 -3
  21. package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js +1 -1
  22. package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map +3 -3
  23. package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
  24. package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
  25. package/dist/esm/stories/shelfDisplay.stories.js +1 -1
  26. package/dist/esm/stories/shelfDisplay.stories.js.map +2 -2
  27. package/package.json +1 -1
package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
4
- "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Badge } from '../../../../../components/index.js'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n useEffect,\n type Dispatch,\n type SetStateAction,\n useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, selectedOptions } = useBizProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab: ProductGalleryProps =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n const variantProductGallery =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => {\n // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n const variantProductGalleryItem = variantProductGallery?.find(\n (variantItem: any) => item?.galleries === variantItem?.galleries\n )\n let galleries = galleryMap[item?.galleries] || []\n\n if (\n variantProductGalleryItem?.images &&\n Array.isArray(variantProductGalleryItem.images) &&\n variantProductGalleryItem.images.length > 0\n ) {\n // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n const imageGalleries = variantProductGalleryItem.images\n .map((imageItem: any) => {\n // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n const imageSourceParts: string[] = []\n if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n imageSourceParts.push(`${imageItem.image_1920} 1920`)\n }\n if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n imageSourceParts.push(`${imageItem.image_1440} 1440`)\n }\n if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n imageSourceParts.push(`${imageItem.image_1024} 1024`)\n }\n if (imageItem.image_768 && imageItem.image_768.trim()) {\n imageSourceParts.push(`${imageItem.image_768} 767`)\n }\n if (imageItem.image_390 && imageItem.image_390.trim()) {\n imageSourceParts.push(`${imageItem.image_390} 390`)\n }\n\n // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n if (imageSourceParts.length > 0) {\n const responsiveSource = imageSourceParts.join(', ')\n return {\n image: {\n url: responsiveSource,\n altText: item.comment?.content || '',\n },\n // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n _fromImages: true,\n _responsiveSource: responsiveSource,\n } as any\n }\n return null\n })\n .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n if (imageGalleries.length > 0) {\n galleries = imageGalleries\n }\n // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n }\n\n return {\n ...item,\n galleries,\n }\n })\n .filter((item: any) => item.galleries.length > 0)\n }, [variant?.payload, galleryMap, product?.payload])\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n const handleNextTab = useCallback(() => {\n const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n setActiveTabIndex(nextIndex)\n setActiveGalleryTab(galleryTabs[nextIndex])\n setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n }, [activeTabIndex, galleryTabs])\n\n // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n const handlePrevTab = useCallback(() => {\n const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n setActiveTabIndex(prevIndex)\n setActiveGalleryTab(galleryTabs[prevIndex])\n // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n setTargetSlideIndex(prevTabGalleries.length - 1)\n }, [activeTabIndex, galleryTabs])\n\n // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n useEffect(() => {\n if (activeTabIndex !== null && activeTabIndex !== undefined) {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n requestAnimationFrame(() => {\n productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n })\n }\n }, [activeTabIndex])\n\n useEffect(() => {\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n setActiveGalleryTab(galleryTabs[0])\n setActiveTabIndex(0)\n }, [variant?.id])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE_MAIN:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_FEATURES:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_SCENE:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return (\n <ProductGalleryTabVideo\n {...tab}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n <div className=\"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n ref={productGalleryTabRef}\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n setActiveTabIndex={setActiveTabIndex}\n setTargetSlideIndex={setTargetSlideIndex}\n />\n </Root>\n </div>\n )\n}\n\nexport interface ProductGalleryTabRef {\n scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n ProductGalleryTabRef,\n {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n setActiveTabIndex: Dispatch<SetStateAction<number>>\n setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n }\n>((props, ref) => {\n const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n const { product } = useBizProductContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = event.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n const handleGalleryTabClick = useCallback(\n (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n setActiveGalleryTab(item)\n setActiveTabIndex(index)\n setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n scrollToEvent(el)\n },\n [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n )\n\n // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n const scrollToTab = useCallback(\n (index: number) => {\n if (scrollContainerRef.current && galleryTabs[index]) {\n const container = scrollContainerRef.current\n const tabItem = galleryTabs[index]\n const button = triggerRefs.current.get(tabItem.tabValue)\n\n if (button) {\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n },\n [galleryTabs]\n )\n\n useImperativeHandle(ref, () => ({\n scrollToTab,\n }))\n\n return (\n <div className=\"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n <List\n ref={scrollContainerRef}\n className=\"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map((item, index) => {\n return (\n <Trigger\n ref={el => {\n if (el) {\n triggerRefs.current.set(item.tabValue, el)\n } else {\n triggerRefs.current.delete(item.tabValue)\n }\n }}\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={el => handleGalleryTabClick(el, item, index)}\n key={item.tabValue + index}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 laptop:flex hidden\">\n {product.metafields?.global?.specifications && (\n <>\n <SpecsModal /> | <CompareModal />\n </>\n )}\n </div>\n </div>\n )\n})\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, totalSavings } = useBizProductContext()\n const paginationRef = useRef<HTMLDivElement>(null)\n const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const commentRef = useRef<HTMLDivElement>(null)\n const [shouldScroll, setShouldScroll] = useState(false)\n\n const imageClassName = useMemo(() => {\n if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n // return '420px'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n // return '560px'\n }\n }, [props?.galleryTabType])\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && !!props.targetSlideIndex) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n // useEffect(() => {\n // if (commentRef.current) {\n // const container = commentRef.current\n // const contentHeight = container.scrollHeight\n // const containerHeight = container.clientHeight\n // const needsScroll = contentHeight > containerHeight\n // setShouldScroll(needsScroll)\n // }\n // }, [])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n ref={ref}\n className=\"h-full\"\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n const exposureKey = `${props.tabValue}-${jIndex}`\n\n // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n const handleExposure = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: props?.tabLabel || '',\n position: jIndex + 1,\n creative_id: '',\n component_title: '',\n component_description: '',\n navigation: '',\n },\n })\n }\n\n // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <ExposureDetector\n onExposure={handleExposure}\n exposureKey={exposureKey}\n threshold={0.5}\n duration={2000}\n className=\"h-full\"\n >\n <Picture\n source={pictureSource}\n alt={item?.image?.altText}\n className={cn('h-full', imageClassName)}\n imgClassName=\"object-cover h-full\"\n />\n </ExposureDetector>\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white\"\n >\n {`${formatPrice({\n amount: totalSavings,\n currencyCode: variant?.price?.currencyCode,\n locale: locale,\n })} ${copyWriting?.off}`}\n </Badge>\n )}\n <div\n className={cn(\n 'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n `swiper-button`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n <div\n className={cn(\n 'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n `swiper-button`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n {/* {props?.galleries?.map((item, jIndex) => {\n return (\n <Picture\n key={props?.id + 'SwiperSlideItem' + jIndex}\n source={item?.image?.url}\n alt={item?.image?.altText}\n className=\"h-full\"\n imgClassName=\"object-cover h-full\"\n />\n )\n })} */}\n <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n <div className=\"tablet:block hidden\">\n <Swiper\n className=\"flex items-center justify-between\"\n onSwiper={setThumbsSwiper}\n spaceBetween={12}\n slidesPerView={6}\n freeMode={true}\n watchSlidesProgress={true}\n modules={[Navigation, Thumbs]}\n >\n {props?.galleries?.map((item, jIndex) => (\n <SwiperSlide\n key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n imgClassName=\"object-cover h-full\"\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n {!props?.index && (\n <div className=\"flex items-center gap-2\">\n <Picture\n source={props?.comment?.avatar?.url}\n className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n imgClassName=\"object-cover \"\n />\n <div className=\"relative max-w-[528px] overflow-hidden\">\n <Swiper\n modules={[Autoplay]}\n loop\n className=\"lg-desktop:h-11 h-10\"\n direction=\"vertical\"\n autoplay={{ delay: 2000, disableOnInteraction: false }}\n >\n <SwiperSlide>\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n </Swiper>\n {/* <div\n ref={commentRef}\n className={cn('h-10', shouldScroll && 'animate-scroll-text')}\n >\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base text-sm font-bold text-[#080A0F]\"\n />\n </div> */}\n </div>\n </div>\n )}\n </div>\n <div\n ref={paginationRef}\n className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n className=\"h-full\"\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full object-cover\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n <div\n className={cn(\n 'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
5
- "mappings": "AAiCI,OAqVM,YAAAA,GApVJ,OAAAC,EADF,QAAAC,MAAA,oBAjCJ,OAAS,kBAAAC,MAAsB,oCAC/B,OAAS,QAAAC,GAAM,WAAAC,EAAS,SAAAC,OAAa,qCACrC,OACE,eAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,UAAAC,EACA,aAAAC,EAGA,uBAAAC,OACK,QACP,OAAS,UAAAC,EAAQ,eAAAC,MAAmC,eACpD,OAAS,cAAAC,EAAY,cAAAC,EAAY,UAAAC,EAAQ,cAAAC,EAAY,YAAAC,OAAgB,iBACrE,OAAS,MAAAC,MAAU,kCACnB,OAAS,kBAAAC,MAAsB,aAC/B,OAAS,WAAAC,GAAS,QAAAC,GAAM,QAAAC,GAAM,WAAAC,OAAe,uBAC7C,OAAS,wBAAAC,MAA4B,iCACrC,OAAS,mBAAAC,OAAuB,sCAChC,OAAS,cAAAC,OAAkB,6BAC3B,OAAOC,OAAkB,+BACzB,OAAS,eAAAC,OAAmB,0BAC5B,OAAS,cAAAC,OAAkB,kCAC3B,OAAS,WAAAC,OAAe,iCACxB,OAAS,oBAAAC,OAAwB,qCAMjC,MAAMC,EAAwBC,GAE1BlC,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAGkC,EACjG,UAAAnC,EAAC,QAAK,EAAE,KAAK,EAAE,KAAK,MAAM,KAAK,OAAO,KAAK,GAAG,KAAK,UAAU,qBAAqB,KAAK,QAAQ,EAC/FA,EAAC,QACC,EAAE,4TACF,KAAK,eACP,GACF,EAIEoC,GAAyBD,GAE3BlC,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAGkC,EACjG,UAAAnC,EAAC,QAAK,MAAM,KAAK,OAAO,KAAK,GAAG,KAAK,UAAU,8CAA8C,KAAK,QAAQ,EAC1GA,EAAC,QACC,EAAE,4TACF,KAAK,eACP,GACF,EAIEqC,GAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,CAAY,EAAIpC,EAAe,EACjC,CAAE,QAAAqC,EAAS,QAAAC,EAAS,gBAAAC,CAAgB,EAAIf,EAAqB,EAC7DgB,EAAmBf,GAAgB,CAAE,QAAAY,EAAS,QAAAC,CAAQ,CAAC,EACvD,CAACG,EAAQC,CAAS,EAAIpC,EAA4B,IAAI,EACtDqC,EAAuBnC,EAA6B,IAAI,EAExDoC,EAAkBN,GAAS,YAAY,WAAW,kBACxD,IAAIO,EAA2BC,EAAyBC,EAA+BC,EAEnFJ,GAAmBA,GAAiB,WACtCC,EAAcD,GAAiB,SAAW,CAAC,EAC3CE,EAAYF,GAAiB,WAAa,CAAC,EAC3CG,EAAkBH,GAAiB,aAAe,CAAC,EACnDI,EAAYJ,GAAiB,OAAS,CAAC,IAEvCC,EAAcL,GAAkB,YAChCM,EAAYN,GAAkB,UAC9BO,EAAkBP,GAAkB,gBACpCQ,EAAYR,GAAkB,WAGhC,MAAMS,EAAW5C,EAAQ,IAAM,CAAC,GAAGwC,EAAa,GAAGC,EAAW,GAAGE,CAAS,EAAG,CAACH,EAAaC,EAAWE,CAAS,CAAC,EAE1GE,EAA0D,CAC9D,YAAaL,EACb,UAAWC,EACX,gBAAiBC,EACjB,UAAWC,CACb,EAEMG,EAAc9C,EAAQ,IAAM,CAChC,MAAM+C,EACJf,GAAS,SAAS,YAAY,KAAMgB,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,EAChGC,EACJhB,GAAS,SAAS,YAAY,KAAMe,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,EAEtG,OAAOD,GACH,IAAKC,GAAc,CAEnB,MAAME,EAA4BD,GAAuB,KACtDE,GAAqBH,GAAM,YAAcG,GAAa,SACzD,EACA,IAAIC,EAAYP,EAAWG,GAAM,SAAS,GAAK,CAAC,EAEhD,GACEE,GAA2B,QAC3B,MAAM,QAAQA,EAA0B,MAAM,GAC9CA,EAA0B,OAAO,OAAS,EAC1C,CAEA,MAAMG,EAAiBH,EAA0B,OAC9C,IAAKI,GAAmB,CAEvB,MAAMC,EAA6B,CAAC,EAkBpC,GAjBID,EAAU,YAAcA,EAAU,WAAW,KAAK,GACpDC,EAAiB,KAAK,GAAGD,EAAU,UAAU,OAAO,EAElDA,EAAU,YAAcA,EAAU,WAAW,KAAK,GACpDC,EAAiB,KAAK,GAAGD,EAAU,UAAU,OAAO,EAElDA,EAAU,YAAcA,EAAU,WAAW,KAAK,GACpDC,EAAiB,KAAK,GAAGD,EAAU,UAAU,OAAO,EAElDA,EAAU,WAAaA,EAAU,UAAU,KAAK,GAClDC,EAAiB,KAAK,GAAGD,EAAU,SAAS,MAAM,EAEhDA,EAAU,WAAaA,EAAU,UAAU,KAAK,GAClDC,EAAiB,KAAK,GAAGD,EAAU,SAAS,MAAM,EAIhDC,EAAiB,OAAS,EAAG,CAC/B,MAAMC,EAAmBD,EAAiB,KAAK,IAAI,EACnD,MAAO,CACL,MAAO,CACL,IAAKC,EACL,QAASR,EAAK,SAAS,SAAW,EACpC,EAEA,YAAa,GACb,kBAAmBQ,CACrB,CACF,CACA,OAAO,IACT,CAAC,EACA,OAAQC,GAAiBA,IAAY,IAAI,EAGxCJ,EAAe,OAAS,IAC1BD,EAAYC,EAGhB,CAEA,MAAO,CACL,GAAGL,EACH,UAAAI,CACF,CACF,CAAC,EACA,OAAQJ,GAAcA,EAAK,UAAU,OAAS,CAAC,CACpD,EAAG,CAACf,GAAS,QAASY,EAAYb,GAAS,OAAO,CAAC,EAE7C,CAAC0B,EAAkBC,CAAmB,EAAI1D,EAA8B6C,IAAc,CAAC,CAAC,EACxF,CAACc,EAAgBC,CAAiB,EAAI5D,EAAS,CAAC,EAChD,CAAC6D,EAAkBC,CAAmB,EAAI9D,EAAwB,IAAI,EAGtE+D,EAAgBjE,EAAY,IAAM,CACtC,MAAMkE,GAAaL,EAAiB,GAAKd,EAAY,OACrDe,EAAkBI,CAAS,EAC3BN,EAAoBb,EAAYmB,CAAS,CAAC,EAC1CF,EAAoB,CAAC,CACvB,EAAG,CAACH,EAAgBd,CAAW,CAAC,EAG1BoB,EAAgBnE,EAAY,IAAM,CACtC,MAAMoE,EAAYP,IAAmB,EAAId,EAAY,OAAS,EAAIc,EAAiB,EACnFC,EAAkBM,CAAS,EAC3BR,EAAoBb,EAAYqB,CAAS,CAAC,EAE1C,MAAMC,EAAmBtB,EAAYqB,CAAS,GAAG,WAAa,CAAC,EAC/DJ,EAAoBK,EAAiB,OAAS,CAAC,CACjD,EAAG,CAACR,EAAgBd,CAAW,CAAC,EAGhC1C,EAAU,IAAM,CACVwD,GAAmB,MAErB,sBAAsB,IAAM,CAC1BtB,EAAqB,SAAS,YAAYsB,CAAc,CAC1D,CAAC,CAEL,EAAG,CAACA,CAAc,CAAC,EAEnBxD,EAAU,IAAM,CAEduD,EAAoBb,EAAY,CAAC,CAAC,EAClCe,EAAkB,CAAC,CACrB,EAAG,CAAC5B,GAAS,EAAE,CAAC,EAGhB,MAAMoC,GAAsB,CAACC,EAAUC,IAAkB,CACvD,OAAQD,GAAK,eAAgB,CAC3B,KAAKxD,EAAe,mBAClB,OACErB,EAAC+E,EAAA,CACE,GAAGF,EACJ,MAAOC,EACP,UAAWP,EACX,UAAWE,EACX,iBAAkBJ,EAClB,cAAe,IAAMC,EAAoB,IAAI,EAC/C,EAEJ,KAAKjD,EAAe,uBAClB,OACErB,EAAC+E,EAAA,CACE,GAAGF,EACJ,MAAOC,EACP,UAAWP,EACX,UAAWE,EACX,iBAAkBJ,EAClB,cAAe,IAAMC,EAAoB,IAAI,EAC/C,EAEJ,KAAKjD,EAAe,oBAClB,OACErB,EAAC+E,EAAA,CACE,GAAGF,EACJ,MAAOC,EACP,UAAWP,EACX,UAAWE,EACX,iBAAkBJ,EAClB,cAAe,IAAMC,EAAoB,IAAI,EAC/C,EAEJ,KAAKjD,EAAe,cAClB,OACErB,EAACgF,GAAA,CACE,GAAGH,EACJ,UAAWN,EACX,UAAWE,EACX,iBAAkBJ,EAClB,cAAe,IAAMC,EAAoB,IAAI,EAC/C,EAEJ,QACE,OAAO,IACX,CACF,EAEA,OACEtE,EAAC,OAAI,GAAG,sBACN,SAAAC,EAACuB,GAAA,CAAK,UAAU,WAAW,MAAOyC,GAAkB,SAAU,aAAcZ,IAAc,CAAC,GAAG,SAC5F,UAAArD,EAAC,OAAI,UAAU,6IACZ,SAAAqD,EAAY,IAAI,CAACE,EAAWuB,IAEzB9E,EAACsB,GAAA,CAA4B,UAAU,SAAS,MAAOiC,EAAK,SACzD,SAAAqB,GAAoBrB,EAAMuB,CAAK,GADpBvB,EAAK,QAEnB,CAEH,EACH,EACAvD,EAACiF,GAAA,CACC,IAAKpC,EACL,YAAaQ,EACb,iBAAkBY,EAClB,oBAAqBC,EACrB,kBAAmBE,EACnB,oBAAqBE,EACvB,GACF,EACF,CAEJ,EAMMW,GAAoBxE,EASxB,CAAC0B,EAAO+C,IAAQ,CAChB,KAAM,CAAE,YAAA7B,EAAa,iBAAAY,EAAkB,oBAAAC,EAAqB,kBAAAE,EAAmB,oBAAAE,CAAoB,EAAInC,EACjG,CAAE,QAAAI,CAAQ,EAAIb,EAAqB,EACnCyD,EAAqBzE,EAAuB,IAAI,EAChD0E,EAAc1E,EAAuC,IAAI,GAAK,EAE9D2E,EAAgB/E,EAAagF,GAA+C,CAChF,GAAIH,EAAmB,QAAS,CAC9B,MAAMI,EAAYJ,EAAmB,QAC/BK,EAASF,EAAM,cACfG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EACxFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAECC,EAAwBpF,EAC5B,CAACqF,EAAyCpC,EAA2BuB,IAAkB,CACrFZ,EAAoBX,CAAI,EACxBa,EAAkBU,CAAK,EACvBR,EAAoB,CAAC,EACrBe,EAAcM,CAAE,CAClB,EACA,CAACzB,EAAqBE,EAAmBE,EAAqBe,CAAa,CAC7E,EAGMO,EAActF,EACjBwE,GAAkB,CACjB,GAAIK,EAAmB,SAAW9B,EAAYyB,CAAK,EAAG,CACpD,MAAMS,EAAYJ,EAAmB,QAC/BU,EAAUxC,EAAYyB,CAAK,EAC3BU,EAASJ,EAAY,QAAQ,IAAIS,EAAQ,QAAQ,EAEvD,GAAIL,EAAQ,CACV,MAAMC,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EACxFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,CACF,EACA,CAACpC,CAAW,CACd,EAEA,OAAAzC,GAAoBsE,EAAK,KAAO,CAC9B,YAAAU,CACF,EAAE,EAGA3F,EAAC,OAAI,UAAU,qHACb,UAAAD,EAACuB,GAAA,CACC,IAAK4D,EACL,UAAU,yEACV,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EAEA,SAAAnF,EAAC,OAAI,UAAU,oBACZ,SAAAqD,GAAa,IAAI,CAACE,EAAMuB,IAErB9E,EAACyB,GAAA,CACC,IAAKkE,GAAM,CACLA,EACFP,EAAY,QAAQ,IAAI7B,EAAK,SAAUoC,CAAE,EAEzCP,EAAY,QAAQ,OAAO7B,EAAK,QAAQ,CAE5C,EACA,UAAWnC,EACT,6JACAmC,EAAK,WAAaU,GAAkB,UAAY,UAClD,EACA,QAAS0B,GAAMD,EAAsBC,EAAIpC,EAAMuB,CAAK,EAEpD,MAAOvB,EAAK,SAEX,SAAAA,EAAK,UAHDA,EAAK,SAAWuB,CAIvB,CAEH,EACH,EACF,EACA9E,EAAC,OAAI,UAAU,kCACZ,SAAAuC,EAAQ,YAAY,QAAQ,gBAC3BtC,EAAAF,GAAA,CACE,UAAAC,EAAC4B,GAAA,EAAW,EAAE,MAAG5B,EAAC6B,GAAA,EAAa,GACjC,EAEJ,GACF,CAEJ,CAAC,EAEKkD,EAAyBtE,EAAkD,CAAC0B,EAAO+C,IAAQ,CAC/F,KAAM,CAAE,OAAAY,EAAS,KAAM,YAAAxD,CAAY,EAAIpC,EAAe,EAChD,CAAE,QAAAsC,EAAS,aAAAuD,CAAa,EAAIrE,EAAqB,EACjDsE,EAAgBtF,EAAuB,IAAI,EAC3C,CAACuF,EAAcC,CAAe,EAAI1F,EAA4B,IAAI,EAClE,CAACmC,EAAQC,CAAS,EAAIpC,EAA4B,IAAI,EACtD2F,EAAazF,EAAuB,IAAI,EACxC,CAAC0F,EAAcC,CAAe,EAAI7F,EAAS,EAAK,EAEhD8F,EAAiB/F,EAAQ,IAAM,CACnC,GAAI4B,GAAO,iBAAmBd,EAAe,mBAC3C,MAAO,0FACEc,GAAO,iBAAmBd,EAAe,yBAEzCc,GAAO,eAAmBd,EAAe,oBAGtD,EAAG,CAACc,GAAO,cAAc,CAAC,EAGpBoE,EAAkBjG,EAAY,IAAM,CACpCqC,GAAQ,YAEVR,EAAM,YAAY,EAGlBQ,GAAQ,UAAU,CAEtB,EAAG,CAACA,EAAQR,CAAK,CAAC,EAEZqE,EAAkBlG,EAAY,IAAM,CACpCqC,GAAQ,MAEVR,EAAM,YAAY,EAGlBQ,GAAQ,UAAU,CAEtB,EAAG,CAACA,EAAQR,CAAK,CAAC,EAGlB,OAAAxB,EAAU,IAAM,CACVgC,GAAYR,EAAM,mBACpBQ,EAAO,QAAQR,EAAM,iBAAkB,CAAC,EACxCA,EAAM,gBAAgB,EAE1B,EAAG,CAACQ,EAAQR,EAAM,iBAAkBA,CAAK,CAAC,EAcxClC,EAAC,OAAI,UAAU,8CACb,UAAAD,EAACa,EAAA,CACC,IAAKqE,EACL,UAAU,SAKV,SAAUtC,EACV,WAAY,CAACD,EAAQ2C,IAAU,CACzB3C,EAAO,aAAeA,EAAO,iBAAmB,OAClD4D,EAAgB,EACP5D,EAAO,OAASA,EAAO,iBAAmB,QACnD6D,EAAgB,CAEpB,EACA,WAAY,CACV,UAAW,GACX,GAAIR,EAAc,OACpB,EACA,OAAQ,CAAE,OAAQC,CAAa,EAC/B,QAAS,CAACjF,EAAYC,EAAQF,EAAYG,CAAU,EACpD,WAAY,CACV,YAAa,EACf,EACA,YAAa,CACX,EAAG,CACD,cAAe,EACf,SAAU,EACZ,CACF,EAEC,SAAAiB,GAAO,WAAW,IAAI,CAACoB,EAAMkD,IAAW,CAEvC,MAAMC,EAAc,GAAGvE,EAAM,QAAQ,IAAIsE,CAAM,GAGzCE,EAAiB,IAAM,CAC3B3E,GAAQ,CACN,MAAO,WACP,WAAY,uBACZ,iBAAkB,CAChB,WAAY,sBAAsBQ,EAAQ,GAAG,GAC7C,eAAgB,QAChB,eAAgBL,GAAO,UAAY,GACnC,SAAUsE,EAAS,EACnB,YAAa,GACb,gBAAiB,GACjB,sBAAuB,GACvB,WAAY,EACd,CACF,CAAC,CACH,EAGMG,EAAiBrD,GAAc,mBAAqBA,GAAM,OAAO,KAAO,GAE9E,OACEvD,EAACc,EAAA,CAAY,UAAU,SACrB,SAAAd,EAACiC,GAAA,CACC,WAAY0E,EACZ,YAAaD,EACb,UAAW,GACX,SAAU,IACV,UAAU,SAEV,SAAA1G,EAACI,EAAA,CACC,OAAQwG,EACR,IAAKrD,GAAM,OAAO,QAClB,UAAWnC,EAAG,SAAUkF,CAAc,EACtC,aAAa,sBACf,EACF,GAdmCnE,GAAO,GAAK,kBAAoBsE,CAerE,CAEJ,CAAC,EACH,EACCjE,EAAQ,kBAAoB,CAAC,CAACuD,GAAgB,CAAC5D,EAAM,OACpDnC,EAACK,GAAA,CACC,KAAK,KACL,UAAU,+GAET,YAAGyB,GAAY,CACd,OAAQiE,EACR,aAAcvD,GAAS,OAAO,aAC9B,OAAQsD,CACV,CAAC,CAAC,IAAIxD,GAAa,GAAG,GACxB,EAEFtC,EAAC,OACC,UAAWoB,EACT,yJAEA,eACF,EACA,QAASmF,EAET,SAAAvG,EAACkC,EAAA,CAAqB,UAAWd,EAAG,mCAAmC,EAAG,EAC5E,EACApB,EAAC,OACC,UAAWoB,EACT,4JAEA,eACF,EACA,QAASoF,EAET,SAAAxG,EAACoC,GAAA,CAAsB,UAAWhB,EAAG,mCAAmC,EAAG,EAC7E,EAYAnB,EAAC,OAAI,UAAU,oKACb,UAAAD,EAAC,OAAI,UAAU,sBACb,SAAAA,EAACa,EAAA,CACC,UAAU,oCACV,SAAUqF,EACV,aAAc,GACd,cAAe,EACf,SAAU,GACV,oBAAqB,GACrB,QAAS,CAACnF,EAAYE,CAAM,EAE3B,SAAAkB,GAAO,WAAW,IAAI,CAACoB,EAAMkD,IAC5BzG,EAACc,EAAA,CAEC,UAAU,oIAEV,SAAAd,EAACI,EAAA,CACC,OAAQmD,EAAK,OAAO,IACpB,IAAKA,EAAK,OAAO,QACjB,UAAU,8DACV,aAAa,sBACf,GARKpB,GAAO,GAAK,uBAAyBsE,CAS5C,CACD,EACH,EACF,EACC,CAACtE,GAAO,OACPlC,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACI,EAAA,CACC,OAAQ+B,GAAO,SAAS,QAAQ,IAChC,UAAU,8CACV,aAAa,gBACf,EACAnC,EAAC,OAAI,UAAU,0CACb,SAAAA,EAACa,EAAA,CACC,QAAS,CAACM,EAAQ,EAClB,KAAI,GACJ,UAAU,uBACV,UAAU,WACV,SAAU,CAAE,MAAO,IAAM,qBAAsB,EAAM,EAErD,SAAAnB,EAACc,EAAA,CACC,SAAAd,EAACG,GAAA,CACC,KAAMgC,GAAO,SAAS,QACtB,UAAU,qEACZ,EACF,EACF,EAUF,GACF,GAEJ,EACAnC,EAAC,OACC,IAAKgG,EACL,UAAU,uMACZ,GACF,CAEJ,CAAC,EAEKhB,GAA0B7C,GAAsC,CACpE,KAAM,CAACQ,EAAQC,CAAS,EAAIpC,EAA4B,IAAI,EAGtD+F,EAAkBjG,EAAY,IAAM,CACpCqC,GAAQ,YAEVR,EAAM,YAAY,EAGlBQ,GAAQ,UAAU,CAEtB,EAAG,CAACA,EAAQR,CAAK,CAAC,EAEZqE,EAAkBlG,EAAY,IAAM,CACpCqC,GAAQ,MAEVR,EAAM,YAAY,EAGlBQ,GAAQ,UAAU,CAEtB,EAAG,CAACA,EAAQR,CAAK,CAAC,EAGlB,OAAAxB,EAAU,IAAM,CACVgC,GAAUR,EAAM,mBAAqB,MAAQA,EAAM,mBAAqB,SAC1EQ,EAAO,QAAQR,EAAM,iBAAkB,CAAC,EACxCA,EAAM,gBAAgB,EAE1B,EAAG,CAACQ,EAAQR,EAAM,iBAAkBA,CAAK,CAAC,EAGxClC,EAAC,OAAI,UAAU,8CACb,UAAAD,EAACa,EAAA,CACC,UAAU,SACV,SAAU+B,EACV,WAAY,CAACD,EAAQ2C,IAAU,CACzB3C,EAAO,aAAeA,EAAO,iBAAmB,OAClD4D,EAAgB,EACP5D,EAAO,OAASA,EAAO,iBAAmB,QACnD6D,EAAgB,CAEpB,EAKA,QAAS,CAACxF,EAAYC,EAAQF,EAAYG,CAAU,EACpD,WAAY,CACV,YAAa,EACf,EACA,YAAa,CACX,EAAG,CACD,cAAe,EACf,SAAU,EACZ,CACF,EAEC,SAAAiB,GAAO,WAAW,IAAI,CAACoB,EAAMkD,IAE1BzG,EAACc,EAAA,CAAY,UAAU,SACrB,SAAAb,EAAC,SAAM,SAAQ,GAAC,UAAU,yBACxB,UAAAD,EAAC,SAAM,KAAK,WAAW,EACvBA,EAAC,UAAO,IAAKuD,GAAM,UAAU,CAAC,GAAG,IAAK,KAAK,YAAY,EACvDvD,EAAC,UAAO,IAAKuD,GAAM,UAAU,CAAC,GAAG,IAAK,KAAK,aAAa,EACxDvD,EAAC,UAAO,IAAKuD,GAAM,UAAU,CAAC,GAAG,IAAK,KAAK,YAAY,GACzD,GANmCpB,GAAO,GAAK,kBAAoBsE,CAOrE,CAEH,EACH,EACAzG,EAAC,OACC,UAAWoB,EACT,sIAEF,EACA,QAASmF,EAET,SAAAvG,EAACkC,EAAA,CAAqB,UAAU,oCAAoC,EACtE,EACAlC,EAAC,OACC,UAAWoB,EACT,uIAEF,EACA,QAASoF,EAET,SAAAxG,EAACoC,GAAA,CAAsB,UAAU,oCAAoC,EACvE,GACF,CAEJ,EAEMyE,GAA2B1E,GACxBnC,EAAC,OAAI,mBAAO,EAGrB,IAAO8G,GAAQ/E,GAAWM,EAAc",
6
- "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "useImperativeHandle", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "Autoplay", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "withLayout", "gaTrack", "ExposureDetector", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "jIndex", "exposureKey", "handleExposure", "pictureSource", "ProductGalleryTab3DView", "ProductGallery_default"]
4
+ "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Badge } from '../../../../../components/index.js'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n useEffect,\n type Dispatch,\n type SetStateAction,\n useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\nimport { debounce } from 'es-toolkit'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n <path\n d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n <path\n d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nconst ProductGallery = () => {\n const { copyWriting } = useAiuiContext()\n const { product, variant, selectedOptions } = useBizProductContext()\n const defaultMediaData = useVariantMedia({ product, variant })\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n const customMediaList = variant?.metafields?.component?.custom_media_list\n let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n if (customMediaList && customMediaList?.available) {\n productList = customMediaList?.product || []\n sceneList = customMediaList?.scenarios || []\n keyFeaturesList = customMediaList?.keyFeatures || []\n videoList = customMediaList?.video || []\n } else {\n productList = defaultMediaData?.productList\n sceneList = defaultMediaData?.sceneList\n keyFeaturesList = defaultMediaData?.keyFeaturesList\n videoList = defaultMediaData?.videoList\n }\n\n const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n productList: productList,\n sceneList: sceneList,\n keyFeaturesList: keyFeaturesList,\n videoList: videoList,\n }\n\n const galleryTabs = useMemo(() => {\n const productTab: ProductGalleryProps =\n product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n const variantProductGallery =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n return productTab\n ?.map((item: any) => {\n // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n const variantProductGalleryItem = variantProductGallery?.find(\n (variantItem: any) => item?.galleries === variantItem?.galleries\n )\n let galleries = galleryMap[item?.galleries] || []\n\n if (\n variantProductGalleryItem?.images &&\n Array.isArray(variantProductGalleryItem.images) &&\n variantProductGalleryItem.images.length > 0\n ) {\n // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n const imageGalleries = variantProductGalleryItem.images\n .map((imageItem: any) => {\n // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n const imageSourceParts: string[] = []\n if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n imageSourceParts.push(`${imageItem.image_1920} 1920`)\n }\n if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n imageSourceParts.push(`${imageItem.image_1440} 1440`)\n }\n if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n imageSourceParts.push(`${imageItem.image_1024} 1024`)\n }\n if (imageItem.image_768 && imageItem.image_768.trim()) {\n imageSourceParts.push(`${imageItem.image_768} 767`)\n }\n if (imageItem.image_390 && imageItem.image_390.trim()) {\n imageSourceParts.push(`${imageItem.image_390} 390`)\n }\n\n // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n if (imageSourceParts.length > 0) {\n const responsiveSource = imageSourceParts.join(', ')\n return {\n image: {\n url: responsiveSource,\n altText: item.comment?.content || '',\n },\n // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n _fromImages: true,\n _responsiveSource: responsiveSource,\n } as any\n }\n return null\n })\n .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n if (imageGalleries.length > 0) {\n galleries = imageGalleries\n }\n // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n }\n\n return {\n ...item,\n galleries,\n }\n })\n .filter((item: any) => item.galleries.length > 0)\n }, [variant?.payload, galleryMap, product?.payload])\n\n const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n const [activeTabIndex, setActiveTabIndex] = useState(0)\n const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n const handleNextTab = useCallback(() => {\n const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n setActiveTabIndex(nextIndex)\n setActiveGalleryTab(galleryTabs[nextIndex])\n setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n }, [activeTabIndex, galleryTabs])\n\n // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n const handlePrevTab = useCallback(() => {\n const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n setActiveTabIndex(prevIndex)\n setActiveGalleryTab(galleryTabs[prevIndex])\n // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n setTargetSlideIndex(prevTabGalleries.length - 1)\n }, [activeTabIndex, galleryTabs])\n\n // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n useEffect(() => {\n if (activeTabIndex !== null && activeTabIndex !== undefined) {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n requestAnimationFrame(() => {\n productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n })\n }\n }, [activeTabIndex])\n\n useEffect(() => {\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n setActiveGalleryTab(galleryTabs[0])\n setActiveTabIndex(0)\n }, [variant?.id])\n\n // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n const renderGalleryForTab = (tab: any, index: number) => {\n switch (tab?.galleryTabType) {\n case GalleryTabType.GALLERY_IMAGE_MAIN:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_FEATURES:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_IMAGE_SCENE:\n return (\n <ProductGalleryTabImage\n {...tab}\n index={index}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n case GalleryTabType.GALLERY_VIDEO:\n return (\n <ProductGalleryTabVideo\n {...tab}\n onNextTab={handleNextTab}\n onPrevTab={handlePrevTab}\n targetSlideIndex={targetSlideIndex}\n onSlideChange={() => setTargetSlideIndex(null)}\n />\n )\n default:\n return null\n }\n }\n\n return (\n <div id=\"ipc-product-gallery\">\n <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n <div className=\"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n {galleryTabs.map((item: any, index: number) => {\n return (\n <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n {renderGalleryForTab(item, index)}\n </Content>\n )\n })}\n </div>\n <ProductGalleryTab\n ref={productGalleryTabRef}\n galleryTabs={galleryTabs}\n activeGalleryTab={activeGalleryTab}\n setActiveGalleryTab={setActiveGalleryTab}\n setActiveTabIndex={setActiveTabIndex}\n setTargetSlideIndex={setTargetSlideIndex}\n />\n </Root>\n </div>\n )\n}\n\nexport interface ProductGalleryTabRef {\n scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n ProductGalleryTabRef,\n {\n galleryTabs: GalleryTabItemProps[]\n activeGalleryTab: GalleryTabItemProps\n setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n setActiveTabIndex: Dispatch<SetStateAction<number>>\n setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n }\n>((props, ref) => {\n const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n const { product } = useBizProductContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = event.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }, [])\n\n const handleGalleryTabClick = useCallback(\n (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n setActiveGalleryTab(item)\n setActiveTabIndex(index)\n setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n scrollToEvent(el)\n },\n [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n )\n\n // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n const scrollToTab = useCallback(\n (index: number) => {\n if (scrollContainerRef.current && galleryTabs[index]) {\n const container = scrollContainerRef.current\n const tabItem = galleryTabs[index]\n const button = triggerRefs.current.get(tabItem.tabValue)\n\n if (button) {\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n },\n [galleryTabs]\n )\n\n useImperativeHandle(ref, () => ({\n scrollToTab,\n }))\n\n return (\n <div className=\"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n <List\n ref={scrollContainerRef}\n className=\"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n <div className=\"whitespace-nowrap\">\n {galleryTabs?.map((item, index) => {\n return (\n <Trigger\n ref={el => {\n if (el) {\n triggerRefs.current.set(item.tabValue, el)\n } else {\n triggerRefs.current.delete(item.tabValue)\n }\n }}\n className={cn(\n 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n )}\n onClick={el => handleGalleryTabClick(el, item, index)}\n key={item.tabValue + index}\n value={item.tabValue}\n >\n {item.tabLabel}\n </Trigger>\n )\n })}\n </div>\n </List>\n <div className=\"laptop:gap-2 laptop:flex hidden\">\n {product.metafields?.global?.specifications && (\n <>\n <SpecsModal /> | <CompareModal />\n </>\n )}\n </div>\n </div>\n )\n})\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, totalSavings } = useBizProductContext()\n const paginationRef = useRef<HTMLDivElement>(null)\n const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n const [textGroups, setTextGroups] = useState<string[]>([])\n const measureRef = useRef<HTMLDivElement>(null)\n\n const imageClassName = useMemo(() => {\n if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n // return '420px'\n } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n // return '560px'\n }\n }, [props?.galleryTabType])\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && !!props.targetSlideIndex) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n // \u5C06\u6587\u672C\u63092\u884C\u4E00\u7EC4\u8FDB\u884C\u5206\u7EC4\n useEffect(() => {\n const calculateGroups = () => {\n if (!props?.comment?.content || !measureRef.current) return\n\n const measureEl = measureRef.current\n\n // \u5148\u6D4B\u91CF\u5355\u884C\u9AD8\u5EA6\n measureEl.textContent = 'Test'\n const singleLineHeight = measureEl.offsetHeight\n const twoLinesMaxHeight = singleLineHeight * 2 + 2 // 2\u884C\u7684\u6700\u5927\u9AD8\u5EA6\uFF0C\u52A02px\u5BB9\u5DEE\n\n // \u6E05\u7406HTML\u6807\u7B7E\u5E76\u5206\u5272\u5355\u8BCD\n const cleanText = props.comment.content\n .replace(/<[^>]*>/g, ' ')\n .replace(/\\s+/g, ' ')\n .trim()\n const words = cleanText.split(' ')\n const groups: string[] = []\n let currentGroup = ''\n\n for (let i = 0; i < words.length; i++) {\n const word = words[i]\n const testText = currentGroup ? `${currentGroup} ${word}` : word\n\n // \u76F4\u63A5\u5728 measureRef \u5143\u7D20\u4E0A\u6D4B\u91CF\n measureEl.textContent = testText\n const testHeight = measureEl.offsetHeight\n\n if (testHeight > twoLinesMaxHeight) {\n // \u5F53\u524D\u5355\u8BCD\u4F1A\u5BFC\u81F4\u8D85\u8FC72\u884C\uFF0C\u4FDD\u5B58\u4E4B\u524D\u7684\u7EC4\n if (currentGroup) {\n groups.push(currentGroup)\n currentGroup = word\n } else {\n // \u5355\u4E2A\u5355\u8BCD\u5C31\u8D85\u8FC72\u884C\uFF0C\u5F3A\u5236\u52A0\u5165\n groups.push(word)\n currentGroup = ''\n }\n } else {\n // \u8FD8\u57282\u884C\u4EE5\u5185\uFF0C\u7EE7\u7EED\u7D2F\u52A0\n currentGroup = testText\n }\n }\n\n // \u6DFB\u52A0\u6700\u540E\u4E00\u7EC4\n if (currentGroup) {\n groups.push(currentGroup)\n }\n\n // \u6E05\u7A7A\u6D4B\u91CF\u5143\u7D20\n measureEl.textContent = ''\n setTextGroups(groups)\n }\n\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDDDOM\u6E32\u67D3\u5B8C\u6210\u540E\u518D\u8BA1\u7B97\n const rafId = requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n calculateGroups()\n })\n })\n\n // \u76D1\u542C\u7A97\u53E3\u5927\u5C0F\u53D8\u5316\uFF0C\u91CD\u65B0\u8BA1\u7B97\u5206\u7EC4\n const handleResize = () => {\n calculateGroups()\n }\n\n window.addEventListener('resize', debounce(handleResize, 500))\n return () => {\n cancelAnimationFrame(rafId)\n window.removeEventListener('resize', debounce(handleResize, 500))\n }\n }, [props?.comment?.content])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n ref={ref}\n className=\"h-full\"\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n thumbs={{ swiper: thumbsSwiper }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n const exposureKey = `${props.tabValue}-${jIndex}`\n\n // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n const handleExposure = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: props?.tabLabel || '',\n position: jIndex + 1,\n creative_id: '',\n component_title: '',\n component_description: '',\n navigation: '',\n },\n })\n }\n\n // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <ExposureDetector\n onExposure={handleExposure}\n exposureKey={exposureKey}\n threshold={0.5}\n duration={2000}\n className=\"h-full\"\n >\n <Picture\n source={pictureSource}\n alt={item?.image?.altText}\n className={cn('h-full', imageClassName)}\n imgClassName=\"object-cover h-full\"\n />\n </ExposureDetector>\n </SwiperSlide>\n )\n })}\n </Swiper>\n {variant.availableForSale && !!totalSavings && !props.index && (\n <Badge\n size=\"lg\"\n className=\"bg-brand laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white\"\n >\n {`${formatPrice({\n amount: totalSavings,\n currencyCode: variant?.price?.currencyCode,\n locale: locale,\n })} ${copyWriting?.off}`}\n </Badge>\n )}\n <div\n className={cn(\n 'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n `swiper-button`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n <div\n className={cn(\n 'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n `swiper-button`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n </div>\n {/* {props?.galleries?.map((item, jIndex) => {\n return (\n <Picture\n key={props?.id + 'SwiperSlideItem' + jIndex}\n source={item?.image?.url}\n alt={item?.image?.altText}\n className=\"h-full\"\n imgClassName=\"object-cover h-full\"\n />\n )\n })} */}\n <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n <div className=\"tablet:block hidden\">\n <Swiper\n className=\"flex items-center justify-between\"\n onSwiper={setThumbsSwiper}\n spaceBetween={12}\n slidesPerView={6}\n freeMode={true}\n watchSlidesProgress={true}\n modules={[Navigation, Thumbs]}\n >\n {props?.galleries?.map((item, jIndex) => (\n <SwiperSlide\n key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.altText}\n className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n imgClassName=\"object-cover h-full\"\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n {!props?.index && (\n <div className=\"flex items-center gap-2\">\n <Picture\n source={props?.comment?.avatar?.url}\n className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n imgClassName=\"object-cover \"\n />\n <div className=\"relative max-w-[528px]\">\n {/* \u9690\u85CF\u7684\u6D4B\u91CF\u5143\u7D20 */}\n <div\n ref={measureRef}\n className=\"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0\"\n style={{ visibility: 'hidden' }}\n />\n <Swiper\n modules={[Autoplay]}\n loop={textGroups.length > 1}\n className=\"h-[44px]\"\n direction=\"vertical\"\n autoplay={{ delay: 5000, disableOnInteraction: false }}\n >\n {textGroups.length > 0 ? (\n textGroups.map((group, index) => (\n <SwiperSlide key={index + 'text-group'}>\n <Text\n html={group}\n as=\"div\"\n className=\"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n ))\n ) : (\n <SwiperSlide>\n <Text\n as=\"div\"\n html={props?.comment?.content}\n className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n />\n </SwiperSlide>\n )}\n </Swiper>\n </div>\n </div>\n )}\n </div>\n <div\n ref={paginationRef}\n className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n />\n </div>\n )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n const handlePrevClick = useCallback(() => {\n if (swiper?.isBeginning) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n props.onPrevTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slidePrev()\n }\n }, [swiper, props])\n\n const handleNextClick = useCallback(() => {\n if (swiper?.isEnd) {\n // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n props.onNextTab?.()\n } else {\n // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n swiper?.slideNext()\n }\n }, [swiper, props])\n\n // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n useEffect(() => {\n if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n }\n }, [swiper, props.targetSlideIndex, props])\n\n return (\n <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n <Swiper\n className=\"h-full\"\n onSwiper={setSwiper}\n onTouchEnd={(swiper, event) => {\n if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n handlePrevClick()\n } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n handleNextClick()\n }\n }}\n // navigation={{\n // nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n // prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n // }}\n modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={{\n 0: {\n slidesPerView: 1,\n freeMode: false,\n },\n }}\n >\n {props?.galleries?.map((item, jIndex) => {\n return (\n <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n <video controls className=\"size-full object-cover\">\n <track kind=\"captions\" />\n <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n </video>\n </SwiperSlide>\n )\n })}\n </Swiper>\n <div\n className={cn(\n 'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n )}\n onClick={handlePrevClick}\n >\n <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n <div\n className={cn(\n 'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n )}\n onClick={handleNextClick}\n >\n <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n </div>\n </div>\n )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "useImperativeHandle", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "Autoplay", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "withLayout", "gaTrack", "ExposureDetector", "debounce", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "textGroups", "setTextGroups", "measureRef", "imageClassName", "handlePrevClick", "handleNextClick", "calculateGroups", "measureEl", "twoLinesMaxHeight", "words", "groups", "currentGroup", "i", "word", "testText", "rafId", "handleResize", "jIndex", "exposureKey", "handleExposure", "pictureSource", "group", "ProductGalleryTab3DView", "ProductGallery_default"]
7
7
  }
package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js CHANGED
@@ -1,2 +1,2 @@
1
- import{useState as u,useEffect as w}from"react";import{debounce as l}from"es-toolkit";const a=(e,n=100)=>{const[c,i]=u("");return w(()=>{const o=()=>{const s=Math.ceil(window.scrollY+n);for(let t=e.length-1;t>=0;t--){const r=document.getElementById(e[t]);if(r){const d=Math.ceil(r.getBoundingClientRect().top+window.scrollY);if(s>=d){i(e[t]);break}}}};return o(),window.addEventListener("scroll",l(o,50)),()=>{window.removeEventListener("scroll",l(o,50))}},[e,n]),c};export{a as useScrollSpy};
1
+ import{useState as g,useEffect as a}from"react";import{debounce as f}from"es-toolkit";const h=(t,n=100)=>{const[s,o]=g("");return a(()=>{const r=()=>{const l=window.scrollY,u=window.innerHeight,w=document.documentElement.scrollHeight;if(l+u>=w-10){const e=t[t.length-1];if(e){o(e);return}}let i=t[0]||"";for(let e=t.length-1;e>=0;e--){const d=document.getElementById(t[e]);if(d){const m=d.getBoundingClientRect().top+window.scrollY;if(l+n>=m){i=t[e];break}}}o(i)};r();const c=f(r,50);return window.addEventListener("scroll",c),()=>{window.removeEventListener("scroll",c)}},[t,n]),s};export{h as useScrollSpy};
2
2
  //# sourceMappingURL=useScrollSpy.js.map
package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.tsx"],
4
- "sourcesContent": ["import { useState, useEffect } from 'react'\nimport { debounce } from 'es-toolkit'\n\nconst useScrollSpy = (sectionIds: string[], offset = 100) => {\n const [activeId, setActiveId] = useState('')\n\n useEffect(() => {\n const handleScroll = () => {\n const scrollPosition = Math.ceil(window.scrollY + offset)\n\n // \u904D\u5386\u6240\u6709section\uFF0C\u627E\u5230\u5F53\u524D\u53EF\u89C6\u533A\u57DF\u5185\u7684section\n for (let i = sectionIds.length - 1; i >= 0; i--) {\n const section = document.getElementById(sectionIds[i])\n if (section) {\n const offsetTop = Math.ceil(section.getBoundingClientRect().top + window.scrollY)\n if (scrollPosition >= offsetTop) {\n setActiveId(sectionIds[i])\n break\n }\n }\n }\n }\n\n // \u521D\u59CB\u5316\u65F6\u6267\u884C\u4E00\u6B21\n handleScroll()\n\n // \u76D1\u542C\u6EDA\u52A8\u4E8B\u4EF6\n window.addEventListener('scroll', debounce(handleScroll, 50))\n\n return () => {\n window.removeEventListener('scroll', debounce(handleScroll, 50))\n }\n }, [sectionIds, offset])\n\n return activeId\n}\n\nexport { useScrollSpy }\n"],
5
- "mappings": "AAAA,OAAS,YAAAA,EAAU,aAAAC,MAAiB,QACpC,OAAS,YAAAC,MAAgB,aAEzB,MAAMC,EAAe,CAACC,EAAsBC,EAAS,MAAQ,CAC3D,KAAM,CAACC,EAAUC,CAAW,EAAIP,EAAS,EAAE,EAE3C,OAAAC,EAAU,IAAM,CACd,MAAMO,EAAe,IAAM,CACzB,MAAMC,EAAiB,KAAK,KAAK,OAAO,QAAUJ,CAAM,EAGxD,QAASK,EAAIN,EAAW,OAAS,EAAGM,GAAK,EAAGA,IAAK,CAC/C,MAAMC,EAAU,SAAS,eAAeP,EAAWM,CAAC,CAAC,EACrD,GAAIC,EAAS,CACX,MAAMC,EAAY,KAAK,KAAKD,EAAQ,sBAAsB,EAAE,IAAM,OAAO,OAAO,EAChF,GAAIF,GAAkBG,EAAW,CAC/BL,EAAYH,EAAWM,CAAC,CAAC,EACzB,KACF,CACF,CACF,CACF,EAGA,OAAAF,EAAa,EAGb,OAAO,iBAAiB,SAAUN,EAASM,EAAc,EAAE,CAAC,EAErD,IAAM,CACX,OAAO,oBAAoB,SAAUN,EAASM,EAAc,EAAE,CAAC,CACjE,CACF,EAAG,CAACJ,EAAYC,CAAM,CAAC,EAEhBC,CACT",
6
- "names": ["useState", "useEffect", "debounce", "useScrollSpy", "sectionIds", "offset", "activeId", "setActiveId", "handleScroll", "scrollPosition", "i", "section", "offsetTop"]
4
+ "sourcesContent": ["import { useState, useEffect } from 'react'\nimport { debounce } from 'es-toolkit'\n\nconst useScrollSpy = (sectionIds: string[], offset = 100) => {\n const [activeId, setActiveId] = useState('')\n\n useEffect(() => {\n const handleScroll = () => {\n const scrollPosition = window.scrollY\n const windowHeight = window.innerHeight\n const documentHeight = document.documentElement.scrollHeight\n\n // \u5982\u679C\u5DF2\u7ECF\u6EDA\u52A8\u5230\u9875\u9762\u5E95\u90E8\uFF0C\u6FC0\u6D3B\u6700\u540E\u4E00\u4E2Asection\n if (scrollPosition + windowHeight >= documentHeight - 10) {\n const lastId = sectionIds[sectionIds.length - 1]\n if (lastId) {\n setActiveId(lastId)\n return\n }\n }\n\n // \u4ECE\u540E\u5F80\u524D\u904D\u5386\uFF0C\u627E\u5230\u7B2C\u4E00\u4E2A\u5DF2\u7ECF\u8FDB\u5165\u89C6\u53E3\uFF08\u8003\u8651offset\uFF09\u7684section\n let currentActiveId = sectionIds[0] || ''\n\n for (let i = sectionIds.length - 1; i >= 0; i--) {\n const section = document.getElementById(sectionIds[i])\n if (section) {\n // \u83B7\u53D6\u5143\u7D20\u76F8\u5BF9\u4E8E\u6587\u6863\u9876\u90E8\u7684\u7EDD\u5BF9\u4F4D\u7F6E\n const rect = section.getBoundingClientRect()\n const sectionTop = rect.top + window.scrollY\n\n // \u5982\u679C\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E + offset \u5DF2\u7ECF\u8D85\u8FC7\u8FD9\u4E2Asection\u7684\u9876\u90E8\uFF0C\u6FC0\u6D3B\u5B83\n if (scrollPosition + offset >= sectionTop) {\n currentActiveId = sectionIds[i]\n break\n }\n }\n }\n\n setActiveId(currentActiveId)\n }\n\n // \u521D\u59CB\u5316\u65F6\u6267\u884C\u4E00\u6B21\n handleScroll()\n\n // \u521B\u5EFAdebounce\u51FD\u6570\u5E76\u4FDD\u5B58\u5F15\u7528\uFF0C\u786E\u4FDD\u80FD\u6B63\u786E\u79FB\u9664\u76D1\u542C\u5668\n const debouncedHandleScroll = debounce(handleScroll, 50)\n window.addEventListener('scroll', debouncedHandleScroll)\n\n return () => {\n window.removeEventListener('scroll', debouncedHandleScroll)\n }\n }, [sectionIds, offset])\n\n return activeId\n}\n\nexport { useScrollSpy }\n"],
5
+ "mappings": "AAAA,OAAS,YAAAA,EAAU,aAAAC,MAAiB,QACpC,OAAS,YAAAC,MAAgB,aAEzB,MAAMC,EAAe,CAACC,EAAsBC,EAAS,MAAQ,CAC3D,KAAM,CAACC,EAAUC,CAAW,EAAIP,EAAS,EAAE,EAE3C,OAAAC,EAAU,IAAM,CACd,MAAMO,EAAe,IAAM,CACzB,MAAMC,EAAiB,OAAO,QACxBC,EAAe,OAAO,YACtBC,EAAiB,SAAS,gBAAgB,aAGhD,GAAIF,EAAiBC,GAAgBC,EAAiB,GAAI,CACxD,MAAMC,EAASR,EAAWA,EAAW,OAAS,CAAC,EAC/C,GAAIQ,EAAQ,CACVL,EAAYK,CAAM,EAClB,MACF,CACF,CAGA,IAAIC,EAAkBT,EAAW,CAAC,GAAK,GAEvC,QAASU,EAAIV,EAAW,OAAS,EAAGU,GAAK,EAAGA,IAAK,CAC/C,MAAMC,EAAU,SAAS,eAAeX,EAAWU,CAAC,CAAC,EACrD,GAAIC,EAAS,CAGX,MAAMC,EADOD,EAAQ,sBAAsB,EACnB,IAAM,OAAO,QAGrC,GAAIN,EAAiBJ,GAAUW,EAAY,CACzCH,EAAkBT,EAAWU,CAAC,EAC9B,KACF,CACF,CACF,CAEAP,EAAYM,CAAe,CAC7B,EAGAL,EAAa,EAGb,MAAMS,EAAwBf,EAASM,EAAc,EAAE,EACvD,cAAO,iBAAiB,SAAUS,CAAqB,EAEhD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,CACF,EAAG,CAACb,EAAYC,CAAM,CAAC,EAEhBC,CACT",
6
+ "names": ["useState", "useEffect", "debounce", "useScrollSpy", "sectionIds", "offset", "activeId", "setActiveId", "handleScroll", "scrollPosition", "windowHeight", "documentHeight", "lastId", "currentActiveId", "i", "section", "sectionTop", "debouncedHandleScroll"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerSticky/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as k,jsx as e,jsxs as p}from"react/jsx-runtime";import K,{useState as d,useRef as f,useEffect as y,forwardRef as U}from"react";import{debounce as X}from"es-toolkit";import{useInView as Z}from"react-intersection-observer";import{cn as v}from"../../helpers/utils.js";import{withLayout as D}from"../../shared/Styles.js";import ee from"../Slogan/index.js";import{YouTubePlayer as te}from"../VideoModal/YouTubePlayer.js";import{Grid as re,GridItem as x}from"../../components/grid.js";import{Container as ae}from"../../components/container.js";import se from"../BrandEquity/index.js";import oe from"../MemberEquity/index.js";import ne from"../Spacer/index.js";import ie from"gsap";import{convertLexicalToHTML as S}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as T}from"react-responsive";import le from"../../helpers/ScrollLoadVideo.js";const L=({defaultConverters:s})=>({...s,text:o=>{const{node:t}=o;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),N=({children:s,spaceY:o,className:t})=>{const a=T({query:"(max-width: 768px)"});return e(ae,{spaceY:o,className:v("!bg-transparent",t),children:p(re,{children:[!a&&e(x,{span:1}),e(x,{span:a?12:10,children:s}),!a&&e(x,{span:1})]})})},ce=K.forwardRef(({children:s,id:o,components:t},a)=>{const n=f(null);return p("div",{ref:n,className:"relative z-10",children:[e(k,{children:s}),e(k,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(N,{spaceY:"none",children:e(se,{data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(N,{spaceY:"none",children:e(oe,{data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e(ne,{data:r,style:r?.style,className:"!bg-transparent"});default:return null}})})]})}),de=U(({className:s="",wrapperClassName:o="",id:t,data:{title:a,videoTitle:n,mobVideo:r,mobImg:m,img:u,isYouTube:P,youtubePcId:M,youtubeMobileId:$,video:b,theme:R,shape:B,components:Y}},pe)=>{const H=f(null),w=f(null),{ref:q,inView:l}=Z(),[me,F]=d(0),[z,I]=d(!1),[j,G]=d(!1),V=f(null),Q=typeof a=="string"?a:a&&S({data:a,converters:L});typeof n=="string"||n&&S({data:n,converters:L});const[O,W]=d(0),[i,_]=d(!1),C=T({query:"(max-width: 768px)"});y(()=>{_(C)},[C]);const g=X(()=>{if(w.current){const h=w.current.getBoundingClientRect(),c=i?window.screen.height:window.innerHeight,A=window.scrollY||window.pageYOffset,J=h.bottom+A,E=document.documentElement.scrollHeight-J;W(E>c?c:E),F(c)}},2e3);return y(()=>{l&&!z&&(H.current?.play(),I(!0))},[l,z]),y(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[]),y(()=>{function h(){const c=i?window.screen.height:window.innerHeight;ie.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${c*1.8}px bottom`,scrub:.5}}).from(`#${t} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}l&&h()},[l]),p(k,{children:[e("div",{id:t,className:v("relative z-20 h-screen w-full",s,{"aiui-dark":R==="dark","rounded-box":B==="rounded"}),ref:V,children:e("div",{ref:q,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:e(N,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(ee,{className:"sticky-title antialiased",data:{title:Q||"",theme:R}})})})}),p("div",{ref:w,style:{marginBottom:`-${O}px`,zIndex:l?2:1},className:v(t,"relative mt-[-200vh]",o),children:[e("div",{className:"sticky top-0 ",children:p("div",{className:v("media-cover","relative h-screen w-full"),children:[P?e(te,{youTubeId:i&&$||M}):b?.url&&e(le,{videoRef:H,poster:i&&m?.url?m?.url:u?.url,src:i&&r?.url?r?.url:b?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{G(!0)}}),u?.url&&(!b?.url||j)&&e("img",{src:i&&m?.url?m?.url:u?.url,alt:u?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]",loading:"lazy"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),e("div",{className:"relative h-screen w-full"}),e(ce,{components:Y}),e("div",{className:"relative h-screen w-full"})]})]})});var Se=D(de);export{Se as default};
1
+ "use client";import{Fragment as N,jsx as e,jsxs as v}from"react/jsx-runtime";import A,{useState as d,useRef as u,useEffect as f,forwardRef as J}from"react";import{debounce as K}from"es-toolkit";import{useInView as U}from"react-intersection-observer";import{cn as y}from"../../helpers/utils.js";import{withLayout as X}from"../../shared/Styles.js";import Z from"../Slogan/index.js";import{YouTubePlayer as D}from"../VideoModal/YouTubePlayer.js";import{Grid as ee,GridItem as te}from"../../components/grid.js";import{Container as re}from"../../components/container.js";import ae from"../BrandEquity/index.js";import se from"../MemberEquity/index.js";import oe from"../Spacer/index.js";import ne from"gsap";import{convertLexicalToHTML as E}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as ie}from"react-responsive";import le from"../../helpers/ScrollLoadVideo.js";const S=({defaultConverters:a})=>({...a,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),x=({children:a,spaceY:s,className:t})=>e(re,{spaceY:s,className:y("!bg-transparent",t),children:e(ee,{children:e(te,{span:12,children:a})})}),ce=A.forwardRef(({children:a,id:s,components:t},i)=>{const o=u(null);return v("div",{ref:o,className:"relative z-10",children:[e(N,{children:a}),e(N,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(x,{spaceY:"none",children:e(ae,{data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(x,{spaceY:"none",children:e(se,{data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e(oe,{data:r,style:r?.style,className:"!bg-transparent"});default:return null}})})]})}),de=J(({className:a="",wrapperClassName:s="",id:t,data:{title:i,videoTitle:o,mobVideo:r,mobImg:p,img:m,isYouTube:T,youtubePcId:k,youtubeMobileId:L,video:b,theme:R,shape:P,components:$}},pe)=>{const H=u(null),g=u(null),{ref:B,inView:l}=U(),[me,Y]=d(0),[M,q]=d(!1),[F,I]=d(!1),j=u(null),G=typeof i=="string"?i:i&&E({data:i,converters:S});typeof o=="string"||o&&E({data:o,converters:S});const[V,Q]=d(0),[n,O]=d(!1),z=ie({query:"(max-width: 768px)"});f(()=>{O(z)},[z]);const w=K(()=>{if(g.current){const h=g.current.getBoundingClientRect(),c=n?window.screen.height:window.innerHeight,W=window.scrollY||window.pageYOffset,_=h.bottom+W,C=document.documentElement.scrollHeight-_;Q(C>c?c:C),Y(c)}},2e3);return f(()=>{l&&!M&&(H.current?.play(),q(!0))},[l,M]),f(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),f(()=>{function h(){const c=n?window.screen.height:window.innerHeight;ne.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${c*1.8}px bottom`,scrub:.5}}).from(`#${t} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}l&&h()},[l]),v(N,{children:[e("div",{id:t,className:y("relative z-20 h-screen w-full",a,{"aiui-dark":R==="dark","rounded-box":P==="rounded"}),ref:j,children:e("div",{ref:B,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:e(x,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(Z,{className:"sticky-title antialiased",data:{title:G||"",theme:R}})})})}),v("div",{ref:g,style:{marginBottom:`-${V}px`,zIndex:l?2:1},className:y(t,"relative mt-[-200vh]",s),children:[e("div",{className:"sticky top-0 ",children:v("div",{className:y("media-cover","relative h-screen w-full"),children:[T?e(D,{youTubeId:n&&L||k}):b?.url&&e(le,{videoRef:H,poster:n&&p?.url?p?.url:m?.url,src:n&&r?.url?r?.url:b?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{I(!0)}}),m?.url&&(!b?.url||F)&&e("img",{src:n&&p?.url?p?.url:m?.url,alt:m?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]",loading:"lazy"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),e("div",{className:"relative h-screen w-full"}),e(ce,{components:$}),e("div",{className:"relative h-screen w-full"})]})]})});var Se=X(de);export{Se as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/MediaPlayerSticky/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }, ref) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n (\n {\n className = '',\n wrapperClassName = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n },\n ref\n ) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.5,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n if (inView) {\n gsapResize()\n }\n }, [inView])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n style={{ willChange: 'transform', contain: 'paint' }}\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n >\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {isYouTube ? (\n <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n ) : (\n video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )\n )}\n {img?.url && (!video?.url || isEntered) && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n loading=\"lazy\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{\n backdropFilter: 'blur(0px)',\n WebkitBackdropFilter: 'blur(0px)',\n willChange: 'backdrop-filter',\n }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "MediaPlayerSticky_default"]
4
+ "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n // const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {/* {!isMobile && <GridItem span={1} />} */}\n <GridItem span={12}>{children}</GridItem>\n {/* {!isMobile && <GridItem span={1} />} */}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }, ref) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n (\n {\n className = '',\n wrapperClassName = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n },\n ref\n ) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.5,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n if (inView) {\n gsapResize()\n }\n }, [inView])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n style={{ willChange: 'transform', contain: 'paint' }}\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n >\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {isYouTube ? (\n <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n ) : (\n video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )\n )}\n {img?.url && (!video?.url || isEntered) && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n loading=\"lazy\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{\n backdropFilter: 'blur(0px)',\n WebkitBackdropFilter: 'blur(0px)',\n willChange: 'backdrop-filter',\n }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "SubBox", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "isMobile", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "MediaPlayerSticky_default"]
7
7
  }
package/dist/esm/stories/shelfDisplay.stories.js CHANGED
@@ -1,2 +1,2 @@
1
- import t from"../biz-components/ShelfDisplay/index.js";const o={title:"Biz-Components/ShelfDisplay",component:t,parameters:{layout:"fullscreen"},tags:["autodocs"]};var a=o;const e=[{price:"$1,999.00",basePrice:"$2,999.00",subTitle:"Fast Charging for 3 Devices",title:"Anker Prime 27,650mAh Power Bank (250W)",tagItems:["New","20% OFF"],img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}},{price:"$1,999.00",basePrice:"$2,999.00",subTitle:"Fast Charging for 3 Devices",title:"Anker Prime 27,650mAh Power Bank (250W)",tagItems:["New","20% OFF"],img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}}],s={args:{data:{productsCard:e,primaryButton:"Learn More",secondaryButton:"Shop Now"},className:"p-4"}},i={args:{data:{productsCard:e,shape:"round",itemShape:"round",primaryButton:"Learn More",secondaryButton:"Shop Now"},className:"p-4"}};export{s as Default,i as Round,a as default};
1
+ import t from"../biz-components/ShelfDisplay/index.js";import"gsap";import"@gsap/react";import"gsap/dist/ScrollTrigger";import"gsap/dist/SplitText";const o={title:"Biz-Components/ShelfDisplay",component:t,parameters:{layout:"fullscreen"},tags:["autodocs"]};var l=o;const e=[{price:"$1,999.00",basePrice:"$2,999.00",subTitle:"Fast Charging for 3 Devices",title:"Anker Prime 27,650mAh Power Bank (250W)",tagItems:["New","20% OFF"],img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}},{price:"$1,999.00",basePrice:"$2,999.00",subTitle:"Fast Charging for 3 Devices",title:"Anker Prime 27,650mAh Power Bank (250W)",tagItems:["New","20% OFF"],img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}}],u={args:{data:{productsCard:e,primaryButton:"Learn More",secondaryButton:"Shop Now"},className:"p-4"}},y={args:{data:{productsCard:e,shape:"round",itemShape:"round",primaryButton:"Learn More",secondaryButton:"Shop Now"},className:"p-4"}};export{u as Default,y as Round,l as default};
2
2
  //# sourceMappingURL=shelfDisplay.stories.js.map
package/dist/esm/stories/shelfDisplay.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/stories/shelfDisplay.stories.tsx"],
4
- "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport ShelfDisplay from '../biz-components/ShelfDisplay/index.js'\n\nconst meta = {\n title: 'Biz-Components/ShelfDisplay',\n component: ShelfDisplay,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof ShelfDisplay>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockItems = [\n {\n price: '$1,999.00',\n basePrice: '$2,999.00',\n subTitle: 'Fast Charging for 3 Devices',\n title: 'Anker Prime 27,650mAh Power Bank (250W)',\n tagItems: ['New', '20% OFF'],\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n },\n },\n {\n price: '$1,999.00',\n basePrice: '$2,999.00',\n subTitle: 'Fast Charging for 3 Devices',\n title: 'Anker Prime 27,650mAh Power Bank (250W)',\n tagItems: ['New', '20% OFF'],\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n },\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n productsCard: mockItems,\n primaryButton: 'Learn More',\n secondaryButton: 'Shop Now',\n },\n className: 'p-4',\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n productsCard: mockItems,\n shape: 'round',\n itemShape: 'round',\n primaryButton: 'Learn More',\n secondaryButton: 'Shop Now',\n },\n className: 'p-4',\n },\n}\n"],
5
- "mappings": "AACA,OAAOA,MAAkB,0CAEzB,MAAMC,EAAO,CACX,MAAO,8BACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EAAY,CAChB,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,CACH,IAAK,8HACP,CACF,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,CACH,IAAK,8HACP,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,aAAcD,EACd,cAAe,aACf,gBAAiB,UACnB,EACA,UAAW,KACb,CACF,EAEaE,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,aAAcF,EACd,MAAO,QACP,UAAW,QACX,cAAe,aACf,gBAAiB,UACnB,EACA,UAAW,KACb,CACF",
4
+ "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport ShelfDisplay from '../biz-components/ShelfDisplay/index.js'\nimport { gsap } from 'gsap'\nimport { useGSAP } from '@gsap/react'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { SplitText } from 'gsap/dist/SplitText'\n\nconst meta = {\n title: 'Biz-Components/ShelfDisplay',\n component: ShelfDisplay,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof ShelfDisplay>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockItems = [\n {\n price: '$1,999.00',\n basePrice: '$2,999.00',\n subTitle: 'Fast Charging for 3 Devices',\n title: 'Anker Prime 27,650mAh Power Bank (250W)',\n tagItems: ['New', '20% OFF'],\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n },\n },\n {\n price: '$1,999.00',\n basePrice: '$2,999.00',\n subTitle: 'Fast Charging for 3 Devices',\n title: 'Anker Prime 27,650mAh Power Bank (250W)',\n tagItems: ['New', '20% OFF'],\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n },\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n productsCard: mockItems,\n primaryButton: 'Learn More',\n secondaryButton: 'Shop Now',\n },\n className: 'p-4',\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n productsCard: mockItems,\n shape: 'round',\n itemShape: 'round',\n primaryButton: 'Learn More',\n secondaryButton: 'Shop Now',\n },\n className: 'p-4',\n },\n}\n"],
5
+ "mappings": "AACA,OAAOA,MAAkB,0CACzB,MAAqB,OACrB,MAAwB,cACxB,MAA8B,0BAC9B,MAA0B,sBAE1B,MAAMC,EAAO,CACX,MAAO,8BACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EAAY,CAChB,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,CACH,IAAK,8HACP,CACF,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,CACH,IAAK,8HACP,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,aAAcD,EACd,cAAe,aACf,gBAAiB,UACnB,EACA,UAAW,KACb,CACF,EAEaE,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,aAAcF,EACd,MAAO,QACP,UAAW,QACX,cAAe,aACf,gBAAiB,UACnB,EACA,UAAW,KACb,CACF",
6
6
  "names": ["ShelfDisplay", "meta", "shelfDisplay_stories_default", "mockItems", "Default", "Round"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.9-alpha.1764822725414",
3
+ "version": "1.1.9-alpha.1764847194553",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",