1
- import { useImperativeHandle , useRef , useState } from 'react '
1
+ import { siteConfig } from '@/lib/config '
2
2
import { deepClone } from '@/lib/utils'
3
3
import { useGitBookGlobal } from '@/themes/gitbook'
4
- import { siteConfig } from '@/lib/config '
4
+ import { useImperativeHandle , useRef , useState } from 'react '
5
5
let lock = false
6
6
7
7
/**
@@ -50,16 +50,18 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
50
50
* 回车键
51
51
* @param {* } e
52
52
*/
53
- const handleKeyUp = ( e ) => {
53
+ const handleKeyUp = e => {
54
54
// 使用Algolia
55
55
if ( siteConfig ( 'ALGOLIA_APP_ID' ) ) {
56
56
searchModal ?. current ?. openSearch ( )
57
57
return
58
58
}
59
59
60
- if ( e . keyCode === 13 ) { // 回车
60
+ if ( e . keyCode === 13 ) {
61
+ // 回车
61
62
handleSearch ( searchInputRef . current . value )
62
- } else if ( e . keyCode === 27 ) { // ESC
63
+ } else if ( e . keyCode === 27 ) {
64
+ // ESC
63
65
cleanSearch ( )
64
66
}
65
67
}
@@ -80,7 +82,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
80
82
}
81
83
82
84
const [ showClean , setShowClean ] = useState ( false )
83
- const updateSearchKey = ( val ) => {
85
+ const updateSearchKey = val => {
84
86
if ( lock ) {
85
87
return
86
88
}
@@ -91,39 +93,50 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
91
93
setShowClean ( false )
92
94
}
93
95
}
94
- function lockSearchInput ( ) {
96
+
97
+ function lockSearchInput ( ) {
95
98
lock = true
96
99
}
97
100
98
- function unLockSearchInput ( ) {
101
+ function unLockSearchInput ( ) {
99
102
lock = false
100
103
}
101
104
102
- return < div className = { 'flex w-full' } >
103
- < input
104
- ref = { searchInputRef }
105
- type = 'text'
106
- className = { `${ className } outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white` }
107
- onFocus = { handleFocus }
108
- onKeyUp = { handleKeyUp }
109
- onCompositionStart = { lockSearchInput }
110
- onCompositionUpdate = { lockSearchInput }
111
- onCompositionEnd = { unLockSearchInput }
112
- onChange = { e => updateSearchKey ( e . target . value ) }
113
- defaultValue = { currentSearch }
114
- />
115
-
116
- < div className = 'flex -ml-8 cursor-pointer float-right items-center justify-center py-2'
117
- onClick = { handleSearch } >
118
- < i className = { 'hover:text-black transform duration-200 text-gray-500 dark:hover:text-gray-300 cursor-pointer fas fa-search' } />
119
- </ div >
105
+ return (
106
+ < div className = { 'flex w-full' } >
107
+ < input
108
+ ref = { searchInputRef }
109
+ type = 'text'
110
+ className = { `${ className } outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white` }
111
+ onFocus = { handleFocus }
112
+ onKeyUp = { handleKeyUp }
113
+ onCompositionStart = { lockSearchInput }
114
+ onCompositionUpdate = { lockSearchInput }
115
+ onCompositionEnd = { unLockSearchInput }
116
+ onChange = { e => updateSearchKey ( e . target . value ) }
117
+ defaultValue = { currentSearch }
118
+ />
120
119
121
- { ( showClean &&
122
- < div className = '-ml-12 cursor-pointer flex float-right items-center justify-center py-2' >
123
- < i className = 'fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer dark:hover:text-gray-300' onClick = { cleanSearch } />
120
+ < div
121
+ className = 'flex -ml-8 cursor-pointer float-right items-center justify-center py-2'
122
+ onClick = { handleSearch } >
123
+ < i
124
+ className = {
125
+ 'hover:text-black transform duration-200 text-gray-500 dark:hover:text-gray-300 cursor-pointer fas fa-search'
126
+ }
127
+ />
124
128
</ div >
129
+
130
+ { showClean && (
131
+ < div className = '-ml-12 cursor-pointer flex float-right items-center justify-center py-2' >
132
+ < i
133
+ className = 'fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer dark:hover:text-gray-300'
134
+ onClick = { cleanSearch }
135
+ />
136
+ </ div >
125
137
) }
126
- </ div >
138
+ </ div >
139
+ )
127
140
}
128
141
129
142
export default SearchInput
0 commit comments