@anker-in/headless-ui 1.1.34-alpha.1768470531746 → 1.1.34-alpha.1768474461959
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.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/MobileMenuComponents.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/MobileMenuComponents.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/MobileMenuComponents.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(t,
|
|
1
|
+
"use strict";var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(t,l)=>{for(var n in l)a(t,n,{get:l[n],enumerable:!0})},x=(t,l,n,i)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of u(l))!f.call(t,r)&&r!==n&&a(t,r,{get:()=>l[r],enumerable:!(i=d(l,r))||i.enumerable});return t};var v=t=>x(a({},"__esModule",{value:!0}),t);var k={};g(k,{MenuItem:()=>h,SubSubCategoryContentComp:()=>y,SubSubCategoryItemComp:()=>N});module.exports=v(k);var e=require("react/jsx-runtime"),C=require("react"),o=require("../../components/index.js"),s=require("../../helpers/utils.js"),p=require("./icons/index.js"),c=require("./SidebarDropdown.js");const h=({label:t,href:l,onClick:n,active:i,icon:r,className:b})=>{const m=(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(o.Text,{html:t,className:(0,s.cn)("text-sm font-bold leading-[1.4]",{underline:r})}),r&&(0,e.jsx)(o.Text,{html:r,"aria-hidden":"true"})]}),(0,e.jsx)("svg",{className:`size-5 ${i?"rotate-90":""}`,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:(0,e.jsx)("path",{d:"M9 5L16 12L9 19",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]});return l?(0,e.jsx)(o.Link,{href:l,className:(0,s.cn)("flex cursor-pointer items-center justify-between py-4 no-underline",b),onClick:n,children:m}):(0,e.jsx)("button",{onClick:n,className:(0,s.cn)("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",b),"aria-expanded":i,children:m})},N=({matchSeriesMetadata:t,onSubSubCategoryItemClick:l,expanded:n})=>{const i=(0,e.jsxs)(e.Fragment,{children:[t?.label&&(0,e.jsx)(o.Text,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),l&&(0,e.jsx)(p.DownArrow,{"aria-hidden":"true",className:(0,s.cn)("size-5",{"rotate-180":n})})]});return l?(0,e.jsx)("button",{className:"tablet:pt-0 flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:l,"aria-expanded":n,children:i}):(0,e.jsx)("div",{className:"tablet:pt-0 flex items-center justify-between py-4",children:i})},y=({matchSeriesMetadata:t})=>(0,e.jsx)("div",{className:"laptop:gap-3 flex flex-col gap-2",children:!!t?.series?.length&&t?.series?.map((l,n)=>(0,e.jsxs)("div",{children:[l.label&&(0,e.jsx)(o.Text,{html:l.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#3D3D3F]"}),(0,e.jsxs)("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!t?.banner&&(0,e.jsx)(o.Link,{asChild:!t?.banner?.href,href:t?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(o.Picture,{source:t?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(o.Heading,{size:2,html:t?.banner?.title||"Buy in Guide",className:(0,s.cn)("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),(0,e.jsx)(o.Text,{html:t?.banner?.desc||"20.000mAh",className:(0,s.cn)("text-sm font-bold text-white",{"text-black":t?.banner?.theme==="dark"})})]})]})}),l.products?.map((i,r)=>(0,e.jsx)(c.SeriesProductItem,{position:r,product:i,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${l?.label||""}-${n}-${r}`))]})]},`seriesItem-${l?.label||""}-${n}`))});
|
|
2
2
|
//# sourceMappingURL=MobileMenuComponents.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,cAAAE,EAAA,8BAAAC,EAAA,2BAAAC,IAAA,eAAAC,EAAAL,GAyBI,IAAAM,EAAA,6BAzBJC,EAAkB,iBAClBC,EAA6C,qCAC7CC,EAAmB,kCACnBC,EAA0B,4BAC1BC,EAAkC,gCAK3B,MAAMT,EAAW,CAAC,CACvB,MAAAU,EACA,KAAAC,EACA,QAAAC,EACA,OAAAC,EACA,KAAAC,EACA,UAAAC,CACF,IAOM,CACJ,MAAMC,KACJ,oBACE,qBAAC,OAAI,UAAU,0BACb,oBAAC,QAAK,KAAMN,EAAO,aAAW,MAAG,kCAAmC,CAAE,UAAWI,CAAK,CAAC,EAAG,EACzFA,MAAQ,OAAC,QAAK,KAAMA,EAAM,cAAY,OAAO,GAChD,KACA,OAAC,OACC,UAAW,UAAUD,EAAS,YAAc,EAAE,GAC9C,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,cAAY,OAEZ,mBAAC,QAAK,EAAE,kBAAkB,OAAO,eAAe,YAAY,IAAI,cAAc,QAAQ,eAAe,QAAQ,EAC/G,GACF,EAGF,OAAOF,KACL,OAAC,QACC,KAAMA,EACN,aAAW,MAAG,qEAAsEI,CAAS,EAC7F,QAASH,EAER,SAAAI,EACH,KAEA,OAAC,UACC,QAASJ,EACT,aAAW,MACT,iGACAG,CACF,EACA,gBAAeF,EAEd,SAAAG,EACH,CAEJ,EAKad,EAAyB,CAAC,CACrC,oBAAAe,EACA,0BAAAC,EACA,SAAAC,CACF,IAIM,CACJ,MAAMH,KACJ,oBACG,UAAAC,GAAqB,UACpB,OAAC,QAAK,KAAMA,GAAqB,MAAO,UAAU,kCAAkC,EAErFC,MACC,OAAC,aACC,cAAY,OACZ,aAAW,MAAG,SAAU,CACrB,aAAeC,CAClB,CAAC,EACH,GAEJ,EAGF,OAAOD,KACL,OAAC,UACC,UAAU,6GACV,QAASA,EACT,gBAAeC,EAEd,SAAAH,EACH,KAEA,OAAC,OAAI,UAAU,qDAAsD,SAAAA,EAAQ,CAEjF,EAKaf,EAA4B,CAAC,CAAE,oBAAAgB,CAAoB,OAE5D,OAAC,OAAI,UAAU,mCACZ,UAAC,CAACA,GAAqB,QAAQ,QAC9BA,GAAqB,QAAQ,IAAI,CAACG,EAAiBC,OACjD,QAAC,OACE,UAAAD,EAAW,UACV,OAAC,QAAK,KAAMA,EAAW,MAAO,GAAG,IAAI,UAAU,sDAAsD,KAEvG,QAAC,OAAI,UAAU,kGACZ,WAAC,CAACH,GAAqB,WACtB,OAAC,QAAK,QAAS,CAACA,GAAqB,QAAQ,KAAM,KAAMA,GAAqB,QAAQ,KACpF,oBAAC,OAAI,UAAU,2FACb,oBAAC,WACC,OAAQA,GAAqB,QAAQ,SACrC,UAAU,6BACV,aAAa,sBACf,KACA,QAAC,OAAI,UAAU,kCACb,oBAAC,WACC,KAAM,EACN,KAAMA,GAAqB,QAAQ,OAAS,eAC5C,aAAW,MAAG,uBAAwB,CACpC,aAAcA,GAAqB,QAAQ,QAAU,MACvD,CAAC,EACH,KACA,OAAC,QACC,KAAMA,GAAqB,QAAQ,MAAQ,YAC3C,aAAW,MAAG,+BAAgC,CAC5C,aAAcA,GAAqB,QAAQ,QAAU,MACvD,CAAC,EACH,GACF,GACF,EACF,EAEDG,EAAW,UAAU,IAAI,CAACE,EAAcC,OACvC,OAAC,qBACC,SAAUA,EAEV,QAASD,EACT,YAAaL,GAAqB,MAClC,aAAcA,GAAqB,cAH9B,
|
|
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-${seriesItem?.label || ''}-${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-${seriesItem?.label || ''}-${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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,cAAAE,EAAA,8BAAAC,EAAA,2BAAAC,IAAA,eAAAC,EAAAL,GAyBI,IAAAM,EAAA,6BAzBJC,EAAkB,iBAClBC,EAA6C,qCAC7CC,EAAmB,kCACnBC,EAA0B,4BAC1BC,EAAkC,gCAK3B,MAAMT,EAAW,CAAC,CACvB,MAAAU,EACA,KAAAC,EACA,QAAAC,EACA,OAAAC,EACA,KAAAC,EACA,UAAAC,CACF,IAOM,CACJ,MAAMC,KACJ,oBACE,qBAAC,OAAI,UAAU,0BACb,oBAAC,QAAK,KAAMN,EAAO,aAAW,MAAG,kCAAmC,CAAE,UAAWI,CAAK,CAAC,EAAG,EACzFA,MAAQ,OAAC,QAAK,KAAMA,EAAM,cAAY,OAAO,GAChD,KACA,OAAC,OACC,UAAW,UAAUD,EAAS,YAAc,EAAE,GAC9C,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,cAAY,OAEZ,mBAAC,QAAK,EAAE,kBAAkB,OAAO,eAAe,YAAY,IAAI,cAAc,QAAQ,eAAe,QAAQ,EAC/G,GACF,EAGF,OAAOF,KACL,OAAC,QACC,KAAMA,EACN,aAAW,MAAG,qEAAsEI,CAAS,EAC7F,QAASH,EAER,SAAAI,EACH,KAEA,OAAC,UACC,QAASJ,EACT,aAAW,MACT,iGACAG,CACF,EACA,gBAAeF,EAEd,SAAAG,EACH,CAEJ,EAKad,EAAyB,CAAC,CACrC,oBAAAe,EACA,0BAAAC,EACA,SAAAC,CACF,IAIM,CACJ,MAAMH,KACJ,oBACG,UAAAC,GAAqB,UACpB,OAAC,QAAK,KAAMA,GAAqB,MAAO,UAAU,kCAAkC,EAErFC,MACC,OAAC,aACC,cAAY,OACZ,aAAW,MAAG,SAAU,CACrB,aAAeC,CAClB,CAAC,EACH,GAEJ,EAGF,OAAOD,KACL,OAAC,UACC,UAAU,6GACV,QAASA,EACT,gBAAeC,EAEd,SAAAH,EACH,KAEA,OAAC,OAAI,UAAU,qDAAsD,SAAAA,EAAQ,CAEjF,EAKaf,EAA4B,CAAC,CAAE,oBAAAgB,CAAoB,OAE5D,OAAC,OAAI,UAAU,mCACZ,UAAC,CAACA,GAAqB,QAAQ,QAC9BA,GAAqB,QAAQ,IAAI,CAACG,EAAiBC,OACjD,QAAC,OACE,UAAAD,EAAW,UACV,OAAC,QAAK,KAAMA,EAAW,MAAO,GAAG,IAAI,UAAU,sDAAsD,KAEvG,QAAC,OAAI,UAAU,kGACZ,WAAC,CAACH,GAAqB,WACtB,OAAC,QAAK,QAAS,CAACA,GAAqB,QAAQ,KAAM,KAAMA,GAAqB,QAAQ,KACpF,oBAAC,OAAI,UAAU,2FACb,oBAAC,WACC,OAAQA,GAAqB,QAAQ,SACrC,UAAU,6BACV,aAAa,sBACf,KACA,QAAC,OAAI,UAAU,kCACb,oBAAC,WACC,KAAM,EACN,KAAMA,GAAqB,QAAQ,OAAS,eAC5C,aAAW,MAAG,uBAAwB,CACpC,aAAcA,GAAqB,QAAQ,QAAU,MACvD,CAAC,EACH,KACA,OAAC,QACC,KAAMA,GAAqB,QAAQ,MAAQ,YAC3C,aAAW,MAAG,+BAAgC,CAC5C,aAAcA,GAAqB,QAAQ,QAAU,MACvD,CAAC,EACH,GACF,GACF,EACF,EAEDG,EAAW,UAAU,IAAI,CAACE,EAAcC,OACvC,OAAC,qBACC,SAAUA,EAEV,QAASD,EACT,YAAaL,GAAqB,MAClC,aAAcA,GAAqB,cAH9B,qBAAqBG,GAAY,OAAS,EAAE,IAAIC,CAAM,IAAIE,CAAK,EAItE,CACD,GACH,IAxCQ,cAAcH,GAAY,OAAS,EAAE,IAAIC,CAAM,EAyCzD,CACD,EACL",
|
|
6
6
|
"names": ["MobileMenuComponents_exports", "__export", "MenuItem", "SubSubCategoryContentComp", "SubSubCategoryItemComp", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_icons", "import_SidebarDropdown", "label", "href", "onClick", "active", "icon", "className", "content", "matchSeriesMetadata", "onSubSubCategoryItemClick", "expanded", "seriesItem", "pIndex", "product", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var L=Object.create;var N=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var j=(t,i)=>{for(var d in i)N(t,d,{get:i[d],enumerable:!0})},w=(t,i,d,x)=>{if(i&&typeof i=="object"||typeof i=="function")for(let u of A(i))!_.call(t,u)&&u!==d&&N(t,u,{get:()=>i[u],enumerable:!(x=P(i,u))||x.enumerable});return t};var B=(t,i,d)=>(d=t!=null?L(z(t)):{},w(i||!t||!t.__esModule?N(d,"default",{value:t,enumerable:!0}):d,t)),E=t=>w(N({},"__esModule",{value:!0}),t);var O={};j(O,{SeriesProductItem:()=>$,SidebarDropdown:()=>F});module.exports=E(O);var e=require("react/jsx-runtime"),m=B(require("react")),n=require("../../components/index.js"),g=require("../../helpers/utils.js"),C=require("./icons/index.js"),S=require("./NavProvider.js");const F=m.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:i})=>{const{buildProps:d,onSidebarNavClick:x}=(0,S.useNavContext)(),[u,y]=(0,m.useState)([]),[p,b]=(0,m.useState)(-1),v=(0,m.useRef)(null),h=(0,m.useCallback)(()=>{const l=t?.subcategories;if(!l?.length)return;const r=l.findIndex(c=>!!c?.subSubCategories),s=l.findIndex(c=>!c?.subSubCategories),o=l.map((c,f)=>({index:f,open:r===f||s===f}));y(o)},[t]);(0,m.useEffect)(()=>{h()},[h]);const a=(0,m.useMemo)(()=>{const l=t?.subcategories?.[u?.find(s=>s.open)?.index||0],r=i?.find(s=>s?.label?.toLowerCase()===l?.label?.toLowerCase())||{};if(l?.collections){const s=d?.categories?.[l?.collections]||{};return{label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,series:[{products:s?.products}]}}else if(l?.subSubCategories){const s=l?.subSubCategories?.[p],o=i?.find(c=>c?.label?.toLowerCase()===s?.label?.toLowerCase())||{};if(s?.collections){const c=d?.categories?.[s?.collections]||{};return{label:o?.label,isCollection:!0,banner:o?.banner,primary:o?.primary,series:[{products:c?.products}]}}else return o}else return r},[t,u,p,i,d]),k=(0,m.useCallback)((l,r)=>{r?.subSubCategories?.length>0?b(0):b(-1),y(s=>s.map((o,c)=>({...o,open:c===l?!o.open:!1})))},[]),D=(l,r)=>{y(s=>s.map(o=>o.index===l?{...o,open:!0}:{...o,open:!1})),b(r)};return(0,e.jsxs)(n.Container,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[(0,e.jsxs)("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:v,children:[(0,e.jsx)("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((l,r)=>{const s=Array.isArray(l?.subSubCategories)&&l?.subSubCategories?.length>0,o=u?.find(c=>c.index===r)?.open;return(0,e.jsxs)("div",{children:[(0,e.jsxs)("button",{className:(0,g.cn)("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!s&&o}),onClick:()=>{k(r,l),x?.(l,r)},"aria-expanded":s?o:void 0,"aria-haspopup":s?"true":void 0,children:[(0,e.jsx)(n.Text,{html:l.label,className:"p-4 text-sm font-bold leading-[1.4]"}),s&&(0,e.jsx)(C.DownArrow,{"aria-hidden":"true",className:(0,g.cn)("size-4",{"rotate-180":o})})]}),o&&(0,e.jsx)("div",{className:"flex flex-col",role:"menu",children:l.subSubCategories?.map((c,f)=>(0,e.jsx)("button",{onClick:()=>{D(r,f),x?.(c,f)},className:(0,g.cn)("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":p===f}),role:"menuitem","aria-label":c.label,children:(0,e.jsx)(n.Text,{html:c.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${r}-${f}`))})]},`${l?.label||""}subcategoryItem-${r}`)})}),t&&(0,e.jsx)("div",{className:"flex",children:(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[t?.primary&&(0,e.jsx)(n.Button,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(n.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:t?.secondary?.label})]})})]}),(0,e.jsxs)("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(a).length>0&&(0,e.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(n.Text,{html:a?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),a?.primary&&!a?.primary?.hide&&(0,e.jsx)(n.Button,{as:"a",href:`${a?.primary?.url}?ref=${a?.label}_viewmore`,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:a?.primary?.label})]}),t?.guide?.label&&(0,e.jsx)(n.Link,{href:t?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:t?.guide?.label})]}),(0,e.jsx)("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:a?.series?.map((l,r)=>(0,e.jsxs)("div",{children:[l.label&&(0,e.jsx)(n.Text,{html:l.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[!!a?.banner&&(0,e.jsx)(n.Link,{asChild:!a?.banner?.href,href:a?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(n.Picture,{source:a?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(n.Heading,{size:2,html:a?.banner?.title||"Buy in Guide",className:(0,g.cn)("font-bold text-white",{"text-black":a?.banner?.theme==="dark"})}),(0,e.jsx)(n.Text,{html:a?.banner?.desc||"20.000mAh",className:(0,g.cn)("text-sm font-bold text-white",{"text-black":a?.banner?.theme==="dark"})})]})]})}),l.products?.map((s,o)=>(0,e.jsx)($,{seriesLabel:a?.label,product:s,isCollection:a?.isCollection},`seriesProductItem-${l?.label||""}-${r}-${o}`))]})]},`seriesItem-${l?.label||""}-${r}`))})]})]})});F.displayName="SidebarDropdown";const $=({product:t,isCollection:i,position:d,seriesLabel:x})=>{const{buildProps:u,onSeriesProductClick:y}=(0,S.useNavContext)();let p=i?t:u?.products?.find(a=>a.handle===t.handle);const b=p?.variants?.find(a=>a.sku===t.sku)||p?.variants?.[0],v=(0,m.useMemo)(()=>`/products/${p?.handle}?variant=${(0,g.atobID)(b?.id)}`,[p?.handle,b?.id]),h=(0,m.useMemo)(()=>p?.tags?.filter?.(a=>a?.startsWith?.("CLtag"))?.map?.(a=>a?.replace?.("CLtag:",""))?.slice?.(0,2),[p?.tags]);return b?.availableForSale?(0,e.jsx)(n.Link,{href:v,onClick:a=>{a.preventDefault(),window.open(v,"_self"),y?.(p,d||0,x)},className:"no-underline hover:text-current",children:(0,e.jsxs)("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)("img",{src:`${b?.image?.url||t?.images?.[0]?.url}&width=200`,loading:"lazy",alt:p?.title||t?.name,width:90,height:90,className:"size-[96px] object-contain"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:"flex gap-1",children:Array.isArray(h)&&h?.map((a,k)=>(0,e.jsx)(n.Text,{as:"p",html:a,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]"},k))}),(0,e.jsx)(n.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:p?.title||t?.name}),t?.desc&&(0,e.jsx)(n.Text,{as:"p",html:t?.desc,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null};
|
|
2
2
|
//# sourceMappingURL=SidebarDropdown.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeaderNavigation/SidebarDropdown.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn, atobID } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const SidebarDropdown = React.memo(\n ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n const { buildProps, onSidebarNavClick } = useNavContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n const initExpandedSubcategory = useCallback(() => {\n const subcategories = sidebarCategoriesMetadata?.subcategories\n if (!subcategories?.length) return\n\n const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n const expandedStates = subcategories.map((_: any, index: number) => ({\n index,\n open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n }))\n\n setExpandedSubcategory(expandedStates)\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n initExpandedSubcategory()\n }, [initExpandedSubcategory])\n\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n const matchSeriesMetadata = useMemo(() => {\n const subCategory =\n sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n const currentSeriesMetadata =\n seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n if (subCategory?.collections) {\n const category = buildProps?.categories?.[subCategory?.collections] || {}\n return {\n label: currentSeriesMetadata?.label,\n isCollection: true,\n banner: currentSeriesMetadata?.banner,\n primary: currentSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n if (subCategory?.subSubCategories) {\n const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n const currentActiveSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n ) || {}\n if (activeSubSubcategory?.collections) {\n const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n return {\n label: currentActiveSeriesMetadata?.label,\n isCollection: true,\n banner: currentActiveSeriesMetadata?.banner,\n primary: currentActiveSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n return currentActiveSeriesMetadata\n }\n } else {\n return currentSeriesMetadata\n }\n }\n }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata, buildProps])\n\n const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n }, [])\n\n const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n setExpandedSubcategory(prev =>\n prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n )\n setActiveSubSubcategoryIndex(subSubindex)\n }\n\n return (\n <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n <div\n className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n style={{\n userSelect: 'none',\n }}\n ref={sidebarDropdownRef}\n >\n <div\n className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n const hasSubSubCategory =\n Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n return (\n <div key={`subcategoryItem-${index}`}>\n <button\n className={cn(\n 'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n {\n 'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n }\n )}\n onClick={() => {\n handleSubcategoryOpen(index, subItem)\n onSidebarNavClick?.(subItem, index)\n }}\n aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n >\n <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n {hasSubSubCategory && (\n <DownArrow\n aria-hidden=\"true\"\n className={cn('size-4', {\n ['rotate-180']: isExpanded,\n })}\n />\n )}\n </button>\n {isExpanded && (\n <div className=\"flex flex-col\" role=\"menu\">\n {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n <button\n onClick={() => {\n handleSubSubcategoryOpen(index, subSubindex)\n onSidebarNavClick?.(subSubItem, subSubindex)\n }}\n key={`subSubItem-${index}-${subSubindex}`}\n className={cn(\n 'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n {\n 'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n }\n )}\n role=\"menuitem\"\n aria-label={subSubItem.label}\n >\n <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n </button>\n ))}\n </div>\n )}\n </div>\n )\n })}\n </div>\n {sidebarCategoriesMetadata && (\n <div className=\"flex\">\n <div className=\"flex flex-col 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=\"lg-desktop:text-base text-sm\"\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 iconClassName=\"size-4\"\n className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"flex-1 py-4\">\n {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n <div className=\"mb-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <Text\n html={matchSeriesMetadata?.label}\n className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.4]\"\n />\n {matchSeriesMetadata?.primary && !matchSeriesMetadata?.primary?.hide && (\n <Button\n as=\"a\"\n href={`${matchSeriesMetadata?.primary?.url}?ref=${matchSeriesMetadata?.label}_viewmore`}\n variant=\"link\"\n size=\"lg\"\n iconClassName=\"size-4\"\n className=\"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n )}\n </div>\n {sidebarCategoriesMetadata?.guide?.label && (\n <Link\n href={sidebarCategoriesMetadata?.guide?.url}\n className=\"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]\"\n >\n {sidebarCategoriesMetadata?.guide?.label}\n </Link>\n )}\n </div>\n )}\n <div\n className=\"flex h-[426px] flex-col gap-4 overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n <div key={`seriesItem-${seriesIndex}`}>\n {seriesItem.label && (\n <Text\n html={seriesItem.label}\n as=\"p\"\n className=\"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n <div className=\"grid grid-cols-3 gap-4\">\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 seriesLabel={matchSeriesMetadata?.label}\n key={`seriesProductItem-${index}`}\n product={product}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n </Container>\n )\n }\n)\n\nSidebarDropdown.displayName = 'SidebarDropdown'\n\n/**\n * \u7CFB\u5217\u4EA7\u54C1\u9879\u7EC4\u4EF6\n */\nexport const SeriesProductItem = ({\n product,\n isCollection,\n position,\n seriesLabel,\n}: {\n product: any\n isCollection?: boolean\n position?: number\n seriesLabel?: string\n}) => {\n const { buildProps, onSeriesProductClick } = useNavContext()\n let productData = isCollection\n ? product\n : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n const variant =\n productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n const listingLink = useMemo(() => {\n return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n }, [productData?.handle, variant?.id])\n\n const tags = useMemo(() => {\n return productData?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [productData?.tags])\n\n if (!variant?.availableForSale) return null\n\n return (\n <Link\n href={listingLink}\n onClick={e => {\n e.preventDefault()\n window.open(listingLink, '_self')\n onSeriesProductClick?.(productData, position || 0, seriesLabel)\n }}\n className=\"no-underline hover:text-current\"\n >\n <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500\">\n <div className=\"shrink-0\">\n <img\n src={`${variant?.image?.url || product?.images?.[0]?.url}`}\n loading=\"lazy\"\n alt={productData?.title || product?.name}\n width={90}\n height={90}\n className=\"size-[96px] object-contain\"\n />\n </div>\n <div className=\"relative\">\n <div className=\"flex gap-1\">\n {Array.isArray(tags) &&\n tags?.map((tag: string, index: number) => (\n <Text\n key={index}\n as=\"p\"\n html={tag}\n className=\"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]\"\n />\n ))}\n </div>\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productData?.title || product?.name}\n />\n {product?.desc && (\n <Text\n as=\"p\"\n html={product?.desc}\n className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </Link>\n )\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn, atobID } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const SidebarDropdown = React.memo(\n ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n const { buildProps, onSidebarNavClick } = useNavContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n const initExpandedSubcategory = useCallback(() => {\n const subcategories = sidebarCategoriesMetadata?.subcategories\n if (!subcategories?.length) return\n\n const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n const expandedStates = subcategories.map((_: any, index: number) => ({\n index,\n open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n }))\n\n setExpandedSubcategory(expandedStates)\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n initExpandedSubcategory()\n }, [initExpandedSubcategory])\n\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n const matchSeriesMetadata = useMemo(() => {\n const subCategory =\n sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n const currentSeriesMetadata =\n seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n if (subCategory?.collections) {\n const category = buildProps?.categories?.[subCategory?.collections] || {}\n return {\n label: currentSeriesMetadata?.label,\n isCollection: true,\n banner: currentSeriesMetadata?.banner,\n primary: currentSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n if (subCategory?.subSubCategories) {\n const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n const currentActiveSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n ) || {}\n if (activeSubSubcategory?.collections) {\n const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n return {\n label: currentActiveSeriesMetadata?.label,\n isCollection: true,\n banner: currentActiveSeriesMetadata?.banner,\n primary: currentActiveSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n return currentActiveSeriesMetadata\n }\n } else {\n return currentSeriesMetadata\n }\n }\n }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata, buildProps])\n\n const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n }, [])\n\n const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n setExpandedSubcategory(prev =>\n prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n )\n setActiveSubSubcategoryIndex(subSubindex)\n }\n\n return (\n <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n <div\n className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n style={{\n userSelect: 'none',\n }}\n ref={sidebarDropdownRef}\n >\n <div\n className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n const hasSubSubCategory =\n Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n return (\n <div key={`${subItem?.label || ''}subcategoryItem-${index}`}>\n <button\n className={cn(\n 'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n {\n 'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n }\n )}\n onClick={() => {\n handleSubcategoryOpen(index, subItem)\n onSidebarNavClick?.(subItem, index)\n }}\n aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n >\n <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n {hasSubSubCategory && (\n <DownArrow\n aria-hidden=\"true\"\n className={cn('size-4', {\n ['rotate-180']: isExpanded,\n })}\n />\n )}\n </button>\n {isExpanded && (\n <div className=\"flex flex-col\" role=\"menu\">\n {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n <button\n onClick={() => {\n handleSubSubcategoryOpen(index, subSubindex)\n onSidebarNavClick?.(subSubItem, subSubindex)\n }}\n key={`subSubItem-${index}-${subSubindex}`}\n className={cn(\n 'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n {\n 'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n }\n )}\n role=\"menuitem\"\n aria-label={subSubItem.label}\n >\n <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n </button>\n ))}\n </div>\n )}\n </div>\n )\n })}\n </div>\n {sidebarCategoriesMetadata && (\n <div className=\"flex\">\n <div className=\"flex flex-col 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=\"lg-desktop:text-base text-sm\"\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 iconClassName=\"size-4\"\n className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"flex-1 py-4\">\n {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n <div className=\"mb-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <Text\n html={matchSeriesMetadata?.label}\n className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.4]\"\n />\n {matchSeriesMetadata?.primary && !matchSeriesMetadata?.primary?.hide && (\n <Button\n as=\"a\"\n href={`${matchSeriesMetadata?.primary?.url}?ref=${matchSeriesMetadata?.label}_viewmore`}\n variant=\"link\"\n size=\"lg\"\n iconClassName=\"size-4\"\n className=\"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n )}\n </div>\n {sidebarCategoriesMetadata?.guide?.label && (\n <Link\n href={sidebarCategoriesMetadata?.guide?.url}\n className=\"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]\"\n >\n {sidebarCategoriesMetadata?.guide?.label}\n </Link>\n )}\n </div>\n )}\n <div\n className=\"flex h-[426px] flex-col gap-4 overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n <div key={`seriesItem-${seriesItem?.label || ''}-${seriesIndex}`}>\n {seriesItem.label && (\n <Text\n html={seriesItem.label}\n as=\"p\"\n className=\"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n <div className=\"grid grid-cols-3 gap-4\">\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 seriesLabel={matchSeriesMetadata?.label}\n key={`seriesProductItem-${seriesItem?.label || ''}-${seriesIndex}-${index}`}\n product={product}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n </Container>\n )\n }\n)\n\nSidebarDropdown.displayName = 'SidebarDropdown'\n\n/**\n * \u7CFB\u5217\u4EA7\u54C1\u9879\u7EC4\u4EF6\n */\nexport const SeriesProductItem = ({\n product,\n isCollection,\n position,\n seriesLabel,\n}: {\n product: any\n isCollection?: boolean\n position?: number\n seriesLabel?: string\n}) => {\n const { buildProps, onSeriesProductClick } = useNavContext()\n let productData = isCollection\n ? product\n : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n const variant =\n productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n const listingLink = useMemo(() => {\n return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n }, [productData?.handle, variant?.id])\n\n const tags = useMemo(() => {\n return productData?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [productData?.tags])\n\n if (!variant?.availableForSale) return null\n\n return (\n <Link\n href={listingLink}\n onClick={e => {\n e.preventDefault()\n window.open(listingLink, '_self')\n onSeriesProductClick?.(productData, position || 0, seriesLabel)\n }}\n className=\"no-underline hover:text-current\"\n >\n <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500\">\n <div className=\"shrink-0\">\n <img\n src={`${variant?.image?.url || product?.images?.[0]?.url}&width=200`}\n loading=\"lazy\"\n alt={productData?.title || product?.name}\n width={90}\n height={90}\n className=\"size-[96px] object-contain\"\n />\n </div>\n <div className=\"relative\">\n <div className=\"flex gap-1\">\n {Array.isArray(tags) &&\n tags?.map((tag: string, index: number) => (\n <Text\n key={index}\n as=\"p\"\n html={tag}\n className=\"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]\"\n />\n ))}\n </div>\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productData?.title || product?.name}\n />\n {product?.desc && (\n <Text\n as=\"p\"\n html={product?.desc}\n className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </Link>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["SidebarDropdown_exports", "__export", "SeriesProductItem", "SidebarDropdown", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_icons", "import_NavProvider", "React", "sidebarCategoriesMetadata", "seriesMetadata", "buildProps", "onSidebarNavClick", "expandedSubcategory", "setExpandedSubcategory", "activeSubSubcategoryIndex", "setActiveSubSubcategoryIndex", "sidebarDropdownRef", "initExpandedSubcategory", "subcategories", "withSubSubCategoriesIndex", "item", "withoutSubSubCategoriesIndex", "expandedStates", "_", "index", "matchSeriesMetadata", "subCategory", "currentSeriesMetadata", "category", "activeSubSubcategory", "currentActiveSeriesMetadata", "handleSubcategoryOpen", "subcategoryItem", "prev", "i", "handleSubSubcategoryOpen", "subSubindex", "subItem", "hasSubSubCategory", "isExpanded", "subSubItem", "seriesItem", "seriesIndex", "product", "isCollection", "position", "seriesLabel", "onSeriesProductClick", "productData", "variant", "listingLink", "tags", "e", "tag"]
|
|
7
7
|
}
|
|
@@ -1,2 +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
|
|
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 s}from"../../helpers/utils.js";import{DownArrow as f}from"./icons/index.js";import{SeriesProductItem as g}from"./SidebarDropdown.js";const w=({label:e,href:l,onClick:n,active:o,icon:i,className:b})=>{const m=r(c,{children:[r("div",{className:"flex items-center gap-4",children:[t(a,{html:e,className:s("text-sm font-bold leading-[1.4]",{underline:i})}),i&&t(a,{html:i,"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 l?t(p,{href:l,className:s("flex cursor-pointer items-center justify-between py-4 no-underline",b),onClick:n,children:m}):t("button",{onClick:n,className:s("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",b),"aria-expanded":o,children:m})},C=({matchSeriesMetadata:e,onSubSubCategoryItemClick:l,expanded:n})=>{const o=r(c,{children:[e?.label&&t(a,{html:e?.label,className:"text-sm font-bold leading-[1.4]"}),l&&t(f,{"aria-hidden":"true",className:s("size-5",{"rotate-180":n})})]});return l?t("button",{className:"tablet:pt-0 flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:l,"aria-expanded":n,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((l,n)=>r("div",{children:[l.label&&t(a,{html:l.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:s("font-bold text-white",{"text-black":e?.banner?.theme==="dark"})}),t(a,{html:e?.banner?.desc||"20.000mAh",className:s("text-sm font-bold text-white",{"text-black":e?.banner?.theme==="dark"})})]})]})}),l.products?.map((o,i)=>t(g,{position:i,product:o,seriesLabel:e?.label,isCollection:e?.isCollection},`seriesProductItem-${l?.label||""}-${n}-${i}`))]})]},`seriesItem-${l?.label||""}-${n}`))});export{w as MenuItem,L as SubSubCategoryContentComp,C as SubSubCategoryItemComp};
|
|
2
2
|
//# sourceMappingURL=MobileMenuComponents.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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": "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
|
|
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-${seriesItem?.label || ''}-${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-${seriesItem?.label || ''}-${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": "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",
|
|
6
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
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as a,jsxs as i}from"react/jsx-runtime";import L,{useCallback as C,useEffect as P,useMemo as k,useRef as A,useState as F}from"react";import{Button as S,Container as z,Text as p,Link as w,Heading as _,Picture as j}from"../../components/index.js";import{cn as y,atobID as B}from"../../helpers/utils.js";import{DownArrow as E}from"./icons/index.js";import{useNavContext as $}from"./NavProvider.js";const O=L.memo(({sidebarCategoriesMetadata:l,seriesMetadata:u})=>{const{buildProps:b,onSidebarNavClick:h}=$(),[f,g]=F([]),[c,m]=F(-1),v=A(null),x=C(()=>{const t=l?.subcategories;if(!t?.length)return;const s=t.findIndex(o=>!!o?.subSubCategories),n=t.findIndex(o=>!o?.subSubCategories),r=t.map((o,d)=>({index:d,open:s===d||n===d}));g(r)},[l]);P(()=>{x()},[x]);const e=k(()=>{const t=l?.subcategories?.[f?.find(n=>n.open)?.index||0],s=u?.find(n=>n?.label?.toLowerCase()===t?.label?.toLowerCase())||{};if(t?.collections){const n=b?.categories?.[t?.collections]||{};return{label:s?.label,isCollection:!0,banner:s?.banner,primary:s?.primary,series:[{products:n?.products}]}}else if(t?.subSubCategories){const n=t?.subSubCategories?.[c],r=u?.find(o=>o?.label?.toLowerCase()===n?.label?.toLowerCase())||{};if(n?.collections){const o=b?.categories?.[n?.collections]||{};return{label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,series:[{products:o?.products}]}}else return r}else return s},[l,f,c,u,b]),N=C((t,s)=>{s?.subSubCategories?.length>0?m(0):m(-1),g(n=>n.map((r,o)=>({...r,open:o===t?!r.open:!1})))},[]),D=(t,s)=>{g(n=>n.map(r=>r.index===t?{...r,open:!0}:{...r,open:!1})),m(s)};return i(z,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[i("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:v,children:[a("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:l?.subcategories?.map((t,s)=>{const n=Array.isArray(t?.subSubCategories)&&t?.subSubCategories?.length>0,r=f?.find(o=>o.index===s)?.open;return i("div",{children:[i("button",{className:y("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!n&&r}),onClick:()=>{N(s,t),h?.(t,s)},"aria-expanded":n?r:void 0,"aria-haspopup":n?"true":void 0,children:[a(p,{html:t.label,className:"p-4 text-sm font-bold leading-[1.4]"}),n&&a(E,{"aria-hidden":"true",className:y("size-4",{"rotate-180":r})})]}),r&&a("div",{className:"flex flex-col",role:"menu",children:t.subSubCategories?.map((o,d)=>a("button",{onClick:()=>{D(s,d),h?.(o,d)},className:y("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":c===d}),role:"menuitem","aria-label":o.label,children:a(p,{html:o.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${s}-${d}`))})]},`${t?.label||""}subcategoryItem-${s}`)})}),l&&a("div",{className:"flex",children:i("div",{className:"flex flex-col gap-4",children:[l?.primary&&a(S,{as:"a",href:`${l?.primary?.url}?ref=${l?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:l?.primary?.label}),l?.secondary&&a(S,{as:"a",href:l?.secondary?.url,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:l?.secondary?.label})]})})]}),i("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(e).length>0&&i("div",{className:"mb-4 flex items-center justify-between",children:[i("div",{className:"flex items-center gap-2",children:[a(p,{html:e?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),e?.primary&&!e?.primary?.hide&&a(S,{as:"a",href:`${e?.primary?.url}?ref=${e?.label}_viewmore`,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:e?.primary?.label})]}),l?.guide?.label&&a(w,{href:l?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:l?.guide?.label})]}),a("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e?.series?.map((t,s)=>i("div",{children:[t.label&&a(p,{html:t.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i("div",{className:"grid grid-cols-3 gap-4",children:[!!e?.banner&&a(w,{asChild:!e?.banner?.href,href:e?.banner?.href,children:i("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[a(j,{source:e?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),i("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[a(_,{size:2,html:e?.banner?.title||"Buy in Guide",className:y("font-bold text-white",{"text-black":e?.banner?.theme==="dark"})}),a(p,{html:e?.banner?.desc||"20.000mAh",className:y("text-sm font-bold text-white",{"text-black":e?.banner?.theme==="dark"})})]})]})}),t.products?.map((n,r)=>a(R,{seriesLabel:e?.label,product:n,isCollection:e?.isCollection},`seriesProductItem-${t?.label||""}-${s}-${r}`))]})]},`seriesItem-${t?.label||""}-${s}`))})]})]})});O.displayName="SidebarDropdown";const R=({product:l,isCollection:u,position:b,seriesLabel:h})=>{const{buildProps:f,onSeriesProductClick:g}=$();let c=u?l:f?.products?.find(e=>e.handle===l.handle);const m=c?.variants?.find(e=>e.sku===l.sku)||c?.variants?.[0],v=k(()=>`/products/${c?.handle}?variant=${B(m?.id)}`,[c?.handle,m?.id]),x=k(()=>c?.tags?.filter?.(e=>e?.startsWith?.("CLtag"))?.map?.(e=>e?.replace?.("CLtag:",""))?.slice?.(0,2),[c?.tags]);return m?.availableForSale?a(w,{href:v,onClick:e=>{e.preventDefault(),window.open(v,"_self"),g?.(c,b||0,h)},className:"no-underline hover:text-current",children:i("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",children:[a("div",{className:"shrink-0",children:a("img",{src:`${m?.image?.url||l?.images?.[0]?.url}&width=200`,loading:"lazy",alt:c?.title||l?.name,width:90,height:90,className:"size-[96px] object-contain"})}),i("div",{className:"relative",children:[a("div",{className:"flex gap-1",children:Array.isArray(x)&&x?.map((e,N)=>a(p,{as:"p",html:e,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]"},N))}),a(p,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:c?.title||l?.name}),l?.desc&&a(p,{as:"p",html:l?.desc,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null};export{R as SeriesProductItem,O as SidebarDropdown};
|
|
2
2
|
//# sourceMappingURL=SidebarDropdown.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeaderNavigation/SidebarDropdown.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn, atobID } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const SidebarDropdown = React.memo(\n ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n const { buildProps, onSidebarNavClick } = useNavContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n const initExpandedSubcategory = useCallback(() => {\n const subcategories = sidebarCategoriesMetadata?.subcategories\n if (!subcategories?.length) return\n\n const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n const expandedStates = subcategories.map((_: any, index: number) => ({\n index,\n open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n }))\n\n setExpandedSubcategory(expandedStates)\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n initExpandedSubcategory()\n }, [initExpandedSubcategory])\n\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n const matchSeriesMetadata = useMemo(() => {\n const subCategory =\n sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n const currentSeriesMetadata =\n seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n if (subCategory?.collections) {\n const category = buildProps?.categories?.[subCategory?.collections] || {}\n return {\n label: currentSeriesMetadata?.label,\n isCollection: true,\n banner: currentSeriesMetadata?.banner,\n primary: currentSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n if (subCategory?.subSubCategories) {\n const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n const currentActiveSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n ) || {}\n if (activeSubSubcategory?.collections) {\n const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n return {\n label: currentActiveSeriesMetadata?.label,\n isCollection: true,\n banner: currentActiveSeriesMetadata?.banner,\n primary: currentActiveSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n return currentActiveSeriesMetadata\n }\n } else {\n return currentSeriesMetadata\n }\n }\n }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata, buildProps])\n\n const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n }, [])\n\n const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n setExpandedSubcategory(prev =>\n prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n )\n setActiveSubSubcategoryIndex(subSubindex)\n }\n\n return (\n <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n <div\n className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n style={{\n userSelect: 'none',\n }}\n ref={sidebarDropdownRef}\n >\n <div\n className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n const hasSubSubCategory =\n Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n return (\n <div key={`subcategoryItem-${index}`}>\n <button\n className={cn(\n 'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n {\n 'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n }\n )}\n onClick={() => {\n handleSubcategoryOpen(index, subItem)\n onSidebarNavClick?.(subItem, index)\n }}\n aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n >\n <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n {hasSubSubCategory && (\n <DownArrow\n aria-hidden=\"true\"\n className={cn('size-4', {\n ['rotate-180']: isExpanded,\n })}\n />\n )}\n </button>\n {isExpanded && (\n <div className=\"flex flex-col\" role=\"menu\">\n {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n <button\n onClick={() => {\n handleSubSubcategoryOpen(index, subSubindex)\n onSidebarNavClick?.(subSubItem, subSubindex)\n }}\n key={`subSubItem-${index}-${subSubindex}`}\n className={cn(\n 'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n {\n 'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n }\n )}\n role=\"menuitem\"\n aria-label={subSubItem.label}\n >\n <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n </button>\n ))}\n </div>\n )}\n </div>\n )\n })}\n </div>\n {sidebarCategoriesMetadata && (\n <div className=\"flex\">\n <div className=\"flex flex-col 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=\"lg-desktop:text-base text-sm\"\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 iconClassName=\"size-4\"\n className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"flex-1 py-4\">\n {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n <div className=\"mb-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <Text\n html={matchSeriesMetadata?.label}\n className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.4]\"\n />\n {matchSeriesMetadata?.primary && !matchSeriesMetadata?.primary?.hide && (\n <Button\n as=\"a\"\n href={`${matchSeriesMetadata?.primary?.url}?ref=${matchSeriesMetadata?.label}_viewmore`}\n variant=\"link\"\n size=\"lg\"\n iconClassName=\"size-4\"\n className=\"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n )}\n </div>\n {sidebarCategoriesMetadata?.guide?.label && (\n <Link\n href={sidebarCategoriesMetadata?.guide?.url}\n className=\"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]\"\n >\n {sidebarCategoriesMetadata?.guide?.label}\n </Link>\n )}\n </div>\n )}\n <div\n className=\"flex h-[426px] flex-col gap-4 overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n <div key={`seriesItem-${seriesIndex}`}>\n {seriesItem.label && (\n <Text\n html={seriesItem.label}\n as=\"p\"\n className=\"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n <div className=\"grid grid-cols-3 gap-4\">\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 seriesLabel={matchSeriesMetadata?.label}\n key={`seriesProductItem-${index}`}\n product={product}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n </Container>\n )\n }\n)\n\nSidebarDropdown.displayName = 'SidebarDropdown'\n\n/**\n * \u7CFB\u5217\u4EA7\u54C1\u9879\u7EC4\u4EF6\n */\nexport const SeriesProductItem = ({\n product,\n isCollection,\n position,\n seriesLabel,\n}: {\n product: any\n isCollection?: boolean\n position?: number\n seriesLabel?: string\n}) => {\n const { buildProps, onSeriesProductClick } = useNavContext()\n let productData = isCollection\n ? product\n : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n const variant =\n productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n const listingLink = useMemo(() => {\n return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n }, [productData?.handle, variant?.id])\n\n const tags = useMemo(() => {\n return productData?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [productData?.tags])\n\n if (!variant?.availableForSale) return null\n\n return (\n <Link\n href={listingLink}\n onClick={e => {\n e.preventDefault()\n window.open(listingLink, '_self')\n onSeriesProductClick?.(productData, position || 0, seriesLabel)\n }}\n className=\"no-underline hover:text-current\"\n >\n <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500\">\n <div className=\"shrink-0\">\n <img\n src={`${variant?.image?.url || product?.images?.[0]?.url}`}\n loading=\"lazy\"\n alt={productData?.title || product?.name}\n width={90}\n height={90}\n className=\"size-[96px] object-contain\"\n />\n </div>\n <div className=\"relative\">\n <div className=\"flex gap-1\">\n {Array.isArray(tags) &&\n tags?.map((tag: string, index: number) => (\n <Text\n key={index}\n as=\"p\"\n html={tag}\n className=\"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]\"\n />\n ))}\n </div>\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productData?.title || product?.name}\n />\n {product?.desc && (\n <Text\n as=\"p\"\n html={product?.desc}\n className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </Link>\n )\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn, atobID } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const SidebarDropdown = React.memo(\n ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n const { buildProps, onSidebarNavClick } = useNavContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n const initExpandedSubcategory = useCallback(() => {\n const subcategories = sidebarCategoriesMetadata?.subcategories\n if (!subcategories?.length) return\n\n const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n const expandedStates = subcategories.map((_: any, index: number) => ({\n index,\n open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n }))\n\n setExpandedSubcategory(expandedStates)\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n initExpandedSubcategory()\n }, [initExpandedSubcategory])\n\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n const matchSeriesMetadata = useMemo(() => {\n const subCategory =\n sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n const currentSeriesMetadata =\n seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n if (subCategory?.collections) {\n const category = buildProps?.categories?.[subCategory?.collections] || {}\n return {\n label: currentSeriesMetadata?.label,\n isCollection: true,\n banner: currentSeriesMetadata?.banner,\n primary: currentSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n if (subCategory?.subSubCategories) {\n const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n const currentActiveSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n ) || {}\n if (activeSubSubcategory?.collections) {\n const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n return {\n label: currentActiveSeriesMetadata?.label,\n isCollection: true,\n banner: currentActiveSeriesMetadata?.banner,\n primary: currentActiveSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n return currentActiveSeriesMetadata\n }\n } else {\n return currentSeriesMetadata\n }\n }\n }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata, buildProps])\n\n const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n }, [])\n\n const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n setExpandedSubcategory(prev =>\n prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n )\n setActiveSubSubcategoryIndex(subSubindex)\n }\n\n return (\n <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n <div\n className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n style={{\n userSelect: 'none',\n }}\n ref={sidebarDropdownRef}\n >\n <div\n className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n const hasSubSubCategory =\n Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n return (\n <div key={`${subItem?.label || ''}subcategoryItem-${index}`}>\n <button\n className={cn(\n 'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n {\n 'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n }\n )}\n onClick={() => {\n handleSubcategoryOpen(index, subItem)\n onSidebarNavClick?.(subItem, index)\n }}\n aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n >\n <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n {hasSubSubCategory && (\n <DownArrow\n aria-hidden=\"true\"\n className={cn('size-4', {\n ['rotate-180']: isExpanded,\n })}\n />\n )}\n </button>\n {isExpanded && (\n <div className=\"flex flex-col\" role=\"menu\">\n {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n <button\n onClick={() => {\n handleSubSubcategoryOpen(index, subSubindex)\n onSidebarNavClick?.(subSubItem, subSubindex)\n }}\n key={`subSubItem-${index}-${subSubindex}`}\n className={cn(\n 'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n {\n 'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n }\n )}\n role=\"menuitem\"\n aria-label={subSubItem.label}\n >\n <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n </button>\n ))}\n </div>\n )}\n </div>\n )\n })}\n </div>\n {sidebarCategoriesMetadata && (\n <div className=\"flex\">\n <div className=\"flex flex-col 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=\"lg-desktop:text-base text-sm\"\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 iconClassName=\"size-4\"\n className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"flex-1 py-4\">\n {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n <div className=\"mb-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <Text\n html={matchSeriesMetadata?.label}\n className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.4]\"\n />\n {matchSeriesMetadata?.primary && !matchSeriesMetadata?.primary?.hide && (\n <Button\n as=\"a\"\n href={`${matchSeriesMetadata?.primary?.url}?ref=${matchSeriesMetadata?.label}_viewmore`}\n variant=\"link\"\n size=\"lg\"\n iconClassName=\"size-4\"\n className=\"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n )}\n </div>\n {sidebarCategoriesMetadata?.guide?.label && (\n <Link\n href={sidebarCategoriesMetadata?.guide?.url}\n className=\"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]\"\n >\n {sidebarCategoriesMetadata?.guide?.label}\n </Link>\n )}\n </div>\n )}\n <div\n className=\"flex h-[426px] flex-col gap-4 overflow-y-auto\"\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n >\n {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n <div key={`seriesItem-${seriesItem?.label || ''}-${seriesIndex}`}>\n {seriesItem.label && (\n <Text\n html={seriesItem.label}\n as=\"p\"\n className=\"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n <div className=\"grid grid-cols-3 gap-4\">\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 seriesLabel={matchSeriesMetadata?.label}\n key={`seriesProductItem-${seriesItem?.label || ''}-${seriesIndex}-${index}`}\n product={product}\n isCollection={matchSeriesMetadata?.isCollection}\n />\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n </Container>\n )\n }\n)\n\nSidebarDropdown.displayName = 'SidebarDropdown'\n\n/**\n * \u7CFB\u5217\u4EA7\u54C1\u9879\u7EC4\u4EF6\n */\nexport const SeriesProductItem = ({\n product,\n isCollection,\n position,\n seriesLabel,\n}: {\n product: any\n isCollection?: boolean\n position?: number\n seriesLabel?: string\n}) => {\n const { buildProps, onSeriesProductClick } = useNavContext()\n let productData = isCollection\n ? product\n : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n const variant =\n productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n const listingLink = useMemo(() => {\n return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n }, [productData?.handle, variant?.id])\n\n const tags = useMemo(() => {\n return productData?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [productData?.tags])\n\n if (!variant?.availableForSale) return null\n\n return (\n <Link\n href={listingLink}\n onClick={e => {\n e.preventDefault()\n window.open(listingLink, '_self')\n onSeriesProductClick?.(productData, position || 0, seriesLabel)\n }}\n className=\"no-underline hover:text-current\"\n >\n <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500\">\n <div className=\"shrink-0\">\n <img\n src={`${variant?.image?.url || product?.images?.[0]?.url}&width=200`}\n loading=\"lazy\"\n alt={productData?.title || product?.name}\n width={90}\n height={90}\n className=\"size-[96px] object-contain\"\n />\n </div>\n <div className=\"relative\">\n <div className=\"flex gap-1\">\n {Array.isArray(tags) &&\n tags?.map((tag: string, index: number) => (\n <Text\n key={index}\n as=\"p\"\n html={tag}\n className=\"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]\"\n />\n ))}\n </div>\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productData?.title || product?.name}\n />\n {product?.desc && (\n <Text\n as=\"p\"\n html={product?.desc}\n className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </Link>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useCallback", "useEffect", "useMemo", "useRef", "useState", "Button", "Container", "Text", "Link", "Heading", "Picture", "cn", "atobID", "DownArrow", "useNavContext", "SidebarDropdown", "sidebarCategoriesMetadata", "seriesMetadata", "buildProps", "onSidebarNavClick", "expandedSubcategory", "setExpandedSubcategory", "activeSubSubcategoryIndex", "setActiveSubSubcategoryIndex", "sidebarDropdownRef", "initExpandedSubcategory", "subcategories", "withSubSubCategoriesIndex", "item", "withoutSubSubCategoriesIndex", "expandedStates", "_", "index", "matchSeriesMetadata", "subCategory", "currentSeriesMetadata", "category", "activeSubSubcategory", "currentActiveSeriesMetadata", "handleSubcategoryOpen", "subcategoryItem", "prev", "i", "handleSubSubcategoryOpen", "subSubindex", "subItem", "hasSubSubCategory", "isExpanded", "subSubItem", "seriesItem", "seriesIndex", "product", "SeriesProductItem", "isCollection", "position", "seriesLabel", "onSeriesProductClick", "productData", "variant", "listingLink", "tags", "tag"]
|
|
7
7
|
}
|