@anker-in/headless-ui 0.0.27-alpha.39 → 0.0.27-alpha.40
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var y=Object.create;var
|
|
1
|
+
"use strict";var y=Object.create;var v=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var S=(e,t)=>{for(var o in t)v(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of N(t))!R.call(e,n)&&n!==o&&v(e,n,{get:()=>t[n],enumerable:!(a=E(t,n))||a.enumerable});return e};var k=(e,t,o)=>(o=e!=null?y(I(e)):{},h(t||!e||!e.__esModule?v(o,"default",{value:e,enumerable:!0}):o,e)),H=e=>h(v({},"__esModule",{value:!0}),e);var $={};S($,{default:()=>T});module.exports=H($);var p=require("react/jsx-runtime"),l=require("react"),f=require("../../helpers/utils.js"),g=k(require("lodash.debounce"));const L=e=>{const{lists:t,styles:o,cns:a,offset:n=0}=e,[x,d]=(0,l.useState)(0),u=(0,l.useRef)(null),C=r=>{r.scrollIntoView({behavior:"smooth",inline:"center"})},w=(r,c,i)=>{d(c);const s=i.target;C(s),r.anchor&&document.querySelector(`#${r.anchor}`)?.scrollIntoView({behavior:"smooth"}),i.preventDefault()};return(0,l.useEffect)(()=>{const r=(0,g.default)(()=>{const i=[];t?.forEach(m=>{const b=document.querySelector(`#${m.anchor}`);b&&i.push(b.getBoundingClientRect().top)});const s=i.findIndex(m=>m>c+n)-1;d(s<0?0:s)},100),c=u.current?.getBoundingClientRect().height||0;return window.addEventListener("scroll",r),()=>{window.removeEventListener("scroll",r)}},[t,n]),(0,p.jsx)("div",{id:"nav",className:(0,f.cn)("cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]",a?.container),style:{"--bgColor":o?.bgColor||"#C6F1FF","--color":o?.color||"#333","--activeColor":o?.activeColor||"#000"},children:(0,p.jsx)("div",{className:(0,f.cn)("cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden","tablet:gap-[80px] tablet:justify-center",a?.box),ref:u,children:t?.map((r,c)=>(0,p.jsx)("a",{href:`#${r.anchor}`,className:(0,f.cn)("cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200",a?.item,{[`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[""] ${a?.activeItem}`]:x===c}),onClick:i=>w(r,c,i),children:r.label},r.label))})})};var T=L;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/cpn-components/CpnNavigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport debounce from 'lodash.debounce'\n\nconst CpnNavigation = (props: NavigationProps) => {\n const { lists, styles, cns, offset = 0 } = props\n const [activeIndex, setActiveIndex] = useState(0)\n const navBox = useRef<HTMLDivElement>(null)\n\n const scrollIntoView = (ele: HTMLElement) => {\n ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n }\n\n const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n setActiveIndex(index)\n const ele = e.target as HTMLAnchorElement\n scrollIntoView(ele)\n if (nav.anchor) {\n document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n }\n e.preventDefault()\n }\n\n useEffect(() => {\n const scrollHandler = debounce(() => {\n const sectionTops: number[] = []\n lists?.forEach(nav => {\n const section = document.querySelector(`#${nav.anchor}`)\n if (section) {\n sectionTops.push(section.getBoundingClientRect().top)\n }\n })\n const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset) - 1\n setActiveIndex(index)\n }, 100)\n const navHeight = navBox.current?.getBoundingClientRect().height || 0\n window.addEventListener('scroll', scrollHandler)\n return () => {\n window.removeEventListener('scroll', scrollHandler)\n }\n }, [lists, offset])\n\n return (\n <div\n id=\"nav\"\n className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n style={\n {\n '--bgColor': styles?.bgColor || '#C6F1FF',\n '--color': styles?.color || '#333',\n '--activeColor': styles?.activeColor || '#000',\n } as React.CSSProperties\n }\n >\n <div\n className={cn(\n 'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n 'tablet:gap-[80px] tablet:justify-center',\n cns?.box\n )}\n ref={navBox}\n >\n {lists?.map((nav, index) => {\n return (\n <a\n key={nav.label}\n href={`#${nav.anchor}`}\n className={cn(\n 'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n cns?.item,\n {\n [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n activeIndex === index,\n }\n )}\n onClick={e => handleNavItemClick(nav, index, e)}\n >\n {nav.label}\n </a>\n )\n })}\n </div>\n </div>\n )\n}\n\nexport default CpnNavigation\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiEY,IAAAI,EAAA,6BAjEZC,EAAmD,iBACnDC,EAAmB,kCAEnBC,EAAqB,8BAErB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,CAAE,EAAIJ,EACrC,CAACK,EAAaC,CAAc,KAAI,YAAS,CAAC,EAC1CC,KAAS,UAAuB,IAAI,EAEpCC,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,CACnB,EAEA,sBAAU,IAAM,CACd,MAAMC,KAAgB,EAAAC,SAAS,IAAM,CACnC,MAAMC,EAAwB,CAAC,EAC/Bf,GAAO,QAAQU,GAAO,CACpB,MAAMM,EAAU,SAAS,cAAc,IAAIN,EAAI,MAAM,EAAE,EACnDM,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAML,EAAQI,EAAY,UAAUE,GAAcA,EAAaC,EAAYf,CAAM,EAAI,EACrFE,EAAeM,CAAK,
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport debounce from 'lodash.debounce'\n\nconst CpnNavigation = (props: NavigationProps) => {\n const { lists, styles, cns, offset = 0 } = props\n const [activeIndex, setActiveIndex] = useState(0)\n const navBox = useRef<HTMLDivElement>(null)\n\n const scrollIntoView = (ele: HTMLElement) => {\n ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n }\n\n const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n setActiveIndex(index)\n const ele = e.target as HTMLAnchorElement\n scrollIntoView(ele)\n if (nav.anchor) {\n document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n }\n e.preventDefault()\n }\n\n useEffect(() => {\n const scrollHandler = debounce(() => {\n const sectionTops: number[] = []\n lists?.forEach(nav => {\n const section = document.querySelector(`#${nav.anchor}`)\n if (section) {\n sectionTops.push(section.getBoundingClientRect().top)\n }\n })\n const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset) - 1\n setActiveIndex(index < 0 ? 0 : index)\n }, 100)\n const navHeight = navBox.current?.getBoundingClientRect().height || 0\n window.addEventListener('scroll', scrollHandler)\n return () => {\n window.removeEventListener('scroll', scrollHandler)\n }\n }, [lists, offset])\n\n return (\n <div\n id=\"nav\"\n className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n style={\n {\n '--bgColor': styles?.bgColor || '#C6F1FF',\n '--color': styles?.color || '#333',\n '--activeColor': styles?.activeColor || '#000',\n } as React.CSSProperties\n }\n >\n <div\n className={cn(\n 'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n 'tablet:gap-[80px] tablet:justify-center',\n cns?.box\n )}\n ref={navBox}\n >\n {lists?.map((nav, index) => {\n return (\n <a\n key={nav.label}\n href={`#${nav.anchor}`}\n className={cn(\n 'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n cns?.item,\n {\n [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n activeIndex === index,\n }\n )}\n onClick={e => handleNavItemClick(nav, index, e)}\n >\n {nav.label}\n </a>\n )\n })}\n </div>\n </div>\n )\n}\n\nexport default CpnNavigation\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiEY,IAAAI,EAAA,6BAjEZC,EAAmD,iBACnDC,EAAmB,kCAEnBC,EAAqB,8BAErB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,CAAE,EAAIJ,EACrC,CAACK,EAAaC,CAAc,KAAI,YAAS,CAAC,EAC1CC,KAAS,UAAuB,IAAI,EAEpCC,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,CACnB,EAEA,sBAAU,IAAM,CACd,MAAMC,KAAgB,EAAAC,SAAS,IAAM,CACnC,MAAMC,EAAwB,CAAC,EAC/Bf,GAAO,QAAQU,GAAO,CACpB,MAAMM,EAAU,SAAS,cAAc,IAAIN,EAAI,MAAM,EAAE,EACnDM,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAML,EAAQI,EAAY,UAAUE,GAAcA,EAAaC,EAAYf,CAAM,EAAI,EACrFE,EAAeM,EAAQ,EAAI,EAAIA,CAAK,CACtC,EAAG,GAAG,EACAO,EAAYZ,EAAO,SAAS,sBAAsB,EAAE,QAAU,EACpE,cAAO,iBAAiB,SAAUO,CAAa,EACxC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAa,CACpD,CACF,EAAG,CAACb,EAAOG,CAAM,CAAC,KAGhB,OAAC,OACC,GAAG,MACH,aAAW,MAAG,iEAAkED,GAAK,SAAS,EAC9F,MACE,CACE,YAAaD,GAAQ,SAAW,UAChC,UAAWA,GAAQ,OAAS,OAC5B,gBAAiBA,GAAQ,aAAe,MAC1C,EAGF,mBAAC,OACC,aAAW,MACT,iIACA,0CACAC,GAAK,GACP,EACA,IAAKI,EAEJ,SAAAN,GAAO,IAAI,CAACU,EAAKC,OAEd,OAAC,KAEC,KAAM,IAAID,EAAI,MAAM,GACpB,aAAW,MACT,yJACAR,GAAK,KACL,CACE,CAAC,wNAAwNA,GAAK,UAAU,EAAE,EACxOE,IAAgBO,CACpB,CACF,EACA,QAASC,GAAKH,EAAmBC,EAAKC,EAAOC,CAAC,EAE7C,SAAAF,EAAI,OAZAA,EAAI,KAaX,CAEH,EACH,EACF,CAEJ,EAEA,IAAOlB,EAAQM",
|
|
6
6
|
"names": ["CpnNavigation_exports", "__export", "CpnNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_lodash", "CpnNavigation", "props", "lists", "styles", "cns", "offset", "activeIndex", "setActiveIndex", "navBox", "scrollIntoView", "ele", "handleNavItemClick", "nav", "index", "e", "scrollHandler", "debounce", "sectionTops", "section", "sectionTop", "navHeight"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as s}from"react/jsx-runtime";import{useEffect as g,useRef as x,useState as C}from"react";import{cn as l}from"../../helpers/utils.js";import w from"lodash.debounce";const y=d=>{const{lists:
|
|
1
|
+
import{jsx as s}from"react/jsx-runtime";import{useEffect as g,useRef as x,useState as C}from"react";import{cn as l}from"../../helpers/utils.js";import w from"lodash.debounce";const y=d=>{const{lists:a,styles:i,cns:r,offset:v=0}=d,[u,f]=C(0),p=x(null),b=e=>{e.scrollIntoView({behavior:"smooth",inline:"center"})},h=(e,o,t)=>{f(o);const n=t.target;b(n),e.anchor&&document.querySelector(`#${e.anchor}`)?.scrollIntoView({behavior:"smooth"}),t.preventDefault()};return g(()=>{const e=w(()=>{const t=[];a?.forEach(c=>{const m=document.querySelector(`#${c.anchor}`);m&&t.push(m.getBoundingClientRect().top)});const n=t.findIndex(c=>c>o+v)-1;f(n<0?0:n)},100),o=p.current?.getBoundingClientRect().height||0;return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}},[a,v]),s("div",{id:"nav",className:l("cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]",r?.container),style:{"--bgColor":i?.bgColor||"#C6F1FF","--color":i?.color||"#333","--activeColor":i?.activeColor||"#000"},children:s("div",{className:l("cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden","tablet:gap-[80px] tablet:justify-center",r?.box),ref:p,children:a?.map((e,o)=>s("a",{href:`#${e.anchor}`,className:l("cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200",r?.item,{[`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[""] ${r?.activeItem}`]:u===o}),onClick:t=>h(e,o,t),children:e.label},e.label))})})};var S=y;export{S as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/cpn-components/CpnNavigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport debounce from 'lodash.debounce'\n\nconst CpnNavigation = (props: NavigationProps) => {\n const { lists, styles, cns, offset = 0 } = props\n const [activeIndex, setActiveIndex] = useState(0)\n const navBox = useRef<HTMLDivElement>(null)\n\n const scrollIntoView = (ele: HTMLElement) => {\n ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n }\n\n const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n setActiveIndex(index)\n const ele = e.target as HTMLAnchorElement\n scrollIntoView(ele)\n if (nav.anchor) {\n document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n }\n e.preventDefault()\n }\n\n useEffect(() => {\n const scrollHandler = debounce(() => {\n const sectionTops: number[] = []\n lists?.forEach(nav => {\n const section = document.querySelector(`#${nav.anchor}`)\n if (section) {\n sectionTops.push(section.getBoundingClientRect().top)\n }\n })\n const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset) - 1\n setActiveIndex(index)\n }, 100)\n const navHeight = navBox.current?.getBoundingClientRect().height || 0\n window.addEventListener('scroll', scrollHandler)\n return () => {\n window.removeEventListener('scroll', scrollHandler)\n }\n }, [lists, offset])\n\n return (\n <div\n id=\"nav\"\n className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n style={\n {\n '--bgColor': styles?.bgColor || '#C6F1FF',\n '--color': styles?.color || '#333',\n '--activeColor': styles?.activeColor || '#000',\n } as React.CSSProperties\n }\n >\n <div\n className={cn(\n 'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n 'tablet:gap-[80px] tablet:justify-center',\n cns?.box\n )}\n ref={navBox}\n >\n {lists?.map((nav, index) => {\n return (\n <a\n key={nav.label}\n href={`#${nav.anchor}`}\n className={cn(\n 'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n cns?.item,\n {\n [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n activeIndex === index,\n }\n )}\n onClick={e => handleNavItemClick(nav, index, e)}\n >\n {nav.label}\n </a>\n )\n })}\n </div>\n </div>\n )\n}\n\nexport default CpnNavigation\n"],
|
|
5
|
-
"mappings": "AAiEY,cAAAA,MAAA,oBAjEZ,OAAgB,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QACnD,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAc,kBAErB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,CAAE,EAAIJ,EACrC,CAACK,EAAaC,CAAc,EAAIV,EAAS,CAAC,EAC1CW,EAASZ,EAAuB,IAAI,EAEpCa,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,CACnB,EAEA,OAAAnB,EAAU,IAAM,CACd,MAAMoB,EAAgBhB,EAAS,IAAM,CACnC,MAAMiB,EAAwB,CAAC,EAC/Bd,GAAO,QAAQU,GAAO,CACpB,MAAMK,EAAU,SAAS,cAAc,IAAIL,EAAI,MAAM,EAAE,EACnDK,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAMJ,EAAQG,EAAY,UAAUE,GAAcA,EAAaC,EAAYd,CAAM,EAAI,EACrFE,EAAeM,CAAK,
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport debounce from 'lodash.debounce'\n\nconst CpnNavigation = (props: NavigationProps) => {\n const { lists, styles, cns, offset = 0 } = props\n const [activeIndex, setActiveIndex] = useState(0)\n const navBox = useRef<HTMLDivElement>(null)\n\n const scrollIntoView = (ele: HTMLElement) => {\n ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n }\n\n const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n setActiveIndex(index)\n const ele = e.target as HTMLAnchorElement\n scrollIntoView(ele)\n if (nav.anchor) {\n document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n }\n e.preventDefault()\n }\n\n useEffect(() => {\n const scrollHandler = debounce(() => {\n const sectionTops: number[] = []\n lists?.forEach(nav => {\n const section = document.querySelector(`#${nav.anchor}`)\n if (section) {\n sectionTops.push(section.getBoundingClientRect().top)\n }\n })\n const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset) - 1\n setActiveIndex(index < 0 ? 0 : index)\n }, 100)\n const navHeight = navBox.current?.getBoundingClientRect().height || 0\n window.addEventListener('scroll', scrollHandler)\n return () => {\n window.removeEventListener('scroll', scrollHandler)\n }\n }, [lists, offset])\n\n return (\n <div\n id=\"nav\"\n className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n style={\n {\n '--bgColor': styles?.bgColor || '#C6F1FF',\n '--color': styles?.color || '#333',\n '--activeColor': styles?.activeColor || '#000',\n } as React.CSSProperties\n }\n >\n <div\n className={cn(\n 'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n 'tablet:gap-[80px] tablet:justify-center',\n cns?.box\n )}\n ref={navBox}\n >\n {lists?.map((nav, index) => {\n return (\n <a\n key={nav.label}\n href={`#${nav.anchor}`}\n className={cn(\n 'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n cns?.item,\n {\n [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n activeIndex === index,\n }\n )}\n onClick={e => handleNavItemClick(nav, index, e)}\n >\n {nav.label}\n </a>\n )\n })}\n </div>\n </div>\n )\n}\n\nexport default CpnNavigation\n"],
|
|
5
|
+
"mappings": "AAiEY,cAAAA,MAAA,oBAjEZ,OAAgB,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QACnD,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAc,kBAErB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,CAAE,EAAIJ,EACrC,CAACK,EAAaC,CAAc,EAAIV,EAAS,CAAC,EAC1CW,EAASZ,EAAuB,IAAI,EAEpCa,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,CACnB,EAEA,OAAAnB,EAAU,IAAM,CACd,MAAMoB,EAAgBhB,EAAS,IAAM,CACnC,MAAMiB,EAAwB,CAAC,EAC/Bd,GAAO,QAAQU,GAAO,CACpB,MAAMK,EAAU,SAAS,cAAc,IAAIL,EAAI,MAAM,EAAE,EACnDK,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAMJ,EAAQG,EAAY,UAAUE,GAAcA,EAAaC,EAAYd,CAAM,EAAI,EACrFE,EAAeM,EAAQ,EAAI,EAAIA,CAAK,CACtC,EAAG,GAAG,EACAM,EAAYX,EAAO,SAAS,sBAAsB,EAAE,QAAU,EACpE,cAAO,iBAAiB,SAAUO,CAAa,EACxC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAa,CACpD,CACF,EAAG,CAACb,EAAOG,CAAM,CAAC,EAGhBX,EAAC,OACC,GAAG,MACH,UAAWI,EAAG,iEAAkEM,GAAK,SAAS,EAC9F,MACE,CACE,YAAaD,GAAQ,SAAW,UAChC,UAAWA,GAAQ,OAAS,OAC5B,gBAAiBA,GAAQ,aAAe,MAC1C,EAGF,SAAAT,EAAC,OACC,UAAWI,EACT,iIACA,0CACAM,GAAK,GACP,EACA,IAAKI,EAEJ,SAAAN,GAAO,IAAI,CAACU,EAAKC,IAEdnB,EAAC,KAEC,KAAM,IAAIkB,EAAI,MAAM,GACpB,UAAWd,EACT,yJACAM,GAAK,KACL,CACE,CAAC,wNAAwNA,GAAK,UAAU,EAAE,EACxOE,IAAgBO,CACpB,CACF,EACA,QAASC,GAAKH,EAAmBC,EAAKC,EAAOC,CAAC,EAE7C,SAAAF,EAAI,OAZAA,EAAI,KAaX,CAEH,EACH,EACF,CAEJ,EAEA,IAAOQ,EAAQpB",
|
|
6
6
|
"names": ["jsx", "useEffect", "useRef", "useState", "cn", "debounce", "CpnNavigation", "props", "lists", "styles", "cns", "offset", "activeIndex", "setActiveIndex", "navBox", "scrollIntoView", "ele", "handleNavItemClick", "nav", "index", "e", "scrollHandler", "sectionTops", "section", "sectionTop", "navHeight", "CpnNavigation_default"]
|
|
7
7
|
}
|