@anker-in/headless-ui 1.1.28 → 1.1.29
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/HeaderNavigation/MobileMenuComponents.d.ts +25 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileMenuComponents.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileMenuComponents.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileMulticolMenu.d.ts +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileMulticolMenu.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileMulticolMenu.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileResourceSidebarMenu.d.ts +9 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileResourceSidebarMenu.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileResourceSidebarMenu.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileSidebarMenu.d.ts +9 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileSidebarMenu.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileSidebarMenu.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileSupportMenu.d.ts +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileSupportMenu.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileSupportMenu.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/MulticolDropdown.d.ts +15 -0
- package/dist/cjs/biz-components/HeaderNavigation/MulticolDropdown.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/MulticolDropdown.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/NavProvider.d.ts +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/NavProvider.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/NavProvider.js.map +3 -3
- package/dist/cjs/biz-components/HeaderNavigation/ResourceItem.d.ts +20 -0
- package/dist/cjs/biz-components/HeaderNavigation/ResourceItem.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/ResourceItem.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/ResourceSidebarDropdown.d.ts +9 -0
- package/dist/cjs/biz-components/HeaderNavigation/ResourceSidebarDropdown.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/ResourceSidebarDropdown.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.d.ts +18 -0
- package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/SupportsDropdown.d.ts +9 -0
- package/dist/cjs/biz-components/HeaderNavigation/SupportsDropdown.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/SupportsDropdown.js.map +7 -0
- 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/HeaderNavigation/types.d.ts +2 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/withCategory.d.ts +1 -0
- package/dist/cjs/biz-components/HeaderNavigation/withCategory.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/withCategory.js.map +3 -3
- package/dist/cjs/biz-components/SearchPage/index.js +1 -1
- package/dist/cjs/biz-components/SearchPage/index.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/MobileMenuComponents.d.ts +25 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileMenuComponents.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileMenuComponents.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileMulticolMenu.d.ts +7 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileMulticolMenu.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileMulticolMenu.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileResourceSidebarMenu.d.ts +9 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileResourceSidebarMenu.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileResourceSidebarMenu.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileSidebarMenu.d.ts +9 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileSidebarMenu.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileSidebarMenu.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileSupportMenu.d.ts +7 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileSupportMenu.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileSupportMenu.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/MulticolDropdown.d.ts +15 -0
- package/dist/esm/biz-components/HeaderNavigation/MulticolDropdown.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/MulticolDropdown.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/NavProvider.d.ts +2 -0
- package/dist/esm/biz-components/HeaderNavigation/NavProvider.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/NavProvider.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/ResourceItem.d.ts +20 -0
- package/dist/esm/biz-components/HeaderNavigation/ResourceItem.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/ResourceItem.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/ResourceSidebarDropdown.d.ts +9 -0
- package/dist/esm/biz-components/HeaderNavigation/ResourceSidebarDropdown.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/ResourceSidebarDropdown.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.d.ts +18 -0
- package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/SupportsDropdown.d.ts +9 -0
- package/dist/esm/biz-components/HeaderNavigation/SupportsDropdown.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/SupportsDropdown.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/types.d.ts +2 -1
- package/dist/esm/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/types.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/withCategory.d.ts +1 -0
- package/dist/esm/biz-components/HeaderNavigation/withCategory.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/withCategory.js.map +3 -3
- package/dist/esm/biz-components/SearchPage/index.js +1 -1
- package/dist/esm/biz-components/SearchPage/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var S=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var j=Object.prototype.hasOwnProperty;var F=(t,o)=>{for(var l in o)S(t,l,{get:o[l],enumerable:!0})},G=(t,o,l,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of R(o))!j.call(t,p)&&p!==l&&S(t,p,{get:()=>o[p],enumerable:!(i=O(o,p))||i.enumerable});return t};var K=t=>G(S({},"__esModule",{value:!0}),t);var J={};F(J,{default:()=>q});module.exports=K(J);var e=require("react/jsx-runtime"),s=require("../../components/index.js"),z=require("../HeaderNavigation/icons/index.js"),n=require("react"),d=require("../../helpers/utils.js"),_=require("../AiuiProvider/index.js"),D=require("../ShelfDisplay/shelfDisplay.js"),v=require("./types.js");const E=({product:t,onSecondaryButton:o,onPrimaryButton:l,searchValue:i,variantData:p,shopNowLoadingProductId:y})=>{const r=(0,n.useMemo)(()=>p||t?.variants?.[0],[t,p]),{locale:x="us",copyWriting:g}=(0,_.useAiuiContext)(),k=y===t?.id,b=(0,n.useMemo)(()=>`${x==="us"?"":"/"+x}/products/${t?.handle}?variant=${(0,d.atobID)(r?.id)}?ref=search_result_${i?.toLowerCase()}`,[t?.handle,r?.id,i,x]),c=r?.coupons?.[0],{price:T,basePrice:f}=(0,D.formatVariantPrice)({locale:x,amount:c?c.variant_price4wscode:r?.price,baseAmount:c?r?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),P=(0,n.useMemo)(()=>t?.tags?.filter?.(m=>m?.startsWith?.("CLtag"))?.map?.(m=>m?.replace?.("CLtag:",""))?.slice?.(0,2),[t?.tags]);return(0,e.jsx)("div",{className:"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto",children:t?.type==="advertising"&&t?.advertisingLink?(0,e.jsxs)(s.Link,{href:t?.advertisingLink,className:"h-full",children:[(0,e.jsx)(s.Picture,{source:t?.advertisingBgImg?.url,className:"size-full",imgClassName:"size-full object-cover"}),(0,e.jsxs)("div",{className:"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(s.Text,{html:t?.advertisingTitle,className:(0,d.cn)("desktop:text-[18px] text-sm font-bold",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})}),t?.advertisingSubtitle&&(0,e.jsx)(s.Heading,{size:3,html:t?.advertisingSubtitle,className:(0,d.cn)("laptop:line-clamp-3 mt-2 line-clamp-4 font-bold",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})})]})]}):(0,e.jsxs)("a",{href:b,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",children:[(0,e.jsx)("div",{className:"ipc_search_product_item_image",children:(0,e.jsx)(s.Picture,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:`${r?.image?.url||t?.images?.[0]?.url}}`,alt:t?.title,imgClassName:"object-cover size-full"})}),(0,e.jsxs)("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",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:P?.map((m,N)=>(0,e.jsx)(s.Text,{as:"p",html:m,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-[22px]"},N))}),(0,e.jsx)(s.Text,{className:"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:(0,d.highlightSearchWord)(t?.title||"",i||"")}),(0,e.jsx)(s.Text,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:(0,d.highlightSearchWord)(t?.description,i||"")})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"mb-2 flex items-center",children:r?.availableForSale?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:r?.availableForSale&&T||""}),(0,e.jsx)("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:r?.availableForSale&&f||""})]}):(0,e.jsx)("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:g?.soldOutText||"Sold Out"})}),(0,e.jsxs)("div",{className:(0,d.cn)("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[g?.learnMoreText&&(0,e.jsx)(s.Button,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",disabled:!r?.availableForSale,onClick:m=>{m.preventDefault(),m.stopPropagation(),o?.()},children:g?.learnMoreText}),g?.shopNowText&&(0,e.jsx)(s.Button,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!r?.availableForSale,loading:k,onClick:m=>{m.preventDefault(),m.stopPropagation(),l?.()},children:g?.shopNowText})]})]})]})]})})},W=({blog:t,searchValue:o})=>{const{copyWriting:l,locale:i}=(0,_.useAiuiContext)(),p=(0,n.useMemo)(()=>`${i==="us"?"":"/"+i}/blogs/${t?.blog?.handle}/${t?.handle.replace("storefront-","")}`,[t,i]);return(0,e.jsx)("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:(0,e.jsxs)("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[(0,e.jsx)("div",{className:"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]",children:(0,e.jsx)(s.Picture,{source:t?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:t?.title})}),(0,e.jsxs)("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[(0,e.jsx)(s.Heading,{size:3,html:(0,d.highlightSearchWord)(t?.title,o)}),(0,e.jsx)(s.Text,{html:(0,d.highlightSearchWord)(t?.content,o),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"desktop:mt-6 mt-4",children:(0,e.jsx)(s.Button,{as:"a",href:p,variant:"secondary",size:"lg",children:l?.learnMoreText||"Learn More"})})]})]})})},U=({searchValue:t,page:o})=>{const{copyWriting:l,locale:i="us"}=(0,_.useAiuiContext)(),p=(0,n.useMemo)(()=>`${i==="us"?"":`/${i}`}/${o?.handle}`,[o,i]);return(0,e.jsxs)("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[(0,e.jsx)(s.Heading,{size:3,html:(0,d.highlightSearchWord)(o?.name,t)}),(0,e.jsx)(s.Text,{as:"p",html:(0,d.highlightSearchWord)(o?.bodySummary||"",t),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),(0,e.jsx)(s.Button,{as:"a",href:p,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:l?.learnMoreText||"Learn More"})]})},w=({url:t,label:o})=>(0,e.jsxs)("div",{className:"flex flex-col items-center justify-center gap-4",children:[(0,e.jsx)(s.Picture,{source:t,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),(0,e.jsx)(s.Text,{html:o,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),C=({products:t,title:o,buildProps:l,onSecondaryButton:i,onPrimaryButton:p})=>{const{products:y}=l||{};return(0,e.jsxs)("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[(0,e.jsx)(s.Heading,{size:4,weight:"bold",html:o}),(0,e.jsx)("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",children:t?.map((r,x)=>{const g=y?.find(b=>b.handle===r.handle),k=g?.variants?.find(b=>b.sku===r.sku);return(0,e.jsx)(E,{product:g,variantData:k,onSecondaryButton:()=>i?.(),onPrimaryButton:()=>p?.()},r.sku+x)})})]})},H=({searchResult:t,searchValue:o,data:l,onSecondaryButton:i,onPrimaryButton:p,onChangeSort:y,loading:r,shopNowLoadingProductId:x,searchResultCount:g,onChangeTab:k,buildProps:b})=>{const[c,T]=(0,n.useState)(l?.tabs?.[0]),f=(0,n.useRef)(!1),[P,m]=(0,n.useState)(!1),[N,L]=(0,n.useState)({[v.SearchPageTabType.PRODUCTS]:l?.tabs?.find(a=>a.tabType===v.SearchPageTabType.PRODUCTS)?.sortKeys?.[0],[v.SearchPageTabType.BLOGS]:l?.tabs?.find(a=>a.tabType===v.SearchPageTabType.BLOGS)?.sortKeys?.[0],[v.SearchPageTabType.PAGES]:l?.tabs?.find(a=>a.tabType===v.SearchPageTabType.PAGES)?.sortKeys?.[0]}),h=(0,n.useMemo)(()=>t?.products||[],[t]),I=(0,n.useMemo)(()=>t?.blogs||[],[t]),B=(0,n.useMemo)(()=>t?.pages||[],[t]),A=(0,n.useMemo)(()=>Object.values(g||{}).reduce((a,u)=>a+u,0),[g]),M=(0,n.useMemo)(()=>{const a={advertisingBgImg:c?.advertisingBgImg,advertisingTitle:c?.advertisingTitle,advertisingSubtitle:c?.advertisingSubtitle,advertisingLink:c?.advertisingLink,advertisingTheme:c?.advertisingTheme,type:"advertising"};return!f.current&&h?.length&&(h?.length>=8?(h?.splice(7,0,a),f.current=!0):(h?.push(a),f.current=!0)),h},[c,h]);return(0,e.jsxs)("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",children:[(0,e.jsx)(s.Heading,{size:4,weight:"bold",html:l?.title?.replace("$totalCount",A?.toString())?.replace("$inputValue",`"${o}"`)}),(0,e.jsx)("div",{className:"mt-6",children:(0,e.jsxs)(s.Tabs,{className:"ipc_search_page_tabs",defaultValue:"products",children:[(0,e.jsxs)("div",{className:"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[(0,e.jsx)(s.TabsList,{children:l?.tabs?.map(a=>(0,e.jsxs)(s.TabsTrigger,{onClick:()=>{T(a),f.current=!1;const u=a?.sortKeys?.[0];u&&(L($=>({...$,[a?.tabType]:u})),y?.(a?.tabType,u)),k?.(a?.tabType)},defaultValue:"products",value:a.tabType,children:[a.label," (",g?.[a.tabType],")"]},a.id))}),(0,e.jsxs)(s.DropdownMenu,{onOpenChange:m,children:[(0,e.jsx)(s.DropdownMenuTrigger,{asChild:!0,children:(0,e.jsxs)("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]",children:[c?.sortLabel," ",N?.[c?.tabType]?.label," ",(0,e.jsx)(z.DownArrow,{className:(0,d.cn)("inline-block size-4",{"rotate-180":P})})]})}),(0,e.jsx)(s.DropdownMenuContent,{align:"start",sideOffset:8,className:"rounded-none bg-white !px-0 py-2",children:c?.sortKeys?.map(a=>(0,e.jsx)(s.DropdownMenuItem,{className:(0,d.cn)("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current",{"bg-[#EAEAEC]":N?.[c?.tabType]?.value===a.value}),onClick:()=>{f.current=!1,y?.(c?.tabType,a),L(u=>({...u,[c?.tabType]:a}))},children:a.label},a.id))})]})]}),(0,e.jsxs)(s.TabsContent,{value:v.SearchPageTabType.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[(0,e.jsx)("div",{className:"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:M?.map((a,u)=>(0,e.jsx)(E,{searchValue:o,product:a,shopNowLoadingProductId:x,onSecondaryButton:()=>i?.(a),onPrimaryButton:()=>p?.(a)},(a.id||"")+u))}),r?(0,e.jsx)("div",{className:"mt-6 flex w-full justify-center",children:(0,e.jsx)(s.LoadingDots,{})}):!h?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(w,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(C,{products:l?.recommendProducts||[],buildProps:b,title:l?.recommendProductsTitle,shopNowLoadingProductId:x})]})]}),(0,e.jsx)(s.TabsContent,{value:v.SearchPageTabType.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:(0,e.jsxs)("div",{children:[I?.map(a=>(0,e.jsx)(W,{blog:a,searchValue:o},a.id)),r?(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsx)(s.LoadingDots,{})}):!I?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(w,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(C,{products:l?.recommendProducts||[],buildProps:b,title:l?.recommendProductsTitle})]})]})}),(0,e.jsxs)(s.TabsContent,{value:v.SearchPageTabType.PAGES,className:"ipc_search_page_tabs_pages_content",children:[(0,e.jsx)("div",{children:B?.map((a,u)=>(0,e.jsx)(U,{page:a,searchValue:o},(a.global_id||a.id)+u))}),r?(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsx)(s.LoadingDots,{})}):!B?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(w,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(C,{products:l?.recommendProducts||[],buildProps:b,title:l?.recommendProductsTitle,shopNowLoadingProductId:x})]})]})]})})]})};var q=H;
|
|
1
|
+
"use strict";var S=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var j=Object.prototype.hasOwnProperty;var F=(t,o)=>{for(var l in o)S(t,l,{get:o[l],enumerable:!0})},G=(t,o,l,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of R(o))!j.call(t,p)&&p!==l&&S(t,p,{get:()=>o[p],enumerable:!(i=O(o,p))||i.enumerable});return t};var K=t=>G(S({},"__esModule",{value:!0}),t);var J={};F(J,{default:()=>q});module.exports=K(J);var e=require("react/jsx-runtime"),s=require("../../components/index.js"),z=require("../HeaderNavigation/icons/index.js"),n=require("react"),d=require("../../helpers/utils.js"),_=require("../AiuiProvider/index.js"),D=require("../ShelfDisplay/shelfDisplay.js"),v=require("./types.js");const E=({product:t,onSecondaryButton:o,onPrimaryButton:l,searchValue:i,variantData:p,shopNowLoadingProductId:y})=>{const r=(0,n.useMemo)(()=>p||t?.variants?.[0],[t,p]),{locale:x="us",copyWriting:m}=(0,_.useAiuiContext)(),k=y===t?.id,b=(0,n.useMemo)(()=>`${x==="us"?"":"/"+x}/products/${t?.handle}?variant=${(0,d.atobID)(r?.id)}?ref=search_result_${i?.toLowerCase()}`,[t?.handle,r?.id,i,x]),c=r?.coupons?.[0],{price:T,basePrice:f}=(0,D.formatVariantPrice)({locale:x,amount:c?c.variant_price4wscode:r?.price,baseAmount:c?r?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),P=(0,n.useMemo)(()=>t?.tags?.filter?.(g=>g?.startsWith?.("CLtag"))?.map?.(g=>g?.replace?.("CLtag:",""))?.slice?.(0,2),[t?.tags]);return(0,e.jsx)("div",{className:"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto",children:t?.type==="advertising"&&t?.advertisingLink?(0,e.jsxs)(s.Link,{href:t?.advertisingLink,className:"h-full",children:[(0,e.jsx)(s.Picture,{source:t?.advertisingBgImg?.url,className:"size-full",imgClassName:"size-full object-cover"}),(0,e.jsxs)("div",{className:"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(s.Text,{html:t?.advertisingTitle,className:(0,d.cn)("desktop:text-[18px] text-sm font-bold",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})}),t?.advertisingSubtitle&&(0,e.jsx)(s.Heading,{size:3,html:t?.advertisingSubtitle,className:(0,d.cn)("laptop:line-clamp-3 mt-2 line-clamp-4 font-bold",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})})]})]}):(0,e.jsxs)("a",{href:b,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",children:[(0,e.jsx)("div",{className:"ipc_search_product_item_image",children:(0,e.jsx)(s.Picture,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:`${r?.image?.url||t?.images?.[0]?.url}}`,alt:t?.title,imgClassName:"object-cover size-full"})}),(0,e.jsxs)("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",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:P?.map((g,N)=>(0,e.jsx)(s.Text,{as:"p",html:g,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-[22px]"},N))}),(0,e.jsx)(s.Text,{className:"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:(0,d.highlightSearchWord)(t?.title||"",i||"")}),(0,e.jsx)(s.Text,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:(0,d.highlightSearchWord)(t?.description,i||"")})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"mb-2 flex items-center",children:r?.availableForSale?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:r?.availableForSale&&T||""}),(0,e.jsx)("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:r?.availableForSale&&f||""})]}):(0,e.jsx)("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:m?.soldOutText||"Sold Out"})}),(0,e.jsxs)("div",{className:(0,d.cn)("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[m?.learnMoreText&&(0,e.jsx)(s.Button,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",disabled:!r?.availableForSale,onClick:g=>{g.preventDefault(),g.stopPropagation(),o?.()},children:m?.learnMoreText}),m?.shopNowText&&(0,e.jsx)(s.Button,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!r?.availableForSale,loading:k,onClick:g=>{g.preventDefault(),g.stopPropagation(),l?.()},children:m?.shopNowText})]})]})]})]})})},W=({blog:t,searchValue:o})=>{const{copyWriting:l,locale:i}=(0,_.useAiuiContext)(),p=(0,n.useMemo)(()=>`${i==="us"?"":"/"+i}/blogs/${t?.blog?.handle}/${t?.handle.replace("storefront-","")}`,[t,i]);return(0,e.jsx)("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:(0,e.jsxs)("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[(0,e.jsx)("div",{className:"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]",children:(0,e.jsx)(s.Picture,{source:t?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:t?.title})}),(0,e.jsxs)("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[(0,e.jsx)(s.Heading,{size:3,html:(0,d.highlightSearchWord)(t?.title,o)}),(0,e.jsx)(s.Text,{html:(0,d.highlightSearchWord)(t?.content,o),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"desktop:mt-6 mt-4",children:(0,e.jsx)(s.Button,{as:"a",href:p,variant:"secondary",size:"lg",children:l?.learnMoreText||"Learn More"})})]})]})})},U=({searchValue:t,page:o})=>{const{copyWriting:l,locale:i="us"}=(0,_.useAiuiContext)(),p=(0,n.useMemo)(()=>`${i==="us"?"":`/${i}`}/${o?.handle}`,[o,i]);return(0,e.jsxs)("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[(0,e.jsx)(s.Heading,{size:3,html:(0,d.highlightSearchWord)(o?.name,t)}),(0,e.jsx)(s.Text,{as:"p",html:(0,d.highlightSearchWord)(o?.bodySummary||"",t),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),(0,e.jsx)(s.Button,{as:"a",href:p,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:l?.learnMoreText||"Learn More"})]})},w=({url:t,label:o})=>(0,e.jsxs)("div",{className:"flex flex-col items-center justify-center gap-4",children:[(0,e.jsx)(s.Picture,{source:t,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),(0,e.jsx)(s.Text,{html:o,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),C=({products:t,title:o,buildProps:l,onSecondaryButton:i,onPrimaryButton:p})=>{const{products:y}=l||{};return(0,e.jsxs)("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[(0,e.jsx)(s.Heading,{size:4,weight:"bold",html:o}),(0,e.jsx)("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",children:t?.map((r,x)=>{const m=y?.find(b=>b.handle===r.handle);if(!m)return null;const k=m?.variants?.find(b=>b.sku===r.sku);return(0,e.jsx)(E,{product:m,variantData:k,onSecondaryButton:()=>i?.(),onPrimaryButton:()=>p?.()},r.sku+x)})})]})},H=({searchResult:t,searchValue:o,data:l,onSecondaryButton:i,onPrimaryButton:p,onChangeSort:y,loading:r,shopNowLoadingProductId:x,searchResultCount:m,onChangeTab:k,buildProps:b})=>{const[c,T]=(0,n.useState)(l?.tabs?.[0]),f=(0,n.useRef)(!1),[P,g]=(0,n.useState)(!1),[N,L]=(0,n.useState)({[v.SearchPageTabType.PRODUCTS]:l?.tabs?.find(a=>a.tabType===v.SearchPageTabType.PRODUCTS)?.sortKeys?.[0],[v.SearchPageTabType.BLOGS]:l?.tabs?.find(a=>a.tabType===v.SearchPageTabType.BLOGS)?.sortKeys?.[0],[v.SearchPageTabType.PAGES]:l?.tabs?.find(a=>a.tabType===v.SearchPageTabType.PAGES)?.sortKeys?.[0]}),h=(0,n.useMemo)(()=>t?.products||[],[t]),I=(0,n.useMemo)(()=>t?.blogs||[],[t]),B=(0,n.useMemo)(()=>t?.pages||[],[t]),A=(0,n.useMemo)(()=>Object.values(m||{}).reduce((a,u)=>a+u,0),[m]),M=(0,n.useMemo)(()=>{const a={advertisingBgImg:c?.advertisingBgImg,advertisingTitle:c?.advertisingTitle,advertisingSubtitle:c?.advertisingSubtitle,advertisingLink:c?.advertisingLink,advertisingTheme:c?.advertisingTheme,type:"advertising"};return!f.current&&h?.length&&(h?.length>=8?(h?.splice(7,0,a),f.current=!0):(h?.push(a),f.current=!0)),h},[c,h]);return(0,e.jsxs)("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",children:[(0,e.jsx)(s.Heading,{size:4,weight:"bold",html:l?.title?.replace("$totalCount",A?.toString())?.replace("$inputValue",`"${o}"`)}),(0,e.jsx)("div",{className:"mt-6",children:(0,e.jsxs)(s.Tabs,{className:"ipc_search_page_tabs",defaultValue:"products",children:[(0,e.jsxs)("div",{className:"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[(0,e.jsx)(s.TabsList,{children:l?.tabs?.map(a=>(0,e.jsxs)(s.TabsTrigger,{onClick:()=>{T(a),f.current=!1;const u=a?.sortKeys?.[0];u&&(L($=>({...$,[a?.tabType]:u})),y?.(a?.tabType,u)),k?.(a?.tabType)},defaultValue:"products",value:a.tabType,children:[a.label," (",m?.[a.tabType],")"]},a.id))}),(0,e.jsxs)(s.DropdownMenu,{onOpenChange:g,children:[(0,e.jsx)(s.DropdownMenuTrigger,{asChild:!0,children:(0,e.jsxs)("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]",children:[c?.sortLabel," ",N?.[c?.tabType]?.label," ",(0,e.jsx)(z.DownArrow,{className:(0,d.cn)("inline-block size-4",{"rotate-180":P})})]})}),(0,e.jsx)(s.DropdownMenuContent,{align:"start",sideOffset:8,className:"rounded-none bg-white !px-0 py-2",children:c?.sortKeys?.map(a=>(0,e.jsx)(s.DropdownMenuItem,{className:(0,d.cn)("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current",{"bg-[#EAEAEC]":N?.[c?.tabType]?.value===a.value}),onClick:()=>{f.current=!1,y?.(c?.tabType,a),L(u=>({...u,[c?.tabType]:a}))},children:a.label},a.id))})]})]}),(0,e.jsxs)(s.TabsContent,{value:v.SearchPageTabType.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[(0,e.jsx)("div",{className:"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:M?.map((a,u)=>(0,e.jsx)(E,{searchValue:o,product:a,shopNowLoadingProductId:x,onSecondaryButton:()=>i?.(a),onPrimaryButton:()=>p?.(a)},(a.id||"")+u))}),r?(0,e.jsx)("div",{className:"mt-6 flex w-full justify-center",children:(0,e.jsx)(s.LoadingDots,{})}):!h?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(w,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(C,{products:l?.recommendProducts||[],buildProps:b,title:l?.recommendProductsTitle,shopNowLoadingProductId:x})]})]}),(0,e.jsx)(s.TabsContent,{value:v.SearchPageTabType.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:(0,e.jsxs)("div",{children:[I?.map(a=>(0,e.jsx)(W,{blog:a,searchValue:o},a.id)),r?(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsx)(s.LoadingDots,{})}):!I?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(w,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(C,{products:l?.recommendProducts||[],buildProps:b,title:l?.recommendProductsTitle})]})]})}),(0,e.jsxs)(s.TabsContent,{value:v.SearchPageTabType.PAGES,className:"ipc_search_page_tabs_pages_content",children:[(0,e.jsx)("div",{children:B?.map((a,u)=>(0,e.jsx)(U,{page:a,searchValue:o},(a.global_id||a.id)+u))}),r?(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsx)(s.LoadingDots,{})}):!B?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(w,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(C,{products:l?.recommendProducts||[],buildProps:b,title:l?.recommendProductsTitle,shopNowLoadingProductId:x})]})]})]})})]})};var q=H;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -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 LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { 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 shopNowLoadingProductId,\n}: SearchProductItemProps) => {\n const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n // \u5224\u65AD\u5F53\u524D\u4EA7\u54C1\u662F\u5426\u5728\u52A0\u8F7D\u4E2D\n const isCurrentProductLoading = shopNowLoadingProductId === product?.id\n\n const listingLink = useMemo(() => {\n return `${locale === 'us' ? '' : '/' + locale}/products/${product?.handle}?variant=${atobID(variant?.id as string)}?ref=search_result_${searchValue?.toLowerCase()}`\n }, [product?.handle, variant?.id, searchValue, locale])\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' && product?.advertisingLink ? (\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 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Text\n html={product?.advertisingTitle}\n className={cn('desktop:text-[18px] text-sm font-bold', {\n 'text-white': product?.advertisingTheme === 'light',\n 'text-info-primary': product?.advertisingTheme === 'dark',\n })}\n />\n {product?.advertisingSubtitle && (\n <Heading\n size={3}\n html={product?.advertisingSubtitle}\n className={cn('laptop:line-clamp-3 mt-2 line-clamp-4 font-bold', {\n 'text-white': product?.advertisingTheme === 'light',\n 'text-info-primary': product?.advertisingTheme === 'dark',\n })}\n />\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-[22px]\"\n />\n ))}\n </div>\n <Text\n className=\"lg-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={e => {\n e.preventDefault()\n e.stopPropagation()\n onSecondaryButton?.()\n }}\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 loading={isCurrentProductLoading}\n onClick={e => {\n e.preventDefault()\n e.stopPropagation()\n onPrimaryButton?.()\n }}\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, locale } = useAiuiContext()\n\n const articleLink = useMemo(\n () =>\n `${locale === 'us' ? '' : '/' + locale}/blogs/${blog?.blog?.handle}/${blog?.handle.replace('storefront-', '')}`,\n [blog, locale]\n )\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.sku + 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 shopNowLoadingProductId,\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 advertisingTheme: currentTab?.advertisingTheme,\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 isInsertAdvertising.current = false\n // \u5207\u6362tab\u65F6\uFF0C\u91CD\u7F6E\u8BE5tab\u7684\u6392\u5E8F\u503C\u4E3A\u9ED8\u8BA4\u503C\uFF08\u7B2C\u4E00\u4E2AsortKey\uFF09\n const defaultSortKey = tab?.sortKeys?.[0]\n if (defaultSortKey) {\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [tab?.tabType]: defaultSortKey,\n }))\n onChangeSort?.(tab?.tabType, defaultSortKey)\n }\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 'bg-[#EAEAEC]': 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 shopNowLoadingProductId={shopNowLoadingProductId}\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 shopNowLoadingProductId={shopNowLoadingProductId}\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 || page.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 shopNowLoadingProductId={shopNowLoadingProductId}\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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
|
|
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 LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { 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 shopNowLoadingProductId,\n}: SearchProductItemProps) => {\n const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n // \u5224\u65AD\u5F53\u524D\u4EA7\u54C1\u662F\u5426\u5728\u52A0\u8F7D\u4E2D\n const isCurrentProductLoading = shopNowLoadingProductId === product?.id\n\n const listingLink = useMemo(() => {\n return `${locale === 'us' ? '' : '/' + locale}/products/${product?.handle}?variant=${atobID(variant?.id as string)}?ref=search_result_${searchValue?.toLowerCase()}`\n }, [product?.handle, variant?.id, searchValue, locale])\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' && product?.advertisingLink ? (\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 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Text\n html={product?.advertisingTitle}\n className={cn('desktop:text-[18px] text-sm font-bold', {\n 'text-white': product?.advertisingTheme === 'light',\n 'text-info-primary': product?.advertisingTheme === 'dark',\n })}\n />\n {product?.advertisingSubtitle && (\n <Heading\n size={3}\n html={product?.advertisingSubtitle}\n className={cn('laptop:line-clamp-3 mt-2 line-clamp-4 font-bold', {\n 'text-white': product?.advertisingTheme === 'light',\n 'text-info-primary': product?.advertisingTheme === 'dark',\n })}\n />\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-[22px]\"\n />\n ))}\n </div>\n <Text\n className=\"lg-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={e => {\n e.preventDefault()\n e.stopPropagation()\n onSecondaryButton?.()\n }}\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 loading={isCurrentProductLoading}\n onClick={e => {\n e.preventDefault()\n e.stopPropagation()\n onPrimaryButton?.()\n }}\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, locale } = useAiuiContext()\n\n const articleLink = useMemo(\n () =>\n `${locale === 'us' ? '' : '/' + locale}/blogs/${blog?.blog?.handle}/${blog?.handle.replace('storefront-', '')}`,\n [blog, locale]\n )\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 if (!buildProduct) return null\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.sku + 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 shopNowLoadingProductId,\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 advertisingTheme: currentTab?.advertisingTheme,\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 isInsertAdvertising.current = false\n // \u5207\u6362tab\u65F6\uFF0C\u91CD\u7F6E\u8BE5tab\u7684\u6392\u5E8F\u503C\u4E3A\u9ED8\u8BA4\u503C\uFF08\u7B2C\u4E00\u4E2AsortKey\uFF09\n const defaultSortKey = tab?.sortKeys?.[0]\n if (defaultSortKey) {\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [tab?.tabType]: defaultSortKey,\n }))\n onChangeSort?.(tab?.tabType, defaultSortKey)\n }\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 'bg-[#EAEAEC]': 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 shopNowLoadingProductId={shopNowLoadingProductId}\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 shopNowLoadingProductId={shopNowLoadingProductId}\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 || page.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 shopNowLoadingProductId={shopNowLoadingProductId}\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
6
|
"names": ["SearchPage_exports", "__export", "SearchPage_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_icons", "import_react", "import_utils", "import_AiuiProvider", "import_shelfDisplay", "import_types", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "shopNowLoadingProductId", "variant", "locale", "copyWriting", "isCurrentProductLoading", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "index", "e", "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", "defaultSortKey", "prev", "sortKey"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 移动端菜单项
|
|
3
|
+
*/
|
|
4
|
+
export declare const MenuItem: ({ label, href, onClick, active, icon, className, }: {
|
|
5
|
+
label: string;
|
|
6
|
+
href?: string;
|
|
7
|
+
onClick?: () => void;
|
|
8
|
+
active?: boolean;
|
|
9
|
+
icon?: string;
|
|
10
|
+
className?: string;
|
|
11
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
/**
|
|
13
|
+
* 移动端子分类标题组件
|
|
14
|
+
*/
|
|
15
|
+
export declare const SubSubCategoryItemComp: ({ matchSeriesMetadata, onSubSubCategoryItemClick, expanded, }: {
|
|
16
|
+
matchSeriesMetadata: any;
|
|
17
|
+
onSubSubCategoryItemClick?: () => void;
|
|
18
|
+
expanded?: boolean;
|
|
19
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
/**
|
|
21
|
+
* 移动端子分类内容组件
|
|
22
|
+
*/
|
|
23
|
+
export declare const SubSubCategoryContentComp: ({ matchSeriesMetadata }: {
|
|
24
|
+
matchSeriesMetadata: any;
|
|
25
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Fragment as c,jsx as t,jsxs as r}from"react/jsx-runtime";import"react";import{Text as a,Link as p,Heading as d,Picture as u}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";import{DownArrow as f}from"./icons/index.js";import{SeriesProductItem as g}from"./SidebarDropdown.js";const w=({label:e,href:n,onClick:l,active:o,icon:s,className:m})=>{const b=r(c,{children:[r("div",{className:"flex items-center gap-4",children:[t(a,{html:e,className:i("text-sm font-bold leading-[1.4]",{underline:s})}),s&&t(a,{html:s,"aria-hidden":"true"})]}),t("svg",{className:`size-5 ${o?"rotate-90":""}`,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t("path",{d:"M9 5L16 12L9 19",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]});return n?t(p,{href:n,className:i("flex cursor-pointer items-center justify-between py-4 no-underline",m),onClick:l,children:b}):t("button",{onClick:l,className:i("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",m),"aria-expanded":o,children:b})},C=({matchSeriesMetadata:e,onSubSubCategoryItemClick:n,expanded:l})=>{const o=r(c,{children:[e?.label&&t(a,{html:e?.label,className:"text-sm font-bold leading-[1.4]"}),n&&t(f,{"aria-hidden":"true",className:i("size-5",{"rotate-180":l})})]});return n?t("button",{className:"tablet:pt-0 flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:n,"aria-expanded":l,children:o}):t("div",{className:"tablet:pt-0 flex items-center justify-between py-4",children:o})},L=({matchSeriesMetadata:e})=>t("div",{className:"laptop:gap-3 flex flex-col gap-2",children:!!e?.series?.length&&e?.series?.map((n,l)=>r("div",{children:[n.label&&t(a,{html:n.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#3D3D3F]"}),r("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!e?.banner&&t(p,{asChild:!e?.banner?.href,href:e?.banner?.href,children:r("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[t(u,{source:e?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),r("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[t(d,{size:2,html:e?.banner?.title||"Buy in Guide",className:i("font-bold text-white",{"text-black":e?.banner?.theme==="dark"})}),t(a,{html:e?.banner?.desc||"20.000mAh",className:i("text-sm font-bold text-white",{"text-black":e?.banner?.theme==="dark"})})]})]})}),n.products?.map((o,s)=>t(g,{position:s,product:o,seriesLabel:e?.label,isCollection:e?.isCollection},`seriesProductItem-${l}-${s}`))]})]},`seriesItem-${l}`))});export{w as MenuItem,L as SubSubCategoryContentComp,C as SubSubCategoryItemComp};
|
|
2
|
+
//# sourceMappingURL=MobileMenuComponents.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/HeaderNavigation/MobileMenuComponents.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { SeriesProductItem } from './SidebarDropdown.js'\n\n/**\n * \u79FB\u52A8\u7AEF\u83DC\u5355\u9879\n */\nexport const MenuItem = ({\n label,\n href,\n onClick,\n active,\n icon,\n className,\n}: {\n label: string\n href?: string\n onClick?: () => void\n active?: boolean\n icon?: string\n className?: string\n}) => {\n const content = (\n <>\n <div className=\"flex items-center gap-4\">\n <Text html={label} className={cn('text-sm font-bold leading-[1.4]', { underline: icon })} />\n {icon && <Text html={icon} aria-hidden=\"true\" />}\n </div>\n <svg\n className={`size-5 ${active ? 'rotate-90' : ''}`}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path d=\"M9 5L16 12L9 19\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </>\n )\n\n return href ? (\n <Link\n href={href}\n className={cn('flex cursor-pointer items-center justify-between py-4 no-underline', className)}\n onClick={onClick}\n >\n {content}\n </Link>\n ) : (\n <button\n onClick={onClick}\n className={cn(\n 'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left',\n className\n )}\n aria-expanded={active}\n >\n {content}\n </button>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u5B50\u5206\u7C7B\u6807\u9898\u7EC4\u4EF6\n */\nexport const SubSubCategoryItemComp = ({\n matchSeriesMetadata,\n onSubSubCategoryItemClick,\n expanded,\n}: {\n matchSeriesMetadata: any\n onSubSubCategoryItemClick?: () => void\n expanded?: boolean\n}) => {\n const content = (\n <>\n {matchSeriesMetadata?.label && (\n <Text html={matchSeriesMetadata?.label} className=\"text-sm font-bold leading-[1.4]\" />\n )}\n {onSubSubCategoryItemClick && (\n <DownArrow\n aria-hidden=\"true\"\n className={cn('size-5', {\n ['rotate-180']: expanded,\n })}\n />\n )}\n </>\n )\n\n return onSubSubCategoryItemClick ? (\n <button\n className=\"tablet:pt-0 flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left\"\n onClick={onSubSubCategoryItemClick}\n aria-expanded={expanded}\n >\n {content}\n </button>\n ) : (\n <div className=\"tablet:pt-0 flex items-center justify-between py-4\">{content}</div>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u5B50\u5206\u7C7B\u5185\u5BB9\u7EC4\u4EF6\n */\nexport const SubSubCategoryContentComp = ({ matchSeriesMetadata }: { matchSeriesMetadata: any }) => {\n return (\n <div className=\"laptop:gap-3 flex flex-col gap-2\">\n {!!matchSeriesMetadata?.series?.length &&\n matchSeriesMetadata?.series?.map((seriesItem: any, pIndex: number) => (\n <div key={`seriesItem-${pIndex}`}>\n {seriesItem.label && (\n <Text html={seriesItem.label} as=\"p\" className=\"mb-2 text-sm font-bold leading-[1.4] text-[#3D3D3F]\" />\n )}\n <div className=\"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2\">\n {!!matchSeriesMetadata?.banner && (\n <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Picture\n source={matchSeriesMetadata?.banner?.imageUrl}\n className=\"laptop:h-[120px] h-[114px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute inset-x-0 bottom-0 p-4\">\n <Heading\n size={2}\n html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n <Text\n html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n className={cn('text-sm font-bold text-white', {\n 'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n )}\n {seriesItem.products?.map((product: any, index: number) => (\n <SeriesProductItem\n position={index}\n key={`seriesProductItem-${pIndex}-${index}`}\n product={product}\n seriesLabel={matchSeriesMetadata?.label}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAyBI,mBAAAA,EAEI,OAAAC,EADF,QAAAC,MADF,oBAzBJ,MAAkB,QAClB,OAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,EAAS,WAAAC,MAAe,4BAC7C,OAAS,MAAAC,MAAU,yBACnB,OAAS,aAAAC,MAAiB,mBAC1B,OAAS,qBAAAC,MAAyB,uBAK3B,MAAMC,EAAW,CAAC,CACvB,MAAAC,EACA,KAAAC,EACA,QAAAC,EACA,OAAAC,EACA,KAAAC,EACA,UAAAC,CACF,IAOM,CACJ,MAAMC,EACJf,EAAAF,EAAA,CACE,UAAAE,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CAAK,KAAMQ,EAAO,UAAWJ,EAAG,kCAAmC,CAAE,UAAWQ,CAAK,CAAC,EAAG,EACzFA,GAAQd,EAACE,EAAA,CAAK,KAAMY,EAAM,cAAY,OAAO,GAChD,EACAd,EAAC,OACC,UAAW,UAAUa,EAAS,YAAc,EAAE,GAC9C,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,cAAY,OAEZ,SAAAb,EAAC,QAAK,EAAE,kBAAkB,OAAO,eAAe,YAAY,IAAI,cAAc,QAAQ,eAAe,QAAQ,EAC/G,GACF,EAGF,OAAOW,EACLX,EAACG,EAAA,CACC,KAAMQ,EACN,UAAWL,EAAG,qEAAsES,CAAS,EAC7F,QAASH,EAER,SAAAI,EACH,EAEAhB,EAAC,UACC,QAASY,EACT,UAAWN,EACT,iGACAS,CACF,EACA,gBAAeF,EAEd,SAAAG,EACH,CAEJ,EAKaC,EAAyB,CAAC,CACrC,oBAAAC,EACA,0BAAAC,EACA,SAAAC,CACF,IAIM,CACJ,MAAMJ,EACJf,EAAAF,EAAA,CACG,UAAAmB,GAAqB,OACpBlB,EAACE,EAAA,CAAK,KAAMgB,GAAqB,MAAO,UAAU,kCAAkC,EAErFC,GACCnB,EAACO,EAAA,CACC,cAAY,OACZ,UAAWD,EAAG,SAAU,CACrB,aAAec,CAClB,CAAC,EACH,GAEJ,EAGF,OAAOD,EACLnB,EAAC,UACC,UAAU,6GACV,QAASmB,EACT,gBAAeC,EAEd,SAAAJ,EACH,EAEAhB,EAAC,OAAI,UAAU,qDAAsD,SAAAgB,EAAQ,CAEjF,EAKaK,EAA4B,CAAC,CAAE,oBAAAH,CAAoB,IAE5DlB,EAAC,OAAI,UAAU,mCACZ,UAAC,CAACkB,GAAqB,QAAQ,QAC9BA,GAAqB,QAAQ,IAAI,CAACI,EAAiBC,IACjDtB,EAAC,OACE,UAAAqB,EAAW,OACVtB,EAACE,EAAA,CAAK,KAAMoB,EAAW,MAAO,GAAG,IAAI,UAAU,sDAAsD,EAEvGrB,EAAC,OAAI,UAAU,kGACZ,WAAC,CAACiB,GAAqB,QACtBlB,EAACG,EAAA,CAAK,QAAS,CAACe,GAAqB,QAAQ,KAAM,KAAMA,GAAqB,QAAQ,KACpF,SAAAjB,EAAC,OAAI,UAAU,2FACb,UAAAD,EAACK,EAAA,CACC,OAAQa,GAAqB,QAAQ,SACrC,UAAU,6BACV,aAAa,sBACf,EACAjB,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACI,EAAA,CACC,KAAM,EACN,KAAMc,GAAqB,QAAQ,OAAS,eAC5C,UAAWZ,EAAG,uBAAwB,CACpC,aAAcY,GAAqB,QAAQ,QAAU,MACvD,CAAC,EACH,EACAlB,EAACE,EAAA,CACC,KAAMgB,GAAqB,QAAQ,MAAQ,YAC3C,UAAWZ,EAAG,+BAAgC,CAC5C,aAAcY,GAAqB,QAAQ,QAAU,MACvD,CAAC,EACH,GACF,GACF,EACF,EAEDI,EAAW,UAAU,IAAI,CAACE,EAAcC,IACvCzB,EAACQ,EAAA,CACC,SAAUiB,EAEV,QAASD,EACT,YAAaN,GAAqB,MAClC,aAAcA,GAAqB,cAH9B,qBAAqBK,CAAM,IAAIE,CAAK,EAI3C,CACD,GACH,IAxCQ,cAAcF,CAAM,EAyC9B,CACD,EACL",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Text", "Link", "Heading", "Picture", "cn", "DownArrow", "SeriesProductItem", "MenuItem", "label", "href", "onClick", "active", "icon", "className", "content", "SubSubCategoryItemComp", "matchSeriesMetadata", "onSubSubCategoryItemClick", "expanded", "SubSubCategoryContentComp", "seriesItem", "pIndex", "product", "index"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useMemo as p}from"react";import{cn as r}from"../../helpers/utils.js";import{MulticolItem as i}from"./MulticolDropdown.js";const u=({multicolMetadata:t})=>{const o=p(()=>!t?.some(l=>!!l.columns),[t]);return e("div",{className:r("tablet:py-4 tablet:px-8 laptop:px-16 tablet:gap-6 flex flex-col gap-4 p-4",{"tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4":o}),children:t?.map((l,a)=>e("div",{children:e(i,{item:l,allPicture:o})},`multicolItem-${l?.label}-${a}`))})};export{u as MobileMulticolMenu};
|
|
2
|
+
//# sourceMappingURL=MobileMulticolMenu.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/HeaderNavigation/MobileMulticolMenu.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { MulticolItem } from './MulticolDropdown.js'\n\n/**\n * \u79FB\u52A8\u7AEFmulticol\u83DC\u5355\n * @param multicolMetadata multicol\u83DC\u5355\u5143\u6570\u636E\n */\nexport const MobileMulticolMenu = ({ multicolMetadata }: { multicolMetadata: any }) => {\n // \u662F\u5426\u5168\u90E8\u662F\u56FE\u7247\n const allPicture = useMemo(() => {\n return !multicolMetadata?.some((item: any) => !!item.columns)\n }, [multicolMetadata])\n\n return (\n <div\n className={cn('tablet:py-4 tablet:px-8 laptop:px-16 tablet:gap-6 flex flex-col gap-4 p-4', {\n ['tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4']: allPicture,\n })}\n >\n {multicolMetadata?.map((item: any, index: number) => (\n <div key={`multicolItem-${item?.label}-${index}`}>\n <MulticolItem item={item} allPicture={allPicture} />\n </div>\n ))}\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAsBU,cAAAA,MAAA,oBAtBV,OAAgB,WAAAC,MAAe,QAC/B,OAAS,MAAAC,MAAU,yBACnB,OAAS,gBAAAC,MAAoB,wBAMtB,MAAMC,EAAqB,CAAC,CAAE,iBAAAC,CAAiB,IAAiC,CAErF,MAAMC,EAAaL,EAAQ,IAClB,CAACI,GAAkB,KAAME,GAAc,CAAC,CAACA,EAAK,OAAO,EAC3D,CAACF,CAAgB,CAAC,EAErB,OACEL,EAAC,OACC,UAAWE,EAAG,4EAA6E,CACxF,2DAA6DI,CAChE,CAAC,EAEA,SAAAD,GAAkB,IAAI,CAACE,EAAWC,IACjCR,EAAC,OACC,SAAAA,EAACG,EAAA,CAAa,KAAMI,EAAM,WAAYD,EAAY,GAD1C,gBAAgBC,GAAM,KAAK,IAAIC,CAAK,EAE9C,CACD,EACH,CAEJ",
|
|
6
|
+
"names": ["jsx", "useMemo", "cn", "MulticolItem", "MobileMulticolMenu", "multicolMetadata", "allPicture", "item", "index"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 移动端资源位侧边栏下拉
|
|
3
|
+
* @param resourceCategoriesMetadata 资源位分类元数据
|
|
4
|
+
* @param resourcesMetadata 资源位元数据
|
|
5
|
+
*/
|
|
6
|
+
export declare const MobileResourceSidebarMenu: ({ resourceCategoriesMetadata, resourcesMetadata, }: {
|
|
7
|
+
resourceCategoriesMetadata: any;
|
|
8
|
+
resourcesMetadata: any;
|
|
9
|
+
}) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Fragment as z,jsx as n,jsxs as i}from"react/jsx-runtime";import{useCallback as L,useEffect as S,useMemo as $,useState as w}from"react";import{Button as C}from"../../components/index.js";import{HeaderNavigationMenu as y}from"./types.js";import{useNavContext as B}from"./NavProvider.js";import{ResourceSubSubCategoryItemComp as R,ResourceSubSubCategoryContentComp as k}from"./ResourceItem.js";const j=({label:t,onClick:l,active:u})=>i("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:l,"aria-expanded":u,children:[n("div",{className:"flex items-center gap-4",children:n("span",{className:"text-sm font-bold leading-[1.4]",children:t})}),n("svg",{className:`size-5 ${u?"rotate-90":""}`,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:n("path",{d:"M9 5L16 12L9 19",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]}),q=({resourceCategoriesMetadata:t,resourcesMetadata:l})=>{const{currentMenu:u,setCurrentMenu:c,subSubCategory:r,setSubSubCategory:v,onSidebarNavClick:p,currentResourceMetadata:b,setCurrentResourceMetadata:d}=B(),[g,N]=w([]),[m,x]=w([]);S(()=>{t?.subcategories?.length&&N(t?.subcategories?.map((a,e)=>({index:e,open:!1})))},[t]),S(()=>{r?.subSubCategories?.length&&x(r?.subSubCategories?.map((a,e)=>({index:e,open:e===0})))},[r]);const h=L(a=>{v?.(a);const e=l?.find(s=>a?.label?.toLowerCase()===s.label?.toLowerCase())||{};c&&c(y.Third),d&&d(e)},[l,c,v,d]);return $(()=>{switch(u){case y.Secondary:return i("div",{className:"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4",children:[n("div",{children:t?.subcategories?.map((a,e)=>n("div",{children:n(j,{label:a?.label,active:g.find(s=>s.index===e)?.open,onClick:()=>{h(a),p?.(a,e)}})},`${a.label}-${e}`))}),i("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&n(C,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&n(C,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:t?.secondary?.label})]})]});case y.Third:return n("div",{className:"tablet:px-8 laptop:px-16 p-4",children:r?.subSubCategories?r?.subSubCategories?.map((a,e)=>{const s=l?.find(o=>o.label.toLowerCase()===a?.label?.toLowerCase())||{};return i("div",{children:[Reflect.ownKeys(a).length>0&&n(R,{matchResourcesMetadata:s,onSubSubCategoryItemClick:()=>{p?.(a,e),x(o=>o.map((f,M)=>({...f,open:M===e?!f.open:f.open})))},expanded:!!m?.find(o=>o.index===e)?.open}),m?.find(o=>o.index===e)?.open&&n(k,{matchResourcesMetadata:s})]},`${a.label}-${e}`)}):i(z,{children:[Reflect.ownKeys(b).length>0&&n(R,{matchResourcesMetadata:b}),n(k,{matchResourcesMetadata:b})]})});default:return null}},[u,t,l,g,m,r,b,h,p])};export{q as MobileResourceSidebarMenu};
|
|
2
|
+
//# sourceMappingURL=MobileResourceSidebarMenu.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/HeaderNavigation/MobileResourceSidebarMenu.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Button } from '../../components/index.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport { useNavContext } from './NavProvider.js'\nimport { ResourceSubSubCategoryItemComp, ResourceSubSubCategoryContentComp } from './ResourceItem.js'\n\ninterface MenuItem {\n label: string\n href?: string\n onClick?: () => void\n active?: boolean\n icon?: string\n className?: string\n}\n\nconst MenuItem = ({ label, onClick, active }: MenuItem) => {\n return (\n <button\n className=\"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left\"\n onClick={onClick}\n aria-expanded={active}\n >\n <div className=\"flex items-center gap-4\">\n <span className=\"text-sm font-bold leading-[1.4]\">{label}</span>\n </div>\n <svg\n className={`size-5 ${active ? 'rotate-90' : ''}`}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path d=\"M9 5L16 12L9 19\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </button>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u8D44\u6E90\u4F4D\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param resourceCategoriesMetadata \u8D44\u6E90\u4F4D\u5206\u7C7B\u5143\u6570\u636E\n * @param resourcesMetadata \u8D44\u6E90\u4F4D\u5143\u6570\u636E\n */\nexport const MobileResourceSidebarMenu = ({\n resourceCategoriesMetadata,\n resourcesMetadata,\n}: {\n resourceCategoriesMetadata: any\n resourcesMetadata: any\n}) => {\n const {\n currentMenu,\n setCurrentMenu,\n subSubCategory,\n setSubSubCategory,\n onSidebarNavClick,\n currentResourceMetadata,\n setCurrentResourceMetadata,\n } = useNavContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [expandedResourceCategories, setExpandedResourceCategories] = useState<{ index: number; open: boolean }[]>([])\n\n useEffect(() => {\n if (resourceCategoriesMetadata?.subcategories?.length) {\n setExpandedSubcategory(\n resourceCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n index,\n open: false,\n }))\n )\n }\n }, [resourceCategoriesMetadata])\n\n useEffect(() => {\n if (subSubCategory?.subSubCategories?.length) {\n setExpandedResourceCategories(\n subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n index,\n open: index === 0,\n }))\n )\n }\n }, [subSubCategory])\n\n const handleSubSubCategoryClick = useCallback(\n (item: any) => {\n setSubSubCategory?.(item)\n const curResourcesMetadata =\n resourcesMetadata?.find(\n (resourceItem: any) => item?.label?.toLowerCase() === resourceItem.label?.toLowerCase()\n ) || {}\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n setCurrentResourceMetadata && setCurrentResourceMetadata(curResourcesMetadata)\n },\n [resourcesMetadata, setCurrentMenu, setSubSubCategory, setCurrentResourceMetadata]\n )\n\n const MobileResourceSidebarMenuComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Secondary:\n return (\n // \u4E8C\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4\">\n <div>\n {resourceCategoriesMetadata?.subcategories?.map((item: any, index: number) => {\n return (\n <div key={`${item.label}-${index}`}>\n <MenuItem\n label={item?.label}\n active={expandedSubcategory.find(item => item.index === index)?.open}\n onClick={() => {\n handleSubSubCategoryClick(item)\n onSidebarNavClick?.(item, index)\n }}\n />\n </div>\n )\n })}\n </div>\n <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n {resourceCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={`${resourceCategoriesMetadata?.primary?.url}?ref=${resourceCategoriesMetadata?.primary?.label}_shopall`}\n variant=\"primary\"\n size=\"lg\"\n className=\"tablet:w-auto w-full text-base\"\n >\n {resourceCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {resourceCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={resourceCategoriesMetadata?.secondary?.url}\n variant=\"link\"\n size=\"lg\"\n className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\"\n >\n {resourceCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )\n case HeaderNavigationMenu.Third:\n return (\n // \u4E09\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {subSubCategory?.subSubCategories ? (\n subSubCategory?.subSubCategories?.map((subSubCategoryItem: any, index: number) => {\n const curResourcesMetadata =\n resourcesMetadata?.find(\n (item: any) => item.label.toLowerCase() === subSubCategoryItem?.label?.toLowerCase()\n ) || {}\n return (\n <div key={`${subSubCategoryItem.label}-${index}`}>\n {Reflect.ownKeys(subSubCategoryItem).length > 0 && (\n <ResourceSubSubCategoryItemComp\n matchResourcesMetadata={curResourcesMetadata}\n onSubSubCategoryItemClick={() => {\n onSidebarNavClick?.(subSubCategoryItem, index)\n setExpandedResourceCategories(prev =>\n prev.map((item, i) => ({ ...item, open: i === index ? !item.open : item.open }))\n )\n }}\n expanded={!!expandedResourceCategories?.find(item => item.index === index)?.open}\n />\n )}\n {expandedResourceCategories?.find(item => item.index === index)?.open && (\n <ResourceSubSubCategoryContentComp matchResourcesMetadata={curResourcesMetadata} />\n )}\n </div>\n )\n })\n ) : (\n <>\n {Reflect.ownKeys(currentResourceMetadata).length > 0 && (\n <ResourceSubSubCategoryItemComp matchResourcesMetadata={currentResourceMetadata} />\n )}\n <ResourceSubSubCategoryContentComp matchResourcesMetadata={currentResourceMetadata} />\n </>\n )}\n </div>\n )\n default:\n return null\n }\n }, [\n currentMenu,\n resourceCategoriesMetadata,\n resourcesMetadata,\n expandedSubcategory,\n expandedResourceCategories,\n subSubCategory,\n currentResourceMetadata,\n handleSubSubCategoryClick,\n onSidebarNavClick,\n ])\n\n return MobileResourceSidebarMenuComp\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useCallback", "useEffect", "useMemo", "useState", "Button", "HeaderNavigationMenu", "useNavContext", "ResourceSubSubCategoryItemComp", "ResourceSubSubCategoryContentComp", "MenuItem", "label", "onClick", "active", "MobileResourceSidebarMenu", "resourceCategoriesMetadata", "resourcesMetadata", "currentMenu", "setCurrentMenu", "subSubCategory", "setSubSubCategory", "onSidebarNavClick", "currentResourceMetadata", "setCurrentResourceMetadata", "expandedSubcategory", "setExpandedSubcategory", "expandedResourceCategories", "setExpandedResourceCategories", "_", "index", "handleSubSubCategoryClick", "item", "curResourcesMetadata", "resourceItem", "subSubCategoryItem", "prev", "i"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 移动端侧边栏下拉
|
|
3
|
+
* @param sidebarCategoriesMetadata 侧边栏分类元数据
|
|
4
|
+
* @param seriesMetadata 侧边栏系列元数据
|
|
5
|
+
*/
|
|
6
|
+
export declare const MobileSidebarMenu: ({ sidebarCategoriesMetadata, seriesMetadata, }: {
|
|
7
|
+
sidebarCategoriesMetadata: any;
|
|
8
|
+
seriesMetadata: any;
|
|
9
|
+
}) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Fragment as D,jsx as a,jsxs as c}from"react/jsx-runtime";import{useCallback as R,useEffect as w,useMemo as k,useState as L}from"react";import{Button as p,Text as $,Link as M}from"../../components/index.js";import{HeaderNavigationMenu as S}from"./types.js";import{useNavContext as T}from"./NavProvider.js";import{MenuItem as F,SubSubCategoryItemComp as B,SubSubCategoryContentComp as z}from"./MobileMenuComponents.js";const O=({sidebarCategoriesMetadata:n,seriesMetadata:s})=>{const{currentMenu:v,setCurrentMenu:d,subSubCategory:u,setSubSubCategory:h,setCurrentSeriesMetadata:m,currentSeriesMetadata:o,buildProps:b,onSidebarNavClick:y}=T(),[x,_]=L([]),[f,C]=L([]);w(()=>{n?.subcategories?.length&&_(n?.subcategories?.map((e,l)=>({index:l,open:!1})))},[n]),w(()=>{u?.subSubCategories?.length&&C(u?.subSubCategories?.map((e,l)=>({index:l,open:l===0})))},[u]);const N=R((e,l)=>{d&&d(S.Third),h?.(e);const r=s?.find(t=>l!==void 0?e?.subSubCategories?.[l]?.label?.toLowerCase()===t.label?.toLowerCase():e?.label?.toLowerCase()===t.label?.toLowerCase())||{};if(e?.collections){const t=b?.categories?.[e?.collections]||{};m?.({label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,guide:r?.guide,series:[{products:t?.products}]})}else m?.(r)},[s,d,h,m,b?.categories]),K=k(()=>s?.find(e=>!!e?.guide)?.guide,[s]);return k(()=>{switch(v){case S.Secondary:return c("div",{className:"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4",children:[a("div",{children:n?.subcategories?.map((e,l)=>a("div",{children:a(F,{label:e?.label,active:x.find(r=>r.index===l)?.open,onClick:()=>{N(e),y?.(e,l)}})},`${e.label}-${l}`))}),c("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[n?.primary&&a(p,{as:"a",href:`${n?.primary?.url}?ref=${n?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:n?.primary?.label}),n?.secondary&&a(p,{as:"a",href:n?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:n?.secondary?.label})]})]});case S.Third:return a("div",{className:"tablet:px-8 laptop:px-16 p-4",children:u?.subSubCategories?u?.subSubCategories?.map((e,l)=>{const r=s?.find(i=>i.label.toLowerCase()===e?.label?.toLowerCase())||{};let t={};if(e?.collections){const i=b?.categories?.[e?.collections]||{};t={label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,guide:r?.guide,series:[{products:i?.products}]}}else t=r;return c("div",{children:[Reflect.ownKeys(e).length>0&&a(B,{matchSeriesMetadata:t,onSubSubCategoryItemClick:()=>{y?.(e,l),C(i=>i.map((g,E)=>({...g,open:E===l?!g.open:g.open})))},expanded:!!f?.find(i=>i.index===l)?.open}),f?.find(i=>i.index===l)?.open&&c(D,{children:[a(z,{matchSeriesMetadata:t}),t?.primary&&a("div",{className:"my-4 text-center",children:a(p,{as:"a",href:t?.primary?.url,className:"text-base leading-[1.2] no-underline",variant:"secondary",size:"base",children:t?.primary?.label})})]}),t?.guide?.label&&a(M,{href:t?.guide?.url,children:a("div",{className:"mt-4",children:a($,{html:t?.guide?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]},`${e.label}-${l}`)}):c(D,{children:[Reflect.ownKeys(o).length>0&&a(B,{matchSeriesMetadata:o}),a(z,{matchSeriesMetadata:o}),o?.primary&&a("div",{className:"my-4 text-center ",children:a(p,{as:"a",href:`${o?.primary?.url}?ref=${o?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base leading-[1.2] no-underline",children:o?.primary?.label})}),o?.guide?.label&&a(M,{href:o?.guide?.url,children:a("div",{className:"mt-4",children:a($,{html:o?.guide?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]})});default:return null}},[v,n,s,x,f,u,o,b?.categories,N,y])};export{O as MobileSidebarMenu};
|
|
2
|
+
//# sourceMappingURL=MobileSidebarMenu.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/HeaderNavigation/MobileSidebarMenu.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Button, Text, Link } from '../../components/index.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport { useNavContext } from './NavProvider.js'\nimport { MenuItem, SubSubCategoryItemComp, SubSubCategoryContentComp } from './MobileMenuComponents.js'\n\n/**\n * \u79FB\u52A8\u7AEF\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param sidebarCategoriesMetadata \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n * @param seriesMetadata \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n */\nexport const MobileSidebarMenu = ({\n sidebarCategoriesMetadata,\n seriesMetadata,\n}: {\n sidebarCategoriesMetadata: any\n seriesMetadata: any\n}) => {\n const {\n currentMenu,\n setCurrentMenu,\n subSubCategory,\n setSubSubCategory,\n setCurrentSeriesMetadata,\n currentSeriesMetadata,\n buildProps,\n onSidebarNavClick,\n } = useNavContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [expandedSeriesCategories, setExpandedSeriesCategories] = useState<{ index: number; open: boolean }[]>([])\n\n useEffect(() => {\n if (sidebarCategoriesMetadata?.subcategories?.length) {\n setExpandedSubcategory(\n sidebarCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n index,\n open: false,\n }))\n )\n }\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n if (subSubCategory?.subSubCategories?.length) {\n setExpandedSeriesCategories(\n subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n index,\n open: index === 0,\n }))\n )\n }\n }, [subSubCategory])\n\n const handleSubSubCategoryClick = useCallback(\n (item: any, subIndex?: number) => {\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n setSubSubCategory?.(item)\n const curSeriesMetadata =\n seriesMetadata?.find((seriesItem: any) =>\n subIndex !== undefined\n ? item?.subSubCategories?.[subIndex]?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n : item?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n ) || {}\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n if (item?.collections) {\n const category = buildProps?.categories?.[item?.collections] || {}\n setCurrentSeriesMetadata?.({\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n guide: curSeriesMetadata?.guide,\n series: [\n {\n products: category?.products,\n },\n ],\n })\n } else {\n setCurrentSeriesMetadata?.(curSeriesMetadata)\n }\n },\n [seriesMetadata, setCurrentMenu, setSubSubCategory, setCurrentSeriesMetadata, buildProps?.categories]\n )\n\n const defaultGuide = useMemo(() => {\n return seriesMetadata?.find((item: any) => !!item?.guide)?.guide\n }, [seriesMetadata])\n\n const MobileSidebarMenuComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Secondary:\n return (\n // \u4E8C\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4\">\n <div>\n {sidebarCategoriesMetadata?.subcategories?.map((item: any, index: number) => {\n return (\n <div key={`${item.label}-${index}`}>\n <MenuItem\n label={item?.label}\n active={expandedSubcategory.find(item => item.index === index)?.open}\n onClick={() => {\n handleSubSubCategoryClick(item)\n onSidebarNavClick?.(item, index)\n }}\n />\n </div>\n )\n })}\n </div>\n <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n {sidebarCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={`${sidebarCategoriesMetadata?.primary?.url}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n variant=\"primary\"\n size=\"lg\"\n className=\"tablet:w-auto w-full text-base\"\n >\n {sidebarCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {sidebarCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={sidebarCategoriesMetadata?.secondary?.url}\n variant=\"link\"\n size=\"lg\"\n className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )\n case HeaderNavigationMenu.Third:\n return (\n // \u4E09\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {subSubCategory?.subSubCategories ? (\n subSubCategory?.subSubCategories?.map((subSubCategoryItem: any, index: number) => {\n const curSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item.label.toLowerCase() === subSubCategoryItem?.label?.toLowerCase()\n ) || {}\n let matchSeriesMetadata = {} as any\n if (subSubCategoryItem?.collections) {\n const category = buildProps?.categories?.[subSubCategoryItem?.collections] || {}\n matchSeriesMetadata = {\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n guide: curSeriesMetadata?.guide,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n matchSeriesMetadata = curSeriesMetadata\n }\n return (\n <div key={`${subSubCategoryItem.label}-${index}`}>\n {Reflect.ownKeys(subSubCategoryItem).length > 0 && (\n <SubSubCategoryItemComp\n matchSeriesMetadata={matchSeriesMetadata}\n onSubSubCategoryItemClick={() => {\n onSidebarNavClick?.(subSubCategoryItem, index)\n setExpandedSeriesCategories(prev =>\n prev.map((item, i) => ({ ...item, open: i === index ? !item.open : item.open }))\n )\n }}\n expanded={!!expandedSeriesCategories?.find(item => item.index === index)?.open}\n />\n )}\n {expandedSeriesCategories?.find(item => item.index === index)?.open && (\n <>\n <SubSubCategoryContentComp matchSeriesMetadata={matchSeriesMetadata} />\n {matchSeriesMetadata?.primary && (\n <div className=\"my-4 text-center\">\n <Button\n as=\"a\"\n href={matchSeriesMetadata?.primary?.url}\n className=\"text-base leading-[1.2] no-underline\"\n variant=\"secondary\"\n size=\"base\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n {matchSeriesMetadata?.guide?.label && (\n <Link href={matchSeriesMetadata?.guide?.url}>\n <div className=\"mt-4\">\n <Text\n html={matchSeriesMetadata?.guide?.label}\n className=\"text-sm font-bold leading-[1.2] text-[#6D6D6F]\"\n />\n </div>\n </Link>\n )}\n </div>\n )\n })\n ) : (\n <>\n {Reflect.ownKeys(currentSeriesMetadata).length > 0 && (\n <SubSubCategoryItemComp matchSeriesMetadata={currentSeriesMetadata} />\n )}\n <SubSubCategoryContentComp matchSeriesMetadata={currentSeriesMetadata} />\n {currentSeriesMetadata?.primary && (\n <div className=\"my-4 text-center \">\n <Button\n as=\"a\"\n href={`${currentSeriesMetadata?.primary?.url}?ref=${currentSeriesMetadata?.label}_viewmore`}\n variant=\"secondary\"\n size=\"base\"\n className=\"text-base leading-[1.2] no-underline\"\n >\n {currentSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n {currentSeriesMetadata?.guide?.label && (\n <Link href={currentSeriesMetadata?.guide?.url}>\n <div className=\"mt-4\">\n <Text\n html={currentSeriesMetadata?.guide?.label}\n className=\"text-sm font-bold leading-[1.2] text-[#6D6D6F]\"\n />\n </div>\n </Link>\n )}\n </>\n )}\n </div>\n )\n default:\n return null\n }\n }, [\n currentMenu,\n sidebarCategoriesMetadata,\n seriesMetadata,\n expandedSubcategory,\n expandedSeriesCategories,\n subSubCategory,\n currentSeriesMetadata,\n buildProps?.categories,\n handleSubSubCategoryClick,\n onSidebarNavClick,\n ])\n\n return MobileSidebarMenuComp\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useCallback", "useEffect", "useMemo", "useState", "Button", "Text", "Link", "HeaderNavigationMenu", "useNavContext", "MenuItem", "SubSubCategoryItemComp", "SubSubCategoryContentComp", "MobileSidebarMenu", "sidebarCategoriesMetadata", "seriesMetadata", "currentMenu", "setCurrentMenu", "subSubCategory", "setSubSubCategory", "setCurrentSeriesMetadata", "currentSeriesMetadata", "buildProps", "onSidebarNavClick", "expandedSubcategory", "setExpandedSubcategory", "expandedSeriesCategories", "setExpandedSeriesCategories", "_", "index", "handleSubSubCategoryClick", "item", "subIndex", "curSeriesMetadata", "seriesItem", "category", "defaultGuide", "subSubCategoryItem", "matchSeriesMetadata", "prev", "i"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import"react";import{MenuItem as o}from"./MobileMenuComponents.js";const i=({supportsMetadata:l})=>e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:l?.map(a=>e(o,{href:a.url,label:a.label,onClick:()=>{}},a.id))});export{i as MobileSupportMenu};
|
|
2
|
+
//# sourceMappingURL=MobileSupportMenu.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/HeaderNavigation/MobileSupportMenu.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { MenuItem } from './MobileMenuComponents.js'\n\n/**\n * \u79FB\u52A8\u7AEFsupport\u83DC\u5355\n * @param supportsMetadata support\u83DC\u5355\u5143\u6570\u636E\n */\nexport const MobileSupportMenu = ({ supportsMetadata }: { supportsMetadata: any }) => {\n return (\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {supportsMetadata?.map((supportItem: any) => (\n <MenuItem key={supportItem.id} href={supportItem.url} label={supportItem.label} onClick={() => {}} />\n ))}\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAWQ,cAAAA,MAAA,oBAXR,MAAkB,QAClB,OAAS,YAAAC,MAAgB,4BAMlB,MAAMC,EAAoB,CAAC,CAAE,iBAAAC,CAAiB,IAEjDH,EAAC,OAAI,UAAU,+BACZ,SAAAG,GAAkB,IAAKC,GACtBJ,EAACC,EAAA,CAA8B,KAAMG,EAAY,IAAK,MAAOA,EAAY,MAAO,QAAS,IAAM,CAAC,GAAjFA,EAAY,EAAwE,CACpG,EACH",
|
|
6
|
+
"names": ["jsx", "MenuItem", "MobileSupportMenu", "supportsMetadata", "supportItem"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 多列下拉
|
|
3
|
+
* @param categoriesItem 分类项
|
|
4
|
+
*/
|
|
5
|
+
export declare const MulticolDropdown: ({ multicolMetadata }: {
|
|
6
|
+
multicolMetadata: any;
|
|
7
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
/**
|
|
9
|
+
* 多列下拉项
|
|
10
|
+
* @param item 多列下拉项
|
|
11
|
+
*/
|
|
12
|
+
export declare const MulticolItem: ({ item, allPicture }: {
|
|
13
|
+
item: any;
|
|
14
|
+
allPicture?: boolean;
|
|
15
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Fragment as d,jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as x}from"react";import{Container as p,Text as o,Link as n,Picture as m,Button as c}from"../../components/index.js";import{cn as r}from"../../helpers/utils.js";const g=({multicolMetadata:l})=>{const s=x(null);return e("div",{ref:s,children:e(p,{childClassName:"bg-white",className:"h-full",children:e("div",{className:"flex gap-4 py-4",children:l?.map((a,i)=>e("div",{className:"w-1/4",children:e(b,{item:a})},`multicolItem-${a?.label}-${i}`))})})})},b=({item:l,allPicture:s})=>t(d,{children:[l?.columns&&t(d,{children:[e(o,{html:l.label,as:"div",className:"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),e("div",{className:"mt-2 flex flex-col",children:l.columns?.map(a=>t("div",{className:"flex items-center gap-1 py-2",children:[e(n,{href:`${a.url}?ref=navMenu`,asChild:!a.url,className:"text-sm font-bold leading-[1.4] no-underline",children:a.label}),a?.badge&&e(o,{as:"p",html:a?.badge||"badge",className:"text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px] text-sm font-bold !leading-[22px]"})]},a.label))})]}),l?.imageUrl&&e("div",{className:r("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative h-[240px] max-w-[358px] overflow-hidden",{"tablet:max-w-none laptop:max-w-none":s}),children:t(n,{href:`${l.url}?ref=navMenu`,asChild:!l.url,children:[e(m,{source:l.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),t("div",{className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[e(o,{html:l.title,className:r("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":l?.theme==="dark"})}),l.subtitle&&e(o,{html:l.subtitle,className:r("text-sm font-bold leading-[1.4] text-white",{"text-black":l?.theme==="dark"})}),l?.primary?.label&&e(c,{as:"a",href:l?.primary?.url,variant:"link",size:"lg",className:r("mr-auto !p-0 text-sm font-bold leading-[1.4] text-white",{"text-black":l?.theme==="dark"}),children:l?.primary?.label||"more"})]})]})})]});export{g as MulticolDropdown,b as MulticolItem};
|
|
2
|
+
//# sourceMappingURL=MulticolDropdown.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/HeaderNavigation/MulticolDropdown.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { useRef } from 'react'\nimport { Container, Text, Link, Picture, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\n/**\n * \u591A\u5217\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const MulticolDropdown = ({ multicolMetadata }: { multicolMetadata: any }) => {\n const multicolDropdownRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={multicolDropdownRef}>\n <Container childClassName=\"bg-white\" className=\"h-full\">\n <div className=\"flex gap-4 py-4\">\n {multicolMetadata?.map((item: any, index: number) => (\n <div key={`multicolItem-${item?.label}-${index}`} className=\"w-1/4\">\n <MulticolItem item={item} />\n </div>\n ))}\n </div>\n </Container>\n </div>\n )\n}\n\n/**\n * \u591A\u5217\u4E0B\u62C9\u9879\n * @param item \u591A\u5217\u4E0B\u62C9\u9879\n */\nexport const MulticolItem = ({ item, allPicture }: { item: any; allPicture?: boolean }) => {\n return (\n <>\n {item?.columns && (\n <>\n <Text html={item.label} as=\"div\" className=\"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n <div className=\"mt-2 flex flex-col\">\n {item.columns?.map((columnItem: any) => (\n <div key={columnItem.label} className=\"flex items-center gap-1 py-2\">\n <Link\n href={`${columnItem.url}?ref=navMenu`}\n asChild={!columnItem.url}\n className=\"text-sm font-bold leading-[1.4] no-underline\"\n >\n {columnItem.label}\n </Link>\n {columnItem?.badge && (\n <Text\n as=\"p\"\n html={columnItem?.badge || 'badge'}\n className=\"text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px] text-sm font-bold !leading-[22px]\"\n />\n )}\n </div>\n ))}\n </div>\n </>\n )}\n {item?.imageUrl && (\n <div\n className={cn(\n 'laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative h-[240px] max-w-[358px] overflow-hidden',\n {\n ['tablet:max-w-none laptop:max-w-none']: allPicture,\n }\n )}\n >\n <Link href={`${item.url}?ref=navMenu`} asChild={!item.url}>\n <Picture\n source={item.imageUrl}\n width={404}\n height={280}\n className=\"size-full\"\n imgClassName=\"object-cover h-full hover:scale-105 transition-all duration-300\"\n />\n <div className=\"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline\">\n <Text\n html={item.title}\n className={cn('lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white', {\n 'text-black': item?.theme === 'dark',\n })}\n />\n {item.subtitle && (\n <Text\n html={item.subtitle}\n className={cn('text-sm font-bold leading-[1.4] text-white', {\n 'text-black': item?.theme === 'dark',\n })}\n />\n )}\n {item?.primary?.label && (\n <Button\n as=\"a\"\n href={item?.primary?.url}\n variant=\"link\"\n size=\"lg\"\n className={cn('mr-auto !p-0 text-sm font-bold leading-[1.4] text-white', {\n 'text-black': item?.theme === 'dark',\n })}\n >\n {item?.primary?.label || 'more'}\n </Button>\n )}\n </div>\n </Link>\n </div>\n )}\n </>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAiBc,OAiBN,YAAAA,EAjBM,OAAAC,EAqBA,QAAAC,MArBA,oBAjBd,OAAgB,UAAAC,MAAc,QAC9B,OAAS,aAAAC,EAAW,QAAAC,EAAM,QAAAC,EAAM,WAAAC,EAAS,UAAAC,MAAc,4BACvD,OAAS,MAAAC,MAAU,yBAMZ,MAAMC,EAAmB,CAAC,CAAE,iBAAAC,CAAiB,IAAiC,CACnF,MAAMC,EAAsBT,EAAuB,IAAI,EAEvD,OACEF,EAAC,OAAI,IAAKW,EACR,SAAAX,EAACG,EAAA,CAAU,eAAe,WAAW,UAAU,SAC7C,SAAAH,EAAC,OAAI,UAAU,kBACZ,SAAAU,GAAkB,IAAI,CAACE,EAAWC,IACjCb,EAAC,OAAiD,UAAU,QAC1D,SAAAA,EAACc,EAAA,CAAa,KAAMF,EAAM,GADlB,gBAAgBA,GAAM,KAAK,IAAIC,CAAK,EAE9C,CACD,EACH,EACF,EACF,CAEJ,EAMaC,EAAe,CAAC,CAAE,KAAAF,EAAM,WAAAG,CAAW,IAE5Cd,EAAAF,EAAA,CACG,UAAAa,GAAM,SACLX,EAAAF,EAAA,CACE,UAAAC,EAACI,EAAA,CAAK,KAAMQ,EAAK,MAAO,GAAG,MAAM,UAAU,sDAAsD,EACjGZ,EAAC,OAAI,UAAU,qBACZ,SAAAY,EAAK,SAAS,IAAKI,GAClBf,EAAC,OAA2B,UAAU,+BACpC,UAAAD,EAACK,EAAA,CACC,KAAM,GAAGW,EAAW,GAAG,eACvB,QAAS,CAACA,EAAW,IACrB,UAAU,+CAET,SAAAA,EAAW,MACd,EACCA,GAAY,OACXhB,EAACI,EAAA,CACC,GAAG,IACH,KAAMY,GAAY,OAAS,QAC3B,UAAU,6HACZ,IAbMA,EAAW,KAerB,CACD,EACH,GACF,EAEDJ,GAAM,UACLZ,EAAC,OACC,UAAWQ,EACT,oKACA,CACG,sCAAwCO,CAC3C,CACF,EAEA,SAAAd,EAACI,EAAA,CAAK,KAAM,GAAGO,EAAK,GAAG,eAAgB,QAAS,CAACA,EAAK,IACpD,UAAAZ,EAACM,EAAA,CACC,OAAQM,EAAK,SACb,MAAO,IACP,OAAQ,IACR,UAAU,YACV,aAAa,kEACf,EACAX,EAAC,OAAI,UAAU,uEACb,UAAAD,EAACI,EAAA,CACC,KAAMQ,EAAK,MACX,UAAWJ,EAAG,iEAAkE,CAC9E,aAAcI,GAAM,QAAU,MAChC,CAAC,EACH,EACCA,EAAK,UACJZ,EAACI,EAAA,CACC,KAAMQ,EAAK,SACX,UAAWJ,EAAG,6CAA8C,CAC1D,aAAcI,GAAM,QAAU,MAChC,CAAC,EACH,EAEDA,GAAM,SAAS,OACdZ,EAACO,EAAA,CACC,GAAG,IACH,KAAMK,GAAM,SAAS,IACrB,QAAQ,OACR,KAAK,KACL,UAAWJ,EAAG,0DAA2D,CACvE,aAAcI,GAAM,QAAU,MAChC,CAAC,EAEA,SAAAA,GAAM,SAAS,OAAS,OAC3B,GAEJ,GACF,EACF,GAEJ",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useRef", "Container", "Text", "Link", "Picture", "Button", "cn", "MulticolDropdown", "multicolMetadata", "multicolDropdownRef", "item", "index", "MulticolItem", "allPicture", "columnItem"]
|
|
7
|
+
}
|
|
@@ -25,6 +25,8 @@ interface NavContextType {
|
|
|
25
25
|
setCurrentSeriesMetadata?: (_metadata: any) => void;
|
|
26
26
|
subSubCategory?: any;
|
|
27
27
|
setSubSubCategory?: (_category: any) => void;
|
|
28
|
+
currentResourceMetadata?: any;
|
|
29
|
+
setCurrentResourceMetadata?: (_metadata: any) => void;
|
|
28
30
|
onSeriesProductClick?: (_seriesProduct: any, _position: number, _seriesLabel?: string) => void;
|
|
29
31
|
onSidebarNavClick?: (_series: any, _index: number, _subSubindex?: number) => void;
|
|
30
32
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as M}from"react/jsx-runtime";import{createContext as E,useCallback as n,useContext as C,useMemo as S,useReducer as R}from"react";import{HeaderNavigationMenu as _}from"./types.js";const v={isMobile:!1,payloadData:{},buildProps:{products:[],categories:{}},currentMenu:_.Primary,setCurrentMenu:()=>{},currentSeriesMetadata:{},setCurrentSeriesMetadata:()=>{},currentResourceMetadata:{},setCurrentResourceMetadata:()=>{},onSeriesProductClick:(e,t,o)=>{},onSidebarNavClick:e=>{},cartCount:0},u=E(v),A=()=>{if(!C(u))throw new Error("useNavContext must be used in <NavProvider>");return C(u)},T=(e,t)=>{switch(t.type){case"SET_CURRENT_MENU":return{...e,currentMenu:t.value};case"SET_CURRENT_SERIES_METADATA":return{...e,currentSeriesMetadata:t.value};case"SET_SUB_SUB_CATEGORY":return{...e,subSubCategory:t.value};case"SET_CURRENT_RESOURCE_METADATA":return{...e,currentResourceMetadata:t.value}}},p=({children:e,...t})=>{const[o,r]=R(T,{...v,currentMenu:_.Primary,setCurrentMenu:()=>{}}),s=n(a=>r({type:"SET_CURRENT_MENU",value:a}),[r]),i=n(a=>r({type:"SET_CURRENT_SERIES_METADATA",value:a}),[r]),c=n(a=>r({type:"SET_SUB_SUB_CATEGORY",value:a}),[r]),d=n(a=>r({type:"SET_CURRENT_RESOURCE_METADATA",value:a}),[r]),y=S(()=>({...o,setCurrentMenu:s,setCurrentSeriesMetadata:i,setSubSubCategory:c,setCurrentResourceMetadata:d}),[s,i,c,d,o]);return M(u.Provider,{value:{...y,...t},children:e})};var U=p;export{u as NavContext,U as default,A as useNavContext};
|
|
2
2
|
//# sourceMappingURL=NavProvider.js.map
|