root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: tag switch auto scroll

Browse Source
This commit is contained in:
hamster1963 2024-10-23 12:58:45 +08:00
parent 84a10263f0
commit be6df3cbed
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/[locale]/(main)/header.tsx
View File

@ -26,6 +26,7 @@ function Header() {
<section className="flex items-center justify-between"> <section className="flex items-center justify-between">
<section <section
onClick={() => { onClick={() => {
sessionStorage.removeItem("selectedTag");
router.push(`/${locale}/`); router.push(`/${locale}/`);
}} }}
className="flex cursor-pointer items-center text-base font-medium" className="flex cursor-pointer items-center text-base font-medium"
@ -63,7 +64,7 @@ function Header() {
// https://github.com/streamich/react-use/blob/master/src/useInterval.ts // https://github.com/streamich/react-use/blob/master/src/useInterval.ts
const useInterval = (callback: Function, delay?: number | null) => { const useInterval = (callback: Function, delay?: number | null) => {
const savedCallback = useRef<Function>(() => {}); const savedCallback = useRef<Function>(() => { });
useEffect(() => { useEffect(() => {
savedCallback.current = callback; savedCallback.current = callback;
}); });

19
components/Switch.tsx
View File

@ -2,7 +2,7 @@
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState, createRef } from "react";
export default function Switch({ export default function Switch({
allTag, allTag,
@ -14,6 +14,7 @@ export default function Switch({
onTagChange: (tag: string) => void; onTagChange: (tag: string) => void;
}) { }) {
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()));
useEffect(() => { useEffect(() => {
const savedTag = sessionStorage.getItem("selectedTag"); const savedTag = sessionStorage.getItem("selectedTag");
@ -41,21 +42,33 @@ export default function Switch({
}; };
}, []); }, []);
useEffect(() => {
const currentTagRef = tagRefs.current[allTag.indexOf(nowTag)];
if (currentTagRef && currentTagRef.current) {
currentTagRef.current.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center",
});
}
}, [nowTag]);
return ( return (
<div <div
ref={scrollRef} ref={scrollRef}
className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]" className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]"
> >
<div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800"> <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
{allTag.map((tag) => ( {allTag.map((tag, index) => (
<div <div
key={tag} key={tag}
ref={tagRefs.current[index]}
onClick={() => onTagChange(tag)} onClick={() => onTagChange(tag)}
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",
nowTag === tag nowTag === tag
? "text-black dark:text-white" ? "text-black dark:text-white"
: "text-stone-400 dark:text-stone-500", : "text-stone-400 dark:text-stone-500"
)} )}
> >
{nowTag === tag && ( {nowTag === tag && (