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

slug 调整兼容已有主题

Browse Source
This commit is contained in:
tangly1024.com
2024-05-08 16:22:14 +08:00
parent 65eff434ec
commit 9b78eb499c
56 changed files with 1318 additions and 826 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
themes/nav/components/SearchInput.js
View File

@@ -1,12 +1,12 @@
import { useImperativeHandle, useRef, useState } from 'react'
import { deepClone } from '@/lib/utils'
import { useNavGlobal } from '@/themes/nav'
import { useImperativeHandle, useRef, useState } from 'react'
let lock = false
const SearchInput = ({ currentSearch, cRef, className }) => {
const searchInputRef = useRef()
const { setFilteredNavPages, allNavPages } = useNavGlobal()
const [filteredNavPages] = useState(allNavPages)
// const [filteredNavPages] = useState(allNavPages)
useImperativeHandle(cRef, () => {
return {
@@ -56,10 +56,12 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
* 回车键
* @param {*} e
*/
const handleKeyUp = (e) => {
if (e.keyCode === 13) { // 回车
const handleKeyUp = e => {
if (e.keyCode === 13) {
// 回车
handleSearch(searchInputRef.current.value)
} else if (e.keyCode === 27) { // ESC
} else if (e.keyCode === 27) {
// ESC
cleanSearch()
}
}
@@ -74,7 +76,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
}
const [showClean, setShowClean] = useState(false)
const updateSearchKey = (val) => {
const updateSearchKey = val => {
if (lock) {
return
}
@@ -86,38 +88,51 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
setShowClean(false)
}
}
function lockSearchInput () {
function lockSearchInput() {
lock = true
}
function unLockSearchInput () {
function unLockSearchInput() {
lock = false
}
return <div className={'flex w-36 hover:w-36 md:hover:w-56 md:w-56 transition md:mr-5'}>
<input
ref={searchInputRef}
type='text'
className={`${className} outline-none w-full text-sm pl-4 transition-all duration-200 ease-in focus:shadow-lg font-light leading-10 text-black bg-opacity-50 md:bg-opacity-100 bg-neutral-100 md:hover:bg-neutral-200 md:focus:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-white`}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}
onCompositionEnd={unLockSearchInput}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={currentSearch}
/>
return (
<div
className={
'flex w-36 hover:w-36 md:hover:w-56 md:w-56 transition md:mr-5'
}>
<input
ref={searchInputRef}
type='text'
className={`${className} outline-none w-full text-sm pl-4 transition-all duration-200 ease-in focus:shadow-lg font-light leading-10 text-black bg-opacity-50 md:bg-opacity-100 bg-neutral-100 md:hover:bg-neutral-200 md:focus:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-white`}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}
onCompositionEnd={unLockSearchInput}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={currentSearch}
/>
<div className='flex -ml-6 cursor-pointer float-right items-center justify-center py-2'
onClick={handleSearch}>
<i className={'hover:text-black transform duration-200 text-neutral-500 dark:hover:text-gray-300 cursor-pointer fas fa-search'} />
</div>
{(showClean &&
<div className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'>
<i className='fas fa-times hover:text-black transform duration-200 text-neutral-400 cursor-pointer dark:hover:text-gray-300' onClick={cleanSearch} />
<div
className='flex -ml-6 cursor-pointer float-right items-center justify-center py-2'
onClick={handleSearch}>
<i
className={
'hover:text-black transform duration-200 text-neutral-500 dark:hover:text-gray-300 cursor-pointer fas fa-search'
}
/>
</div>
{showClean && (
<div className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'>
<i
className='fas fa-times hover:text-black transform duration-200 text-neutral-400 cursor-pointer dark:hover:text-gray-300'
onClick={cleanSearch}
/>
</div>
)}
</div>
</div>
)
}
export default SearchInput