59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { SearchHistoryItem } from './useSearchHistory';
|
|
|
|
interface SearchHistoryDropdownProps {
|
|
items: SearchHistoryItem[];
|
|
onSelect: (item: SearchHistoryItem) => void;
|
|
onDelete: (e: React.MouseEvent, value: string) => void;
|
|
className?: string;
|
|
itemClassName?: string;
|
|
titleClassName?: string;
|
|
addressClassName?: string;
|
|
}
|
|
|
|
const SearchHistoryDropdown: React.FC<SearchHistoryDropdownProps> = ({
|
|
items,
|
|
onSelect,
|
|
onDelete,
|
|
className = 'url-input-autocomplete-dropdown',
|
|
itemClassName = 'url-input-autocomplete-item',
|
|
titleClassName = 'url-input-autocomplete-title',
|
|
addressClassName = 'url-input-autocomplete-address',
|
|
}) => {
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
<div className={className}>
|
|
{items.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={itemClassName}
|
|
style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
|
|
>
|
|
<button
|
|
type="button"
|
|
style={{ flex: 1, textAlign: 'left', background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
|
|
onMouseDown={(e) => { e.preventDefault(); onSelect(item); }}
|
|
>
|
|
<div className={titleClassName}>{item.value}</div>
|
|
{item.roadAddress && (
|
|
<div className={addressClassName}>{item.roadAddress}</div>
|
|
)}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onMouseDown={(e) => onDelete(e, item.value)}
|
|
style={{ color:'#737983', background: 'none', border: 'none', cursor: 'pointer', padding: '0 4px', opacity: 0.8, flexShrink: 0 }}
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
|
|
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SearchHistoryDropdown;
|