mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 17:41:56 +08:00
feat: better group switch
This commit is contained in:
parent
2b854a1934
commit
0b43a3943d
@ -1,5 +1,6 @@
|
|||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
import { m } from "framer-motion"
|
import { m } from "framer-motion"
|
||||||
|
import { createRef, useEffect, useRef } from "react"
|
||||||
|
|
||||||
export default function GroupSwitch({
|
export default function GroupSwitch({
|
||||||
tabs,
|
tabs,
|
||||||
@ -13,16 +14,52 @@ export default function GroupSwitch({
|
|||||||
const customBackgroundImage =
|
const customBackgroundImage =
|
||||||
// @ts-expect-error CustomBackgroundImage is a global variable
|
// @ts-expect-error CustomBackgroundImage is a global variable
|
||||||
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
|
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
|
||||||
|
|
||||||
|
const scrollRef = useRef<HTMLDivElement>(null)
|
||||||
|
const tagRefs = useRef(tabs.map(() => createRef<HTMLDivElement>()))
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const container = scrollRef.current
|
||||||
|
if (!container) return
|
||||||
|
|
||||||
|
const isOverflowing = container.scrollWidth > container.clientWidth
|
||||||
|
if (!isOverflowing) return
|
||||||
|
|
||||||
|
const onWheel = (e: WheelEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
container.scrollLeft += e.deltaY
|
||||||
|
}
|
||||||
|
|
||||||
|
container.addEventListener("wheel", onWheel, { passive: false })
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
container.removeEventListener("wheel", onWheel)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const currentTagRef = tagRefs.current[tabs.indexOf(currentTab)]
|
||||||
|
|
||||||
|
if (currentTagRef && currentTagRef.current) {
|
||||||
|
currentTagRef.current.scrollIntoView({
|
||||||
|
behavior: "smooth",
|
||||||
|
block: "nearest",
|
||||||
|
inline: "center",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [currentTab])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
|
<div ref={scrollRef} className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
|
||||||
<div
|
<div
|
||||||
className={cn("flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800", {
|
className={cn("flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800", {
|
||||||
"bg-stone-100/70 dark:bg-stone-800/70": customBackgroundImage,
|
"bg-stone-100/70 dark:bg-stone-800/70": customBackgroundImage,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{tabs.map((tab: string) => (
|
{tabs.map((tab: string, index: number) => (
|
||||||
<div
|
<div
|
||||||
key={tab}
|
key={tab}
|
||||||
|
ref={tagRefs.current[index]}
|
||||||
onClick={() => setCurrentTab(tab)}
|
onClick={() => setCurrentTab(tab)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
|
"relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user