47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { Search, X } from 'lucide-react';
|
|
import { IconButton } from '../../components/ui';
|
|
export function TreeSearchField({
|
|
value,
|
|
onChange,
|
|
resultCount,
|
|
placeholder = '搜索…',
|
|
label = '搜索树',
|
|
}: {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
resultCount?: number;
|
|
placeholder?: string;
|
|
label?: string;
|
|
}) {
|
|
return (
|
|
<div className="m-2">
|
|
<div className="relative">
|
|
<Search
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-text-tertiary"
|
|
/>
|
|
<input
|
|
type="search"
|
|
aria-label={label}
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
placeholder={placeholder}
|
|
className="h-8 w-full rounded-md border border-border bg-input pl-7 pr-8 text-xs text-text-primary placeholder:text-text-tertiary focus-visible:ring-2 focus-visible:ring-accent/35"
|
|
/>
|
|
{value && (
|
|
<span className="absolute right-0.5 top-0.5">
|
|
<IconButton aria-label="清除搜索" tooltip="清除搜索" onClick={() => onChange('')}>
|
|
<X className="h-3.5 w-3.5" />
|
|
</IconButton>
|
|
</span>
|
|
)}
|
|
</div>
|
|
{value && resultCount !== undefined && (
|
|
<p role="status" className="px-1 pt-1.5 text-[10px] text-text-tertiary">
|
|
找到 {resultCount} 个匹配项
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|