@anker-in/headless-ui 1.1.9-alpha.1764077775051 → 1.1.9-alpha.1764130591163

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 (21) hide show
  1. package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js +1 -1
  2. package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map +2 -2
  3. package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +4 -4
  4. package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
  5. package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
  6. package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +2 -2
  7. package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
  8. package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +1 -1
  9. package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
  10. package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
  11. package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js +1 -1
  12. package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map +2 -2
  13. package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +4 -4
  14. package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
  15. package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
  16. package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +3 -3
  17. package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
  18. package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +1 -1
  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/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, Button, Badge } from '../../../../../components/index.js'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n type RefObject,\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 } 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] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop: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 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n <List\n ref={scrollContainerRef}\n className=\"laptop:p-0 desktop: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 desktop:left-6 desktop: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 desktop: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 desktop: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 desktop:bottom-[20px] desktop: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 <div\n ref={commentRef}\n className={cn('line-clamp-2')}\n style={\n {\n // animationDuration: `3s`,\n }\n }\n >\n <Text\n html={props?.comment?.content}\n className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\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-[#1D1D1F] [&_.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", "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, Button, Badge } from '../../../../../components/index.js'\nimport {\n useCallback,\n useMemo,\n useState,\n forwardRef,\n useRef,\n type RefObject,\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] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop: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 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n <List\n ref={scrollContainerRef}\n className=\"laptop:p-0 desktop: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 desktop:left-6 desktop: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 desktop: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 desktop: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 desktop:bottom-[20px] desktop: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 <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-[#1D1D1F]\"\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-[#1D1D1F] [&_.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", "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"]
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.1764077775051",
3
+ "version": "1.1.9-alpha.1764130591163",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",