chore: my models search box css issue (#4984)
This commit is contained in:
parent
75d3dd2de0
commit
dc9750ecb4
@ -5,22 +5,12 @@ import { SearchIcon } from 'lucide-react'
|
|||||||
|
|
||||||
import { useDebouncedCallback } from 'use-debounce'
|
import { useDebouncedCallback } from 'use-debounce'
|
||||||
|
|
||||||
import {
|
|
||||||
useGetModelSources,
|
|
||||||
useModelSourcesMutation,
|
|
||||||
} from '@/hooks/useModelSource'
|
|
||||||
|
|
||||||
import Spinner from '../Loader/Spinner'
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
onSearchLocal?: (searchText: string) => void
|
onSearchLocal?: (searchText: string) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const ModelSearch = ({ onSearchLocal }: Props) => {
|
const ModelSearch = ({ onSearchLocal }: Props) => {
|
||||||
const [searchText, setSearchText] = useState('')
|
const [searchText, setSearchText] = useState('')
|
||||||
const [isSearching, setSearching] = useState(false)
|
|
||||||
const { mutate } = useGetModelSources()
|
|
||||||
const { addModelSource } = useModelSourcesMutation()
|
|
||||||
const inputRef = useRef<HTMLInputElement | null>(null)
|
const inputRef = useRef<HTMLInputElement | null>(null)
|
||||||
const debounced = useDebouncedCallback(async () => {
|
const debounced = useDebouncedCallback(async () => {
|
||||||
if (searchText.indexOf('/') === -1) {
|
if (searchText.indexOf('/') === -1) {
|
||||||
@ -30,16 +20,6 @@ const ModelSearch = ({ onSearchLocal }: Props) => {
|
|||||||
}
|
}
|
||||||
// Attempt to search local
|
// Attempt to search local
|
||||||
onSearchLocal?.(searchText)
|
onSearchLocal?.(searchText)
|
||||||
|
|
||||||
setSearching(true)
|
|
||||||
// Attempt to search model source
|
|
||||||
addModelSource(searchText)
|
|
||||||
.then(() => mutate())
|
|
||||||
.then(() => onSearchLocal?.(searchText))
|
|
||||||
.catch((e) => {
|
|
||||||
console.debug(e)
|
|
||||||
})
|
|
||||||
.finally(() => setSearching(false))
|
|
||||||
}, 300)
|
}, 300)
|
||||||
|
|
||||||
const onSearchChanged = useCallback(
|
const onSearchChanged = useCallback(
|
||||||
@ -70,20 +50,14 @@ const ModelSearch = ({ onSearchLocal }: Props) => {
|
|||||||
return (
|
return (
|
||||||
<Input
|
<Input
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
prefixIcon={
|
prefixIcon={<SearchIcon size={16} />}
|
||||||
isSearching ? (
|
placeholder="Search models..."
|
||||||
<Spinner size={16} strokeWidth={2} />
|
|
||||||
) : (
|
|
||||||
<SearchIcon size={16} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
placeholder="Search or enter Hugging Face URL"
|
|
||||||
onChange={onSearchChanged}
|
onChange={onSearchChanged}
|
||||||
onKeyDown={onKeyDown}
|
onKeyDown={onKeyDown}
|
||||||
value={searchText}
|
value={searchText}
|
||||||
clearable={searchText.length > 0}
|
clearable={searchText.length > 0}
|
||||||
onClear={onClear}
|
onClear={onClear}
|
||||||
className="border-0 bg-[hsla(var(--app-bg))]"
|
className="border-1 bg-[hsla(var(--app-bg))]"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
onSearchLocal?.(inputRef.current?.value ?? '')
|
onSearchLocal?.(inputRef.current?.value ?? '')
|
||||||
}}
|
}}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user