@anker-in/headless-ui 1.1.70 → 1.1.73
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/MobileResourceSidebarMenu.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/MobileResourceSidebarMenu.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/MobileSidebarMenu.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/MobileSidebarMenu.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/cjs/biz-components/ProductNav/ProductNav.js +1 -1
- package/dist/cjs/biz-components/ProductNav/ProductNav.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/MobileResourceSidebarMenu.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/MobileResourceSidebarMenu.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/MobileSidebarMenu.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/MobileSidebarMenu.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/esm/biz-components/ProductNav/ProductNav.js +1 -1
- package/dist/esm/biz-components/ProductNav/ProductNav.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var C=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var _=(
|
|
1
|
+
"use strict";var C=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var _=(a,n)=>{for(var r in n)C(a,r,{get:n[r],enumerable:!0})},A=(a,n,r,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of B(n))!E.call(a,l)&&l!==r&&C(a,l,{get:()=>n[l],enumerable:!(i=z(n,l))||i.enumerable});return a};var I=a=>A(C({},"__esModule",{value:!0}),a);var F={};_(F,{MobileResourceSidebarMenu:()=>T});module.exports=I(F);var e=require("react/jsx-runtime"),s=require("react"),x=require("../../components/index.js"),m=require("./types.js"),k=require("./NavProvider.js"),b=require("./ResourceItem.js"),M=require("../AiuiProvider/index.js"),h=require("../../helpers/utils.js");const K=({label:a,onClick:n,active:r})=>(0,e.jsxs)("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:n,"aria-expanded":r,children:[(0,e.jsx)("div",{className:"flex items-center gap-1",children:(0,e.jsx)("span",{className:"text-sm font-bold leading-[1.4]",children:a})}),(0,e.jsx)("svg",{className:`size-5 ${r?"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:"M6.91009 4.41009C7.23553 4.08466 7.76304 4.08466 8.08848 4.41009L13.0885 9.41009C13.4139 9.73553 13.4139 10.263 13.0885 10.5885L8.08848 15.5885C7.76304 15.9139 7.23553 15.9139 6.91009 15.5885C6.58466 15.263 6.58466 14.7355 6.91009 14.4101L11.3209 9.99929L6.91009 5.58848C6.58466 5.26304 6.58466 4.73553 6.91009 4.41009Z",fill:"#080A0F"})})]}),T=({resourceCategoriesMetadata:a,resourcesMetadata:n})=>{const{currentMenu:r,setCurrentMenu:i,subSubCategory:l,setSubSubCategory:S,onSidebarNavClick:d,currentResourceMetadata:p,setCurrentResourceMetadata:f}=(0,k.useNavContext)(),{locale:y="us"}=(0,M.useAiuiContext)(),[w,L]=(0,s.useState)([]),[g,R]=(0,s.useState)([]);(0,s.useEffect)(()=>{a?.subcategories?.length&&L(a?.subcategories?.map((o,t)=>({index:t,open:!1})))},[a]),(0,s.useEffect)(()=>{l?.subSubCategories?.length&&R(l?.subSubCategories?.map((o,t)=>({index:t,open:t===0})))},[l]);const N=(0,s.useCallback)(o=>{S?.(o);const t=n?.find(c=>o?.label?.toLowerCase()===c.label?.toLowerCase())||{};i&&i(m.HeaderNavigationMenu.Third),f&&f(t)},[n,i,S,f]);return(0,s.useMemo)(()=>{switch(r){case m.HeaderNavigationMenu.Secondary:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col gap-8 p-4",children:[(0,e.jsx)("div",{children:a?.subcategories?.map((o,t)=>(0,e.jsx)("div",{children:(0,e.jsx)(K,{label:o?.label,active:w.find(c=>c.index===t)?.open,onClick:()=>{N(o),d?.(o,t)}})},`${o.label}-${t}`))}),(0,e.jsxs)("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[a?.primary&&(0,e.jsx)(x.Button,{as:"a",href:`${(0,h.getLocalizedPath)(a?.primary?.url,y)}?ref=${a?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:a?.primary?.label}),a?.secondary&&(0,e.jsx)(x.Button,{as:"a",href:(0,h.getLocalizedPath)(a?.secondary?.url,y),variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:a?.secondary?.label})]})]});case m.HeaderNavigationMenu.Third:return(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:l?.subSubCategories?l?.subSubCategories?.map((o,t)=>{const c=n?.find(u=>u.label.toLowerCase()===o?.label?.toLowerCase())||{};return(0,e.jsxs)("div",{children:[Reflect.ownKeys(o).length>0&&(0,e.jsx)(b.ResourceSubSubCategoryItemComp,{matchResourcesMetadata:c,onSubSubCategoryItemClick:()=>{d?.(o,t),R(u=>u.map((v,$)=>({...v,open:$===t?!v.open:v.open})))},expanded:!!g?.find(u=>u.index===t)?.open}),g?.find(u=>u.index===t)?.open&&(0,e.jsx)(b.ResourceSubSubCategoryContentComp,{matchResourcesMetadata:c})]},`${o.label}-${t}`)}):(0,e.jsxs)(e.Fragment,{children:[Reflect.ownKeys(p).length>0&&(0,e.jsx)(b.ResourceSubSubCategoryItemComp,{matchResourcesMetadata:p}),(0,e.jsx)(b.ResourceSubSubCategoryContentComp,{matchResourcesMetadata:p})]})});default:return null}},[r,a,n,w,g,l,p,N,d,y])};
|
|
2
2
|
//# sourceMappingURL=MobileResourceSidebarMenu.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeaderNavigation/MobileResourceSidebarMenu.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Button } from '../../components/index.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport { useNavContext } from './NavProvider.js'\nimport { ResourceSubSubCategoryItemComp, ResourceSubSubCategoryContentComp } from './ResourceItem.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\n\ninterface MenuItem {\n label: string\n href?: string\n onClick?: () => void\n active?: boolean\n icon?: string\n className?: string\n}\n\nconst MenuItem = ({ label, onClick, active }: MenuItem) => {\n return (\n <button\n className=\"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left\"\n onClick={onClick}\n aria-expanded={active}\n >\n <div className=\"flex items-center gap-1\">\n <span className=\"text-sm font-bold leading-[1.4]\">{label}</span>\n </div>\n <svg\n className={`size-5 ${active ? 'rotate-90' : ''}`}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M6.91009 4.41009C7.23553 4.08466 7.76304 4.08466 8.08848 4.41009L13.0885 9.41009C13.4139 9.73553 13.4139 10.263 13.0885 10.5885L8.08848 15.5885C7.76304 15.9139 7.23553 15.9139 6.91009 15.5885C6.58466 15.263 6.58466 14.7355 6.91009 14.4101L11.3209 9.99929L6.91009 5.58848C6.58466 5.26304 6.58466 4.73553 6.91009 4.41009Z\"\n fill=\"#080A0F\"\n />\n </svg>\n </button>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u8D44\u6E90\u4F4D\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param resourceCategoriesMetadata \u8D44\u6E90\u4F4D\u5206\u7C7B\u5143\u6570\u636E\n * @param resourcesMetadata \u8D44\u6E90\u4F4D\u5143\u6570\u636E\n */\nexport const MobileResourceSidebarMenu = ({\n resourceCategoriesMetadata,\n resourcesMetadata,\n}: {\n resourceCategoriesMetadata: any\n resourcesMetadata: any\n}) => {\n const {\n currentMenu,\n setCurrentMenu,\n subSubCategory,\n setSubSubCategory,\n onSidebarNavClick,\n currentResourceMetadata,\n setCurrentResourceMetadata,\n } = useNavContext()\n const { locale = 'us' } = useAiuiContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [expandedResourceCategories, setExpandedResourceCategories] = useState<{ index: number; open: boolean }[]>([])\n\n useEffect(() => {\n if (resourceCategoriesMetadata?.subcategories?.length) {\n setExpandedSubcategory(\n resourceCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n index,\n open: false,\n }))\n )\n }\n }, [resourceCategoriesMetadata])\n\n useEffect(() => {\n if (subSubCategory?.subSubCategories?.length) {\n setExpandedResourceCategories(\n subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n index,\n open: index === 0,\n }))\n )\n }\n }, [subSubCategory])\n\n const handleSubSubCategoryClick = useCallback(\n (item: any) => {\n setSubSubCategory?.(item)\n const curResourcesMetadata =\n resourcesMetadata?.find(\n (resourceItem: any) => item?.label?.toLowerCase() === resourceItem.label?.toLowerCase()\n ) || {}\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n setCurrentResourceMetadata && setCurrentResourceMetadata(curResourcesMetadata)\n },\n [resourcesMetadata, setCurrentMenu, setSubSubCategory, setCurrentResourceMetadata]\n )\n\n const MobileResourceSidebarMenuComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Secondary:\n return (\n // \u4E8C\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,+BAAAE,IAAA,eAAAC,EAAAH,GAmBI,IAAAI,EAAA,6BAnBJC,EAAiE,iBACjEC,EAAuB,qCACvBC,EAAqC,sBACrCC,EAA8B,4BAC9BC,EAAkF,6BAClFC,EAA+B,oCAC/BC,EAAiC,kCAWjC,MAAMC,EAAW,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,OAAAC,CAAO,OAEvC,QAAC,UACC,UAAU,iGACV,QAASD,EACT,gBAAeC,EAEf,oBAAC,OAAI,UAAU,0BACb,mBAAC,QAAK,UAAU,kCAAmC,SAAAF,EAAM,EAC3D,KACA,OAAC,OACC,UAAW,UAAUE,EAAS,YAAc,EAAE,GAC9C,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,cAAY,OAEZ,mBAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,GACF,EASSb,EAA4B,CAAC,CACxC,2BAAAc,EACA,kBAAAC,CACF,IAGM,CACJ,KAAM,CACJ,YAAAC,EACA,eAAAC,EACA,eAAAC,EACA,kBAAAC,EACA,kBAAAC,EACA,wBAAAC,EACA,2BAAAC,CACF,KAAI,iBAAc,EACZ,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CAACC,EAAqBC,CAAsB,KAAI,YAA6C,CAAC,CAAC,EAC/F,CAACC,EAA4BC,CAA6B,KAAI,YAA6C,CAAC,CAAC,KAEnH,aAAU,IAAM,CACVb,GAA4B,eAAe,QAC7CW,EACEX,GAA4B,eAAe,IAAI,CAACc,EAAQC,KAAmB,CACzE,MAAAA,EACA,KAAM,EACR,EAAE,CACJ,CAEJ,EAAG,CAACf,CAA0B,CAAC,KAE/B,aAAU,IAAM,CACVI,GAAgB,kBAAkB,QACpCS,EACET,GAAgB,kBAAkB,IAAI,CAACU,EAAQC,KAAmB,CAChE,MAAAA,EACA,KAAMA,IAAU,CAClB,EAAE,CACJ,CAEJ,EAAG,CAACX,CAAc,CAAC,EAEnB,MAAMY,KAA4B,eAC/BC,GAAc,CACbZ,IAAoBY,CAAI,EACxB,MAAMC,EACJjB,GAAmB,KAChBkB,GAAsBF,GAAM,OAAO,YAAY,IAAME,EAAa,OAAO,YAAY,CACxF,GAAK,CAAC,EACRhB,GAAkBA,EAAe,uBAAqB,KAAK,EAC3DK,GAA8BA,EAA2BU,CAAoB,CAC/E,EACA,CAACjB,EAAmBE,EAAgBE,EAAmBG,CAA0B,CACnF,EA0GA,SAxGsC,WAAQ,IAAM,CAClD,OAAQN,EAAa,CACnB,KAAK,uBAAqB,UACxB,SAEE,QAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Button } from '../../components/index.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport { useNavContext } from './NavProvider.js'\nimport { ResourceSubSubCategoryItemComp, ResourceSubSubCategoryContentComp } from './ResourceItem.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\n\ninterface MenuItem {\n label: string\n href?: string\n onClick?: () => void\n active?: boolean\n icon?: string\n className?: string\n}\n\nconst MenuItem = ({ label, onClick, active }: MenuItem) => {\n return (\n <button\n className=\"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left\"\n onClick={onClick}\n aria-expanded={active}\n >\n <div className=\"flex items-center gap-1\">\n <span className=\"text-sm font-bold leading-[1.4]\">{label}</span>\n </div>\n <svg\n className={`size-5 ${active ? 'rotate-90' : ''}`}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M6.91009 4.41009C7.23553 4.08466 7.76304 4.08466 8.08848 4.41009L13.0885 9.41009C13.4139 9.73553 13.4139 10.263 13.0885 10.5885L8.08848 15.5885C7.76304 15.9139 7.23553 15.9139 6.91009 15.5885C6.58466 15.263 6.58466 14.7355 6.91009 14.4101L11.3209 9.99929L6.91009 5.58848C6.58466 5.26304 6.58466 4.73553 6.91009 4.41009Z\"\n fill=\"#080A0F\"\n />\n </svg>\n </button>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u8D44\u6E90\u4F4D\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param resourceCategoriesMetadata \u8D44\u6E90\u4F4D\u5206\u7C7B\u5143\u6570\u636E\n * @param resourcesMetadata \u8D44\u6E90\u4F4D\u5143\u6570\u636E\n */\nexport const MobileResourceSidebarMenu = ({\n resourceCategoriesMetadata,\n resourcesMetadata,\n}: {\n resourceCategoriesMetadata: any\n resourcesMetadata: any\n}) => {\n const {\n currentMenu,\n setCurrentMenu,\n subSubCategory,\n setSubSubCategory,\n onSidebarNavClick,\n currentResourceMetadata,\n setCurrentResourceMetadata,\n } = useNavContext()\n const { locale = 'us' } = useAiuiContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [expandedResourceCategories, setExpandedResourceCategories] = useState<{ index: number; open: boolean }[]>([])\n\n useEffect(() => {\n if (resourceCategoriesMetadata?.subcategories?.length) {\n setExpandedSubcategory(\n resourceCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n index,\n open: false,\n }))\n )\n }\n }, [resourceCategoriesMetadata])\n\n useEffect(() => {\n if (subSubCategory?.subSubCategories?.length) {\n setExpandedResourceCategories(\n subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n index,\n open: index === 0,\n }))\n )\n }\n }, [subSubCategory])\n\n const handleSubSubCategoryClick = useCallback(\n (item: any) => {\n setSubSubCategory?.(item)\n const curResourcesMetadata =\n resourcesMetadata?.find(\n (resourceItem: any) => item?.label?.toLowerCase() === resourceItem.label?.toLowerCase()\n ) || {}\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n setCurrentResourceMetadata && setCurrentResourceMetadata(curResourcesMetadata)\n },\n [resourcesMetadata, setCurrentMenu, setSubSubCategory, setCurrentResourceMetadata]\n )\n\n const MobileResourceSidebarMenuComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Secondary:\n return (\n // \u4E8C\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 flex h-full flex-col gap-8 p-4\">\n <div>\n {resourceCategoriesMetadata?.subcategories?.map((item: any, index: number) => {\n return (\n <div key={`${item.label}-${index}`}>\n <MenuItem\n label={item?.label}\n active={expandedSubcategory.find(item => item.index === index)?.open}\n onClick={() => {\n handleSubSubCategoryClick(item)\n onSidebarNavClick?.(item, index)\n }}\n />\n </div>\n )\n })}\n </div>\n <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n {resourceCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={`${getLocalizedPath(resourceCategoriesMetadata?.primary?.url, locale)}?ref=${resourceCategoriesMetadata?.primary?.label}_shopall`}\n variant=\"primary\"\n size=\"lg\"\n className=\"tablet:w-auto w-full text-base\"\n >\n {resourceCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {resourceCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={getLocalizedPath(resourceCategoriesMetadata?.secondary?.url, locale)}\n variant=\"link\"\n size=\"lg\"\n className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\"\n >\n {resourceCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )\n case HeaderNavigationMenu.Third:\n return (\n // \u4E09\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {subSubCategory?.subSubCategories ? (\n subSubCategory?.subSubCategories?.map((subSubCategoryItem: any, index: number) => {\n const curResourcesMetadata =\n resourcesMetadata?.find(\n (item: any) => item.label.toLowerCase() === subSubCategoryItem?.label?.toLowerCase()\n ) || {}\n return (\n <div key={`${subSubCategoryItem.label}-${index}`}>\n {Reflect.ownKeys(subSubCategoryItem).length > 0 && (\n <ResourceSubSubCategoryItemComp\n matchResourcesMetadata={curResourcesMetadata}\n onSubSubCategoryItemClick={() => {\n onSidebarNavClick?.(subSubCategoryItem, index)\n setExpandedResourceCategories(prev =>\n prev.map((item, i) => ({ ...item, open: i === index ? !item.open : item.open }))\n )\n }}\n expanded={!!expandedResourceCategories?.find(item => item.index === index)?.open}\n />\n )}\n {expandedResourceCategories?.find(item => item.index === index)?.open && (\n <ResourceSubSubCategoryContentComp matchResourcesMetadata={curResourcesMetadata} />\n )}\n </div>\n )\n })\n ) : (\n <>\n {Reflect.ownKeys(currentResourceMetadata).length > 0 && (\n <ResourceSubSubCategoryItemComp matchResourcesMetadata={currentResourceMetadata} />\n )}\n <ResourceSubSubCategoryContentComp matchResourcesMetadata={currentResourceMetadata} />\n </>\n )}\n </div>\n )\n default:\n return null\n }\n }, [\n currentMenu,\n resourceCategoriesMetadata,\n resourcesMetadata,\n expandedSubcategory,\n expandedResourceCategories,\n subSubCategory,\n currentResourceMetadata,\n handleSubSubCategoryClick,\n onSidebarNavClick,\n locale,\n ])\n\n return MobileResourceSidebarMenuComp\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MobileResourceSidebarMenu_exports", "__export", "MobileResourceSidebarMenu", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_types", "import_NavProvider", "import_ResourceItem", "import_AiuiProvider", "import_utils", "MenuItem", "label", "onClick", "active", "resourceCategoriesMetadata", "resourcesMetadata", "currentMenu", "setCurrentMenu", "subSubCategory", "setSubSubCategory", "onSidebarNavClick", "currentResourceMetadata", "setCurrentResourceMetadata", "locale", "expandedSubcategory", "setExpandedSubcategory", "expandedResourceCategories", "setExpandedResourceCategories", "_", "index", "handleSubSubCategoryClick", "item", "curResourcesMetadata", "resourceItem", "subSubCategoryItem", "prev", "i"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var w=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var D=(a,n)=>{for(var m in n)w(a,m,{get:n[m],enumerable:!0})},K=(a,n,m,
|
|
1
|
+
"use strict";var w=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var D=(a,n)=>{for(var m in n)w(a,m,{get:n[m],enumerable:!0})},K=(a,n,m,d)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of R(n))!T.call(a,o)&&o!==m&&w(a,o,{get:()=>n[o],enumerable:!(d=E(n,o))||d.enumerable});return a};var P=a=>K(w({},"__esModule",{value:!0}),a);var F={};D(F,{MobileSidebarMenu:()=>A});module.exports=P(F);var e=require("react/jsx-runtime"),i=require("react"),u=require("../../components/index.js"),v=require("./types.js"),z=require("./NavProvider.js"),b=require("./MobileMenuComponents.js"),B=require("../AiuiProvider/index.js"),f=require("../../helpers/utils.js");const A=({sidebarCategoriesMetadata:a,seriesMetadata:n})=>{const{currentMenu:m,setCurrentMenu:d,subSubCategory:o,setSubSubCategory:N,setCurrentSeriesMetadata:g,currentSeriesMetadata:p,buildProps:S,onSidebarNavClick:h}=(0,z.useNavContext)(),{locale:y="us"}=(0,B.useAiuiContext)(),[k,M]=(0,i.useState)([]),[x,L]=(0,i.useState)([]);(0,i.useEffect)(()=>{a?.subcategories?.length&&M(a?.subcategories?.map((l,r)=>({index:r,open:!1})))},[a]),(0,i.useEffect)(()=>{o?.subSubCategories?.length&&L(o?.subSubCategories?.map((l,r)=>({index:r,open:r===0})))},[o]);const $=(0,i.useCallback)((l,r)=>{d&&d(v.HeaderNavigationMenu.Third),N?.(l);const s=n?.find(t=>r!==void 0?l?.subSubCategories?.[r]?.label?.toLowerCase()===t.label?.toLowerCase():l?.label?.toLowerCase()===t.label?.toLowerCase())||{};if(l?.collections){const t=S?.categories?.[l?.collections]||{};g?.({label:s?.label,isCollection:!0,banner:s?.banner,primary:s?.primary,series:[{products:t?.products}]})}else g?.(s)},[n,d,N,g,S?.categories]);return(0,i.useMemo)(()=>{switch(m){case v.HeaderNavigationMenu.Secondary:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col gap-8 p-4",children:[(0,e.jsxs)("div",{children:[a?.subcategories?.map((l,r)=>(0,e.jsx)("div",{children:(0,e.jsx)(b.MenuItem,{label:l?.label,active:k.find(s=>s.index===r)?.open,onClick:()=>{$(l),h?.(l,r)}})},`${l.label}-${r}`)),a?.guide?.label&&(0,e.jsx)(u.Link,{href:(0,f.getLocalizedPath)(a?.guide?.url,y),children:(0,e.jsx)("div",{className:"mt-4",children:(0,e.jsx)(u.Text,{html:a?.guide?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]}),(0,e.jsxs)("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[a?.primary&&(0,e.jsx)(u.Button,{as:"a",href:`${(0,f.getLocalizedPath)(a?.primary?.url,y)}?ref=${a?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:a?.primary?.label}),a?.secondary&&(0,e.jsx)(u.Button,{as:"a",href:(0,f.getLocalizedPath)(a?.secondary?.url,y),variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:a?.secondary?.label})]})]});case v.HeaderNavigationMenu.Third:return(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:o?.subSubCategories?o?.subSubCategories?.map((l,r)=>{const s=n?.find(c=>c.label.toLowerCase()===l?.label?.toLowerCase())||{};let t={};if(l?.collections){const c=S?.categories?.[l?.collections]||{};t={label:s?.label,isCollection:!0,banner:s?.banner,primary:s?.primary,series:[{products:c?.products}]}}else t=s;return(0,e.jsxs)("div",{children:[Reflect.ownKeys(l).length>0&&(0,e.jsx)(b.SubSubCategoryItemComp,{matchSeriesMetadata:t,onSubSubCategoryItemClick:()=>{h?.(l,r),L(c=>c.map((C,_)=>({...C,open:_===r?!C.open:C.open})))},expanded:!!x?.find(c=>c.index===r)?.open}),x?.find(c=>c.index===r)?.open&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(b.SubSubCategoryContentComp,{matchSeriesMetadata:t}),t?.primary&&(0,e.jsx)("div",{className:"my-4 text-center",children:(0,e.jsx)(u.Button,{as:"a",href:(0,f.getLocalizedPath)(t?.primary?.url,y),className:"text-base leading-[1.2] no-underline",variant:"secondary",size:"base",children:t?.primary?.label})})]})]},`${l.label}-${r}`)}):(0,e.jsxs)(e.Fragment,{children:[Reflect.ownKeys(p).length>0&&(0,e.jsx)(b.SubSubCategoryItemComp,{matchSeriesMetadata:p}),(0,e.jsx)(b.SubSubCategoryContentComp,{matchSeriesMetadata:p}),p?.primary&&(0,e.jsx)("div",{className:"my-4 text-center ",children:(0,e.jsx)(u.Button,{as:"a",href:`${(0,f.getLocalizedPath)(p?.primary?.url,y)}?ref=${p?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base leading-[1.2] no-underline",children:p?.primary?.label})})]})});default:return null}},[m,a,n,k,x,o,p,S?.categories,$,h,y])};
|
|
2
2
|
//# sourceMappingURL=MobileSidebarMenu.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeaderNavigation/MobileSidebarMenu.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Button, Text, Link } from '../../components/index.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport { useNavContext } from './NavProvider.js'\nimport { MenuItem, SubSubCategoryItemComp, SubSubCategoryContentComp } from './MobileMenuComponents.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\n\n/**\n * \u79FB\u52A8\u7AEF\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param sidebarCategoriesMetadata \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n * @param seriesMetadata \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n */\nexport const MobileSidebarMenu = ({\n sidebarCategoriesMetadata,\n seriesMetadata,\n}: {\n sidebarCategoriesMetadata: any\n seriesMetadata: any\n}) => {\n const {\n currentMenu,\n setCurrentMenu,\n subSubCategory,\n setSubSubCategory,\n setCurrentSeriesMetadata,\n currentSeriesMetadata,\n buildProps,\n onSidebarNavClick,\n } = useNavContext()\n const { locale = 'us' } = useAiuiContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [expandedSeriesCategories, setExpandedSeriesCategories] = useState<{ index: number; open: boolean }[]>([])\n\n useEffect(() => {\n if (sidebarCategoriesMetadata?.subcategories?.length) {\n setExpandedSubcategory(\n sidebarCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n index,\n open: false,\n }))\n )\n }\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n if (subSubCategory?.subSubCategories?.length) {\n setExpandedSeriesCategories(\n subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n index,\n open: index === 0,\n }))\n )\n }\n }, [subSubCategory])\n\n const handleSubSubCategoryClick = useCallback(\n (item: any, subIndex?: number) => {\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n setSubSubCategory?.(item)\n const curSeriesMetadata =\n seriesMetadata?.find((seriesItem: any) =>\n subIndex !== undefined\n ? item?.subSubCategories?.[subIndex]?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n : item?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n ) || {}\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n if (item?.collections) {\n const category = buildProps?.categories?.[item?.collections] || {}\n setCurrentSeriesMetadata?.({\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n })\n } else {\n setCurrentSeriesMetadata?.(curSeriesMetadata)\n }\n },\n [seriesMetadata, setCurrentMenu, setSubSubCategory, setCurrentSeriesMetadata, buildProps?.categories]\n )\n\n const MobileSidebarMenuComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Secondary:\n return (\n // \u4E8C\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4\">\n <div>\n {sidebarCategoriesMetadata?.subcategories?.map((item: any, index: number) => {\n return (\n <div key={`${item.label}-${index}`}>\n <MenuItem\n label={item?.label}\n active={expandedSubcategory.find(item => item.index === index)?.open}\n onClick={() => {\n handleSubSubCategoryClick(item)\n onSidebarNavClick?.(item, index)\n }}\n />\n </div>\n )\n })}\n {sidebarCategoriesMetadata?.guide?.label && (\n <Link href={getLocalizedPath(sidebarCategoriesMetadata?.guide?.url, locale)}>\n <div className=\"mt-4\">\n <Text\n html={sidebarCategoriesMetadata?.guide?.label}\n className=\"text-sm font-bold leading-[1.2] text-[#6D6D6F]\"\n />\n </div>\n </Link>\n )}\n </div>\n <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n {sidebarCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={`${getLocalizedPath(sidebarCategoriesMetadata?.primary?.url, locale)}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n variant=\"primary\"\n size=\"lg\"\n className=\"tablet:w-auto w-full text-base\"\n >\n {sidebarCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {sidebarCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={getLocalizedPath(sidebarCategoriesMetadata?.secondary?.url, locale)}\n variant=\"link\"\n size=\"lg\"\n className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )\n case HeaderNavigationMenu.Third:\n return (\n // \u4E09\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {subSubCategory?.subSubCategories ? (\n subSubCategory?.subSubCategories?.map((subSubCategoryItem: any, index: number) => {\n const curSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item.label.toLowerCase() === subSubCategoryItem?.label?.toLowerCase()\n ) || {}\n let matchSeriesMetadata = {} as any\n if (subSubCategoryItem?.collections) {\n const category = buildProps?.categories?.[subSubCategoryItem?.collections] || {}\n matchSeriesMetadata = {\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n matchSeriesMetadata = curSeriesMetadata\n }\n return (\n <div key={`${subSubCategoryItem.label}-${index}`}>\n {Reflect.ownKeys(subSubCategoryItem).length > 0 && (\n <SubSubCategoryItemComp\n matchSeriesMetadata={matchSeriesMetadata}\n onSubSubCategoryItemClick={() => {\n onSidebarNavClick?.(subSubCategoryItem, index)\n setExpandedSeriesCategories(prev =>\n prev.map((item, i) => ({ ...item, open: i === index ? !item.open : item.open }))\n )\n }}\n expanded={!!expandedSeriesCategories?.find(item => item.index === index)?.open}\n />\n )}\n {expandedSeriesCategories?.find(item => item.index === index)?.open && (\n <>\n <SubSubCategoryContentComp matchSeriesMetadata={matchSeriesMetadata} />\n {matchSeriesMetadata?.primary && (\n <div className=\"my-4 text-center\">\n <Button\n as=\"a\"\n href={getLocalizedPath(matchSeriesMetadata?.primary?.url, locale)}\n className=\"text-base leading-[1.2] no-underline\"\n variant=\"secondary\"\n size=\"base\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n </div>\n )\n })\n ) : (\n <>\n {Reflect.ownKeys(currentSeriesMetadata).length > 0 && (\n <SubSubCategoryItemComp matchSeriesMetadata={currentSeriesMetadata} />\n )}\n <SubSubCategoryContentComp matchSeriesMetadata={currentSeriesMetadata} />\n {currentSeriesMetadata?.primary && (\n <div className=\"my-4 text-center \">\n <Button\n as=\"a\"\n href={`${getLocalizedPath(currentSeriesMetadata?.primary?.url, locale)}?ref=${currentSeriesMetadata?.label}_viewmore`}\n variant=\"secondary\"\n size=\"base\"\n className=\"text-base leading-[1.2] no-underline\"\n >\n {currentSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n </div>\n )\n default:\n return null\n }\n }, [\n currentMenu,\n sidebarCategoriesMetadata,\n seriesMetadata,\n expandedSubcategory,\n expandedSeriesCategories,\n subSubCategory,\n currentSeriesMetadata,\n buildProps?.categories,\n handleSubSubCategoryClick,\n onSidebarNavClick,\n locale,\n ])\n\n return MobileSidebarMenuComp\n}\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,IAAA,eAAAC,EAAAH,GA6FY,IAAAI,EAAA,6BA7FZC,EAAiE,iBACjEC,EAAmC,qCACnCC,EAAqC,sBACrCC,EAA8B,4BAC9BC,EAA4E,qCAC5EC,EAA+B,oCAC/BC,EAAiC,kCAO1B,MAAMT,EAAoB,CAAC,CAChC,0BAAAU,EACA,eAAAC,CACF,IAGM,CACJ,KAAM,CACJ,YAAAC,EACA,eAAAC,EACA,eAAAC,EACA,kBAAAC,EACA,yBAAAC,EACA,sBAAAC,EACA,WAAAC,EACA,kBAAAC,CACF,KAAI,iBAAc,EACZ,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CAACC,EAAqBC,CAAsB,KAAI,YAA6C,CAAC,CAAC,EAC/F,CAACC,EAA0BC,CAA2B,KAAI,YAA6C,CAAC,CAAC,KAE/G,aAAU,IAAM,CACVd,GAA2B,eAAe,QAC5CY,EACEZ,GAA2B,eAAe,IAAI,CAACe,EAAQC,KAAmB,CACxE,MAAAA,EACA,KAAM,EACR,EAAE,CACJ,CAEJ,EAAG,CAAChB,CAAyB,CAAC,KAE9B,aAAU,IAAM,CACVI,GAAgB,kBAAkB,QACpCU,EACEV,GAAgB,kBAAkB,IAAI,CAACW,EAAQC,KAAmB,CAChE,MAAAA,EACA,KAAMA,IAAU,CAClB,EAAE,CACJ,CAEJ,EAAG,CAACZ,CAAc,CAAC,EAEnB,MAAMa,KAA4B,eAChC,CAACC,EAAWC,IAAsB,CAChChB,GAAkBA,EAAe,uBAAqB,KAAK,EAC3DE,IAAoBa,CAAI,EACxB,MAAME,EACJnB,GAAgB,KAAMoB,GACpBF,IAAa,OACTD,GAAM,mBAAmBC,CAAQ,GAAG,OAAO,YAAY,IAAME,EAAW,OAAO,YAAY,EAC3FH,GAAM,OAAO,YAAY,IAAMG,EAAW,OAAO,YAAY,CACnE,GAAK,CAAC,EAER,GAAIH,GAAM,YAAa,CACrB,MAAMI,EAAWd,GAAY,aAAaU,GAAM,WAAW,GAAK,CAAC,EACjEZ,IAA2B,CACzB,MAAOc,GAAmB,MAC1B,aAAc,GACd,OAAQA,GAAmB,OAC3B,QAASA,GAAmB,QAC5B,OAAQ,CACN,CACE,SAAUE,GAAU,QACtB,CACF,CACF,CAAC,CACH,MACEhB,IAA2Bc,CAAiB,CAEhD,EACA,CAACnB,EAAgBE,EAAgBE,EAAmBC,EAA0BE,GAAY,UAAU,CACtG,EAkKA,SAhK8B,WAAQ,IAAM,CAC1C,OAAQN,EAAa,CACnB,KAAK,uBAAqB,UACxB,SAEE,QAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Button, Text, Link } from '../../components/index.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport { useNavContext } from './NavProvider.js'\nimport { MenuItem, SubSubCategoryItemComp, SubSubCategoryContentComp } from './MobileMenuComponents.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\n\n/**\n * \u79FB\u52A8\u7AEF\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param sidebarCategoriesMetadata \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n * @param seriesMetadata \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n */\nexport const MobileSidebarMenu = ({\n sidebarCategoriesMetadata,\n seriesMetadata,\n}: {\n sidebarCategoriesMetadata: any\n seriesMetadata: any\n}) => {\n const {\n currentMenu,\n setCurrentMenu,\n subSubCategory,\n setSubSubCategory,\n setCurrentSeriesMetadata,\n currentSeriesMetadata,\n buildProps,\n onSidebarNavClick,\n } = useNavContext()\n const { locale = 'us' } = useAiuiContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [expandedSeriesCategories, setExpandedSeriesCategories] = useState<{ index: number; open: boolean }[]>([])\n\n useEffect(() => {\n if (sidebarCategoriesMetadata?.subcategories?.length) {\n setExpandedSubcategory(\n sidebarCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n index,\n open: false,\n }))\n )\n }\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n if (subSubCategory?.subSubCategories?.length) {\n setExpandedSeriesCategories(\n subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n index,\n open: index === 0,\n }))\n )\n }\n }, [subSubCategory])\n\n const handleSubSubCategoryClick = useCallback(\n (item: any, subIndex?: number) => {\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n setSubSubCategory?.(item)\n const curSeriesMetadata =\n seriesMetadata?.find((seriesItem: any) =>\n subIndex !== undefined\n ? item?.subSubCategories?.[subIndex]?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n : item?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n ) || {}\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n if (item?.collections) {\n const category = buildProps?.categories?.[item?.collections] || {}\n setCurrentSeriesMetadata?.({\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n })\n } else {\n setCurrentSeriesMetadata?.(curSeriesMetadata)\n }\n },\n [seriesMetadata, setCurrentMenu, setSubSubCategory, setCurrentSeriesMetadata, buildProps?.categories]\n )\n\n const MobileSidebarMenuComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Secondary:\n return (\n // \u4E8C\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 flex h-full flex-col gap-8 p-4\">\n <div>\n {sidebarCategoriesMetadata?.subcategories?.map((item: any, index: number) => {\n return (\n <div key={`${item.label}-${index}`}>\n <MenuItem\n label={item?.label}\n active={expandedSubcategory.find(item => item.index === index)?.open}\n onClick={() => {\n handleSubSubCategoryClick(item)\n onSidebarNavClick?.(item, index)\n }}\n />\n </div>\n )\n })}\n {sidebarCategoriesMetadata?.guide?.label && (\n <Link href={getLocalizedPath(sidebarCategoriesMetadata?.guide?.url, locale)}>\n <div className=\"mt-4\">\n <Text\n html={sidebarCategoriesMetadata?.guide?.label}\n className=\"text-sm font-bold leading-[1.2] text-[#6D6D6F]\"\n />\n </div>\n </Link>\n )}\n </div>\n <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n {sidebarCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={`${getLocalizedPath(sidebarCategoriesMetadata?.primary?.url, locale)}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n variant=\"primary\"\n size=\"lg\"\n className=\"tablet:w-auto w-full text-base\"\n >\n {sidebarCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {sidebarCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={getLocalizedPath(sidebarCategoriesMetadata?.secondary?.url, locale)}\n variant=\"link\"\n size=\"lg\"\n className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )\n case HeaderNavigationMenu.Third:\n return (\n // \u4E09\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {subSubCategory?.subSubCategories ? (\n subSubCategory?.subSubCategories?.map((subSubCategoryItem: any, index: number) => {\n const curSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item.label.toLowerCase() === subSubCategoryItem?.label?.toLowerCase()\n ) || {}\n let matchSeriesMetadata = {} as any\n if (subSubCategoryItem?.collections) {\n const category = buildProps?.categories?.[subSubCategoryItem?.collections] || {}\n matchSeriesMetadata = {\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n matchSeriesMetadata = curSeriesMetadata\n }\n return (\n <div key={`${subSubCategoryItem.label}-${index}`}>\n {Reflect.ownKeys(subSubCategoryItem).length > 0 && (\n <SubSubCategoryItemComp\n matchSeriesMetadata={matchSeriesMetadata}\n onSubSubCategoryItemClick={() => {\n onSidebarNavClick?.(subSubCategoryItem, index)\n setExpandedSeriesCategories(prev =>\n prev.map((item, i) => ({ ...item, open: i === index ? !item.open : item.open }))\n )\n }}\n expanded={!!expandedSeriesCategories?.find(item => item.index === index)?.open}\n />\n )}\n {expandedSeriesCategories?.find(item => item.index === index)?.open && (\n <>\n <SubSubCategoryContentComp matchSeriesMetadata={matchSeriesMetadata} />\n {matchSeriesMetadata?.primary && (\n <div className=\"my-4 text-center\">\n <Button\n as=\"a\"\n href={getLocalizedPath(matchSeriesMetadata?.primary?.url, locale)}\n className=\"text-base leading-[1.2] no-underline\"\n variant=\"secondary\"\n size=\"base\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n </div>\n )\n })\n ) : (\n <>\n {Reflect.ownKeys(currentSeriesMetadata).length > 0 && (\n <SubSubCategoryItemComp matchSeriesMetadata={currentSeriesMetadata} />\n )}\n <SubSubCategoryContentComp matchSeriesMetadata={currentSeriesMetadata} />\n {currentSeriesMetadata?.primary && (\n <div className=\"my-4 text-center \">\n <Button\n as=\"a\"\n href={`${getLocalizedPath(currentSeriesMetadata?.primary?.url, locale)}?ref=${currentSeriesMetadata?.label}_viewmore`}\n variant=\"secondary\"\n size=\"base\"\n className=\"text-base leading-[1.2] no-underline\"\n >\n {currentSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n </div>\n )\n default:\n return null\n }\n }, [\n currentMenu,\n sidebarCategoriesMetadata,\n seriesMetadata,\n expandedSubcategory,\n expandedSeriesCategories,\n subSubCategory,\n currentSeriesMetadata,\n buildProps?.categories,\n handleSubSubCategoryClick,\n onSidebarNavClick,\n locale,\n ])\n\n return MobileSidebarMenuComp\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MobileSidebarMenu_exports", "__export", "MobileSidebarMenu", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_types", "import_NavProvider", "import_MobileMenuComponents", "import_AiuiProvider", "import_utils", "sidebarCategoriesMetadata", "seriesMetadata", "currentMenu", "setCurrentMenu", "subSubCategory", "setSubSubCategory", "setCurrentSeriesMetadata", "currentSeriesMetadata", "buildProps", "onSidebarNavClick", "locale", "expandedSubcategory", "setExpandedSubcategory", "expandedSeriesCategories", "setExpandedSeriesCategories", "_", "index", "handleSubSubCategoryClick", "item", "subIndex", "curSeriesMetadata", "seriesItem", "category", "subSubCategoryItem", "matchSeriesMetadata", "prev", "i"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var S=Object.create;var p=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var Y=(e,t)=>{for(var i in t)p(e,i,{get:t[i],enumerable:!0})},
|
|
1
|
+
"use strict";"use client";var S=Object.create;var p=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var Y=(e,t)=>{for(var i in t)p(e,i,{get:t[i],enumerable:!0})},b=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of _(t))!q.call(e,s)&&s!==i&&p(e,s,{get:()=>t[s],enumerable:!(a=U(t,s))||a.enumerable});return e};var g=(e,t,i)=>(i=e!=null?S(j(e)):{},b(t||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),Z=e=>b(p({},"__esModule",{value:!0}),e);var G={};Y(G,{default:()=>F});module.exports=Z(G);var l=require("react/jsx-runtime"),o=require("react"),y=require("../../helpers/utils.js"),M=require("../../shared/Styles.js"),r=require("../../components/index.js"),k=g(require("../Title/index.js")),P=g(require("../SwiperBox/index.js")),N=require("../../components/container.js"),T=require("../VideoModal/index.js"),L=require("@payloadcms/richtext-lexical/html"),I=require("../../hooks/useExposure.js"),V=require("../../shared/trackUrlRef.js");const m="video",d="media_player_multi",A=({data:e,configuration:t})=>{const i=(0,o.useRef)(null);return(0,I.useExposure)(i,{componentType:m,componentName:d,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.description}),(0,l.jsxs)("div",{ref:i,className:(0,y.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(r.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,l.jsx)(r.Picture,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(t?.index||0,e)},className:"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)(r.Link,{asChild:!e?.href,href:(0,V.trackUrlRef)(e?.href,`${m}_${d}`),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,l.jsx)(r.Text,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},w=(0,o.forwardRef)(({data:{items:e=[],shape:t="square",title:i,containerProps:a},className:s="",key:B,onVideoPlayBtnClick:C,...$},z)=>{const[f,c]=(0,o.useState)(!1),[D,u]=(0,o.useState)(""),[E,x]=(0,o.useState)(""),h=typeof i=="string"?i:i&&(0,L.convertLexicalToHTML)({data:i}),H=(0,o.useRef)(null),v=e.length===2;return(0,l.jsxs)("div",{...$,ref:H,className:s,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(N.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:s,ref:z,children:[i&&(0,l.jsx)(k.default,{className:"mediaplayermulti-title",data:{title:h||""}}),(0,l.jsx)(P.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+B,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:(R,n)=>{c(!0),n?.isYouTube?(x(n?.youtubeId||""),u("")):(u(n?.video?.url||""),x("")),C?.(R)},title:h}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:v?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:v?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),f&&(0,l.jsx)(T.VideoModal,{visible:f,youTubeId:E,videoUrl:D,onCloseModal:()=>c(!1)})]})});w.displayName="MediaPlayerMulti";var F=(0,M.withLayout)(w);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.description,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n asChild={!data?.href}\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Text\n html={data.quote}\n weight=\"bold\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n />\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n {\n data: { items = [], shape = 'square', title, containerProps },\n className = '',\n key,\n onVideoPlayBtnClick,\n ...rest\n },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length === 2\n\n return (\n <div {...rest} ref={wrapperRef} className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: {\n shape,\n onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.description,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n asChild={!data?.href}\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Text\n html={data.quote}\n weight=\"bold\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n />\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n {\n data: { items = [], shape = 'square', title, containerProps },\n className = '',\n key,\n onVideoPlayBtnClick,\n ...rest\n },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length === 2\n\n return (\n <div {...rest} ref={wrapperRef} className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: {\n shape,\n onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId(data?.youtubeId || '')\n setVideoUrl('')\n } else {\n setVideoUrl(data?.video?.url || '')\n setYouTubeId('')\n }\n onVideoPlayBtnClick?.(_)\n },\n title: title_html,\n },\n }}\n Slide={MediaPlayerItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n )\n }\n)\n\nMediaPlayerMulti.displayName = 'MediaPlayerMulti'\nexport default withLayout(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_container", "import_VideoModal", "import_html", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "ref", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "rest", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "itemsLength", "Title", "SwiperBox", "_"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var Y=Object.create;var T=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var _=(n,a)=>{for(var l in a)T(n,l,{get:a[l],enumerable:!0})},M=(n,a,l,x)=>{if(a&&typeof a=="object"||typeof a=="function")for(let c of G(a))!V.call(n,c)&&c!==l&&T(n,c,{get:()=>a[c],enumerable:!(x=F(a,c))||x.enumerable});return n};var $=(n,a,l)=>(l=n!=null?Y(I(n)):{},M(a||!n||!n.__esModule?T(l,"default",{value:n,enumerable:!0}):l,n)),q=n=>M(T({},"__esModule",{value:!0}),n);var Q={};_(Q,{default:()=>O});module.exports=q(Q);var e=require("react/jsx-runtime"),r=require("react"),E=require("../../helpers/utils.js"),D=require("../../shared/Styles.js"),m=require("../../components/index.js"),H=require("../../hooks/useExposure.js"),P=$(require("@radix-ui/react-popover"));const W="navigation",J="product_nav",K=n=>(0,e.jsx)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...n,children:(0,e.jsx)("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),C=(0,r.forwardRef)(({className:n="",data:a,id:l,onAnchorClick:x,scrollOffsetExtra:c=0},B)=>{const{tabLinks:k=[],anchorList:p=[],textLink:u,buyBtn:f,theme:A="light"}=a||{},[z,b]=(0,r.useState)(""),g=(0,r.useRef)(null),y=(0,r.useRef)(!1),h=(0,r.useRef)(""),w=(0,r.useRef)(null),S=(0,r.useRef)(new Map);(0,r.useImperativeHandle)(B,()=>g.current),(0,H.useExposure)(g,{componentType:W,componentName:J}),(0,r.useEffect)(()=>{if(p.length===0)return;const t=setTimeout(()=>{const o=window.scrollY;window.scrollTo({top:0,behavior:"instant"}),requestAnimationFrame(()=>{const i=new Map;p.forEach(s=>{const d=document.getElementById(s.id);if(d){const N=d.getBoundingClientRect();i.set(s.id,N.top+window.scrollY)}}),S.current=i,window.scrollTo({top:o,behavior:"instant"})})},100);return()=>clearTimeout(t)},[p]),(0,r.useEffect)(()=>{if(p.length===0)return;const t=()=>{if(y.current){w.current&&clearTimeout(w.current),w.current=setTimeout(()=>{y.current=!1,h.current&&(b(h.current),h.current="")},100);return}const i=g.current?.offsetHeight||0,s=window.scrollY+i+c+10;let d="";const N=S.current;for(let v=p.length-1;v>=0;v--){const R=p[v],L=N.get(R.id);if(L!==void 0&&s>=L){d=R.id;break}}if(!d&&p.length>0){const v=N.get(p[0].id);v!==void 0&&s<v&&(d="")}b(d)},o=setTimeout(()=>{t()},200);return window.addEventListener("scroll",t,{passive:!0}),()=>{clearTimeout(o),window.removeEventListener("scroll",t),w.current&&clearTimeout(w.current)}},[p,c]),(0,r.useEffect)(()=>{const t=document.querySelectorAll(".header"),o=[];return t.forEach(i=>{const s=i;o.push({element:s,originalPosition:s.style.position||getComputedStyle(s).position}),s.style.position="relative"}),()=>{o.forEach(({element:i,originalPosition:s})=>{i.style.position=s==="static"?"":s})}},[]);const j=(t,o)=>{t.preventDefault();const i=S.current.get(o);if(i===void 0){console.warn(`Cached position for "${o}" not found`);return}b(o),h.current=o,y.current=!0;const s=g.current?.offsetHeight||0,d=i-s-c;window.scrollTo({top:d,behavior:"smooth"}),window.history.pushState(null,"",`#${o}`)};return(0,e.jsxs)("div",{id:l,ref:g,className:(0,E.cn)("product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0",{"aiui-dark":A==="dark"},n),children:[(0,e.jsxs)("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[(0,e.jsxs)("div",{className:"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]",children:[(0,e.jsxs)("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[k.map((t,o)=>(0,e.jsxs)("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[(0,e.jsx)("a",{href:t.link,className:(0,E.cn)("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":o!==0,"hidden desktop:block":o===1}),children:(0,e.jsx)("span",{children:t.label})}),o!==k.length-1&&(0,e.jsx)("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},t.link||o)),k.length>1&&(0,e.jsxs)(P.Root,{children:[(0,e.jsx)(P.Trigger,{asChild:!0,children:(0,e.jsx)("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block","aria-label":"More products",children:(0,e.jsx)(K,{className:"text-[#1D1D1F]"})})}),(0,e.jsx)(P.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:k.slice(1).map(t=>(0,e.jsx)("a",{href:t.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:(0,e.jsx)("span",{children:t.label})},t.link))})]})]}),(0,e.jsxs)("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[u?.link&&(0,e.jsx)("a",{href:u.link,target:u.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:(0,e.jsx)(m.Text,{size:2,className:"text-nowrap",children:u.text})}),f?.link&&(0,e.jsx)(m.Button,{as:"a",href:f.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:f.text})]})]}),(0,e.jsx)("div",{className:"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",children:p.map((t,o)=>(0,e.jsxs)("a",{href:`#${t.id}`,className:"product-nav-anchor-link",onClick:i=>{x?(i.preventDefault(),b(t.id),h.current=t.id,y.current=!0,x(t,o)):j(i,t.id)},children:[(0,e.jsx)(m.Text,{size:2,className:"product-nav-anchor-text text-nowrap",children:t.label}),(0,e.jsx)("div",{className:(0,E.cn)("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"!bg-brand-0":z===t.id})})]},t.id))})]}),(0,e.jsxs)("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[u?.link&&(0,e.jsx)("a",{href:u.link,target:u.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:(0,e.jsx)(m.Text,{size:2,className:"text-nowrap",children:u.text})}),f?.link&&(0,e.jsx)(m.Button,{as:"a",href:f.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:f.text})]})]})});C.displayName="ProductNav";var O=(0,D.withLayout)(C);
|
|
2
2
|
//# sourceMappingURL=ProductNav.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ProductNav/ProductNav.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M5 7.5L10 12.5L15 7.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(\n ({ className = '', data, id, onAnchorClick, scrollOffsetExtra = 0 }, ref) => {\n const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n const [activeAnchorId, setActiveAnchorId] = useState('')\n const innerRef = useRef<HTMLDivElement>(null)\n const isScrollingRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\n const targetAnchorIdRef = useRef<string>('') // \u8BB0\u5F55\u70B9\u51FB\u76EE\u6807\u951A\u70B9\n const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null) // \u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u5B9A\u65F6\u5668\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n // \u6EDA\u52A8\u76D1\u542C\uFF1A\u68C0\u6D4B\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n useEffect(() => {\n if (anchorList.length === 0) return\n\n const handleScroll = () => {\n // \u5982\u679C\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\uFF0C\u4F7F\u7528 debounce \u68C0\u6D4B\u6EDA\u52A8\u7ED3\u675F\n if (isScrollingRef.current) {\n // \u6E05\u9664\u4E4B\u524D\u7684\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n // \u8BBE\u7F6E\u65B0\u7684\u5B9A\u65F6\u5668\uFF0C100ms \u6CA1\u6709\u65B0\u6EDA\u52A8\u4E8B\u4EF6\u5219\u8BA4\u4E3A\u6EDA\u52A8\u7ED3\u675F\n scrollEndTimerRef.current = setTimeout(() => {\n isScrollingRef.current = false\n // \u6EDA\u52A8\u7ED3\u675F\u540E\uFF0C\u786E\u4FDD\u9AD8\u4EAE\u505C\u7559\u5728\u76EE\u6807\u951A\u70B9\n if (targetAnchorIdRef.current) {\n setActiveAnchorId(targetAnchorIdRef.current)\n targetAnchorIdRef.current = ''\n }\n }, 100)\n return\n }\n\n const navHeight = innerRef.current?.offsetHeight || 0\n const scrollPosition = window.scrollY + navHeight + scrollOffsetExtra + 10 // 10px \u7F13\u51B2\n\n let currentAnchorId = ''\n\n // \u904D\u5386\u6240\u6709\u951A\u70B9\uFF0C\u627E\u5230\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n for (let i = anchorList.length - 1; i >= 0; i--) {\n const anchor = anchorList[i]\n const element = document.getElementById(anchor.id)\n if (element) {\n const elementTop = element.getBoundingClientRect().top + window.scrollY\n if (scrollPosition >= elementTop) {\n currentAnchorId = anchor.id\n break\n }\n }\n }\n\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\uFF0C\u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\n if (!currentAnchorId && anchorList.length > 0) {\n const firstElement = document.getElementById(anchorList[0].id)\n if (firstElement) {\n const firstElementTop = firstElement.getBoundingClientRect().top + window.scrollY\n if (scrollPosition < firstElementTop) {\n currentAnchorId = ''\n }\n }\n }\n\n setActiveAnchorId(currentAnchorId)\n }\n\n // \u521D\u59CB\u5316\u65F6\u6267\u884C\u4E00\u6B21\n handleScroll()\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n return () => {\n window.removeEventListener('scroll', handleScroll)\n // \u6E05\u7406\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n }\n }, [anchorList, scrollOffsetExtra])\n\n // \u8BBE\u7F6E\u9875\u9762\u4E2Dheader\u5143\u7D20\u7684position\u4E3Arelative\n useEffect(() => {\n const headerElements = document.querySelectorAll('.header')\n const originalStyles: { element: HTMLElement; originalPosition: string }[] = []\n\n headerElements.forEach(element => {\n const htmlElement = element as HTMLElement\n // \u4FDD\u5B58\u539F\u59CB\u6837\u5F0F\n originalStyles.push({\n element: htmlElement,\n originalPosition: htmlElement.style.position || getComputedStyle(htmlElement).position,\n })\n // \u8BBE\u7F6E\u4E3Arelative\n htmlElement.style.position = 'relative'\n })\n\n // \u6E05\u7406\u51FD\u6570\uFF1A\u6062\u590D\u539F\u59CB\u6837\u5F0F\n return () => {\n originalStyles.forEach(({ element, originalPosition }) => {\n element.style.position = originalPosition === 'static' ? '' : originalPosition\n })\n }\n }, [])\n\n // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n const handleAnchorClick = (e: React.MouseEvent, anchorId: string) => {\n e.preventDefault()\n\n // \u83B7\u53D6\u76EE\u6807\u5143\u7D20\n const targetElement = document.getElementById(anchorId)\n if (!targetElement) {\n console.warn(`Target element with id \"${anchorId}\" not found`)\n return\n }\n\n // \u7ACB\u5373\u66F4\u65B0\u9AD8\u4EAE\u72B6\u6001\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u95EA\u70C1\n setActiveAnchorId(anchorId)\n\n // \u8BB0\u5F55\u76EE\u6807\u951A\u70B9\uFF0C\u7528\u4E8E\u6EDA\u52A8\u7ED3\u675F\u540E\u786E\u4FDD\u9AD8\u4EAE\u6B63\u786E\n targetAnchorIdRef.current = anchorId\n\n // \u6807\u8BB0\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u6682\u505C\u6EDA\u52A8\u76D1\u542C\n isScrollingRef.current = true\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const navHeight = innerRef.current?.offsetHeight || 0\n\n // \u8BA1\u7B97\u76EE\u6807\u4F4D\u7F6E\uFF08\u76EE\u6807\u5143\u7D20\u7684\u4F4D\u7F6E - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u504F\u79FB\uFF09\n const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight - scrollOffsetExtra\n\n // \u5E73\u6ED1\u6EDA\u52A8\u5230\u76EE\u6807\u4F4D\u7F6E\n window.scrollTo({\n top: targetPosition,\n behavior: 'smooth',\n })\n\n // \u66F4\u65B0 URL hash\uFF08\u4E0D\u89E6\u53D1\u9875\u9762\u8DF3\u8F6C\uFF09\n window.history.pushState(null, '', `#${anchorId}`)\n\n // \u6CE8\u610F\uFF1A\u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u7531 handleScroll \u4E2D\u7684 debounce \u903B\u8F91\u5904\u7406\n // \u4E0D\u518D\u4F7F\u7528\u56FA\u5B9A 800ms \u8D85\u65F6\uFF0C\u800C\u662F\u68C0\u6D4B\u5B9E\u9645\u6EDA\u52A8\u7ED3\u675F\n }\n\n return (\n <div\n id={id}\n ref={innerRef}\n className={cn(\n 'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n {/* Tab Links Section */}\n <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n {tabLinks.map((tabLink, index) => {\n return (\n <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n <a\n href={tabLink.link}\n className={cn(\n 'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n {\n 'text-[#6D6D6F]': index !== 0,\n 'hidden desktop:block': index === 1,\n }\n )}\n // onClick={() => onShowSpecs?.(false)}\n >\n <span>{tabLink.label}</span>\n </a>\n {index !== tabLinks.length - 1 && (\n <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n )}\n </div>\n )\n })}\n\n {/* Mobile Dropdown */}\n {tabLinks.length > 1 && (\n <Popover.Root>\n <Popover.Trigger asChild>\n <button\n className=\"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block\"\n aria-label=\"More products\"\n >\n <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n </button>\n </Popover.Trigger>\n <Popover.Content\n className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n style={{\n boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n }}\n side=\"bottom\"\n align=\"end\"\n alignOffset={10}\n sideOffset={10}\n >\n {tabLinks.slice(1).map(tabLink => (\n <a\n key={tabLink.link}\n href={tabLink.link}\n className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n >\n <span>{tabLink.label}</span>\n </a>\n ))}\n </Popover.Content>\n </Popover.Root>\n )}\n </div>\n\n {/* Mobile Actions */}\n <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* Anchor Navigation */}\n <div className=\"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n {anchorList.map((anchor, index) => (\n <a\n key={anchor.id}\n href={`#${anchor.id}`}\n className=\"product-nav-anchor-link\"\n onClick={e => {\n // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6,\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\u5E76\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n if (onAnchorClick) {\n e.preventDefault()\n onAnchorClick(anchor, index)\n } else {\n // \u4F7F\u7528\u9ED8\u8BA4\u7684\u951A\u70B9\u6EDA\u52A8\u884C\u4E3A\uFF0C\u5E26\u504F\u79FB\u91CF\n handleAnchorClick(e, anchor.id)\n }\n }}\n >\n <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n {anchor.label}\n </Text>\n <div\n className={cn(\n 'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n {\n '!bg-brand-0': activeAnchorId === anchor.id,\n }\n )}\n />\n </a>\n ))}\n </div>\n </div>\n\n {/* Desktop Actions */}\n <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n )\n }\n)\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAeM,IAAAI,EAAA,6BAdNC,EAA6E,iBAC7EC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA6B,qCAC7BC,EAA4B,sCAE5BC,EAAyB,sCAEzB,MAAMC,EAAgB,aAChBC,EAAgB,cAEhBC,EAAmBC,MAErB,OAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAGA,EACjG,mBAAC,QACC,EAAE,wBACF,OAAO,eACP,YAAY,UACZ,cAAc,QACd,eAAe,QACjB,EACF,EAIEC,KAAa,cACjB,CAAC,CAAE,UAAAC,EAAY,GAAI,KAAAC,EAAM,GAAAC,EAAI,cAAAC,EAAe,kBAAAC,EAAoB,CAAE,EAAGC,IAAQ,CAC3E,KAAM,CAAE,SAAAC,EAAW,CAAC,EAAG,WAAAC,EAAa,CAAC,EAAG,SAAAC,EAAU,OAAAC,EAAQ,MAAAC,EAAQ,OAAQ,EAAIT,GAAQ,CAAC,EACjF,CAACU,EAAgBC,CAAiB,KAAI,YAAS,EAAE,EACjDC,KAAW,UAAuB,IAAI,EACtCC,KAAiB,UAAO,EAAK,EAC7BC,KAAoB,UAAe,EAAE,EACrCC,KAAoB,UAA6C,IAAI,
|
|
6
|
-
"names": ["ProductNav_exports", "__export", "ProductNav_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "onAnchorClick", "scrollOffsetExtra", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "activeAnchorId", "setActiveAnchorId", "innerRef", "isScrollingRef", "targetAnchorIdRef", "scrollEndTimerRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M5 7.5L10 12.5L15 7.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(\n ({ className = '', data, id, onAnchorClick, scrollOffsetExtra = 0 }, ref) => {\n const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n const [activeAnchorId, setActiveAnchorId] = useState('')\n const innerRef = useRef<HTMLDivElement>(null)\n const isScrollingRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\n const targetAnchorIdRef = useRef<string>('') // \u8BB0\u5F55\u70B9\u51FB\u76EE\u6807\u951A\u70B9\n const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null) // \u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u5B9A\u65F6\u5668\n const anchorPositionsRef = useRef<Map<string, number>>(new Map()) // \u7F13\u5B58\u951A\u70B9\u539F\u59CB\u4F4D\u7F6E\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n // \u521D\u59CB\u5316\u65F6\u7F13\u5B58\u6240\u6709\u951A\u70B9\u7684\u539F\u59CB\u4F4D\u7F6E\uFF08\u5728\u6EDA\u52A8\u524D\u8BA1\u7B97\uFF0C\u907F\u514D sticky \u5F71\u54CD\uFF09\n useEffect(() => {\n if (anchorList.length === 0) return\n\n // \u9875\u9762\u52A0\u8F7D\u540E\u5EF6\u8FDF\u8BA1\u7B97\uFF0C\u786E\u4FDD\u5E03\u5C40\u5B8C\u6210\n const timer = setTimeout(() => {\n // \u5148\u6EDA\u52A8\u5230\u9876\u90E8\u8BA1\u7B97\u771F\u5B9E\u4F4D\u7F6E\n const originalScrollY = window.scrollY\n window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior })\n\n // \u7B49\u5F85\u4E00\u5E27\u8BA9\u5E03\u5C40\u7A33\u5B9A\n requestAnimationFrame(() => {\n const positions = new Map<string, number>()\n anchorList.forEach(anchor => {\n const element = document.getElementById(anchor.id)\n if (element) {\n const rect = element.getBoundingClientRect()\n positions.set(anchor.id, rect.top + window.scrollY)\n }\n })\n anchorPositionsRef.current = positions\n\n // \u6062\u590D\u539F\u6765\u7684\u6EDA\u52A8\u4F4D\u7F6E\n window.scrollTo({ top: originalScrollY, behavior: 'instant' as ScrollBehavior })\n })\n }, 100)\n\n return () => clearTimeout(timer)\n }, [anchorList])\n\n // \u6EDA\u52A8\u76D1\u542C\uFF1A\u68C0\u6D4B\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n useEffect(() => {\n if (anchorList.length === 0) return\n\n const handleScroll = () => {\n // \u5982\u679C\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\uFF0C\u4F7F\u7528 debounce \u68C0\u6D4B\u6EDA\u52A8\u7ED3\u675F\n if (isScrollingRef.current) {\n // \u6E05\u9664\u4E4B\u524D\u7684\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n // \u8BBE\u7F6E\u65B0\u7684\u5B9A\u65F6\u5668\uFF0C100ms \u6CA1\u6709\u65B0\u6EDA\u52A8\u4E8B\u4EF6\u5219\u8BA4\u4E3A\u6EDA\u52A8\u7ED3\u675F\n scrollEndTimerRef.current = setTimeout(() => {\n isScrollingRef.current = false\n // \u6EDA\u52A8\u7ED3\u675F\u540E\uFF0C\u786E\u4FDD\u9AD8\u4EAE\u505C\u7559\u5728\u76EE\u6807\u951A\u70B9\n if (targetAnchorIdRef.current) {\n setActiveAnchorId(targetAnchorIdRef.current)\n targetAnchorIdRef.current = ''\n }\n }, 100)\n return\n }\n\n const navHeight = innerRef.current?.offsetHeight || 0\n const scrollPosition = window.scrollY + navHeight + scrollOffsetExtra + 10 // 10px \u7F13\u51B2\n\n let currentAnchorId = ''\n\n // \u4F7F\u7528\u7F13\u5B58\u7684\u951A\u70B9\u4F4D\u7F6E\n const positions = anchorPositionsRef.current\n\n // \u904D\u5386\u6240\u6709\u951A\u70B9\uFF0C\u627E\u5230\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n for (let i = anchorList.length - 1; i >= 0; i--) {\n const anchor = anchorList[i]\n const elementTop = positions.get(anchor.id)\n if (elementTop !== undefined && scrollPosition >= elementTop) {\n currentAnchorId = anchor.id\n break\n }\n }\n\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\u4E14\u7F13\u5B58\u4E2D\u6709\u7B2C\u4E00\u4E2A\u951A\u70B9\u7684\u4F4D\u7F6E\n if (!currentAnchorId && anchorList.length > 0) {\n const firstElementTop = positions.get(anchorList[0].id)\n if (firstElementTop !== undefined && scrollPosition < firstElementTop) {\n currentAnchorId = ''\n }\n }\n\n setActiveAnchorId(currentAnchorId)\n }\n\n // \u5EF6\u8FDF\u521D\u59CB\u5316\uFF0C\u7B49\u5F85\u4F4D\u7F6E\u7F13\u5B58\u5B8C\u6210\n const timer = setTimeout(() => {\n handleScroll()\n }, 200)\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n return () => {\n clearTimeout(timer)\n window.removeEventListener('scroll', handleScroll)\n // \u6E05\u7406\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n }\n }, [anchorList, scrollOffsetExtra])\n\n // \u8BBE\u7F6E\u9875\u9762\u4E2Dheader\u5143\u7D20\u7684position\u4E3Arelative\n useEffect(() => {\n const headerElements = document.querySelectorAll('.header')\n const originalStyles: { element: HTMLElement; originalPosition: string }[] = []\n\n headerElements.forEach(element => {\n const htmlElement = element as HTMLElement\n // \u4FDD\u5B58\u539F\u59CB\u6837\u5F0F\n originalStyles.push({\n element: htmlElement,\n originalPosition: htmlElement.style.position || getComputedStyle(htmlElement).position,\n })\n // \u8BBE\u7F6E\u4E3Arelative\n htmlElement.style.position = 'relative'\n })\n\n // \u6E05\u7406\u51FD\u6570\uFF1A\u6062\u590D\u539F\u59CB\u6837\u5F0F\n return () => {\n originalStyles.forEach(({ element, originalPosition }) => {\n element.style.position = originalPosition === 'static' ? '' : originalPosition\n })\n }\n }, [])\n\n // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n const handleAnchorClick = (e: React.MouseEvent, anchorId: string) => {\n e.preventDefault()\n\n // \u4F7F\u7528\u7F13\u5B58\u7684\u4F4D\u7F6E\n const elementAbsoluteTop = anchorPositionsRef.current.get(anchorId)\n if (elementAbsoluteTop === undefined) {\n console.warn(`Cached position for \"${anchorId}\" not found`)\n return\n }\n\n // \u7ACB\u5373\u66F4\u65B0\u9AD8\u4EAE\u72B6\u6001\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u95EA\u70C1\n setActiveAnchorId(anchorId)\n\n // \u8BB0\u5F55\u76EE\u6807\u951A\u70B9\uFF0C\u7528\u4E8E\u6EDA\u52A8\u7ED3\u675F\u540E\u786E\u4FDD\u9AD8\u4EAE\u6B63\u786E\n targetAnchorIdRef.current = anchorId\n\n // \u6807\u8BB0\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u6682\u505C\u6EDA\u52A8\u76D1\u542C\n isScrollingRef.current = true\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const navHeight = innerRef.current?.offsetHeight || 0\n\n // \u76EE\u6807\u6EDA\u52A8\u4F4D\u7F6E = \u7F13\u5B58\u7684\u5143\u7D20\u7EDD\u5BF9\u4F4D\u7F6E - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u504F\u79FB\n const targetPosition = elementAbsoluteTop - navHeight - scrollOffsetExtra\n\n // \u5E73\u6ED1\u6EDA\u52A8\u5230\u76EE\u6807\u4F4D\u7F6E\n window.scrollTo({\n top: targetPosition,\n behavior: 'smooth',\n })\n\n // \u66F4\u65B0 URL hash\uFF08\u4E0D\u89E6\u53D1\u9875\u9762\u8DF3\u8F6C\uFF09\n window.history.pushState(null, '', `#${anchorId}`)\n\n // \u6CE8\u610F\uFF1A\u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u7531 handleScroll \u4E2D\u7684 debounce \u903B\u8F91\u5904\u7406\n // \u4E0D\u518D\u4F7F\u7528\u56FA\u5B9A 800ms \u8D85\u65F6\uFF0C\u800C\u662F\u68C0\u6D4B\u5B9E\u9645\u6EDA\u52A8\u7ED3\u675F\n }\n\n return (\n <div\n id={id}\n ref={innerRef}\n className={cn(\n 'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n {/* Tab Links Section */}\n <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n {tabLinks.map((tabLink, index) => {\n return (\n <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n <a\n href={tabLink.link}\n className={cn(\n 'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n {\n 'text-[#6D6D6F]': index !== 0,\n 'hidden desktop:block': index === 1,\n }\n )}\n // onClick={() => onShowSpecs?.(false)}\n >\n <span>{tabLink.label}</span>\n </a>\n {index !== tabLinks.length - 1 && (\n <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n )}\n </div>\n )\n })}\n\n {/* Mobile Dropdown */}\n {tabLinks.length > 1 && (\n <Popover.Root>\n <Popover.Trigger asChild>\n <button\n className=\"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block\"\n aria-label=\"More products\"\n >\n <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n </button>\n </Popover.Trigger>\n <Popover.Content\n className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n style={{\n boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n }}\n side=\"bottom\"\n align=\"end\"\n alignOffset={10}\n sideOffset={10}\n >\n {tabLinks.slice(1).map(tabLink => (\n <a\n key={tabLink.link}\n href={tabLink.link}\n className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n >\n <span>{tabLink.label}</span>\n </a>\n ))}\n </Popover.Content>\n </Popover.Root>\n )}\n </div>\n\n {/* Mobile Actions */}\n <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* Anchor Navigation */}\n <div className=\"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n {anchorList.map((anchor, index) => (\n <a\n key={anchor.id}\n href={`#${anchor.id}`}\n className=\"product-nav-anchor-link\"\n onClick={e => {\n // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6,\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\u5E76\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n if (onAnchorClick) {\n e.preventDefault()\n // \u6807\u8BB0\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u9AD8\u4EAE\u95EA\u70C1\n setActiveAnchorId(anchor.id)\n targetAnchorIdRef.current = anchor.id\n isScrollingRef.current = true\n onAnchorClick(anchor, index)\n } else {\n // \u4F7F\u7528\u9ED8\u8BA4\u7684\u951A\u70B9\u6EDA\u52A8\u884C\u4E3A\uFF0C\u5E26\u504F\u79FB\u91CF\n handleAnchorClick(e, anchor.id)\n }\n }}\n >\n <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n {anchor.label}\n </Text>\n <div\n className={cn(\n 'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n {\n '!bg-brand-0': activeAnchorId === anchor.id,\n }\n )}\n />\n </a>\n ))}\n </div>\n </div>\n\n {/* Desktop Actions */}\n <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n )\n }\n)\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ProductNav_exports", "__export", "ProductNav_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "onAnchorClick", "scrollOffsetExtra", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "activeAnchorId", "setActiveAnchorId", "innerRef", "isScrollingRef", "targetAnchorIdRef", "scrollEndTimerRef", "anchorPositionsRef", "timer", "originalScrollY", "positions", "anchor", "element", "rect", "handleScroll", "navHeight", "scrollPosition", "currentAnchorId", "i", "elementTop", "firstElementTop", "headerElements", "originalStyles", "htmlElement", "originalPosition", "handleAnchorClick", "e", "anchorId", "elementAbsoluteTop", "targetPosition", "tabLink", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as I,jsx as t,jsxs as i}from"react/jsx-runtime";import{useCallback as z,useEffect as S,useMemo as B,useState as w}from"react";import{Button as R}from"../../components/index.js";import{HeaderNavigationMenu as g}from"./types.js";import{useNavContext as E}from"./NavProvider.js";import{ResourceSubSubCategoryItemComp as N,ResourceSubSubCategoryContentComp as k}from"./ResourceItem.js";import{useAiuiContext as _}from"../AiuiProvider/index.js";import{getLocalizedPath as M}from"../../helpers/utils.js";const A=({label:a,onClick:l,active:u})=>i("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:l,"aria-expanded":u,children:[t("div",{className:"flex items-center gap-1",children:t("span",{className:"text-sm font-bold leading-[1.4]",children:a})}),t("svg",{className:`size-5 ${u?"rotate-90":""}`,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t("path",{d:"M6.91009 4.41009C7.23553 4.08466 7.76304 4.08466 8.08848 4.41009L13.0885 9.41009C13.4139 9.73553 13.4139 10.263 13.0885 10.5885L8.08848 15.5885C7.76304 15.9139 7.23553 15.9139 6.91009 15.5885C6.58466 15.263 6.58466 14.7355 6.91009 14.4101L11.3209 9.99929L6.91009 5.58848C6.58466 5.26304 6.58466 4.73553 6.91009 4.41009Z",fill:"#080A0F"})})]}),G=({resourceCategoriesMetadata:a,resourcesMetadata:l})=>{const{currentMenu:u,setCurrentMenu:b,subSubCategory:r,setSubSubCategory:v,onSidebarNavClick:p,currentResourceMetadata:c,setCurrentResourceMetadata:m}=E(),{locale:d="us"}=_(),[C,L]=w([]),[f,x]=w([]);S(()=>{a?.subcategories?.length&&L(a?.subcategories?.map((n,e)=>({index:e,open:!1})))},[a]),S(()=>{r?.subSubCategories?.length&&x(r?.subSubCategories?.map((n,e)=>({index:e,open:e===0})))},[r]);const h=z(n=>{v?.(n);const e=l?.find(s=>n?.label?.toLowerCase()===s.label?.toLowerCase())||{};b&&b(g.Third),m&&m(e)},[l,b,v,m]);return B(()=>{switch(u){case g.Secondary:return i("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col gap-8 p-4",children:[t("div",{children:a?.subcategories?.map((n,e)=>t("div",{children:t(A,{label:n?.label,active:C.find(s=>s.index===e)?.open,onClick:()=>{h(n),p?.(n,e)}})},`${n.label}-${e}`))}),i("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[a?.primary&&t(R,{as:"a",href:`${M(a?.primary?.url,d)}?ref=${a?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:a?.primary?.label}),a?.secondary&&t(R,{as:"a",href:M(a?.secondary?.url,d),variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:a?.secondary?.label})]})]});case g.Third:return t("div",{className:"tablet:px-8 laptop:px-16 p-4",children:r?.subSubCategories?r?.subSubCategories?.map((n,e)=>{const s=l?.find(o=>o.label.toLowerCase()===n?.label?.toLowerCase())||{};return i("div",{children:[Reflect.ownKeys(n).length>0&&t(N,{matchResourcesMetadata:s,onSubSubCategoryItemClick:()=>{p?.(n,e),x(o=>o.map((y,$)=>({...y,open:$===e?!y.open:y.open})))},expanded:!!f?.find(o=>o.index===e)?.open}),f?.find(o=>o.index===e)?.open&&t(k,{matchResourcesMetadata:s})]},`${n.label}-${e}`)}):i(I,{children:[Reflect.ownKeys(c).length>0&&t(N,{matchResourcesMetadata:c}),t(k,{matchResourcesMetadata:c})]})});default:return null}},[u,a,l,C,f,r,c,h,p,d])};export{G as MobileResourceSidebarMenu};
|
|
2
2
|
//# sourceMappingURL=MobileResourceSidebarMenu.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeaderNavigation/MobileResourceSidebarMenu.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Button } from '../../components/index.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport { useNavContext } from './NavProvider.js'\nimport { ResourceSubSubCategoryItemComp, ResourceSubSubCategoryContentComp } from './ResourceItem.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\n\ninterface MenuItem {\n label: string\n href?: string\n onClick?: () => void\n active?: boolean\n icon?: string\n className?: string\n}\n\nconst MenuItem = ({ label, onClick, active }: MenuItem) => {\n return (\n <button\n className=\"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left\"\n onClick={onClick}\n aria-expanded={active}\n >\n <div className=\"flex items-center gap-1\">\n <span className=\"text-sm font-bold leading-[1.4]\">{label}</span>\n </div>\n <svg\n className={`size-5 ${active ? 'rotate-90' : ''}`}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M6.91009 4.41009C7.23553 4.08466 7.76304 4.08466 8.08848 4.41009L13.0885 9.41009C13.4139 9.73553 13.4139 10.263 13.0885 10.5885L8.08848 15.5885C7.76304 15.9139 7.23553 15.9139 6.91009 15.5885C6.58466 15.263 6.58466 14.7355 6.91009 14.4101L11.3209 9.99929L6.91009 5.58848C6.58466 5.26304 6.58466 4.73553 6.91009 4.41009Z\"\n fill=\"#080A0F\"\n />\n </svg>\n </button>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u8D44\u6E90\u4F4D\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param resourceCategoriesMetadata \u8D44\u6E90\u4F4D\u5206\u7C7B\u5143\u6570\u636E\n * @param resourcesMetadata \u8D44\u6E90\u4F4D\u5143\u6570\u636E\n */\nexport const MobileResourceSidebarMenu = ({\n resourceCategoriesMetadata,\n resourcesMetadata,\n}: {\n resourceCategoriesMetadata: any\n resourcesMetadata: any\n}) => {\n const {\n currentMenu,\n setCurrentMenu,\n subSubCategory,\n setSubSubCategory,\n onSidebarNavClick,\n currentResourceMetadata,\n setCurrentResourceMetadata,\n } = useNavContext()\n const { locale = 'us' } = useAiuiContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [expandedResourceCategories, setExpandedResourceCategories] = useState<{ index: number; open: boolean }[]>([])\n\n useEffect(() => {\n if (resourceCategoriesMetadata?.subcategories?.length) {\n setExpandedSubcategory(\n resourceCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n index,\n open: false,\n }))\n )\n }\n }, [resourceCategoriesMetadata])\n\n useEffect(() => {\n if (subSubCategory?.subSubCategories?.length) {\n setExpandedResourceCategories(\n subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n index,\n open: index === 0,\n }))\n )\n }\n }, [subSubCategory])\n\n const handleSubSubCategoryClick = useCallback(\n (item: any) => {\n setSubSubCategory?.(item)\n const curResourcesMetadata =\n resourcesMetadata?.find(\n (resourceItem: any) => item?.label?.toLowerCase() === resourceItem.label?.toLowerCase()\n ) || {}\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n setCurrentResourceMetadata && setCurrentResourceMetadata(curResourcesMetadata)\n },\n [resourcesMetadata, setCurrentMenu, setSubSubCategory, setCurrentResourceMetadata]\n )\n\n const MobileResourceSidebarMenuComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Secondary:\n return (\n // \u4E8C\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16
|
|
5
|
-
"mappings": "AAmBI,OAmKU,YAAAA,EA7JN,OAAAC,EANJ,QAAAC,MAAA,oBAnBJ,OAAgB,eAAAC,EAAa,aAAAC,EAAW,WAAAC,EAAS,YAAAC,MAAgB,QACjE,OAAS,UAAAC,MAAc,4BACvB,OAAS,wBAAAC,MAA4B,aACrC,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,kCAAAC,EAAgC,qCAAAC,MAAyC,oBAClF,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,oBAAAC,MAAwB,yBAWjC,MAAMC,EAAW,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,OAAAC,CAAO,IAEvCf,EAAC,UACC,UAAU,iGACV,QAASc,EACT,gBAAeC,EAEf,UAAAhB,EAAC,OAAI,UAAU,0BACb,SAAAA,EAAC,QAAK,UAAU,kCAAmC,SAAAc,EAAM,EAC3D,EACAd,EAAC,OACC,UAAW,UAAUgB,EAAS,YAAc,EAAE,GAC9C,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,cAAY,OAEZ,SAAAhB,EAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,GACF,EASSiB,EAA4B,CAAC,CACxC,2BAAAC,EACA,kBAAAC,CACF,IAGM,CACJ,KAAM,CACJ,YAAAC,EACA,eAAAC,EACA,eAAAC,EACA,kBAAAC,EACA,kBAAAC,EACA,wBAAAC,EACA,2BAAAC,CACF,EAAIlB,EAAc,EACZ,CAAE,OAAAmB,EAAS,IAAK,EAAIhB,EAAe,EACnC,CAACiB,EAAqBC,CAAsB,EAAIxB,EAA6C,CAAC,CAAC,EAC/F,CAACyB,EAA4BC,CAA6B,EAAI1B,EAA6C,CAAC,CAAC,EAEnHF,EAAU,IAAM,CACVe,GAA4B,eAAe,QAC7CW,EACEX,GAA4B,eAAe,IAAI,CAACc,EAAQC,KAAmB,CACzE,MAAAA,EACA,KAAM,EACR,EAAE,CACJ,CAEJ,EAAG,CAACf,CAA0B,CAAC,EAE/Bf,EAAU,IAAM,CACVmB,GAAgB,kBAAkB,QACpCS,EACET,GAAgB,kBAAkB,IAAI,CAACU,EAAQC,KAAmB,CAChE,MAAAA,EACA,KAAMA,IAAU,CAClB,EAAE,CACJ,CAEJ,EAAG,CAACX,CAAc,CAAC,EAEnB,MAAMY,EAA4BhC,EAC/BiC,GAAc,CACbZ,IAAoBY,CAAI,EACxB,MAAMC,EACJjB,GAAmB,KAChBkB,GAAsBF,GAAM,OAAO,YAAY,IAAME,EAAa,OAAO,YAAY,CACxF,GAAK,CAAC,EACRhB,GAAkBA,EAAed,EAAqB,KAAK,EAC3DmB,GAA8BA,EAA2BU,CAAoB,CAC/E,EACA,CAACjB,EAAmBE,EAAgBE,EAAmBG,CAA0B,CACnF,EA0GA,OAxGsCtB,EAAQ,IAAM,CAClD,OAAQgB,EAAa,CACnB,KAAKb,EAAqB,UACxB,OAEEN,EAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Button } from '../../components/index.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport { useNavContext } from './NavProvider.js'\nimport { ResourceSubSubCategoryItemComp, ResourceSubSubCategoryContentComp } from './ResourceItem.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\n\ninterface MenuItem {\n label: string\n href?: string\n onClick?: () => void\n active?: boolean\n icon?: string\n className?: string\n}\n\nconst MenuItem = ({ label, onClick, active }: MenuItem) => {\n return (\n <button\n className=\"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left\"\n onClick={onClick}\n aria-expanded={active}\n >\n <div className=\"flex items-center gap-1\">\n <span className=\"text-sm font-bold leading-[1.4]\">{label}</span>\n </div>\n <svg\n className={`size-5 ${active ? 'rotate-90' : ''}`}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M6.91009 4.41009C7.23553 4.08466 7.76304 4.08466 8.08848 4.41009L13.0885 9.41009C13.4139 9.73553 13.4139 10.263 13.0885 10.5885L8.08848 15.5885C7.76304 15.9139 7.23553 15.9139 6.91009 15.5885C6.58466 15.263 6.58466 14.7355 6.91009 14.4101L11.3209 9.99929L6.91009 5.58848C6.58466 5.26304 6.58466 4.73553 6.91009 4.41009Z\"\n fill=\"#080A0F\"\n />\n </svg>\n </button>\n )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u8D44\u6E90\u4F4D\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param resourceCategoriesMetadata \u8D44\u6E90\u4F4D\u5206\u7C7B\u5143\u6570\u636E\n * @param resourcesMetadata \u8D44\u6E90\u4F4D\u5143\u6570\u636E\n */\nexport const MobileResourceSidebarMenu = ({\n resourceCategoriesMetadata,\n resourcesMetadata,\n}: {\n resourceCategoriesMetadata: any\n resourcesMetadata: any\n}) => {\n const {\n currentMenu,\n setCurrentMenu,\n subSubCategory,\n setSubSubCategory,\n onSidebarNavClick,\n currentResourceMetadata,\n setCurrentResourceMetadata,\n } = useNavContext()\n const { locale = 'us' } = useAiuiContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [expandedResourceCategories, setExpandedResourceCategories] = useState<{ index: number; open: boolean }[]>([])\n\n useEffect(() => {\n if (resourceCategoriesMetadata?.subcategories?.length) {\n setExpandedSubcategory(\n resourceCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n index,\n open: false,\n }))\n )\n }\n }, [resourceCategoriesMetadata])\n\n useEffect(() => {\n if (subSubCategory?.subSubCategories?.length) {\n setExpandedResourceCategories(\n subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n index,\n open: index === 0,\n }))\n )\n }\n }, [subSubCategory])\n\n const handleSubSubCategoryClick = useCallback(\n (item: any) => {\n setSubSubCategory?.(item)\n const curResourcesMetadata =\n resourcesMetadata?.find(\n (resourceItem: any) => item?.label?.toLowerCase() === resourceItem.label?.toLowerCase()\n ) || {}\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n setCurrentResourceMetadata && setCurrentResourceMetadata(curResourcesMetadata)\n },\n [resourcesMetadata, setCurrentMenu, setSubSubCategory, setCurrentResourceMetadata]\n )\n\n const MobileResourceSidebarMenuComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Secondary:\n return (\n // \u4E8C\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 flex h-full flex-col gap-8 p-4\">\n <div>\n {resourceCategoriesMetadata?.subcategories?.map((item: any, index: number) => {\n return (\n <div key={`${item.label}-${index}`}>\n <MenuItem\n label={item?.label}\n active={expandedSubcategory.find(item => item.index === index)?.open}\n onClick={() => {\n handleSubSubCategoryClick(item)\n onSidebarNavClick?.(item, index)\n }}\n />\n </div>\n )\n })}\n </div>\n <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n {resourceCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={`${getLocalizedPath(resourceCategoriesMetadata?.primary?.url, locale)}?ref=${resourceCategoriesMetadata?.primary?.label}_shopall`}\n variant=\"primary\"\n size=\"lg\"\n className=\"tablet:w-auto w-full text-base\"\n >\n {resourceCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {resourceCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={getLocalizedPath(resourceCategoriesMetadata?.secondary?.url, locale)}\n variant=\"link\"\n size=\"lg\"\n className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\"\n >\n {resourceCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )\n case HeaderNavigationMenu.Third:\n return (\n // \u4E09\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {subSubCategory?.subSubCategories ? (\n subSubCategory?.subSubCategories?.map((subSubCategoryItem: any, index: number) => {\n const curResourcesMetadata =\n resourcesMetadata?.find(\n (item: any) => item.label.toLowerCase() === subSubCategoryItem?.label?.toLowerCase()\n ) || {}\n return (\n <div key={`${subSubCategoryItem.label}-${index}`}>\n {Reflect.ownKeys(subSubCategoryItem).length > 0 && (\n <ResourceSubSubCategoryItemComp\n matchResourcesMetadata={curResourcesMetadata}\n onSubSubCategoryItemClick={() => {\n onSidebarNavClick?.(subSubCategoryItem, index)\n setExpandedResourceCategories(prev =>\n prev.map((item, i) => ({ ...item, open: i === index ? !item.open : item.open }))\n )\n }}\n expanded={!!expandedResourceCategories?.find(item => item.index === index)?.open}\n />\n )}\n {expandedResourceCategories?.find(item => item.index === index)?.open && (\n <ResourceSubSubCategoryContentComp matchResourcesMetadata={curResourcesMetadata} />\n )}\n </div>\n )\n })\n ) : (\n <>\n {Reflect.ownKeys(currentResourceMetadata).length > 0 && (\n <ResourceSubSubCategoryItemComp matchResourcesMetadata={currentResourceMetadata} />\n )}\n <ResourceSubSubCategoryContentComp matchResourcesMetadata={currentResourceMetadata} />\n </>\n )}\n </div>\n )\n default:\n return null\n }\n }, [\n currentMenu,\n resourceCategoriesMetadata,\n resourcesMetadata,\n expandedSubcategory,\n expandedResourceCategories,\n subSubCategory,\n currentResourceMetadata,\n handleSubSubCategoryClick,\n onSidebarNavClick,\n locale,\n ])\n\n return MobileResourceSidebarMenuComp\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "useCallback", "useEffect", "useMemo", "useState", "Button", "HeaderNavigationMenu", "useNavContext", "ResourceSubSubCategoryItemComp", "ResourceSubSubCategoryContentComp", "useAiuiContext", "getLocalizedPath", "MenuItem", "label", "onClick", "active", "MobileResourceSidebarMenu", "resourceCategoriesMetadata", "resourcesMetadata", "currentMenu", "setCurrentMenu", "subSubCategory", "setSubSubCategory", "onSidebarNavClick", "currentResourceMetadata", "setCurrentResourceMetadata", "locale", "expandedSubcategory", "setExpandedSubcategory", "expandedResourceCategories", "setExpandedResourceCategories", "_", "index", "handleSubSubCategoryClick", "item", "curResourcesMetadata", "resourceItem", "subSubCategoryItem", "prev", "i"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as M,jsx as l,jsxs as u}from"react/jsx-runtime";import{useCallback as R,useEffect as L,useMemo as T,useState as $}from"react";import{Button as
|
|
1
|
+
import{Fragment as M,jsx as l,jsxs as u}from"react/jsx-runtime";import{useCallback as R,useEffect as L,useMemo as T,useState as $}from"react";import{Button as d,Text as D,Link as K}from"../../components/index.js";import{HeaderNavigationMenu as h}from"./types.js";import{useNavContext as P}from"./NavProvider.js";import{MenuItem as A,SubSubCategoryItemComp as z,SubSubCategoryContentComp as B}from"./MobileMenuComponents.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";import{getLocalizedPath as p}from"../../helpers/utils.js";const X=({sidebarCategoriesMetadata:r,seriesMetadata:b})=>{const{currentMenu:x,setCurrentMenu:y,subSubCategory:i,setSubSubCategory:C,setCurrentSeriesMetadata:f,currentSeriesMetadata:s,buildProps:m,onSidebarNavClick:S}=P(),{locale:c="us"}=F(),[w,_]=$([]),[v,N]=$([]);L(()=>{r?.subcategories?.length&&_(r?.subcategories?.map((e,a)=>({index:a,open:!1})))},[r]),L(()=>{i?.subSubCategories?.length&&N(i?.subSubCategories?.map((e,a)=>({index:a,open:a===0})))},[i]);const k=R((e,a)=>{y&&y(h.Third),C?.(e);const o=b?.find(n=>a!==void 0?e?.subSubCategories?.[a]?.label?.toLowerCase()===n.label?.toLowerCase():e?.label?.toLowerCase()===n.label?.toLowerCase())||{};if(e?.collections){const n=m?.categories?.[e?.collections]||{};f?.({label:o?.label,isCollection:!0,banner:o?.banner,primary:o?.primary,series:[{products:n?.products}]})}else f?.(o)},[b,y,C,f,m?.categories]);return T(()=>{switch(x){case h.Secondary:return u("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col gap-8 p-4",children:[u("div",{children:[r?.subcategories?.map((e,a)=>l("div",{children:l(A,{label:e?.label,active:w.find(o=>o.index===a)?.open,onClick:()=>{k(e),S?.(e,a)}})},`${e.label}-${a}`)),r?.guide?.label&&l(K,{href:p(r?.guide?.url,c),children:l("div",{className:"mt-4",children:l(D,{html:r?.guide?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]}),u("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[r?.primary&&l(d,{as:"a",href:`${p(r?.primary?.url,c)}?ref=${r?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:r?.primary?.label}),r?.secondary&&l(d,{as:"a",href:p(r?.secondary?.url,c),variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:r?.secondary?.label})]})]});case h.Third:return l("div",{className:"tablet:px-8 laptop:px-16 p-4",children:i?.subSubCategories?i?.subSubCategories?.map((e,a)=>{const o=b?.find(t=>t.label.toLowerCase()===e?.label?.toLowerCase())||{};let n={};if(e?.collections){const t=m?.categories?.[e?.collections]||{};n={label:o?.label,isCollection:!0,banner:o?.banner,primary:o?.primary,series:[{products:t?.products}]}}else n=o;return u("div",{children:[Reflect.ownKeys(e).length>0&&l(z,{matchSeriesMetadata:n,onSubSubCategoryItemClick:()=>{S?.(e,a),N(t=>t.map((g,E)=>({...g,open:E===a?!g.open:g.open})))},expanded:!!v?.find(t=>t.index===a)?.open}),v?.find(t=>t.index===a)?.open&&u(M,{children:[l(B,{matchSeriesMetadata:n}),n?.primary&&l("div",{className:"my-4 text-center",children:l(d,{as:"a",href:p(n?.primary?.url,c),className:"text-base leading-[1.2] no-underline",variant:"secondary",size:"base",children:n?.primary?.label})})]})]},`${e.label}-${a}`)}):u(M,{children:[Reflect.ownKeys(s).length>0&&l(z,{matchSeriesMetadata:s}),l(B,{matchSeriesMetadata:s}),s?.primary&&l("div",{className:"my-4 text-center ",children:l(d,{as:"a",href:`${p(s?.primary?.url,c)}?ref=${s?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base leading-[1.2] no-underline",children:s?.primary?.label})})]})});default:return null}},[x,r,b,w,v,i,s,m?.categories,k,S,c])};export{X as MobileSidebarMenu};
|
|
2
2
|
//# sourceMappingURL=MobileSidebarMenu.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeaderNavigation/MobileSidebarMenu.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Button, Text, Link } from '../../components/index.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport { useNavContext } from './NavProvider.js'\nimport { MenuItem, SubSubCategoryItemComp, SubSubCategoryContentComp } from './MobileMenuComponents.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\n\n/**\n * \u79FB\u52A8\u7AEF\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param sidebarCategoriesMetadata \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n * @param seriesMetadata \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n */\nexport const MobileSidebarMenu = ({\n sidebarCategoriesMetadata,\n seriesMetadata,\n}: {\n sidebarCategoriesMetadata: any\n seriesMetadata: any\n}) => {\n const {\n currentMenu,\n setCurrentMenu,\n subSubCategory,\n setSubSubCategory,\n setCurrentSeriesMetadata,\n currentSeriesMetadata,\n buildProps,\n onSidebarNavClick,\n } = useNavContext()\n const { locale = 'us' } = useAiuiContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [expandedSeriesCategories, setExpandedSeriesCategories] = useState<{ index: number; open: boolean }[]>([])\n\n useEffect(() => {\n if (sidebarCategoriesMetadata?.subcategories?.length) {\n setExpandedSubcategory(\n sidebarCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n index,\n open: false,\n }))\n )\n }\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n if (subSubCategory?.subSubCategories?.length) {\n setExpandedSeriesCategories(\n subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n index,\n open: index === 0,\n }))\n )\n }\n }, [subSubCategory])\n\n const handleSubSubCategoryClick = useCallback(\n (item: any, subIndex?: number) => {\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n setSubSubCategory?.(item)\n const curSeriesMetadata =\n seriesMetadata?.find((seriesItem: any) =>\n subIndex !== undefined\n ? item?.subSubCategories?.[subIndex]?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n : item?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n ) || {}\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n if (item?.collections) {\n const category = buildProps?.categories?.[item?.collections] || {}\n setCurrentSeriesMetadata?.({\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n })\n } else {\n setCurrentSeriesMetadata?.(curSeriesMetadata)\n }\n },\n [seriesMetadata, setCurrentMenu, setSubSubCategory, setCurrentSeriesMetadata, buildProps?.categories]\n )\n\n const MobileSidebarMenuComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Secondary:\n return (\n // \u4E8C\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4\">\n <div>\n {sidebarCategoriesMetadata?.subcategories?.map((item: any, index: number) => {\n return (\n <div key={`${item.label}-${index}`}>\n <MenuItem\n label={item?.label}\n active={expandedSubcategory.find(item => item.index === index)?.open}\n onClick={() => {\n handleSubSubCategoryClick(item)\n onSidebarNavClick?.(item, index)\n }}\n />\n </div>\n )\n })}\n {sidebarCategoriesMetadata?.guide?.label && (\n <Link href={getLocalizedPath(sidebarCategoriesMetadata?.guide?.url, locale)}>\n <div className=\"mt-4\">\n <Text\n html={sidebarCategoriesMetadata?.guide?.label}\n className=\"text-sm font-bold leading-[1.2] text-[#6D6D6F]\"\n />\n </div>\n </Link>\n )}\n </div>\n <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n {sidebarCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={`${getLocalizedPath(sidebarCategoriesMetadata?.primary?.url, locale)}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n variant=\"primary\"\n size=\"lg\"\n className=\"tablet:w-auto w-full text-base\"\n >\n {sidebarCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {sidebarCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={getLocalizedPath(sidebarCategoriesMetadata?.secondary?.url, locale)}\n variant=\"link\"\n size=\"lg\"\n className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )\n case HeaderNavigationMenu.Third:\n return (\n // \u4E09\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {subSubCategory?.subSubCategories ? (\n subSubCategory?.subSubCategories?.map((subSubCategoryItem: any, index: number) => {\n const curSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item.label.toLowerCase() === subSubCategoryItem?.label?.toLowerCase()\n ) || {}\n let matchSeriesMetadata = {} as any\n if (subSubCategoryItem?.collections) {\n const category = buildProps?.categories?.[subSubCategoryItem?.collections] || {}\n matchSeriesMetadata = {\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n matchSeriesMetadata = curSeriesMetadata\n }\n return (\n <div key={`${subSubCategoryItem.label}-${index}`}>\n {Reflect.ownKeys(subSubCategoryItem).length > 0 && (\n <SubSubCategoryItemComp\n matchSeriesMetadata={matchSeriesMetadata}\n onSubSubCategoryItemClick={() => {\n onSidebarNavClick?.(subSubCategoryItem, index)\n setExpandedSeriesCategories(prev =>\n prev.map((item, i) => ({ ...item, open: i === index ? !item.open : item.open }))\n )\n }}\n expanded={!!expandedSeriesCategories?.find(item => item.index === index)?.open}\n />\n )}\n {expandedSeriesCategories?.find(item => item.index === index)?.open && (\n <>\n <SubSubCategoryContentComp matchSeriesMetadata={matchSeriesMetadata} />\n {matchSeriesMetadata?.primary && (\n <div className=\"my-4 text-center\">\n <Button\n as=\"a\"\n href={getLocalizedPath(matchSeriesMetadata?.primary?.url, locale)}\n className=\"text-base leading-[1.2] no-underline\"\n variant=\"secondary\"\n size=\"base\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n </div>\n )\n })\n ) : (\n <>\n {Reflect.ownKeys(currentSeriesMetadata).length > 0 && (\n <SubSubCategoryItemComp matchSeriesMetadata={currentSeriesMetadata} />\n )}\n <SubSubCategoryContentComp matchSeriesMetadata={currentSeriesMetadata} />\n {currentSeriesMetadata?.primary && (\n <div className=\"my-4 text-center \">\n <Button\n as=\"a\"\n href={`${getLocalizedPath(currentSeriesMetadata?.primary?.url, locale)}?ref=${currentSeriesMetadata?.label}_viewmore`}\n variant=\"secondary\"\n size=\"base\"\n className=\"text-base leading-[1.2] no-underline\"\n >\n {currentSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n </div>\n )\n default:\n return null\n }\n }, [\n currentMenu,\n sidebarCategoriesMetadata,\n seriesMetadata,\n expandedSubcategory,\n expandedSeriesCategories,\n subSubCategory,\n currentSeriesMetadata,\n buildProps?.categories,\n handleSubSubCategoryClick,\n onSidebarNavClick,\n locale,\n ])\n\n return MobileSidebarMenuComp\n}\n"],
|
|
5
|
-
"mappings": "AA6FY,OA8FU,YAAAA,EA1FF,OAAAC,EAJR,QAAAC,MAAA,oBA7FZ,OAAgB,eAAAC,EAAa,aAAAC,EAAW,WAAAC,EAAS,YAAAC,MAAgB,QACjE,OAAS,UAAAC,EAAQ,QAAAC,EAAM,QAAAC,MAAY,4BACnC,OAAS,wBAAAC,MAA4B,aACrC,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,YAAAC,EAAU,0BAAAC,EAAwB,6BAAAC,MAAiC,4BAC5E,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,oBAAAC,MAAwB,yBAO1B,MAAMC,EAAoB,CAAC,CAChC,0BAAAC,EACA,eAAAC,CACF,IAGM,CACJ,KAAM,CACJ,YAAAC,EACA,eAAAC,EACA,eAAAC,EACA,kBAAAC,EACA,yBAAAC,EACA,sBAAAC,EACA,WAAAC,EACA,kBAAAC,CACF,EAAIhB,EAAc,EACZ,CAAE,OAAAiB,EAAS,IAAK,EAAIb,EAAe,EACnC,CAACc,EAAqBC,CAAsB,EAAIxB,EAA6C,CAAC,CAAC,EAC/F,CAACyB,EAA0BC,CAA2B,EAAI1B,EAA6C,CAAC,CAAC,EAE/GF,EAAU,IAAM,CACVc,GAA2B,eAAe,QAC5CY,EACEZ,GAA2B,eAAe,IAAI,CAACe,EAAQC,KAAmB,CACxE,MAAAA,EACA,KAAM,EACR,EAAE,CACJ,CAEJ,EAAG,CAAChB,CAAyB,CAAC,EAE9Bd,EAAU,IAAM,CACVkB,GAAgB,kBAAkB,QACpCU,EACEV,GAAgB,kBAAkB,IAAI,CAACW,EAAQC,KAAmB,CAChE,MAAAA,EACA,KAAMA,IAAU,CAClB,EAAE,CACJ,CAEJ,EAAG,CAACZ,CAAc,CAAC,EAEnB,MAAMa,EAA4BhC,EAChC,CAACiC,EAAWC,IAAsB,CAChChB,GAAkBA,EAAeX,EAAqB,KAAK,EAC3Da,IAAoBa,CAAI,EACxB,MAAME,EACJnB,GAAgB,KAAMoB,GACpBF,IAAa,OACTD,GAAM,mBAAmBC,CAAQ,GAAG,OAAO,YAAY,IAAME,EAAW,OAAO,YAAY,EAC3FH,GAAM,OAAO,YAAY,IAAMG,EAAW,OAAO,YAAY,CACnE,GAAK,CAAC,EAER,GAAIH,GAAM,YAAa,CACrB,MAAMI,EAAWd,GAAY,aAAaU,GAAM,WAAW,GAAK,CAAC,EACjEZ,IAA2B,CACzB,MAAOc,GAAmB,MAC1B,aAAc,GACd,OAAQA,GAAmB,OAC3B,QAASA,GAAmB,QAC5B,OAAQ,CACN,CACE,SAAUE,GAAU,QACtB,CACF,CACF,CAAC,CACH,MACEhB,IAA2Bc,CAAiB,CAEhD,EACA,CAACnB,EAAgBE,EAAgBE,EAAmBC,EAA0BE,GAAY,UAAU,CACtG,EAkKA,OAhK8BrB,EAAQ,IAAM,CAC1C,OAAQe,EAAa,CACnB,KAAKV,EAAqB,UACxB,OAEER,EAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Button, Text, Link } from '../../components/index.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport { useNavContext } from './NavProvider.js'\nimport { MenuItem, SubSubCategoryItemComp, SubSubCategoryContentComp } from './MobileMenuComponents.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\n\n/**\n * \u79FB\u52A8\u7AEF\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param sidebarCategoriesMetadata \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n * @param seriesMetadata \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n */\nexport const MobileSidebarMenu = ({\n sidebarCategoriesMetadata,\n seriesMetadata,\n}: {\n sidebarCategoriesMetadata: any\n seriesMetadata: any\n}) => {\n const {\n currentMenu,\n setCurrentMenu,\n subSubCategory,\n setSubSubCategory,\n setCurrentSeriesMetadata,\n currentSeriesMetadata,\n buildProps,\n onSidebarNavClick,\n } = useNavContext()\n const { locale = 'us' } = useAiuiContext()\n const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n const [expandedSeriesCategories, setExpandedSeriesCategories] = useState<{ index: number; open: boolean }[]>([])\n\n useEffect(() => {\n if (sidebarCategoriesMetadata?.subcategories?.length) {\n setExpandedSubcategory(\n sidebarCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n index,\n open: false,\n }))\n )\n }\n }, [sidebarCategoriesMetadata])\n\n useEffect(() => {\n if (subSubCategory?.subSubCategories?.length) {\n setExpandedSeriesCategories(\n subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n index,\n open: index === 0,\n }))\n )\n }\n }, [subSubCategory])\n\n const handleSubSubCategoryClick = useCallback(\n (item: any, subIndex?: number) => {\n setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n setSubSubCategory?.(item)\n const curSeriesMetadata =\n seriesMetadata?.find((seriesItem: any) =>\n subIndex !== undefined\n ? item?.subSubCategories?.[subIndex]?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n : item?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n ) || {}\n // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n if (item?.collections) {\n const category = buildProps?.categories?.[item?.collections] || {}\n setCurrentSeriesMetadata?.({\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n })\n } else {\n setCurrentSeriesMetadata?.(curSeriesMetadata)\n }\n },\n [seriesMetadata, setCurrentMenu, setSubSubCategory, setCurrentSeriesMetadata, buildProps?.categories]\n )\n\n const MobileSidebarMenuComp = useMemo(() => {\n switch (currentMenu) {\n case HeaderNavigationMenu.Secondary:\n return (\n // \u4E8C\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 flex h-full flex-col gap-8 p-4\">\n <div>\n {sidebarCategoriesMetadata?.subcategories?.map((item: any, index: number) => {\n return (\n <div key={`${item.label}-${index}`}>\n <MenuItem\n label={item?.label}\n active={expandedSubcategory.find(item => item.index === index)?.open}\n onClick={() => {\n handleSubSubCategoryClick(item)\n onSidebarNavClick?.(item, index)\n }}\n />\n </div>\n )\n })}\n {sidebarCategoriesMetadata?.guide?.label && (\n <Link href={getLocalizedPath(sidebarCategoriesMetadata?.guide?.url, locale)}>\n <div className=\"mt-4\">\n <Text\n html={sidebarCategoriesMetadata?.guide?.label}\n className=\"text-sm font-bold leading-[1.2] text-[#6D6D6F]\"\n />\n </div>\n </Link>\n )}\n </div>\n <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n {sidebarCategoriesMetadata?.primary && (\n <Button\n as=\"a\"\n href={`${getLocalizedPath(sidebarCategoriesMetadata?.primary?.url, locale)}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n variant=\"primary\"\n size=\"lg\"\n className=\"tablet:w-auto w-full text-base\"\n >\n {sidebarCategoriesMetadata?.primary?.label}\n </Button>\n )}\n {sidebarCategoriesMetadata?.secondary && (\n <Button\n as=\"a\"\n href={getLocalizedPath(sidebarCategoriesMetadata?.secondary?.url, locale)}\n variant=\"link\"\n size=\"lg\"\n className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\"\n >\n {sidebarCategoriesMetadata?.secondary?.label}\n </Button>\n )}\n </div>\n </div>\n )\n case HeaderNavigationMenu.Third:\n return (\n // \u4E09\u7EA7\u83DC\u5355\n <div className=\"tablet:px-8 laptop:px-16 p-4\">\n {subSubCategory?.subSubCategories ? (\n subSubCategory?.subSubCategories?.map((subSubCategoryItem: any, index: number) => {\n const curSeriesMetadata =\n seriesMetadata?.find(\n (item: any) => item.label.toLowerCase() === subSubCategoryItem?.label?.toLowerCase()\n ) || {}\n let matchSeriesMetadata = {} as any\n if (subSubCategoryItem?.collections) {\n const category = buildProps?.categories?.[subSubCategoryItem?.collections] || {}\n matchSeriesMetadata = {\n label: curSeriesMetadata?.label,\n isCollection: true,\n banner: curSeriesMetadata?.banner,\n primary: curSeriesMetadata?.primary,\n series: [\n {\n products: category?.products,\n },\n ],\n }\n } else {\n matchSeriesMetadata = curSeriesMetadata\n }\n return (\n <div key={`${subSubCategoryItem.label}-${index}`}>\n {Reflect.ownKeys(subSubCategoryItem).length > 0 && (\n <SubSubCategoryItemComp\n matchSeriesMetadata={matchSeriesMetadata}\n onSubSubCategoryItemClick={() => {\n onSidebarNavClick?.(subSubCategoryItem, index)\n setExpandedSeriesCategories(prev =>\n prev.map((item, i) => ({ ...item, open: i === index ? !item.open : item.open }))\n )\n }}\n expanded={!!expandedSeriesCategories?.find(item => item.index === index)?.open}\n />\n )}\n {expandedSeriesCategories?.find(item => item.index === index)?.open && (\n <>\n <SubSubCategoryContentComp matchSeriesMetadata={matchSeriesMetadata} />\n {matchSeriesMetadata?.primary && (\n <div className=\"my-4 text-center\">\n <Button\n as=\"a\"\n href={getLocalizedPath(matchSeriesMetadata?.primary?.url, locale)}\n className=\"text-base leading-[1.2] no-underline\"\n variant=\"secondary\"\n size=\"base\"\n >\n {matchSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n </div>\n )\n })\n ) : (\n <>\n {Reflect.ownKeys(currentSeriesMetadata).length > 0 && (\n <SubSubCategoryItemComp matchSeriesMetadata={currentSeriesMetadata} />\n )}\n <SubSubCategoryContentComp matchSeriesMetadata={currentSeriesMetadata} />\n {currentSeriesMetadata?.primary && (\n <div className=\"my-4 text-center \">\n <Button\n as=\"a\"\n href={`${getLocalizedPath(currentSeriesMetadata?.primary?.url, locale)}?ref=${currentSeriesMetadata?.label}_viewmore`}\n variant=\"secondary\"\n size=\"base\"\n className=\"text-base leading-[1.2] no-underline\"\n >\n {currentSeriesMetadata?.primary?.label}\n </Button>\n </div>\n )}\n </>\n )}\n </div>\n )\n default:\n return null\n }\n }, [\n currentMenu,\n sidebarCategoriesMetadata,\n seriesMetadata,\n expandedSubcategory,\n expandedSeriesCategories,\n subSubCategory,\n currentSeriesMetadata,\n buildProps?.categories,\n handleSubSubCategoryClick,\n onSidebarNavClick,\n locale,\n ])\n\n return MobileSidebarMenuComp\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "useCallback", "useEffect", "useMemo", "useState", "Button", "Text", "Link", "HeaderNavigationMenu", "useNavContext", "MenuItem", "SubSubCategoryItemComp", "SubSubCategoryContentComp", "useAiuiContext", "getLocalizedPath", "MobileSidebarMenu", "sidebarCategoriesMetadata", "seriesMetadata", "currentMenu", "setCurrentMenu", "subSubCategory", "setSubSubCategory", "setCurrentSeriesMetadata", "currentSeriesMetadata", "buildProps", "onSidebarNavClick", "locale", "expandedSubcategory", "setExpandedSubcategory", "expandedSeriesCategories", "setExpandedSeriesCategories", "_", "index", "handleSubSubCategoryClick", "item", "subIndex", "curSeriesMetadata", "seriesItem", "category", "subSubCategoryItem", "matchSeriesMetadata", "prev", "i"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as l,jsxs as o}from"react/jsx-runtime";import{useState as r,forwardRef as I,useRef as
|
|
1
|
+
"use client";import{jsx as l,jsxs as o}from"react/jsx-runtime";import{useState as r,forwardRef as I,useRef as h}from"react";import{cn as V}from"../../helpers/utils.js";import{withLayout as B}from"../../shared/Styles.js";import{Picture as v,Link as C,Text as $}from"../../components/index.js";import z from"../Title/index.js";import D from"../SwiperBox/index.js";import{Container as E}from"../../components/container.js";import{VideoModal as H}from"../VideoModal/index.js";import{convertLexicalToHTML as R}from"@payloadcms/richtext-lexical/html";import{useExposure as S}from"../../hooks/useExposure.js";import{trackUrlRef as U}from"../../shared/trackUrlRef.js";const a="video",p="media_player_multi",_=({data:e,configuration:i})=>{const t=h(null);return S(t,{componentType:a,componentName:p,componentTitle:e?.title,position:i?.index+1,componentDescription:e?.description}),o("div",{ref:t,className:V("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",i.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[l(v,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),l(v,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),l("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&l("button",{onClick:()=>{i?.onVideoPlayBtnClick?.(i?.index||0,e)},className:"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:l("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[l("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&l(C,{asChild:!e?.href,href:U(e?.href,`${a}_${p}`),"data-headless-type-name":`${a}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:l($,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),l("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},b=I(({data:{items:e=[],shape:i="square",title:t,containerProps:g},className:n="",key:w,onVideoPlayBtnClick:y,...M},k)=>{const[m,d]=r(!1),[P,f]=r(""),[N,c]=r(""),u=typeof t=="string"?t:t&&R({data:t}),T=h(null),x=e.length===2;return o("div",{...M,ref:T,className:n,children:[l("div",{className:"mediaplayermulti-box",children:l(E,{...g||{},className:"overflow-hidden",children:o("div",{className:n,ref:k,children:[t&&l(z,{className:"mediaplayermulti-title",data:{title:u||""}}),l(D,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+w,data:{list:e,configuration:{shape:i,onVideoPlayBtnClick:(L,s)=>{d(!0),s?.isYouTube?(c(s?.youtubeId||""),f("")):(f(s?.video?.url||""),c("")),y?.(L)},title:u}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),m&&l(H,{visible:m,youTubeId:N,videoUrl:P,onCloseModal:()=>d(!1)})]})});b.displayName="MediaPlayerMulti";var W=B(b);export{W as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.description,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n asChild={!data?.href}\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Text\n html={data.quote}\n weight=\"bold\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n />\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n {\n data: { items = [], shape = 'square', title, containerProps },\n className = '',\n key,\n onVideoPlayBtnClick,\n ...rest\n },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length === 2\n\n return (\n <div {...rest} ref={wrapperRef} className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: {\n shape,\n onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.description,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n asChild={!data?.href}\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Text\n html={data.quote}\n weight=\"bold\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n />\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n {\n data: { items = [], shape = 'square', title, containerProps },\n className = '',\n key,\n onVideoPlayBtnClick,\n ...rest\n },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length === 2\n\n return (\n <div {...rest} ref={wrapperRef} className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: {\n shape,\n onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId(data?.youtubeId || '')\n setVideoUrl('')\n } else {\n setVideoUrl(data?.video?.url || '')\n setYouTubeId('')\n }\n onVideoPlayBtnClick?.(_)\n },\n title: title_html,\n },\n }}\n Slide={MediaPlayerItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n )\n }\n)\n\nMediaPlayerMulti.displayName = 'MediaPlayerMulti'\nexport default withLayout(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withLayout", "Picture", "Link", "Text", "Title", "SwiperBox", "Container", "VideoModal", "convertLexicalToHTML", "useExposure", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "ref", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "rest", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "itemsLength", "_", "MediaPlayerMulti_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as
|
|
1
|
+
"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useState as j,useEffect as y,forwardRef as Y,useImperativeHandle as F,useRef as f}from"react";import{cn as N}from"../../helpers/utils.js";import{withLayout as G}from"../../shared/Styles.js";import{Button as L,Text as T}from"../../components/index.js";import{useExposure as I}from"../../hooks/useExposure.js";import*as E from"@radix-ui/react-popover";const V="navigation",_="product_nav",$=w=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...w,children:t("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),M=Y(({className:w="",data:C,id:D,onAnchorClick:S,scrollOffsetExtra:k=0},H)=>{const{tabLinks:v=[],anchorList:s=[],textLink:l,buyBtn:p,theme:B="light"}=C||{},[A,x]=j(""),d=f(null),g=f(!1),u=f(""),m=f(null),b=f(new Map);F(H,()=>d.current),I(d,{componentType:V,componentName:_}),y(()=>{if(s.length===0)return;const e=setTimeout(()=>{const o=window.scrollY;window.scrollTo({top:0,behavior:"instant"}),requestAnimationFrame(()=>{const r=new Map;s.forEach(n=>{const i=document.getElementById(n.id);if(i){const h=i.getBoundingClientRect();r.set(n.id,h.top+window.scrollY)}}),b.current=r,window.scrollTo({top:o,behavior:"instant"})})},100);return()=>clearTimeout(e)},[s]),y(()=>{if(s.length===0)return;const e=()=>{if(g.current){m.current&&clearTimeout(m.current),m.current=setTimeout(()=>{g.current=!1,u.current&&(x(u.current),u.current="")},100);return}const r=d.current?.offsetHeight||0,n=window.scrollY+r+k+10;let i="";const h=b.current;for(let c=s.length-1;c>=0;c--){const P=s[c],R=h.get(P.id);if(R!==void 0&&n>=R){i=P.id;break}}if(!i&&s.length>0){const c=h.get(s[0].id);c!==void 0&&n<c&&(i="")}x(i)},o=setTimeout(()=>{e()},200);return window.addEventListener("scroll",e,{passive:!0}),()=>{clearTimeout(o),window.removeEventListener("scroll",e),m.current&&clearTimeout(m.current)}},[s,k]),y(()=>{const e=document.querySelectorAll(".header"),o=[];return e.forEach(r=>{const n=r;o.push({element:n,originalPosition:n.style.position||getComputedStyle(n).position}),n.style.position="relative"}),()=>{o.forEach(({element:r,originalPosition:n})=>{r.style.position=n==="static"?"":n})}},[]);const z=(e,o)=>{e.preventDefault();const r=b.current.get(o);if(r===void 0){console.warn(`Cached position for "${o}" not found`);return}x(o),u.current=o,g.current=!0;const n=d.current?.offsetHeight||0,i=r-n-k;window.scrollTo({top:i,behavior:"smooth"}),window.history.pushState(null,"",`#${o}`)};return a("div",{id:D,ref:d,className:N("product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0",{"aiui-dark":B==="dark"},w),children:[a("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[a("div",{className:"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]",children:[a("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[v.map((e,o)=>a("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[t("a",{href:e.link,className:N("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":o!==0,"hidden desktop:block":o===1}),children:t("span",{children:e.label})}),o!==v.length-1&&t("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},e.link||o)),v.length>1&&a(E.Root,{children:[t(E.Trigger,{asChild:!0,children:t("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block","aria-label":"More products",children:t($,{className:"text-[#1D1D1F]"})})}),t(E.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:v.slice(1).map(e=>t("a",{href:e.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:t("span",{children:e.label})},e.link))})]})]}),a("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[l?.link&&t("a",{href:l.link,target:l.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:t(T,{size:2,className:"text-nowrap",children:l.text})}),p?.link&&t(L,{as:"a",href:p.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:p.text})]})]}),t("div",{className:"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",children:s.map((e,o)=>a("a",{href:`#${e.id}`,className:"product-nav-anchor-link",onClick:r=>{S?(r.preventDefault(),x(e.id),u.current=e.id,g.current=!0,S(e,o)):z(r,e.id)},children:[t(T,{size:2,className:"product-nav-anchor-text text-nowrap",children:e.label}),t("div",{className:N("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"!bg-brand-0":A===e.id})})]},e.id))})]}),a("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[l?.link&&t("a",{href:l.link,target:l.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:t(T,{size:2,className:"text-nowrap",children:l.text})}),p?.link&&t(L,{as:"a",href:p.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:p.text})]})]})});M.displayName="ProductNav";var Q=G(M);export{Q as default};
|
|
2
2
|
//# sourceMappingURL=ProductNav.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ProductNav/ProductNav.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M5 7.5L10 12.5L15 7.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(\n ({ className = '', data, id, onAnchorClick, scrollOffsetExtra = 0 }, ref) => {\n const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n const [activeAnchorId, setActiveAnchorId] = useState('')\n const innerRef = useRef<HTMLDivElement>(null)\n const isScrollingRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\n const targetAnchorIdRef = useRef<string>('') // \u8BB0\u5F55\u70B9\u51FB\u76EE\u6807\u951A\u70B9\n const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null) // \u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u5B9A\u65F6\u5668\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n // \u6EDA\u52A8\u76D1\u542C\uFF1A\u68C0\u6D4B\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n useEffect(() => {\n if (anchorList.length === 0) return\n\n const handleScroll = () => {\n // \u5982\u679C\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\uFF0C\u4F7F\u7528 debounce \u68C0\u6D4B\u6EDA\u52A8\u7ED3\u675F\n if (isScrollingRef.current) {\n // \u6E05\u9664\u4E4B\u524D\u7684\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n // \u8BBE\u7F6E\u65B0\u7684\u5B9A\u65F6\u5668\uFF0C100ms \u6CA1\u6709\u65B0\u6EDA\u52A8\u4E8B\u4EF6\u5219\u8BA4\u4E3A\u6EDA\u52A8\u7ED3\u675F\n scrollEndTimerRef.current = setTimeout(() => {\n isScrollingRef.current = false\n // \u6EDA\u52A8\u7ED3\u675F\u540E\uFF0C\u786E\u4FDD\u9AD8\u4EAE\u505C\u7559\u5728\u76EE\u6807\u951A\u70B9\n if (targetAnchorIdRef.current) {\n setActiveAnchorId(targetAnchorIdRef.current)\n targetAnchorIdRef.current = ''\n }\n }, 100)\n return\n }\n\n const navHeight = innerRef.current?.offsetHeight || 0\n const scrollPosition = window.scrollY + navHeight + scrollOffsetExtra + 10 // 10px \u7F13\u51B2\n\n let currentAnchorId = ''\n\n // \u904D\u5386\u6240\u6709\u951A\u70B9\uFF0C\u627E\u5230\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n for (let i = anchorList.length - 1; i >= 0; i--) {\n const anchor = anchorList[i]\n const element = document.getElementById(anchor.id)\n if (element) {\n const elementTop = element.getBoundingClientRect().top + window.scrollY\n if (scrollPosition >= elementTop) {\n currentAnchorId = anchor.id\n break\n }\n }\n }\n\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\uFF0C\u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\n if (!currentAnchorId && anchorList.length > 0) {\n const firstElement = document.getElementById(anchorList[0].id)\n if (firstElement) {\n const firstElementTop = firstElement.getBoundingClientRect().top + window.scrollY\n if (scrollPosition < firstElementTop) {\n currentAnchorId = ''\n }\n }\n }\n\n setActiveAnchorId(currentAnchorId)\n }\n\n // \u521D\u59CB\u5316\u65F6\u6267\u884C\u4E00\u6B21\n handleScroll()\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n return () => {\n window.removeEventListener('scroll', handleScroll)\n // \u6E05\u7406\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n }\n }, [anchorList, scrollOffsetExtra])\n\n // \u8BBE\u7F6E\u9875\u9762\u4E2Dheader\u5143\u7D20\u7684position\u4E3Arelative\n useEffect(() => {\n const headerElements = document.querySelectorAll('.header')\n const originalStyles: { element: HTMLElement; originalPosition: string }[] = []\n\n headerElements.forEach(element => {\n const htmlElement = element as HTMLElement\n // \u4FDD\u5B58\u539F\u59CB\u6837\u5F0F\n originalStyles.push({\n element: htmlElement,\n originalPosition: htmlElement.style.position || getComputedStyle(htmlElement).position,\n })\n // \u8BBE\u7F6E\u4E3Arelative\n htmlElement.style.position = 'relative'\n })\n\n // \u6E05\u7406\u51FD\u6570\uFF1A\u6062\u590D\u539F\u59CB\u6837\u5F0F\n return () => {\n originalStyles.forEach(({ element, originalPosition }) => {\n element.style.position = originalPosition === 'static' ? '' : originalPosition\n })\n }\n }, [])\n\n // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n const handleAnchorClick = (e: React.MouseEvent, anchorId: string) => {\n e.preventDefault()\n\n // \u83B7\u53D6\u76EE\u6807\u5143\u7D20\n const targetElement = document.getElementById(anchorId)\n if (!targetElement) {\n console.warn(`Target element with id \"${anchorId}\" not found`)\n return\n }\n\n // \u7ACB\u5373\u66F4\u65B0\u9AD8\u4EAE\u72B6\u6001\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u95EA\u70C1\n setActiveAnchorId(anchorId)\n\n // \u8BB0\u5F55\u76EE\u6807\u951A\u70B9\uFF0C\u7528\u4E8E\u6EDA\u52A8\u7ED3\u675F\u540E\u786E\u4FDD\u9AD8\u4EAE\u6B63\u786E\n targetAnchorIdRef.current = anchorId\n\n // \u6807\u8BB0\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u6682\u505C\u6EDA\u52A8\u76D1\u542C\n isScrollingRef.current = true\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const navHeight = innerRef.current?.offsetHeight || 0\n\n // \u8BA1\u7B97\u76EE\u6807\u4F4D\u7F6E\uFF08\u76EE\u6807\u5143\u7D20\u7684\u4F4D\u7F6E - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u504F\u79FB\uFF09\n const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight - scrollOffsetExtra\n\n // \u5E73\u6ED1\u6EDA\u52A8\u5230\u76EE\u6807\u4F4D\u7F6E\n window.scrollTo({\n top: targetPosition,\n behavior: 'smooth',\n })\n\n // \u66F4\u65B0 URL hash\uFF08\u4E0D\u89E6\u53D1\u9875\u9762\u8DF3\u8F6C\uFF09\n window.history.pushState(null, '', `#${anchorId}`)\n\n // \u6CE8\u610F\uFF1A\u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u7531 handleScroll \u4E2D\u7684 debounce \u903B\u8F91\u5904\u7406\n // \u4E0D\u518D\u4F7F\u7528\u56FA\u5B9A 800ms \u8D85\u65F6\uFF0C\u800C\u662F\u68C0\u6D4B\u5B9E\u9645\u6EDA\u52A8\u7ED3\u675F\n }\n\n return (\n <div\n id={id}\n ref={innerRef}\n className={cn(\n 'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n {/* Tab Links Section */}\n <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n {tabLinks.map((tabLink, index) => {\n return (\n <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n <a\n href={tabLink.link}\n className={cn(\n 'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n {\n 'text-[#6D6D6F]': index !== 0,\n 'hidden desktop:block': index === 1,\n }\n )}\n // onClick={() => onShowSpecs?.(false)}\n >\n <span>{tabLink.label}</span>\n </a>\n {index !== tabLinks.length - 1 && (\n <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n )}\n </div>\n )\n })}\n\n {/* Mobile Dropdown */}\n {tabLinks.length > 1 && (\n <Popover.Root>\n <Popover.Trigger asChild>\n <button\n className=\"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block\"\n aria-label=\"More products\"\n >\n <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n </button>\n </Popover.Trigger>\n <Popover.Content\n className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n style={{\n boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n }}\n side=\"bottom\"\n align=\"end\"\n alignOffset={10}\n sideOffset={10}\n >\n {tabLinks.slice(1).map(tabLink => (\n <a\n key={tabLink.link}\n href={tabLink.link}\n className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n >\n <span>{tabLink.label}</span>\n </a>\n ))}\n </Popover.Content>\n </Popover.Root>\n )}\n </div>\n\n {/* Mobile Actions */}\n <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* Anchor Navigation */}\n <div className=\"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n {anchorList.map((anchor, index) => (\n <a\n key={anchor.id}\n href={`#${anchor.id}`}\n className=\"product-nav-anchor-link\"\n onClick={e => {\n // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6,\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\u5E76\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n if (onAnchorClick) {\n e.preventDefault()\n onAnchorClick(anchor, index)\n } else {\n // \u4F7F\u7528\u9ED8\u8BA4\u7684\u951A\u70B9\u6EDA\u52A8\u884C\u4E3A\uFF0C\u5E26\u504F\u79FB\u91CF\n handleAnchorClick(e, anchor.id)\n }\n }}\n >\n <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n {anchor.label}\n </Text>\n <div\n className={cn(\n 'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n {\n '!bg-brand-0': activeAnchorId === anchor.id,\n }\n )}\n />\n </a>\n ))}\n </div>\n </div>\n\n {/* Desktop Actions */}\n <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n )\n }\n)\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
|
|
5
|
-
"mappings": "aAeM,cAAAA,
|
|
6
|
-
"names": ["jsx", "jsxs", "useState", "useEffect", "forwardRef", "useImperativeHandle", "useRef", "cn", "withLayout", "Button", "Text", "useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "onAnchorClick", "scrollOffsetExtra", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "activeAnchorId", "setActiveAnchorId", "innerRef", "isScrollingRef", "targetAnchorIdRef", "scrollEndTimerRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M5 7.5L10 12.5L15 7.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(\n ({ className = '', data, id, onAnchorClick, scrollOffsetExtra = 0 }, ref) => {\n const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n const [activeAnchorId, setActiveAnchorId] = useState('')\n const innerRef = useRef<HTMLDivElement>(null)\n const isScrollingRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\n const targetAnchorIdRef = useRef<string>('') // \u8BB0\u5F55\u70B9\u51FB\u76EE\u6807\u951A\u70B9\n const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null) // \u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u5B9A\u65F6\u5668\n const anchorPositionsRef = useRef<Map<string, number>>(new Map()) // \u7F13\u5B58\u951A\u70B9\u539F\u59CB\u4F4D\u7F6E\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n // \u521D\u59CB\u5316\u65F6\u7F13\u5B58\u6240\u6709\u951A\u70B9\u7684\u539F\u59CB\u4F4D\u7F6E\uFF08\u5728\u6EDA\u52A8\u524D\u8BA1\u7B97\uFF0C\u907F\u514D sticky \u5F71\u54CD\uFF09\n useEffect(() => {\n if (anchorList.length === 0) return\n\n // \u9875\u9762\u52A0\u8F7D\u540E\u5EF6\u8FDF\u8BA1\u7B97\uFF0C\u786E\u4FDD\u5E03\u5C40\u5B8C\u6210\n const timer = setTimeout(() => {\n // \u5148\u6EDA\u52A8\u5230\u9876\u90E8\u8BA1\u7B97\u771F\u5B9E\u4F4D\u7F6E\n const originalScrollY = window.scrollY\n window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior })\n\n // \u7B49\u5F85\u4E00\u5E27\u8BA9\u5E03\u5C40\u7A33\u5B9A\n requestAnimationFrame(() => {\n const positions = new Map<string, number>()\n anchorList.forEach(anchor => {\n const element = document.getElementById(anchor.id)\n if (element) {\n const rect = element.getBoundingClientRect()\n positions.set(anchor.id, rect.top + window.scrollY)\n }\n })\n anchorPositionsRef.current = positions\n\n // \u6062\u590D\u539F\u6765\u7684\u6EDA\u52A8\u4F4D\u7F6E\n window.scrollTo({ top: originalScrollY, behavior: 'instant' as ScrollBehavior })\n })\n }, 100)\n\n return () => clearTimeout(timer)\n }, [anchorList])\n\n // \u6EDA\u52A8\u76D1\u542C\uFF1A\u68C0\u6D4B\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n useEffect(() => {\n if (anchorList.length === 0) return\n\n const handleScroll = () => {\n // \u5982\u679C\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\uFF0C\u4F7F\u7528 debounce \u68C0\u6D4B\u6EDA\u52A8\u7ED3\u675F\n if (isScrollingRef.current) {\n // \u6E05\u9664\u4E4B\u524D\u7684\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n // \u8BBE\u7F6E\u65B0\u7684\u5B9A\u65F6\u5668\uFF0C100ms \u6CA1\u6709\u65B0\u6EDA\u52A8\u4E8B\u4EF6\u5219\u8BA4\u4E3A\u6EDA\u52A8\u7ED3\u675F\n scrollEndTimerRef.current = setTimeout(() => {\n isScrollingRef.current = false\n // \u6EDA\u52A8\u7ED3\u675F\u540E\uFF0C\u786E\u4FDD\u9AD8\u4EAE\u505C\u7559\u5728\u76EE\u6807\u951A\u70B9\n if (targetAnchorIdRef.current) {\n setActiveAnchorId(targetAnchorIdRef.current)\n targetAnchorIdRef.current = ''\n }\n }, 100)\n return\n }\n\n const navHeight = innerRef.current?.offsetHeight || 0\n const scrollPosition = window.scrollY + navHeight + scrollOffsetExtra + 10 // 10px \u7F13\u51B2\n\n let currentAnchorId = ''\n\n // \u4F7F\u7528\u7F13\u5B58\u7684\u951A\u70B9\u4F4D\u7F6E\n const positions = anchorPositionsRef.current\n\n // \u904D\u5386\u6240\u6709\u951A\u70B9\uFF0C\u627E\u5230\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n for (let i = anchorList.length - 1; i >= 0; i--) {\n const anchor = anchorList[i]\n const elementTop = positions.get(anchor.id)\n if (elementTop !== undefined && scrollPosition >= elementTop) {\n currentAnchorId = anchor.id\n break\n }\n }\n\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\u4E14\u7F13\u5B58\u4E2D\u6709\u7B2C\u4E00\u4E2A\u951A\u70B9\u7684\u4F4D\u7F6E\n if (!currentAnchorId && anchorList.length > 0) {\n const firstElementTop = positions.get(anchorList[0].id)\n if (firstElementTop !== undefined && scrollPosition < firstElementTop) {\n currentAnchorId = ''\n }\n }\n\n setActiveAnchorId(currentAnchorId)\n }\n\n // \u5EF6\u8FDF\u521D\u59CB\u5316\uFF0C\u7B49\u5F85\u4F4D\u7F6E\u7F13\u5B58\u5B8C\u6210\n const timer = setTimeout(() => {\n handleScroll()\n }, 200)\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n return () => {\n clearTimeout(timer)\n window.removeEventListener('scroll', handleScroll)\n // \u6E05\u7406\u5B9A\u65F6\u5668\n if (scrollEndTimerRef.current) {\n clearTimeout(scrollEndTimerRef.current)\n }\n }\n }, [anchorList, scrollOffsetExtra])\n\n // \u8BBE\u7F6E\u9875\u9762\u4E2Dheader\u5143\u7D20\u7684position\u4E3Arelative\n useEffect(() => {\n const headerElements = document.querySelectorAll('.header')\n const originalStyles: { element: HTMLElement; originalPosition: string }[] = []\n\n headerElements.forEach(element => {\n const htmlElement = element as HTMLElement\n // \u4FDD\u5B58\u539F\u59CB\u6837\u5F0F\n originalStyles.push({\n element: htmlElement,\n originalPosition: htmlElement.style.position || getComputedStyle(htmlElement).position,\n })\n // \u8BBE\u7F6E\u4E3Arelative\n htmlElement.style.position = 'relative'\n })\n\n // \u6E05\u7406\u51FD\u6570\uFF1A\u6062\u590D\u539F\u59CB\u6837\u5F0F\n return () => {\n originalStyles.forEach(({ element, originalPosition }) => {\n element.style.position = originalPosition === 'static' ? '' : originalPosition\n })\n }\n }, [])\n\n // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n const handleAnchorClick = (e: React.MouseEvent, anchorId: string) => {\n e.preventDefault()\n\n // \u4F7F\u7528\u7F13\u5B58\u7684\u4F4D\u7F6E\n const elementAbsoluteTop = anchorPositionsRef.current.get(anchorId)\n if (elementAbsoluteTop === undefined) {\n console.warn(`Cached position for \"${anchorId}\" not found`)\n return\n }\n\n // \u7ACB\u5373\u66F4\u65B0\u9AD8\u4EAE\u72B6\u6001\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u95EA\u70C1\n setActiveAnchorId(anchorId)\n\n // \u8BB0\u5F55\u76EE\u6807\u951A\u70B9\uFF0C\u7528\u4E8E\u6EDA\u52A8\u7ED3\u675F\u540E\u786E\u4FDD\u9AD8\u4EAE\u6B63\u786E\n targetAnchorIdRef.current = anchorId\n\n // \u6807\u8BB0\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u6682\u505C\u6EDA\u52A8\u76D1\u542C\n isScrollingRef.current = true\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const navHeight = innerRef.current?.offsetHeight || 0\n\n // \u76EE\u6807\u6EDA\u52A8\u4F4D\u7F6E = \u7F13\u5B58\u7684\u5143\u7D20\u7EDD\u5BF9\u4F4D\u7F6E - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u504F\u79FB\n const targetPosition = elementAbsoluteTop - navHeight - scrollOffsetExtra\n\n // \u5E73\u6ED1\u6EDA\u52A8\u5230\u76EE\u6807\u4F4D\u7F6E\n window.scrollTo({\n top: targetPosition,\n behavior: 'smooth',\n })\n\n // \u66F4\u65B0 URL hash\uFF08\u4E0D\u89E6\u53D1\u9875\u9762\u8DF3\u8F6C\uFF09\n window.history.pushState(null, '', `#${anchorId}`)\n\n // \u6CE8\u610F\uFF1A\u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u7531 handleScroll \u4E2D\u7684 debounce \u903B\u8F91\u5904\u7406\n // \u4E0D\u518D\u4F7F\u7528\u56FA\u5B9A 800ms \u8D85\u65F6\uFF0C\u800C\u662F\u68C0\u6D4B\u5B9E\u9645\u6EDA\u52A8\u7ED3\u675F\n }\n\n return (\n <div\n id={id}\n ref={innerRef}\n className={cn(\n 'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n {/* Tab Links Section */}\n <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n {tabLinks.map((tabLink, index) => {\n return (\n <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n <a\n href={tabLink.link}\n className={cn(\n 'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n {\n 'text-[#6D6D6F]': index !== 0,\n 'hidden desktop:block': index === 1,\n }\n )}\n // onClick={() => onShowSpecs?.(false)}\n >\n <span>{tabLink.label}</span>\n </a>\n {index !== tabLinks.length - 1 && (\n <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n )}\n </div>\n )\n })}\n\n {/* Mobile Dropdown */}\n {tabLinks.length > 1 && (\n <Popover.Root>\n <Popover.Trigger asChild>\n <button\n className=\"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block\"\n aria-label=\"More products\"\n >\n <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n </button>\n </Popover.Trigger>\n <Popover.Content\n className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n style={{\n boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n }}\n side=\"bottom\"\n align=\"end\"\n alignOffset={10}\n sideOffset={10}\n >\n {tabLinks.slice(1).map(tabLink => (\n <a\n key={tabLink.link}\n href={tabLink.link}\n className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n >\n <span>{tabLink.label}</span>\n </a>\n ))}\n </Popover.Content>\n </Popover.Root>\n )}\n </div>\n\n {/* Mobile Actions */}\n <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* Anchor Navigation */}\n <div className=\"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n {anchorList.map((anchor, index) => (\n <a\n key={anchor.id}\n href={`#${anchor.id}`}\n className=\"product-nav-anchor-link\"\n onClick={e => {\n // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6,\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\u5E76\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n if (onAnchorClick) {\n e.preventDefault()\n // \u6807\u8BB0\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u9AD8\u4EAE\u95EA\u70C1\n setActiveAnchorId(anchor.id)\n targetAnchorIdRef.current = anchor.id\n isScrollingRef.current = true\n onAnchorClick(anchor, index)\n } else {\n // \u4F7F\u7528\u9ED8\u8BA4\u7684\u951A\u70B9\u6EDA\u52A8\u884C\u4E3A\uFF0C\u5E26\u504F\u79FB\u91CF\n handleAnchorClick(e, anchor.id)\n }\n }}\n >\n <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n {anchor.label}\n </Text>\n <div\n className={cn(\n 'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n {\n '!bg-brand-0': activeAnchorId === anchor.id,\n }\n )}\n />\n </a>\n ))}\n </div>\n </div>\n\n {/* Desktop Actions */}\n <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n {/* {specs?.text && (\n <Text\n size={2}\n onClick={handleSpecsClick}\n className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n >\n {specs.text}\n </Text>\n )} */}\n {textLink?.link && (\n <a\n href={textLink.link}\n target={textLink.target || '_self'}\n className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n >\n <Text size={2} className=\"text-nowrap\">\n {textLink.text}\n </Text>\n </a>\n )}\n {buyBtn?.link && (\n <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n {buyBtn.text}\n </Button>\n )}\n </div>\n </div>\n )\n }\n)\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "useState", "useEffect", "forwardRef", "useImperativeHandle", "useRef", "cn", "withLayout", "Button", "Text", "useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "onAnchorClick", "scrollOffsetExtra", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "activeAnchorId", "setActiveAnchorId", "innerRef", "isScrollingRef", "targetAnchorIdRef", "scrollEndTimerRef", "anchorPositionsRef", "timer", "originalScrollY", "positions", "anchor", "element", "rect", "handleScroll", "navHeight", "scrollPosition", "currentAnchorId", "i", "elementTop", "firstElementTop", "headerElements", "originalStyles", "htmlElement", "originalPosition", "handleAnchorClick", "anchorId", "elementAbsoluteTop", "targetPosition", "tabLink", "index", "e", "ProductNav_default"]
|
|
7
7
|
}
|