From 94294d90b206120d8e8077a57a85e8771b0bfa0f Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 20 Feb 2024 11:19:09 +0800
Subject: [PATCH] Hide search bar when scroll

---
 src/assets/css/pages/tools/store.scss |  9 +++++++--
 src/pages/Tools/Store.tsx             | 23 ++++++++++++++++++++---
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/pages/tools/store.scss b/src/assets/css/pages/tools/store.scss
index 6b5789e..d1a6d13 100644
--- a/src/assets/css/pages/tools/store.scss
+++ b/src/assets/css/pages/tools/store.scss
@@ -9,10 +9,15 @@
     top: 20px;
     z-index: 10;
     justify-content: center;
+    transition: all 0.3s ease;
 
-    >* {
+    > * {
       width: 80%;
     }
+
+    &.hide {
+      transform: translateY(-60px);
+    }
   }
 
   .root-content {
@@ -99,7 +104,7 @@
           right: 12px;
           font-size: 1.6em;
 
-          >*:hover {
+          > *:hover {
             color: constants.$font-secondary-color;
           }
         }
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index 38a6a85..a7ea3e7 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode } from 'react'
+import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode, UIEvent, useState } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/tools/store.scss'
@@ -136,15 +136,26 @@ const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
 }
 
 const Store = () => {
+    const scrollTopRef = useRef(0)
     const [isLoading, setIsLoading] = useState(false)
     const [currentPage, setCurrentPage] = useState(0)
     const [hasNextPage, setHasNextPage] = useState(true)
     const [toolData, setToolData] = useState<ToolVo[]>([])
+    const [hideSearch, setHideSearch] = useState(false)
 
     const handleOnSearch = (value: string) => {
         getTool(1, value)
     }
 
+    const handleOnScroll = (event: UIEvent<HTMLDivElement>) => {
+        if (event.currentTarget.scrollTop < scrollTopRef.current) {
+            setHideSearch(false)
+        } else {
+            setHideSearch(true)
+        }
+        scrollTopRef.current = event.currentTarget.scrollTop
+    }
+
     const handleOnLoadMore = () => {
         if (isLoading) {
             return
@@ -192,11 +203,16 @@ const Store = () => {
     return (
         <>
             <FitFullscreen data-component={'tools-store'}>
-                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
-                    <div className={'search'}>
+                <HideScrollbar
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={1000}
+                    onScroll={handleOnScroll}
+                >
+                    <div className={`search${hideSearch ? ' hide' : ''}`}>
                         <AntdInput.Search
                             placeholder={'请输入工具名或关键字'}
                             enterButton
+                            allowClear
                             loading={isLoading}
                             onSearch={handleOnSearch}
                         />
@@ -204,6 +220,7 @@ const Store = () => {
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         {toolData?.map((value) => (
                             <CommonCard
+                                key={value.id}
                                 icon={
                                     <img
                                         src={`data:image/svg+xml;base64,${value.icon}`}