mirror of
https://github.com/langgenius/dify.git
synced 2026-03-18 05:09:54 +08:00
abe2b37e3a
Replace custom search input with SearchInput component (built-in clear button) and add 300ms debounce. Fix template card: use Tailwind token for icon background, fix Badge to use children with badge-s class and uppercase, match empty-tag fallback height to badge size.
35 lines
859 B
TypeScript
35 lines
859 B
TypeScript
'use client'
|
|
|
|
import { useDebounceFn } from 'ahooks'
|
|
import { memo, useCallback, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import SearchInput from '@/app/components/base/search-input'
|
|
|
|
type TemplateSearchProps = {
|
|
onChange: (value: string) => void
|
|
}
|
|
|
|
const TemplateSearch = ({
|
|
onChange,
|
|
}: TemplateSearchProps) => {
|
|
const { t } = useTranslation('workflow')
|
|
const [localValue, setLocalValue] = useState('')
|
|
const { run: debouncedOnChange } = useDebounceFn(onChange, { wait: 300 })
|
|
|
|
const handleChange = useCallback((v: string) => {
|
|
setLocalValue(v)
|
|
debouncedOnChange(v)
|
|
}, [debouncedOnChange])
|
|
|
|
return (
|
|
<SearchInput
|
|
className="!h-7"
|
|
placeholder={t('skill.startTab.searchPlaceholder')}
|
|
value={localValue}
|
|
onChange={handleChange}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default memo(TemplateSearch)
|