109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
import { useState, useRef, useEffect } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { useSearch } from '../hooks/useSearch';
|
||
|
||
export function SearchBar() {
|
||
const [query, setQuery] = useState('');
|
||
const [debounced, setDebounced] = useState('');
|
||
const [open, setOpen] = useState(false);
|
||
const navigate = useNavigate();
|
||
const ref = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
const id = setTimeout(() => setDebounced(query), 300);
|
||
return () => clearTimeout(id);
|
||
}, [query]);
|
||
|
||
const { data: results, isLoading } = useSearch(debounced);
|
||
|
||
useEffect(() => {
|
||
function handleClick(e: MouseEvent) {
|
||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||
}
|
||
document.addEventListener('mousedown', handleClick);
|
||
return () => document.removeEventListener('mousedown', handleClick);
|
||
}, []);
|
||
|
||
const showResults = open && debounced.length >= 2;
|
||
|
||
return (
|
||
<div ref={ref} style={{ position: 'relative', width: 400, maxWidth: '100%' }}>
|
||
<input
|
||
type="text"
|
||
placeholder="Поиск акций и облигаций..."
|
||
value={query}
|
||
onChange={(e) => {
|
||
setQuery(e.target.value);
|
||
setOpen(true);
|
||
}}
|
||
onFocus={() => setOpen(true)}
|
||
style={{
|
||
width: '100%',
|
||
padding: '8px 12px',
|
||
border: '1px solid #ccc',
|
||
borderRadius: 6,
|
||
fontSize: 14,
|
||
}}
|
||
/>
|
||
{showResults && (
|
||
<ul
|
||
style={{
|
||
position: 'absolute',
|
||
top: '100%',
|
||
left: 0,
|
||
right: 0,
|
||
background: '#fff',
|
||
border: '1px solid #ddd',
|
||
borderRadius: 6,
|
||
marginTop: 4,
|
||
padding: 0,
|
||
listStyle: 'none',
|
||
zIndex: 100,
|
||
maxHeight: 360,
|
||
overflowY: 'auto',
|
||
boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
|
||
}}
|
||
>
|
||
{isLoading && <li style={{ padding: 12, color: '#888' }}>Загрузка...</li>}
|
||
{!isLoading && results && results.length === 0 && (
|
||
<li style={{ padding: 12, color: '#888' }}>Ничего не найдено</li>
|
||
)}
|
||
{!isLoading &&
|
||
results?.map((item) => (
|
||
<li
|
||
key={item.secid}
|
||
onClick={() => {
|
||
setOpen(false);
|
||
setQuery('');
|
||
navigate(
|
||
item.type === 'share' ? `/stocks/${item.secid}` : `/bonds/${item.secid}`,
|
||
);
|
||
}}
|
||
style={{
|
||
padding: '10px 12px',
|
||
cursor: 'pointer',
|
||
borderBottom: '1px solid #f0f0f0',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
}}
|
||
onMouseEnter={(e) => (e.currentTarget.style.background = '#f5f5f5')}
|
||
onMouseLeave={(e) => (e.currentTarget.style.background = '')}
|
||
>
|
||
<span>
|
||
<strong>{item.shortName}</strong>
|
||
<span style={{ marginLeft: 8, color: '#888', fontSize: 12 }}>{item.secid}</span>
|
||
</span>
|
||
<span
|
||
style={{ fontSize: 12, color: item.type === 'share' ? '#1976d2' : '#2e7d32' }}
|
||
>
|
||
{item.type === 'share' ? 'Акция' : 'Облигация'}
|
||
</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|