@anker-in/headless-ui 1.1.16 → 1.1.17-alpha-1765978730
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/AccordionCards/index.d.ts +17 -0
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/cjs/biz-components/AnchorNavigation/index.d.ts +22 -0
- package/dist/cjs/biz-components/AnchorNavigation/index.js +2 -0
- package/dist/cjs/biz-components/AnchorNavigation/index.js.map +7 -0
- package/dist/cjs/biz-components/AnchorNavigation/useAnchorPosition.d.ts +2 -0
- package/dist/cjs/biz-components/AnchorNavigation/useAnchorPosition.js +2 -0
- package/dist/cjs/biz-components/AnchorNavigation/useAnchorPosition.js.map +7 -0
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.d.ts +83 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js +2 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js.map +7 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/index.d.ts +40 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/index.js +2 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/index.js.map +7 -0
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +2 -2
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +2 -2
- package/dist/cjs/biz-components/EventSchedule/index.d.ts +39 -0
- package/dist/cjs/biz-components/EventSchedule/index.js +2 -0
- package/dist/cjs/biz-components/EventSchedule/index.js.map +7 -0
- package/dist/cjs/biz-components/FooterNavigation/icons/Subtract.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/icons/Subtract.js.map +2 -2
- package/dist/cjs/biz-components/FooterNavigation/index.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/index.js.map +2 -2
- package/dist/cjs/biz-components/GraphicAttractionBlock/index.js +1 -1
- package/dist/cjs/biz-components/GraphicAttractionBlock/index.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/icons/Close.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/icons/Close.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/icons/DownArrow.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/icons/DownArrow.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/icons/LeftArrow.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/icons/LeftArrow.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/icons/RightArrow.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/icons/RightArrow.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/Countdown.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/Countdown.js.map +2 -2
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.d.ts +4 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/cjs/biz-components/Media/index.d.ts +32 -0
- package/dist/cjs/biz-components/Media/index.js +2 -0
- package/dist/cjs/biz-components/Media/index.js.map +7 -0
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/MemberEquity/index.js +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js.map +2 -2
- package/dist/cjs/biz-components/PromotionalBar/index.d.ts +35 -0
- package/dist/cjs/biz-components/PromotionalBar/index.js +2 -0
- package/dist/cjs/biz-components/PromotionalBar/index.js.map +7 -0
- package/dist/cjs/biz-components/SearchPage/index.js +1 -1
- package/dist/cjs/biz-components/SearchPage/index.js.map +3 -3
- package/dist/cjs/biz-components/SecondaryBanner/index.d.ts +61 -0
- package/dist/cjs/biz-components/SecondaryBanner/index.js +2 -0
- package/dist/cjs/biz-components/SecondaryBanner/index.js.map +7 -0
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +2 -2
- package/dist/cjs/biz-components/StockShelf/index.d.ts +21 -0
- package/dist/cjs/biz-components/StockShelf/index.js +2 -0
- package/dist/cjs/biz-components/StockShelf/index.js.map +7 -0
- package/dist/cjs/biz-components/Subscribe/index.js.map +2 -2
- package/dist/cjs/biz-components/Tabs/Tabs.js +1 -1
- package/dist/cjs/biz-components/Tabs/Tabs.js.map +2 -2
- package/dist/cjs/biz-components/TabsGroup/index.js +1 -1
- package/dist/cjs/biz-components/TabsGroup/index.js.map +2 -2
- package/dist/cjs/biz-components/TextModal/index.js +1 -1
- package/dist/cjs/biz-components/TextModal/index.js.map +2 -2
- package/dist/cjs/biz-components/VideoModal/index.js +1 -1
- package/dist/cjs/biz-components/VideoModal/index.js.map +2 -2
- package/dist/cjs/biz-components/index.d.ts +5 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/components/container.js +1 -1
- package/dist/cjs/components/container.js.map +2 -2
- package/dist/cjs/components/drop-down.js +1 -1
- package/dist/cjs/components/drop-down.js.map +2 -2
- package/dist/cjs/components/picture.d.ts +2 -0
- package/dist/cjs/components/picture.js +1 -1
- package/dist/cjs/components/picture.js.map +3 -3
- package/dist/cjs/helpers/ScrollLoadVideo.d.ts +5 -1
- package/dist/cjs/helpers/ScrollLoadVideo.js +1 -1
- package/dist/cjs/helpers/ScrollLoadVideo.js.map +3 -3
- package/dist/cjs/stories/HeroBanner.stories.d.ts +4 -1
- package/dist/cjs/stories/HeroBanner.stories.js +2 -2
- package/dist/cjs/stories/HeroBanner.stories.js.map +3 -3
- package/dist/cjs/stories/accordionCards.stories.d.ts +21 -0
- package/dist/cjs/stories/accordionCards.stories.js +1 -1
- package/dist/cjs/stories/accordionCards.stories.js.map +3 -3
- package/dist/cjs/stories/anchorNavigation.stories.d.ts +27 -0
- package/dist/cjs/stories/anchorNavigation.stories.js +2 -0
- package/dist/cjs/stories/anchorNavigation.stories.js.map +7 -0
- package/dist/cjs/stories/buyOneGetOneShelf.stories.d.ts +56 -0
- package/dist/cjs/stories/buyOneGetOneShelf.stories.js +2 -0
- package/dist/cjs/stories/buyOneGetOneShelf.stories.js.map +7 -0
- package/dist/cjs/stories/eventSchedule.stories.d.ts +47 -0
- package/dist/cjs/stories/eventSchedule.stories.js +2 -0
- package/dist/cjs/stories/eventSchedule.stories.js.map +7 -0
- package/dist/cjs/stories/promotionalBar.stories.d.ts +26 -0
- package/dist/cjs/stories/promotionalBar.stories.js +2 -0
- package/dist/cjs/stories/promotionalBar.stories.js.map +7 -0
- package/dist/cjs/stories/secondaryBanner.stories.d.ts +47 -0
- package/dist/cjs/stories/secondaryBanner.stories.js +2 -0
- package/dist/cjs/stories/secondaryBanner.stories.js.map +7 -0
- package/dist/cjs/stories/stockShelf.stories.d.ts +27 -0
- package/dist/cjs/stories/stockShelf.stories.js +2 -0
- package/dist/cjs/stories/stockShelf.stories.js.map +7 -0
- package/dist/esm/biz-components/AccordionCards/index.d.ts +17 -0
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/esm/biz-components/AnchorNavigation/index.d.ts +22 -0
- package/dist/esm/biz-components/AnchorNavigation/index.js +2 -0
- package/dist/esm/biz-components/AnchorNavigation/index.js.map +7 -0
- package/dist/esm/biz-components/AnchorNavigation/useAnchorPosition.d.ts +2 -0
- package/dist/esm/biz-components/AnchorNavigation/useAnchorPosition.js +2 -0
- package/dist/esm/biz-components/AnchorNavigation/useAnchorPosition.js.map +7 -0
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.d.ts +83 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js +2 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js.map +7 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/index.d.ts +40 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/index.js +2 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/index.js.map +7 -0
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +2 -2
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +2 -2
- package/dist/esm/biz-components/EventSchedule/index.d.ts +39 -0
- package/dist/esm/biz-components/EventSchedule/index.js +2 -0
- package/dist/esm/biz-components/EventSchedule/index.js.map +7 -0
- package/dist/esm/biz-components/FooterNavigation/icons/Subtract.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/icons/Subtract.js.map +2 -2
- package/dist/esm/biz-components/FooterNavigation/index.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js.map +2 -2
- package/dist/esm/biz-components/GraphicAttractionBlock/index.js +1 -1
- package/dist/esm/biz-components/GraphicAttractionBlock/index.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/icons/Close.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/icons/Close.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/icons/DownArrow.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/icons/DownArrow.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/icons/LeftArrow.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/icons/LeftArrow.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/icons/RightArrow.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/icons/RightArrow.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/Countdown.js +1 -1
- package/dist/esm/biz-components/HeroBanner/Countdown.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/HeroBanner.d.ts +4 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/esm/biz-components/Media/index.d.ts +32 -0
- package/dist/esm/biz-components/Media/index.js +2 -0
- package/dist/esm/biz-components/Media/index.js.map +7 -0
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/MemberEquity/index.js +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js.map +2 -2
- package/dist/esm/biz-components/PromotionalBar/index.d.ts +35 -0
- package/dist/esm/biz-components/PromotionalBar/index.js +2 -0
- package/dist/esm/biz-components/PromotionalBar/index.js.map +7 -0
- package/dist/esm/biz-components/SearchPage/index.js +1 -1
- package/dist/esm/biz-components/SearchPage/index.js.map +3 -3
- package/dist/esm/biz-components/SecondaryBanner/index.d.ts +61 -0
- package/dist/esm/biz-components/SecondaryBanner/index.js +2 -0
- package/dist/esm/biz-components/SecondaryBanner/index.js.map +7 -0
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +2 -2
- package/dist/esm/biz-components/StockShelf/index.d.ts +21 -0
- package/dist/esm/biz-components/StockShelf/index.js +2 -0
- package/dist/esm/biz-components/StockShelf/index.js.map +7 -0
- package/dist/esm/biz-components/Subscribe/index.js.map +2 -2
- package/dist/esm/biz-components/Tabs/Tabs.js +1 -1
- package/dist/esm/biz-components/Tabs/Tabs.js.map +2 -2
- package/dist/esm/biz-components/TabsGroup/index.js +1 -1
- package/dist/esm/biz-components/TabsGroup/index.js.map +2 -2
- package/dist/esm/biz-components/TextModal/index.js +1 -1
- package/dist/esm/biz-components/TextModal/index.js.map +2 -2
- package/dist/esm/biz-components/VideoModal/index.js +1 -1
- package/dist/esm/biz-components/VideoModal/index.js.map +2 -2
- package/dist/esm/biz-components/index.d.ts +5 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/dist/esm/components/container.js +1 -1
- package/dist/esm/components/container.js.map +2 -2
- package/dist/esm/components/drop-down.js +1 -1
- package/dist/esm/components/drop-down.js.map +2 -2
- package/dist/esm/components/picture.d.ts +2 -0
- package/dist/esm/components/picture.js +1 -1
- package/dist/esm/components/picture.js.map +3 -3
- package/dist/esm/helpers/ScrollLoadVideo.d.ts +5 -1
- package/dist/esm/helpers/ScrollLoadVideo.js +1 -1
- package/dist/esm/helpers/ScrollLoadVideo.js.map +3 -3
- package/dist/esm/stories/HeroBanner.stories.d.ts +4 -1
- package/dist/esm/stories/HeroBanner.stories.js +2 -2
- package/dist/esm/stories/HeroBanner.stories.js.map +3 -3
- package/dist/esm/stories/accordionCards.stories.d.ts +21 -0
- package/dist/esm/stories/accordionCards.stories.js +1 -1
- package/dist/esm/stories/accordionCards.stories.js.map +3 -3
- package/dist/esm/stories/anchorNavigation.stories.d.ts +27 -0
- package/dist/esm/stories/anchorNavigation.stories.js +2 -0
- package/dist/esm/stories/anchorNavigation.stories.js.map +7 -0
- package/dist/esm/stories/buyOneGetOneShelf.stories.d.ts +56 -0
- package/dist/esm/stories/buyOneGetOneShelf.stories.js +2 -0
- package/dist/esm/stories/buyOneGetOneShelf.stories.js.map +7 -0
- package/dist/esm/stories/eventSchedule.stories.d.ts +47 -0
- package/dist/esm/stories/eventSchedule.stories.js +2 -0
- package/dist/esm/stories/eventSchedule.stories.js.map +7 -0
- package/dist/esm/stories/promotionalBar.stories.d.ts +26 -0
- package/dist/esm/stories/promotionalBar.stories.js +2 -0
- package/dist/esm/stories/promotionalBar.stories.js.map +7 -0
- package/dist/esm/stories/secondaryBanner.stories.d.ts +47 -0
- package/dist/esm/stories/secondaryBanner.stories.js +2 -0
- package/dist/esm/stories/secondaryBanner.stories.js.map +7 -0
- package/dist/esm/stories/stockShelf.stories.d.ts +27 -0
- package/dist/esm/stories/stockShelf.stories.js +2 -0
- package/dist/esm/stories/stockShelf.stories.js.map +7 -0
- package/package.json +2 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SearchPage/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n Heading,\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n Text,\n Picture,\n Link,\n Button,\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type {\n SearchPageProps,\n SortKey,\n SearchProductItemProps,\n SearchBlogItemProps,\n SearchPageItemProps,\n SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types.js'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n product,\n onSecondaryButton,\n onPrimaryButton,\n searchValue,\n variantData,\n}: SearchProductItemProps) => {\n const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const listingLink = useMemo(() => {\n return `/products/${product?.handle}?variant=${atobID(variant?.id as string)}`\n }, [product?.handle, variant?.id])\n\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : variant?.price,\n baseAmount: coupon ? variant?.price : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n\n const tags = useMemo(() => {\n return product?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [product?.tags])\n\n return (\n <div className=\"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto\">\n {product?.type === 'advertising' ? (\n <Link href={product?.advertisingLink} className=\"h-full\">\n <Picture\n source={product?.advertisingBgImg?.url}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n />\n <div className=\"desktop:p-6 [&_img]:hover:duration-600 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all\">\n <Text html={product?.advertisingTitle} className=\"desktop:text-[18px] text-sm font-bold text-white\" />\n <Heading\n size={3}\n html={product?.advertisingSubtitle}\n className=\"laptop:line-clamp-3 mt-2 line-clamp-4 font-bold text-white\"\n />\n </div>\n </Link>\n ) : (\n <a\n href={listingLink}\n className=\" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300\"\n >\n <div className=\"ipc_search_product_item_image\">\n <Picture\n className=\"lg-desktop:size-[196px] mx-auto size-[138px]\"\n source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n alt={product.title}\n imgClassName=\"object-cover size-full\"\n />\n </div>\n <div className=\"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4\">\n <div className=\"flex-1\">\n <div className=\"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2\">\n {tags?.map((tag: string) => (\n <Text\n as=\"p\"\n html={tag}\n className=\"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n />\n ))}\n </div>\n <Text\n className=\"desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]\"\n weight=\"bold\"\n html={highlightSearchWord(product?.title || '', searchValue || '')}\n />\n <Text\n as=\"p\"\n className=\"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold\"\n html={highlightSearchWord(product.description, searchValue || '')}\n />\n </div>\n <div>\n <div className=\"mb-2 flex items-center\">\n {!variant?.availableForSale ? (\n <div className=\"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n {copyWriting?.soldOutText || 'Sold Out'}\n </div>\n ) : (\n <>\n <div className=\"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n <div\n className={cn(\n 'ipc_search_product_item_button_group',\n 'lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2'\n )}\n >\n {copyWriting?.learnMoreText && (\n <Button\n variant=\"secondary\"\n className=\"laptop:w-auto w-full\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n onClick={() => onSecondaryButton?.()}\n >\n {copyWriting?.learnMoreText}\n </Button>\n )}\n {copyWriting?.shopNowText && (\n <Button\n variant=\"primary\"\n className=\"laptop:w-auto w-full\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n onClick={() => onPrimaryButton?.()}\n >\n {copyWriting?.shopNowText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </a>\n )}\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n const { copyWriting } = useAiuiContext()\n\n const articleLink = useMemo(() => `blogs/${blog?.handle}/${blog?.handle.replace('storefront-', '')}`, [blog])\n\n return (\n <div className=\"ipc_search_blog_item border-b border-[#E4E5E6] py-6\">\n <div className=\"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4\">\n <div className=\"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]\">\n <Picture\n source={blog?.image?.url}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n alt={blog?.title}\n />\n </div>\n <div className=\"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center\">\n <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n <Text\n html={highlightSearchWord(blog?.content, searchValue)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n />\n <div className=\"desktop:mt-6 mt-4\">\n <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const pageLink = useMemo(() => `${locale === 'us' ? '' : `/${locale}`}/${page?.handle}`, [page, locale])\n return (\n <div className=\"ipc_search_page_items border-b border-[#E4E5E6] py-6\">\n <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n <Text\n as=\"p\"\n html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]\"\n />\n <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"desktop:mt-6 mt-4\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n return (\n <div className=\"flex flex-col items-center justify-center gap-4\">\n <Picture source={url} className=\"h-[180px] w-[240px]\" imgClassName=\"object-cover\" />\n <Text html={label} className=\"desktop:text-[18px] text-sm font-bold leading-[1.4]\" />\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n products,\n title,\n buildProps,\n onSecondaryButton,\n onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n const { products: buildProducts } = buildProps || {}\n return (\n <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n <Heading size={4} weight=\"bold\" html={title} />\n <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4\">\n {products?.map((product: any, index: number) => {\n const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n return (\n <SearchProductItem\n product={buildProduct}\n variantData={variant}\n key={product.id + index}\n onSecondaryButton={() => onSecondaryButton?.()}\n onPrimaryButton={() => onPrimaryButton?.()}\n />\n )\n })}\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n searchResult,\n searchValue,\n data,\n onSecondaryButton,\n onPrimaryButton,\n // loadMore,\n onChangeSort,\n loading,\n searchResultCount,\n onChangeTab,\n buildProps,\n}: SearchPageProps) => {\n const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n const isInsertAdvertising = useRef(false)\n const [isOpenSort, setIsOpenSort] = useState(false)\n const [currentSortKey, setCurrentSortKey] = useState<any>({\n [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n ?.sortKeys?.[0],\n [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n })\n\n const searchProductsResult = useMemo(() => {\n return searchResult?.products || []\n }, [searchResult])\n\n const searchBlogsResult = useMemo(() => {\n return searchResult?.blogs || []\n }, [searchResult])\n\n const searchPagesResult = useMemo(() => {\n return searchResult?.pages || []\n }, [searchResult])\n\n const totalCount = useMemo(() => {\n return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n }, [searchResultCount])\n\n const searchProductsResultWithAdvertising = useMemo(() => {\n const advertisingData = {\n advertisingBgImg: currentTab?.advertisingBgImg,\n advertisingTitle: currentTab?.advertisingTitle,\n advertisingSubtitle: currentTab?.advertisingSubtitle,\n advertisingLink: currentTab?.advertisingLink,\n type: 'advertising',\n }\n if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n if (searchProductsResult?.length >= 8) {\n searchProductsResult?.splice(7, 0, advertisingData)\n isInsertAdvertising.current = true\n } else {\n searchProductsResult?.push(advertisingData)\n isInsertAdvertising.current = true\n }\n }\n return searchProductsResult\n }, [currentTab, searchProductsResult])\n\n return (\n <div className=\"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16\">\n <Heading\n size={4}\n weight=\"bold\"\n html={data?.title?.replace('$totalCount', totalCount?.toString())?.replace('$inputValue', `\"${searchValue}\"`)}\n />\n <div className=\"mt-6\">\n <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n <div className=\"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n <TabsList>\n {data?.tabs?.map((tab: any) => (\n <TabsTrigger\n onClick={() => {\n setCurrentTab(tab)\n onChangeTab?.(tab?.tabType)\n }}\n key={tab.id}\n defaultValue=\"products\"\n value={tab.tabType}\n >\n {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n </TabsTrigger>\n ))}\n </TabsList>\n <DropdownMenu onOpenChange={setIsOpenSort}>\n <DropdownMenuTrigger asChild>\n <button className=\"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]\">\n {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n <DownArrow\n className={cn('inline-block size-4', {\n 'rotate-180': isOpenSort,\n })}\n />\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\" sideOffset={8} className=\"rounded-none bg-white !px-0 py-2\">\n {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n return (\n <DropdownMenuItem\n className={cn(\n 'laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current',\n {\n 'font-bold': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n }\n )}\n onClick={() => {\n isInsertAdvertising.current = false\n onChangeSort?.(currentTab?.tabType, sortKey)\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [currentTab?.tabType]: sortKey,\n }))\n }}\n key={sortKey.id}\n >\n {sortKey.label}\n </DropdownMenuItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n <div className=\"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4\">\n {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n <SearchProductItem\n searchValue={searchValue}\n key={product.id + index}\n product={product}\n onSecondaryButton={() => onSecondaryButton?.(product)}\n onPrimaryButton={() => onPrimaryButton?.(product)}\n />\n ))}\n </div>\n {loading ? (\n <div className=\"mt-6 flex w-full justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchProductsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </TabsContent>\n <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n <div>\n {searchBlogsResult?.map((blog: any) => (\n <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n ))}\n {loading ? (\n <div className=\"mt-6 flex justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchBlogsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </div>\n </TabsContent>\n <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n <div>\n {searchPagesResult?.map((page: any, index: number) => (\n <SearchPageItem key={page.global_id + index} page={page} searchValue={searchValue} />\n ))}\n </div>\n {loading ? (\n <div className=\"mt-6 flex justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchPagesResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </TabsContent>\n </Tabs>\n </div>\n </div>\n )\n}\n\nexport default SearchPage\n"],
|
|
5
|
-
"mappings": "AAqEU,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Heading", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Text", "Picture", "Link", "Button", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "LoadingDots", "DownArrow", "useMemo", "useRef", "useState", "cn", "atobID", "highlightSearchWord", "useAiuiContext", "formatVariantPrice", "SearchPageTabType", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "variant", "locale", "copyWriting", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "
|
|
4
|
+
"sourcesContent": ["import {\n Heading,\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n Text,\n Picture,\n Link,\n Button,\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type {\n SearchPageProps,\n SortKey,\n SearchProductItemProps,\n SearchBlogItemProps,\n SearchPageItemProps,\n SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types.js'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n product,\n onSecondaryButton,\n onPrimaryButton,\n searchValue,\n variantData,\n}: SearchProductItemProps) => {\n const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const listingLink = useMemo(() => {\n return `/products/${product?.handle}?variant=${atobID(variant?.id as string)}`\n }, [product?.handle, variant?.id])\n\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : variant?.price,\n baseAmount: coupon ? variant?.price : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n\n const tags = useMemo(() => {\n return product?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [product?.tags])\n\n return (\n <div className=\"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto\">\n {product?.type === 'advertising' ? (\n <Link href={product?.advertisingLink} className=\"h-full\">\n <Picture\n source={product?.advertisingBgImg?.url}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n />\n <div className=\"desktop:p-6 [&_img]:hover:duration-600 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all\">\n <Text html={product?.advertisingTitle} className=\"desktop:text-[18px] text-sm font-bold text-white\" />\n <Heading\n size={3}\n html={product?.advertisingSubtitle}\n className=\"laptop:line-clamp-3 mt-2 line-clamp-4 font-bold text-white\"\n />\n </div>\n </Link>\n ) : (\n <a\n href={listingLink}\n className=\" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300\"\n >\n <div className=\"ipc_search_product_item_image\">\n <Picture\n className=\"lg-desktop:size-[196px] mx-auto size-[138px]\"\n source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n alt={product.title}\n imgClassName=\"object-cover size-full\"\n />\n </div>\n <div className=\"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4\">\n <div className=\"flex-1\">\n <div className=\"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2\">\n {tags?.map((tag: string, index: number) => (\n <Text\n key={index}\n as=\"p\"\n html={tag}\n className=\"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n />\n ))}\n </div>\n <Text\n className=\"desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]\"\n weight=\"bold\"\n html={highlightSearchWord(product?.title || '', searchValue || '')}\n />\n <Text\n as=\"p\"\n className=\"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold\"\n html={highlightSearchWord(product.description, searchValue || '')}\n />\n </div>\n <div>\n <div className=\"mb-2 flex items-center\">\n {!variant?.availableForSale ? (\n <div className=\"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n {copyWriting?.soldOutText || 'Sold Out'}\n </div>\n ) : (\n <>\n <div className=\"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n <div\n className={cn(\n 'ipc_search_product_item_button_group',\n 'lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2'\n )}\n >\n {copyWriting?.learnMoreText && (\n <Button\n variant=\"secondary\"\n className=\"laptop:w-auto w-full\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n onClick={() => onSecondaryButton?.()}\n >\n {copyWriting?.learnMoreText}\n </Button>\n )}\n {copyWriting?.shopNowText && (\n <Button\n variant=\"primary\"\n className=\"laptop:w-auto w-full\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n onClick={() => onPrimaryButton?.()}\n >\n {copyWriting?.shopNowText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </a>\n )}\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n const { copyWriting } = useAiuiContext()\n\n const articleLink = useMemo(() => `blogs/${blog?.handle}/${blog?.handle.replace('storefront-', '')}`, [blog])\n\n return (\n <div className=\"ipc_search_blog_item border-b border-[#E4E5E6] py-6\">\n <div className=\"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4\">\n <div className=\"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]\">\n <Picture\n source={blog?.image?.url}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n alt={blog?.title}\n />\n </div>\n <div className=\"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center\">\n <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n <Text\n html={highlightSearchWord(blog?.content, searchValue)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n />\n <div className=\"desktop:mt-6 mt-4\">\n <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const pageLink = useMemo(() => `${locale === 'us' ? '' : `/${locale}`}/${page?.handle}`, [page, locale])\n return (\n <div className=\"ipc_search_page_items border-b border-[#E4E5E6] py-6\">\n <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n <Text\n as=\"p\"\n html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]\"\n />\n <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"desktop:mt-6 mt-4\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n return (\n <div className=\"flex flex-col items-center justify-center gap-4\">\n <Picture source={url} className=\"h-[180px] w-[240px]\" imgClassName=\"object-cover\" />\n <Text html={label} className=\"desktop:text-[18px] text-sm font-bold leading-[1.4]\" />\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n products,\n title,\n buildProps,\n onSecondaryButton,\n onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n const { products: buildProducts } = buildProps || {}\n return (\n <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n <Heading size={4} weight=\"bold\" html={title} />\n <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4\">\n {products?.map((product: any, index: number) => {\n const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n return (\n <SearchProductItem\n product={buildProduct}\n variantData={variant}\n key={product.id + index}\n onSecondaryButton={() => onSecondaryButton?.()}\n onPrimaryButton={() => onPrimaryButton?.()}\n />\n )\n })}\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n searchResult,\n searchValue,\n data,\n onSecondaryButton,\n onPrimaryButton,\n // loadMore,\n onChangeSort,\n loading,\n searchResultCount,\n onChangeTab,\n buildProps,\n}: SearchPageProps) => {\n const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n const isInsertAdvertising = useRef(false)\n const [isOpenSort, setIsOpenSort] = useState(false)\n const [currentSortKey, setCurrentSortKey] = useState<any>({\n [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n ?.sortKeys?.[0],\n [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n })\n\n const searchProductsResult = useMemo(() => {\n return searchResult?.products || []\n }, [searchResult])\n\n const searchBlogsResult = useMemo(() => {\n return searchResult?.blogs || []\n }, [searchResult])\n\n const searchPagesResult = useMemo(() => {\n return searchResult?.pages || []\n }, [searchResult])\n\n const totalCount = useMemo(() => {\n return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n }, [searchResultCount])\n\n const searchProductsResultWithAdvertising = useMemo(() => {\n const advertisingData = {\n advertisingBgImg: currentTab?.advertisingBgImg,\n advertisingTitle: currentTab?.advertisingTitle,\n advertisingSubtitle: currentTab?.advertisingSubtitle,\n advertisingLink: currentTab?.advertisingLink,\n type: 'advertising',\n }\n if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n if (searchProductsResult?.length >= 8) {\n searchProductsResult?.splice(7, 0, advertisingData)\n isInsertAdvertising.current = true\n } else {\n searchProductsResult?.push(advertisingData)\n isInsertAdvertising.current = true\n }\n }\n return searchProductsResult\n }, [currentTab, searchProductsResult])\n\n return (\n <div className=\"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16\">\n <Heading\n size={4}\n weight=\"bold\"\n html={data?.title?.replace('$totalCount', totalCount?.toString())?.replace('$inputValue', `\"${searchValue}\"`)}\n />\n <div className=\"mt-6\">\n <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n <div className=\"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n <TabsList>\n {data?.tabs?.map((tab: any) => (\n <TabsTrigger\n onClick={() => {\n setCurrentTab(tab)\n onChangeTab?.(tab?.tabType)\n }}\n key={tab.id}\n defaultValue=\"products\"\n value={tab.tabType}\n >\n {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n </TabsTrigger>\n ))}\n </TabsList>\n <DropdownMenu onOpenChange={setIsOpenSort}>\n <DropdownMenuTrigger asChild>\n <button className=\"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]\">\n {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n <DownArrow\n className={cn('inline-block size-4', {\n 'rotate-180': isOpenSort,\n })}\n />\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\" sideOffset={8} className=\"rounded-none bg-white !px-0 py-2\">\n {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n return (\n <DropdownMenuItem\n className={cn(\n 'laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current',\n {\n 'font-bold': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n }\n )}\n onClick={() => {\n isInsertAdvertising.current = false\n onChangeSort?.(currentTab?.tabType, sortKey)\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [currentTab?.tabType]: sortKey,\n }))\n }}\n key={sortKey.id}\n >\n {sortKey.label}\n </DropdownMenuItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n <div className=\"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4\">\n {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n <SearchProductItem\n searchValue={searchValue}\n key={product.id + index}\n product={product}\n onSecondaryButton={() => onSecondaryButton?.(product)}\n onPrimaryButton={() => onPrimaryButton?.(product)}\n />\n ))}\n </div>\n {loading ? (\n <div className=\"mt-6 flex w-full justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchProductsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </TabsContent>\n <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n <div>\n {searchBlogsResult?.map((blog: any) => (\n <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n ))}\n {loading ? (\n <div className=\"mt-6 flex justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchBlogsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </div>\n </TabsContent>\n <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n <div>\n {searchPagesResult?.map((page: any, index: number) => (\n <SearchPageItem key={page.global_id + index} page={page} searchValue={searchValue} />\n ))}\n </div>\n {loading ? (\n <div className=\"mt-6 flex justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchPagesResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </TabsContent>\n </Tabs>\n </div>\n </div>\n )\n}\n\nexport default SearchPage\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Heading", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Text", "Picture", "Link", "Button", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "LoadingDots", "DownArrow", "useMemo", "useRef", "useState", "cn", "atobID", "highlightSearchWord", "useAiuiContext", "formatVariantPrice", "SearchPageTabType", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "variant", "locale", "copyWriting", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "index", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "buildProduct", "SearchPage", "searchResult", "data", "onChangeSort", "loading", "searchResultCount", "onChangeTab", "currentTab", "setCurrentTab", "isInsertAdvertising", "isOpenSort", "setIsOpenSort", "currentSortKey", "setCurrentSortKey", "tab", "searchProductsResult", "searchBlogsResult", "searchPagesResult", "totalCount", "acc", "curr", "searchProductsResultWithAdvertising", "advertisingData", "sortKey", "prev", "SearchPage_default"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { Media as MediaType, Theme } from '../../types/props.js';
|
|
3
|
+
import type { ButtonProps } from '../../components/button.js';
|
|
4
|
+
export type SecondaryBannerSemanticName = 'root' | 'title' | 'superTitle' | 'subtitle' | 'content' | 'buttonGroup' | 'primaryButton' | 'secondaryButton';
|
|
5
|
+
/**
|
|
6
|
+
* SecondaryBanner 业务组件数据接口
|
|
7
|
+
*/
|
|
8
|
+
export interface SecondaryBannerData {
|
|
9
|
+
/** 主标题*/
|
|
10
|
+
title?: string;
|
|
11
|
+
/**
|
|
12
|
+
* 上标题/引导标题
|
|
13
|
+
* 通常用于分类、引导性文字
|
|
14
|
+
*/
|
|
15
|
+
superTitle?: string;
|
|
16
|
+
/**
|
|
17
|
+
* 副标题/描述文字
|
|
18
|
+
* 通常用于补充说明、详细描述
|
|
19
|
+
*/
|
|
20
|
+
subtitle?: string;
|
|
21
|
+
/**
|
|
22
|
+
* 尺寸:
|
|
23
|
+
* sm: 小尺寸用于筛选页面
|
|
24
|
+
* base: 基础尺寸用于
|
|
25
|
+
* lg: 大尺寸用于专题页
|
|
26
|
+
* xlg: 活动页(通栏)
|
|
27
|
+
*/
|
|
28
|
+
size?: 'sm' | 'base' | 'lg' | 'xlg';
|
|
29
|
+
pcImage?: MediaType;
|
|
30
|
+
padImage?: MediaType;
|
|
31
|
+
mobileImage?: MediaType;
|
|
32
|
+
/** 结束时间(ISO 字符串) */
|
|
33
|
+
endDate?: string;
|
|
34
|
+
/** 结束时间时区(如: America/Los_Angeles) */
|
|
35
|
+
endDate_tz?: string;
|
|
36
|
+
dateFormat?: string;
|
|
37
|
+
/** 主按钮配置 */
|
|
38
|
+
primaryButton?: {
|
|
39
|
+
text: string;
|
|
40
|
+
link?: string;
|
|
41
|
+
onClick?: () => void;
|
|
42
|
+
} & Omit<ButtonProps, 'children'>;
|
|
43
|
+
/** 次级按钮配置 */
|
|
44
|
+
secondaryButton?: {
|
|
45
|
+
text: string;
|
|
46
|
+
link?: string;
|
|
47
|
+
onClick?: () => void;
|
|
48
|
+
} & Omit<ButtonProps, 'children'>;
|
|
49
|
+
iconArray?: Array<MediaType>;
|
|
50
|
+
theme?: Theme;
|
|
51
|
+
}
|
|
52
|
+
export interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {
|
|
53
|
+
/** 业务数据 */
|
|
54
|
+
data: SecondaryBannerData;
|
|
55
|
+
classNames?: Partial<Record<SecondaryBannerSemanticName, string>>;
|
|
56
|
+
}
|
|
57
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<SecondaryBannerProps & React.RefAttributes<HTMLElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
|
|
58
|
+
className?: string;
|
|
59
|
+
data?: Record<string, any>;
|
|
60
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
61
|
+
export default _default;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import*as d from"react";import{cva as S}from"class-variance-authority";import{cn as n}from"../../helpers/index.js";import{Text as B,Button as h,Heading as P,Picture as D}from"../../components/index.js";import A from"../HeroBanner/Countdown.js";import{withLayout as j}from"../../shared/Styles.js";import L from"../Media/index.js";import{sizeMap as H}from"../../components/button.js";const K=({size:l="base"})=>{const{width:a,height:e}=H[l];return t("svg",{width:a,height:e,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},R=S("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),T=d.forwardRef(({className:l,classNames:a={},data:e,...w},I)=>{const{pcImage:m,padImage:u,mobileImage:b,endDate:g,endDate_tz:z,dateFormat:C,size:y="base",iconArray:p,theme:M="light",primaryButton:o,secondaryButton:i}=e,V=m?.alt||u?.alt||b?.alt||"",[$,F]=d.useState(!1),c=d.useId(),r=e.title?`${c}-title`:void 0,f=e.subtitle?`${c}-subtitle`:void 0,x=e.superTitle?`${c}-super-title`:void 0,N=[x,f].filter(Boolean).join(" ")||void 0;return s("section",{ref:I,role:"banner","aria-labelledby":r,"aria-describedby":N,className:n({"aiui-dark":M==="dark"},R({size:y}),l,a?.root),...w,children:[t(L,{pcImage:m,padImage:u,mobileImage:b,className:"absolute inset-0 size-full object-cover",imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoPlay:!0}),s("div",{className:n("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-24 z-10 flex flex-col items-start justify-center px-[16px] text-left",a?.content),children:[s("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[e.superTitle&&t(B,{as:"p",size:2,id:x,className:n("banner-super-title opacity-75",a?.superTitle),children:e.superTitle}),e.title&&t(P,{as:"h1",size:["xlg","lg"].includes(y)?5:4,weight:"bold",id:r,className:n("banner-title ",a?.title),children:e.title}),e.subtitle&&t(B,{as:"p",size:3,id:f,className:n("banner-subtitle",a?.subtitle),children:e.subtitle})]}),g&&t("div",{className:"banner-countdown mt-3",role:"timer","aria-label":"event countdown",children:t(A,{endDate:g,endDate_tz:z,dateFormat:C})}),s("div",{className:n("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",a?.buttonGroup),children:[i?.text&&t(h,{variant:"secondary",onClick:i.onClick,className:n("",a?.secondaryButton),"aria-describedby":r,...i.link?{as:"a",href:i.link}:{},children:i.text}),o?.text&&t(h,{onClick:o.onClick,className:n("",a?.primaryButton),"aria-describedby":r,...o.link?{as:"a",href:o.link}:{},children:o.text})]}),Array.isArray(p)&&p.length>0&&t("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:p.map((k,v)=>t(D,{source:k.url,alt:k.alt||`icon ${v+1}`,role:"img",className:"h-auto max-w-none"},v))})]})]})});T.displayName="SecondaryBanner";var Q=j(T);export{Q as default};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/SecondaryBanner/index.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture } from '../../components/index.js'\nimport Countdown from '../HeroBanner/Countdown.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\nimport { sizeMap } from '../../components/button.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n// \u64AD\u653E\u6309\u94AE\u56FE\u6807\u7EC4\u4EF6\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<MediaType>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n } = data\n const alt = pcImage?.alt || padImage?.alt || mobileImage?.alt || ''\n\n // \u89C6\u9891\u5F39\u7A97\u72B6\u6001\n const [visible, setVisible] = React.useState<boolean>(false)\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = data.title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className=\"absolute inset-0 size-full object-cover\"\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={true}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-24 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title opacity-75', classNames?.superTitle)}\n >\n {data.superTitle}\n </Text>\n )}\n\n {data.title && (\n <Heading\n as=\"h1\"\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n weight=\"bold\"\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n >\n {data.title}\n </Heading>\n )}\n\n {data.subtitle && (\n <Text as=\"p\" size={3} id={subtitleId} className={cn('banner-subtitle', classNames?.subtitle)}>\n {data.subtitle}\n </Text>\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown mt-3\" role=\"timer\" aria-label=\"event countdown\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={secondaryButton.onClick}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link ? { as: 'a', href: secondaryButton.link } : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={primaryButton.onClick}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link ? { as: 'a', href: primaryButton.link } : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) => (\n <Picture\n key={index}\n source={icon.url}\n alt={icon.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"h-auto max-w-none\"\n />\n ))}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default withLayout(SecondaryBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "cva", "cn", "Text", "Button", "Heading", "Picture", "Countdown", "withLayout", "Media", "sizeMap", "PlayButtonAppendIcon", "size", "width", "height", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "props", "ref", "pcImage", "padImage", "mobileImage", "endDate", "endDate_tz", "dateFormat", "icons", "theme", "primaryButton", "secondaryButton", "alt", "visible", "setVisible", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "icon", "index", "SecondaryBanner_default"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as m,jsxs as de}from"react/jsx-runtime";import
|
|
1
|
+
"use client";import{jsx as m,jsxs as de}from"react/jsx-runtime";import X,{useState as B,useEffect as y,useRef as h,useImperativeHandle as Y}from"react";import{cn as ee}from"../../helpers/utils.js";import te from"./tabSwitch.js";import ne from"../Title/index.js";import se from"../SwiperBox/index.js";import{withLayout as ae}from"../../shared/Styles.js";import{gaTrack as E}from"../../shared/track.js";import{useMediaQuery as ie}from"react-responsive";import{useRollout as re}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as oe,ShelfDisplayHorizontalItem as le}from"./shelfDisplayItem.js";const me="image",ce="product_shelf",fe=c=>c==null?"default":String(c).replace(/[^a-zA-Z0-9_-]/g,"")||"default",pe=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,V=X.forwardRef(({key:c,data:f,event:L,buildData:S,breakpoints:N,className:z="",recommendedData:a,target:A="_self",metafields:$,isDisplayGudgments:v=!1,isDisplayBackImage:q=!1},O)=>{const{productsTab:i=[],productsCard:T=[],title:k,isShowTab:p=!0,tabShape:K="square",isShowTag:Q=!1,isShowOriginalPrice:W=!0,isShowRecommendedCard:I=!1,...Z}=f,[w,R]=B(""),[s,g]=B([]),D=h(!1),b=h(!1),M=h(null),j=h(pe()),F=ie({query:"(max-width: 768px)"}),[G,P]=re({threshold:0}),d=s?.length<=1&&v,r=!F&&s?.length<=2&&v,_=e=>{switch(e){case 1440:return r?s?.length:4;case 1024:return r?s?.length:3;default:return r?s?.length:2.3}},x=()=>{E({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:a?.map((e,l)=>{const n=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:l+1}})}})},o=(e,l)=>{if(l){const u=a?.map?.(n=>({...n,isShowRecommended:!0}));g(u?.length?u||[]:[])}else if(Array.isArray(e)){const n=e?.map?.(t=>{const H=S?.products?.find(U=>U?.handle===t?.handle);if(H)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,...H}})?.filter(t=>t);g(n?.length?n||[]:[])}else g([])};Y(O,()=>M.current),y(()=>{P&&a?.length&&!D.current&&(D.current=!0,x())},[P,a]),y(()=>{if(!b.current){if(!b.current&&a?.length&&(b.current=!0),p){R(i?.[0]?.tab||""),o(i?.[0]?.data||[],i?.[0]?.isShowRecommendedTab);return}o(T,I)}},[a]),y(()=>{if(p){const e=i?.find(l=>l?.tab===w)||i?.[0];o(e?.data||[],e?.isShowRecommendedTab);return}o(T,I)},[S]);const J=fe(w),C=`${j.current}-${J}`;return de("div",{ref:M,className:ee("shelf-display-wrap w-full",z,{"aiui-dark":f?.theme==="dark"}),children:[k&&m(ne,{data:{title:k}}),p&&m("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:m(te,{value:w,tabs:i,tabShape:K,onTabClick:e=>{if(R(e?.tab),o(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:me,component_name:ce,component_title:f?.title,component_position:1,navigation:e?.tab}});return}x()}})}),m("div",{ref:G,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:m(se,{data:{list:s,configuration:{...Z,event:L,isShowTag:Q,isShowOriginalPrice:W,target:A,metafields:$,itemLength:s?.length,isDisplayBackImage:q}},id:C,className:`${p?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:r?"flex-1":"",Slide:r?le:oe,breakpoints:N||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:d?1:1.2},768:{spaceBetween:d?0:16,freeMode:!1,slidesPerView:_()},1024:{spaceBetween:d?0:16,freeMode:!1,slidesPerView:_(1024)},1440:{spaceBetween:d?0:16,freeMode:!1,slidesPerView:_(1440)}}},C)})]})});V.displayName="ShelfDisplay";var ke=ae(V);export{ke as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceIdRef = useRef<string>(createInstanceId())\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n if (!v?.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n return\n }\n gackViewEvent()\n }}\n />\n </div>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
|
|
5
|
-
"mappings": "aA4KM,OAIY,OAAAA,EAJZ,QAAAC,OAAA,oBA3KN,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,EAAQ,uBAAAC,MAA2B,QACxE,OAAS,MAAAC,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceIdRef = useRef<string>(createInstanceId())\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n if (!v?.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n return\n }\n gackViewEvent()\n }}\n />\n </div>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "TabSwitch", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "ShelfDisplay_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as J,jsx as s,jsxs as c}from"react/jsx-runtime";import P from"./dropdown.js";import{useAiuiContext as _}from"../AiuiProvider/index.js";import{useMediaQuery as $}from"react-responsive";import{useMemo as U,useState as x,useEffect as M}from"react";import{withLayout as V}from"../../shared/Styles.js";import{formatVariantPrice as B}from"../ShelfDisplay/shelfDisplay.js";import{Picture as g,Text as q,Button as z,Heading as A}from"../../components/index.js";import Q,{useImperativeHandle as W,useRef as G}from"react";const C=Q.forwardRef((j,L)=>{const{data:v,buildData:p,onChange:T,onSecondaryChange:K}=j||{},h=$({query:"(max-width: 768px)"}),[o,m]=x({}),[k,w]=x(!1),[b,y]=x({}),N=G(null),{locale:F="us"}=_(),{LeftMenu:D,RightMenu:S,DefaultSelectMenu:u}=U(()=>v?.data||{},[v?.data]),H=e=>{try{const a=new URL(e).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(a)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(e)}},R=(e,t)=>{const a=S?.menus?.find?.(f=>f?.handle===e?.handle),l=e?.variants?.find?.(f=>f?.sku===e?.sku||a?.sku),n=l?.coupons?.[0],{price:r,basePrice:d}=B({locale:F||"us",amount:n?n?.variant_price4wscode:l?.price,baseAmount:n?l?.price:0,currencyCode:e?.price?.currencyCode||"USD"}),i=typeof u?.buttonText=="string"?u?.buttonText:u?.buttonText?.[String(t)]||"";return c("div",{className:"specs-sku-node-wrap box-border",children:[c(q,{className:"md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold",onClick:()=>{if(Object.keys(o||{})?.length<=2)return null;y({...b,[t]:!b?.[t]})},children:[c("div",{className:"flex items-center justify-between overflow-hidden",children:[s("div",{className:"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base",title:o?.[t]?.name||"",children:o?.[t]?.name||""}),Object.keys(o||{})?.length>2?s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:s("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}):null]}),s(P,{index:t,list:p?.products,active:o,filterActive:o,setActive:m,visible:b,setVisible:y})]}),s("div",{className:"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]",children:s(g,{source:l?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover hover:scale-105 transition-all duration-300"})}),l?.availableForSale?c("div",{className:"lg-desktop:text-2xl mb-2 mt-6 flex items-center text-xl font-bold",children:[s("div",{className:"specs-sku-node-price text-[#080A0F]",children:r||""}),d&&s("div",{className:"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through",children:d})]}):!1,i?s(z,{onClick:()=>{T?.(e,t)},className:"specs-sku-node-button",children:i}):null]})},I=e=>e&&typeof e!="string"?c("div",{className:"size-full",children:[s("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:e?.text||""}}),s(g,{source:e?.imgUrl,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"})]}):s("div",{className:"break-all",children:H(e)?s(g,{source:e,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"}):s("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:e||""}})}),E=e=>e.map((t,a)=>{const l=a===0;return c("div",{className:"l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] specs-product-node-wrap",children:[s(A,{as:"h3",html:t||"",className:"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm"}),s("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${k?3:2} specs-product-node-body col-span-2 grid flex-1 py-6`,children:Object.keys(o)?.map?.(n=>{const r=o?.[n],d=S?.menus?.find?.(i=>i?.handle===r?.handle)?.subTitle;return I(d?.[t])})})]},t)}),O=e=>{if(!o)return;const{subTitle:t,isProduct:a}=e;return a?c(J,{children:[c("div",{className:"l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]",children:[e?.title&&s(A,{as:"h3",html:e?.title||"",className:"l:hidden specs-item-product-title"}),s("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${k?3:2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`,children:Object.keys(o)?.map((l,n)=>{const r=o?.[l],d=p?.products?.find?.(i=>i?.handle===r?.handle);return s("div",{children:R({...d,sku:r?.sku,item:l},n)},l)})})]}),t?.length?E(t):null]}):E(t)};return W(L,()=>N.current),M(()=>{if(!p?.products?.length)return;const e=u?.sku?.split?.(",")||[];let t={};e?.forEach?.((a,l)=>{const n=p?.products?.find?.(r=>{if(r?.variants?.find?.(i=>i?.sku===a))return!0});n&&(t={...t,[l]:{sku:a,name:n?.name||n?.title,handle:n?.handle}})}),m(t),w(e?.length>2)},[p]),M(()=>{if(h){const e=Object.keys(o||{});if(e?.length>2){const t=e?.slice?.(0,2);let a={};t?.forEach?.(l=>{a={...a,[l]:o?.[l]}}),w(!1),m(a)}}},[h]),s("div",{className:"specs-wrapper w-full overflow-hidden bg-[#F5F5F7]",ref:N,children:D?.data?s("div",{className:"specs-wrapper-content box-border w-full overflow-hidden",children:D?.data?.map?.((e,t)=>s("div",{className:"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0",children:O(e)},t))}):null})});C.displayName="Specs";var oe=V(C);export{oe as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Specs/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport DropDown from './dropdown.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Container, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n const { data, buildData, onChange, onSecondaryChange } = page || {}\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const [active, setActive] = useState<any>({})\n const [isShowMax, setIsShowMax] = useState<boolean>(false)\n const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n const { locale = 'us' } = useAiuiContext()\n\n const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n const isImageUrl = (urlPath: string) => {\n try {\n const url = new URL(urlPath)\n const path = url.pathname.toLowerCase()\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n } catch (e) {\n // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n }\n }\n\n const skuNode = (product: any, index: number) => {\n const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n const coupon = findSku?.coupons?.[0]\n const { price, basePrice } = formatVariantPrice({\n locale: locale || 'us',\n amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n baseAmount: coupon ? findSku?.price : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n const buttonTextValue =\n typeof DefaultSelectMenu?.buttonText === 'string'\n ? DefaultSelectMenu?.buttonText\n : DefaultSelectMenu?.buttonText?.[String(index)] || ''\n return (\n <div className=\"specs-sku-node-wrap box-border\">\n <Text\n className={`md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold`}\n onClick={() => {\n if (Object.keys(active || {})?.length <= 2) return null\n\n setVisibleActive({\n ...visibleActive,\n [index]: !visibleActive?.[index],\n })\n }}\n >\n <div className=\"flex items-center justify-between overflow-hidden\">\n <div\n className=\"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base\"\n title={active?.[index]?.name || ''}\n >\n {active?.[index]?.name || ''}\n </div>\n {Object.keys(active || {})?.length > 2 ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n className=\"openDropDown\"\n >\n <path\n d=\"M6 9.5L12 15.5L18 9.5\"\n stroke=\"#1D1D1F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n ) : null}\n </div>\n <DropDown\n index={index}\n list={buildData?.products}\n active={active}\n filterActive={active}\n setActive={setActive}\n visible={visibleActive}\n setVisible={setVisibleActive}\n />\n </Text>\n <div className=\"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]\">\n <Picture\n source={findSku?.image?.url || ''}\n className=\"aspect-h-[280] aspect-w-[280]\"\n imgClassName=\"w-full h-full object-cover hover:scale-105 transition-all duration-300\"\n />\n </div>\n {findSku?.availableForSale ? (\n <div className=\"lg-desktop:text-2xl mb-2 mt-6 flex items-center text-xl font-bold\">\n <div className=\"specs-sku-node-price text-[#080A0F]\">{price || ''}</div>\n {basePrice && (\n <div className=\"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through\">\n {basePrice}\n </div>\n )}\n </div>\n ) : (\n false\n )}\n {buttonTextValue ? (\n <Button\n onClick={() => {\n onChange?.(product, index)\n }}\n className=\"specs-sku-node-button\"\n >\n {buttonTextValue}\n </Button>\n ) : null}\n </div>\n )\n }\n\n const normalNode = (v: any) => {\n if (v && typeof v !== 'string') {\n return (\n <div className=\"size-full\">\n <p\n className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n dangerouslySetInnerHTML={{\n __html: v?.text || '',\n }}\n />\n <Picture\n source={v?.imgUrl}\n className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )\n }\n return (\n <div className=\"break-all\">\n {isImageUrl(v) ? (\n <Picture\n source={v}\n className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n ) : (\n <p\n className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n dangerouslySetInnerHTML={{\n __html: v || '',\n }}\n />\n )}\n </div>\n )\n }\n\n const productNode = (data: any) => {\n return data.map((st: any, idx: number) => {\n const isFirstParameter = idx === 0\n return (\n <div\n key={st}\n className={`l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n >\n <Heading\n as=\"h3\"\n html={st || ''}\n className=\"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm\"\n />\n <div\n className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-product-node-body col-span-2 grid flex-1 py-6`}\n >\n {Object.keys(active)?.map?.((item: string) => {\n const currentData = active?.[item]\n const currentMenus = RightMenu?.menus?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )?.subTitle\n return normalNode(currentMenus?.[st])\n })}\n </div>\n </div>\n )\n })\n }\n\n // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n const childrenNode = (node: any) => {\n if (!active) return\n const { subTitle, isProduct } = node\n // \u5982\u679C\u662F\u4EA7\u54C1\n if (isProduct) {\n return (\n <>\n <div\n className={`l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]`}\n >\n {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n <div\n className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`}\n >\n {Object.keys(active)?.map((item: string, index: number) => {\n const currentData = active?.[item]\n const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n })}\n </div>\n </div>\n {subTitle?.length ? productNode(subTitle) : null}\n </>\n )\n }\n return productNode(subTitle)\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (!buildData?.products?.length) return\n const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n let currentActive = {}\n skus?.forEach?.((sku: string, index: number) => {\n const findData = buildData?.products?.find?.((item: any) => {\n const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n if (findSku) return true\n })\n if (findData) {\n currentActive = {\n ...currentActive,\n [index]: {\n sku: sku,\n name: findData?.name || findData?.title,\n handle: findData?.handle,\n },\n }\n }\n })\n setActive(currentActive)\n setIsShowMax(skus?.length > 2)\n }, [buildData])\n\n useEffect(() => {\n if (isMobile) {\n const currentActive = Object.keys(active || {})\n if (currentActive?.length > 2) {\n const newActive = currentActive?.slice?.(0, 2)\n let newShowActive = {}\n newActive?.forEach?.((item: string) => {\n newShowActive = { ...newShowActive, [item]: active?.[item] }\n })\n setIsShowMax(false)\n setActive(newShowActive)\n }\n }\n }, [isMobile])\n\n return (\n <div className=\"specs-wrapper w-full overflow-hidden bg-[#F5F5F7]\" ref={innerRef}>\n {LeftMenu?.data ? (\n <div className=\"specs-wrapper-content box-border w-full overflow-hidden\">\n {LeftMenu?.data?.map?.((item: any, index: number) => {\n return (\n <div key={index} className=\"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0\">\n {childrenNode(item)}\n </div>\n )\n })}\n </div>\n ) : null}\n </div>\n )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
|
|
5
|
-
"mappings": "aAgEU,OA+IF,YAAAA,EA9II,OAAAC,EADF,QAAAC,MAAA,oBA9DV,OAAOC,MAAc,gBACrB,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,WAAAC,EAAS,YAAAC,EAAU,aAAAC,MAAiB,QAC7C,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,sBAAAC,MAA0B,kCACnC,OAAS,WAAAC,EAAS,QAAAC,EAAM,UAAAC,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport DropDown from './dropdown.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n const { data, buildData, onChange, onSecondaryChange } = page || {}\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const [active, setActive] = useState<any>({})\n const [isShowMax, setIsShowMax] = useState<boolean>(false)\n const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n const { locale = 'us' } = useAiuiContext()\n\n const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n const isImageUrl = (urlPath: string) => {\n try {\n const url = new URL(urlPath)\n const path = url.pathname.toLowerCase()\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n } catch (e) {\n // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n }\n }\n\n const skuNode = (product: any, index: number) => {\n const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n const coupon = findSku?.coupons?.[0]\n const { price, basePrice } = formatVariantPrice({\n locale: locale || 'us',\n amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n baseAmount: coupon ? findSku?.price : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n const buttonTextValue =\n typeof DefaultSelectMenu?.buttonText === 'string'\n ? DefaultSelectMenu?.buttonText\n : DefaultSelectMenu?.buttonText?.[String(index)] || ''\n return (\n <div className=\"specs-sku-node-wrap box-border\">\n <Text\n className={`md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold`}\n onClick={() => {\n if (Object.keys(active || {})?.length <= 2) return null\n\n setVisibleActive({\n ...visibleActive,\n [index]: !visibleActive?.[index],\n })\n }}\n >\n <div className=\"flex items-center justify-between overflow-hidden\">\n <div\n className=\"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base\"\n title={active?.[index]?.name || ''}\n >\n {active?.[index]?.name || ''}\n </div>\n {Object.keys(active || {})?.length > 2 ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n className=\"openDropDown\"\n >\n <path\n d=\"M6 9.5L12 15.5L18 9.5\"\n stroke=\"#1D1D1F\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n ) : null}\n </div>\n <DropDown\n index={index}\n list={buildData?.products}\n active={active}\n filterActive={active}\n setActive={setActive}\n visible={visibleActive}\n setVisible={setVisibleActive}\n />\n </Text>\n <div className=\"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]\">\n <Picture\n source={findSku?.image?.url || ''}\n className=\"aspect-h-[280] aspect-w-[280]\"\n imgClassName=\"w-full h-full object-cover hover:scale-105 transition-all duration-300\"\n />\n </div>\n {findSku?.availableForSale ? (\n <div className=\"lg-desktop:text-2xl mb-2 mt-6 flex items-center text-xl font-bold\">\n <div className=\"specs-sku-node-price text-[#080A0F]\">{price || ''}</div>\n {basePrice && (\n <div className=\"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through\">\n {basePrice}\n </div>\n )}\n </div>\n ) : (\n false\n )}\n {buttonTextValue ? (\n <Button\n onClick={() => {\n onChange?.(product, index)\n }}\n className=\"specs-sku-node-button\"\n >\n {buttonTextValue}\n </Button>\n ) : null}\n </div>\n )\n }\n\n const normalNode = (v: any) => {\n if (v && typeof v !== 'string') {\n return (\n <div className=\"size-full\">\n <p\n className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n dangerouslySetInnerHTML={{\n __html: v?.text || '',\n }}\n />\n <Picture\n source={v?.imgUrl}\n className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )\n }\n return (\n <div className=\"break-all\">\n {isImageUrl(v) ? (\n <Picture\n source={v}\n className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n ) : (\n <p\n className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n dangerouslySetInnerHTML={{\n __html: v || '',\n }}\n />\n )}\n </div>\n )\n }\n\n const productNode = (data: any) => {\n return data.map((st: any, idx: number) => {\n const isFirstParameter = idx === 0\n return (\n <div\n key={st}\n className={`l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n >\n <Heading\n as=\"h3\"\n html={st || ''}\n className=\"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm\"\n />\n <div\n className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-product-node-body col-span-2 grid flex-1 py-6`}\n >\n {Object.keys(active)?.map?.((item: string) => {\n const currentData = active?.[item]\n const currentMenus = RightMenu?.menus?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )?.subTitle\n return normalNode(currentMenus?.[st])\n })}\n </div>\n </div>\n )\n })\n }\n\n // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n const childrenNode = (node: any) => {\n if (!active) return\n const { subTitle, isProduct } = node\n // \u5982\u679C\u662F\u4EA7\u54C1\n if (isProduct) {\n return (\n <>\n <div\n className={`l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]`}\n >\n {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n <div\n className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`}\n >\n {Object.keys(active)?.map((item: string, index: number) => {\n const currentData = active?.[item]\n const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n })}\n </div>\n </div>\n {subTitle?.length ? productNode(subTitle) : null}\n </>\n )\n }\n return productNode(subTitle)\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (!buildData?.products?.length) return\n const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n let currentActive = {}\n skus?.forEach?.((sku: string, index: number) => {\n const findData = buildData?.products?.find?.((item: any) => {\n const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n if (findSku) return true\n })\n if (findData) {\n currentActive = {\n ...currentActive,\n [index]: {\n sku: sku,\n name: findData?.name || findData?.title,\n handle: findData?.handle,\n },\n }\n }\n })\n setActive(currentActive)\n setIsShowMax(skus?.length > 2)\n }, [buildData])\n\n useEffect(() => {\n if (isMobile) {\n const currentActive = Object.keys(active || {})\n if (currentActive?.length > 2) {\n const newActive = currentActive?.slice?.(0, 2)\n let newShowActive = {}\n newActive?.forEach?.((item: string) => {\n newShowActive = { ...newShowActive, [item]: active?.[item] }\n })\n setIsShowMax(false)\n setActive(newShowActive)\n }\n }\n }, [isMobile])\n\n return (\n <div className=\"specs-wrapper w-full overflow-hidden bg-[#F5F5F7]\" ref={innerRef}>\n {LeftMenu?.data ? (\n <div className=\"specs-wrapper-content box-border w-full overflow-hidden\">\n {LeftMenu?.data?.map?.((item: any, index: number) => {\n return (\n <div key={index} className=\"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0\">\n {childrenNode(item)}\n </div>\n )\n })}\n </div>\n ) : null}\n </div>\n )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "DropDown", "useAiuiContext", "useMediaQuery", "useMemo", "useState", "useEffect", "withLayout", "formatVariantPrice", "Picture", "Text", "Button", "Heading", "React", "useImperativeHandle", "useRef", "Specs", "page", "ref", "data", "buildData", "onChange", "onSecondaryChange", "isMobile", "active", "setActive", "isShowMax", "setIsShowMax", "visibleActive", "setVisibleActive", "innerRef", "locale", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findCurrentData", "item", "findSku", "coupon", "price", "basePrice", "buttonTextValue", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "currentActive", "sku", "findData", "newActive", "newShowActive", "Specs_default"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* StockShelf 业务组件数据接口
|
|
4
|
+
*/
|
|
5
|
+
export interface StockShelfData {
|
|
6
|
+
/** 组件标题 */
|
|
7
|
+
title?: string;
|
|
8
|
+
/** 组件描述 */
|
|
9
|
+
description?: string;
|
|
10
|
+
}
|
|
11
|
+
export interface StockShelfProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
12
|
+
/** 业务数据 */
|
|
13
|
+
data: StockShelfData;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* StockShelf - 库存货架
|
|
17
|
+
*
|
|
18
|
+
* @description 能够实时显示商品库存信息和会员价的货架
|
|
19
|
+
*/
|
|
20
|
+
declare const StockShelf: React.ForwardRefExoticComponent<StockShelfProps & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
+
export default StockShelf;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as c from"react";import{cn as r}from"../../helpers/index.js";const l=c.forwardRef(({className:o,data:t,...s},i)=>a("div",{ref:i,className:r("w-full",o),...s,children:[t.title&&e("h2",{className:"mb-4 text-2xl font-bold",children:t.title}),t.description&&e("p",{className:"mb-6 text-gray-600",children:t.description}),e("div",{className:"stock-shelf-content",children:e("p",{className:"text-gray-500",children:"\u5E93\u5B58\u8D27\u67B6\u4E1A\u52A1\u5185\u5BB9\u533A\u57DF"})})]}));l.displayName="StockShelf";var n=l;export{n as default};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/StockShelf/index.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\n\n/**\n * StockShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface StockShelfData {\n /** \u7EC4\u4EF6\u6807\u9898 */\n title?: string\n /** \u7EC4\u4EF6\u63CF\u8FF0 */\n description?: string\n}\n\nexport interface StockShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: StockShelfData\n}\n\n/**\n * StockShelf - \u5E93\u5B58\u8D27\u67B6\n *\n * @description \u80FD\u591F\u5B9E\u65F6\u663E\u793A\u5546\u54C1\u5E93\u5B58\u4FE1\u606F\u548C\u4F1A\u5458\u4EF7\u7684\u8D27\u67B6\n */\nconst StockShelf = React.forwardRef<HTMLDivElement, StockShelfProps>(({ className, data, ...props }, ref) => {\n return (\n <div ref={ref} className={cn('w-full', className)} {...props}>\n {data.title && <h2 className=\"mb-4 text-2xl font-bold\">{data.title}</h2>}\n {data.description && <p className=\"mb-6 text-gray-600\">{data.description}</p>}\n\n {/* \u5E93\u5B58\u8D27\u67B6\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n <div className=\"stock-shelf-content\">\n <p className=\"text-gray-500\">\u5E93\u5B58\u8D27\u67B6\u4E1A\u52A1\u5185\u5BB9\u533A\u57DF</p>\n </div>\n </div>\n )\n})\n\nStockShelf.displayName = 'StockShelf'\nexport default StockShelf\n"],
|
|
5
|
+
"mappings": "aA2BI,OACiB,OAAAA,EADjB,QAAAC,MAAA,oBAzBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBAsBnB,MAAMC,EAAaF,EAAM,WAA4C,CAAC,CAAE,UAAAG,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAEjGP,EAAC,OAAI,IAAKO,EAAK,UAAWL,EAAG,SAAUE,CAAS,EAAI,GAAGE,EACpD,UAAAD,EAAK,OAASN,EAAC,MAAG,UAAU,0BAA2B,SAAAM,EAAK,MAAM,EAClEA,EAAK,aAAeN,EAAC,KAAE,UAAU,qBAAsB,SAAAM,EAAK,YAAY,EAGzEN,EAAC,OAAI,UAAU,sBACb,SAAAA,EAAC,KAAE,UAAU,gBAAgB,wEAAU,EACzC,GACF,CAEH,EAEDI,EAAW,YAAc,aACzB,IAAOK,EAAQL",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "cn", "StockShelf", "className", "data", "props", "ref", "StockShelf_default"]
|
|
7
|
+
}
|