d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-15 15:09:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

搜索微调

Browse Source
This commit is contained in:
tangly1024
2022-03-02 11:20:45 +08:00
parent 0fe3756595
commit 5c9b8377a8
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
themes/NEXT/components/SearchInput.js
View File

@@ -4,7 +4,7 @@ import { useImperativeHandle, useRef, useState } from 'react'
const SearchInput = ({ currentTag, currentSearch, cRef }) => {
const { locale } = useGlobal()
const [searchKey, setSearchKey] = useState(currentSearch || '')
// const [searchKey, setSearchKey] = useState(currentSearch || '')
const [onLoading, setLoadingState] = useState(false)
const router = useRouter()
const searchInputRef = useRef()
@@ -36,11 +36,10 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
}
const cleanSearch = () => {
searchInputRef.current.value = ''
setSearchKey('')
}
const updateSearchKey = (val) => {
setSearchKey(val)
searchInputRef.current.value = val
}
return <div className='flex border dark:border-gray-600 w-full bg-gray-100 dark:bg-gray-900'>
@@ -51,12 +50,12 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={searchKey}
defaultValue={currentSearch}
/>
{(searchKey && searchKey.length && <i className='fas fa-times text-gray-300 float-right m-3 cursor-pointer' onClick={cleanSearch} />)}
{(currentSearch && currentSearch.length > 0 && <i className='fas fa-times text-gray-300 float-right m-3 cursor-pointer' onClick={cleanSearch} />)}
<div className='p-3 bg-gray-50 flex border-l dark:border-gray-700 dark:hover:bg-gray-800 dark:bg-gray-600 justify-center items-center cursor-pointer'
onClick={() => { handleSearch(searchKey) }}>
onClick={handleSearch}>
<i className={`${onLoading ? 'fa-spinner animate-spin ' : 'fa-search'} fas hover:scale-125 hover:text-black transform duration-200 dark:text-gray-300 dark:hover:text-white text-gray-600 cursor-pointer`} />
</div>
</div>